HTML Basics – Class 7 Notes
1. What is HTML?
• HTML stands for HyperText Markup Language.
• It is the language used to create webpages.
• A webpage is made up of tags written in < >.
• Most tags come in pairs:
o Opening tag <tag>
o Closing tag </tag>
Example: <p>This is a paragraph</p>
2. HTML Structure (Basic Skeleton)
Every webpage needs a basic structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first webpage.</p>
</body>
</html>
• <html> – starts the webpage
• <head> – contains page title and other information
• <title> – title shown on browser tab
• <body> – main content of the webpage
3. HTML Headings <h1> to <h6>
• Headings are used for titles or headings in a webpage.
• <h1> is the largest and <h6> is the smallest.
Example:
<h1>Main Heading (h1)</h1>
<h2>Sub Heading (h2)</h2>
<h3>Smaller Heading (h3)</h3>
<h4>Even Smaller (h4)</h4>
<h5>Small (h5)</h5>
<h6>Smallest (h6)</h6>
4. Text Formatting
(a) Changing Text Color, Font & Size
<p style="color:blue; font-size:20px; font-family:Arial;">This is blue text in Arial.</p>
• color: sets text color
• font-size: sets text size
• font-family: sets font style
(b) Background Color
<body style="background-color: lightyellow;">
<p>This page has a light yellow background.</p>
</body>
5. Text Alignment
We can align text as left, right, or center.
<p style="text-align:left;">This text is left aligned.</p>
<p style="text-align:center;">This text is centered.</p>
<p style="text-align:right;">This text is right aligned.</p>
6. Paragraphs and Lists
(a) Paragraphs
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
(b) Ordered List (Numbers)
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Output:
1. First item
2. Second item
3. Third item
(c) Unordered List (Bullets)
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
Output:
• Apple
• Banana
• Orange
7. Adding Images
(a) Inline Image
<img src="[Link]" width="200" height="150" alt="A flower picture">
• src = file name of the image (must be in the same folder)
• width & height = size of the image
• alt = text shown if image is not found
(b) Background Image
<body style="background-image: url('[Link]');">
<p>This page has a background image.</p>
</body>
8. Creating Hyperlinks (<a> tag)
• Hyperlinks connect one page to another.
<a href="[Link] Example Website</a>
If internet is not available, you can link to another local page:
<a href="[Link]">Go to Page 2</a>
PRACTICAL ACTIVITIES FOR STUDENTS
Activity 1: My First Webpage
1. Open Notepad (or any text editor).
2. Type this code:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>Hello! This is my first webpage.</p>
</body>
</html>
3. Save as [Link]
4. Double click the file → it will open in the browser.
Activity 2: Formatting & Lists
Create a page with:
• One heading
• One paragraph with different color and size
• A numbered list of 3 favorite subjects
• A bullet list of 3 favorite fruits
Activity 3: Images & Links
• Add an image (use any .jpg file saved in the same folder).
• Add a link to another HTML page.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Demo</title>
</head>
<body bgcolor="lightyellow">
<!-- Headings -->
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<!-- Paragraphs -->
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
<!-- Text formatting -->
<p><font color="blue" size="5" face="Arial">This is blue text in Arial.</font></p>
<p><b>Bold Text</b>, <i>Italic Text</i>, <u>Underlined Text</u></p>
<!-- Text alignment -->
<p align="left">This text is left aligned.</p>
<p align="center">This text is center aligned.</p>
<p align="right">This text is right aligned.</p>
<!-- Lists -->
<h3>Ordered List</h3>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ul>
<!-- Image -->
<h3>Image Example</h3>
<img src="[Link]" width="200" height="150" alt="Flower Image">
<!-- Hyperlink -->
<h3>Hyperlink Example</h3>
<a href="[Link] here to visit Google</a>
</body>
</html>
