Part 4: Tag Introduction
Now that we have an idea about how to organize our directory structure, we are ready to start adding things to our main page. The next section will deal with many of the other commonly used tags. Browse through the list to begin to get a feel for the tags. Do not expect to learn them all your first time through, and do not spend too much time on this section--SKIM it! Through using them often, you will learn them better and better.
Browsers ignore new lines and extra spaces in text. With tags, you need to tell the browser what to do--where to start a new paragraph. You could write all of the text for a page on one line--without carriage returns--and it would display exactly the same as if you placed a carriage return after every word. Neither of the last two scenarios (all the code on one line or a new line for each word of code) make the document particularly easy to read. After practice, you will be able to decide where you want to put carriage returns. It is good to keep lines no longer than 72 characters so that the document displays easily for code editing.
So knowing this, we need to know how to tell the browser when to start a new paragraph. We do this through the paragraph ( <P> ) tag. This tag causes the browser to display the following information on a new line, even if there is no carriage return following the coding. One may use the inverse paragraph ( </P>) at the end of the paragraph, but this is not completely necessary because a new <P> signifies that the former paragraph has ended.
Sometimes, you may want to end a line and start a new one without any white space in between. This is especially important in things such as addresses. To accomplish this, one uses the <BR> tag after line where a break is needed.
For example, the following code could be used for an address:
Mary Mutters<BR>
101 East Broadway<BR>
Bean Hill, NV 91234-2903<BR>
The output would be:
Mary Mutters
101 East Broadway
Bean Hill, NV 91234-2903
Sometimes, especially with text next to a picture, you want to the
tag to clear everything and start the text on a brand new line. If you ever run into a problem where this is not occurring properly, use the following:
<BR CLEAR=ALL>
Horizontal Rules: <HR>
Using horizontal rules is another nice way to break things up to make you page more presentable and easier to read by visually separating different sections of the document. The rule produced will be a horizontal line the width of the browser page. One may also control the thickness of the line with the size setting and what percentage of the page it covers with the width setting.
For example, the following code may be used:
<HR SIZE=5 WIDTH="60%">This, for example, would appear as:
Of course, one may always use the default <HR> without putting in SIZE and WIDTH commands, which would be:
<HR>
This would appear as:
Headings: <H#> </H#>
Headings are another easy way to visually separate the page and show structure because headings are larger and more bold than regular text. There are six different levels of headings available, and are used by inserting a number from one to six into the heading tag. For example, one should always start with a level one heading:
<H1>Level 1 Heading</H1>
It is bad coding to skip levels of headings, following a level 1 heading with a level 4 heading because it does not have predictable results with all browsers. Skipping levels will also make code more difficult to follow. The following chart shows the different heading levels:
Heading 1 |
| Heading 2 |
Heading 3 |
Heading 4 |
Heading 5 |
Heading 6 |
Headings were quite overused in past years, however, and the current standard is the use of <font size="+#"> tags, so that the reader's browser can interpret the font size as a relative size. This makes it easier for the reader to customize his or her settings, and makes for a more pleasant viewing experience. It does compromise your design in that what you see on your computer may not be what someone else sees, but people will love you for allowing them to change the font sizes!
Center: <CENTER> </CENTER>
Often times, it is nice to be able to center text, especially a title, allowing it to stand out more. We do this through the <CENTER> tag, before and after the text that we want centered. The example which follows illustrates this:
<CENTER>This text is centered.</CENTER>
Which outputs as follows:
This text is centered.
To center a paragraph, there is another method that we may use besides the <CENTER> tag. In the <P> tag, we may add another setting: ALIGN=CENTER. This appears in the tag as <P ALIGN=CENTER> and is used the same as the previously discussed <P> tag.
Sometimes, especially when we are quoting someone, we want the information to stay together and possibly be set apart from the other information on the page. This is where a block-quote comes in handy. See the following example:
<BLOCKQUOTE>
<P>Any society which does not insist upon respect for all life must necessarily decay.</P>
--Albert Einstein
</BLOCKQUOTE>
This would display as:
Imagination is more important than knowledge.--Albert Einstein
On to Part 6: Lists