HomeHelpSite indexFeedbackSearch
Yenza!

Building a website

Developing a website
General discussion
of site


Learning HTML

Required Tags

Basic layout and
formatting tags


Hypertext links

Images

Tables

Fonts

Planning and building

Going live

HTML editors

Web
development
resources


Ongoing skills
development


Web databases

Learn to use the Internet

Start your research

Yenza! for trainers

The Internet for training

Subject links
Learning HTML

Inserting images

The following are covered in this subsection:


Basic image tag

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.

HTML Coding Display
<IMG SRC="larrow.gif">
<IMG SRC="rarrow.gif">

Alternative text

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:

HTML Coding Approximate Display
<IMG SRC="larrow.gif" ALT="Back Arrow"> [Back Arrow]

It's particularly important to include alternative text descriptions of all images used for navigational purposes, for example buttons saying "home" or "back".


Linking from images

It is possible to link from images in the same way you link from text:

HTML Coding

<A HREF="index.htm"><IMG SRC="larrow.gif" ALT="Back to main page">Back to main page</A>

 

Display

Back to main pageBack to main page

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:

HTML Coding

<A HREF="index.htm"><IMG SRC="larrow.gif" BORDER="0" ALT="Back to main page">Back to main page</A>

 

Display

Back to main pageBack to main page

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.


Aligning images

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:

HTML Coding

<A HREF="index.htm"><IMG SRC="larrow.gif" BORDER="0" ALIGN="TOP" ALT="Back to main page">Back to main page</A>

 

Display

Back to main pageBack to main page

 

HTML Coding

<A HREF="index.htm"><IMG SRC="larrow.gif" BORDER="0" ALIGN="CENTER" ALT="Back to main page">Back to main page</A>

 

Display

Back to main pageBack to main page


Background images

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:

HTML Coding Display
<BODY BACKGROUND="larrow.gif"> Approximate display (this pattern would cover the whole page)





More subtle background patterns can be used effectively to add colour and texture to a page.

 

 
Top of the Page

Questions? Comments? Contact the site administrator.