Scribd
Upload
25 views20 pages

Imagemap and Frame Lab Report

The document is a lab report submitted by a student to their instructor. It discusses image maps and frames in HTML. It provides the theory behind iframes, including how to specify the URL, size, and target frame. It also covers how image maps work, including using the <map> and <area> tags to define clickable areas of an image and associate them with links. The report includes sample code for various questions testing the concepts and the output generated by the code.

Uploaded by

SNJV EDITZ
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
25 views20 pages

Imagemap and Frame Lab Report

The document is a lab report submitted by a student to their instructor. It discusses image maps and frames in HTML. It provides the theory behind iframes, including how to specify the URL, size, and target frame. It also covers how image maps work, including using the <map> and <area> tags to define clickable areas of an image and associate them with links. The report includes sample code for various questions testing the concepts and the output generated by the code.

Uploaded by

SNJV EDITZ
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

NEPAL COLLEGE OF INFORMATION TECHNOLOGY

Balkumari, Lalitpur

(Affiliated to Pokhara University)

A Lab Report On

Subject:- Web Technology .

Lab Report # 5 .
Title: - Imagemap and Frame .

Submitted by: Submitted to:


Name: - Shikshya K.C Instructor: - Simanta Kasaju
Roll No: - 211541 Department of IT
Faculty: - IT Submission Date: - 2080/03/05
Semester: - 3rd
Theory:
HTML Iframe Syntax
The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML
document.

Syntax
<iframe src="url" title="description"></iframe>

Iframe - Set Height and Width


Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Iframe - Target for a Link


An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the
iframe:

 The HTML <iframe> tag specifies an inline frame


 The src attribute defines the URL of the page to embed
 Always include a title attribute (for screen readers)
 The height and width attributes specify the size of the iframe
 Use border:none; to remove the border around the iframe

Image Maps
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.
How Does it Work?
The idea behind an image map is that you should be able to perform
different actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that
describes the clickable areas.

The Image
The image is inserted using the <img> tag. The only difference from other
images is that you must add a usemap attribute:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

Create Image Map


Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the
image by using the required name attribute:

<map name="workmap">

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
 poly - defines a polygonal region
 default - defines the entire region

You must also define some coordinates to be able to place the clickable area
onto the image.
HTML Image Tags

Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

<picture> Defines a container for multiple image resources


Question 1:-> Source code
Output:
Output:
Question 3:->Source code
Output:
Question 4:-> Source code
Output:
Question 5:-> Source code

Output:
Question 7-> Source code
Output:

You might also like