MAIN 2 CODES
YOUR GRADED ASSIGNMENT
Add to your project by starting
4 more pages each (all 5 pages) with the same GRAPHICAL MENU.

SAVE & have the first 3 lessons graded!

No prefab FLASH menus!

Work smart by integrating daily graded lessons into your projects!


[1] First, find a picture (gif or jpg) and save it to your folder.

[2] The 2 most commonly used HTML codes
are for displaying images and making words and images "clickable"

to make words and images "clickable" to display an image
<a href=" "> ... </a> <img src="picture.jpg">

Example
(Click or mouseover)
HTML CODE What happens when clicked
<img src="wolf.gif"> displays the named image from your folder
<img src="wolf.gif" width=50 height=50> resizes the image to 50 x 50 pixels
you can also use percent. e.g. width=75%
I'm a wolf! <img src="wolf.gif" alt="I'm a wolf!"> when you mouseover the image, words appear!
HOME <a href="index.html" target=new>HOME</a> clicking the word HOME opens up a page called "index.html" in a new window. Leaving out the target will open in the same window

<a href="http://www.yahoo.com" target=new>
<img src="wolf.gif"></a>

clicking the IMAGE opens a WEBSITE in a new window.
Don't forget the "http://" for websites
Click for Yahoo! <a href="http://www.yahoo.com">
<img src="wolf.gif" border="0" alt="Click for Yahoo!">
</a>
Like the previous but removes the hyperlink border around the image and words appear on mouseover
<a href="wolfbig.gif" target=new >
<img src="wolfsmall.gif">
</a>
Clicking on a smaller image loads bigger image. Great for thumbnail picture galleries. You will have to use a paint program to resize and rename the smaller images.
<a href="howl.wav">
<img src="wolf.gif">
</a>
Plays a sound (wav, mid, mp3) when you click on the image. You might even record your own voice using in Start Menu - Programs - Accessories.
COMMON CODES <a href="#whatever">COMMON CODES</a>
<a name="whatever"></a> <--elsewhere on page
Causes a scroll effect on a longer page to the place where the anchor <a name="..."></a> is. The "#" must be added to the href link code only.
email me <a href="mailto:you@something.com">email me</a> Starts the built-in mail program and opens an email to be sent to you@something.com (will work on your home computer, but NOT at school)

Now, use the info above to make a MENU!
A menu can make or break a site!


USER FRIENDLINESS and proper MENU implementation go hand-in-hand.
A menu on every page makes it easy for the user to find what they want on your site
without having to click the browser BACK button (requiring the home page to be reloaded every time).
Menu names must be understandable and brief and easily found on every page.

For a graphic menu like the one below...



the HTML code would be:


<a href="home.html"><img src="home.png" border="0"></a>
<a href="friends.html"><img src="friends.png" border="0"></a>
<a href="pics.html"><img src="pics.png" border="0"></a>
<a
href="links.html"><img src="links.png" border="0"></a>
<a href="quotes.html"><img src="quotes.png" border="0"></a>

The border="0" business removes the BLUE FRAME Hyperlink effect.
You will have to have a paint program (that will do gif's or jpg's) to make the buttons.

OR for cool FREE designer graphic buttons try: