Horizontal Rule Attributes: ICT 8 Q2-L1 Marlo Alvarez

Horizontal Rule
and Attributes
ICT 8 Q2-L1
Marlo Alvarez
Recap
ICT 8 Q2-L1
Marlo Alvarez
Recap. True or False.
______1. Headings serve a purpose in the ranking of search results using search
engines.
______ 2. In HTML, a paragraph always starts in a new line.
______ 3. <h1> is the heading tag for the most important heading.
______ 4. <h6> is the largest heading among the six heading tags
______ 5. Heading tags modifies the size of the text depending on which heading
tag you used
ICT 8 Q2-L1
Marlo Alvarez
Horizontal Rule
and Attributes
ICT 8 Q2-L1
Marlo Alvarez
Horizontal Rule
The <hr> tag defines a thematic break in an HTML document.
A thematic break is a change in a story or a

transition from one topic to another.
In HTML, thematic breaks are used to separate contents or

define change within a page. Thematic breaks are most often
displayed as a horizontal line.
ICT 8 Q2-L1
Marlo Alvarez
Horizontal Rule
To add a horizontal line to an HTML content, simply add the <hr> tag.
The <hr> tag does NOT need an end tag.
ICT 8 Q2-L1
Marlo Alvarez
Horizontal Rule
To add a horizontal line to an HTML content, simply add the <hr> tag. The <hr> tag does NOT need an end tag.
<html>
<head>
<title>hr</title>
</head>
<body>
<h1>Foundations of Modern Biology</h1>
<hr>
<h3>Cell Theory</h3>
Cell theory states that the cell is the fundamental unit of life, that all
living things are composed of one or more cells, and that all cells arise
from pre-existing cells through cell division. In multicellular organisms,
every cell in the organism's body derives ultimately from a single cell in
a fertilized egg.
<hr>
<h3>Foundations of Modern Biology</h3>
A central organizing concept in biology is that life changes and
develops through evolution, and that all life-forms known have a
common origin. The theory of evolution postulates that all organisms on
the Earth, both living and extinct, have descended from a common
ancestor or an ancestral gene pool. This universal common ancestor of
all organisms is believed to have appeared about 3.5 billion years ago.
Biologists regard the ubiquity of the genetic code as definitive
evidence in favor of the theory of universal common descent for all
bacteria, archaea, and eukaryotes (see: origin of life).
<hr>
</body>
</html>
ICT 8 Q2-L1
Marlo Alvarez
Attributes Explained
See how easy it is to add a horizontal line to separate contents?
Now the question is, what if we want our lines to be thicker?
Or shorter?
ICT 8 Q2-L1
Marlo Alvarez
To change the thickness of the horizontal rule,

we will have to change the size attribute.
ICT 8 Q2-L1
Marlo Alvarez

HTML elements have a set of attributes. Attributes provide additional

information about the element it defines. We can add or modify attributes
only in the start tag of an element. Most attributes are written in
NAME=“VALUE” format.
ICT 8 Q2-L1
Marlo Alvarez

<hr size="30">
ICT 8 Q2-L1
Marlo Alvarez
<hr size="30">
The size attribute of the <hr> tag was written inside the tag;
the value was then set to 30 which means the horizontal
rule will be 30 pixels high or thick.
ICT 8 Q2-L1
Marlo Alvarez
Noshade attribute
<hr size="30“ noshade>
This time, instead of setting a value for an attribute, we

simply activate the effect of an attribute.
ICT 8 Q2-L1
Marlo Alvarez
Width attribute
<hr size="30" noshade width=”250”>
By adding the width attribute to the <hr>, we can now change

the width of our horizontal rule by defining width by pixels.
ICT 8 Q2-L1
Marlo Alvarez
Align attribute
<hr size="30" noshade width=”250” align=“right”>
The align attribute can have one of the three possible values:
left, center, and right.
ICT 8 Q2-L1
Marlo Alvarez
Activity 1
ICT 8 Q2-L1
Marlo Alvarez
Activity 2. Output Projector.
<!DOCTYPE html>
<html>
<head>
<title>HR</title> NOTE:
</head>
<body> 1. For the Title bar/Tab area, write down
<hr width="250" align="left"> the what you expect to be displayed
<hr width="250" align="center"> in the title bar/tab of the browser
<hr width="250" align="right">
<hr width="250" align="center"> 2. You may use a computer to create
<hr width="250" align="left"> the actual HTML file to check your
<hr width="250" align="center"> expected output validity.
<hr width="250" align="right">
<hr width="250" align="center">
<hr width="250" align="left">
</body>
</html>
ICT 8 Q2-L1
Marlo Alvarez

Horizontal Rule Attributes: ICT 8 Q2-L1 Marlo Alvarez

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Horizontal Rule Attributes: ICT 8 Q2-L1 Marlo Alvarez

Uploaded by

Copyright:

Available Formats

Horizontal Rule

______ 2. In HTML, a paragraph always starts in a new line.

The <hr> tag defines a thematic break in an HTML document.

A thematic break is a change in a story or a

In HTML, thematic breaks are used to separate contents or

See how easy it is to add a horizontal line to separate contents?

Now the question is, what if we want our lines to be thicker?

To change the thickness of the horizontal rule,

To change the thickness of the horizontal rule,

HTML elements have a set of attributes. Attributes provide additional

To change the thickness of the horizontal rule,

<hr size="30“ noshade>

This time, instead of setting a value for an attribute, we

<hr size="30" noshade width=”250”>

By adding the width attribute to the <hr>, we can now change

<hr size="30" noshade width=”250” align=“right”>

You might also like