Exercise 1 Demo: Part E : Using the Empty Elements
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 the empty tags. We will add another one, the image element, in lesson three. Remember, they do not need a closing tag because all the information they have to give the browser is included inside their opening tag.
<!DOCTYPE html>
My First Web Page
<html>
<head>
<title> </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>