Class 8 HTML Basics

DAV / CBSE Computer Subject - Beginner Learning Material

1. What is HTML?

HTML stands for HyperText Markup Language.

HTML is used to create the structure of web pages. It tells a web browser what content should appear on a webpage.

Example

<html>
<body>

<h1>Welcome to My Web Page</h1>

<p>This is my first HTML page.</p>

</body>
</html>

The browser reads the HTML code and displays the webpage.

2. Basic HTML Document Structure

A basic HTML document normally contains the following important parts: 

<!DOCTYPE html>

<html>

<head>
    <title>My Web Page</title>
</head>

<body>

    <h1>Hello!</h1>

    <p>Welcome to HTML.</p>

</body>

</html>

Meaning of Important Tags

Tag Purpose
<!DOCTYPE html> Tells the browser that the document is HTML5.
<html> Root element of the HTML document.
<head> Contains information about the webpage.
<title> Displays the title on the browser tab.
<body> Contains the visible content of the webpage.

3. HTML Tags

HTML uses tags to tell the browser how content should be displayed. 

<p>Hello World</p>

In the above example:

Together they form an HTML element.

Common HTML Tags

<h1>Heading</h1>

<p>Paragraph</p>

<b>Bold Text</b>

<i>Italic Text</i>

<u>Underlined Text</u>

4. HTML Headings

HTML provides six levels of headings, from <h1> to <h6>. 

<h1>My School</h1>
<h2>My Class</h2>
<h3>My Subjects</h3>
<h4>Mathematics</h4>
<h5>Chapter 1</h5>
<h6>Exercise</h6>
Remember: <h1> is normally the main/largest heading, while <h6> is the smallest heading.

5. Paragraph

The <p> tag is used to create a paragraph. 

<p>
My name is Rahul.
I study in Class 8.
I like learning computers.
</p>

6. Line Break

The <br> tag is used to move text to the next line. 

My name is Rahul.<br>
I study in Class 8.<br>
I like computers.

Output

My name is Rahul.
I study in Class 8.
I like computers.

Tip: The <br> tag does not normally require a closing tag.

7. Bold, Italic and Underline

Bold

<b>Computer</b>

Output: Computer

Italic

<i>Computer</i>

Output: Computer

Underline

<u>Computer</u>

Output: Computer

Combining Tags

<b><i>HTML</i></b>

Output: HTML

8. HTML Lists

Lists are used to display a group of related items.

Ordered List

An ordered list displays items using numbers. 

<ol>

    <li>English</li>
    <li>Mathematics</li>
    <li>Science</li>
    <li>Computer</li>

</ol>

Output

  1. English
  2. Mathematics
  3. Science
  4. Computer

Unordered List

An unordered list displays items using bullets. 

<ul>

    <li>Apple</li>
    <li>Mango</li>
    <li>Banana</li>

</ul>

Output

9. Images

The <img> tag is used to display an image on a webpage. 

<img src="school.jpg" alt="My School">

Important Attributes

Attribute Purpose
src Specifies the image location.
alt Provides alternative text for the image.
width Specifies image width.
height Specifies image height.

Example

<img src="school.jpg"
     width="300"
     height="200"
     alt="My School">

11. HTML Attributes

Attributes provide additional information about an HTML element.

Example 1

<img src="flower.jpg" width="200">

Here src and width are attributes.

Example 2

<a href="https://www.google.com">
    Google
</a>

Here href is an attribute.

Remember: Attributes are generally written inside the opening tag.

12. HTML Tables

Tables are used to display information in rows and columns. 

<table border="1">

    <tr>
        <th>Name</th>
        <th>Class</th>
        <th>Marks</th>
    </tr>

    <tr>
        <td>Rahul</td>
        <td>8</td>
        <td>85</td>
    </tr>

    <tr>
        <td>Anita</td>
        <td>8</td>
        <td>92</td>
    </tr>

</table>

Important Table Tags

Tag Meaning
<table> Creates a table.
<tr> Creates a table row.
<th> Creates a table heading.
<td> Creates table data.

13. HTML Comments

Comments are notes written inside HTML code. They are not displayed on the webpage. 

<!-- This is my first HTML program -->

<h1>My School</h1>

Comments are useful for explaining the code.

14. Background and Text Styling

A basic school-level example of changing the background is: 

<body bgcolor="lightblue">

    <h1>Hello Students</h1>

    <p>This is my webpage.</p>

</body>
Important: Modern HTML websites normally use CSS for styling instead of older attributes such as bgcolor.

15. Simple HTML Program - My School

This program combines several HTML concepts learned so far. 

<!DOCTYPE html>
<html>

<head>
    <title>My School</title>
</head>

<body>

    <h1>My School</h1>

    <p>
        My school is DAV Public School.
        I study in Class 8.
    </p>

    <h2>My Favourite Subjects</h2>

    <ol>
        <li>Mathematics</li>
        <li>Science</li>
        <li>Computer</li>
        <li>English</li>
    </ol>

    <h2>My Hobbies</h2>

    <ul>
        <li>Reading</li>
        <li>Playing Cricket</li>
        <li>Drawing</li>
    </ul>

</body>

</html>

16. How to Practice HTML

Step 1 - Open Notepad

Open Notepad on your computer.

Step 2 - Type the HTML Code

<html>
<body>

<h1>My First Website</h1>

<p>Hello! I am learning HTML.</p>

</body>
</html>

Step 3 - Save the File

Save the file with the name:

index.html

When saving from Notepad, select Save as type: All Files.

Step 4 - Open the File

Double-click the index.html file. It will open in a web browser such as Chrome or Edge.

Practice Tip: Change the text in the HTML code, save the file and refresh the browser to see your changes.

17. Class 8 HTML Learning Plan

Day Topic
Day 1 What is HTML and basic structure
Day 2 HTML tags, headings and paragraphs
Day 3 Bold, italic, underline and line break
Day 4 Ordered and unordered lists
Day 5 Images
Day 6 Hyperlinks
Day 7 Tables
Day 8 HTML attributes
Day 9 HTML comments and basic styling
Day 10 Build a complete webpage

18. Final Mini Project - My Profile

Project: My Profile Web Page

Create a webpage about yourself using the HTML concepts you have learned.

Your webpage should contain:

  • Your name
  • Your photograph
  • Your school name
  • Your class
  • About Me
  • Favourite subjects
  • Hobbies
  • Favourite games
  • Friends
  • A table showing subjects and marks
  • A link to your school website

Suggested Structure

<!DOCTYPE html>

<html>

<head>
    <title>My Profile</title>
</head>

<body>

    <h1>My Profile</h1>

    <h2>About Me</h2>

    <p>
        My name is __________.
        I study in Class 8.
    </p>

    <h2>My Favourite Subjects</h2>

    <ul>
        <li>Mathematics</li>
        <li>Science</li>
        <li>Computer</li>
    </ul>

    <h2>My Hobbies</h2>

    <ol>
        <li>Reading</li>
        <li>Cricket</li>
        <li>Drawing</li>
    </ol>

</body>

</html>

19. Quick Revision - Important Tags

Tag Purpose
<html> HTML document
<head> Document information
<title> Browser tab title
<body> Visible webpage content
<h1> - <h6> Headings
<p> Paragraph
<br> Line break
<b> Bold text
<i> Italic text
<u> Underlined text
<ol> Ordered list
<ul> Unordered list
<li> List item
<img> Image
<a> Hyperlink
<table> Table
<tr> Table row
<th> Table heading
<td> Table data
<!-- --> Comment

20. Practice Questions

Fill in the Blanks

  1. HTML stands for __________.
  2. The __________ tag is used to create a paragraph.
  3. The __________ tag is used to insert an image.
  4. The __________ tag is used to create a hyperlink.
  5. The __________ tag is used to create an ordered list.

Short Answer Questions

  1. What is HTML?
  2. What is an HTML tag?
  3. What is the difference between an ordered and unordered list?
  4. What is an HTML attribute?
  5. What is the purpose of the <title> tag?
  6. What is the purpose of the <img> tag?
  7. What is the purpose of the <a> tag?
  8. What is an HTML comment?