4-Web forms and html (lect 2) php


Published on

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

4-Web forms and html (lect 2) php

  1. 1. Web Forms and HTML Lecture 2
  2. 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
  3. 3. 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>
  4. 4. 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 page 2. Local - Links to other pages within your domain 3. Global - Links to other domains outside of your site The “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
  5. 5. 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 page b. 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.
  6. 6. Questions?
  7. 7. Questions?