Chapter 3
Images
Insert an image on your home page. Easy. Just type :
<IMG src="image.gif" >
image.gif , is the name of your image file. The
src="" attribute is used to specify the exact location of your file on your server's or your hard drive.
FILE NAMES ARE CASE SENSITIVE. So it might look like this..
<IMG src="../images/image.GIF" >
To help ensure your files are found by the server , its a good idea to
never use Capital letters in your file names. Most servers use UNIX as an operating system which is case sensitive.
To ensure a smooth page load you must use the width and height attributes like this..
<IMG src="image.gif" width="130" height="30" >
.. otherwise the browser does not know how much room to allocate for each image and bounces elements around until the image dimensions have been determined. The values 130 and 30 represent the width and height of the image in pixels. HTML editors automatically assign the images actual width and height. Easy. You can use the attribute
border="0" to eliminate the automatically assigned border when used within "A" tags. Most tags can also be assigned a name, which does not alter the tags output at all. It becomes useful when using JavaScript and other languages, letting you call a specific image by name and then replacing it. JavaScript is like and extension of html that can make your pages more dynamic and user interactive.
Use it like this inside the <img> tag
name="pic1". You can place attributes in any order. For browsers that haven't been designed to view images you can use the
alt="write text here" attribute to have text displayed in place of an image.
Text around images
Image placement is a major issue for web designers. To aid in accuracy we can use the
<TABLE> tag which we will get to in chapter 6 . For precision placement you can use the
<STYLE> tag which we will also cover later on in chapter 10 . Ok back to more attributes. To align an image with text we use
align="value" in the
<IMG> tag, where value is one of
left , right, texttop, top , middle , absmiddle , bottom or absbottom . Below are some visual examples.
align with top
align with bottom
align with absolute middle
Just to be really clear , to align text with the top of an image we would type
<IMG src="arrow.gif" width="32" height="27" border="0" align="top">
To wrap text around an image use the
left and right attributes. Take a look.
<IMG src="arrow.gif" width="32" height="27" border="0" align="left"> The image is to the <br> left of this text
The effect
The image is to the
left of this text.
To have clear space on either side of images , use the
<br clear="x">tag like this , where x = all , left or right :
<IMG src="arrow.gif" width="32" height="27" border="0" align="top"><brclear=all>
This text will be under the image.
The effect
This text will be under the image.
To add clear space around an image so that the text is not banked right up against the image we need to use the hspace="x" and the vspace="x" attributes. Where "x" = the number of pixels we want on either the horizontal or vertical sides of the image. For space on the left and right of the image type :
<IMG src="arrow.gif" width="32" height="27" border="0" align="left" hspace="20"> This text starts 20 pixels from the image
The effect
This text starts 20 pixels from the image.
Remember it places space on both the left and right sides. Use vspace="x" to add space to the top and bottom of the image.
Background Images
To use a background image, inside the body tag you would use the
background="file.gif" attribute. You can also add the
bgproperties="fixed" or
bgproperties="scroll" attributes to have the image fixed or have it repeat. Here is an example:
<body background="mypic.gif" bgproperties="fixed" bgcolor="white">
Horizontal rules
Finally , introducing the
<HR> tag. It adds a horizontal rule or line across the page.
Inside the
<HR> tag we can use the
size="" width="" and noshade attributes. Size is number of pixels high we want the line to be. Width can be either pixels or percentage of page
width="75%" and noshade has no value and fills in the line. Easy. Most tags have default values. The
<HR> tag has a default width of 75% and a size of 2.
