HTML Basics for Class 7

In HTML Basics for Class 7 topic, you will get precise understanding of this topic. HTML stands for HyperText Markup Language.
It is used to create web pages.
A web page is made using different HTML tags. Let us learn important HTML tags step by step.

Heading Tags (H1 to H6)

Heading tags are used to give titles and subtitles.

There are 6 types of heading tags:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h1> is the biggest heading.

<h6>is the smallest heading.

Background Colour

Background colour is used to change the colour of a webpage , and also colour is written inside the <body> tag.

Example:

<body bgcolor="yellow">

This will make the page background yellow.

Font Tag (Size, Face, Colour)

Font tag is used to change the text size, font style and color.

Example:

<font size="5" face="Arial" color="red">
This is colored text
</font>

Attributes:

size → changes text size
face → changes font style
color → changes text color

Text Alignment (Centre, Left, Right)

We use text alignment to align text on the page

Example:

<p align="center">This is centered text</p>
<p align="left">This is left aligned</p>
<p align="right">This is right aligned</p>

Paragraph Formatting Tags

Paragraph formatting tags are used to format text in a webpage.

<p> – Paragraph Tag

Used to create a new paragraph.

<p>This is a paragraph.</p>

<br>– Line Break

Used to move text to the next line

Hello<br>World

<hr>– Horizontal Line

Used to draw a horizontal line on the webpage.

<p>This is first paragraph.</p>
<hr>
<p>This is second paragraph.</p>

The line will appear between the two paragraphs

<b>– Bold Text

Makes text bold.

<b>Bold Text</b>

<i>– Italic Text

Makes text italic.

<i>Italic Text</i>

List Tags

HTML is the basic language that creates web pages

There are three types of list tags in HTML:

1. Ordered List <ol>

An ordered list shows items in numbered format (1, 2, 3…).

Example:

<ol>
<li>Computer</li>
<li>Keyboard</li>
<li>Mouse</li>
</ol>

Output will show numbers before each item

2. Unordered List <ul>

An unordered list shows items with bullets (•).

Example:

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

Output will show bullet points before each item.

Class 7 Computer Security

3. List Item

The <li> tag defines each item in the list.

Example:

<li>Item Name</li>

It is always used inside <ol> or <ul> .

Background Image

A background image sets an image as the background of a webpage. It makes the webpage look more attractive.

Using `background` Attribute

<body background="image.jpg">

Here, image.jpg is the name of the image file.

Image Insertion in Webpage

Images make a webpage attractive and easy to understand.
In HTML, we use the<img> tag to insert an image.

Syntax:

<img src="image.jpg">

Example:

<img src="computer.jpg" width="300" height="200">

Attributes:

src → image source
width → image width
height → image height

Anchor Tag with Hyperlink

The anchor tag creates a hyperlink in a webpage.
A hyperlink is a clickable link that opens another webpage or website

Syntax:

<a href="URL">Link Text</a>

Example:

<a href="https://www.computersiksha.com.com">Computer Siksha</a>

When we click on “Visit Google”, it opens Google website.

Conclusion

HTML is the basic language that people use to create web pages.
By learning headings, lists, images, hyperlinks and formatting tags, students can easily create simple websites.
Practice regularly to become perfect in HTML.

HTML Basics for Class 7 – Complete Guide with Examples