Scribd
Upload
16 views45 pages

Ict 10 Q3 Lesson 3

The document provides an overview of HTML tags, distinguishing between paired and unpaired tags, which are essential for structuring web pages. It explains the functions of various tags, including structural and formatting tags, and introduces attributes and HTML entities. Additionally, it covers the concept of nesting elements within HTML.

Uploaded by

randomizedbot
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views45 pages

Ict 10 Q3 Lesson 3

The document provides an overview of HTML tags, distinguishing between paired and unpaired tags, which are essential for structuring web pages. It explains the functions of various tags, including structural and formatting tags, and introduces attributes and HTML entities. Additionally, it covers the concept of nesting elements within HTML.

Uploaded by

randomizedbot
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

LESSON 3

ADDING MORE
CONTROL TO
YOUR WEB PAGE
By Ma’am Almera S.
PAIRED TAG OR
UNPAIRED TAG
<meta>
<html> </html>
<p></p>
<br>
<hr>
<head> </head>
<table> </table>
WHAT IS PAIRED TAG?
WHAT IS UNPAIRED TAG?
HTML TAGS
The whole HTML functions on HTML Tags.
These tags are the basic building block of a
website. No web technologies like CSS,
PHP, Python, WordPress, etc. will exist
without HTML Tags.
HTML TAGS
HTML Tags are pre-defined elements in HTML, enclosed within these
brackets < > signs. For example: <html>, <table>, etc. All HTML tags has
a particular function associated with them.

Each tag has a special function and a combination of various tags


developes a website. For example, a <p> tag defines a paragraph in the
website and a <table> tag displays a table.
TAGS
TAGS are the backbone of any
HTML document. A Tag is a
keyword surrounded by angle
brackets that creates the page’s
structure,
TAGS
• PAIRED TAG • UNPAIRED TAG
Paired tags are a set of two Unpaired tags are single
tags with the same name. In tags with no closing tag.
each Paired tag set, one is an These tags are also called
opening tag, and the other one Singular Tags. These are
is the closing tag. The closing also called non-container
tag has a / slash, it means that tags because they do not
the tag is closed now. contain any content.
TAGS
• PAIRED TAG • UNPAIRED TAG

(Opening and
(Singular Tag)
Closing Tags)
Tag Type

1. <h1></h1>

2. <br>

3. <img>

4. <p></p>

5. <input>

6. <div></div>

7. <meta>

8. <a></a>

9. <hr>
Tag Type

1. <h1></h1> a. Paired Tag

2. <br> b. Unpaired Tag

3. <img> c. Unpaired Tag

4. <p></p> d. Paired Tag

5. <input> e. Unpaired Tag

6. <div></div> f. Paired Tag

7. <meta> g. Unpaired Tag

8. <a></a> h. Paired Tag

9. <hr> i. Unpaired Tag


STRUCTURAL TAGS
TAGS THAT ARE FIXED
AND CAN BE FOUND IN
EVERY HTML FILE
STRUCTURAL TAGS

<!Doctype>
STRUCTURAL TAGS

<html></html>
STRUCTURAL TAGS

<head></head>
STRUCTURAL TAGS

<title></title>
STRUCTURAL TAGS

<body></body>
FORMATTING TAGS
TAGS THAT FORMAT THE
APPEARANCE OF WORDS AND
SENTENCES IN A WEB PAGE
FORMATTING TAGS
<b></b>
Defines bold
text
FORMATTING TAGS
<blockqoute></blockqoute
>
Defines a section
that is quoted from
another source
FORMATTING TAGS
<br> <br/>

Defines a
single line
break
FORMATTING TAGS

Tags ouput

<font color= “red”>text here</font> text here

<font face= “gagalin”>text here</font> text here

<font size= “70”>text here</font> text here


FORMATTING TAGS

Defines a
header for a
document or
section
FORMATTING TAGS
<hr>

displayed as a
horizontal rule that
is used to separate
content
FORMATTING TAGS
<i></i>
The content
inside is
typically
displayed in
italic.
FORMATTING TAGS
<mark></mark>
defines text
that should
be marked
or
highlighted.
FORMATTING TAGS
<p></p>

defines a paragraph.
FORMATTING TAGS
<pre></pre>

Pre-formatted text. The text will be displayed


exactly as written in the HTML source code.
FORMATTING TAGS
<small></small>

defines
smaller text
FORMATTING TAGS
<strike></strike>
FORMATTING TAGS
<strong></strong>
FORMATTING TAGS

<sub></sub>
<sup></sup>
FORMATTING TAGS
<tt></tt>

defines text as teletype


FORMATTING TAGS
<u></u>

The content inside is typically displayed with an


underline.
ATTRIBUTES
1.All HTML elements can have attributes (modifiers of
HTML tags content)
2.Attributes provide additional information about elements
3.Attributes are always specified in the start tag
4.Attributes usually come in name/value pairs like:
name="value"
THE HREF ATTRIBUTE

The <a> tag defines a hyperlink. The href attribute specifies


the URL of the page the link goes to
THE HREF ATTRIBUTE
THE HREF ATTRIBUTE
HTML ENTITIES
• Some characters are reserved in HTML.
• If you use the less than (<) or greater than (>) signs in your HTML
text, the browser might mix them with tags.
• Entity names or entity numbers can be used to display reserved
HTML characters.
• Entity names look like this: &entity_name;
• Entity numbers look like this: &#entity_number;

TO DISPLAY A LESS THAN SIGN (<)


WE MUST WRITE: &LT; OR &#60;
HTML ENTITIES
NESTING ELEMENT
• HTML Element inside other element is called Nesting of an element.
RECAP
• pre-defined elements in HTML, enclosed within these brackets < >
signs.
• the backbone of any HTML document.
• (Opening and Closing Tags)
• (Singular Tag)
• <hr>
• <p></p>
• TAGS THAT ARE FIXED AND CAN BE FOUND IN EVERY HTML FILE
• TAGS THAT FORMAT THE APPEARANCE OF WORDS AND SENTENCES
IN A WEB PAGE
• modifiers of HTML tags content
• can be used to display reserved HTML characters.
• HTML Element inside other element
THANK YOU

You might also like