Chapter Notes: HTML – An Introduction (Class 6)
1. What is the Internet?
● The Internet is a huge network of computers connected worldwide.
● It helps computers exchange information with each other.
● One major application of the internet is the World Wide Web (WWW).
● Browsing the internet uses web em1– hyperlinks to move from one page to another.
● Webpages use language called HTML
2. What is HTML?
● HTML stands for Hyper Text Markup Language.
● It is a computer language used to create web pages.
● Anyone connected to the internet can view HTML pages.
● HyperText = text that links to other pages.
● Markup = highlighting text to show structure and formatting.
3. How HTML Works
● HTML describes the content and format of a web page.
● Browsers (Chrome, Edge, etc.) read HTML tags and display the content.
● Tags are special markers written inside angle brackets < >.
4. Types of HTML Tags
(a) Container Tags
● Have an opening tag and a closing tag.
● Closing tax must always include a / slash before the tag name.
● < title> HTML </title>
● Opening tag, text, closing tag
Example: <html> </html>, <body> </body>
(b) Empty Tags
● Have only one tag, no closing part.
Example: <br> for line break, <img> for inserting image.
5. Essential HTML Tags
These tags form the basic structure of every HTML page:
1. <html> </html> – Defines the start and end of the document.
2. <head> </head> – Contains information not visible on the page.
3. <title> </title> – Sets the title shown on the browser tab.
4. <body> </body> – Contains everything visible on the web page.
6. Rules for Writing HTML Code
1. Tag names and attribute names are not case sensitive.
2. Attribute values must be in quotes.
3. Attribute values may be case sensitive.
4. Tags can be written in one line or multiple lines, with or without spaces.
7. Basic HTML Document Structure
<HTML>
<HEAD>
<TITLE> Title of the Web Page </TITLE>
</HEAD>
<BODY>
Content of the page
</BODY>
</HTML>
● Head Section → Not displayed on page.
● Body Section → All visible content is written here.
8. Creating and Saving an HTML Document
Steps
1. Open Notepad.
2. Type the HTML code.
3. Click File → Save As.
4. Select All Files.
5. Choose the location.
6. Save the file with .html extension (e.g., [Link]).
9. Previewing a Web Page
1. Open a web browser (Microsoft Edge).
2. Click File → Open.
3. Click Browser button.
4. Select the saved HTML file.
5. Double-click to view the web page.
10. Starting a New Paragraph
Use <p> </p> tag.
Align Attribute Values
● center → Center aligned
● right → Right aligned
● left → Left aligned
● justify → Evenly spaced text
11. Starting a New Line
Use <br> tag.
✔ No closing tag needed.
12. Heading Levels
HTML offers 6 heading tags:
<H1> … </H1>
<H2> … </H2>
<H3> … </H3>
<H4> … </H4>
<H5> … </H5>
<H6> … </H6>
● H1 is largest
● H6 is smallest
13. Creating Lists
Ordered List (Numbered List)
Uses <ol> and <li> tags.
Example:
<OL>
<LI> Keyboard </LI>
<LI> Mouse </LI>
</OL>
14. Editing an Existing HTML Document
Steps:
1. Locate the file.
2. Right-click → Open With.
3. Select Notepad.
4. Make changes.
5. Press Ctrl + S to save.
6. Press F5 in the browser to refresh.
15. Designing a Web Page
The chapter includes a sample web page with:
● Background color attribute → bgcolor="yellow"
● Font attributes → <font face="…" size="…" color="…">
● Underline tag → <u>
● Bold tag → <b>
● Italic tag → <i>
● Horizontal line → <hr>
● Alignment → align="right" & align="center"
16. Important HTML Attributes & Tags Used
Tag Purpose
<html> Start of HTML page
<head> Contains title and metadata
<title> Shows title on browser tab
<body> Page content
<p> Paragraph
<br> Line break
<h1> to <h6> Headings
<ol> Numbered list
<li> List items
<u> Underline
<b> Bold
<i> Italic
<font> Change font style
<hr> Horizontal line
bgcolor Background color
align Alignment of text
Also included from Factopedia (extra info given in book):
● Code → symbolic arrangement of data.
● FrontPage → popular web-authoring software.
● DreamWeaver → used for designing web pages.
