Learning html & dhtml

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">
</p>
<p> <b> Center Alignment </b></p>
<p align="center">
</p>
<body>
</html>


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>
</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>
</body>
</html>


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>


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>


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


<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>

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>


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>

Lecture No - 4
Assignment No- 3
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&n
bsp;   p    l     e&
nbsp;   o   f    
c    h    a    r&nb
sp;    a     c   &n
bsp;t    e    r    
s    p    a    c&nb
sp;   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>


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">


<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">
</ol>
Starts a numbered list, using capital roman numbers.
<ol type="I">
</ol>
<ol type="I" start="7">
</ol>
</body>
</body>
</html>


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">


</ul>
Starts a bulleted list using circles as bullets:
<ul type="circle">
</ul>
Starts a bulleted list using squares as bullets:
<ul type="square">
</ul>
</body>

</html>


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>


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>


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


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


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>


<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>


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>


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>


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>


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


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

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>


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
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>


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


<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>


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"


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


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" />


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>


</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>
</tr>
<tr>
</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>


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


<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>


</tr>
<tr>
<td align="left">Make-Up</td>
</tr>
<tr>
<td align="left">Food</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>

</body>
</html>


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>


<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>
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>
Adobe Photoshop 7.0</td>
<td align="center">
1
</td>
<td align="right">
579.95 
</td>
579.95 
</td>
</tr>
<tr>


<td>
HP PhotoSmart 7550 Printer</td>
<td align="center"> 1</td>
<td align="right">
299.99 
</td>
299.99 
</td>
</tr>
<tr>
<td>  USB Device Cable</td>
<td align="center"> 1</td>
<td align="right">
5.49 
</td>
5.49 
</td>
</tr>
<tr>
<td colspan="3" rowspan="2" bgcolor="silver">     
</td>
<td align="left" bgcolor="silver">
Shiping :</td>
50.00 
</td>
</tr>
<tr>
<td align="left" bgcolor="silver">
Sales Tax :</td>
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>


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>


<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>


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>


<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>


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>


</body>
</html>


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>


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


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}


</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>


</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>


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


<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>


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>


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">


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


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


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;
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 {
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 {
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>


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


<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>

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>

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>

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>

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>



</body>
</html>


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>

Learning html & dhtml

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Learning html & dhtml

Similar a Learning html & dhtml (20)

Learning html & dhtml