[Home]

Topics

Tutorial

HTML

Dreamweaver

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

s

Tutorial HTML - Adding Graphics

Image

  • Images are inserted into a document using the <img> tag. This is an empty tag.
  • <img> tag doesn't force a line break, so you can insert an image into the text line and it will simply appear along with the text.
  • SRC
    • The SRC (source) attribute is the only required attribute of the <img> tag.
    • This attribute tells the browser where to find the image that is to be inserted into your page.
  • ALT
    • The ALT (alternate) attribute contains a text string that is displayed when the browser can't display the actual image, either because it is not a graphical browser or because the user has turned off image loading.
    • The string can be up to 1024 bytes long.
  • HEIGHT
    • Height attribute specifies the height of the image.
  • WIDTH
    • Width attribute specifies the width of the image.
  • ALIGN
    • Top- The ALIGN of TOP aligns the top of the image with the top of the tallest item in the current text line.
    • Middle - The ALIGN value of MIDDLE aligns the middle of the image with the bottom, or baselione, of the text
    • Bottom or Baseline - The ALIGN value of BOTTOM aligns the bottom of the image with the bottom, or baseline, of the text.
    • Texttop - The TEXTTOP value for the ALIGN attribute is an extension to the basic value of TOP. The TOP alignment aligns the image with the tallest preceding element anywhere in the line. In contrast, an alignment value of TEXTTOP aligns the image with the top of the text, not with the tallest elemnt in the current line.
    • Left - The LEFT value for ALIGN attribute place the image at the left margin.
    • Right - The RIGHT value for ALIGN attribute place the image at the right margin.
    • Center - Centering an image is to place it within a <center> container.

How to insert a background image?

  • Besides using color <body bgcolor="3333FF"> as your background color, you can use an image for the same reason.
  • You just replace the BGCOLOR with BACKGROUND in the <body> tag to insert a background image as shown below:

<body background="graphic file">

 

Tag
Description

<img src="graphic file">

Place a graphic in a web page as you specified. This tag does not have an ending tag.
<body background="graphic file"> Place a background image in a web page as you specified. Remember to insert the background image in the <body> tag.


up

EXERCISES

Please copy these exercise into Notepad and save (Don't forget to put .html). Then, launch Internet Explorer and go to File > Open > Browse (find your saved file). Click OK.

p/s: You may use any graphic file to do the exercise. Please make sure the graphic file is copy into your folder.

up

back Adding Links | Creating Lists and Headingsnext

 

 

 

 

 

 

 

Copyrights Reserved © Web Publishing 2003

Assessment

  • Assignment 1
  • Assignment 2
  • Quiz 1
  • Quiz 2
  • Project

 

Announcement

To all my students!

Please visit this web site regularly.