Learn HTML - From Hello World to Styling
1. Your First HTML Program – Hello World
Every HTML document starts with a basic structure:
<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello World
</body>
</html>
When you open this file in a browser, it will simply show the text Hello World.
---
2. Adding a Heading
Headings make text larger and more important. HTML has headings from <h1> (largest) to <h6> (smallest).
Example:
<h1>This is a Main Heading</h1>
<h2>This is a Smaller Heading</h2>
---
3. Writing a Paragraph (Passage)
Paragraphs in HTML are made using <p>.
<p>This is my first paragraph. I can write a lot of text here and the browser will automatically arrange it neatly.</p>
---
4. Adding a Title to the Browser Tab
The <title> tag goes inside <head> and shows text on the browser’s tab.
<head>
<title>My Awesome Page</title>
</head>
---
5. Creating a Link
Links are made using the <a> tag.
<a href="https://example.com">Click Here</a>
When clicked, it opens the given web address.
---
6. Adding an Image
<img src="image.jpg" alt="Description of image">
---
7. Bold and Italic Text
<b>This is bold</b>
<i>This is italic</i>
---
8. Line Breaks
Hello<br>World
This puts "World" on the next line.
---
9. Ordered List (Numbers)
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
---
10. Unordered List (Bullets)
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
---
11. Adding a Horizontal Line
<hr>
---
12. Adding a Background Color
CSS is used to make HTML colorful and beautiful.
Example:
<body style="background-color: lightblue;">
---
13. Changing Text Color
<p style="color: red;">This text is red.</p>
---
14. Changing Font Size
<p style="font-size: 20px;">This text is larger.</p>
---
15. Centering Text
<p style="text-align: center;">Centered Text</p>
---
16. Combining Multiple Styles
<p style="color: green; font-size: 25px; text-align: center;">Styled Text</p>
---
17. Adding a Simple CSS Section
Instead of writing styles inside each tag, we can put them inside <style> in the <head> section.
<head>
<style>
body { background-color: lightyellow; }
h1 { color: blue; text-align: center; }
p { color: darkgreen; font-size: 18px; }
</style>
</head>
---
18. Adding a Table
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
---
19. Adding Comments (Not Shown in Browser)
<!-- This is a comment -->
---
20. Putting It All Together
A complete HTML page with heading, paragraph, link, and style:
<html>
<head>
<title>Learning HTML</title>
<style>
body { background-color: #f0f0f0; }
h1 { color: darkblue; }
p { color: black; font-size: 18px; }
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my first HTML page with CSS. HTML is used for content, and CSS makes it colorful and beautiful!</p>
<a href="https://example.com">Visit Example</a>
</body>
</html>
---
Final Note:
HTML is for content - headings, paragraphs, links, images, tables.
CSS is for styling - colors, fonts, backgrounds, spacing, making it look beautiful.
HTML Learning Book - 50+ Examples-
---
1. Hello World - Your First HTML Page
<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello World
</body>
</html>
---
2. Headings - h1 to h6
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Heading</h3>
<h4>Even Smaller</h4>
<h5>Almost Tiny</h5>
<h6>Smallest Heading</h6>
---
3. Paragraphs
<p>This is my first paragraph in HTML.</p>
---
4. Title in Browser Tab
<head>
<title>My Webpage</title>
</head>
---
5. Line Break
Hello<br>World
---
6. Horizontal Line
<hr>
---
7. Bold and Italic
<b>This is bold</b>
<i>This is italic</i>
---
8. Underline
<u>This is underlined</u>
---
9. Superscript & Subscript
H<sub>2</sub>O
X<sup>2</sup>
---
10. Creating Links
<a href="https://example.com">Visit Example</a>
---
11. Open Link in New Tab
<a href="https://example.com" target="_blank">Open in New Tab</a>
---
12. Adding Images
<img src="image.jpg" alt="Description">
---
13. Image with Width & Height
<img src="image.jpg" width="200" height="150">
---
14. Ordered List (Numbers)
<ol>
<li>First</li>
<li>Second</li>
</ol>
---
15. Unordered List (Bullets)
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
---
16. Nested Lists
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Orange</li>
</ul>
</li>
</ul>
---
17. Table - Basic
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>John</td><td>25</td></tr>
</table>
---
18. Table with Caption
<table border="1">
<caption>Student List</caption>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>John</td><td>25</td></tr>
</table>
---
19. Table Row Span
<td rowspan="2">Merged Cell</td>
---
20. Table Column Span
<td colspan="2">Merged Cell</td>
---
21. Background Color in Body
<body style="background-color: lightblue;">
---
22. Text Color
<p style="color: red;">This is red text</p>
---
23. Font Size
<p style="font-size: 20px;">Bigger text</p>
---
24. Centered Text
<p style="text-align: center;">Centered</p>
---
25. CSS in Head
<style>
h1 { color: blue; }
p { color: green; }
</style>
---
26. CSS Class
<style>
.highlight { color: red; }
</style>
<p class="highlight">Important text</p>
---
27. CSS ID
<style>
#main { background-color: yellow; }
</style>
<p id="main">Special paragraph</p>
---
28. Adding a Comment
<!-- This is a comment -->
---
29. Marquee (Scrolling Text)
<marquee>Scrolling Text</marquee>
---
30. Preformatted Text
<pre>
This is
exactly as typed
in HTML
</pre>
---
31. Blockquote
<blockquote>This is a quoted text.</blockquote>
---
32. Code Tag
<code>print("Hello")</code>
---
33. Button
<button>Click Me</button>
---
34. Button with Link
<button onclick="window.location.href='https://example.com'">Go</button>
---
35. Form - Basic
<form>
Name: <input type="text">
</form>
---
36. Form with Submit Button
<form>
Name: <input type="text">
<input type="submit" value="Send">
</form>
---
37. Checkbox
<input type="checkbox"> I agree
---
38. Radio Button
<input type="radio" name="choice"> Yes
<input type="radio" name="choice"> No
---
39. Drop-down Menu
<select>
<option>Apple</option>
<option>Banana</option>
</select>
---
40. Textarea
<textarea rows="4" cols="30"></textarea>
---
41. Audio
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
---
42. Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
---
43. Favicon
<link rel="icon" href="favicon.ico" type="image/x-icon">
---
44. Inline Style
<p style="color: blue;">Blue text</p>
---
45. Div Tag
<div style="background-color: yellow;">Content here</div>
---
46. Span Tag
<p>This is <span style="color:red;">red</span> text.</p>
---
47. Link to Email
<a href="mailto:test@example.com">Email Us</a>
---
48. Link to Phone Number
<a href="tel:+123456789">Call Us</a>
---
49. Image as a Link
<a href="https://example.com"><img src="image.jpg"></a>
---
50. Responsive Image
<img src="image.jpg" style="max-width: 100%;">
---
51. Inline CSS for Multiple Styles
<p style="color: red; font-size: 20px; text-align: center;">Styled</p>
---
52. CSS for All Paragraphs
<style>
p { color: purple; }
</style>
---
53. Gradient Background
<style>
body {
background: linear-gradient(to right, red, yellow);
}
</style>
---
54. Shadow for Text
<style>
h1 { text-shadow: 2px 2px 5px gray; }
</style>
---
55. Border Around Element
<style>
p { border: 2px solid black; padding: 10px; }
</style>
---
Final Reminder:
HTML = Structure & Content.
CSS = Colors, Styles, Layouts.
JavaScript (not shown here) = Makes it interactive.
