 |
Click here to see what the output of the above code would look like. To come back to this page when you've finished looking at the result, close the new window it opened in. |
Basic Tags
In the previous section you saw the most basic HTML script and tags needed for a Web page. The following table shows various extra tags you can use and explains what they do as HTML commands. You will notice that some of the tags might seem redundant, in that they more or less generate the same output. In these instances feel free to use the one you feel more comfortable with. To keep things a little clearer, I am only going to write what is in the <BODY></BODY> tags. I will omit the <HTML></HTML>, <HEAD></HEAD> and <TITLE></TITLE> tags. Needless to say, keep these in your document.
Tags and Meaning |
Description |
| Paragraph Text <P></P> |
In order to give the appearance
of paragraphs, you have to use the paragraph container tag. Web browsers ignore more than
one space between words and will ignore returns that you add to your HTML file. Lets take the following example:
It looks right when you type it into your editor. However, when it displays in a Web browser, it looks as follows: This document provides complementary or late-breaking information to supplement the Microsoft Windows documentation. Due to problems with power management on this computer, Windows does not have an option to switch to Standby using the Start/Shutdown menu. Properly formatted, it should look like this:
So the output will then look as follows: This document provides complementary or
late-breaking information to supplement the Microsoft Windows documentation. A <TAG> tells the browser to do something. An ATTRIBUTE goes inside the <TAG> and tells the browser how to do it. As you probably know, the default value is a value that the browser assumes if you have not told it otherwise. The <P></P> tags has an attribute ALIGN, and can have the values LEFT, CENTER or RIGHT. Take the following example:
And this is what the output will look like in your browser: This text is centered. |
| Line Breaks <BR> |
If you want to decide where a
line is going to end, you'll use this tag. Let's say you have the following:
It looks about right when you type it into your editor. However, when it displays in a Web browser, it looks as follows: Richard Smith 14234 Main Street Anycity, St 00001 The answer is the empty tag <BR>, which forces a line return in your Web document. Properly formatted, it should look like this:
So the output will then look as follows:
|
| Header Text <Hn></Hn> where "n" can be 1, 2, 3, 4, 5 or 6. |
<H1></H1>, is the largest for headlines or page titles and <H6></H6>, is the smallest header. The following example shows the six
different headers:H1H2H3H4H5H6Properly formatted, it should look like this:
The output will then look as follows: Welcome The <Hn></Hn> tags has an attribute ALIGN, and can have the values LEFT, CENTER or RIGHT. Take the following example:
And this is what the output will look like in your browser: This heading is centered. |
| Preformatted Text <PRE></PRE> |
The <PRE>
tag is designed to allow you to keep the exact spacing and returns that you've put between
the on and off tags. Consider the following examples:
In the browser the above mentioned paragraph will be one straight line, without any spaces or line breaks, like this:
Now look at the next example using the <PRE></PRE> tags:
In the browser the paragraph will appear exactly as it is typed between the on and off tags.
|
| Horizontal rule <HR> |
Draws a line across the width of
your document or table, and has the following attributes: WIDTH, SIZE,
ALIGN and NOSHADE. Properly formatted the <HR> tag should look like this:
And this creates the following output: The following is an example of a horizontal line with its attributes:
and this is what it will look like with actual values, note however, width can be entered as a percentage (WIDTH="50%") or pixel (WIDTH="100") value:
The ALIGN attributes' values can be either LEFT, RIGHT or CENTER. This attribute is designed to align the bar horizontally on the page. NOSHADE is only used if you don’t want the horizontal line displayed with a shadow, in short this attribute makes it a solid line. This is what the output of the above piece of script will look like: Lets do another one:
This is what the output of the above piece of script will look like: |
| Bold Text <B></B> |
Bold text is text that will
display darker than the rest of the text on a page. Properly formatted, it should look
like this:
The output will then look as follows: This is Bold Text |
| Italic Text <I></I> |
The italic tags will make the
text lean to the right on a page. Properly formatted, it should look like this:
The output will then look as follows: This is Italic Text |
| Underlined Text <U></U> |
The underline tags draws a line
beneath the specified text. Properly formatted, it should look like this:
The output will then look as follows: This is Underlined Text |
| Emphasis <EM></EM> |
Like Italic Text |
| Strong Emphasis <STRONG></STRONG> |
Like Bold Text |
| Teletype <TT></TT> |
Monospaced text, makes the text
look like type writer text. Properly formatted, it should look like this:
The output will then look as follows: Makes the font look like type writer text. Now guess which tags I used to display the HTML code in my tutorial. |
| Blinking text <BLINK></BLINK> |
This
makes the text appear and disappear in regular intervals on the page. Properly
formatted, it should look like this:
The output will then look as follows, note however that the blink tags do not seem to function correctly with Internet Explorer, but does work fine with Netscape Navigator, so if you are not using Netscape, the following example might not be blinking: |
| Citation Text <CITE></CITE> Sample Text <SAMP></SAMP> Definition Text <DFN></DFN> Code Text <CODE></CODE> Variable Text <VAR></VAR> Keyboard Text <KBD></KBD> Strikethrough Text <STRIKE></STRIKE> |
The list of tags
on the left are all just different ways of formatting your text on a page. They all get
used like the previous tags and if properly formatted will generate an output similar to
the following: This is what Citation text will look like. This is what Sample text will look like. This is what Definition text will look like.
This is what Variable text will look like. This is what Keyboard text will look like.
|
You can also combine tags. Making a piece of text bold and italic would require the following piece of script:
<B><I>BOLD ITALIC</I></B>
If you are going to use tag pairs in
combination, then to avoid confusing the browser, they should be nested, not overlapping.
Let me illustrate:
<STRONG><STRIKE></STRONG></STRIKE> Overlapping tags, this is not good.
<STRONG><STRIKE></STRIKE></STRONG> Nested tags, this is good.
Well, let's see what all these tags will look like in a complete HTML page. The following example is an HTML file that will use all the tags we have gone through up to now.
| Quantity | XJS100 | RJS200 | YJS50 | MST3000 |
| 1-50 | $40 | $50 | $75 | $100 |
| 50-99 | $35 | $45 | $70 | $95 |
| 100-200 | $30 | $40 | $65 | $90 |
| 200+ | $25 | $35 | $55 | $75 |
|
Click here to see what the output of the above code would look like. To come back to this page when you've finished looking at the result, close the new window it opened in. |
 |
Click here to go to the personal homepage example, for this section of the tutorial. |
[Next Section - More HTML Tags] [Back To Index Page]
