HTML Notes
HTML Structure
HTML (HyperText Markup Language) is the standard language used to create web
pages.
Every HTML document has a basic structure.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
Welcome to HTML!
</body>
</html>
Let's understand each tag.
1. <html> Tag
The <html> tag is the root (main) tag of an HTML document.
It tells the browser that the document is an HTML page.
Every HTML element is written inside this tag.
It contains two main sections:
o <head>
o <body>
Syntax
<html>
</html>
Example
<html>
<head>
</head>
<body>
Hello Students
</body>
</html>
2. <head> Tag
The <head> section contains information about the webpage, not the content
displayed on the page.
It stores information that helps the browser understand the webpage.
Examples of information inside <head>:
Title of webpage
CSS styles
JavaScript
Character encoding
Meta information
Syntax
<head>
</head>
Example
<head>
<title>School Website</title>
</head>
Important Point
The contents inside the <head> tag are generally not visible on the webpage
(except the title shown on the browser tab).
3. <title> Tag
The <title> tag defines the title of the webpage.
The title appears:
Browser tab
Browser history
Search engine results
Bookmarks
Syntax
<title>Page Title</title>
Example
<title>New Heights School</title>
Browser Tab:
New Heights School
Important Rules
Written inside the <head> section.
Only one <title> tag should be used.
It does not appear inside the webpage.
4. <body> Tag
The <body> tag contains everything that is visible on the webpage.
Examples:
Text
Images
Tables
Videos
Links
Buttons
Headings
Everything that users see is written inside the <body> tag.
Syntax
<body>
</body>
Example
<body>
<h1>Welcome</h1>
<p>This is my first webpage.</p>
</body>
Output
Welcome
This is my first webpage.
What are Attributes?
An attribute provides additional information about an HTML element.
Attributes modify the behavior or appearance of an element.
General Syntax
<tag attribute="value">
Example
<body bgcolor="yellow">
Here,
Tag → body
Attribute → bgcolor
Value → yellow
Rules of Attributes
1. Written in the opening tag.
2. Written as name="value".
3. Multiple attributes can be used in one tag.
4. Values are usually enclosed in quotation marks.
Example
<body bgcolor="lightblue" text="black">
Attributes Used with <body> Tag
The <body> tag supports several attributes that control the appearance of the
webpage. Many of these are deprecated in HTML5, but they are still taught for
understanding older HTML and some school syllabi.
1. bgcolor Attribute
bgcolor changes the background color of the webpage.
Syntax
<body bgcolor="yellow">
Example
<body bgcolor="lightblue">
Welcome Students
</body>
Output
Background color becomes light blue.
You can use:
bgcolor="red"
bgcolor="green"
bgcolor="pink"
bgcolor="#00FF00"
bgcolor="rgb(255,0,0)"
2. background Attribute
The background attribute sets an image as the background of the webpage.
Syntax
<body background="[Link]">
Example
<body background="[Link]">
Output
The image [Link] appears as the page background.
Note: In HTML5, using CSS (background-image) is recommended instead of the
background attribute.
3. text Attribute
The text attribute changes the default text color of the webpage.
Syntax
<body text="blue">
Example
<body text="red">
Welcome to HTML
</body>
Output
The text appears in red.
4. link Attribute
The link attribute sets the color of unvisited hyperlinks.
Syntax
<body link="blue">
Example
<body link="green">
<a href="[Link]
</body>
Output
The unvisited link appears in green.
5. alink Attribute
alink stands for Active Link.
It changes the color of a hyperlink while it is being clicked.
Syntax
<body alink="red">
Example
<body alink="red">
<a href="[Link]">Click Here</a>
</body>
Output
While the mouse button is pressed on the link, it appears red.
6. vlink Attribute
vlink stands for Visited Link.
It changes the color of a link after it has already been visited.
Syntax
<body vlink="purple">
Example
<body vlink="purple">
<a href="[Link]">Visit Page</a>
</body>
Output
After visiting the page, the link appears purple.
7. leftmargin Attribute
leftmargin creates extra space between the left edge of the browser window and
the webpage content.
Syntax
<body leftmargin="50">
Example
<body leftmargin="100">
Welcome Students
</body>
Output
The content starts 100 pixels away from the left edge.
Note: In HTML5, CSS (margin-left) is preferred.
8. topmargin Attribute
topmargin creates extra space between the top edge of the browser window and
the webpage content.
Syntax
<body topmargin="40">
Example
<body topmargin="60">
Hello World
</body>
Output
The content starts 60 pixels below the top edge.
Note: In HTML5, CSS (margin-top) is preferred.
Example Program Using Body Attributes
<html>
<head>
<title>Body Attributes Example</title>
</head>
<body bgcolor="lightyellow"
text="blue"
link="green"
alink="red"
vlink="purple"
leftmargin="50"
topmargin="40">
<h1>Welcome to HTML</h1>
<p>This webpage demonstrates various body attributes.</p>
<a href="[Link] Google</a>
</body>
</html>
Table
Tag/Attribute Purpose
<html> Root element of an HTML document
<head> Contains metadata, title, styles, and scripts
<title> Sets the webpage title shown on the browser tab
<body> Contains all visible webpage content
bgcolor Sets the background color of the page
Tag/Attribute Purpose
background Sets a background image
text Sets the default text color
link Sets the color of unvisited hyperlinks
alink Sets the color of an active (clicked) hyperlink
vlink Sets the color of visited hyperlinks
leftmargin Adds space from the left edge of the page
Adds space from the top edge of the page
topmargin
Important Note
The attributes bgcolor, background, text, link, alink, vlink, leftmargin, and
topmargin are deprecated in HTML5, meaning modern web development uses
CSS instead. However, these attributes are still included in many school curricula
and are useful for understanding older HTML documents and examination
purposes.
Color Coding in HTML (For Class XI/XII
Notes)
Colors make a webpage attractive and improve its appearance. In HTML, colors can be specified
in different ways. The three most common methods are:
1. Color Name
2. RGB Value
3. Hexadecimal (HEX) Value
What is RGB?
RGB stands for:
R → Red
G → Green
B → Blue
A computer screen creates every color by mixing different amounts of these three primary
colors.
Each color can have a value from 0 to 255.
0 = No intensity of that color
255 = Maximum intensity of that color
RGB Syntax
rgb(R, G, B)
Example:
rgb(255,0,0)
Means
Red = 255 (maximum)
Green = 0
Blue = 0
Output: Pure Red
Why is the Range 0–255?
Each RGB color uses 8 bits (1 byte) to store its intensity.
Minimum value = 0
Maximum value = 255
Therefore,
Red → 0 to 255
Green → 0 to 255
Blue → 0 to 255
Since there are 256 possible values (0–255) for each color:
256 × 256 × 256 = 16,777,216 colors
So, RGB can produce more than 16.7 million different colors.
Understanding RGB with Examples
1. Red Color
rgb(255,0,0)
Color Value
Red 255
Green 0
Blue 0
Output → ❤️Red
2. Green Color
rgb(0,255,0)
Output → 💚 Green
3. Blue Color
rgb(0,0,255)
Output → 💙 Blue
4. White Color
rgb(255,255,255)
All three colors are at maximum intensity.
Output → White
5. Black Color
rgb(0,0,0)
No light from any color.
Output → Black
6. Yellow
Yellow is made by mixing Red + Green.
rgb(255,255,0)
Output → Yellow
7. Cyan
Cyan is made by mixing Green + Blue.
rgb(0,255,255)
Output → Cyan
8. Magenta
Magenta is made by mixing Red + Blue.
rgb(255,0,255)
Output → Magenta
9. Gray
Equal values of all three colors produce shades of gray.
rgb(128,128,128)
Output → Gray
Common RGB Color Table
Color RGB Value
Black rgb(0,0,0)
White rgb(255,255,255)
Red rgb(255,0,0)
Green rgb(0,255,0)
Blue rgb(0,0,255)
Yellow rgb(255,255,0)
Cyan rgb(0,255,255)
Magenta rgb(255,0,255)
Gray rgb(128,128,128)
Orange rgb(255,165,0)
Pink rgb(255,192,203)
Brown rgb(165,42,42)
Using RGB in HTML
RGB values are commonly used with the style attribute in HTML.
Example 1: Text Color
<p style="color: rgb(255,0,0);">
This text is red.
</p>
Example 2: Background Color
<body style="background-color: rgb(173,216,230);">
Welcome to HTML
</body>
Here, rgb(173,216,230) produces a light blue background.
Color Names
Instead of RGB values, HTML also supports predefined color names.
Examples:
red
green
blue
yellow
pink
orange
black
white
purple
gray
brown
Example:
<p style="color:red;">
Hello Students
</p>
Hexadecimal (HEX) Color Code
Another common method of specifying colors is the Hexadecimal (HEX) Code.
Syntax
#RRGGBB
RR → Red
GG → Green
BB → Blue
Each pair uses hexadecimal digits:
0 1 2 3 4 5 6 7 8 9 A B C D E F
where:
A = 10
B = 11
C = 12
D = 13
E = 14
F = 15
Examples
Color RGB HEX
Red rgb(255,0,0) #FF0000
Green rgb(0,255,0) #00FF00
Blue rgb(0,0,255) #0000FF
Black rgb(0,0,0) #000000
White rgb(255,255,255) #FFFFFF
Yellow rgb(255,255,0) #FFFF00
Difference Between RGB and HEX
RGB HEX
Uses decimal values (0–255) Uses hexadecimal values (00–FF)
Written as rgb(R,G,B) Written as #RRGGBB
Easier to understand for beginners Commonly used in professional web design
Example: rgb(255,0,0) Example: #FF0000
Exam Points to Remember
RGB stands for Red, Green, Blue.
Each color value ranges from 0 to 255.
RGB can produce 16,777,216 different colors.
Black = rgb(0,0,0)
White = rgb(255,255,255)
Yellow = rgb(255,255,0) (Red + Green)
HEX colors start with # and use hexadecimal digits (0–9 and A–F).