   Lesson 4. Images and Backgrounds. <BODY> Variables
........ and you should get a blue/grey background colour like this...... 
For the remainder of this tutorial we will be using images. Any image referred to in this tutorial as "image1" or "image1.gif" will appear as....... 
and any image referred to in this tutorial as "image2" or "image2.gif" will appear as...... 
and will appear in screenshots in these forms only. These files should be saved and kept in a new subdirectory called images off the htmlfiles directory, as described in lesson 3 You can save these images by placing your curser over them one at a time, and clicking the right mouse button. From the menu, choose Save Picture As or Save Image. Save them both to the images sub-directory. The BACKGROUND attribute allows the use of an image as a background. When an image is specified as the background the BGCOLOR only appears before the background image has loaded into the browser. Background images are tiled, that is they repeat across and down the screen until the whole background is filled. We are going to use image2 as the tiled background for this file. Add to "script5.html" in the following manner and save it as "script6.html". 
( notice the "pathing" to the image in the directory structure works in the same way as pathing to another file for a hyperlink described in lesson 3 ) and you should end up with this. 
Placing an image. <IMG SRC=" "> The tag for placing an image into the content of a document (rather than specifying it as a background) is another Open tag. It describes a single action, the instruction for the browser to extract the image from the location specified and display it upon the page. Images are pathed in the same way as before and this path is inserted between the quotation marks. For this example we shall use "image1.gif" which is located in the images subdirectory. Modify the file "script6.html" by removing the Heading text lines and adding <IMG SRC="./images/image1.gif"> and save this file as "script7.html". Use some <BR> tags to separate the image from the links. 
You should see the image placed a couple of lines down and to the left of the page thus: 
Image attributes. There are attributes that you can set withtin the image tag to specify width, height, border width and alternative text. They are placed within the <IMG SRC> tag in the same way as attributes are inserted for the <BODY> tag. ALT=" " The alternative text attribute allows you to specify text to appear instead of the image. This is useful if, for example, you have an image which takes a long time to load or if a visitor comes to your site with the "display images" option switched off on the browser. People using slower connections often switch images off to speed-up their download times. The provision of ALT text for images is essential in these circustances. Another additional benefit of the alt text tag is that many browsers display the contents of this attribute as a mouseover help. It is often useful when using images as button links (illustrated later in this lesson) as you can provide additional information to the visitor about how to navigate around your site. Switch the graphics off and refresh this page then switch the graphics back on and place your mouse over each of the images in turn to see this point illustrated. WIDTH=" " and HEIGHT=" " When you switched off the graphics to view this page you will have noticed that the formatting of the page didn't change, and that all the empty graphics boxes were the same size as the original images. this is done using the HEIGHT="" and WIDTH="" attributes for an image. The values specified between the quotation marks "" is the height or width that you want the image to appear on the screen in pixels. For our example image "image1.gif" which is 64 pixels wide and 64 pixels high, the normal size specification code would be <IMG SRC="./images/image1.gif" width="64" height="64">> But we can also manipulate the image using these attributes in different ways. <IMG SRC="./images/image1.gif" width="30" height="88"> <IMG SRC="./images/image1.gif" width="100" height="45"> Image as links. Images can be used instead of text as anchors on a page for links. In lesson 3 we created links between documents using..... Simply replacing "A Text Link" with the <IMG SRC="""> tag between the closed <A HREF=""> tags is all that is required. Will give this..
Notice how the image has a coloured border round it when it is used as a link. The border colour is the same as that set for the link text colour in the <BODY> tag. BORDER=" " BORDER=" " sets the width in pixels for the border image.This border only appears in most browsers when the image has been specified to be used as a hyperlink. Fashion is a curious thing, it is generally felt that a good slick-looking Web page has no borders round its image links and, arguably, good aesthetic design should produce Websites with intuitive navigation built into them. If this is so, then indeed there is no need for the borders to appear round linked images and so borders or not is merely a question of taste. More often than not, the default settings for a browser will mean that leaving off the tag altogether will create a small border around the image - typically two or three pixels wide, as we saw in the previous example. Some BORDER Examples using Image2.gif as a link...... <IMG SRC="./images/image1.gif" BORDER="0">
<IMG SRC="./images/image1.gif" BORDER="4"> <IMG SRC="./images/image2.gif" BORDER="8"> Having completed this lesson, you now have all the essential skills needed for creating a Web page of your own. You can now create a document with text of different styles, generate hyperlinks, specify colours, backgrounds and insert images, and also use those as links. Text, images and links....... that's all most Webpages are. There are more complex issues though, such as more advanced formatting and splitting documents up into component parts rather than whole singular Webpages. Some of these issues are dealt with in the final part of this tutorial. If you wish to leave us now in order to practice your new skills, then we hope you've found us useful and that you will return to us for more tutorials in the future.  Click
Hereto download the example files used in this lesson. Otherwise, please proceed to the next lesson.  |
|
 HTML Resource Centre Lesson 1 Getting Started
Structuring Your Page
Text on Your Page
Images and Backgrounds
Tables and Formatting
|