Scribd
Upload
56 views

Hyper Text Markup Language: Module Objective

HTML is the primary language for formatting web pages. With HTML you describe what a page should look like, what types of fonts to use, what color text should be. It is the job of the browser that requests The HTML file to format the page according to the various tags included in the HTML.

Uploaded by

taduvayi
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
56 views

Hyper Text Markup Language: Module Objective

HTML is the primary language for formatting web pages. With HTML you describe what a page should look like, what types of fonts to use, what color text should be. It is the job of the browser that requests The HTML file to format the page according to the various tags included in the HTML.

Uploaded by

taduvayi
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 26

Web Page Design, HTML

H/O 02

HYPER TEXT MARKUP LANGUAGE

Module Objective Using HTML for Web Page Design

Intermediate Objectives 1. The trainee should be able to identify HTML tags to display page-title, Text with different various Font attributes, Colors & alignments. 2. The trainee should be able to identify HTML tags to display Horizontal lines, Special characters and must be able to set various Background & Foreground colors of Web Page. 3. The trainee should be able to identify HTML tags to display Images, Text & Images as Hyperlinks. 4. The trainee should be able to identify HTML tags to display Tables with various formats. 5. The trainee should be able to identify HTML tags to display popular window controls like Buttons, Text Fields, Check Boxes, Radio Buttons, List 6. The trainee should be able to identify HTML tags to display Images with various alignments and clickable hyperlink regions

BRBRAITT / MAR 2003

Web Page Design, HTML

H/O 02

Contents 2.1 2.2 2.3 2.4 2.5 2.6 2.7 Definition of an HTML page Create a simple HTML page displaying text with various Font attributes, Colors & alignments Create an HTML page with Horizontal lines, Special characters and various Background & Foreground colors Create an HTML page with Images, Text & Images as Hyperlinks. Create an HTML page to display information in Tables with various formats. Create an HTML page with Forms, Buttons, Text Fields, Check Boxes, Radio Buttons and List controls. Create an HTML page to display Images with various alignments and clickable hyperlink regions.

BRBRAITT / MAR 2003

Web Page Design, HTML

H/O 02

HTML HTML stands for Hypertext Mark-up Language. Tim Berners-Lee & his colleagues invented HTML as a means of distributing non-linear text, called Hypertext, to multiple points across the Internet. Hyperlinks are embedded instructions within one text file that call another file when the link is accessed, usually by click of a mouse. 2.1.Definition of an HTML page HTML is the primary language for formatting web pages. With HTML you describe what a page should look like, what types of fonts to use, what color text should be, where paragraph marks come and many more aspects of the document. It is the job of the browser that requests the HTML file to format the page according to the various tags included in the HTML. Markup Tags : The HTML markup tags are HTML element names enclosed in angle brackets. Tags are essential building blocks of HTML files. Tags embed HTML element information into document so that HTML interpreter will treate text according to associated HTML element function. For example using boldface tags around text would cause text to be displayed in boldface. There are two types of Tags : Container : Use opening and closing tags. Empty : Are stand alone tags <TITLE> BRBRAITT Main Page </TITLE> Opening Tag <LI> About BRBRAITT <LI> Courses in BRBRAITT Empty Tag Closing Tag

BRBRAITT / MAR 2003

Web Page Design, HTML A Tag consists of : An Element

H/O 02

Provide the main instruction of the tag, like <TITLE>, <FONT> etc..

An Attribute Specify a quality or describe certain aspect of the element. For example <DIV> has attributes like ALIGN etc.. A Value Gives value to the element and the attribute. For example <DIV ALIGN=center> Some HTML Tags only have an element and do not support attributes & values. Others like <DIV> supports attributes & values. At a minimum an HTML document must contain the following tags in sequence. <HTML> <HEAD> <TITLE> Title of the Page </TITLE> </HEAD> <BODY> page text and non textual objects .. . </BODY> </HTML> You can observe that an HTML document is contained in opening <HTML> & closing </HTML> tags. Within any page there are two sections the HEAD & the BODY The text between TITLE tag appears in the title bar of browser window. All text and other objects to be displayed on the page through browser need to appear between <BODY> and </BODY> tags.

BRBRAITT / MAR 2003

Web Page Design, HTML Example 1

H/O 02

<HTML> <HEAD> <TITLE> Home Page BRBRAITT </TITLE> </HEAD> <BODY> Welcome to the BRBRAITT The premier Training Institute of Bharat Sanchar Nigam Limited </BODY> </HTML> Save the file as mypage.htm The output will be as follows :

BRBRAITT / MAR 2003

Web Page Design, HTML

H/O 02

2.2.Create a simple HTML page displaying text with various Font attributes, Colors & alignments HTML elements that affect an entire paragraph is called Block-Level Elements. HTML elements that affect as small as a character or a word are called Text-Level Elements. The most basic block-level element is Paragraph. The <P> tag defines start of a new paragraph. The <BR> tag specifies that a line break is to be inserted wherever the tag occurs. Heading tags have built in styles denoting text as headings HTML uses six heading styles with container tags <H1>, <H2>, <H3>, <H4>, <H5>, <H6> <BR> ,<P> are empty tags. The <DIV> tag is used for aligning the text Eg. <DIV ALIGN=right> lines of text </DIV> The example 2 in next page uses above tags. Example 2
<HTML><HEAD> <TITLE> Home Page BRBRAITT </TITLE> </HEAD><BODY> <H1>Welcome to the BRBRAITT</H1> <H4>The premier Training Institute of Bharat Sanchar Nigam Limited</H4> A Govt of India Undertaking <P> Telecom Training Centre which has been renamed as Bharat Ratna Bhim Rao Ambedkar Institute of Telecom Training (B.R.B.R.A.I.T.T.) from 30th May, 1942 had its origin at Calcutta where it initially started functioning in the 1920's. <P> During the Second World War, it was however, decided to locate it at Jabalpur where it commenced activities from 22.04.42. In the beginning the Training Centre was set up in the Telecom Factory compound at Wright Town, Jabalpur. <BR> Since this did not provide adequate space for conducting the training activities effectively, the TTC was shifted to a new building at Ridge Road, Jabalpur and the training activities started functioning in its new campus from 1956. <P> <DIV ALIGN="right"> Since then, BRBRAITT has made a continued effort to cater to the training needs of the Indian Telecommunication Department, other allied organisations and foreign participants. </DIV> </BODY></HTML>

Save the file as mypage1.htm BRBRAITT / MAR 2003 6

Web Page Design, HTML The output will be as follows :

H/O 02

Some popular text-level elements are as follows : Element B I U SUB SUP Example 3
<HTML><HEAD> <TITLE> Home Page BRBRAITT </TITLE> </HEAD> <BODY> <H1>Demo of text level elements</H1> <B> This is bold text </B><BR> <I> This is Italic text </I><BR> <U> This is underlined text </U><BR> Normal text <SUB> subscripteded text </SUB> again Normal text<BR> <STRIKE> This is strikethrough text </STRIKE><BR> Normal text <SUP> superscripteded text </SUP> again Normal text<BR> Normal text <STRONG> stronger text</STRONG> again Normal text<BR> Normal text <BIG> larger text </BIG> again Normal text<BR> Normal text <SMALL> smaller text </SMALL> again Normal text<BR> </BODY></HTML>

Usage Bold Italic Underline Subscript Superscript

Element STRIKE BIG SMALL EM STRONG

Usage Strikethrough text Larger text Smaller text Emphasized italic Bold text

Save the file as mypage2.htm

BRBRAITT / MAR 2003

Web Page Design, HTML The output will be as follows :

H/O 02

Font Information The <FONT> tag is a container tag that allows you to change the Size, Color and Typeface of enclosed text. Example 4 <HTML><HEAD> <TITLE> Home Page BRBRAITT </TITLE> </HEAD> <BODY> <H1>Demo of Fonts</H1> <FONT SIZE="4" COLOR="red" FACE="Arial"> This is Size 4 color red Arial font </FONT> <BR> <FONT SIZE="4" COLOR="blue" FACE="Times New Roman"> This is Size 4 color blue Times New Roman font </FONT> <BR> <FONT SIZE="6" COLOR="red" FACE="Arial"> This is Size 6 color red Arial font </FONT> <BR> <FONT SIZE="6" COLOR="blue" FACE="Times New Roman"> This is Size 6 color blue Times New Roman font </FONT> </BODY></HTML> Save the file as mypage2.htm BRBRAITT / MAR 2003 8

Web Page Design, HTML The output will be as follows :

H/O 02

BRBRAITT / MAR 2003

Web Page Design, HTML

H/O 02

2.3.Create an HTML page with Horizontal lines, Special characters and various Background & Foreground colors Horizontal lines

Background & Foreground colors

BRBRAITT / MAR 2003

10

Web Page Design, HTML

H/O 02

Special characters Introducing non-breaking spaces Browsers automatically wrap text to fit within the margins. Line breaks can be introduced wherever space characters appear in the markup. Sometimes you will want to prevent the browser from wrapping text between two particular words. For instance, between two words in a brand name such as "Coca Cola". The trick is to use &nbsp; in place of the space character. Other popular entities for special characters Symbol Copyright sign Registered trademark Trademark Less than Greater than Ampersand nonbreaking space em dash quotation mark Entity &copy; &reg; &#8482; &lt; &gt; &amp; &nbsp; &#8212; &quot; Example Copyright 1999 W3C MagiCo Webfarer < > & "

<HTML><HEAD> <TITLE> Home Page BRBRAITT </TITLE> </HEAD> <BODY> <H1>Demo of Special Characters</H1> With space character in between the word Coca Cola may break across two lines of page<br> With special non-breaking space character in between the word Coca&nbsp;Cola will not split in two lines but goes together in any line. <BR> This handout is the copyright &copy;of BRBRAITT, <BR> BSNL registered trademark &reg; <BR> Trade mark BRBRAITT &#8482; <br> <h2> end of demo</h2> </BODY></HTML> Save this in file Mypage3.html

BRBRAITT / MAR 2003

11

Web Page Design, HTML Mypage3.html will display following :

H/O 02

2.4.Create an HTML page with Images, Text & Images as Hyperlinks. Image file formats to add an image is using the <img> tag with attribute SRC. Two formats supported across the web are Graphics Interchange Format (GIF) and Joint Photographics Expert Group (JPEG). Bitmap (BMP) is also supported by IE4.0. GIF support few ever colors and are best used for line art, custom drawing and text used as graphics. JPEG format support many more colors and is used for photographs and complex bitmap image. Add images To add an image the <img> tag is used with attribute SRC, Height, Width. The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. People who can't see the image need a description they can read in its absence. You can add a short description as follows: <img src="brbraittlogo.jpg" width="200" height="150" alt="Company BRBRAITT"> The alt attribute is used to give the short description. The image file "brbraittlogo.jpg" must be in the same folder/directory as your HTML file. For complex images, you may need to also give a longer description. Assuming this has been written in the file "Mypage4.html", you can add one as follows using the longdesc attribute: Most browsers understand GIF and JPEG image formats, newer browsers also understand the PNG image format. To avoid long delays while the image is downloaded over the network, you should avoid using large image files. BRBRAITT / MAR 2003 12

Web Page Design, HTML Example Images : Mypage4.html <HTML><HEAD> <TITLE> Home Page BRBRAITT </TITLE> </HEAD> <BODY> <H1>Demo of Images & Hyper links</H1> <center> <h2> BSNL Logo </h2> <img src="bsnllogo.gif" width="100" height="75" alt="My Company BSNL"longdesc="Mypage4.html"> <br> <h2> BRBRAITT Logo </h2> <img src="brbraittlogo.jpg" width="100" height="75" alt="My Department BRBRAITT" longdesc="Mypage4.html"> </center> <h2> end of demo</h2> </BODY></HTML> Following page appears :

H/O 02

BRBRAITT / MAR 2003

13

Web Page Design, HTML Hyperlinks

H/O 02

Add Text links to other pages What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world! Links are defined with the <a> tag. Lets define a link to the page defined in the file "Mypage2.html": This a link to <a href="Mypage2.html">Demo of Text Level Elements</a>. The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text. To link to a page on another Web site you need to give the full Web address (commonly called a URL), for instance to link to www.w3.org you need to write: This is a link to <a href="http://www.brbraitt.bsnl.co.in/">BRBRAITT Jabalpur</a>.

Modify Mypage4.html as follows to get above page <HTML><HEAD><TITLE> Home Page BRBRAITT </TITLE> </HEAD><BODY> <H1>Demo of Images & Hyper links</H1> <a href="Mypage2.htm">Demo of Text Level Elements</a> <center><h2> BSNL Logo </h2><br> <img src="bsnllogo.gif" width="100" height="75" alt="My Company BSNL"longdesc="Mypage4.html"> <br></center> <a href="http://www.brbraitt.bsnl.co.in">BRBRAITT</a> <center><h2> BRBRAITT Logo </h2> <img src="brbraittlogo.jpg" width="100" height="75" alt="My Department BRBRAITT" longdesc="Mypage4.html"> </center><h2> end of demo</h2></BODY></HTML> BRBRAITT / MAR 2003 14

Web Page Design, HTML

H/O 02

Add Image links to other pages You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page: Replace the following code : <img src="brbraittlogo.jpg" width="100" height="75" alt="My Department BRBRAITT" longdesc="Mypage4.html"> with : <a href=http://www.brbraitt.bsnl.co.in><img src="brbraittlogo.jpg" width="100" height="75" alt="My Department BRBRAITT" longdesc="Home page BRBRAITT"></a> The image of BRBRAITT Logo will become a hyperlink to web page http://www.brbraitt.bsnl.co.in

BRBRAITT / MAR 2003

15

Web Page Design, HTML

H/O 02

2.5.Create an HTML page to display information in Tables with various formats. Tables are used for information as well as for layout. You can stretch tables to fill the margins, specify a fixed width or leave it to the browser to automatically size the table to match the contents. Tables consist of one or more rows of table cells. Here is a simple example: <HTML><HEAD> <TITLE> Home Page BRBRAITT </TITLE></HEAD> <BODY> <H1>Demo of Table</H1> <table border="1"> <tr><th>Year</th><th>Sales</th></tr > <tr><td>2000</td><td>$18M</td></t r> <tr><td>2001</td><td>$25M</td></t r> <tr><td>2002</td><td>$36M</td></t r></table> <h2> end of demo</h2> </BODY></HTML>

The table element acts as the container for the table. The border attribute specifies the border width in pixels. The tr element acts as a container for each table row. The th and td elements act as containers for heading and data cells respectively. Cell Padding You can increase the amount of padding for all cells using the cellpadding attribute on the table element. For instance, to set the padding to 10 pixels: <table border="1" cellpadding="10"> Table Width You can set the width of the table using the width attribute. The value is either the width in pixels or a percentage value representing the percentage of the space available between the left and right margins. For instance to set the width to 80% of the margins: <table border="1" cellpadding="10" width="80%"> which has the effect: Year Sales 2000 $18M 2001 $25M 2002 $36M

BRBRAITT / MAR 2003

16

Web Page Design, HTML Text Alignment within Cells

H/O 02

By default browsers center heading cells (th), and left align data cells (td). You can change alignment using the align attribute, which can be added to each cell or to the row (tr element). It is used with the values "left", "center" or "right": <table border="1" cellpadding="10" width="80%"> <tr align="center"><th>Year</th><th>Sales</th></tr> <tr align="center"><td>2000</td><td>$18M</td></tr> <tr align="center"><td>2001</td><td>$25M</td></tr> <tr align="center"><td>2002</td><td>$36M</td></tr> </table> with the following result: Year 2000 2001 2002 $18M $25M $36M Sales

The valign attribute plays a similar role for the vertical alignment of cell content. It is used with the values "top", "middle" or "bottom", and can be added to each cell or row. By default, heading cells (th) position their content in the middle of the cells while data cells align their content at the top of each cell. Cells that span more than one row or column Let's extend the above example to break out sales by north and south sales regions: Sales Year North South Total 2000 $10M $8M $18M 2001 $14M $11M $25M The heading "Year" now spans two rows, while the heading "Sales" spans three columns. This is done by setting the rowspan and colspan attributes respectively. The markup for the above is: <table border="1" cellpadding="10" width="80%"> <tr align="center"><th rowspan="2">Year</th><th colspan="3">Sales</th></tr> <tr align="center"><th>North</th><th>South</th><th>Total</th></tr> <tr align="center"><td>2000</td><td>$10M</td><td>$8M</td><td>$18M</td> </tr> <tr align="center"><td>2001</td><td>$14M</td><td>$11M</td><td>$25M </td> </tr></table>

BRBRAITT / MAR 2003

17

Web Page Design, HTML Borderless tables

H/O 02

These are commonly used for laying out pages in a gridded fashion. All you need to do is to add border="0" and cellspacing="0" to the table element: Year Sales 2000 $18M 2001 $25M 2002 $36M This was produced using the following markup: <table border="0" cellspacing="0" cellpadding="10"> <tr><th>Year</th><th>Sales</th></tr> <tr><td>2000</td><td>$18M</td></tr> <tr><td>2001</td><td>$25M</td></tr> <tr><td>2002</td><td>$36M</td></tr> </table> Coloring your tables Set the background color for th and td cells to given red/green/blue values. The numbers are in the range 0 to 255 (fully saturated).? <table border="0" cellspacing="0" cellpadding="10"> <tr> <th bgcolor="#CCCC99">Year</th> <th bgcolor="#CCCC99">Sales</th> </tr> <tr> <td bgcolor="#FFFF66">2000</td> <td bgcolor="#FFFF66">$18M</td> </tr> <tr> <td bgcolor="#FFFF66">2001</td> <td bgcolor="#FFFF66">$25M</td> </tr> <tr> <td bgcolor="#FFFF66">2002</td> <td bgcolor="#FFFF66">$36M</td> </tr> </table>

Another way to set the background color is to use the bgcolor attribute. This works with nearly all browsers. The first step is to determine the hexadecimal values for the red, green and blue components of the color you wish to use.

BRBRAITT / MAR 2003

18

Web Page Design, HTML

H/O 02

2.6.Create an HTML page with Forms, Buttons, Text Fields, Check Boxes, Radio Buttons and List controls. Introduction to forms An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.) HTTP allows you to send almost any type of data to Web Server. Data is filled in a form containing input fields. These inputs are then submitted to server which stores or process the data. Script like CGI / Java running at Server end receives and process the data. Uploading forms data is calledSubmitting a Form. A reset button clears the forms data to default values. The form tag <FORM> is a container tag which begins and ends a form. It has two attributes METHOD and ACTION. <FORM method="post" action=http://210.212.148.4/Nomination> <INPUT .> <SELECT > </SELECT> </FORM> METHOD : Specifies which method the browser will use to send form data to server. It has two values. GET Form data is appended to URL for use in query string. POST Form data is posted to URL specified by ACTION attribute.This is most common method for sending form data and can send more characters.

ACTION : Specifies name and location of Server-script used to process the data.

<INPUT> tag : It is empty tag used to create Text-Box, Check-Box, Radio-Button and the Submit and Reset Button <SELECT> tag : It is container tag used to create Select-List and Multiple-SelectLists. <TEXTAREA> tag : It is container tag used to create text area space. <TYPE> : It is attribute of INPUT / SELECT element. It is used to designate whether you want Text-box, Radio-button or Select-list. There are additional attributes NAME and VALUE which is used to customize the elements behaviour.

BRBRAITT / MAR 2003

19

Web Page Design, HTML

H/O 02

Here's a simple form with labels, radio buttons, reset and submit buttons : <HTML><HEAD><TITLE> Home Page BRBRAITT </TITLE></HEAD> <BODY> <H1>Demo of FORM</H1> <FORM action="http://210.212.148.4/AddNomination" method="post"> <P> First name: <INPUT type="text" name="firstname" size="20"><BR> Last name: <INPUT type="text" name="lastname" size="20"><BR> email: <INPUT type="text" name="email"><BR> Sex : <INPUT type="radio" name="sex" value="Male" CHECKED> Male <INPUT type="radio" name="sex" value="Female"> Female <BR> <INPUT type="submit" value="Send"> <INPUT type="reset"> </P> </FORM> <h2> end of demo</h2></BODY></HTML>

BRBRAITT / MAR 2003

20

Web Page Design, HTML Attributes of TEXT Box : Size - specify width of text-box MAXLENGTH restrict user entries to specific numbers of characters

H/O 02

Radio Button : Gives two or more mutually exclusive options. A group of radio button must have same name. CHECKED Used to preselect the option.

Check Boxes : Used for non-exclusive choices. Add the following code before Submit & Reset button in DemoForm1.html <P> Trained in (Check all that apply ):<BR> <INPUT type="Checkbox" name="MS Office" CHECKED> MS Office <BR> <INPUT type="Checkbox" name="PC Hardware" CHECKED> PC Hardware <BR> <INPUT type="Checkbox" name="UNIX" CHECKED> UNIX </P>

BRBRAITT / MAR 2003

21

Web Page Design, HTML Select List : Select Lists are drop down lists of predetermined options. It can allow single or multiple selections.

H/O 02

Add the following code before Submit & Reset button in DemoForm1.html Which training you want to come for : <P> <select name=Trg> <option> Office Automation <option> UNIX <option> Oracle <option> Oracle DBA <option> Data Communicatons </select> </P> The output will look as shown below.

For multiple option select incluse the MULTIPLE attribute in <SELECT> tag <select name=Trg MULTIPLE SIZE=4> SIZE attribute controls how many items will appear in controlling list. BRBRAITT / MAR 2003 22

Web Page Design, HTML TEXTAREA : Gathers more than one line. It is a container tag. Its attributes are COLS Specifies width in characters ROWS Specifies number of rows of text to display in the box.

H/O 02

WRAP value none then text continues on one line, if virtual text will wrap. Add the following code before Submit & Reset button in DemoForm1.html Comments : <BR> <Textarea name=comment COLS=20 ROWS=4 WRAP=virtual> </Textarea> The output will look as shown below

BRBRAITT / MAR 2003

23

Web Page Design, HTML

H/O 02

2.7.Create an HTML page to display Images with various alignments and clickable hyperlink regions. Image alignment Flowing text around images With HTML, you can choose whether any given image is treated as part of the current text line or is floated to the left or right margins. You control this via the align attribute. If the align attribute is set to left the image floats to the left margin. If it is set to right the image floats to the right margin. For instance: <H1>Demo of Images</H1> <h2> BSNL Logo </h2> <p><img src="bsnllogo.gif" alt="BSNL Logo" width="40" height="25" align="left"> This text will be flowed around the right side of the graphic. </p> <h2> BRBRAITT Logo </h2> <center> <p><img src="brbraittlogo.jpg" alt="BRBRAITT Logo" width="40" height="25" align="right"> This text will be flowed around the left side of the graphic. </p> flowed around the left side of the graphic.</p> which renders as:

BRBRAITT / MAR 2003

24

Web Page Design, HTML Clickable hyperlink regions

H/O 02

The following image acts as a map of a group of Web pages. You can click on the circles to go to the corresponding page. <HTML><HEAD> <TITLE> Home Page BRBRAITT </TITLE> </HEAD> <BODY> <H1>Demo of Clickable Regions</H1> <p align="center"> <img src="brbraittlogo.jpg" width="500" height="100" alt="site map" usemap="#sitemap" border="0"> <map name="sitemap"> <area shape="circle" coords="50,50,40" href="Homepage.html" alt="Home page BRBRAITT"> <area shape="circle" coords="200,50,40" href="Trainings.html" alt="Training in BRBRAITT"> <area shape="circle" coords="300,50,40" href="Aboutus.html"alt="About us"> <area shape="circle" coords="400,50,40" href="Contact.html" alt="Contact us"> </map> </p> <h2> end of demo</h2> </BODY></HTML> The src attribute on the img element specifies the image "brbraittlogo.jpg". The usemap attribute references a map element. It uses a Web address to do so, hence the # character. The border attribute is set to "0" to suppress the blue border around the image. The map element specifies which regions in the image act as hypertext links. The name attribute matches usemap attribute on the img element and acts much like the name attribute on the <a> element. In practice, the map element needs to be in the same file as the img element. The area element is used to define a region on the image and to bind it to a Web address. The shape attribute specifies "rect", "circle" or "poly". The coords attribute specifies the coordinates for the region depending on the shape. rect: left-x, top-y, right-x, bottom-y circle: center-x, center-y, radius poly: x1,y1, x2,y2, ... xn,yn The top left pixel is considered as the origin of the image with x and y both equal to zero, x increases rightwards across the image and y increases downwards. Most image manipulation tools allow you to find the pixel coordinates of any given point in the image.

BRBRAITT / MAR 2003

25

Web Page Design, HTML Save as clickable_region.html. Output is ass follows :

H/O 02

BRBRAITT / MAR 2003

26

You might also like