![]() |
![]() |
General discussion of site Learning HTML Planning and building Going live HTML editors Web development resources Ongoing skills development Web databases |
Learning HTML Inserting images
The following are covered in this subsection: The <IMG> tag is used to insert images into documents. Additional attributes are used within the tag to specify the source of the image, image alignment, and alternative text to display. The <IMG> tag must include at least the SRC attribute followed by the name of the image file. Other attributes are optional. The <IMG> tag is not used in pairs.
Because some users turn off image display to speed up loading time - and some browsers do not display images at all - the ALT attribute is used with the <IMG> tag to include a description of the image. This description is visible if (for whatever reason) the image is not displayed:
It's particularly important to include alternative text descriptions of all images used for navigational purposes, for example buttons saying "home" or "back". It is possible to link from images in the same way you link from text:
If you click on the image above it will take you back to the main "developing a web site" page. Note that the image has a border around it, the same colour as the other links on the page. This border can be removed by setting the border attribute to 0:
If you click on the image above it will still take you back to the main workshop page, although it is not highlighted as a link. By default the bottom line of an image is aligned with the bottom of the text which follows it: In the example above, the bottom point of the arrow and the bottom of the text are in alignment. Text/image alignment can be modified using the ALIGN="TOP" and ALIGN="CENTER" attributes:
An image can be used as a background pattern for a page by using the <BODY> tag with the BACKGROUND attribute and the name of the image file:
More subtle background patterns can be used effectively to add colour and texture to a page.
|
|||||||||||||||||||||||||
|
||||||||||||||||||||||||||