Special Formatting with the Homepage Construction Kit

The Homepage Construction Kit is set up to make things as easy as possible for users. Unfortunately making things simple often means making things similar. If you want your page to stand out from the crowd or simply reflect your personal style a little more, one thing you can do is to add HTML.

HTML (Hypertext Markup Language) is the code that all web pages are written in. Although it can be very complicated, there are a lot of very simple parts of it that you can use to great effect.

The way it works is by adding in special codes before (and sometimes after) the normal text on your web page. These codes are usually called “tags”. Each tag is made by putting a code inside the less than “<” and greater than “>” symbols. If a tag is required at the end of your text, then a slash “/” is used before the code letters.

For example:

would turn on boldface type

would turn off boldface type

<hr> would put a horizontal rule (dividing line) across the page

Below we will look at many useful tags to spice up your page.

Formatting text

· Bold, italics, and underlining
You can add these text effects by using the , , and tags around the words you wish to format.

This:	Will look like:
<b>This is bold.</b>	This is bold.
<i>This is in italics.</i>	This is in italics.
<u>This is underlined.</u>	This is underlined.
This uses <b><i>multiple formats.</b></i>	This uses *multiple formats.*

· Font face, size, and color
You can change the font used for your text, as well as its size and color by using the tag.

This:	Will look like:
<font face=“arial”>This will be in Arial.</font>	This will be in Arial.
<font size=+2>This will be bigger.</font>	This will be bigger.
<font size=-2>This will be smaller.</font>	This will be smaller.
<font color=“blue”>This will be in blue.</font>	This will be in blue.
This uses <font color=“red” face=“Courier New”>several font attributes.</font>	This uses several font attributes.

Note: Common font sizes include –4, -3, -2, -1, +1, +2, +3, +4

Note: Font colors include red, blue, green, yellow, orange, purple, and just about any other color you want.

For a complete listing of color names to use, go to:

http://www.mindspring.com/~dirkv/htmcolor.htm

Lists

· You can added numbered lists (or Ordered Lists) to your page with the <ol> and <li> tags. The <ol> tag begins and ends the list, while the <li> tag introduces each item.

This:

Will look like:

My favorite foods in order are

<ol>

<li>Steak

<li>Shrimp

<li>Pizza

</ol>

My favorite foods in orderare

1) Steak

2) Shrimp

3) Pizza

· You can added bulleted lists (or Unordered Lists) to your page with the <ul> and <li> tags. The <ul> tag begins and ends the list, while the <li> tag introduces each item.

This:

Will look like:

Some of my favorite foods are

<ul>

<li>Pizza

<li>Steak

<li>Shrimp

</ul>

Some of my favorite foods are

· Pizza

· Steak

· Shrimp

Alignment

· Centering – You can center your text by using the <center> tag

This:	Will look like:
<center>This is centered.</center>	This is centered.

· Blockquote – You can set a block of text apart with an indent using the <blockquote> tag

This:

Will look like:

Following is a blockquote:

<blockquote>Use a blockquote when you have a section of text that needs to be set apart from the rest of your text, like a passage quoted from a book.</ blockquote >

Following is a blockquote:

Use a blockquote when you have a section of text that needs to be set apart from the rest of your text, like a passage quoted from a book.

Links

· If you want to add a link to another web page your can do that with the anchor tag <a> as shown below:

This:	Will look like:
A great search site is <a href= “http://www.yahoo.com”>Yahoo</a>.	A great search site is Yahoo.

Images

Adding an image looks kind of like adding a link. You need to have the full web address of where the image is stored to bring it up in your page. The format looks like:

Hint: One way to store images for use on your web site is to add them to your pictures page and then make the picture inactive. Visitors will not see the image on the pictures page, but it will be available for your use with the <img> tag.

Where to get images: You can get images from anywhere on the Internet, but a few recommended sites are:

· http://images.google.com

· http://www.gifanimations.com/

· http://www.geocities.com/SiliconValley/6603/anima.htm

Extras

· Horizontal rules – You can add a generic horizontal rule to your web page with the <hr> tag.

This:	Will look like:
<hr>

· Marquees – For a real neat effect you can add a scrolling text message to your page. The format looks like:

<MARQUEE LOOP="infinite" BGCOLOR="yellow" WIDTH="300">
Scrolling text is so much fun.....I can scroll forever!
</MARQUEE>

LOOP sets how many times the text will scroll across the screen. Set to infinite to keep it going forever.

BGCOLOR sets the background color of the marquee, with the same color options as before.

WIDTH is how many pixels wide the marquee is. Most screens are 640 to 800 pixels across.

Learning More

This has only been a small introduction to what you can do with HTML. You can learn more in any book on HTML or at the following web sites:

· HTML: An Interactive Tutorial for Beginners
http://www.davesite.com/webstation/html/

· HTML Primer
http://www.htmlprimer.com/

· Lissa Explains it All
http://www.lissaexplains.com/

Questions, comments, concerns? Email me at:

ecurts@neo.rr.com or tech@viking.stark.k12.oh.us