<!-- 5 Images-->

Although the main reason of a web page is supposed to be information, presentation is also very important. Images can greatly enhance a web page if used correctly and in suitable situations. Do not add an image just to have an image, add it if it will improve your page or emphasise your point. Remember, a picture can paint a thousand words.

the most basic tag

I will start you off with just the bare necessities for inserting an image. Once again I ask that you have the image file in the same directory as the HTML document and the tag would be:

<img src="image.gif">

Isn’t that easy? Don’t worry it will get harder.

adding inline images

An in line-image is a term used for images in a web-page.

Explorer View 5.1 - click on the image to see a bigger and clearer version

You will notice above that the text is aligned with the bottom of the image. This is the default but it can also be changed to top or center. This is done using the align attribute of the <img> tag.

Explorer View 5.2-click on the image to see a bigger and clearer version

You can see above the different align attributes. The only problem with this is that the text does not wrap. This problem however is overcome using the two other options to the align attribute which are left and right. The text then automatically starts at the top of the image and each new line is still beside the image until the text reaches the bottom of the image and wraps around it.

The above list produces this page:

Explorer View 5.3 click on the image to see a bigger and clearer version

You might have noticed in Explorer View 5.3 that the text is very close to the picture. This can look bad as well as being very difficult to read. To fix this problem you can use the vspace and hspace attributes of the <img> tag. These attributes provide space above, below, to the left and to the right that will be left blank. Vspace stands for vertical space and hspace stands for horizontal space, they are both measured in pixels.

Your page will then have blank space surrounding the picture in which no text will appear.

Explorer View 5.4 - click on the image to see a bigger and clearer version

It is now easier to read as well as looking a lot better. I recommend that you use this tag with all images.

width and height

It is important to remember when designing a web-page that some people will view it with images turned off. If this is the case and you do not include the width and height attributes well then all they will see is this However if you include the width and height attributes they will see this This way your text layout will remain the same.

Another beneft to specifying width and height is that the page will load faster. The browser will read the width and height of the image and alocate space on screen for it. It will then continue reading the rest of the page before it even tries to download the image. This way your visitors will be able to read your text even before all image have loaded.

The width and height are both attributes of the <img> tag and are both measured in pixels.

To include them simply type:

<img src="image.gif" width=50 height=87>

This is the same listing as Notepad Viewer 5.4 except that the width and height attributes are included. The text should now still appear properly on browsers with images turned off.

Explorer View 5.5 (with images turned off) - click on the image to see a bigger and clearer version

resizing

You can use the height and width attributes to resize your image simply by assigning sizes smaller or bigger than the actual size. You should be careful however that you do not distort your image by using out of proportion values for the width and height. One way to do this is to simply specify one (ie only height or only width) the browser will then accurately calculate the other value.

It is also important to remember that if you make your images smaller than they are naturally the user will still have to download the entire full size image even though she will only get to see a smaller version.

supplying alternative text

Some people will visit your site with text only browsers. It is important that you with some alternative text seeing as they won't be able to see your images. This text will also be visible to those viewing your page on a modern browser but with images turned off. It is even of value to those with images turned on they will see this text before the image loads and when they hold the mouse over the image for a few seconds.

Before loading, or with image turned off.

When mouse is held over for a few seconds.

Notice that in the above image, the yellow box would also pop up if images were turned on. The only difference is that the image would be behind it.

the complete tag

The following is the complete tag you have learned in this chapter:

<img src= "image.gif" align=left height=67 width=74 vspace=15 hspace=10 alt= "what a lovely picture" >

I would suggest that "width", "height" and "alt" are three of the most important attributes of the image tag. A site that uses them is always better than a site that doesn't.

next lesson    home    comment    more downloads    download this

HTML Builder- End of Lesson 3

You will need two images to complete the html builder picture.gif and talk.gif. If you have downloaded this tutorial then you already have the files, if you haven't then you will have to download them now. Right-click on the links and choose "save target as..." or "save link as...", whichever appears (it will depend on your browser). Save the pictures in the same folder as your html builder file.

Notepad Viewer- HTML Builder 3

<html> <head> <meta name=keywords content="practice, web, page, html"> <meta name=description content="this is the site I will use to practice writing HTML"> <title>

I have now completed Lesson 3

</title> </head> <body topmargin=20 leftmargin=15 text=fuchsia link=navy vlink=blue alink=green background="nonexistent.jpg" bgcolor=aqua bgproperties=fixed> <basefont face="lucida casual","arial" size=3 color=fuchsia> <h1 align=center>This is what I have learned</h1> <hr size=3 color=lime width=75% align=center> <h2>I have now finished lesson 1.</h2>

<img src="talk.gif" height=80 width=80 alt="talking man" hspace=40>

<hr size=3 width=75% color=lime align=left> I know the very basics of writing HTML. I know that the start and end HTML tags are necessary in a HTML document. I know that the meta tag is used to give information to search engines, i.e keywords and description<p> I am able to assign a title to my documents (see taskbar above).<br> I know that all text and images etc. are to be included between the start and end body tags. I know two attributes of the start body tag, topmargin and leftmargin and I know that each of these is measured in pixels. I know how to insert hidden text in a HTML document for example there is hidden <!--this text is hidden so you cannot see it on the webpage--> text in between the words hidden and text in this sentence. <hr size=3 width=75% color=lime align=left> <h2>I have now finished lesson 2</h2>

<img src="talk.gif" height=80 width=80 alt="talking man" hspace=40>

<hr size=3 width=75% color=lime align=left> Most of what I learned in lesson two was about changing the look of my webpage. I have already made some changes to this page and I will tell you what they are in an indented paragraph. <blockquote>As you can see I have added a background colour to the page and if I want I know how to add a tiled image. I have set all of the attributes in the body tag, most of them concern the colour of different text. I have added paragraphs and line breaks to the text. I have set the basefont tag and <font face="flexure","times new roman" size=+1 color=black>know how to use the font tag </font>.I have added horizontal lines and I have added headings. I have also added paragraphs and line breaks.</blockquote> <pre> I am able to ----------------- use preformatted text to make it appear in the order I want it to </pre> <p>I can format my text so as it is<br> <b>bold</bold><br> <i>in italics</i><br> <u>underlined</u><br> <tt>tele-type</tt><br> <strike>strike-through</strike><br> <sup>superscript</sup>, <sub>subscript</sub><br> <small>small</small><br> <big>big</big><br> <b><u><i>or</i></b><sup><big> a</u></sup><tt><strike> combination</big></tt></strike></u>

<hr size=3 width=75% color=lime align=left> <h2>I have now finished lesson 3.</h2><img src="talk.gif" height=80 width=80 alt"talking man" hspace=40> <hr size=3 width=75% color=lime align=left> This lesson was based on one chapter and the central topic was inserting images in HTML documents.<p> I have already inserted .gif files on my page and now I will now show you some other things I know how to do with images.<p> <img src="picture.gif" align=left height=128 width=128 alt="this is text written in the alt attribute" vspace=10 hspace=10> This text is beside a left-aligned image and will wrap when it gets to the bottom. This text is beside a left-aligned image and will wrap when it gets to the bottom. This text is beside a left-aligned image and will wrap when it gets to the bottom. This text is beside a left-aligned image and will wrap when it gets to the bottom. This text is beside a left-aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom.<p> This is only one line of text and appears center aligned <img src="picture.gif" align=center height=128 width=128 alt="this is text written in the alt attribute" vspace=10 hspace=10><p> I know how to resize images using the width and height attributes. e.g.<img src="picture.gif" align=center height=60 width=160 alt="this is text written in the alt attribute" vspace=10 hspace=10> <p>I understand all the attributes of the img tag and they have all been used for the images above.

</body> </html>

	Please tell me what you think
	name
	email
	website
	comments

next lesson    home    comment    more downloads    download this