HTML BASICS
Header
Output
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Paragraph
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of
the browser window. If you resize the browser window,
the number of lines in this paragraph will change.
</p>
</body>
</html>
Font Style
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
<h1 style="text-align:left;">Centered Heading</h1>
<p style="text-align:left;">Centered paragraph.</p>
<h1 style="text-align:right;">Centered Heading</h1>
<p style="text-align:right;">Centered paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body bgcolor="#FFFF00">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p><a href="https://www.autmdu.in/#/">Visit AURC
Madurai</a></p>
</body>
</html>
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the
table.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Cell that spans two columns</h2>
<p>To make a cell span more than one column, use the colspan attribute.</p>
<table style="width:100%">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
</body>
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="img_chania.jpg" alt="Flowers in Chania"
width="460" height="345">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
resize: none;
}
</style>
</head>
<body>
<h1>The textarea element - Disable default resize option</h1>
<p><label for="w3review">Review of W3Schools:</label></p>
<textarea id="w3review" name="w3review" rows="4"
cols="50">
At w3schools.com you will learn how to make a website. They
offer free tutorials in all web development technologies.
</textarea>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
What is CSS
CSS is the acronym for "Cascading Style Sheet". It's a style sheet language used for
describing the presentation of a document written in a markup language like HTML. CSS helps
the web developers to control the layout and other visual aspects of the web pages. CSS
plays a crucial role in modern web development by providing the tools necessary to create
visually appealing, accessible, and responsive websites.
Inline CSS: Inline CSS is applied directly to
an HTML element using the style attribute.
It has the highest priority among the three
methods.
Internal CSS: Internal CSS is defined within
the <style> tag inside the <head> section of
an HTML document.
External CSS: External CSS is written in
a separate .css file and linked to the
HTML document using the <link> tag.
This is the recommended method for large
projects as it improves maintainability.
