1. The Image Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.
The syntax of defining an image:
<img src="url">
The URL points to the location where the image is stored.
An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif. This is the file location of the image.
The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
The Alt Attribute
The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat">
The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. Include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.
Background
The background attribute sets the background to an image. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.
<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">
The URL can be relative (as in the first line above) or absolute (as in the second line above).
Note: If you want to use a background image, you should keep in mind:
-
Will the background image increase the loading time too much?
Tip: Image files should be maximum 10k - Will the background image look good with other images on the page?
- Will the background image look good with the text colors on the page?
- Will the background image look good when it is repeated on the page?
- Will the background image take away the focus from the text?
2. ASSIGNMENT 7 Due Date: Wednesday, 10/1/08:
Create some organizational/layout structure using a layout table and different headings on the page.
Create an html document that displays different images in the following ways. You may need to create more than one page to complete this:
- Background image: set an image as the background for a page
- Aligning images: align images in 3 different ways within text using the bottom, top and middle alignments
- Let the image float: show an image float to the left or right of a paragraph.
- Adjust images to different sizes using Photoshop CS2
- Display alternate text for all images in this assignment
- Make a hyperlink of an image