Tip:
Highlight text to annotate it
X
Hello everyone and welcome to Chapter 5! My name is Dr. Theodor Richardson and I will
be guiding you through some vital steps in creating a multimedia Web site. In this
video, you will learn how to add images to your HTML page.
Images in HTML are added by using the tag. This is one of the few tags that does
not have a closing tag, so it has the closing mark at the end of the tag itself to signify
that is has ended.
Images appear in the body only. The src attribute specifies the name of the image that will
Images appear in the body only. The src attribute specifies the name of the image that will
appear. In the example, the source file is cup.png.
The source file can be any file relative to the Web page itself, so if the image is stored in a
media folder, the src attribute would have the value shown.
You can also use absolute addressing for source files. This is the full URL of the
image, as shown in the example. This is useful if your tag is used across multiple pages or
the location of the page is subject to change.
The tag should have a height and width set to establish explicit bounds for
how large the image will be in the page. It is a good idea to use precise image sizes when you
create your media so there is no waste of the image size and storage space. The common
formats for images are JPEG (.jpg), PNG (.png), and GIF (.gif). All modern browsers
support these file types.
support these file types.
The alt attribute establishes the alternate text for viewers that are visually impaired. The
The alt attribute establishes the alternate text for viewers that are visually impaired. The
browser reader will read the contents of the alt attribute. This also appears if viewers
have images turned off for display.
In Adobe Dreamweaver, you can insert an image from the Insert menu or from the Insert toolbox
on the right side of the display.
After you select the image you want to insert, you will be prompted to enter the alternate
display text. After you enter this and click OK, the image will be added to your HTML page
.
You can modify the image properties using the Properties display at the bottom of the
screen.
If you like this video and want to learn more, you can buy my book Multimedia Web Design and
Development available from Mercury Learning and Information. Also available at
Amazon.com.