| :: code war·ri·or | ||||||||||
|
|
|
|
| home :: html tutorials :: site building :: q&a :: resources :: shop |
|
Adding Images to a Page Once you've found or created an image and saved it how you want it, all that remains is to add it to the page. Inline Images At the very least, all you need to tell the browser is the path to the image. The rules for paths work exactly the same as they did for normal HTML files - click here if you've forgotten how to do it). The attribute to put the path in is called SRC (source), so the absolute minimum is this: <IMG SRC="../images/image.gif"> Note that you do not need a closing tag. Size Attributes Although that will work (the image will display on the page in full) there's a lot more that could (and should) be added to this tag. Firstly, tell the browser how big the image is. That allows it to leave a gap for the image, finish loading the rest of the page and then come back and get the image itself later. Without the size, the browser will leave a default gap and the page jumps when the actual picture appears. Some browsers will also display the dimensions of an image file in the title bar if the image is viewed by itself without an enclosing HTML document.) <IMG SRC="../images/image.gif" WIDTH="100" HEIGHT="200"> The height and width should be given in pixels - your graphics application will tell you the size, or you can get it by loading the image in your browser and viewing its properties. Alternate Text The next thing to add is the ALT attribute. This lets you give the image a caption that is displayed before the image has downloaded (or if the visitor has images turned off or is using a screen reader). Make it descriptive so that the visitor can decide if they really need to see the image: <IMG SRC="../images/image.gif" WIDTH="100" HEIGHT="200" ALT="A picture of my dog"> There are a couple of other attributes you should know about - BORDER lets you specify how thick the border should be (0 for no border, 1 for thin etc.), and ALIGN lets you, wait for it, align the image. Seriously though, this attribute can be very useful to get text wrapping right. <IMG SRC="../images/image.gif" WIDTH="100" HEIGHT="200" ALT="A picture of my dog" BORDER="0" ALIGN="CENTER"> You can put your image within a paragraph, in which case text will wrap depending on the ALIGN attribute, or you can put it outside. The exact results may very depending on your page layout, so have a play until it does what you want it to do. Image Links So now we know how to do links and images. So let's put them together! How about an image that acts as a link? Easy - just put the IMG tag as your link description, within the A tag: <a href="../myfile.html"><IMG SRC="../images/image.gif" WIDTH="100" HEIGHT="200" ALT="A picture of my dog" BORDER="0" ALIGN="CENTER"></A> Background Images Newer versions of Web browsers can load an image and use it as a background when displaying a page. Some people like background images and some don't. In general, if you want to include a background, make sure your text can be read easily when displayed on top of the image. <BODY BACKGROUND="background.jpg" ... > No extra information here, just the path will do. This will override any setting of the background colour (BGCOLOR), but you might want to put one in anyway for browsers not displaying images. Also if you have a dark background image you should put in a dark BGCOLOR, so that while that image is loading your visitor can still read what's on the page.
|
· code-warrior |
| home :: html tutorials :: site building :: q&a :: resources :: shop |
|
|
|
|
|
|
|
|
