Arachnophilia Tutorial 
LESSON II

PLEASE SIGN THE GUESTBOOK

FONTS & COLORS

NOW ITS TIME FOR THE FUN STUFF!

Font Attributes

• Io make text larger or smaller siply put it inside this tag <font size="+2>Larger</font>
  (Change the number to anything from + or -1 to + or - 6)
• To make it bold <b>Bold</b>
• Change the font <font face="georgia">Georgia</font>
• To change the color <font color="red">RED</font>
• Combine the effects <font color="red" size="+2"><B>Red</B></font>
• You can use the color chart located here to find colors.

IMAGES & FORMATS

Since images seem to give people the most trouble let me state a few things that you should know!

Path to Image

When you place an image tag on a page you are telling the browser where to find the image relative to the location of the document it is being displayed within. The browser will only look in the directory or folder where the html document resides unless you tell it to look elsewhere! Therefore, you MUST make sure the path to the image is included in the tag. Images located in the same folder only need the image name in the tag such as "mypic.jpg" but if the pic is in a sub-folder named "images" the path would be "images/mypic.jpg".

Image Names

When naming images you wish to use on a web page DO NOT USE LONG FILENAMES! This does not mean use short words but, do not use more than one word! Here is an example, "me on vacation.jpg" would not be displayed but "meonvacation.jpg" or "me_on_vacation.jpg" would be displayed.

Image Formatting

When publishing to the web you should try to keep the image file size as small as possible without losing quality.Much of this can be accomplished by file format or the type of image file you use. Most web images are published in either .jpg or .gif formats because the file size is fairly compact.

Windows bitmap or .bmp files and large pictures are not suitable for web publishing. Convert, crop, resize or all three to get the image size down to a small enough size they will load quickly thru the internet. I usually shoot for something less than 20kb on most images.

You probably dont have a graphics program other than the ones that come with windows which aren't much good. Here is a link to PhotoPlus 5, a really good free editor which should serve your needs. Spend just a little time learning to use it and you will have a lot of fun with graphics.

Image Tags

• Place more images on your page with the <img src="yourimage.jpg">
  (Be sure to upload the image to your directory.)
• Center the image <center><img src="yourimage.jpg"></center>
  
• Wrap text around by adding an alignment tag <img src="yourimage.jpg" align="left">
  now the text will wrap itself around the image on the left.
  Pretty neat huh? You can use align="right and align="center" as well to get
  different effects. Experiment a litle.

That should keep you busy for a while. Next lesson we will talk about links and how to link your pages together to navigate your site.

Home | Page 2 | Page 3 | Page 4 | Page 5 | Page 6 | Page 7