HTML Tips - Lists
(Page 3 of 5 )
Definition Lists
You may be wondering what you will do with the Definition Lists (the DL, DT, DD elements). Well, you can use them for dialogs: the name of the speaker goes in the DT element and what he says goes in the DD element. The problem here is that you will use more vertical space than if you start the speech on the same line as the name of the speaker. If you want to present your work this way (to economize vertical space), then use Cascading Style Sheets. The following example illustrates the point:
<DL>
<DT>John</DT>
<DD>I love you.<DD>
<DT>Mary</DT>
<DD>I love you too.</DD>
<DT>John</DT>
<DD>I like the way you walk.<br />
I like the way you talk.<br />
Above all, you are beautiful.
</DT>
<DT>Mary</DT>
<DD>Are you sure?</DD>
<DT>John</DT>
<DD>Yes.</DD>
</DL>
On a web page, this will appear as follows:
John
I love you.
Mary
I love you too.
John
I like the way you walk.
I like the way you talk.
Above all, you are beautiful.
Mary
Are you sure?
John
Yes.
You can also use the Definition Lists to give the meaning of words; the word goes in the DT element and the meaning goes in the DD element. Again the problem here is that you will use more vertical space than you would have if you presented your work as it is in the dictionary. To present your work as it is in the dictionary, you have to use Cascading Style Sheets.
IMAGES
Give Images Their Size
You might have noticed that when you open certain web pages, it looks as if the text jumps downwards. If the browser does not know the size of your image, when the page is being rendered, it will start by giving very little space for it. When the image finally comes, it will have to push the text down to make space for it. To avoid this problem, inform the browser of the size of the image by indicating its width and height in the style sheet.
ALIGNMENT
The HR element
The HR element draws a horizontal line. It would draw a line in a block element, such as BODY or DIV. You can use the horizontal line to give vertical visual separations to the content of a block. You can give any size you want to the line. Give the lines some nice colors where appropriate!
The horizontal line without any style associated with it appears as a groove. By giving the line a foreground color (in the style sheet), this groove is usually removed.
Next: Forms >>
More HTML Articles
More By Chrysanthus Forcha
