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…
