MORE HTML GOODIES
as Links ] [ Create
a HTML Tool Bar ]
[ Changing Text Color ]
[ Coloring Individual Sections] [ Color Your Link ] [ Changing your Font Size ]
[ Displaying Lists] [ Adjusting Image Size] [Adjusting the Horizontal Rule Tag]
TURN AN IMAGE INTO A LINK:
You can very easily turn your images into clickable links. You use the same format as the one you used to create a text link; however, instead of inserting text you insert the image of your choice.
(Your HTML would look like this)
Click on the books <a href="your bookmarkaddress"><img src="book20.gif"> </a> to go to my bookmarks.
PLACE YOUR LINKS IN A TOOL BAR
You can also string images together to make a toolbar. First you must create a few text boxes in your paint program. Give each text box a filename and extension (Gif or Jpeg).
Then string them together in your HTML document.
(this was a rush Job
-- I'm sure you can do better than this)
<A HREF="HOMEADDRESS"><IMG SRC="HOME.JPG" ></A>
<A HREF="TOPANCHOR"><IMG SRC="TOP.JPG" ></A>
<A HREF="BOTTOMANCHOR"><IMG SRC="BOTTOM.JPG"></A>
<A HREF="BOOKMARKADDRESS"><IMG SRC="BOOKS.JPG"></A>
As mentioned, you can place the images in a row at the top or bottom of your page. Placing the image tags in a row will force the browser to display the images side by side (like a tool bar)
CHANGING YOUR TEXT COLOR:
We can change the color of our text in our HTML documents by using the "TEXT" extension within the body tag. (Note: this changes all the text in the document)
Example: <body text="#color">
Here are a few colors to get you started:
You can also change the color of individual sections of text if you wish.
It is this simple:
Before the section of text you want to change place this tag <FONT COLOR="#the color you want to use">in front of the selected text. NOTE: Do not forget to close your tag after the selected text with the </FONT> tag.
What do you think will happen if you forget to close your tag? (If you are not sure ask your instructor or e-mail me at firstname.lastname@example.org )
Here is a sample of what you can do with the <font Color> tag
So You Want to Change Your Font Color Eh!
Here is what the HTML code would look like:
<FONT COLOR="#FF0000">S</FONT><FONT COLOR="#008000">o</FONT> <FONT COLOR="#804000">Y</FONT><FONT OLOR="#400080">o </FONT> <FONT COLOR="#FF0000">u </FONT><FONT COLOR="#0000FF">Want </FONT> <FONT COLOR="#800000">to</FONT> <FONT COLOR="#FF8000"> Change </FONT> <FONT COLOR="#00FF00">Yo</FONT><FONT COLOR="#400040"> ur</FONT> <FONT COLOR="#FFFF00">Font</FONT> <FONT COLOR="#808000"> Color</FONT> <FONT COLOR="#FF0000"> Eh</FONT><FONT COLOR="#8000FF">!</FONT></FONT>
Not Very Pretty, Is it.
COLOR YOUR LINKS:
You can add some color to your links as well. Just use the "LINK" extension in the body tag.
LINK = Links not yet clicked on
VLINK= Visited links
ALINK = Active links
<body LINK="#color" VLINK="#color" ALINK="#color">
THE FONT TAG:
If you want to change the font size in your document (but not the overall size of your text) you can use the font tag.
Example: <font size=4> this is a size four font </font>
Your font size will be a number between 1 (the smallest) and 7 (the largest).
Your default font size is 3 for most browsers.
Here is a Sample of the sizes:
1) this is number one
2) this is number two
3) This is number three
4) This is number four
5) This is number five
6) This is number six
7) This is number seven
Get the drift yet!
LIST TYPE EXTENSION:
You can specify the way a browser displays your numbered or ordered lists. You simply tell the browser what type to use by adding the "TYPE" extension to the ordered list tag. Here are your extensions:
<OL TYPE=1> WILL PRODUCE A LIST WITH STANDARD NUMBERS
<OL TYPE=a> WILL PRODUCE A LIST WITH LOWER CASE LETTERS
<OL TYPE=A> WILL PRODUCE A LIST WITH UPPER CASE LETTERS
<OL TYPE=i> WILL PRODUCE A LIST WITH SMALL ROMAN NUMERALS
<OL TYPE=I> WILL PRODUCE A LIST WITH LARGE ROMAN NUMERALS
For UNORDERED LISTS you can specify the "TYPE" as
disc (standard bullet),
circle (O) or square.
You can adjust the size of the image on your page by using the width and height extensions within the image tag.
<img src="filename" width=x height=x>
X = the size of your image -- you may want to experiment with various values until you get used to specifying image size. (Start around 50 for each and move up or down from there for practice)
ADJUST YOUR HORIZONTAL RULE TAG:
We can use a few extensions in the <HR> tag as well. Try out the following extensions:
<HR WIDTH=X> Sets the width of the line.
<HR WIDTH=X%> Sets the width of the line as a percentage of the page
<HR SIZE=N> Sets the thickness of the line (Default is one)
<HR ALIGN=LEFT> Aligns the line with the left of the page
<HR ALIGN=RIGHT> Aligns the line with the right of the page
<HR ALIGN=CENTER> Aligns the line in the center of the page
<HR NOSHADE> Displays the line as a solid bar (not inset)
Try each of these out in your browser (make a new HTM FILE)