Images and Links in HTML
Objectives
Lab
Practice
More Info.
Files

Images

To include an image in a web page, we use the img element. The img tag is an exception to the rule in that it is a singleton. In other words, it does not have a closing partner. There is a required attribute for the img tag as well. That attribute is the src attribute. The src attribute should point to the image file to be displayed. It is important to note that only .gif, .jpg and .png images can be displayed in a web page.

An additional attribute to use is the alt attribute. The alt attribute provides a description of the image in case the image can not be seen. This can happen if there is a server issue or, more importantly, if a user is utilizing a screen reader. Screen readers are often used by people with visual disabilities. 
<img src='pic.jpg' alt='This is a picture of a tiger' />

displays an image called pic.jpg (located in the same directory as the page).

Styling Images

There are a number of ways in which we can style images. The most common is to alter the width and height. The CSS width and height attributes can be set to pixels (px), which is the most common, or percents (%). If we want to alter the size of an image and maintain its original proportions, web designers must either use only one of the settings, or do the math to make the settings hold the same proportion. For example, if we have an image that is 1200px by 1600px originally and we want to shrink the image to be 300x400, any of the following options will work: style='width:300px' style='height:400px' style='width:300px; height:400px' In the first two examples, the image is shrunk proportionally because we are only setting one size. So, by setting the width to 300px, the browser automatically alters the height to the same ratio. In the third example, we overtly set each of the measures to the correct size. We could, if desired, use the third option to distort the image by setting either the width or the height to a value that is not proportional to the other.

Additionally, designers often choose to add a border around an image. The CSS border property takes three pieces of information, each separated by a space: size(px) style color. The size of the border can be anything from 0px (none) to any width. The style options include solid, double, dotted, dashed, inset, outset, groove, and ridge. Finally, the color for a border can be any reserved color OR hex value.

solid double dotted dashed inset outset groove ridge


Finally, images can be styled to have text wrap around them. Typically, in HTML, if an image is placed on a page, the text is aligned with the middle of the image:
This is text with an image. See how the text aligns with the middle of the image and leaves blank space both below above?

We can cause the text to 'wrap' around the image and fill the space using the CSS float property. The float property can be set to either left or right, identifying the placement of the image.
By setting the style of the image to float:left, we have created a situation in which the text will now wrap around the image, starting at the top and filling all of the space on the page. If we set the float value to right, the image would be on the right side of the page and the text would be on the left. It is important to note that float can be applied to many elements including divs. In this case, we sometimes want to create an element that ignores the float. To do this, we use clear:both.

Background Images

Often times, designers would like the background of their page to have a little more style than a simple color. This can be accomplished with using images in the background. This allows text to be written over the images. Background images can be set on any individual element, such as a div, or as the background of the entire page (applied to the body). Background images cannot be sized, but can be set to repeat (horizontally, vertically or both) to fill the area. It is important to note that background images should be in the background - they should not take attention from the important content on the page.

The CSS background property takes two pieces of information, separated by a space. The first is the address of the image, written in quotes in a url function. The second is the repeat pattern: repeat-x, repeat-y, repeat, or none.
style='background: url("bkgrnd.png") repeat-x'

Paths

There are two types of paths that can be written when pointing to an external file using the src or href attributes: absolute and relative. An absolute path is a direct path to a file from the main directory of the computer. A relative path is a path to a target file from the current file. Here is an example that may help:

You are at the mall in the food court. You ask a two passerbys how to get to Radio Shack. Person A responds "From the main entrance, go right. Then go up the escaltor. At the top, turn left and it is the 4th store on the right." Person R says "Go left and up the stairs. Then, turn right and it will be the 2nd store on the left."

Person A is giving absolute directions. They are taking you where you want to go, but you have to get to the main entrance to follow their directions. Person R is giving relative directions. They are getting you to Radio Shack from where you currently are.

Absolute paths to our files may look like this: C:\users\mengel\webSite\pages\page2.html. This will work in a web site, as long as you will only ever view the site on your computer, where it currently resided. But, if you move the site folder to a flash drive, that you computer reads as the F:\ drive, the page will be unable to find page2 because it will no longer exist at that address. Its new address may be F:\webSite\pages\page2.html. For this reason, it is important to write all file paths (src values) as relative paths. The rules for writing relative paths can be seen below:
  • If the files are in the same folder, just write the file name
    • path from about to contact: "contact.html"
  • If the target file is in a subfolder, write subfolder/filename
    • path from about to icon: "images/icon.jpg"