Lesson Four

Objectives:

  • Add graphics to your page
  • Recognize the two types of web graphics: JPEGs and GIFs

Learning HTML

Now that we have seen how to change the colors of our web pages, it is time to take it to the next level: adding graphics.

There are two main types of graphic files used on the web: JPEGs and GIFs. JPEG stands for Joint Photographic Expert's Group. GIF stands for Graphics Interface Format. Both of these types of files are compressed files. A compressed graphics file is not as sharp as say a photograph you'd see in National Geographic. Picture files are compressed to make them flow faster across the telephone lines of the Internet.

As a web designer, you will find that you are constantly looking for ways to make your files smaller because big files choke up your download time. One of the most important parts of web design is designing pages that download quickly.

Later, you will learn how to use Adobe Photoshop to create your own graphics from scratch. For now we will practice by collecting a series of images from the Internet. While you are surfing the net, if you see an image you like you can copy it into your folder by clicking on it with the right mouse button. A pop-up menu will appear. Choose Save Picture As...and save it into your folder. You can use the original name of the image, or change it to suit yourself. Note that as you save it, your browser will tell you whether the image is a JPEG or a GIF.

Once you have an image you need to insert it into the web page with the img src tag (image source). Let's say you have saved a picture with the name "rapper.jpg." The tag must be placed within the body of the web page. The tag looks like this:

<img src = "rapper.jpg">

As long as you have made sure that the picture was saved in the same folder as your web document, you should now be able to see your picture in the web page as soon as you refresh your page. That's how easy it is!

You can also easily place your images in the center or right side of your page. Graphics will automatically be placed on the left side of the page unless you tell them otherwise. To change the alignment of the picture to the center type the following before your img src tag:

<p align = "center" >

You should also close the tag (called the paragraph align tag) with the </p> tag.

So, this is how the whole set of code should look to align one picture to the left of the page:

<p align = "left" >
<img src = "rapper.jpg">
</p>

Take a look at this example of how it should look:

[example]
Now you're ready for your next assignment. Assignment #4.

<< Back