Web Forms and HTMLLecture 2

The <img>

Images are very important to beautify as well as to depicts many concepts on your web page. Its is true that one single image is worth than thousands of words.

Syntax: <img src="image URL" attr_name="attr_value"...more attributes />

Following are most frequently used attributes for <img> tag.width: sets width of the image. This will have a value like 10 or 20%etc.height: sets height of the image. This will have a value like 10 or 20% etc.border: sets a border around the image. This will have a value like 1 or 2 etc.src: specifies URL of the image file.alt: this is an alternate text which will be displayed if image is missing.align: this sets horizontal alignment of the image and takes value either left, right orcenter.valign: this sets vertical alignment of the image and takes value either top, bottom orcenter.hspace: horizontal space around the image. This will have a value like 10 or 20%etc.vspace: vertical space around the image. This will have a value like 10 or 20%etc.name: name of the image with in the document.id: id of the image with in the document.style: this will be used if you are using CSS.title: specifies a text title. The browser, perhaps flashing the title when the mouse passes over the link.

Example:<img src=" img.jpg" alt=" Image1" />

MB Qazi

The <img> Mapping (contd.)

The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.

The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.

Examples:

<img src=“img.gif" width="145" height="126" alt="Planets" usemap="#mapper">

<map name="mapper"> <area shape="rect" coords=“x1,y1,x2,y2" href=“a.html" alt=“text"> <area shape="circle" coords=“x,y,radius" href=“b.html" alt=" text "> <area shape="poly" coords=“x1,y1,x2,y2,..,xn,yn" href=“c.html" alt=" text "></map>

Links

The web got its spidery name from the plentiful connections between web sites. These connections are made using anchor tags to create links. Text, Images.We Can have three types of links:1. Internal - Links to anchors on the current page2. Local - Links to other pages within your domain3. Global - Links to other domains outside of your siteThe “href “ attribute uses to link. See examples below.

Examples:<!– Example of internal --> <a name=“title”> This is my title</a> or <a id=“title”> This is my title</a> <a href=“#title”>Go to Title</a>

<!– Example of local --> <a href=“page2.html”>Page2</a>

<!– Example of Global --><a href=“www.hidaya.org”>Hidaya Foundation</a>HTML Email Tag:HTML <a> tag provides you facility to specifiy an email address to send an email.Example:<a href= "mailto:abc@example.com">Send Email</a> MB Qazi

Assignments

1. Create a page consisting of :a. Table of content for 5-6 topics.b. Make topics with h1 as heading and below its description in paragraph.c. Make a "References" section with minimum 3 links.d. Link references to other pages and other websites within certain content.

2. Create a page consisting of:a. 2 to 3 links to other pageb. The other pages has description with image of all links to which the link has to point

out

3. Take an image, and map it using all different map types and coordinates.

Questions?