Html Class Assignments                                   Lecture No - 1                                  Assignment No-1Ob...
Html Class Assignments                                   Lecture No -2                                  Assignment No-1Obj...
Html Class AssignmentsThis paragraph is left aligned, with the start tag By default, paragraphs are left-aligned. Thispara...
Html Class Assignments                                   Lecture No -2                                  Assignment No-2Obj...
Html Class Assignments<html>         <head>         <title>Heading</title>         </head><body><h1 align="left"> This is ...
Html Class Assignments                                    Lecture No -2                                   Assignment No-3O...
Html Class Assignments                                  Lecture No - 2                                 Assignment No- 4Obj...
Html Class Assignments                                   Lecture No - 3                                  Assignment No- 1O...
Html Class Assignments     <span style="color: #003399; text-decoration: underline;">$11.00</span> and        <span style=...
Html Class Assignments                                   Lecture No - 4                                  Assignment No- 1O...
Html Class Assignments                                 Lecture No - 4                                Assignment No- 2Objec...
Html Class Assignments                                    Lecture No - 4                                   Assignment No- ...
Html Class Assignments   <p>T&nbsp;&nbsp;&nbsp;h&nbsp;&nbsp;&nbsp;i&nbsp;&nbsp;&nbsp;&nbsp;s&nbsp;&nbsp;   &nbsp;&nbsp;   ...
Html Class Assignments                                    Lecture No - 4                                   Assignment No- ...
Html Class Assignments         <li>This is one line</li>         <li>This is another line</li>         <li>And this is the...
Html Class Assignments                                    Lecture No - 4                                   Assignment No- ...
Html Class Assignments         <li>This is one line</li>         <li>This is another line</li>         <li>And this is the...
Html Class Assignments                                    Lecture No - 4                                   Assignment No- ...
Html Class Assignments                                   Lecture No - 5                                  Assignment No- 1O...
Html Class Assignments                                    Lecture No - 5                                   Assignment No- ...
Html Class Assignments       </ul>     <li>This is the third item   </ol>         </body></html>
Html Class Assignments                                  Lecture No - 6                                 Assignment No- 1Obj...
Html Class Assignments<marquee bgcolor="yellow">This text will be what I want to scroll acrossthe page.</marquee> However ...
Html Class Assignments                                 Lecture No - 6                                Assignment No- 2Objec...
Html Class Assignments                                   Lecture No - 6                                  Assignment No- 3O...
Html Class Assignments                                   Lecture No - 7                                  Assignment No- 1O...
Html Class Assignments<p>This chapter explains ba bla bla</p><h2>Chapter 2</h2><p>This chapter explains ba bla bla</p><h2>...
Html Class Assignments                                   Lecture No - 7                                  Assignment No- 2O...
Html Class Assignments                                     Lecture No - 7                                    Assignment No...
Html Class Assignments                                  Lecture No - 8                                 Assignment No- 1Obj...
Html Class Assignments<html>         <head>         <title>Image Mapping</title>         </head>         <body><IMG src="S...
Html Class Assignments                                    Lecture No - 8                                   Assignment No- ...
Html Class Assignments alt="Mercury" /> <area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="V...
Html Class Assignments                                    Lecture No - 8                                   Assignment No- ...
Html Class Assignments<area href="D:L8_2.html" alt="HTML events" shape="rect" coords="55,137,155,163" /><area alt="HTML ty...
Html Class Assignments                                   Lecture No - 9                                  Assignment No- 1O...
Html Class Assignments        </head>        <body><h3> Table cells with no content with caption</h3><table border="1"><ca...
Html Class Assignments</table>        </body></html>
Html Class Assignments                                   Lecture No - 9                                  Assignment No- 2O...
Html Class Assignments<html><head><title>Table info</title><body><h4>Cell that spans two rows:</h4><table border="1"><tr> ...
Html Class Assignments <td align="right">$50.20</td></tr><tr> <td align="left">Make-Up</td> <td align="right">$30.00</td> ...
Html Class Assignments                                   Lecture No - 9                                  Assignment No- 3O...
Html Class Assignments       <td align="center" colspan="5" bgcolor="gray" >&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<b><u> Sales ...
Html Class Assignments        <td style="width: 79px" bgcolor="silver">&nbsp; 44444</td>        <td>           HP PhotoSma...
Html Class Assignments                                  Lecture No - 10                                 Assignment No- 1Ob...
Html Class Assignments    <td>D</td>  </tr>  </table> </td></tr><tr> <td>This cell contains a list  <ul>   <li>apples</li>...
Html Class Assignments                                  Lecture No - 10                                 Assignment No- 2Ob...
Html Class Assignments                <td><table border=1 height=150 bgcolor="maroon">        <caption align="top"><font c...
Html Class Assignments                                  Lecture No - 11                                 Assignment No- 1Ob...
Html Class Assignments</body></html>
Html Class Assignments                                  Lecture No - 11                                 Assignment No- 2Ob...
Html Class Assignments          <h3><a href="framec.html" target="showframe">Frame c</h3><br>          </body></html>
Html Class Assignments                                   Lecture No - 12                                  Assignment No- 1...
Html Class Assignments   </style>   </head>   <body bgcolor="rgb(240,240,240)">   <form name="f1" method="post" action="ne...
Html Class Assignments   <option>Sri Lanka</option>   <option>US</option>   <option>England</option>   <option>Australia</...
Html Class Assignments   <option>    Jun   </option>   <option>    Jul   </option>   <option>    Aug   </option>   <option...
Html Class Assignments   <option>      1993   </option>   <option>      1994   </option>   <option>      1995   </option> ...
Html Class Assignments   <tr align="center">   <td align=   "right">   <input type="submit" name="s1" value="Submit">   </...
Html Class Assignments                                   Lecture No - 12                                  Assignment No- 2...
Html Class Assignments<html><head></head><body><form name="MyForm" action="MembershipForm.htm" method="post"><h2>Membershi...
Html Class Assignments                                   Lecture No -13                                  Assignment No-1Ob...
Html Class Assignments                                  Lecture No - 13                                 Assignment No- 2Ob...
Html Class Assignments<div style="margin:10px"><p>The World Wide Web (WWW) is pervasive in daily life. Surfing the Web and...
Html Class Assignments                                Lecture No - 13                               Assignment No- 3Object...
Html Class Assignments                                  Lecture No - 14                                 Assignment No- 1Ob...
Html Class AssignmentsL14_1.css.DIV1 {        BORDER-RIGHT: 3px outset; PADDING-RIGHT: 10px; BORDER-TOP: 3px outset;PADDIN...
Html Class Assignments}.divcode {          PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 9pt; PADDING-BOTTOM:5px; PADD...
Html Class Assignments                                  Lecture No - 14                                 Assignment No- 2Ob...
Html Class Assignments<html><head><title>Filter</title></head><body><SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LE...
Html Class Assignments<DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up thecontent of the f...
Html Class Assignments                                 Lecture No - 14                                Assignment No- 3Obje...
Upcoming SlideShare
Loading in...5
×

Learning html & dhtml

363

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
363
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Learning html & dhtml

  1. 1. Html Class Assignments Lecture No - 1 Assignment No-1ObjectiveWrite a Program to display the title on title bar and modify the page properties like backgroundand text colorCommands 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>
  2. 2. Html Class Assignments Lecture No -2 Assignment No-1ObjectiveWrite a Program to display the paragraphs and modify the paragraphs propertiesCommands to be used 1. Paragraph <p> 2. Attributes of <p>: alignOutput<html><body><p> <b>No Alignment</b></p><p>This paragraph has no alignment attribute. By default, paragraphs are left-aligned, although oncethe Web supports other languages, such as arabic, the default alignment will be language-specific.</p><p> <b> Left Alignment </b></p><p align="left">
  3. 3. Html Class AssignmentsThis paragraph is left aligned, with the start tag By default, paragraphs are left-aligned. Thisparagraph has no alignment attribute. By default, paragraphs are left-aligned, although once theWeb 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. Thisparagraph has no alignment attribute. By default, paragraphs are left-aligned, although once theWeb 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. Thisparagraph has no alignment attribute. By default, paragraphs are left-aligned, although once theWeb supports other languages, such as arabic, the default alignment will be language-specific.</p><body></html>
  4. 4. Html Class Assignments Lecture No -2 Assignment No-2ObjectiveWrite a Program to display the heading and modify the heading properties .Commands to be used 1. Heading tags (h1to h6) 2. Attributes of Heading : alignOutput<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>
  5. 5. Html Class Assignments<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>
  6. 6. Html Class Assignments Lecture No -2 Assignment No-3ObjectiveWrite a Program to display the horizontal line and modify its propertiesCommands to be used 1. Horizontal line: <hr> 2. Attributes of <hr>: width, align, size, colorOutputhtml> <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>
  7. 7. Html Class Assignments Lecture No - 2 Assignment No- 4ObjectiveWrite a Program to display the text and image in centerCommands to be used 1. Center tagOutput<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>
  8. 8. Html Class Assignments Lecture No - 3 Assignment No- 1ObjectiveWrite a Program to display the formatting text as per given output.Commands to be used1. Bold, Italic, underline, strikethrough , div, break, nobreak, blockquote, address, superscript, subscript, small, big, strong tagsOutput<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 tobestsellers 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-- thats 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
  9. 9. Html Class Assignments <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>
  10. 10. Html Class Assignments Lecture No - 4 Assignment No- 1ObjectiveWrite 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>
  11. 11. Html Class Assignments Lecture No - 4 Assignment No- 2ObjectiveWrite 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 modeOutput <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>
  12. 12. Html Class Assignments Lecture No - 4 Assignment No- 3ObjectiveWrite a Program to display the special characters in html like ( &lt; &gt; …. etc)Commands to be used 1. Special characters: &lt;, &gt;, &copy;, &reg;, &nbsp;, &quot.Output <html> <head> <title>Special characters</title> <style type="text/css"> <!-- .style1 { color: #FF9900; font-weight: bold; } --> </style> </head> <body>
  13. 13. Html Class Assignments <p>T&nbsp;&nbsp;&nbsp;h&nbsp;&nbsp;&nbsp;i&nbsp;&nbsp;&nbsp;&nbsp;s&nbsp;&nbsp; &nbsp;&nbsp; i&nbsp;&nbsp;&nbsp;&nbsp;s&nbsp;&nbsp;&nbsp;&nbsp; a&nbsp;&nbsp;&nbsp;&nbsp; e&nbsp;&nbsp;&nbsp;&nbsp;x&nbsp;&nbsp;&nbsp;&nbsp;a&nbsp;&nbsp;&nbsp;&nbsp;m&n bsp;&nbsp;&nbsp;&nbsp;p&nbsp;&nbsp;&nbsp;&nbsp;l&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e& nbsp;&nbsp;&nbsp;&nbsp;o&nbsp;&nbsp;&nbsp;f&nbsp;&nbsp;&nbsp;&nbsp; c&nbsp;&nbsp;&nbsp;&nbsp;h&nbsp;&nbsp;&nbsp;&nbsp;a&nbsp;&nbsp;&nbsp;&nbsp;r&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c&nbsp;&nbsp;&nbsp;&n bsp;t&nbsp;&nbsp;&nbsp;&nbsp;e&nbsp;&nbsp;&nbsp;&nbsp;r&nbsp;&nbsp;&nbsp;&nbsp; s&nbsp;&nbsp;&nbsp;&nbsp;p&nbsp;&nbsp;&nbsp;&nbsp;a&nbsp;&nbsp;&nbsp;&nbsp;c&nb sp;&nbsp;&nbsp;&nbsp;i&nbsp;&nbsp;&nbsp;&nbsp;n&nbsp;&nbsp;&nbsp;&nbsp;g </p> <p><strong>Maths Equation</strong><br> 3 &lt; 5 <br> 6&gt;8</p> <p>Copyright &copy; 2006</p> <p><span class="style1">Orange</span> ™ </p> <p>“ Hurrey! ”</p> <p>&nbsp;</p> </body> </html>
  14. 14. Html Class Assignments Lecture No - 4 Assignment No- 4ObjectiveWrite a Program to display the order list and modify the order list propertiesCommands to be used 1. Ordered list: <ol>,<li> 2. Attributes of ordered list: start, typeOutput<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">
  15. 15. Html Class Assignments <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>
  16. 16. Html Class Assignments Lecture No - 4 Assignment No- 5ObjectiveWrite a Program to display the unordered list and modify its properties.Commands to be used 1. Unordered ListOutput<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">
  17. 17. Html Class Assignments <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>
  18. 18. Html Class Assignments Lecture No - 4 Assignment No- 6ObjectiveWrite 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>
  19. 19. Html Class Assignments Lecture No - 5 Assignment No- 1ObjectiveWrite 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>
  20. 20. Html Class Assignments Lecture No - 5 Assignment No- 2ObjectiveWrite 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
  21. 21. Html Class Assignments </ul> <li>This is the third item </ol> </body></html>
  22. 22. Html Class Assignments Lecture No - 6 Assignment No- 1ObjectiveWrite a Program to display the marquee and modify the its propertiesCommands 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 thepage.</marquee> However the movement may may distract peoples eyes, andattention, from bits of other contents offered.<br>BGCOLOR=" "This allows you to change the background color of the area the text is scrollingover. So, if you added BGCOLOR="yellow", you would have code like this:<br>
  23. 23. Html Class Assignments<marquee bgcolor="yellow">This text will be what I want to scroll acrossthe page.</marquee> However the movement may may distract peoples eyes, andattention, from bits of other contents offered.<br>WIDTH=" " This lets you control the width of themarquee. You can use the number ofpixels, 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 scrollforever!</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>
  24. 24. Html Class Assignments Lecture No - 6 Assignment No- 2ObjectiveWrite a Program to display the nested marquee as per given output.Commands to be used 1. Nested Marquee 2. Attributes of MarqueeOutput<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>
  25. 25. Html Class Assignments Lecture No - 6 Assignment No- 3ObjectiveWrite a Program to display the image and modify the image properties as per given output.Commands to be used 1. Image 2. Attributes of imageOutput<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 willfloat 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 willfloat to the right of this text.</p></body></html>
  26. 26. Html Class Assignments Lecture No - 7 Assignment No- 1ObjectiveWrite a program to display the link and modify the link properties.Commands to be used 1. Link 2. Attributes of link: target, href, nameOutput<html><title> Hyper Link </title><body><p><a href="#C4">See also Chapter 4</a></p><h2>Chapter 1</h2>
  27. 27. Html Class Assignments<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>
  28. 28. Html Class Assignments Lecture No - 7 Assignment No- 2ObjectiveWrite 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, nameOutput<html><body><p><a href="link1.html">This text</a> is a link to a page onthis Web site.</p><p><a href="http://www.microsoft.com/">This text</a> is a link to a page onthe World Wide Web.</p></body></html>
  29. 29. Html Class Assignments Lecture No - 7 Assignment No- 3ObjectiveWrite 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, heightOutput<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>
  30. 30. Html Class Assignments Lecture No - 8 Assignment No- 1ObjectiveWrite 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 nameOutput
  31. 31. Html Class Assignments<html> <head> <title>Image Mapping</title> </head> <body><IMG src="Sunset.jpg" width="50%" height="50%" alt="Image map of areas in thelibrary" 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>
  32. 32. Html Class Assignments Lecture No - 8 Assignment No- 2ObjectiveWrite 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"
  33. 33. Html Class Assignments alt="Mercury" /> <area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="Venus" /></body></map></html>
  34. 34. Html Class Assignments Lecture No - 8 Assignment No- 3ObjectiveWrite a program by using An image map with links made with the HTML area tag as per givenoutput.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" />
  35. 35. Html Class Assignments<area href="D:L8_2.html" alt="HTML events" shape="rect" coords="55,137,155,163" /><area alt="HTML types" href="../types.html" shape="circle" coords="75,250,39" /><area href="D:types.html" alt="HTML types" shape="rect" coords="107,240,153,260" /></map><img src="D:KINU_TESTnav1.jpg" usemap="#nav1" alt="Navigation menu" /></body></html>
  36. 36. Html Class Assignments Lecture No - 9 Assignment No- 1ObjectiveWrite 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 : colspanOutput<html><head> <title>Table</title>
  37. 37. Html Class Assignments </head> <body><h3> Table cells with no content with caption</h3><table border="1"><caption>My Caption</caption><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</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>
  38. 38. Html Class Assignments</table> </body></html>
  39. 39. Html Class Assignments Lecture No - 9 Assignment No- 2ObjectiveWrite a program to display data in tabular format using table and modify the table properties asper 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, colspanOutput
  40. 40. Html Class Assignments<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_TESTweb.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>
  41. 41. Html Class Assignments <td align="right">$50.20</td></tr><tr> <td align="left">Make-Up</td> <td align="right">$30.00</td> <td align="right">$44.45</td></tr><tr> <td align="left">Food</td> <td align="right">$730.40</td> <td align="right">$650.00</td></tr><tr> <th align="left">Sum</th> <th align="right">$1001.50</th> <th align="right">$744.65</th></tr></table></body></html>
  42. 42. Html Class Assignments Lecture No - 9 Assignment No- 3ObjectiveWrite 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>
  43. 43. Html Class Assignments <td align="center" colspan="5" bgcolor="gray" >&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<b><u> Sales Order</u></b> </td> </tr> <tr> <td colspan="5"> Your Name:<br /> Your Address:<br /> City, ST 55555 &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;</td> </tr> <tr> <td style="width: 79px" align="center" bgcolor="silver">&nbsp; <b>No.</b></td> <td align="center" bgcolor="silver" >&nbsp; <b>Description</b></td> <td align="center" bgcolor="silver">&nbsp; <b>Price</b></td> <td align="center" bgcolor="silver">&nbsp; <b>Quantity</b></td> <td align="center" bgcolor="silver">&nbsp;<b>Amount</b> </td> </tr> <tr> <td style="width: 79px" bgcolor="silver">&nbsp; 11111</td> <td> Microsoft Windows XP Professional</td> <td align="center" >&nbsp;2</td> <td align="right" >&nbsp; 169.99</td> <td align="right" bgcolor="silver">&nbsp; 339.98</td> </tr> <tr> <td style="width: 79px" bgcolor="silver">&nbsp; 22222</td> <td> Microsoft Office XP Professional</td> <td align="center">&nbsp; 2&nbsp; </td> <td align="right"> 449.99&nbsp; </td> <td align="right" bgcolor="silver"> 999.98&nbsp; </td> </tr> <tr> <td style="width: 79px" bgcolor="silver">&nbsp; 33333</td> <td> Adobe Photoshop 7.0</td> <td align="center"> 1 </td> <td align="right"> 579.95&nbsp; </td> <td align="right" bgcolor="silver"> 579.95&nbsp; </td> </tr> <tr>
  44. 44. Html Class Assignments <td style="width: 79px" bgcolor="silver">&nbsp; 44444</td> <td> HP PhotoSmart 7550 Printer</td> <td align="center">&nbsp;1</td> <td align="right"> 299.99&nbsp; </td> <td align="right" bgcolor="silver"> 299.99&nbsp; </td> </tr> <tr> <td style="width: 79px" bgcolor="silver">&nbsp; 55555</td> <td>&nbsp; USB Device Cable</td> <td align="center">&nbsp;1</td> <td align="right"> 5.49&nbsp; </td> <td align="right" bgcolor="silver"> 5.49&nbsp; </td> </tr> <tr> <td colspan="3" rowspan="2" bgcolor="silver">&nbsp; &nbsp; &nbsp; </td> <td align="left" bgcolor="silver"> Shiping :</td> <td align="right" bgcolor="silver"> 50.00&nbsp; </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>
  45. 45. Html Class Assignments Lecture No - 10 Assignment No- 1ObjectiveWrite a program create nested table as per given output.Commands to be used 1. Table 2. Attributes of tableOutput<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>
  46. 46. Html Class Assignments <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>
  47. 47. Html Class Assignments Lecture No - 10 Assignment No- 2ObjectiveWrite a program to create a nested table as per given output.Commands to be used 1. Table 2. Attributes of tableOutput<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>
  48. 48. Html Class Assignments <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>
  49. 49. Html Class Assignments Lecture No - 11 Assignment No- 1Objective Write a program to create the frames and modify the frame properties as per given outputCommands to be used 1. <frameset> tag, attributes : rows, cols. 2. <frame> tag, attributes : src, name.Output<html><frameset cols="25%,50%,25%"> <frame src="framea.html"> <frame src="frameb.html"> <frame src="framec.html"></frameset></html>Note: - Create framea.html, frameb.html, framec.html as information given below.<html><head></head><body bgcolor=”pink”><h1> Frame A </h1>
  50. 50. Html Class Assignments</body></html>
  51. 51. Html Class Assignments Lecture No - 11 Assignment No- 2ObjectiveWrite 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<html><frameset cols="25%,*"> <frame src="frame.html" > <frame src="framec.html" name="showframe"></frameset></html>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>
  52. 52. Html Class Assignments <h3><a href="framec.html" target="showframe">Frame c</h3><br> </body></html>
  53. 53. Html Class Assignments Lecture No - 12 Assignment No- 1ObjectiveWrite 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, colsOutput <html> <head> <style> td{font-weight:bold} table{border:solid orange}
  54. 54. Html Class Assignments </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>
  55. 55. Html Class Assignments <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>
  56. 56. Html Class Assignments <option> Jun </option> <option> Jul </option> <option> Aug </option> <option> Sep </option> <option> Oct </option> <option> Nov </option> <option> Dec </option> </select> <select name="slYear"> <option> [year] </option> <option> 1950 </option> <option> 1951 </option> <option> 1952 </option> <option> 1953 </option> <option> 1954 </option> <option> 1955 </option> <option> 1956 </option> <option> 1957 </option> <option> 1958 </option> <option> 1959 </option> <option> 1960 </option> <option> 1961 </option> <option> 1962 </option> <option> 1963 </option> <option> 1964 </option> <option> 1965 </option> <option> 1966 </option> <option> 1967 </option> <option> 1968 </option> <option> 1969 </option> <option> 1970 </option> <option> 1971 </option> <option> 1972 </option> <option> 1973 </option> <option> 1974 </option> <option> 1975 </option> <option> 1976 </option> <option> 1977 </option> <option> 1978 </option> <option> 1979 </option> <option> 1980 </option> <option> 1981 </option> <option> 1982 </option> <option> 1983 </option> <option> 1984 </option> <option> 1985 </option> <option> 1986 </option> <option> 1987 </option> <option> 1988 </option> <option> 1989 </option> <option> 1990 </option> <option> 1991 </option> <option> 1992 </option>
  57. 57. Html Class Assignments <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 dont Agree </td> </tr> <tr> <td colspan="2"><hr width="90%"></td> </tr>
  58. 58. Html Class Assignments <tr align="center"> <td align= "right"> <input type="submit" name="s1" value="Submit"> </td> <td> <input type="reset" name="r1" value="Reset Form"> </td> </tr> </form> </body> </html>
  59. 59. Html Class Assignments Lecture No - 12 Assignment No- 2ObjectiveWrite a program to create membership form as shown belowCommands 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, colsOutput
  60. 60. Html Class Assignments<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>
  61. 61. Html Class Assignments Lecture No -13 Assignment No-1ObjectiveWrite a program to format heading and the content of the paragraph using styleCommands to be used 1. DHTML stylesOutput<html><head><title>DHTML </title></head><body><h2 style="font-family:Courier; font-size:20pt; color:#FF0000; text-decoration:underline;">DHTMLStyles</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 areroutine 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 arecent phenomenon with its major growth occuring only within the past decade.</p></body></html>
  62. 62. Html Class Assignments Lecture No - 13 Assignment No- 2ObjectiveWrite a program to make content to be scrollable to use limited space on the page using div tagand styleCommands to be used 1. DIV 2. StyleOutput<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">
  63. 63. Html Class Assignments<div style="margin:10px"><p>The World Wide Web (WWW) is pervasive in daily life. Surfing the Web and using email areroutine 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 arecent 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 areroutine 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 arecent 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 areroutine 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 arecent 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 areroutine 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 arecent phenomenon with its major growth occuring only within the past decade.</p></div></div></body></html>
  64. 64. Html Class Assignments Lecture No - 13 Assignment No- 3ObjectiveWrite a program using DHTML style to change the mouseover and mouseout style of the linkCommands to be used 1. DHTML StyleOutput
  65. 65. Html Class Assignments Lecture No - 14 Assignment No- 1ObjectiveCreate the following page layout using only divisions, paragraphs, and style sheets. You can usein-line, embedded, or linked style sheets.Commands to be used 1. CSS 2. Embedded StylesheetOutput
  66. 66. Html Class AssignmentsL14_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: 2pxsolid; 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 &amp; 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
  67. 67. Html Class Assignments}.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. Theheading is in 16pt Times New Roman bold font and is aligned center. The text isin Arial 12pt font.</P><P>The division permits horizontal scrolling when the amount of text is largerthan 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 textare enclosed within divisions that are positioned absolute on the page. Thisdivision is 340px width by 300px height.</P></DIV><DIV class=DIV4><P>This block of text is 300px wide by 100px high with text centeredhorizontally.</P></DIV><DIV class=DIV5><P>This block of text is 100px wide by 200pxhigh.</P></DIV></DIV><BR></BODY></HTML>
  68. 68. Html Class Assignments Lecture No - 14 Assignment No- 2ObjectiveWrite a program display the following effects using DHTML filter propertyCommands to be used 1. DHTML filterOutput
  69. 69. Html Class Assignments<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 filteredSPAN.</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 thecontent 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.3verdana; 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 thecontent 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=oImgstyle="MARGIN: 8px" src="fruit.gif" align=left><DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up thecontent 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=oImgstyle="MARGIN: 8px" src="fruit.gif" align=left><DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up thecontent 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: bold9pt/1.3 verdana; WIDTH: 305px; COLOR: darkred; HEIGHT: 150px; BACKGROUND-COLOR:skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>
  70. 70. Html Class Assignments<DIV id=imgObjText><BR>The image, dark red text, and sky blue background make up thecontent of the filtered SPAN.</DIV></SPAN></body></html>
  71. 71. Html Class Assignments Lecture No - 14 Assignment No- 3ObjectiveWrite a DHTML Style to change the style of the border of table as shown belowCommands to be used 1. embedded stylesOutput<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>

×