FranMich Logo

HTML/HTML5/XHTML - Lesson 8

All the hands-on labs are here for quick access.

Decorating Your Page with Images and Icons Content on web pages is king, but content isn't just text. Some of the most interesting web pages are interesting because of the images and iconography. Images are important on web pages, both for the design and for the content itself. This lesson will teach you how to add images to web pages, where to find images to use, and how to make sure that the images don't make your web pages too slow.
Adding Images to Web Pages Images are added to web pages with the IMG tag. Learn how to use this tag to put images, graphics, and icons on your web pages.
Image Attributes There are two required attributes to the IMG tag, but there are a number of other attributes you can use. Learn what all the various attributes are for and when you should and shouldn't use them.
Types of Web Images There are three types of images you can use on web pages: GIF, JPG, and PNG. In this article you will learn the difference between these types of images and how to use them.
Posting Images to Your Site Once you have added your image to your HTML you need to upload it to your website. This article explains how to get it to your website and make sure that it still works once it's up there.
Keep Your Images Small Images are the number one culprit in web pages that take a long time to download. Learn some tips to keep your images as small as possible, so that your pages load quickly.
Free Web Images If you don't want to take your own photographs or draw your own images, there are lots of resources on the web available for free. Please do not assume that any image on the web is "public domain" or free to use. Unless you have received permission from the owner, or you got the image from a royalty-free site like the ones listed here, it is not okay for you to use it on your website. Web images are copyrighted just like any other web
Activity This is the homework for the images lesson of the HTML class. It includes a short quiz (answers below) and a project you can do to practice what you've learned in this lesson.
Images Quiz  1. What element do you use to add graphics to web pages?

 2. What are the two required attributes for an image element?

 3. What types of web images are there and what are they used for?

 4. What are four ways to make your images smaller?
Images Project Add an image to your web page. Make sure your image is small and downloads quickly. Add a short paragraph caption under your image stating where you got the image or how you made it, if it's an original creation.

If you are sharing your work on the forum, be sure to write your question in the post or let us know you just want feedback on your web page.