| Overview |
| |
In this chapter you will learn
- How to insert images in a web page
- How the image is placed in a web page
- What is image mapping
|
| |
| Introduction |
| |
The previous sections were confined to the design of XHTML documents that contain only textual content. This section elaborates the technique of inserting images in the web page, making the web page more interesting. Images add color to an otherwise monotonous text and attract more attention from users.
The images and the tags used to manipulate images in XHTML are quite similar to the tags of HTML. A minute but significant difference lies in the fact that some attributes of these tags which were applicable in HTML have been deprecated in XHTML.
|
| |
| Image Tag |
| |
The image tag is written as <img>. It is used to insert an image in an XHTML document. Unlike HTML, it is necessary to close the <img> tag in XHTML. It is done so by putting a (/) backslash after the word img i.e. <img/>.
Like the anchor tag, the image tag cannot function on its own. Various attributes have to be included in it to display the image on the web page.
|
| |
| Example |
| <img attributes /> |
| |
|
Attributes of <img> Tag |
| |
| Src |
| |
Src is the source attribute, which provides a path for the picture to be inserted in the web page. In other words, it tells where to get the picture from to insert on the web page. The picture that is specified by this path will be displayed on the web page. |
| |
| Example |
<img src=”c:\images\img1.jpg” />
|
Alt
Alt is an attribute which displays a text if the picture is not displayed on the web browser.
| Example |
<img src=”c:\images\img1.jpg alt=”this is my image” /> |
|
| |
Width
Width determines how wide the picture should appear on the web page.
| Example |
| <img src=”c:\images\img1.jpg alt=”this is my image” width=105 /> |
| |
Height
Height determines how high the picture should appear on the web page.
| Example |
| <img src=”c:\images\img1.jpg alt=”this is my image” height=100 /> |
| |
These are the attributes that are used with the <img> tag in XHTML. The “align”, “border”, “hspace”, and “vspace” attributes of the <img> tag are not supported in XHTML.
The following example illustrates a web page with an image:
| Example |
<html> |
|
<head> |
<title> My list of jokes </title> |
</head> |
|
<body> |
|
<h1>This is my list of jokes </h1> |
|
<ul> |
<li>Classic jokes </li> |
<li>Math jokes </li> |
<li>Food jokes</li> |
</ul> |
<hr/> |
|
<ol> |
<li>Crazy jokes</li> |
<li>Ethnic jokes</li> |
<li>Golf jokes</li> |
</ol> |
<hr/> |
|
<img src="image1.jpg" alt="my image" height=100 width=100/> |
|
</body> |
</html> |
|
| |
This is how the web page looks:
Map Tag
A map tag is used to map an image. In other words; this image, called the mapped image, contains some regions that act as links to other documents. It is written as <map>. The user can set these regions and these regions are quite similar to a hyperlink. This is because when they are clicked on, they refer to some other document as in the case of a hyperlink.
To create an image map, another tag called area tag is used which will be explained later.
Attribute of Map Tag
Name
The name attribute sets the name of the image map. Name is used to determine which map definition the image uses.
| Example |
| <map name=”map1”> </map> |
| |
The usage of the image map in XHTML is exactly similar to its usage in HTML.
|
