Text

Now that you know something about the structure of html, it's time to introduce you to some commands you can put to use. This section will go into detail about dealing with text and changing them to your liking.

• If you do nothing with the text, they will generally result in 3 pt Times New Roman style in black. If you decide to do otherwise, here's where to start. Before the text you want on the site, put the font element. <font> . Now, you can expand upon it to your liking.

• Inside the font element, there are three different attributes to choose from. They are font face, size, and color. Here are some examples

<font size='1'> This is size 1.
<font size='2'> This is size 2.
<font size='3'> This is size 3.
<font size='4'> This is size 4.
<font size='5'> This is size 5.
<font size='6'> This is size 6.
<font size='7'> This is size 7.

• As you can tell, one is smallest and seven is largest.

• Now, for some face changes. Say, Times New Roman is too boring for you and you want to explore. Well, here are some compatible fonts that should be available on most computers.

WINDOWS COMPATIBLE FONTS

<font face='Times New Roman'> This is Times New Roman.
<font face='Verdana'> This is Verdana.
<font face='Arial'> This is Arial.
<font face='Arial Black'> This is Arial Black.
<font face='Arial Narrow'> This is Arial Narrow.
<font face='Arial Rounded MT Bold'> This is Arial Rounded MT Bold.
<font face='Book Antiqua'> This is Book Antiqua.
<font face='Bookman Old Style'> This is Bookman Old Style.
<font face='Century Gothic'> This is Century Gothic.
<font face='Century Schoolbook'> This is Century Schoolbook.
<font face='Courier'> This is Courier.
<font face='Courier New'> This is Courier New.
<font face='Garamond'> This is Garamond.

MACINTOSH COMPATIBLE FONTS

<font face='Chicago'> This is Chicago.
<font face='Courier'> This is Courier.
<font face='Geneva'> This is Geneva.
<font face='Helvetica'> This is Helvetica.
<font face='Monaco'> This is Monaco.
<font face='New York'> This is New York.
<font face='Palatino'> This is Palatino.
<font face='Times'> This is Times.

IF INTERNET EXPLORER IS PRESENT ON YOUR COMPUTER, THESE FONTS ARE AS WELL.

<font face='Arial Black'> This is Arial Black.
<font face='Comic Sans MS'> This is Comic Sans MS.
<font face='Courier New'> This is Courier New.
<font face='Georgia'> This is Georgia.
<font face='Impact'> This is Impact.
<font face='Times New Roman'> This is Times New Roman.
<font face='Trebuchet MS'> This is Trebuchet MS.
<font face='Verdana'> This is Verdana.
<font face='Webdings'>This is Webdings. --> Webdings.

• Now, for the color attribute. This is pretty simple. As you probably know by now, colors are specified as 6 digit hexadecimal codes that portray the colors rrggbb. R is for the amount of red used, g is for the amount of green used, and b is for the amount of blue used. Here are some examples of font colors. There are more developed color charts elsewhere. Now, some colors actually work if you put their color name in, but you might not get the color you want, which is why it's better to get a color code.

<font color='000000'> This is black.
<font color='c0cc0'> This is silver.
<font color='808080'> This is grey.
<font color='ffffff'> This is white.
<font color='800000'> This is maroon.
<font color='ff0000'> This is red.
<font color='800080'> This is purple.
<font color='ff00ff'> This is fuschia.
<font color='008000'> This is green.
<font color='00ff00'> This is lime.
<font color='808000'> This is olive.
<font color='ffff00'> This is yellow.
<font color='000080'> This is navy.
<font color='0000ff'> This is blue.
<font color='008080'> This is teal.
<font color='00ffff'> This is aqua.

• Now for some font effects. There are a lot of those available and it's up to you to pick and choose from the ones I will list.

<b> This is bold. </b> This is bold.
<i> This is italic. </i> This is italic.
<u> This is underlined. </u> This is underlined.
<s> This is strikethrough. </s> This is strikethrough.
<big> This is big. </big> This is big.
<small> This is small. </small> This is small.
<tt> This is looks like typewriter text. </tt> This looks like typewriter text.
<strike> This is also strikethrough. </strike> This is also strikethrough.
<em> This is emphasized. </em> This is emphasized.
<strong> This is strong. </strong> This is strong.
<code> This is code. </code> This is code.
<samp> This is a sample. </samp> This is a sample.
<kbd> This is keyboard entry. </kbd> This is keyboard entry.
<var> This is a variable. </var> This is a variable.
<abbr> This is an abbreviation. </abbr> This is an abbreviation.
<acronym> This is an acronym. </acronym> This is an acronym.
<sup> This is a superscript. </sup> This is a superscript.
<sub> This is a subscript. </sub> This is a subscript.

• Now, there are three ways to encase text as quotations. Using the blockquote element, quotations are indented like they are quotes. Using the q element, a short quote is encased with quotes so you don't need to put them on yourself. Of course, you can also do it the easy way and just put the quotes in.

• I'm sure you've wondered how I get these nice breaks of space between each of these bullets. It is quite simple. I use the paragraph break element, also known as <p>. Beware, this one actually has an end tag </p>. Of course, if you don't want such a big break, there's always the sentence break specified by the <br> element. This is an empty tag which is why it is written as <br /> in XHTML. Since we're talking about spaces at the moment, it's also time to introduce the non-breaking space. This allows you to put spaces where HTML would otherwise just ignore and close. This non-breaking space uses the entity &nbsp;

• If at some point, you don't feel like using all the br's and the p's, there's also a command that shows the text exactly as you have it typed in your html editor. This element is known as the pre element. Look at the example below, actually, it gets it own page since it messes up the table strucure of this page. Click on the link below to see the preformatted text. The only bad thing about this command is that it renders your text to a code looking text and not the one you have specified.

Click here for the preformatted text.

• Now, on to headers and such. Headers are commonly used to separate sections of text ranging from most important to least. Take a look; there are six different headers.

<h1> This is header 1. </h1>

 This is header 1.


<h2> This is header 2. </h2>

 This is header 2.


<h3> This is header 3. </h3>

 This is header 3.


<h4> This is header 4. </h4>

 This is header 4.


<h5> This is header 5. </h5>
 This is header 5.

<h6> This is header 6. </h6>
 This is header 6.

• Let's say you want the text on the right side of the page instead of the left, here's what you do: The text element contains the attribute for align and the values: left, right, center, and justify. Just put the corresponding ones together to suit your purposes. Here's an example.

<text align='center'>Your text</text>

• Now, on to lists of every kind. Well, there's actually only three different kinds, but that doesn't make a difference. Lists are either unordered, ordered, or definition lists. Unordered lists don't have numbers but bullets instead. Here's one below:

<ul>
<li>Element One</li>
<li>Element Two</li>
<li>Element Three</li>
</ul>

• Here's a numbered list. You can specify what kinds of numerals you would like to use in style sheets. Here's an example of a numbered list below:

<ol>
<li>Element One</li>
<li>Element Two</li>
<li>Element Three</li>
</ol>

  1. Element One
  2. Element Two
  3. Element Three

• Now, definition lists are quite different from the previous two lists. They include the dl element, the dt term, and the dd description. Here's an example below of a defintion list:

<dl>
<dt>Sailor Moon</dt>
<dd>Also known as Tsukino Usagi.</dd>
</dl>

<dl>
<dt>Sailor Mercury</dt>
<dd>Also known as Mizuno Ami.</dd>
</dl>

Sailor Moon
Also known as Tsukino Usagi.
Sailor Mercury
Also known as Mizuno Ami.

• Not that bad, right? Now, I'm sure you know that you can put lists in lists. Want to see what I mean? Take a look:

<ul>
<li>Element One</li>
<ul>
<li>Attribute One</li>
<li>Attribute Two</li>
</ul>
<li>Element Two</li>
<li>Element Three</li>
</ul>

• You can also mix up different kinds of lists like an ordered list and an unordered list:

<ul>
<li>Element One</li>
<ol>
<li>Attribute One</li>
<li>Attribute Two</li>
</ol>
<li>Element Two</li>
<li>Element Three</li>
</ul>

• Here's the last thing I will cover, horizontal rules. Horizontal rules are used as dividers to separate text. The hr element has the attributes align, noshade, size, and width. The align attribute uses the same values as the regular text align. The noshade attribute signifies whether you want the horizontal rule to be shaded. The size attribute decides how tall you want the rule to be in pixels and the width attribute is specified in pixels or percentages.

• Ok, it's time to take a break. You've learned much about text, and it's time to put it to use. Try something on your website and see what happens. Then when you're ready, come back and start the links section.

Back