So--how do you do all those whacky things like italics or lists with your text, anyway?
The following is a list of codes you can use to make your text look cooler.
<BR> This is to start a new line, like "Enter" or "Return" on the keyboard. Note:
you may want to be careful about using <BR> too often. Without it, the computer
will automatically format your text lines to be as wide as the computer screen when
opened in Netscape or Explorer. If you use line breaks, the text lines will always end
right where you tell them to, even if your viewer's computer screen is much wider or
narrower. So don't hassel with them too often. They are useful for poetry or
places where you are using images (see further on in my tutorials) and only want one
image per row.
<P> This skips a line, like hitting "Enter" twice on the keyboard.
<CENTER> and </CENTER> Whatever lies between these two tags will be centered
in the middle of the webpage.
<BLOCKQUOTE> and </BLOCKQUOTE> These are for separating paragraphs. Another
word of warning; paragraphs in HTML cannot be indented the way normal paragraphs are,
with just the top line several spaces in. Instead, the entire paragraph will be indented
and a space will skipped before and after the paragraph and the rest of the text.
<B> and </B> Whatever is in between these two tags will be in bold.
<I> and </I> Whatever is in between these two tags will be in italics.
<U> and </U> Whatever is in between these two tags will be underlined.
<Hx> and </Hx> Substitute any number from 1 to 6 (one is the largest) for x. This will create a title; the text in between these two codes will be the size specified and in bold.
<FONT SIZE=x> and </FONT> Substitute a number between 1 and 7 for x. (1 is smallest.)
Whatever is in between these two tags will be written in the font of that size. If these
tags are not present, the text will appear in size 3. You can experiment with different
<FONT COLOR=#xxxxxx> and </FONT> Substituting a color code for xxxxxx will
make the text in between these two tags appear in that color. To find out more about
colors and color codes, see my "Colors" tutorial.
<FONT FACE="xxx xxx"> and </FONT> Substitute the name of the font you want for
the x's. Be sure it is the exact name. Note; default font is Times New Roman. If
your viewer does not have the font you specify installed on their computer, it will appear
in Times New Roman, or sometimes not at all. Be sure to tell your reader (in plain, near
the top of the screen) what fonts are needed to view the page as you intended. Or, you could use
the following code:
<FONT FACE="xxx,yyy"> and </FONT> Specify one font for the x's and one font for the y's;
you can use as many fonts as you want. If the viewer does not have the first font written, the
computer will use the second font, as so on. If none of the font options you've given are available
to the viewer, it should still revert back to Times New Roman.
The only font which doesn't have to be installed on the viewer's computer is the
typewriter font. Just use the tags <TT> and </TT> instead of the font tags, and the
text in between the tags will be typewriter text.
By the way, any time a tag has two words in it, such as "FONT" and then another word, you
can combine all the tags into one. So you could have <FONT SIZE=x COLOR=#xxxxxx FACE="xxx,yyy">
and then the text, followed by </FONT>.
<HR> This is for making a horizontal dividing line across your webpage. You've
probably seen some of them; I use a lot on my webpages. Most of the ones on my pages are
fancy and are actually images, not made using this code. The ones used for this code will look like this:
<HR WIDTH=xx%> or <HR WIDTH=xxx> These are for adjusting the width of the
rule, by plugging numbers in for the x's. The first one I showed above will make the rule a certain percentage of the screen's width; this is the one I recommend. Without a
percent sign, the computer will interpret the code as the second one I just showed, in
which the numbers stand for the number of pixels across the rule will be.
<HR SIZE=x> This changes the height in pixels of the rule.
<HR ALIGN="xxxx"> Rules are always centered on your website unless you add the "align" code. Substitute "left" or "right" for the x's and the rule will align itself to that side of the page.
<HR NOSHADE> Horizontal rules are usually just the outline of a bar
with white inside. This code fills that outline in. However, the color of a rule will
always be gray, unless you use the next code.
<HR COLOR=#xxxxxx> Plugging color codes in for the x's will make the rule that
color. Again, see my "Colors" tutorial for more on colors and color codes.
Remember, you can combine all these codes into one big code. For instance, to get a horizontal rule that stretches 50% of the width of the screen or window, is 10 pixels high, aligns to the left, is filled in, and is red, you would do the following:
<HR WIDTH=50% SIZE=10 ALIGN="left" NOSHADE COLOR=#FF0000>
It should look like this:
HTML also has a handy tool for making lists. There are three kinds:
So now that you can see what a list looks like, let me show you the codes.
- This is a simple list, in which there is a bullet to the left of each item.
- Like the bullet list but with numbers.
- This right here is an example of a "definition" list, since it's difficult to describe. In a "definition" or "outline" list, you type a definition or something
similar, and then the explaining text indented beneath it.
<UL> and </UL> These go and the beginning and end of a bulleted list. At the head of each entry on the list, put the code <LI>. Like so:
<LI>First entry here.
<LI>Second entry here.
<LI>Third entry here.
The numbered list is exactly the same, only instead of <UL> and </UL>, you'd use <OL> and </OL>.
Finally, there's the definition list. The setup is similar, but at the beginning and end use the codes <DL> and </DL>. Then, instead of <LI>, use <DT> and <DD>. Type your first term beside <DT>, then beneath it type <DD> and the details. I gave an example of what that list should look like on the webpage above; here's what it will look like in code:
<DT>First term here; say you're defining HTML jargon. You'd write "HTML."
<DD>Details here, so you'd write "This stands for HyperText Mark-up Language."
<DT>Second term here. Maybe "horizontal rule."
<DD>"A horizontal line across a webpage, dividing one section of the page from another."
You get the idea.
It's also possible to make text blink. Simply use these codes:
Now, if your viewer is using Internet Explorer, they will also be able to see "scrolling"
text; text that moves across the screen from one side to the other. Netscape viewers
will only see unmoving text. But here are the codes in case you want to try it.
<MARQUEE>Scrolling text.</MARQUEE> This is the most basic code. The text
will start on the far right side of the screen and move all the way across to the far
<MARQUEE WIDTH=xx%> Substitute a number for the x's and the text will start that
percentage of the way across the screen and move left.
<MARQUEE BGCOLOR=#xxxxxx> This changes the color of the part of the screen the
text moves across. Substitute a color code for the x's. (See "Colors" for more on color
Normally, the scrolling text will move all the way across the screen to the left, dissapear,
and reappear on the right side again. With the following code, it will change direction
and go back and forth between the right side and the left:
Or, if you want the text to start on the left and move right, use this code: