Exercise 1 Demo Part E
<< .. Go to : : Home : : Exercise 1 : : Demo 1A : : Demo 1B : : Demo 1C : : Demo 1D : : Demo 1E : : TAGS : : All Class Demos .. >>

Exercise 1 Demo: Part E : Empty Elements

This is the HTML code you will need for Part E of Exercise 1.

Most elements have opening tags and closing tags with information that they format in between. A few tags are "Empty Elements". They do not format anything, they just give a directive. They do not have a closing tag.

Two empty elements that we will use frequently are the line break tag and the horizontal rule tag.

They look like this: <hr> and <br>. There are very few of these tags. We will add another one, the image element, in lesson three.

<!DOCTYPE html>

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

<body>

The Line Break Element

What if you want to end one line and begin another right below it? This is when you use the <br> tag. It does not require a separate closing tag. The <br> is an empty element. The <br> is the same as one return/enter key stroke.

A single return <br>
works just fine <br>
with the <br> tag!

If you want to add more space between lines, add more line break tags. Each one is the equivilent of one space. The <p> tag or paragraph tag always adds what amounts to two spaces. No matter how many <p> tags you use, it will just remain 2 spaces.
<br>
<br>
<br>
The <br> tags give you some extra control on spacing between text.


The Horizontal Rule Element

You can break up the space on your page by using lines or horizontal rules.
You do this with the <hr> tag. This tag is another empty element.


The <hr> tag can also have attributes added to it to change how it looks on your page. You can add any of the following attributes in any combination.

size="n" (pixels or %)
width="n" (pixels or %)
align="option" (left, center [default], right)
color="#xxxxxx (you can add a color name or a hex code number)

<hr width="50%"> makes a horizontal line that is centered across 50% of the screen.


<hr size="12"> makes a horizontal line that is 12 pixels thick.


These lines are hard to see when they are the same color as the background - so try...

<hr size="10" color="red"> and you get a red horizontal line that is 10 pixels thick.


The color attribute is inconsistent in the various browsers that are available at the moment. Be sure to test in your target browser before deciding to use this design attribute. You can use color names here or hex code - xxxxxx is the RGB (red green blue) hex code for the color. You MUST include the "#"sign before ANY hex code. But you do not need it when you are using a color name.

Don't have the hex code memorized? Don't worry - very few people do. You can look at this color chart to choose a color by the names listed or the hex code. Or you can sample a color out of a photoshop file.

If you tried all the attributes the code could look like this:

<hr size="25" width="75%" align="right" color="#FF6633">

and it would give you a horizontal rule that is thicker than normal, aligned to the right, going only 75% across the screen, and is orange.


</body>

</html>

Now go back to the Exercise 1 page. Look at the list of tags. I am sure you will figure out how to use them all. Have some fun with them. Be sure to use all the tags and all their attributes at least one time. Make five or more horozontal rules to try variables of the attributes. If you need a quick refresher, check the textbook pages listed for the project.

Back to Part D of Demo 1.

Back to Part C of Demo 1.

Back to Part B of Demo 1.

Back to Part A of Demo 1.

© Claudia Faulk. Created in 2008. Updated 1.15