1. 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>
2. Html Class Assignments
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">
3. Html Class Assignments
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>
4. Html Class Assignments
Lecture No -2
Assignment No-2
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>
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. Html Class Assignments
Lecture No -2
Assignment No-3
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>
7. Html Class Assignments
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>
8. Html Class Assignments
Lecture No - 3
Assignment No- 1
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
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. Html Class Assignments
Lecture No - 4
Assignment No- 1
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>
11. Html Class Assignments
Lecture No - 4
Assignment No- 2
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>
14. Html Class Assignments
Lecture No - 4
Assignment No- 4
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">
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. Html Class Assignments
Lecture No - 4
Assignment No- 5
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">
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. Html Class Assignments
Lecture No - 4
Assignment No- 6
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>
19. Html Class Assignments
Lecture No - 5
Assignment No- 1
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>
20. Html Class Assignments
Lecture No - 5
Assignment No- 2
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
22. Html Class Assignments
Lecture No - 6
Assignment No- 1
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>
23. Html Class Assignments
<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>
24. Html Class Assignments
Lecture No - 6
Assignment No- 2
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>
25. Html Class Assignments
Lecture No - 6
Assignment No- 3
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>
26. Html Class Assignments
Lecture No - 7
Assignment No- 1
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>
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. Html Class Assignments
Lecture No - 7
Assignment No- 2
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>
29. Html Class Assignments
Lecture No - 7
Assignment No- 3
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>
30. Html Class Assignments
Lecture No - 8
Assignment No- 1
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
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 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>
32. Html Class Assignments
Lecture No - 8
Assignment No- 2
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"
33. Html Class Assignments
alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="venus.htm" target ="_blank"
alt="Venus" />
</body>
</map>
</html>
34. Html Class Assignments
Lecture No - 8
Assignment No- 3
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" />
36. Html Class Assignments
Lecture No - 9
Assignment No- 1
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>
39. Html Class Assignments
Lecture No - 9
Assignment No- 2
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
42. Html Class Assignments
Lecture No - 9
Assignment No- 3
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>
45. Html Class Assignments
Lecture No - 10
Assignment No- 1
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>
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. Html Class Assignments
Lecture No - 10
Assignment No- 2
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>
49. Html Class Assignments
Lecture No - 11
Assignment No- 1
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
<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>
51. Html Class Assignments
Lecture No - 11
Assignment No- 2
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
<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. Html Class Assignments
<h3><a href="framec.html" target="showframe">Frame c</h3><br>
</body>
</html>
53. Html Class Assignments
Lecture No - 12
Assignment No- 1
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}
59. Html Class Assignments
Lecture No - 12
Assignment No- 2
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
61. Html Class Assignments
Lecture No -13
Assignment No-1
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>
62. Html Class Assignments
Lecture No - 13
Assignment No- 2
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">
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 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>
64. Html Class Assignments
Lecture No - 13
Assignment No- 3
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
65. Html Class Assignments
Lecture No - 14
Assignment No- 1
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
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. 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>
68. Html Class Assignments
Lecture No - 14
Assignment No- 2
Objective
Write a program display the following effects using DHTML filter property
Commands to be used
1. DHTML filter
Output
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,end
ColorStr=#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>
70. Html Class Assignments
<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>
71. Html Class Assignments
Lecture No - 14
Assignment No- 3
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>