Learning html & dhtml

transcript

Html Class Assignments

Lecture No - 1 Assignment No-1

Objective Write a Program to display the title on title bar and modify the page properties like background and text color Commands to be used

1. Basic structure (<html>,<head>,<body>) 2. Title bar(<title>) 3. Body attributes(bgcolor, text, leftmargin, topmargin)

Output

<html> <head> <title>Welcome to my web page</title> </head> <body bgcolor="black" text="white" leftmargin=”10” topmargin=”10”> Welcome to my web page </body> </html>

Lecture No -2 Assignment No-1

Objective Write a Program to display the paragraphs and modify the paragraphs properties Commands to be used

1. Paragraph <p> 2. Attributes of <p>: align

Output

<html> <body> <p> <b>No Alignment</b></p> <p> This paragraph has no alignment attribute. By default, paragraphs are left-aligned, although once the Web supports other languages, such as arabic, the default alignment will be language-specific. </p> <p> <b> Left Alignment </b></p> <p align="left">

This paragraph is left aligned, with the start tag By default, paragraphs are left-aligned. This paragraph has no alignment attribute. By default, paragraphs are left-aligned, although once the Web supports other languages, such as arabic, the default alignment will be language-specific. </p> <p> <b> Right Alignment </b></p> <p align="right"> This paragraph is left aligned, with the start tag By default, paragraphs are left-aligned. This paragraph has no alignment attribute. By default, paragraphs are left-aligned, although once the Web supports other languages, such as arabic, the default alignment will be language-specific. </p> <p> <b> Center Alignment </b></p> <p align="center"> This paragraph is left aligned, with the start tag By default, paragraphs are left-aligned. This paragraph has no alignment attribute. By default, paragraphs are left-aligned, although once the Web supports other languages, such as arabic, the default alignment will be language-specific. </p> <body> </html>

Objective Write a Program to display the heading and modify the heading properties . Commands to be used

1. Heading tags (h1to h6) 2. Attributes of Heading : align

Output

<html> <head> <title>Heading</title> </head> <body> <h1> This is Heading Level 1</h1> <h2>This is Heading Level 2</h2> <h3>This is Heading Level 3</h3> <h4>This is Heading Level 4</h4> <h5>This is Heading Level 5</h5> <h6>This is Heading Level 6</h6> </body> </html>

<html> <head> <title>Heading</title> </head> <body> <h1 align="left"> This is Heading Level 1</h1> <h2 align="center">This is Heading Level 2</h2> <h3 align="right">This is Heading Level 3</h3> <h4>This is Heading Level 4</h4> <h5>This is Heading Level 5</h5> <h6>This is Heading Level 6</h6> </body> </html>

Objective Write a Program to display the horizontal line and modify its properties Commands to be used

1. Horizontal line: <hr> 2. Attributes of <hr>: width, align, size, color

Output

html> <head> <title>Horizontal Rule</title> </head> <body> <p>The hr tag defines a horizontal rule:</p> <hr> <p>The width and align attribute can be applied to Horizontal Ruler.</p> <hr width=20%, align="right"> The color and size attribute can be applied to Horizontal Ruler.</p> <hr color="purple" size="4"> </body> </html>

Lecture No - 2 Assignment No- 4

Objective Write a Program to display the text and image in center Commands to be used

1. Center tag Output

<html> <head> <title>Center</title> </head> <body> All good fish <center>swim round and round</center> in the water! <br> Take the image <br> <img src="web.gif"><br> Give the Align is center of the Image <center><img src="web.gif"></center> </body> </html>

Objective Write a Program to display the formatting text as per given output. Commands to be used 1. Bold, Italic, underline, strikethrough , div, break, nobreak, blockquote, address, superscript,

subscript, small, big, strong tags Output

<html> <head> <title> Formating Page</title> </head> <body style="font-size: 12pt"> <h2> $7.00 for a Year of <i>Vegetarian Times</i></h2> During the <span style="color: #003399; text-decoration: underline;">$7.00 Sale</span>, subscribe to bestsellers like <span style="text-decoration: underline"> <i><span style="color: #003399">Vegetarian Times</span></i> </span>for just <span style="text-decoration: underline">$7.00</span> after <br /> instant discount-- that's an additional $5.00<sup>off</sup>, or just $0.58 an issue. Many magazines are <br /> on sale--see magazines <s>discounted</s> to

<span style="color: #003399; text-decoration: underline;">$11.00</span> and <span style="color: #003399; text-decoration: underline;">$15.00</span>, or see more <span style="color: #003399; text-decoration: underline;">magazine deals</span> </body> </html>

Objective

Write a Program to display the comment (i.e. hiding the text on the browser) Commands to be used

1. Comment :  Output

<html> <head> <title>Comment</title> </head> <body> The following is an example of an HTML Comment.<br> <!-- This text will not appear in the browser window. -- > </body> </html>

Objective

Write a Program to display the background or text color in Name and RGB code. Commands to be used

1. bgcolor & color attributes 2. Color codes & RGB mode

Output

<html> <head> <title>Color code and RGB code</title> </head> <body bgcolor="pink" text=" #0000FF"> The following is an example of color code <br>

<font color=" rgb(69,216,48)"><b>this is RGB Color Code</b></font> </body> </html>

Objective

Write a Program to display the special characters in html like ( < > …. etc) Commands to be used

1. Special characters: <, >, ©, ®, , &quot. Output

<html> <head> <title>Special characters</title> <style type="text/css">  </style> </head> <body>

<p>T h i s i s a e x a m p l e o f c h a r a c t e r s p a c i n g </p> <p><strong>Maths Equation</strong><br> 3 < 5 <br> 6>8</p> <p>Copyright © 2006</p> <p><span class="style1">Orange</span> ™ </p> <p>“ Hurrey! ”</p> <p> </p> </body> </html>

Objective Write a Program to display the order list and modify the order list properties Commands to be used

1. Ordered list: <ol>,<li> 2. Attributes of ordered list: start, type

Output

<html> <head> <title>Order List</title> </head> <body > Makes a numbered list using the default number type: <ol> <li>text</li> <li>text</li> <li>text</li> </ol> Starts a numbered list, first # being 5. <ol Start="5">

<li>This is one line</li> <li>This is another line</li> <li>And this is the final line</li> </ol> Starts a numbered list, using capital letters. <ol type="A"> <li>This is one line</li> <li>This is another line</li> <li>And this is the final line</li> </ol> Starts a numbered list, using capital roman numbers. <ol type="I"> <li>This is one line</li> <li>This is another line</li> <li>And this is the final line</li> </ol> <ol type="I" start="7"> <li>This is one line</li> <li>This is another line</li> <li>And this is the final line</li> </ol> </body> </body> </html>

Objective Write a Program to display the unordered list and modify its properties. Commands to be used

1. Unordered List Output

<html> <title> Unorder List </title> </head> <body > Makes a bulleted list using the default bullet type: <ul> <li>text</li> <li>text</li> <li>text</li> </ul> Starts a bulleted list using discs as bullets: <ul type="disc">

<li>This is one line</li> <li>This is another line</li> <li>And this is the final line</li> </ul> Starts a bulleted list using circles as bullets: <ul type="circle"> <li>This is one line</li> <li>This is another line</li> <li>And this is the final line</li> </ul> Starts a bulleted list using squares as bullets: <ul type="square"> <li>This is one line</li> <li>This is another line</li> <li>And this is the final line</li> </ul> </body> </html>

Objective Write a Program to display the definition list and modify its properties. Commands to be used

1. Definition List: <dl>,<dt>,<dd> Output

<html> <head> <title> Defination List </title> </head> <body > <dl> <dt>HTML</dt> <dd>Hypertext Markup Language</dd> </dl> <dl> <dt>URL</dt> <dd>Uniform Resource Locator</dd> </dl> <dl> <dt>DHTML</dt> <dd>Dynamic Hypertext Markup Language</dd> </dl> </body> </html>

Objective Write a Program to display the nested sub-lists as per given output. Commands to be used

1. Ordered list: <ol>,<li> Output

<html> <head> <title>Nested List</title> </head> <body > The nested list is displayed as: <ol> <li>Examples of assets: <ol type="A"> <li>Cash <li>Land </ol> <li>Examples of liabilities: <ol type="I" start="5"> <li>Accounts payable <li>Notes payable </ol> </ol> </body> </html>

Objective Write a Program to display the nested sub-lists as per given output. Commands to be used

1. Unordered list: <ul>,<li> Output

<html> <head> <title>Nested List</title> </head> <body > <b>Nested Unordered List and Order list</b> <ol> <li>This is the first item <li>This is the second item <ul type="circle"> <li> This is the first subitem of the second item <ol> <li> And this is a numbered subitem of a subitem <li> And this is another numbered subitem of a subitem <li> Getting lost yet? </ol> <li> This is the second subitem of the second item <li> This is the third subitem of the second item

</ul> <li>This is the third item </ol> </body> </html>

Objective Write a Program to display the marquee and modify the its properties Commands to be used

1. <marquee> tag 2. Attributes of marquee: direction, behavior, width, height, bgcolor, scrollamount.

Output

<html> <html> <head> <title>Marquee</title> </head><body > <marquee>This text will be what I want to scroll across the page.</marquee> However the movement may may distract people's eyes, and attention, from bits of other contents offered.<br>BGCOLOR=" " This allows you to change the background color of the area the text is scrolling over. So, if you added BGCOLOR="yellow", you would have code like this:<br>

<marquee bgcolor="yellow">This text will be what I want to scroll across the page.</marquee> However the movement may may distract people's eyes, and attention, from bits of other contents offered.<br>WIDTH=" " This lets you control the width of the marquee. You can use the number of pixels, or a percentage of the screen. So, here is an example: <br> <MARQUEE BGCOLOR="yellow" WIDTH="300">Scrolling text is so much fun.....I can scroll forever! </MARQUEE> <marquee direction="down">Look at this text going down the screen</marquee> <marquee height="20" direction="up">This is a marquee with height set to 20</marquee> </body> </html>

Objective Write a Program to display the nested marquee as per given output. Commands to be used

1. Nested Marquee 2. Attributes of Marquee

Output

<html> <head> <title> Marquee </title> </head> <body> <marquee direction="up"> <marquee direction="right">Look at this text going down the screen</marquee></marquee> <marquee scrolldelay="10">This is really fast</marquee> <marquee scrolldelay="500">This is fairly sluggish</marquee> <marquee scrolldelay="1000">This is the HTML Marquee tag on a zimmer frame </marquee> </body> </html>

Objective Write a Program to display the image and modify the image properties as per given output. Commands to be used

1. Image 2. Attributes of image

Output

<html> <body> <p> <img src ="Sunset.jpg" align ="left" width="48" height="48" Alt=”beautiful Seen”> A paragraph with an image. The align attribute of the image is set to "left". <br>The image will float to the left of this text. </p> <p> <img src ="Sunset.jpg" align ="right" width="48" height="48" border=”2” hspace=”20” vspace=”10”> A paragraph with an image. The align attribute of the image is set to "right".<br> The image will float to the right of this text. </p> </body> </html>

Objective Write a program to display the link and modify the link properties. Commands to be used

1. Link 2. Attributes of link: target, href, name

Output

<html> <title> Hyper Link </title> <body> <p> <a href="#C4">See also Chapter 4</a> </p> <h2>Chapter 1</h2>

<p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 10</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 11</h2> </body> </html>

Objective Write a Program to display the link for navigating to other web site. Commands to be used

1. Anchor tag 2. Link 3. Attributes of link: target, href, name

Output

<html> <body> <p> <a href="link1.html"> This text</a> is a link to a page on this Web site. </p> <p> <a href="http://www.microsoft.com/"> This text</a> is a link to a page on the World Wide Web. </p> </body> </html>

Objective Write a Program to display the link on image for navigating to other page . Commands to be used

1. Anchor tag 2. Attributes of link: target, href, name 3. Img tag 4. Attributes of img : src,width, height

Output

<html> <body> <p> You can also use an image as a link: <a href="L7_2.html"> <img border="0" src="sunset.jpg" width="65" height="38"> </a> </p> </body> </html>

Objective Write a Program to create mapping the mapping the image to create hyperlinks. Commands to be used

1. <map> tag 2. <area> tag 3. <img> tag 4. Attributes of area & map: href, cords, shape, and name

Output

<html> <head> <title>Image Mapping</title> </head> <body> <IMG src="Sunset.jpg" width="50%" height="50%" alt="Image map of areas in the library" usemap="#map1"> <MAP name="map1"> <AREA shape="rect" coords="0,0,30,30" href="link.html" alt="Reference"> <AREA shape="rect" coords="34,34,100,100" href="link.html" alt="Audio visual lab"> <Area Shape="circle" coords="184.200,60" href="Link1.html"> <Area shape="poly" coords="276,0,276,28,100,200,50,50,276,0" href="Link1.html"> </MAP> </body> </html>

Objective Write a Program to create mapping the area of image to create hyperlinks as per given output. Commands to be used

1. <map> tag 2. <area> tag 3. <img> tag 4. Attributes of area & map: alt,target,shape,href.

Output

<html> <head> <title> Map tag</title> </head> <body> <p>Click on one of the planets:</p> <img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" /> <map id ="planetmap" name="planetmap"> <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank" alt="Sun" /> <area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank"

alt="Mercury" /> <area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="Venus" /> </body> </map> </html>

Objective Write a program by using An image map with links made with the HTML area tag as per given output. Commands to be used

1. Map 2. Area 3. Img 4. Attributes used: Shape, cords, alt, href.

Output

<html> <head> <title>Image map</title> <body> <h4>An image map with links made with the HTML area tag</h4> <map name="nav1" id="nav1"> <area alt="HTML tags" href="D:\L8_1.html" shape="circle" coords="50,50,39" /> <area href="D:\tags.html" alt="HTML tags" shape="rect" coords="31,49,189,81" /> <area alt="HTML events" href="D:\events.html" shape="circle" coords="155,165,39" />

Objective Write a program to display data in tabular format using table and modify the table properties. Commands to be used

1. <table>, attributes of table tag : height, width, bgcolor, background, , border, bordercolor, 2. <tr>, attributes of table tr : bgcolor, 3. <td>,<th>, attributes of table td, th : colspan

Output

<html> <head> <title>Table</title>

</head> <body> <h3> Table cells with no content with caption</h3> <table border="1"> <caption>My Caption</caption> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td></td> </tr> </table> <h3> Create heading row using <th> tag</h3> <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> <h3>To create headings in a column</h3> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h3>Merging the rows & columns</h3> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr>

</table> </body> </html>

Objective Write a program to display data in tabular format using table and modify the table properties as per given output. Commands to be used

1. <table>, attributes of table tag : height, width, bgcolor, background, cellspacing, cellpadding, border, bordercolor, align, valign

2. <tr>, attributes of table tr : align, valign, bgcolor, 3. <td>,<th>, attributes of table td, th : align, valign, bgcolor, colspan

Output

<html> <head> <title>Table info</title> <body> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> <h4>With cellspacing and cellpadding:</h4> <table border="1" cellspacing="10" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Cell backgrounds:</h4> <table border="1"> <tr> <td bgcolor="red">First</td> <td>Row</td> </tr> <tr> <td background="D:\KINU_TEST\web.gif"> Second</td> <td>Row</td> </tr> </table> <h4>Table with cell alignment</h4> <table width="400" border="1"> <tr> <th align="left">Money spent on....</th> <th align="right">January</th> <th align="right">February</th> </tr> <tr> <td align="left">Clothes</td> <td align="right">$241.10</td>

Objective Write a program to display data in tabular format as per given output. Commands to be used

1. <table>, attributes of table tag : height, width, bgcolor, background, cellspacing, cellpadding, border, bordercolor, align, valign

2. <tr>, attributes of table tr : align, valign, bgcolor, 3. <td>,<th>

Output

<html> <head> <title>Untitled Page</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="500"> <tr>

<td align="center" colspan="5" bgcolor="gray" > <b><u> Sales Order</u></b> </td> </tr> <tr> <td colspan="5"> Your Name:<br /> Your Address:<br /> City, ST 55555 </td> </tr> <tr> <td style="width: 79px" align="center" bgcolor="silver"> <b>No.</b></td> <td align="center" bgcolor="silver" > <b>Description</b></td> <td align="center" bgcolor="silver"> <b>Price</b></td> <td align="center" bgcolor="silver"> <b>Quantity</b></td> <td align="center" bgcolor="silver"> <b>Amount</b> </td> </tr> <tr> <td style="width: 79px" bgcolor="silver"> 11111</td> <td> Microsoft Windows XP Professional</td> <td align="center" > 2</td> <td align="right" > 169.99</td> <td align="right" bgcolor="silver"> 339.98</td> </tr> <tr> <td style="width: 79px" bgcolor="silver"> 22222</td> <td> Microsoft Office XP Professional</td> <td align="center"> 2 </td> <td align="right"> 449.99 </td> <td align="right" bgcolor="silver"> 999.98 </td> </tr> <tr> <td style="width: 79px" bgcolor="silver"> 33333</td> <td> Adobe Photoshop 7.0</td> <td align="center"> 1 </td> <td align="right"> 579.95 </td> <td align="right" bgcolor="silver"> 579.95 </td> </tr> <tr>

<td style="width: 79px" bgcolor="silver"> 44444</td> <td> HP PhotoSmart 7550 Printer</td> <td align="center"> 1</td> <td align="right"> 299.99 </td> <td align="right" bgcolor="silver"> 299.99 </td> </tr> <tr> <td style="width: 79px" bgcolor="silver"> 55555</td> <td> USB Device Cable</td> <td align="center"> 1</td> <td align="right"> 5.49 </td> <td align="right" bgcolor="silver"> 5.49 </td> </tr> <tr> <td colspan="3" rowspan="2" bgcolor="silver"> </td> <td align="left" bgcolor="silver"> Shiping :</td> <td align="right" bgcolor="silver"> 50.00 </td> </tr> <tr> <td align="left" bgcolor="silver"> Sales Tax :</td> <td align="right" bgcolor="silver"> 155.77</td> </tr> <tr> <td align="left" colspan="4" bgcolor="gray"> Total :</td> <td align="right" bgcolor="gray"> $ 2,431.16</td> </tr> </table> </body> </html>

Objective Write a program create nested table as per given output. Commands to be used

1. Table 2. Attributes of table

Output

<html> <body><h3>Example of nested Table</h3> <table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td>

<td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html>

Objective Write a program to create a nested table as per given output. Commands to be used

1. Table 2. Attributes of table

Output

<html> <head> <title>Nested Table</title> </head> <body> <h3>Exapmle of nested table with formating</h3> <table border="1" bgcolor="black"> <tr> <td colspan="5" align="center">Example #2 : Nested TAble </td> </tr> <tr>

<td><table border=1 height=150 bgcolor="maroon"> <caption align="top"><font color="white">Example table</font></caption> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> <th>Head 4</th> </tr> <tr> <td valign=top>one</td> <td valign=middle>two</td> <td valign=bottom>three</td> <td valign=baseline>four</td> </tr> </table> </td> <td><table border=1 height=150 bgcolor="olive"> <caption align="bottom"><font color="white">Example table</font></caption> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> <th>Head 4</th> </tr> <tr> <td valign=top>one</td> <td valign=middle>two</td> <td valign=bottom>three</td> <td valign=baseline>four</td> </tr> </table> </td> </tr> <tr> <td align="center"><table border="1" bgcolor="pink"> <tr> <td>Cell1</td> <td>Cell2</td> </tr> </table> </td> <td align="center"><table border="1" bgcolor="lightyellow"> <tr> <td>Cell1</td> </tr> <tr> <td>Cell2</td> </tr> </table></td> </tr> </table> </body> </html>

Objective

Write a program to create the frames and modify the frame properties as per given output Commands to be used

1. <frameset> tag, attributes : rows, cols. 2. <frame> tag, attributes : src, name.

Output

Note: - Create framea.html, frameb.html, framec.html as information given below. <html> <head> </head> <body bgcolor=”pink”> <h1> Frame A </h1>

</body> </html>

Objective Write a program to create hyperlink to display multiple web pages as per given output. Commands to be used

1. <frameset> tag, attributes : rows, cols. 2. <frame> tag, attributes : src, name. 3. <a> tag, attributes: href.

Output

Note: Create frame.html file as given below.

<html> <head> <title>Framelink</title> </head> <body> <h3><a href="framea.html" target="showframe">Frame A</h3><br> <h3><a href="frameb.html" target="showframe">Frame B</h3><br>

<h3><a href="framec.html" target="showframe">Frame c</h3><br> </body> </html>

Objective Write a program to create a form using form controls and table as per given output. Commands to be used

1. <form> tag, attributes: name, method, action, onSubmit 2. <input> tag, attributes: type, name, value 3. <select>,<option> tags, attributes: name, value, selected 4. <textarea> tag, attributes: name, value, rows, cols

Output

<html> <head> <style> td{font-weight:bold} table{border:solid orange}

</style> </head> <body bgcolor="rgb(240,240,240)"> <form name="f1" method="post" action="next.html" onsubmit=" return validateForm()"> <table border="0" align="center" bgcolor="rgb(253,254,203)" width="100%" cellpadding="5"> <tr> <td colspan="2" align="center"><h1>Yahoo!Mail</h1></td> </tr> <tr> <td>Name</td> <td><input type="text" name="txtname"></td> </tr> <tr> <td>Surname</td> <td><input type="text" name="txtsurname"></td> </tr> <tr> <td>Address</td> <td> <textarea name="taAdd" cols="20" rows="3"></textarea> </td> </tr> <tr> <td>Choose Email ID</td> <td><input type="text" name="txtemail"></td> </tr> <tr> <td>Choose password</td> <td><input type="password" name="txtpass"></td> </tr> <tr> <td>Confirm password</td> <td><input type="password" name="txtconpass"></td> </tr> <tr> <td>Gender</td> <td> <input type="radio" value="male"name="rdGender">Male <input type="radio" value="female"name="rdGender">Female </td> </tr> <tr> <td>Country</td> <td> <select name="slCountry"> <option>[-Select one-]</option> <option>India</option> <option>Pakstan</option>

<option>Sri Lanka</option> <option>US</option> <option>England</option> <option>Australia</option> <option>Africa</option> <option>Canada</option> <option>Japan</option> </select> </td> </tr> <tr> <td>Date of birth</td> <td> <select name="slDate"> <option>[Date]</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option> <option>19</option> <option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option> <option>31</option> </select> <select name="slmonth"> <option> [Month] </option> <option> Jan </option> <option> Feb </option> <option> Mar </option> <option> Apr </option> <option> May </option>

<option> 1993 </option> <option> 1994 </option> <option> 1995 </option> <option> 1996 </option> <option> 1997 </option> <option> 1998 </option> <option> 1999 </option> <option> 2000 </option> <option> 2001 </option> <option> 2002 </option> <option> 2003 </option> <option> 2004 </option> <option> 2005 </option> <option> 2006 </option> <option> 2007 </option> <option> 2008 </option> <option> 2009 </option> <option> 2010 </option> </select> </td> </tr> <tr> <td>Hobbies & interest</td> <td> <input type="checkbox" value="male"name="ckhobby">music <input type="checkbox" value="male"name="ckhobby">Dance <input type="checkbox" value="male"name="ckhobby">Singing </td> </tr> <tr> <td colspan="2"><hr width="90%"></td> </tr> <tr align="center"> <td colspan="2"><b>License & Agreement<br> <textarea readonly cols="60" rows="5"> write here Terms & Condition paragraph </textarea> </td> </tr> <tr align="center"> <td colspan="2"> <input type="radio" value="agree"name="rdTermCond">I Agree <input type="radio" value="agreenot"name="rdTermCond">I don't Agree </td> </tr> <tr> <td colspan="2"><hr width="90%"></td> </tr>

Objective Write a program to create membership form as shown below Commands to be used

1. <form> tag, attributes: name, method, action, onSubmit 2. <input> tag, attributes: type, name, value 3. <select>,<option> tags, attributes: name, value, selected 4. <textarea> tag, attributes: name, value, rows, cols

Output

<html> <head> </head> <body> <form name="MyForm" action="MembershipForm.htm" method="post"> <h2>Membership Application Form</h2> <table> <tr> <td>First Name: </td> <td><input type="text" name="FirstName" size="15" maxlength="15"/></td> </tr> <tr> <td>Last Name: </td> <td><input type="text" name="LastName" size="15" maxlength="15"/></td> </tr> <tr> <td>Email: </td> <td><input type="text" name="Email" size="30" maxlength="50"/></td> </tr> <tr> <td>Gender: </td> <td><input type="radio" name="Gender" value="F"/>Female <input type="radio" name="Gender" value="M"/>Male</td> </tr> <tr> <td>Major: </td> <td><select name="Major"> <option>Web Development</option> <option>Digital Media</option> <option>Database Administration</option> <option>Networking</option> <option>Software Development</option> <option>Systems Analysis</option> </select></td> </tr> <tr> <td>Reason for<br/>Joining: </td> <td><textarea name="Reason" cols="30" rows="5"></textarea></td> </tr> <tr> <td></td> <td><input type="submit" name="SubmitButton" value="Submit Form"/></td> </tr> </table> </form> </body> </html>

Objective Write a program to format heading and the content of the paragraph using style Commands to be used

1. DHTML styles Output

<html> <head> <title>DHTML </title> </head> <body> <h2 style="font-family:Courier; font-size:20pt; color:#FF0000; text-decoration:underline;">DHTML Styles</h2> <p style="font-family:verdana; font-size:10pt; letter-spacing:2px; border:#FF0000 dashed thin; color:#660000; margin:20px;"> The World Wide Web (WWW) is pervasive in daily life. Surfing the Web and using email are routine activities for most people, and it seems as if the technologies have been around forever. Certainly, the underlying technology of the Internet goes back at least 40 years, but the Web is a recent phenomenon with its major growth occuring only within the past decade. </p> </body> </html>

Objective Write a program to make content to be scrollable to use limited space on the page using div tag and style Commands to be used

1. DIV 2. Style

Output

<html> <head> <title>DHTML </title> </head> <body> <p style="font-family:verdana"><strong>DIV with Scrollable content </strong></p> <div style="height:300px; width:400px; overflow:scroll; border: black thin dashed; font-family:verdana; letter-spacing:3px; word-spacing:5px; font-size:10pt;color:brown; background-color:#FFFFCC">

<div style="margin:10px"> <p> The World Wide Web (WWW) is pervasive in daily life. Surfing the Web and using email are routine activities for most people, and it seems as if the technologies have been around forever. Certainly, the underlying technology of the Internet goes back at least 40 years, but the Web is a recent phenomenon with its major growth occuring only within the past decade. </p> <p> The World Wide Web (WWW) is pervasive in daily life. Surfing the Web and using email are routine activities for most people, and it seems as if the technologies have been around forever. Certainly, the underlying technology of the Internet goes back at least 40 years, but the Web is a recent phenomenon with its major growth occuring only within the past decade. </p> <p> The World Wide Web (WWW) is pervasive in daily life. Surfing the Web and using email are routine activities for most people, and it seems as if the technologies have been around forever. Certainly, the underlying technology of the Internet goes back at least 40 years, but the Web is a recent phenomenon with its major growth occuring only within the past decade. </p> <p> The World Wide Web (WWW) is pervasive in daily life. Surfing the Web and using email are routine activities for most people, and it seems as if the technologies have been around forever. Certainly, the underlying technology of the Internet goes back at least 40 years, but the Web is a recent phenomenon with its major growth occuring only within the past decade. </p> </div> </div> </body> </html>

Objective Write a program using DHTML style to change the mouseover and mouseout style of the link Commands to be used

1. DHTML Style Output

Objective Create the following page layout using only divisions, paragraphs, and style sheets. You can use in-line, embedded, or linked style sheets. Commands to be used

1. CSS 2. Embedded Stylesheet

Output

L14_1.css

.DIV1 { BORDER-RIGHT: 3px outset; PADDING-RIGHT: 10px; BORDER-TOP: 3px outset; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 20pt; LEFT: 12px; PADDING-BOTTOM: 10px; BORDER-LEFT: 3px outset; WIDTH: 600px; COLOR: black; PADDING-TOP: 10px; BORDER-BOTTOM: 3px outset; FONT-FAMILY: times new roman; LETTER-SPACING: 3px; POSITION: absolute; BACKGROUND-COLOR: #f6f6f6; TEXT-ALIGN: center } .DIV2 { BORDER-RIGHT: 2px solid; PADDING-RIGHT: 15px; BORDER-TOP: 2px solid; PADDING-LEFT: 15px; FONT-SIZE: 12pt; LEFT: 12px; PADDING-BOTTOM: 15px; OVERFLOW: auto; BORDER-LEFT: 2px solid; WIDTH: 200px; COLOR: black; PADDING-TOP: 15px; BORDER-BOTTOM: 2px solid; FONT-FAMILY: arial; POSITION: absolute; TOP: 80px; HEIGHT: 300px; BACKGROUND-COLOR: #f6f6f6 } .DIV3 { BORDER-RIGHT: 2px solid; PADDING-RIGHT: 10px; BORDER-TOP: 2px solid; PADDING-LEFT: 80px; FONT-SIZE: 12pt; LEFT: 270px; PADDING-BOTTOM: 10px; BORDER-LEFT: 2px solid; WIDTH: 340px; COLOR: black; PADDING-TOP: 10px; BORDER-BOTTOM: 2px solid; FONT-FAMILY: arial; POSITION: absolute; TOP: 80px; HEIGHT: 300px; BACKGROUND-COLOR: #f6f6f6 } .DIV4 { BORDER-RIGHT: 6px ridge; PADDING-RIGHT: 10px; BORDER-TOP: 6px ridge; PADDING-LEFT: 10px; FONT-SIZE: 12pt; LEFT: 350px; PADDING-BOTTOM: 10px; BORDER-LEFT: 6px ridge; WIDTH: 240px; COLOR: gainsboro; PADDING-TOP: 10px; BORDER-BOTTOM: 6px ridge; FONT-FAMILY: arial; POSITION: absolute; TOP: 260px; HEIGHT: 100px; BACKGROUND-COLOR: gray; TEXT-ALIGN: center } .DIV5 { BORDER-RIGHT: 6px ridge; PADDING-RIGHT: 10px; BORDER-TOP: 6px ridge; PADDING-LEFT: 10px; FONT-SIZE: 12pt; LEFT: 230px; PADDING-BOTTOM: 10px; BORDER-LEFT: 6px ridge; WIDTH: 100px; COLOR: gainsboro; PADDING-TOP: 10px; BORDER-BOTTOM: 6px ridge; FONT-FAMILY: arial; POSITION: absolute; TOP: 140px; HEIGHT: 200px; BACKGROUND-COLOR: gray; TEXT-ALIGN: center } .HEAD11 { FONT-WEIGHT: bold; FONT-SIZE: 16pt; FONT-FAMILY: times new roman; TEXT-ALIGN: center }

L14_1.html

<HTML><HEAD><TITLE>Embedding & CSS</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <STYLE>BODY { FONT-SIZE: 10pt; MARGIN: 15px; FONT-FAMILY: arial } .head1 { FONT-WEIGHT: bold; FONT-SIZE: 14pt; TEXT-ALIGN: center } .head2 { FONT-WEIGHT: bold; FONT-SIZE: 12pt; TEXT-ALIGN: center

} .divcode { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 9pt; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; FONT-FAMILY: courier new; BACKGROUND-COLOR: #f0f0f0 } .code { FONT-SIZE: 9pt; FONT-FAMILY: courier new } .script { FONT-SIZE: 9pt; COLOR: #ff0000; FONT-FAMILY: courier new } .output { BORDER-RIGHT: 3px ridge; PADDING-RIGHT: 10px; BORDER-TOP: 3px ridge; PADDING-LEFT: 10px; FONT-SIZE: 12pt; PADDING-BOTTOM: 10px; OVERFLOW: auto; BORDER-LEFT: 3px ridge; PADDING-TOP: 10px; BORDER-BOTTOM: 3px ridge; FONT-FAMILY: times new roman; HEIGHT: 300px } </STYLE> <LINK href="L14_1.css" type=text/css rel=stylesheet> <META content="MSHTML 6.00.6000.16674" name=GENERATOR></HEAD> <BODY oncontextmenu=event.returnValue=false> <!div class="output"> <DIV style="POSITION: relative; HEIGHT: 400px"> <DIV class=DIV1>Page Layout Using CSS </DIV> <BR> <DIV class=DIV2> <P class=HEAD11>Text Block</P> <P>This block of text is 200px wide by 300px high with padding of 15px. The heading is in 16pt Times New Roman bold font and is aligned center. The text is in Arial 12pt font.</P> <P>The division permits horizontal scrolling when the amount of text is larger than the block size.</P></DIV> <DIV class=DIV3> <P class=HEAD11>Text Block</P> <P>This entire page is layed out with Cascading Style Sheets. The blocks of text are enclosed within divisions that are positioned absolute on the page. This division is 340px width by 300px height.</P></DIV> <DIV class=DIV4> <P>This block of text is 300px wide by 100px high with text centered horizontally.</P></DIV> <DIV class=DIV5> <P>This block of text is 100px wide by 200px high.</P></DIV> </DIV><BR></BODY></HTML>

Objective Write a program display the following effects using DHTML filter property Commands to be used

1. DHTML filter Output

<html> <head> <title>Filter</title> </head> <body> <SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffe4e1,endColorStr=#ff8c00); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"> <IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left> <DIV id=imgObjText><BR> The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV> </SPAN> <SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.Wave(freq=1,LightStrength=10,Phase=10,Strength=5); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left> <DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN> <SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.MotionBlur(direction=0,strength=5); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left> <DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN> <SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.dropShadow( Color=FFFF00,offX=5,offY=5,positive=true); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left> <DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN> <SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.Emboss(); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left> <DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN> <SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.Alpha( style=1,opacity=0,finishOpacity=100,startX=0,finishX=100,startY=0,finishY=75); FONT: bold 9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR: skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>

<DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.</DIV></SPAN> </body> </html>

Objective Write a DHTML Style to change the style of the border of table as shown below Commands to be used

1. embedded styles Output

<html> <head> <title>Embedded Stylesheet</title> <style type="text/css"> table {border:ridge 5px} table td {border:inset 1px} table tr#ROW1 {background-color:red; color:white} table tr#ROW2 {background-color:white} table tr#ROW3 {background-color:blue; color:white} table td#CELL9 {border:inset 4px; background-color:navy} </style> </head> <body> <table> <tr id="ROW1"> <td>Cell 1.1</td> <td>Cell 1.2</td> <td>Cell 1.3</td> </tr> <tr id="ROW2"> <td>Cell 2.1</td> <td>Cell 2.2</td> <td>Cell 2.3</td> </tr> <tr id="ROW3"> <td>Cell 3.1</td> <td>Cell 3.2</td> <td id="CELL9">Cell 3.3</td> </tr> </table></body></html>

Learning html & dhtml

Documents