Scribd
Upload
3 views

HTML Basics

The document provides a comprehensive overview of HTML basics, including structure, elements like headings, paragraphs, font styles, and lists, as well as multimedia elements such as audio and video. It also covers CSS, explaining its importance in web development and the different methods of applying styles: inline, internal, and external. Additionally, it includes examples of tables, drag and drop functionality, and styling techniques.

Uploaded by

sugu3922
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

HTML Basics

The document provides a comprehensive overview of HTML basics, including structure, elements like headings, paragraphs, font styles, and lists, as well as multimedia elements such as audio and video. It also covers CSS, explaining its importance in web development and the different methods of applying styles: inline, internal, and external. Additionally, it includes examples of tables, drag and drop functionality, and styling techniques.

Uploaded by

sugu3922
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

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.

You might also like