Images & Lists

In this lesson, we worked with dispaying images within the web pages. We also created links that would access other web pages and/or sites.

Before I get to images, I will remind you that the discussion about creating lists was covered on the "Basic Web Page" page.
Click here to directly access that page and section.

Images: The <img> tag:

The basic format of the <img> tag is as follows (NOTE: Interestingly, this tag does not have a corresponding closing tag, nor is it "self-closing"):

It is important to note that the "name of image with extension" can refer to a file in the same directory as the current web page, a different directory, or a remote site. Also, the spelling of the image name, including the extension is case sensitive. So "image.jpg" is not the same as "Image.jpg" which is not the same as "image.JPG".

Example with local image:


Example with remote image:


The image tag, like other tags, has many attributes that can be used. One, for example, can control the size of the image:

Example with height="" attribute, which can be expressed as either a percentage (HTML 4.01) or in pixels (HTML5 only, which is preferred). This example is 10%:


Example with title="" attribute (pause your mouse over the image for a moment):


Example with alt="" attribute (which is used if the image cannot be displayed, or if the user is using a screen reader), I've also applied the height="" attribute to show how mulitple attribues can be used:

Brian Wilson


Finally, images can also be links. In this example I'm using a remote image as well as the target="" attribute for the <a> tag and the height="" attribute (in pixels) for the <img> tag:


Click here for more information on <img> attributes.

NAUTILUS:
This lesson was a refresher for me. It didn't introduce anything I didn't already have experience with, or had learned from the previous lesson.

The San Francisco Giants logo is the trademark of the San Francisco Baseball Associates, L.P.