You have learned about how to show text in a web browser window using HTML. Now, we will look further into how to align text using optional setting known as attribute. Most HTML tags has attributes to enable HTML author to have more control over the HTML tags. Let's look at the following examples:
<HTML>
<HEAD>
<TITLE>Listing 3.1 Simple Text Alignment</TITLE>
</HEAD>
<BODY>
<P ALIGN="LEFT">
This text is on the left.
<P ALIGN="CENTER">
This text is in the center.
<P ALIGN="RIGHT">
This text is on the right.
</BODY>
</HTML>
Figure 3.1
Refering to Figure 3.1, you can see 3 lines of text. One on the left, another in the center and the last one on the right. This is the result of the code from Listing 3.1. ALIGN is the attribute, also known as optional setting, which control the alignment of text which is being displayed using the tag <P>.
To align text in <P>, simply include the attribute ALIGN with the <P> tag, then include the position, either left, center or right, which will be enclose in a pair of quotation. Then close the <P> with the greater than sign.
Below is a list of value which can be go into the attribute ALIGN:
Finally, we have seen how to align text using the <P> tag and its attribute. Using the ALIGN="left" is a waste of typing effort in normal case. Because text will be aligned to the left by default. So, use the ALIGN="left" only when necessary. Let continue to learn about how to align text when using heading tags.
Alignment of heading is very similar to alignment of text in <P>, except that instead of using the <P>, you will be using <H1>, <H2> and so on. If you are still unclear at this point, let's look at the listing below:
<HTML>
<HEAD>
<TITLE>Listing 3.2 Heading Alignment</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="LEFT">This H1 is on the left.</H1>
<H2 ALIGN="CENTER">This H2 is in the center.</H2>
<H3 ALIGN="RIGHT">This H3 is on the right.</H3>
</BODY>
</HTML>
Figure 3.2
Click on the link to see the result. Listing 3.2 is clear and concise. You should be at least able to guess the result from Listing 3.2. It is very similar to Listing 3.1 except for the heading tags are used in here. If you don't understand, please read through the code again.
At this point, you might ask, what if you want to format 10 or more lines to the center, left or right. Is that mean 10 or more lines using the attributes ALIGN? That is very troublesome, right? This problem can ve solved by another tag. Proceed to the next section to see how this is done.
Let's go back to the problem we just encounter, imagine you need to align 10 lines of text to the center, left or right. Is that mean 10 lines of center, left or right in the ALIGN attribute? That is really troublesome! Fortunately, <DIV> can save us a lot of time when this kind of situation is encounter. Let's look at Listing 3.3a.
<HTML>
<HEAD>
<TITLE>Listing 3.3 The Use of <DIV></TITLE>
</HEAD>
<BODY>
<DIV ALIGN="RIGHT">
<H1 ALIGN="LEFT">This heading is on the left.</H1>
<H2>This heading is on the right.</H2>
<P>
This text is also on the right.
<P>
This text is on the right too.
<P ALIGN="CENTER">
This text is in the center.
</DIV>
</BODY>
</HTML>
Figure 3.3
If you look carefully at figure 3.2, you can see that those tag without specifying how is alignment being done using the ALIGN attribute will be override by the <DIV> tag. It is easy to group lines of same alignment needed together then align them using the <DIV> tag. However, if within those lines, you need to align some of the lines differently, you can override <DIV> alignment by specifying the alignment you need using the ALIGN attribute in the tag. Examples are the <P>, <H1>, <H2> and so on. You might also come across a tag called <CENTER>. This tag is used to align texts or images to the center. It is officially absolete now because it can be replaced by the <DIV>. Futhermore, some browsers might not be supporting <CENTER> in the future.
Horinzontal rukes can be drawn by using the <HR> tag. This is simply by putting the <HR> inside your HTML document, no closing tag is needed. This is very logical since there would not be any texts enclosed inside the horinzontal rule. Basically, there are two attributes which can be used with the <HR> tag, ALIGN and WIDTH. Let's look at the following example:
<HTML>
<HEAD>
<TITLE>Listing 3.4 Using <HR></TITLE>
</HEAD>
<BODY>
<HR>
The line above is a full length horizontal rule.
<HR WIDTH="50%">
The line above is a 50% length horizontal rule by setting WIDTH="50%"
<HR ALIGN="LEFT" WIDTH="60%">
The line above is a horizontal rule which is aligned to the left.
</BODY>
</HTML>
Figure 3.4
Take a look at the result in Figure 3.4. A full length horizontal rule is drawn across the document if the WIDTH is not specified. Another I want to point out is that, the second horizontal rule is aligned to the center by default. If you do specify the alignment using the ALIGN attribute, you can align the horizontal rule to the left, center or right.