Setting Up HTML Document Basic 5 Computer Studies Lesson Note
Topic: Setting Up HTML Document
Learning Objectives: By the end of the lesson, pupils should be able to:
- Understand how HTML works
- Identify HTML tags
- Understand document structure
- Learn HTML syntax
What is HTML?
HTML stands for HyperText Markup Language. It is the standard language used to create web pages and websites. HTML tells the web browser how to display text, images, links, and other content on a webpage.
Key points about HTML:
- Markup language – Uses tags to mark up content
- Structure creator – Organizes content on web pages
- Browser interpreter – Web browsers read HTML and display it as websites
- Foundation of web – All websites use HTML as their base
How HTML Works:
- Creation Process:
- Write HTML code – Using text editor or web development software
- Use HTML tags – Mark up content with special codes
- Save as .html file – File extension tells browser it’s a web page
- Open in browser – Browser reads HTML and displays formatted page
- Browser Interpretation:
- Browser reads HTML – Internet Explorer, Chrome, Firefox, Safari
- Interprets tags – Understands what each tag means
- Displays content – Shows formatted text, images, and layout
- Interactive elements – Handles links, buttons, and forms
HTML Document Structure:
Every HTML document follows the same basic structure:
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>
Document Structure Components:
- DOCTYPE Declaration
- <!DOCTYPE html> – Tells browser this is an HTML5 document
- Must be first line – Appears at very beginning of file
- Not an HTML tag – Special declaration for browser
- HTML Element
- <html> – Root element that contains all other elements
- Opening tag – <html> starts the HTML document
- Closing tag – </html> ends the HTML document
- Contains everything – All content goes between these tags
- Head Section
- <head> – Contains information about the document
- Not visible – Content doesn’t appear on the webpage
- Metadata – Information for browsers and search engines
- Includes: Title, links to stylesheets, character encoding
- Title Element
- <title> – Sets the title shown in browser tab
- Appears in browser tab – Text shown at top of browser window
- Important for search engines – Used in search results
- Should be descriptive – Clearly describe page content
- Body Section
- <body> – Contains all visible content of webpage
- Everything users see – Text, images, links, videos
- Main content area – Where all page content goes
- Most HTML elements – Headings, paragraphs, lists go here
HTML Tags and Syntax:
What are HTML Tags? HTML tags are special codes that tell the browser how to format and display content. They are written between angle brackets < >.
Tag Structure:
- Opening tag: <tagname> – Starts the element
- Content: The text or other elements inside
- Closing tag: </tagname> – Ends the element (note the forward slash)
Basic HTML Tags:
- Heading Tags
<h1>Biggest Heading</h1>
<h2>Second Biggest Heading</h2>
<h3>Third Biggest Heading</h3>
<h4>Fourth Heading</h4>
<h5>Fifth Heading</h5>
<h6>Smallest Heading</h6>
- Six levels – h1 is largest, h6 is smallest
- Used for titles – Page titles, section headers
- Automatic formatting – Browser makes them bold and larger
- Paragraph Tag
<p>This is a paragraph of text.</p>
<p>This is another paragraph.</p>
- Contains text – Regular content text goes in paragraphs
- Automatic spacing – Browser adds space between paragraphs
- Line breaks – Long paragraphs wrap to multiple lines
- Line Break Tag
<p>First line<br>Second line</p>
- Self-closing tag – No closing tag needed
- Forces line break – Makes text continue on next line
- No paragraph spacing – Just moves to next line
- Horizontal Rule
<hr>
- Self-closing tag – Creates horizontal line across page
- Divides content – Separates sections visually
- Automatic styling – Browser draws line automatically
- Text Formatting Tags
<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<strong>Important text</strong>
<em>Emphasized text</em>
- List Tags
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>
<ol>
    <li>First numbered item</li>
    <li>Second numbered item</li>
    <li>Third numbered item</li>
</ol>
- ul – Unordered list (bullet points)
- ol – Ordered list (numbers)
- li – List item (individual items)
- Link Tag
<a href=”https://www.google.com”>Click here to visit Google</a>
- href attribute – Specifies where link goes
- Clickable text – Text between tags becomes clickable
- Navigation – Allows movement between pages
- Image Tag
<img src=”picture.jpg” alt=”Description of picture”>
- Self-closing tag – No closing tag needed
- src attribute – Specifies image file location
- alt attribute – Description for screen readers and if image doesn’t load
HTML Syntax Rules:
- Tag Structure Rules:
- Use angle brackets – All tags must be in < > brackets
- Closing tags need slash – </tagname> to close elements
- Case insensitive – <P> and <p> work the same, but lowercase preferred
- Proper nesting – Tags must be closed in reverse order of opening
- Attribute Rules:
<tagname attribute=”value”>Content</tagname>
- Inside opening tag – Attributes go in the opening tag only
- Use quotes – Attribute values should be in quotes
- Space separated – Multiple attributes separated by spaces
- No spaces around equals – attribute=”value” not attribute = “value”
- Common Mistakes to Avoid:
- Forgetting closing tags – Every opening tag needs closing tag
- Improper nesting – <b><i>text</b></i> is wrong, should be <b><i>text</i></b>
- Missing quotes – Attributes should have quotes around values
- Unclosed tags – Self-closing tags like <br> don’t need closing tags
Simple HTML Document Example:
<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <h2>About Me</h2>
    <p>My name is [Your Name] and I am learning HTML.</p>
    <p>I am in Primary 5 and I enjoy learning about computers.</p>
   Â
    <h2>My Favorite Things</h2>
    <ul>
        <li>Playing football</li>
        <li>Reading books</li>
        <li>Learning about technology</li>
    </ul>
   Â
    <hr>
    <p>Thank you for visiting my webpage!</p>
</body>
</html>
Practical HTML Experiments:
Experiment 1: Basic Page
- Create simple HTML page with title, heading, and paragraph
- Save as .html file and open in web browser
- See how browser displays formatted content
Experiment 2: Text Formatting
- Use bold, italic, and underline tags
- Create headings of different sizes
- Add line breaks and horizontal rules
Experiment 3: Lists and Links
- Create both ordered and unordered lists
- Add links to favorite websites
- Experiment with different list structures
Experiment 4: Complete Page
- Combine all learned elements
- Create “About Me” page with multiple sections
- Include headings, paragraphs, lists, and formatting
LESSON 3: SETTING UP HTML DOCUMENT (Multiple Choice Questions)
- HTML stands for: a) High Tech Markup Language b) HyperText Markup Language c) Home Tool Making Language d) Happy Text Making Language
- Which tag is used to create the largest heading? a) <h6> b) <h3> c) <h1> d) <p>
- Every HTML document must start with: a) <html> b) <body> c) <!DOCTYPE html> d) <head>
- The content that appears on the webpage is placed in: a) <head> section b) <title> section c) <body> section d) <!DOCTYPE> section
- Which tag is used to create a paragraph? a) <h1> b) <p> c) <br> d) <html>
Third Term Computer Studies Lesson Notes for Other Topics
Standard Toolbar Buttons
Explore lesson notes covering all topics.
Menu Bar
Explore lesson notes covering all topics.
Main Menus In Microsoft Word
Explore lesson notes covering all topics.
Typing And Saving On Microsoft Word
Explore lesson notes covering all topics.
Better Typing Skills
Explore lesson notes covering all topics.
Formatting in Microsoft Word
Explore lesson notes covering all topics.
Microsoft Word - Toolbar
Explore lesson notes covering all topics.
Shutting Down The Computer
Explore lesson notes covering all topics.
Classification of Computers By Purpose 2
Explore lesson notes covering all topics.
Classification of Computer By Purpose
Explore lesson notes covering all topics.
Classification Of Computers - 4th & 5th Generation
Explore lesson notes covering all topics.
Classification Of Computers - Fourth Generation
Explore lesson notes covering all topics.
Classification Of Computers - Third Generation
Explore lesson notes covering all topics.
Classification Of Computers By Generations
Explore lesson notes covering all topics.
Digital Literacy
Explore lesson notes covering all topics.
Lesson Notes for Other Classes
Basic 2 Lesson Note
The complete lesson note to guide your studies.
Basic 3 Lesson Note
The complete lesson note to guide your studies.
Basic 4 Lesson Note
The complete lesson note to guide your studies.
Basic 6 Lesson Note
The complete lesson note to guide your studies.
JSS1 Lesson Note
The complete lesson note to guide your studies.
JSS2 Lesson Note
The complete lesson note to guide your studies.