QuickRead 4: Text Formatting and the body tag.
| The Preformatted text tag <pre> | ||||||||||||||||
| As was mentioned before, white space(space, tab, new
line characters) do not count when the page is displayed. If you had two words
separated by 20 white space characters, they would appear next to each other with
a single white space separating them. If you want your text displayed exactly as
you type it in, use the <pre> tag. It comes with a closing </pre>
tag. For example: The following text was actually typed into the document very differently. Very. Here's how it was actually typed in as: The following text was actually typed into the document very differently. Very. If we wanted to have our text show up like the way we type it in(with all the spaces and newlines), we would couch our text within the said <pre> tags. Like so: <pre> The following text was actually typed into the document very differently. Very. </pre> | ||||||||||||||||
.
| .
| The Italics, Boldface, Underline,
and TeleType tags <i> <b>
<u> <tt>
| You can probably figure out what I'm going to
say here. Yeah, if you wanted your text to go italic couch it in
the <i> tags. If you wanted your text to go bold, use the <b>
tags and blah and such. See, HTML is intuitive and elementary. | Alright, lets see the tags in action anyway: Here's some text gone italic <i>Here's some text gone italic</i> The bold and the beautiful <b>The bold and the beautiful</b> Underline your presence <u>Underline your presence</u> Teletype looks cool <tt>Monotype looks cool</tt> You can mix the tags but remember to close the tags in the correct order. <u><b><i><tt> You can mix the tags but remember to close the tags in the correct order.</tt></i></b></u> .
| .
| The SuperScript and SubScript
<sup> <sub>
| There are times when you want some text to hang over or
slightly below your other text. They use that a lot in Math. Here's how it
goes: | logbase10(202 - 343) log <sub>base10</sub>(20<sup>2</sup> -34<sup>3</sup>) Or, to make things a little more legible, you could make the sub and super scripts smaller in size than the accompanying text. Like so: logbase10(202 - 343) We shall look at how to do that in next tutorial (using the font tag). .
| .
| The body tag
<body attributes> | The pages you have been constructing till now have a
plain white or if you are using a macintosh (or Sun machine), a grey background. This is
because, these are the default background colors that your browser sets
for HTML documents. The page you are viewing currently has had it's
background color changed to a pleasant sandy shade. It's a shade that you
won't be able to use unless you use the hexadecimal coloring system.
Though the word does sound very computer jargonish, the system itself is
very simple. It's suggested you learn it now. For a listing of
most of the "names" (like goldenrod, sienna) see William's Color chart or WebSoc's Primer on Colours. We
suggest using the hex codes (also given) as they show up better from one browser to the next.
| the following statement will turn the body of the page to olive. <body bgcolor=olive background=mypicture.jpg> it will also use a picture called mypicture.jpg as the background of your body. If your picture has transparent parts, the background color will show through. This picture must be in the same directory as your webpage file (ie index.html) or you will need to tell the browser where to look (if the mypicture.jpg was int the directory 'backs' then, instead of background=mypicture.jpg you would use background="backs/mypicture.jpg" inside the body tag). The permissions (see the unix tutorial for the pictures need to be globally and group-wise readable (ie 644). Typeing chmod 644 mypicture.jpg at the grove prompt in the same directory as the picture should do the trick. Pictures with extensions of gif and jpg work, most others do not. With the body tag, you can also globally set the color of your text, and links. If you wanted all the text in your document in a shade of brown instead of the default black, you would specify it here. <body bgcolor=olive background=mypicture.jpg text=brown link=green alink=silver vlink=purple> With link=green you are specifying that all your hyper links(we will discuss them a little later) display as green. The default color is blue (as you might be aware of). The alink specifies the color the link turns to the moment you click through it (if you have never noticed this, catch it the next time around). The default color for alink is red. Vlink is the color of visited links. It's been the norm that visited links are darker than unvisited links. If you deviate from this norm you will confuse visitors to your web page. Do not do it unless you think it makes sense. Whenever you play with your web page design it is a good idea to have a friend look at it. If they think it looks bad or is hard to read, change it. .
| .
| Get behind the wheel!
| Time to flex those budding HTML muscles. | Try typing out the following. Also use your own stuff. Be imaginative! <html> <head><title>Insert Title here</title></head> <body bgcolor=gray text=white link=orange alink=yellow vlink=purple> <h1>Insert Heading here</h1> <hr> <br><br> <u>Where are we going to go?</u> <b>I guess</b> wherever <tt>the captain wishes to<tt> <b><i>take us</i></b><br> <p> Planet <sup>Azok!</sup> Hmmm...long time <sub>no see.</sub> </p> </body> </html> .
| |
| Index |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |