Web Design (7)

Images (1)

Images and the Image Element

• Images can be placed in the flow of text.

• .jpg, .png and .gif image files work in web pages

• The img element tells the browser ‘place an image here’.

• The img element has no text content.

Image retrieval

<p>Here is the view that we had from the hot air balloon;<img src=“balloonride.jpg” alt=“view from balloon”>it was very quiet up there!</p>

The src attribute tells the browser the location (URL) of the image file.

When the browser sees the img element, it makes a request to the server and retrieves the image file before displaying it on the page.

This process has implications for the speed of your website.

The alt attribute

<p>Here is the view that we had from the hot air balloon;<img src=“balloonride.jpg” alt=“view from balloon”>it was very quiet up there!</p>

The alt attribute provides the alternative text that appears (in most browsers!) if the user has opted to turn images off.

It is OK to leave the alt element empty, but it must remain there (alt=“”) for the web page to be valid.

Exercise

In Windows Explorer create a new ‘Images Website’ Folder and add an index.html file

Copy any photo from your computer into your new website folder. (Make sure the original is safe!)

On your home page, using the format below, create an img element to retrieve it.

<p>Here is the view that we had from the hot air balloon;<img src=“balloonride.jpg” alt=“view from balloon”>it was very quiet up there!</p>

Image folder

• It is best to create an ‘images’ folder within your website folder.

• Do this now and move your photo into it.

• What change will you need to make to the code, in order to retrieve the photo now?

• <img src=“images/balloonride.jpg”• You can also place images from other

websites using an absolute URL (Permission?)

Resizing Images

• Right click on your image and select a picture manager e.g. from Microsoft Office

• Click ‘edit pictures’ and then ‘resize’ (in the right hand column).

• Enter the required width and height, keeping the same proportions.

• Click ‘OK’ and then the save symbol.

Width and Height Dimensions

• Knowing the dimensions of your image, you can add these (measured in pixels) to your code:

<img src=“images/balloonride.jpg” alt=“view from balloon” width=“100” height=“75”>

Be sure that the pixel dimensions specify the actual dimensions of the image. If not, the browser will resize your image to fit, maybe causing deformed or blurred results!

Exercise

Finally, copy 2 or 3 more of your photos into the ‘images’ folder.

Practice resizing them.

Now write appropriate code in order to place them on your home page.

For next time ….

… select 5 or 6 of your holiday photos, each one from a different holiday or location, if possible!

Landscape orientation and .jpg files are preferable.

Please have them readily available in your computer or on your memory stick.