bernard-caldwell
Uploaded by
10 SLIDES
213 VUES
100LIKES

Mastering Basic HTML Image Tags

DESCRIPTION

Learn how to use tags for images in HTML, including aligning images, adding borders, creating clickable images, and incorporating backgrounds. Enhance your web design skills and optimize image display for improved user experience.

1 / 10

Télécharger la présentation

Mastering Basic HTML Image Tags

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Linking With Graphics INP150: Basic HTML March 25, 2002

  2. Image Tags • <IMG SRC=“nameofimage.gif” />

  3. Text Browsers or Lost Images • <img src=“nameof image.gif” alt=“image of 1793 Cent -- Click for Dealers” /> • Lost images • Explanation • Vision impaired users

  4. Height and Width • If the real dimension are specified it loads faster than one without the dimensions • <img src=“nameofimage.gif” width=“75” height=“150” />

  5. Aligning Images • Aligns an image and wraps text above around and below the image • <img src=“nameofimage.gif” align=“right” width=“40” height=“125” /> • Values • left or right • top • texttop • middle • absmiddle • baseline • bottom • absbottom

  6. Borders and Graphics • Specifies thickness in pixels of graphical border drawn around an image • <img src=“nameofimage.Gif” width=“50” height=“125” border=“0” />

  7. Space around Graphics • Specifies vertical and horizontal space around an image. This is used with aligned images so the text will be padded and not but up against an image, created a crowded look. • <img src=“nameof image.gif” align=“right” width=“40” height=“125” vspace=“5” “hspace =5” />

  8. Backgrounds • To add a background image to your page specify an image in the body tag: • <body background=“nameofimage.gif”> … </body> • bgcolor=“#ffffff” • Not mutually exclusive

  9. Clickable Images • Making an image clickable • <a href=“nameoffile.html”><img src=“nameofimage.gif” /></a> • with or without borders • <a href=“nameoffile.html”><img src=“nameofimage.gif” border=“0” /></a> • To go to another site: • <a href=“http://www.nameofsite.com”><img src=“nameofimage.gif” /></a>

  10. Animation • Animation has to do with the structure of the file you have, not HTML • Take the graphic just like any non-animated graphic and put it in your page the same way we have been discussing.

More Related