Web+Site+Project

**Web Site Building Tools**

[|W3C Tryit Editor] [|Web Safe colors] from Visibone http://www.immigration-usa.com/html_colors.html more Web Safe Colors - easier to copy/paste

1. Open your WORD file (from your file locker or the J: Drive) 2. Go to File --> Save As. . . 3. Don't change the file name, just add **.html** to the end of the file name 4. Make to change the folder where the .html file will save - should be J: drive --> Library Science HTML --> Green Team --> your folder
 * Saving your WORD file as a HTML file:**

The contents of your web page  || _ Contents of your web page ||
 * Tags you should know:**
 * **Tag** || **Name** || **Code Example** || **Web Browser View** ||
 *  || **bold** || ****Example**** || **Example** ||
 *  || **line break** || The contents of your page****The contents of your page || The contents of your web page
 * <span style="color: black; display: block; font-family: 'Arial','sans-serif'; font-size: 10pt; text-align: center;"><CENTER> || **center** || **<CENTER>**This will center your contents**</CENTER>** || <span style="font-family: 'Arial','sans-serif'; font-size: 10pt; text-align: center;">This will center your contents ||
 * <span style="color: black; display: block; font-family: 'Arial','sans-serif'; font-size: 10pt; text-align: center;"><FONT> || **font** || **<FONT** FACE="Times New Roman">Example**</FONT>** || Example ||
 * <span style="color: black; display: block; font-family: 'Arial','sans-serif'; font-size: 10pt; text-align: center;"><FONT> || **font** || **<FONT** FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">Example**</FONT>** || <span style="color: red; display: block; font-family: 'Times New      Roman','serif'; font-size: 24pt; text-align: center;">Example <span style="color: black; display: block; font-family: 'Verdana','sans-serif'; font-size: 9pt; text-align: center;">  ||
 * <span style="color: black; display: block; font-family: 'Arial','sans-serif'; font-size: 10pt; text-align: center;"><HR> || **horizontal rule, fancy** || **<HR** WIDTH="50%" SIZE="3" NOSHADE COLOR="[|#FF0000] <span style="color: black; display: block; font-family: 'Arial','sans-serif'; font-size: 10pt; text-align: center;">" SIZE="4"> || <span style="color: black; display: block; font-family: 'Arial','sans-serif'; font-size: 10pt; text-align: center;">Contents of your web page
 * <span style="color: black; display: block; font-family: 'Arial','sans-serif'; font-size: 10pt; text-align: center;"><I> || **italic** || **<I>**Example**</I>** || //<span style="color: black; font-family: 'Arial','sans-serif'; font-size: 10pt;">Example // ||
 * <span style="color: black; display: block; font-family: 'Arial','sans-serif'; font-size: 10pt; text-align: center;"><TITLE> <span style="color: black; display: block; font-family: 'Verdana','sans-serif'; font-size: 9pt; text-align: center;"> || **document title** || **<TITLE>**Title of your **HTML page</TITLE>** || <span style="color: black; display: block; font-family: 'Arial','sans-serif'; font-size: 10pt; text-align: center;">Title of your web page will be viewable in the title bar. ||
 * = <span style="color: black; font-family: 'Arial','sans-serif'; font-size: 10pt; text-align: center;"><U> ||= <span style="color: black; font-family: 'Arial','sans-serif'; font-size: 10pt; text-align: center;">**underline** ||= <span style="color: black; font-family: 'Arial','sans-serif'; font-size: 10pt; text-align: center;"><U>Example</U> ||= __Example__ ||
 * = <span style="color: black; font-family: 'Arial','sans-serif'; font-size: 10pt; text-align: center;"><IMG> || **image** || **<IMG** SRC="Earth.gif" WIDTH="41" HEIGHT="41" BORDER="0" ALT="a sentence about the image"> ||  ||

<body STYLE="filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=1, StartColorStr='#00FFFF', EndColorStr='#006666')">
 * Background Gradient Colors**

<A HREF ="http://www.google.com"> Google </A HREF> Be sure to replace the http and "Google" with your own address link and label!
 * Add a link to your website**

1. Find a picture with a "copyright friendly" or educational use license - try the Copyright Friendly Media page for links 2. Right-click on the picture and choose "Save Picture As" 3. Rename the picture something meaningful - pay attention to the file extension, which might by .jpg or .bmp 4. Save the picture in the SAME FOLDER you created on the J: drive within "Library Science HTML" 5. Copy and paste the image tag into your web site code, changing the file name and the alt= information. 6. Adjust the width and height so that your picture doesn't look squished or smashed.
 * Add a picture to your web site!**

http://htmldog.com/guides/htmlbeginner/ http://www.edwebproject.org/htmlintro.html http://www.quackit.com/html/tags/ http://www.devx.com/projectcool/Article/19816
 * HTML tutorials and lists of tags - many more are available online - just Google!**