HOW TO BUILD A PROFESSIONAL WEB SITE Rel. 1.1

LESSON 04 - Chapter d

by Carlo Scodanibbio

home

enrol

Lessons

welcome
1 - chapter a
1 - chapter b
1 - chapter c
1 - chapter d
1 - chapter e
1 - chapter f
1 - chapter g
1 - chapter h
1 - chapter i
1 - chapter j
1 - chapter k
2 - chapter a
2 - chapter b
2 - chapter c
2 - chapter d
2 - chapter e
2 - chapter f
2 - chapter g
2 - chapter h
3 - chapter a
3 - chapter b
3 - chapter c
3 - chapter d
3 - chapter e
3 - chapter f
3 - chapter g
3 - chapter h
4 - chapter a
4 - chapter b
4 - chapter c
4 - chapter d
4 - chapter e
4 - chapter f
4 - chapter g
4 - chapter h
4 - chapter i
4 - chapter j
4 - chapter k
5 - chapter a
5 - chapter b
5 - chapter c
5 - chapter d
5 - chapter e
5 - chapter f
5 - chapter g
6 - chapter a

other text manipulating tools - text alignment

There are several HTML Tags and Attributes that can be used to format and manipulate text.
I am illustrating the most used ones, but there are more (I will tell you later where to find them).

We have already seen the Tag <CENTER> to centre text.
Now, what about aligning text to the right of the Browser Window ?
There are two ways (so far....).

The one way is to utilise the DIVISION Tag <DIV>.
This Tag is a "Container Tag", used to "contain" stuff such as Text, Images and other. Its function, besides containing something, is also to "position" it somewhere in the Browser Window through the ATTRIBUTE ALIGN that can be set at:

LEFT (the "default") - aligns the content of the DIV Tag to the left
CENTER - aligns the content of the DIV Tag to the centre
RIGHT - aligns the content of the DIV Tag to the right

Some examples to clarify the use of this Tag.

<BODY>
<DIV>Hello baby !!</DIV>
<BR><P>
<DIV ALIGN="left">Good morning to you</DIV>
<BR><P>
<DIV ALIGN="center"><B>What is your name ?</B></DIV>
<BR><P>
<DIV ALIGN="right"><FONT SIZE="4" COLOR="#9900CC">
How about movies tonight ?</FONT></DIV>
</BODY>

This code will be displayed like this:

REMARKS:

If no Attribute is inserted in the DIV Tag, content (text in this case) is "by default" aligned left. The same would be if the Attribute ALIGN is inserted and set at "left".
The function of the ALIGN="center" and ALIGN="right" settings is to accomplish what appears very intuitive: text is aligned, respectively, "centred" and "right" in the Browser Window.
Note there is always some "padding" between text aligned right and Browser Window right edge.
You may use many other Text Formatting tools inside a DIV Tag, like for instance the FONT, B, I, etc. Tags.

Another way of aligning text is through the use of the (already seen) Paragraph P Tag and its Attribute ALIGN.
Something I did not tell you earlier, in fact, is that the P Tag accepts several Attributes including the ALIGN one.

The syntax is identical to that of the DIV Tag so I am not going to repeat it but just give you an example:

<BODY>
<P>Hello pussy cat !
<P ALIGN="left">How is life pussy cat ?</P>
<P ALIGN="center"><I>Did you catch any mouse today ?</I></P>
<P ALIGN="right"><FONT FACE="verdana, arial" SIZE="3" COLOR="#990033">Would like some prawns for supper ?</FONT>
</BODY>

The above code will result in this:

REMARKS:

The effect of P (with no ALIGN Attribute) and P ALIGN="left" is identical: text gets aligned to the left.
The Tag P may or may not be closed (as already said): the effect, however, is not identical.
You will discover soon that it is always better to close the P Tag, except when you use it for "vertical spacing".
If you don't, you risk to "carry over" its effect (for instance an alignment effect) to subsequent text......
Within the P Tag you may use other text formatting Tag, like FONT, B, I, etc.

shut-down this HTML story !

http://webbuildcourse.tripod.com

full details of this Course at
http://www.scodanibbio.com/webbuild