Scribd
Upload
35 views

HTML Class 3 - Image Game

The document discusses HTML horizontal rulers, images, and image maps. It defines the <hr>, <img>, and <map> tags, listing their attributes and providing syntax examples for each.

Uploaded by

dixitkamal057
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views

HTML Class 3 - Image Game

The document discusses HTML horizontal rulers, images, and image maps. It defines the <hr>, <img>, and <map> tags, listing their attributes and providing syntax examples for each.

Uploaded by

dixitkamal057
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

A Unit of Hindustan Soft Education Ltd.

www.oxfordinstitute.in

HTML CLASS – 3 (Image Game With Ruler)


HTML Horizontal Ruler
 The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.
 The <hr> element is used to separate content (or define a change) in an
HTML page.
 The <hr> tag is an empty tag, which means that it has no end tag.

Attributes:

1. Size: Define the thickness of ruler.

2. Color: Define the color of ruler.

3. Width: Define the length of ruler.

4. Align: Define the alignment of ruler.

5. Title: Define the alternate name when user place mouse on para.

Syntax:

<hr size=0 color=”Color_Name/Code” Width=0 px align=”Name” title=”Text”>

Example:

Imparting knowledge since 1997…


A Unit of Hindustan Soft Education Ltd.
www.oxfordinstitute.in

<!DOCTYPE html>

<html> <body>

<h1>This is heading 1</h1>

<p >This is some text. </p>

<hr>

<h2>This is heading 2</h2>

<p>This is some other text. </p>

<hr>

<h2>This is heading 2</h2>

<p>This is some other text. </p>

</body> </html>

HTML Images
Image Element
 The HTML <img> tag is used to embed an image in a web page.
 Images are not technically inserted into a web page; images are linked to
web pages. The <img> tag creates a holding space for the referenced
image.
 The <img> tag is empty, it contains attributes only, and does not have a
closing tag.

Attributes of Image Element:

1. SRC: Source of image (URL or Name).


2. Height: Height of Image.
3. Width: Width of Image.
4. Align: Position of Image on webpage.

Imparting knowledge since 1997…


A Unit of Hindustan Soft Education Ltd.
www.oxfordinstitute.in

5. Alt: An alternate text for the image. If a browser cannot find the image, it
will display the alternate text:
6. HREF: Linking source on Image.
7. Border: Specify border of Image.
8. Style: Use CSS style on Image.
9. Hspace: Horizontal Spaces.
10.Vspace: Vertical Spaces.
11.Usemap: Specify the image map.

Syntax:
<img src=”URL of Image” Height=In px Width=In px Align=”Position” Alt=”Text
that display” Border=0 Style=”Style Property” Usemap=”Map_Name”>

Image Placeholder
 An image placeholder is useful when you lay out web pages because it
allows you to position an image on a page before you actually create the
image.
Syntax:
<img src=” ” height=100px width=200px …>

Imparting knowledge since 1997…


A Unit of Hindustan Soft Education Ltd.
www.oxfordinstitute.in

Image Map
 The HTML <map> tag defines an image map. An image map is an image
with clickable areas. The areas are defined with one or more <area> tags.
 The <map> element is used to create an image map, and is linked to the
image by using the required name attribute:

Syntax:
<img src=”URL of Image ” height=100px width=200px usemap=”#Name”>
<Map Name=”Name”>
<area shape="rect" coords="0,0,0,0" href="Url of link image">
<area shape="circle" coords="0,0,0,0" href="Url of link image">
</map>

Shape
You must define the shape of the clickable area, and you can choose one of these
values:
 Rect - defines a rectangular region
 Circle - defines a circular region

Imparting knowledge since 1997…

You might also like