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"
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 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.
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
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.
To use a background image, inside the body tag you would use the background="file.gif"
attribute. You can also add the bgproperties="fixed"
attributes to have the image fixed or have it repeat. Here is an example:
<body background="mypic.gif" bgproperties="fixed" bgcolor="white">
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.