How do you think are the
websites are created?
Al Rawabi Private School
Computer Science
HTML Tags
All Grade 7
Prepared by: Miss Diane Grace
Learning Objective:
Intention
• To use different
HTML tags to
create a web
page.
3 Accuracy
Success
Most of the steps are correct.
Criteria
3 Creativity
Display high level of creativity (Rubrics)
throughout the design process.
2 Computer Literacy
Your knowledge and ability to use
the computer.
2 Timeliness
The length of time for you to finish
the given task.
TWO TYPES OF HTML TAGS
• Container Element - Container tags contains start tag
& end tag. Example: <html> </html>
• Empty Element - Empty tags contains start tag.
Example: <br>
TEXT FORMATTING TAGS
HEADING ELEMENT
• There are six heading elements
(<h1>,<h2>,<h3>,<h4>,<h5>,<h6> and <h7>.
• All the six heading elements are container tag and
requires a closing tag.
• <h1> will print the largest heading.
• <h7> will print the smallest heading.
Heading tag code example:
<html>
<head><title>heading</title></head>
<body>
<h1> GLOBAL INFOCHANNEL</h1>
<h2> GLOBAL INFOCHANNEL</h2>
<h3> GLOBAL INFOCHANNEL</h3>
<h4> GLOBAL INFOCHANNEL</h4>
<h5> GLOBAL INFOCHANNEL</h5>
<h6> GLOBAL INFOCHANNEL</h6>
<h7> GLOBAL INFOCHANNEL</h7>
</body>
</html>
Result of Heading Code:
HTML PARAGRAPH TAG
• HTML documents are divided into
paragraphs.
• Paragraphs are defined with the <p> tag i.e.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
LINE BREAK AND HORIZONTAL LINE TAG
• If you want a line break or a new line without starting a new
paragraph Use the <br>tag.
• Defines a horizontal line use<hr>tag.
• <br> and <hr> element are empty HTML element.
Example:
<p>GLOBAL INFORMATION CHANNEL
<hr>GLOBAL INFORMATION<br>CHANNEL</p>
TEXT FORMATTING TAGS
TEXT FORMATTING CODE:
TEXT FORMATTING CODE RESULT:
BACKGROUND AND TEXT COLOR TAG
• The attribute bgcolor is used for changing the
back ground color of the page.
Example: <body bgcolor=“Green” >
• Text is use to change the color of the enclosed
text.
Example: <body text=“White”>
TEXT ALIGNMENT TAG
-It is use to alignment of the text.
• Left alignment <align=“left”>
• Right alignment <align=“right”>
• Center alignment <align=“center”>
BIG TASK!
Open your Google
Classroom and do the
assignment "HMTL - Tags"
Plenary:
Do activity "HTML - Tags
(Enrichment Activity)