ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login
 
XHTML Tutorial - Index
XHTML Tutorial - Introduction to XHTML
XHTML Tutorial - Formatting
XHTML Tutorial - Links
XHTML Tutorial - Images
XHTML Tutorial - Forms
XHTML Tutorial - Tables
XHTML Tutorial - Frames
XHTML Tutorial - Style Sheets
XHTML Tutorial - Advanced Tags
     

 
Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses
   

   
   
   
   
   
   

   
  Home > Courses, Tutorials & eBooks > XHTML Tutorial > Images
 
Previous  Next

XHTML Tutorial - Images

   
                                                                             Page 1 of 2
 
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.

     

 

 
     
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
 
© ExpertRating 2015. All Rights Reserved.