HTML Tutorial PDF (Beginner → Intermediate) - Example-Rich Version
1. Introduction to HTML
• HTML (HyperText Markup Language) is the standard language for creating web pages.
• Basic structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
Example explanation: This displays "Hello, World!" in the browser.
2. HTML Elements & Tags
• Headings: <h1> to <h6>
<h1>Main Heading</h1>
<h3>Subheading</h3>
• Paragraph: <p>
<p>This is a paragraph.</p>
• Links: <a>
<a href="https://www.example.com">Visit Example</a>
• Images: <img>
<img src="image.jpg" alt="A beautiful scene">
1
• Lists:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
• Tables:
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>25</td></tr>
</table>
Each example displays structure and content in a browser.
3. HTML Forms
• Basic form:
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
• Other inputs:
<input type="email" name="email">
<input type="password" name="password">
<input type="checkbox" name="subscribe"> Subscribe
<input type="radio" name="gender" value="male"> Male
Example explanation: Users can enter info and submit.
2
4. HTML Media
• Image example:
<img src="photo.jpg" alt="Sample Photo">
• Audio example:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
• Video example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
Explanation: Browser can display images, play audio/video.
5. HTML Semantic Elements
<header><h1>Header Section</h1></header>
<nav><a href="#home">Home</a> | <a href="#about">About</a></nav>
<section><h2>Section Title</h2><p>Content here.</p></section>
<article><h2>Article</h2><p>Article content...</p></article>
<aside><p>Sidebar info</p></aside>
<footer><p>Footer info</p></footer>
Explanation: Semantic tags improve structure & accessibility.
6. HTML Advanced Topics
• Iframe example:
<iframe src="page.html" width="300" height="200"></iframe>
• Meta tags:
3
<meta charset="UTF-8">
<meta name="description" content="Free HTML tutorial">
• Canvas example:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#000000;"></canvas>
<script>
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 50);
</script>
Explanation: iframe embeds another page; canvas allows drawing.
7. Best Practices
• Always close tags.
• Use semantic tags.
• Indent code.
• Validate with W3C Validator. No examples needed for best practices.
8. Mini Project: Simple Portfolio Page
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
<style>
body { font-family: Arial; }
h1 { color: navy; }
p { color: gray; }
</style>
</head>
<body>
<header><h1>Welcome</h1></header>
<section>
<h2>About Me</h2>
<p>I am learning HTML.</p>
4
</section>
<footer><p>Contact: [email protected]</p></footer>
</body>
</html>
Explanation: Shows complete HTML structure with semantic tags and inline CSS.
9. Summary
• HTML structures web pages.
• Every tag and element has specific use.
• Combine with CSS & JS for full web development.
End of Example-Rich HTML PDF Tutorial
