Manipulating Text With HTML

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.

This is to start a new line, like "Enter" or "Return" on the keyboard. Note: you may want to be careful about using 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.

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.

and Whatever is in between these two tags will be in bold.

and Whatever is in between these two tags will be in italics.

and 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.

and 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 sizes.

and 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.

and 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:
 and 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 and then the text, followed by .

<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:

Bullets
This is a simple list, in which there is a bullet to the left of each item.
Numbers
Like the bullet list but with numbers.
Definition
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.
So now that you can see what a list looks like, let me show you the codes.

<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:
<UL>
<LI>First entry here.
<LI>Second entry here.
<LI>Third entry here.
</UL>

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:
<DL>
<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."
</DL>
You get the idea.

It's also possible to make text blink. Simply use these codes:
<BLINK>Blinking text.</BLINK>

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 left.

<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 codes.)

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:
<MARQUEE BEHAVIOR="alternate">

Or, if you want the text to start on the left and move right, use this code:
<MARQUEE DIRECTION="right">