html: images and links many thanks to “joe,” at index.html, from whom i got these lessons!
TRANSCRIPT
HTML: Images and Links
Many Thanks to “Joe,” at http://www.pagetutor.com/html_tutor/index.html
, from whom I got these lessons!
Adding an Image
Links
Here is the tag for adding a link
<body> Go to <a
href="http://www.google.com/">Google!</a> </body>
Email Link
• An email link works in much the same way. We just use mailto: and an email address instead of a page address.
• <body> Send me <a href="mailto:[email protected]">Mail!</a> </body>
Making an Image a Link
• We can make an image a link if we want. Using the "Go to CNN" example, we simply substitute an <img> tag for the word CNN.
• <body> Go to <a href="http://www.cnn.com/"><img src="chef.gif" width="130" height="101"></a> </body>
FilesLet's suppose you have a few Microsoft Word
documents that you would like to offer. Just link to them...
<a href="myresume.doc">Download my resume</a><br>
<a href="mybio.doc">Download my autobiography</a>
Again, note that you must have the document in the same place as your .html file!
Images Warning!• If you use too many or too large images, your page can
take too long to load!• Making your image smaller will make your page load
faster.• Note: You must use an image editor to resize!
Decreasing “width” and “height” attributes within the <img> tag crams the same amount of information within a smaller area.
• Another way to make images load faster is to specify their dimensions.
• This website can be used for resizing and also for figuring what the dimensions of your image are:
JPG or GIF?
• Generally, use a JPG for photographs or images with a lot of blends or gradients,
• use a GIF for simple or line drawn type images that contain relatively few colors.
Thumbnails
• Another option is to use thumbnails.• Thumbnails are simply images that link (slide 5)
to a file (slide 6)!• The first thing you need to do is use your image
editor to make smaller versions of your images.• Note: You cannot make a thumbnail by reducing
its dimensions in the <img> tag. All this does is cram the full image into a smaller space. What you need to do is create a smaller copy of the image and use that as a link to the big image.
Thumbnails Cont.
<body> <a href=”vania1.jpg"><img src = “vania-thumbnail.jpg" width=“105"
height=“77"></a>
</body>
Assignment 5: A Few of My Favorite Things!
Create a web page of your favorite things! Include:• A title (Both the <title> tag and also a large heading at the top of
your page. These do not need to be the same.)• At least 3 images displayed on your page. Show off your formatting
skills by shrinking, stretching, centering, etc.• At least 3 additional images, organized by thumbnails that link to
larger copies of the images.• At least 3 links to other webpages.• At least 1 link to a file.• A link to your email address, using the “mailto” feature.• A description or heading for all of the above, informing your viewer
of what they are seeing.• Don’t forget your good old friends, font, size, alignment, headings,
backgrounds, colors, etc!