Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML: Images and Links Many Thanks to “Joe,” at index.html, from whom I got these lessons!

Similar presentations


Presentation on theme: "HTML: Images and Links Many Thanks to “Joe,” at index.html, from whom I got these lessons!"— Presentation transcript:

1 HTML: Images and Links Many Thanks to “Joe,” at http://www.pagetutor.com/html_tutor/ index.html, from whom I got these lessons! http://www.pagetutor.com/html_tutor/ index.html

2 Adding an Image

3 Links Here is the tag for adding a link Go to Google!

4 Email Link An email link works in much the same way. We just use mailto: and an email address instead of a page address. Send me Mail !

5 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 tag for the word CNN. Go to

6 Files Let's suppose you have a few Microsoft Word documents that you would like to offer. Just link to them... Download my resume Download my autobiography Again, note that you must have the document in the same place as your.html file!

7 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 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:

8 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.

9 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 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.

10 Thumbnails Cont.

11 Assignment 5: A Few of My Favorite Things! Create a web page of your favorite things! Include: A title (Both the 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!


Download ppt "HTML: Images and Links Many Thanks to “Joe,” at index.html, from whom I got these lessons!"

Similar presentations


Ads by Google