| | |
At some point, I found myself with a handful of HTML tags which seemed to fit into no other section, or which got short-shrift in their rightful sections; these tags are potentially useful under specialized circumstances.
Tag: BR
Attribute: CLEAR
Values: all, left, right
Description: The BR tag, in combination with an IMG tag, can define how text will break in relation to a left-or-right-aligned image. clear="all"clear="left"clear="right"
Example: <br clear="all" />
When used in combination with left or right aligned images, the BR tag can determine how and when text (or other images) will wrap in relation to the image. In the following example, I have a left-aligned image and a right-aligned image. In between these images, text flows in paragraphs. At the moment, there is no use of the BR tag at all.
Example (no BR tag):
<img src="./graphics/brittany.gif" width="137" height="325"
<img src="./graphics/bulldozer.gif" width="200" height="141"
<p>Here is a paragraph of text. This is only a paragraph of text. If this were a real message of any importance, this text would be saying something more meaningful.</p>
<p>Here is a second paragraph of text. Don't be alarmed, there will be no repetition of meaningless phrases here! No sir!</p>
<p>Here is a third paragraph of text.</p>
Here is the above example displayed.
I am now going to add the BR tag with the CLEAR attribute set to "all" between the first and second paragraphs.
Example (excerpt):
<p>Here is a paragraph of text. This is only a paragraph of text. If this were a real message of any importance, this text would be saying something more meaningful.</p>
<br clear="all" />
<p>Here is a second paragraph of text. Don't be alarmed, there will be no repetition of meaningless phrases here! No sir!</p>
Here is the full example from above displayed. Notice how the second and third paragraphs of text now begin BELOW both of the pictures?
Let's set the CLEAR attribute equal to "right" and see what happens.
Example (excerpt):
<p>Here is a paragraph of text. This is only a paragraph of text. If this were a real message of any importance, this text would be saying something more meaningful.</p>
<br clear="right" />
<p>Here is a second paragraph of text. Don't be alarmed, there will be no repetition of meaningless phrases here! No sir!</p>
Here is the above example displayed. Notice how the text of the second paragraph begins as soon as it has cleared the right-hand picture?
The BR tag with the CLEAR attribute is useful when laying out images and text together (or images and other images). Try it for yourself!
Tag: NOBR
Description: Marks words which may not break, even if that means that they go off the edge of the screen. Very useful for holding together specialty phrases or sets of words which must appear together in a paragraph, or for holding a set of images together on one line. Always closes.
Example:
<p>Here is a paragraph of text with <nobr>non-breaking words in it.</nobr></p>
Example:
<nobr> <img src="./graphics/capitalA.gif" width="54" height="54" /> <img src="./graphics/capitalB.gif" width="54" height="54" /> <img src="./graphics/capitalC.gif" width="54" height="54" /> <img src="./graphics/capitalD.gif" width="54" height="54" /> <img src="./graphics/capitalE.gif" width="54" height="54" /> <img src="./graphics/capitalF.gif" width="54" height="54" /> <img src="./graphics/capitalG.gif" width="54" height="54" /> <img src="./graphics/capitalH.gif" width="54" height="54" /> <img src="./graphics/capitalI.gif" width="54" height="54" /> <img src="./graphics/capitalJ.gif" width="54" height="54" /> <img src="./graphics/capitalK.gif" width="54" height="54" /> <img src="./graphics/capitalL.gif" width="54" height="54" /> <img src="./graphics/capitalM.gif" width="54" height="54" /> <img src="./graphics/capitalN.gif" width="54" height="54" /> <img src="./graphics/capitalO.gif" width="54" height="54" /> <img src="./graphics/capitalP.gif" width="54" height="54" /> </nobr>
Here is the last example above displayed. As you can see, the images are locked together, and you have to scroll off the edge of the browser window to see all of them (or you would if your browser window were narrow enough).
Tag: TT, CODE
Description: TT is a physical style tag, while CODE is a content-based style tag. They both work identically, causing marked content to display using the browser's default monospace font setting (usually Courier or Courier New 10 point text). Both tags MUST close. Unlike PRE, which always sets its content off from surrounding content (as well as preserving spaces and carriage returns, which TT and CODE do not), TT and CODE may be used within the flow of ordinary HTML paragraphs.
Example:
<p>I like to think about my <tt>HEAD</tt> and my <tt>BODY</tt> when I exercise my <tt>HTML</tt>. <tt>var fred = 1;</tt> is a nice piece of JavaScript code.</p>
Displayed:
I like to think about my HEAD and my BODY when I exercise my HTML. var fred = 1; is a nice piece of JavaScript code.
Example:
<p>I like to think about my <code>HEAD</code> and my <code>BODY</code>when I exercise my <code>HTML</code>. <code>var fred = 1;</code> is a nice piece of JavaScript code.</p>
Displayed:
I like to think about my HEAD and my BODY when I exercise my HTML. var fred = 1; is a nice piece of JavaScript code.
Don't faint from your overwhelming sense of joy at learning about these tags! Seriously, though, you'll probably find all of these things useful as you do more exacting HTML coding.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.