HTML
Module 1: Introduction to the Web
& HTML
• A website = collection of web pages
• Web browser displays websites (Chrome, Edge,
Firefox)
• HTML = HyperText Markup Language
• Not a programming language, a markup
language
Example:
<p>This is a paragraph</p>
Module 2: Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello Students!</h1>
<p>This is my first HTML program.</p>
</body>
</html>
• <!DOCTYPE html> → tells browser this is HTML5
• <html> … </html> → Root of the webpage
• <head> → Information about the page (not visible)
• <title> → Title shown in browser tab
• <body> → Main content shown on screen
Module 3: Basic Tags in HTML
Headings: <h1> to <h6>
Paragraph: <p>
Line Break: <br>
Horizontal Line: <hr>
Example:
<h1>Main Title</h1>
<p>This is a paragraph.</p>
Text Color in HTML
There are 3 common ways to set text color:
• 1. Using the style attribute (Inline CSS)
• <p style="color:red;">This is red text</p>
• <p style="color:blue;">This is blue text</p>
• <p style="color:green;">This is green text</p>
• 👉 Browser will display the text in red, blue, green.
2. Using Hexadecimal Color Codes
Each color is represented with a code like #RRGGBB (Red, Green, Blue).
<p style="color:#FF0000;">This is Red</p>
<p style="color:#0000FF;">This is Blue</p>
<p style="color:#008000;">This is Green</p>
3. Using RGB Values
<p style="color:rgb(255,0,0);">This is Red</p>
<p style="color:rgb(0,0,255);">This is Blue</p>
<p style="color:rgb(0,128,0);">This is Green</p>
COLORS
<!DOCTYPE html>
<html>
<head>
<title>Text Colors</title>
</head>
<body>
<h1 style="color:purple;">Welcome to HTML Colors</h1>
<p style="color:red;">This is Red Text</p>
<p style="color:blue;">This is Blue Text</p>
<p style="color:green;">This is Green Text</p>
<p style="color:#FFA500;">This is Orange Text (Hex)</p>
<p style="color:rgb(128,0,128);">This is Purple Text (RGB)</p>
</body>
</html>
Color Name Hex Value RGB Value Preview
Red #FF0000 rgb(255,0,0) 🔴
Green #008000 rgb(0,128,0) 🟢
Blue #0000FF rgb(0,0,255) 🔵
Black #000000 rgb(0,0,0) ⚫
White #FFFFFF rgb(255,255,255)⚪
Gray #808080 rgb(128,128,128)
Yellow #FFFF00 rgb(255,255,0) 🟡
Orange #FFA500 rgb(255,165,0) 🟠
Pink #FFC0CB rgb(255,192,203) 🌸
Purple #800080 rgb(128,0,128) 🟣
Brown #A52A2A rgb(165,42,42) 🟤
Cyan (Aqua) #00FFFF rgb(0,255,255) 🟦
Lime #00FF00 rgb(0,255,0) 🟩
Magenta #FF00FF rgb(255,0,255) 💜
Navy #000080 rgb(0,0,128) 🔵
Gold #FFD700 rgb(255,215,0) ⭐
Module 4: Links, Images & Lists
Links:
<a href='[Link] Google</a>
Images:
<img src='[Link]' alt='Flower' width='200'
height='150'>
Lists:
<ol><li>First</li></ol>
<ul><li>Apple</li></ul>
Module 5: Formatting Text
<b>Bold</b>,
<i>Italic</i>,
<u>Underline</u>,
<mark>Highlight</mark>,
<small>Small</small>,
<del>Deleted</del>
<p>a<sup>b</sup></p>
<p>a<sub>b</sub></p>
Module 6: Hands-On Project – My
Intro Page
Task: Create a page with:
1. Name in <h1>
2. A paragraph about yourself
3. List of hobbies
4. An image
5. A link to favorite website
Sample Code:
<html>
<head><title>My Webpage</title></head>
<body>
<h1>Hello! I am XXX</h1>
<p>I am learning HTML.</p>
</body>
</html>
• What does HTML stand for?
• Difference between <p> and <br>?
• Syntax for inserting image?
• Difference between <ol> and <ul>?