HTML Tutorial (Version 9.
0) – Complete
Structured Summary
Part 1: HTML Fundamentals (Slides 1–27)
1. HTML Elements & Structure
HTML Elements consist of:
● Starting tag: <p>
● Content: Actual text/data
● Ending tag: </p>
Example:
<p>This is paragraph content.</p>
<h1>This is heading content.</h1>
<div>This is division content.</div>
Key Concepts:
● Singleton Tags (Empty Elements)
<br> <!-- Line break -->
<hr /> <!-- Horizontal rule -->
<img /> <!-- Image -->
● Nested Elements
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
2. HTML Attributes
Attributes define element properties in opening tags.
Core Attributes:
● id – Unique identifier
<p id="html">This para explains HTML</p>
● class – CSS classes
<div class="class1 class2 class3"></div>
● style – Inline CSS
<p style="font-family:arial; color:#FF0000;">Some text...</p>
● title – Tooltip text
<h3 title="Hello HTML!">Titled Heading</h3>
Alignment Example:
<p align="left">Left aligned</p>
<p align="center">Center aligned</p>
<p align="right">Right aligned</p>
3. HTML Headings
Six levels: <h1> (largest) → <h6> (smallest)
Best Practices:
● Use <h1> for main heading, <h2> for subheading, etc.
● Maintain hierarchy for SEO.
Custom Sizing:
<h1 style="font-size:60px;">Heading 1</h1>
4. Paragraphs & Text Formatting
Paragraphs
<p>This is a paragraph.</p>
Line Break
This is line one<br>This is line two
Preformatted Text
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
</pre>
Text Formatting Tags
Tag Effect
<b> Bold
<strong> Important
<i> Italic
<em> Emphasized
<mark> Highlighted
<small> Small text
<del> Strikethrough
<ins> Underline
<sub> Subscript
<sup> Superscript
5. HTML Styling
<tagname style="property:value;">
Examples:
<h1 style="color:blue;">Heading</h1>
<p style="font-family:courier;">Paragraph</p>
<h1 style="font-size:300%;">Big Heading</h1>
<h1 style="text-align:center;">Centered Heading</h1>
Part 2: Links, Images & Media (Slides 28–35)
6. HTML Links
<a href="url">Link text</a>
Target Attribute
<a href="[Link] target="_blank">Visit</a>
Target Values
Value Description
_blank New tab/window
_self Same window
_parent Parent frame
_top Full body window
Image as Link
<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
7. HTML Images
<img src="url" alt="description">
Example:
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
<img src="/images/[Link]" alt="HTML5 Icon" style="width:128px;height:128px;">
Part 3: Tables (Slides 36–54)
8. HTML Tables
<table style="width:100%">
<tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr>
<tr><td>Jill</td><td>Smith</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
</table>
Borders & Padding
table, th, td { border:1px solid black; border-collapse: collapse; }
th, td { padding: 15px; }
Alternating Rows
table#t01 tr:nth-child(even) { background-color:#eee; }
table#t01 tr:nth-child(odd) { background-color:#fff; }
table#t01 th { background-color:black; color:white; }
Part 4: Lists & Forms (Slides 55–71)
9. HTML Lists
Unordered
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
</ol>
Nested List
<ul>
<li>Coffee</li>
<li>Tea
<ul><li>Black tea</li><li>Green tea</li></ul>
</li>
</ul>
10. HTML Forms
Text Input
<form>
First name:<input type="text" name="firstname"><br>
Last name:<input type="text" name="lastname">
</form>
Radio Buttons
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
Submit Button
<form action="/action_page.php">
<input type="text" name="firstname" value="Mickey"><br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Textarea
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
Dropdown
<select name="cars" size="3">
<option value="volvo">Volvo</option>
</select>
Datalist (Autocomplete)
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>
Part 5: Advanced Features (Slides 72–96)
11. HTML Iframes
<iframe src="URL"></iframe>
Iframe as Link Target
<iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe>
<a href="[Link] target="iframe_a">[Link]</a>
12. HTML Colors
Examples
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="color:Tomato;">Hello World</h1>
<h1 style="border:2px solid Tomato;">Hello World</h1>
Color Values
● RGB: rgb(255, 99, 71)
● HEX: #ff6347
● HSL: hsl(9, 100%, 64%)
● RGBA: rgba(255, 99, 71, 0.5)
● HSLA: hsla(9, 100%, 64%, 0.5)
13. HTML Layout
HTML5 Semantic Elements
Element Description
<header> Page/section header
<nav> Navigation links
<section> Document section
<article> Independent content
<aside> Sidebar content
<footer> Footer
<details> Collapsible content
<summary> Heading for details
Layout Example
<div class="container">
<header><h1>City Gallery</h1></header>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
</ul>
</nav>
<article><h1>London</h1><p>London is the capital city of England...</p></article>
<footer>Copyright © [Link]</footer>
</div>
14. HTML Head Elements
<title>Page Title</title>
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
15. HTML Entities
Character Entity
< < or <
> > or >
& &
" "
Non-breaking space
16. URLs & Encoding
URL Structure: scheme://host:port/path?query#fragment
Common Schemes
● http:// – Unencrypted
● https:// – Secure
● ftp:// – File transfer
● file:// – Local files
Encoding: Non-ASCII → %xx; Spaces → + or %20
Part 6: Multimedia (Slides 97–106)
17. HTML Audio
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
18. HTML Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
Autoplay Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
</video>
Best Practices
● Always specify width & height
● Provide multiple formats
● Include fallback text
19. HTML Plug-ins
<object width="400" height="50" data="[Link]"></object>
Common Uses: Java applets, PDF readers, Flash (deprecated), Maps
20. YouTube Videos
<iframe width="560" height="315" src="[Link]
frameborder="0" allowfullscreen></iframe>
Part 7: HTML5 Advanced Features (Slides 107–131)
21. HTML5 New Elements
● Semantic elements: <article>, <aside>, <details>, <dialog>
● Form enhancements: number, date, time, range
● Graphics: <svg>, <canvas>
● Multimedia: <audio>, <video>
● Other elements: <main>, <mark>, <meter>, <progress>, <ruby>, <time>, <wbr>
22. HTML5 Drag & Drop
<img draggable="true" id="drag1" src="img_logo.gif">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function allowDrop(ev) { [Link](); }
function drag(ev) { [Link]("text", [Link]); }
function drop(ev) { [Link](); var data=[Link]("text");
[Link]([Link](data)); }
</script>
23. HTML5 Canvas
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#000000;"></canvas>
<script>
var c=[Link]("myCanvas");
var ctx=[Link]("2d");
[Link](0,0);
[Link](200,100);
[Link]();
</script>
Features: Paths, shapes, text, images, pixel-based rendering, gaming graphics
24. HTML5 SVG
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
SVG vs Canvas
Feature SVG Canvas
Resolution Independent Dependent
Event handlers Supported Not supported
Best for Large areas Gaming
25. HTML5 Geolocation
<script>
var x=[Link]("demo");
function getLocation(){
if([Link]){
[Link](showPosition);
}else{[Link]="Geolocation not supported";}
}
function showPosition(position){
[Link]="Latitude:"+[Link]+"<br>Longitude:"+[Link];
}
</script>
26. HTML5 Web Storage
Local Storage
[Link]("lastname","Smith");
[Link]("result").innerHTML=[Link]("lastname");
Session Storage
if([Link]){
[Link]=Number([Link])+1; }
else { [Link]=1; }
Benefits: ≥5MB, secure, client-side, non-blocking
27. HTML5 Web Workers
var w=new Worker("demo_workers.js");
[Link]=function(event){ [Link]("result").innerHTML=[Link]; }
[Link]();
Benefits: Background tasks, heavy computations, non-blocking UI
28. Server-Sent Events (SSE)
var source=new EventSource("demo_sse.php");
[Link]=function(event){
[Link]("result").innerHTML+=[Link]+"<br>";
};
Use Cases: Live updates, stock prices, social media feeds
Key Takeaways
● HTML Fundamentals: Elements, attributes, structure
● Content: Text formatting, links, images, multimedia
● Data Organization: Tables, lists
● User Interaction: Forms
● Page Structure: Layout, semantic HTML5
● Advanced Features: Canvas, SVG, geolocation, storage
● Modern Web: Web workers, drag-and-drop, SSE