Attributes for hyperlink and image elements

To specify which hyperlink or image to use, we provide a location, or address. Since providing addresses does not make sense for all elements, the attributes we use for this purpose are not global attributesAn attribute that can be added to any element.. Moreover, since the address information is used in different ways for hyperlinks and images, there are two different attributes used.

Providing an address for a hyperlink

The attribute used to provide the address of the destination anchorA source or destination of a hyperlink. of a hyperlink is the hyperlink reference attribute (href); the valueSpecific information for an attribute. will specify either another page or, as we will discuss soon, a particular element (on the same page or on a different page). The location of a page is given as a Uniform Resource Locator (URL). For this course, all you need to know about URLs is that they indicate which web page should be loaded.

Here is an example of a hyperlink element:

<a href="http://cemc.uwaterloo.ca">CEMC</a>

Providing an address for an image

The source attribute (src) is used to indicate the source from which an image, video, or audio file can be obtained. Remember that an image elementAn element used to include an image. is an empty elementAn element specified using a single tag., and hence uses a single tagMarkers to show the beginning and ending of an element.. The syntax for specifying an attribute for an empty element is like what we have seen before: the name of the attribute, an equals sign, and the valueSpecific information for an attribute. in quotation marks all appear in the tag.

Here is an example of an image element with four attributes:

<img src="balloons.jpg" height="200px" width="100px" alt="Picture of balloons">

You will often see the format jpg used for a photograph or other image that uses lots of colours and the format png used for a simple icon. There is a trade-off between the quality of the image and the space needed to store the image.

It is good practice to provide a description to be displayed if an image fails to load; this description can also be read by screen readers. This can be accomplished using the alternative text attribute (alt), for which the valueSpecific information for an attribute. is the description. It is also good practice to provide a height attribute (height) and width attribute (width) for an image so that the browser knows how much space to allocate for the image while loading other elements. The exception to this general advice is when we wish for an image to be able to be resized.

The designation px in the sizes refers to pixels, which are the individual dots of colour from which a screen image is formed.

Glimpse of the future

Later we will discuss other ways to specify sizes.