PLACING IMAGES ON YOUR WEB PAGEThe basic format is quite simple. It is:<IMG SRC="image.gif"> where "image.gif" represents the name of the image.The chain at the top of this lesson: ![]() was put there with this command: <IMG SRC="hrchain.gif">
IMAGE ATTRIBUTESSIZE ATTRIBUTE You can change the size of an image using the height and width tags. Keep in mind however that if the original size of the image is quite small and your increase the display size greatly, the image quality will appear quite grainy or blurry. <img src="smiley.gif" alt="Smiley face" height="42" width="42"> ![]() ALT ATTRIBUTE The alt="_____" attribute is used to add a written description of the image. This useful for visually impaired people who have a computer program that can read these tags to help them understand what's on the screen. This is also the text that will be displayed if the image fails to load for whatever reason. BORDER ATTRIBUTEThe BORDER attribute is used to place (or eliminate) a border around the image. The BORDER attribute commands the browser to draw a border of an indicated size around the image. A border is often used when the image is a link to show clearly that the entire area bounded by the border is a hyperlink. Otherwise, it is often used as BORDER="0" (quotes are optional) to turn it off - that is, no border.This example has a border value of "2" ![]() ALIGN ATTRIBUTEThe ALIGN attribute is used in conjunction with placing text around the image. That is, ALIGN controls the alignment of the image with respect to text. To see these attributes in action, please SWITCH to NOTEPAD or to a similar text editor, and type in the following HTML document. I want you do some experimenting with it.
<H2 ALIGN="CENTER">ABOUT OUR HALL</H2><HR> <H4 ALIGN="LEFT"><IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE">We are wheelchair accessible.</H4> Please call for rates<HR> </BODY></HTML> Now save this web page. If you have not saved the wheelchair image (whechair.gif) then you need to save it too. Remember that both the image and web page must be in the same folder. Once you have saved the web page and image, then SWITCH back to your browser and load the document to see it in action. This is what you should see: See example below: ABOUT OUR HALL
|