The Image Tag and the Src Attribute
The <img> tag is empty,
which means that it contains attributes only and it has no closing tag. To
display an image on a page, you need to use the src attribute. Src stands for
"source". The value of the src attribute is the URL of the image you
want to display on your page. The syntax of defining an image:
|
This
Code
|
Would
Display
|
|
<img
src="graphics/chef.gif">
|
 |
Not
only does the source attribute specify what image to use, but where the image
is located. The above image, graphics/chef.gif, means that the browser will
look for the image name chef.gif in a graphics folder in the same
folder as the html document itself.
 |
src="chef.gif"
means that the image is in the same folder as the html document calling for
it.
|
 |
src="images/chef.gif"
means that the image is one folder down from the html document that called
for it. This can go on down as many layers as necessary.
|
 |
src="../chef.gif"
means that the image is in one folder up from the html document that called
for it.
|
 |
src="../../chef.gif"
means that the image is two folders up from the html document that called for
it.
|
 |
src="../images/chef.gif"
means that the image is one folder up and then another folder down in the
images directory.
|
 |
src="../../../other/images/chef.gif"
means this goes multiple layers up.
|
The browser puts the image where
the image tag occurs in the document. If you put an image tag between two
paragraphs, the browser shows the first paragraph, then the image, and then the
second paragraph.
The Alt Attribute
The alt attribute is used to
define an alternate text for an image. The value of the alt attribute is
author-defined text:
<img
src="graphics/chef.gif" alt="Smiling Happy Chef ">
The alt attribute tells the
reader what he or she is missing on a page if the browser can't load images.
The browser will then display the alternate text instead of the image. It is a
good practice to include the alt attribute for each image on a page, to improve
the display and usefulness of your document for people who have text-only
browsers or use screen readers.
Image Dimensions
When you have an image, the
browser usually figures out how big the image is all by itself. If you put in
the image dimensions in pixels however, the browser simply reserves a space for
the image, then loads the rest of the page. Once the entire page is loads it
can go back and fill in the images. Without dimensions, when it runs into an
image, the browser has to pause loading the page, load the image, then continue
loading the page. The chef image would then be:
<img
src="graphics/chef.gif" width="130" height="101"
alt="Smiling Happy Chef">
Open
the file mypage2.html in your text editor and add code highlighted in
bold:
<html>
<head>
<title>My First
Webpage</title>
</head>
<body>
<h1
align="center">My First Web page</h1>
<p>Welcome to my first webpage. I am writing this page
using a text editor and plain old html.</p>
<p>By learning html, I'll
be able to create web pages like a pro....<br>
which
I am of course.</p>
<!-- Who would have guessed
how easy this would be :) -->
<p><img
src="graphics/chef.gif" width="130" height="101"
alt="Smiling Happy Chef" align="center"></p>
<p
align="center">This is my Chef</p>
</body>
</html>
Save
your page as mypage5.html and view it in your browser.
No comments:
Post a Comment