|
The basic tag to include an image is very simple:
<IMG SRC=jan3.gif ALT="a picture of me">
Where jan3.gif is the name of the file. Links to images can be absolute or relative (see chapter on links).
Image files can be of the GIF (Graphics Interchange Format) or JPEG variety. Most drawing software can save your work in GIF or JPEG format. There are also conversion programmes that convert other commonly used formats. For pictures that have large surfaces in the same colour, the GIF format is more effective. If there is a wide variety of small surfaces with different colours, usually JPEG performs better. If you have a possibility to do so, save your image in both formats and see which is the smaller. A smaller file means that your image can be downloaded and shown faster.
The ALT="a picture of me" defines the text that is displayed by a browser that cannot handle graphics or in case the user switched of the option to show graphics. The ALT attribute is obligatory. Visually handicapped people who use special braille computers to browse the web are totally dependant on what you write in the ALT attribute. If you use images as links it is important to remember this and provide an alternative.
Some graphics converters and drawing programmes allow you to save a GIF file as "interlaced". That means that the order of the horizontal lines of the image is not 1, 2, 3, 4, 5, 6, etc. but rather 1, 10, 20, 2, 11, 21, etc. The advantage of this is that some browsers can use the first few lines they receive to draw a rough version of the image before the whole thing is downloaded.
With an image you can use the ALIGN attribute. This determines how an image aligns with text. Possible values are "top", "middle" and "bottom". Take a look at this example:
Aligned top <IMG SRC=apple.gif ALIGN=top ALT="An Apple">
aligned middle <IMG SRC=apple.gif ALIGN=middle ALT="An Apple">
and aligned bottom <IMG SRC=apple.gif ALIGN=bottom ALT="An Apple">
Aligned top 
aligned middle
and aligned bottom
Style sheets allow a much more precise placement of text and images.
There are two additional values for the Align attribute: "left" and "right". This paragraph shows you an example of their use: you can wrap text around a picture! I used the value "left" here, so you will see the apple logo on the left side of the page. With the value "right" the apple would have been on the right side of the page, but otherwise the result would be the same. If you do not have enough text around a picture, netscape will pull up everything that comes after (text, graphics, horizontal rulers) until all the space next to the picture is filled. Other browsers will ignore the "left" or "right" value. They will put the picture on the left, the first line of text next to it and all the following text below the picture.
If you align pictures left or right, and need to make sure that at some point text continues after the picture you will have to use the <BR> tag with a CLEAR attribute:
<P><IMG SRC=apple.gif ALIGN=left ALT="An Apple">This text is next to the apple<BR CLEAR=left>and continues below it.
This text is next to the apple
and continues below it.
<P ALIGN=right><IMG SRC=apple.gif ALIGN=right ALT="An Apple">This text is next to the apple<BR CLEAR=right>and continues below it.
This text is next to the apple
and continues below it.
As you can see, the CLEAR attribute forces the text down to the next clear left or right margin. If you use CLEAR="all", the text will be forced down to a point where both margins are clear.
In more recent days, this has been replaced by float:left and float:right in style sheets.
Normally, browsers will put the images and text right next to each other. With the HSPACE and VSPACE attributes, it is possible to put space between pictures or picture and text. For example:
<IMG SRC=image1.gif ALT=Macintosh>
<IMG SRC=image2.gif ALT=BBEdit>
If you add the HSPACE="10" attribute the result looks very different:
<IMG SRC=image1.gif HSPACE=10 ALT=Macintosh>
<IMG SRC=image2.gif HSPACE=10 ALT=BBEdit>
The VSPACE tag works in the same way, as shown in these two examples:
Without VSPACE the text<BR>
<IMG SRC=image1.gif><BR>
will be close to the image.
Without VSPACE the text
will be close to the image.
With VSPACE the text<BR>
<IMG SRC=image1.gif VSPACE=20 ALT=Macintosh><BR>
can be moved from the image.
With VSPACE the text
can be moved from the image.
If you use style sheets, you can define white space around the image separately for each of the 4 sides as well as the padding between the image and the border.
Some browsers support the height and width attributes. That means that in the link to the image the size is included. Such a link would look like this (this is the image you find at the top all the pages of this guide):
<IMG SRC=top.gif WIDTH=492 HEIGHT=72>
The advantage of this is that the browser can download all of the text of a page and do the lay-out, before downloading the images. In practice this means that the user can start reading the text while the pictures are still being downloaded.
You can use a drawing or graphics programme to get the size of the images you use. Another possibility is to choose "view this image" in Netscape. Netscape will then show you a separate empty page with the image in it and the size (width x height) in the title bar of the window. Many HTML editors can insert width and height automatically.
If you specify anything else that the real size of the picture, most browsers will reduce or enlarge the image to fit the size you specified. Look at what this example does:
<IMG SRC=apple.gif WIDTH=500 HEIGHT=52 ALT="An Apple">
Probably, you will see the Apple logo stretched out horizontally, although it may not be stretched over the full 500 pixels specified here. The browser will attempt to stretch the image as much as you asked, but does not always succeed.
The BORDER attribute specifies the thickness of the line drawn around an image. The attribute can have a value of "0" up to anything you want. If the image is also a link, setting the border to zero can be confusing. This is what I did with the image you find on top of all the pages of the HTML guide:
<A HREF=index.html><IMG SRC=top.gif ALT="Jan's Guide to HTML" WIDTH=492 HEIGHT=72 HSPACE=5 VSPACE=5 BORDER=0></A>
This makes the image a link. Clicking on the blue-and-lavender "Jan's Guide to HTML" thing on any of my pages will bring you back to the table of contents. Because the border is set to zero, it is not recognisable as a link. This is sort of a "hidden feature" of my pages. Obviously, if you want to use images as links and you want your readers to know it, it is not a good idea to set the border to zero. Here is another example, with the border set to 5:
<A HREF=http://www.apple.com/><IMG SRC=apple.gif ALT="Visit Apple" WIDTH=56 HEIGHT=52 BORDER=5></A>
|
The <CENTER> and </CENTER> tags will centre text and images in the page horizontally. For example:
<CENTER><IMG SRC=apple.gif ALT="An Apple"><BR>
A centered Apple logo!</CENTER>
Another way to centre an image is to use the ALIGN attribute in the paragraph tag:
<P ALIGN=center><IMG SRC=apple.gif ALT="An Apple"><BR>
Another centered Apple logo!
In HTML 4 both the ALIGN="center" and <CENTER> have been discontinued in favour of using style sheets.
|
