css,html,javascript lab (good practical programs)

IWT Lab

Slide Examples

1.

<html>

<head>

<title>Title of page</title>

</head>

<body>

This is my first homepage. <b>This text is bold</b>

</body>

</html>

2.

<html>

<body bgcolor="0fafff" text="yellow">

<p>

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a

paragraph.

</p>

<p>

This is another paragraph. This is another paragraph. This is another paragraph. This is

another paragraph.

</p>

</body>

</html>

3.

<html>

<body background="background.jpg" text="cyan">

<h3>Look: A background image!</h3>

<p>Both gif and jpg files can be used as HTML backgrounds.</p>

<p>If the image is smaller than the page, the image will repeat itself.</p>

</body>

</html>

4.

<html>

<body>

<h1 align="center">This is heading 1</h1>

<h2>This is heading 2</h2>





<p align="center">Use heading tags only for headings. Don't use them just to make

something bold. Use other tags for that.</p>

<hr size="5" width="75%" align="center">

</body>

</html>

5.

<html>

<body>

<h1 style="color:blue">A heading</h1>

<p style="color:red">A paragraph</p>

</body>

</html>

6.

<html>

<body>

<b>This text is bold</b>

<br>

<strong>

This text is strong

</strong>

<br>

<big>

This text is big

</big>

<br>

<big><big><big> BIGGER TEXT</big></big></big>

<br>

<em>

This text is emphasized

</em>

<br>

<i>

This text is italic

<br>

<small>

This text is small

</small>

<br>

<small><small><small>

This text is smaller

</small></small></small>

<br>

This text contains

<sub>

subscript

</sub>

<br>

This text contains

<sup>

superscript

</sup>

<br>

<del> deleted text</del>

<br>

<s><s> striked using s</s></s>

<br>

<strike> striked text</strike>

<br>

<u> underlined text</u>

</body>

</html>

7.

<html>

<body>

<pre>

This is

preformatted text.

It preserves both spaces

and line breaks.

</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

8.

<html>

<body>

<p>Character entities</p>

<p>&X;</p>

<p> &174; </p>

<p><</p>

<p>

Substitute the "X" with an entity number like "®" or an entity name like "pound" to

see the result.

</p>

</body>

</html>

9.

<html>

<body>

<p>

<a href="lastpage.html">

This text</a> is a link to a page on

this Web site.

</p>

<p>

<a href="http://www.celtem.com/">

Visit Celtem</a> is a link to a page on

the World Wide Web.

</p>

</body>

</html>

10.

<html>

<body>

<p>

<a href="#C4">See also Chapter 4.</a>

<a href="#C10">See also Chapter 10.</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><a name="C10">Chapter 10</a></h2>


<h2>Chapter 11</h2>


<h2>Chapter 12</h2>


<h2>Chapter 13</h2>


<h2>Chapter 14</h2>


<h2>Chapter 15</h2>


<h2>Chapter 16</h2>


<h2>Chapter 17</h2>


</body>

</html>

11.

<html>

<body>

<img border="2" src="goleft.gif" alt="Go Left" width="32" height="32">

<p>

Text-only browsers cannot display images and will only display the text that is specified

in the "alt" attribute for the image. Here, the "alt"-text is "Go Left".</p>

<p>

Note that if you hold the mouse pointer over the image, most browsers will display the

"alt"-text.

</p>

</body>

</html>

12.

<html>

<body>

<p>

You can also use an image as a link:

<a href="lastpage.html">

<img border="0" src="buttonnext.gif" width="65" height="38">

</a>

</p>

</body>

</html>

Click on Next and watch

13.

<html>

<body>

<p>

An image

<img src="hackanm.gif"

align="bottom" width="48" height="48">

in the text

</p>

<p>

An image

<img src ="hackanm.gif"

align="middle" width="48" height="48">

in the text

</p>

<p>

An image


align="top" width="48" height="48">

in the text

</p>

<p>Note that bottom alignment is the default alignment</p>

<p>

An image


width="48" height="48">

in the text

</p>

<p>



An image before the text

</p>

<p>

An image after the text



</p>

</body>

</html>

14.

<html>

<body>

<p>

Click on one of the planets to watch it closer:

</p>

<img src="planets.gif"

width="145" height="126"

usemap="#planetmap">

<map id="planetmap" name="planetmap">

<area shape="rect"

coords="0,0,82,126"

alt="Sun"

href="sun.html">

<area shape="circle"

coords="90,58,3"

alt="Mercury"

href="mercury.html">

<area shape="circle"

coords="124,58,8"

alt="Venus"

href="venus.html">

</map>

<p><b>Note:</b> The "usemap" attribute in the img element refers to the "id" or "name"

(browser dependant) attribute in

the map element, therefore we have added both the "id" and "name" attributes to the map

element.</p>

</body>

</html>

Click these three

points and watch the

output.

15.

<html>

<body>

<h4>An Ordered List:</h4>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

16.

<html>

<body>

<h4>An Unordered List:</h4>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>

17.

<html>

<body>

<table border="1">

<tr>

<td>row 1, cell 1</td>


</tr>

<tr>



</tr>

</table>

</body>

</html>

18.

<html>

<body>

<h4>

This table has a caption,

and a thick border:

</h4>

<table border="6">

<caption>My Caption</caption>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

</body>

</html>

19.

<html>

<body>

<h4>A background color:</h4>

<table border="1"

bgcolor="red">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>A background image:</h4>

<table border="1"

background="rocks.jpg" "width=50%" cellpadding="20" cellspacing="30"

align="center">

<tr>

<td><font color="white" size="24"><b>First</b></font></td>

<td><font color="white" size="24"><b>Row</b></font></td>

</tr>

<tr>

<td><font color="white" size="24"><b>Second</b></font></td>

<td><font color="white" size="24"><b>Row</b></font></td>

</tr>

</table>

</body>

</html>

20.

<html>

<body>

<h4>Cell that spans two columns:</h4>

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

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

</body>

</html>

21.

<Html>

<body>

<form action="" method=post name=form1>

<table align="center" border=1 cellpadding=0 cellspacing=5 width="80%">

<tr> <td>Name</td>

<td><input type="text" name="name1" value="John" size="20"

maxlength="15" ></td>

</tr>

<tr> <td>Password</td>

<td><input type="password" name="password1" size="20" maxlength="12"></td>

</tr>

<tr> <td>Free Mails for</td>

<td><select name="freestuff" multiple size="3">

<option value="I">Investements

<option value="B"selected>EBusiness

<option value="M">Movies

<option value="U">Music

<option value="T">Technical

</select>

</td>

</tr>

<tr> <td>text area</td>

<td><textarea name="freemails" rows =5 cols= 50> This is free mailing service,

you can send your comments by typing in this text box

</textarea></td>

</tr>

<tr> <td>Information by email</td>

<td><input type="checkbox" name="email" checked></td>

</tr>

<tr> <td>EMails </td>

<td><input type="radio" name="period" value="daily"> daily

<input type="radio" name="period" value="weekly">weekly

<input type="radio" name="period" value="monthly">monthly </td>

</tr>

</tr><tr> <td><input type="submit" name=submit1 value="submit register"

id=submit1></td>

<td><input type="reset" name=reset1 value="clear" id=reset1></td>

</tr>

</table>

</form>

</body>

</html>

22.

<html>

<frameset rows="25%,50%,25%">

<frame src="frame_a.html">

<frame src="frame_b.html">

<frame src="frame_c.html">

</frameset>

</html>

23.

<html>

<frameset cols="25%,50%,25%">




</frameset>

</html>

25.

<html>

<frameset rows="50%,50%">


<frameset cols="25%,75%">



</frameset>

</frameset>

</html>

HTML Lab Guide

HTML Assignment 1

Create a page that includes the following elements:

• Web page title (displayed in title bar of browser window): My Favorite Things

• Use a color for the background of your site.

• A bold centered heading (use the largest heading size) of: My Favorite Things

• Include a horizontal rule underneath the heading that is colored, centered, 75%

of the screen’s width and has a size of 8.

• Include the following introductory paragraph, filling in the blanks with the

appropriate information for yourself. Use a font size of 4 and a font face of

Comic Sans MS:

My name is _________ and I am a __________ at Celtem

Academy. This web page lists my favorite foods, favorite

television shows, and favorite movies.

• Leave two blank lines after the paragraph.

• Using a heading size of 2, left align the following heading: My Favorite Foods.

Bold the heading.

• Using an unordered list, include five of your favorite things to eat. Use a colored

font, size of 4, with a font face of your choice and color of your choice.

• Insert two blank lines.

• Using a heading size of 2, left align the following heading: My Favorite TV Shows.

Bold the heading.

• Using an ordered list, list your top five favorite television shows. Use the same

font settings as the unordered list.

• Insert two blank lines.

• Using a heading size of 2 again. Left align the following heading: My Favorite

Movies. Bold the heading.

• Using a definition list, list your five favorite movies and include a description of

why you liked the movie. Underline the name of each movie. Use the same font

settings as the other two lists.

• Include three images on your page: an image representing each of your favorite

things. Resize the images so that they fit appropriately on the page and are

displayed in one row at the bottom of your web page.

• Save the page as HTML1.html

HTML Assignment – 2

Things I Like Assignment

Directions: Create a table similar to the one below that lists and displays pictures of five things you like. The table should be 50% of the screen's width and centered.

• Create a folder for this assignment (Folder NameThings). • Store three images in a folder (images). • Create a 4 row, 2 column Use a table border size of 4. • Use rowspan and colspan attribute wherever required. • Use the largest heading size for the table's title. Center the contents of

each table cell. • Use a heading size of 3 for the names of the items you like.

THINGS I LIKE

Velleyappam

My Pet

Butterflies

scorpio

Ice Cream

HTML Assignment – 3

My Friend Assignment

Directions: Within your HTML folder create a folder called "My Friend".

Create a web page based on your friend —Save your page using the person’s

last name as the file name (remember to include a .html file extension).

Your web page must contain the following sections:

• A “Biography” section that includes at least a paragraph of

biographical information.

• An “Accomplishments” section that outlines the person’s major life

accomplishments using an unordered list (include at least five

accomplishments).

• A “Learn More About….” section that includes hyperlinks to three

HTML pages that contain additional information about your friend.

Your page needs to include:

• A title bar title

• An image (or images) using the border and ALT text attributes

• Use of heading tags

• At least one type of list (ordered, unordered, or definition)

• Font attributes including size, face, and color

• Hypertext links

Creating a Frameset

1. Create a frameset that will display your “heading.html” page in the

“Top” frame, the “navigation.html” page in the “Left” frame, and

the “main.html” page initially displayed in the “Main” frame. Save

the frameset as “index.html” within your "All About Me" folder. Use

the “index.html” file created in class as the example for the frameset.

Add hyperlink tags to your button images in the “navigation.html” page

so that these pages open within the “Main” frame (Using the attribute of

target=”Main” within the link tag.)

Example: <a href = “biography.html” target = “Main”>

RESIZING: (1) You may need to change the percentage values of the rows and/or

columns so that the frameset displays the pages correctly.

(2) You may also need to change the image size of your title graphic or

buttons by using the width and height attributes within the <img src>

tag.

CSS Lab

Slide programs

1.

<html>

<head>

<style>

h3{

color:gold;

font-size:100pt;

}

HR{color:red}

P{margin-right:50px}

P{margin-left:35px}

</style>

</head>

<body>

<h3> This is heading 3 with CSS style</h3>

<hr>

<p> This paragraph starts from 35th pixel.

Its left margin is set to 35 pixels and its right margin is set to 50 pixels.

Text in this paragraph will leave 50 pixel space on right and 35 pixel space on left.

</body>

</html>

2.

<html>

<head>

<LINK REL="stylesheet" TYPE="text/css" HREF="mystyle.css">

</head>

<body>


</body>

</html>

3.

<html>

<head>

<style>

h3{

color:gold;

font-size:100pt;

}

HR{color:red}

P{margin-right:50px}

P{margin-left:35px}

</style>

</head>

<body>


<hr>

<p> This paragraph starts from 35th pixel.

Its left margin is set to 35 pixels and its right margin is set to 50 pixels.

Text in this paragraph will leave 50 pixel space on right and 35 pixel space on left.

<P style="color:green; margin-right: 10px;margin-left:20;"><b>

Different para</b>

</P>

</body>

</html>

4.

<html>

<head>

<style>

h1,h2,h3,h4,h5,h6 { color: yellow }

P B { color: yellow }

</style>

</head>

<body bgcolor="blue">

<h1> Heading 1</h1>

<p> Testing para without bold

<b> This is bold text

</p>

<p> Normal paragraph watch for color

<h4> This heading 4>

</body>

</html>

5.

<html>

<head>

<style>

p.left { text-align: left;

color:red;

}

p.center { text-align: center;

color:blue;

}

p.right { text-align: right;

color: brown;

}

</style>

</head>

<body>

<p class=right> <b>This is an example of class right</b>

<p class=center> <b>This is an example of class center</b>

<p class= left> <b>This is an example of class left</b>

<h1 class=right> heading on right

</body>

</html>

6.

<html>

<head>

<style>

.left { text-align: left;

color:red;

}

.center { text-align: center;

color:blue;

}

.right { text-align: right;

color: brown;

}

</style>

</head>

<body>





</body>

</html>

7.

<html>

<head>

<style>

p#para1 {

text-align: center;

color: green

}


color: blue;

}


color: brown;

}

</style>

</head>

<body>

<p id=para1> <b>This is an example of id center</b></p>



<h1 id=para1> heading on right

</body>

</html>

8.

<html>

<head>

<style>

#para1 {

text-align: center;

color: green

}


color: blue;

}


color: brown;

}

</style>

</head>

<body>

<p id=para1> <b>This is an example of id center</b></p>



<h1 id=para1> heading on right

</body>

</html>

9.

<html>

<head>

<style>

SPAN.logo {color: white; background-color: black;}

</style>

</head>

<body>

<P>Welcome to the <SPAN CLASS="logo"> Wonder Software</SPAN>

Web site</P>

<h1> heading on right<SPAN class="logo"> See the change</span> now</h1>

</body>

</html>

10.

<html>

<head>

<style>

DIV.logo {color: white; background-color: black;}

</style>

</head>

<body>

<P>Welcome to the <DIV CLASS="logo"> Wonder Software</DIV>

Web site</P>

<h1> heading on right<DIV class="logo"> See the change</DIV> now</h1>

</body>

</html>

11.

<html>

<head>

<style>

body { background: #000000 url('mercury.jpg')

no-repeat fixed center }

.fore{color="orange"}

</style>

</head>

<body>

<P class="fore">Welcome to the wonder Software

Web site</P>

<h1 class="fore"> heading on right See the change now</h1>

</body>

</html>

12.

<html>

<head>

<style>

body { background: #000000 url('mercury.jpg')

repeat-y fixed}

.fore{color="orange"}

</style>

</head>

<body>

<P class="fore">Welcome to the wonder Software

Web site</P>

<h1 class="fore"> heading on right See the change now</h1>

</body>

</html>

13.

<html>

<head>

<style>


color:red;

text-decoration:inderline;

text-transform:uppercase;

}

p.center { text-align: center;

color:blue;

}


color: brown;

}

</style>

</head>

<body>





</body>

</html>

14.

<html>

<head>

<style type="text/css">

p.fontstyle {font-style:italic;}

p.fontvar{font-variant:small-caps;}

p.fontfamily {font-family:"comic sans ms", arial;}

p.fontweight {font-weight:bold;}

p.fontsize {font-size:xx-small;}

h2

{

letter-spacing:20pt;

font-size:90pt;

text-align:center;

color:gold;

}

</style>

</head>

<body>

<h2> Celtem</h2>

<p class="fontfamily">differnet font names are: comic sans or Times Roman or

arial???</p>

<p class="fontstyle">Italic letters</p>

<p class="fontweight">looks like bold</p>

<p class="fontsize">This is small</p>

<p class="fontvar"> This is capital small</p>

</body>

</html>

Celtem

differnet font names are: comic sans or Times Roman or arial???

Italic letters

looks like bold

This is small

THIS IS CAPITAL SMALL

15.

<html>

<head>

<style>

h2{

text-align:center;

border-width:thick;

border-color:red;

Border-style:groove;

margin-left:200px;

margin-right:200px;

}

</style>

<head><body>

<h2>text with box around it</h2>

</body>

</html>

Excercises

1. create a general class for color which can be applied to any element in an external CC

file.

2. create an embedded style for all table cells to have gray and cyan color in alternate rows

as background color.

3. Create an HTML page which uses both the styles.

4. Create an HTML page where all the h1 header will have 10 px spacing, green color. All

paragraphs will use gold color for all bold text and red color for all italic text.

5. Create a web page where all header are boxed with solid or ridge border. All the text is

bordered with black color border.

6. create a webpage which takes user input to register user with following fields

First Name, Last Name, age, Sex, Address, city, State, pin, telephone No., mobile No.,

email-id. It should also provide selection for area of interest for free newsletter as:

Software development methodologies

Java Development

.Net development

Fashion

Literature

Music

News

Politics.

First Name, Last Name, age, sex should be one Box

Address, city state, pin should be in another box

Tel No , mob no and email in another box and selections in another

Use appropriate background colors.

Java Script Lab

1. Embedding a script in HTML page.

<html>

<body>

<script type="text/javascript">

document.write("Hello World!");

</script>

</body>

</html>

2.

xxx.js

document.write("In External Script");

Save the above line in xxx.js file

Write a HTML page with the following content.

<html>

<head>

</head>

<body>

<script src="xxx.js">

</script>

<p>

The actual script is in an external script file called "xxx.js".

</p>

</body>

</html>

3.

Immediate Mode example

<html>

<head>

<script language="JavaScript">

document.write("<h1> Script in Head</h1>");

</script>

</head>

<body>


document.write("<h1> Script in body</h1>");

</script>

</body>

</html>

4.

Deferred Mode Example

<html>

<head>

<title> Example of Deferred Mode </title>


function test()

{

alert("Hi, This is function");

}

</script>

</head>

<body>

<form>

<input type="button" value="Click" onClick="test()">

</form>

</body>

</html>

5.

Variables Demo

<html>

<head>

<script language="javascript">

x=10;

y="hello";

b=false;

document.writeln("<h1> x= "+x+"</h1>");

document.writeln("<h1> y= "+y+"</h1>");

document.writeln("<h1> b= "+b+"</h1>");

</script>

</head>

<body>


y=20;

document.writeln("<h1> y= "+y+"</h1>");

</script>

</body>

</html>

6.

Operators – Strict Equals Demo

<html>

<head>

</head>

<body>


x=25;

y="25";

document.writeln("<b> x === y "+ (x===y)+"</b><br>");

document.writeln("<b> x == y "+ (x==y)+"</b><br>");

document.writeln("<b> x !== y "+ (x!==y)+"</b><br>");

document.writeln("<b> x != y "+ (x!=y)+"</b><br>");

</script>

</body>

</html>

7.

Control Structure Example

<html>

<body>


var d = new Date();

var time = d.getHours();

if (time < 10)

{

document.write("<b>Good morning</b>");

}

else

{

document.write("<b>Good day</b>");

}

</script>

<p>

This example demonstrates the If...Else statement.

</p>

<p>

If the time on your browser is less than 10,

you will get a "Good morning" greeting.

Otherwise you will get a "Good day" greeting.

</p>

</body>

</html>

8.

<html>

<body>


var d = new Date();

var time = d.getHours();

if (time<10)

{

document.write("<b>Good morning</b>");

}

else if (time>=10 && time<16)

{

document.write("<b>Good day</b>");

}

else

{

document.write("<b>Hello World!</b>");

}

</script>

<p>

This example demonstrates the if..else if...else statement.

</p>

</body>

</html>

9.

<html>

<body>


for (i = 0; i <= 5; i++)

{

document.write("The number is " + i);

document.write("<br />");

}

</script>

<p>Explanation:</p>

<p>This for loop starts with i=0.</p>

<p>As long as <b>i</b> is less than, or equal to 5, the loop will continue to run.</p>

<p><b>i</b> will increase by 1 each time the loop runs.</p>

</body>

</html>

10.

<html>

<body>


for (i = 1; i <= 6; i++)

{

document.write("<h" + i + ">This is header " + i);

document.write("</h" + i + ">");

}

</script>

</body>

</html>

11.

<html>

<body>


i=0;

while (i<=5)

{

document.write("The number is " + i);


i++;

}

</script>

<p>Explanation:</p>

<p><b>i</b> is equal to 0.</p>

<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>

<p><b>i</b> will increase by 1 each time the loop runs.</p>

</body>

</html>

12.

<html>

<body>


var x;

var mycars = new Array();

mycars[0] = "Saab";

mycars[1] = "Volvo";

mycars[2] = "BMW";

for (x in mycars)

{

document.write(mycars[x] + "<br />");

}

</script>

</body>

</html>

13.

<html>

<head>


function disp_alert()

{

alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!");

}

</script>

</head>

<body>

<input type="button" onclick="disp_alert()" value="Display alert box" />

</body>

</html>

14.

<html>

<head>


function disp_confirm()

{

var r=confirm("Press a button");

if (r==true)

{

document.write("You pressed OK!");

}

else

{

document.write("You pressed Cancel!");

}

}

</script>

</head>

<body>

<input type="button" onclick="disp_confirm()" value="Display a confirm box" />

</body>

</html>

15.

<html>

<head>


function disp_prompt()

{

var name=prompt("Please enter your name","Nancy");

if (name!=null && name!="")

{

document.write("Hello " + name + "! How are you today?");

}

}

</script>

</head>

<body>

<input type="button" onclick="disp_prompt()" value="Display a prompt box" />

</body>

</html>

16.

JavaScript Functions

<html>

<head>


function myfunction(txt)

{

alert(txt);

}

</script>

</head>

<body>

<form>

<input type="button"

onclick="myfunction('Good Morning!')"

value="In the Morning">

<input type="button"

onclick="myfunction('Good Evening!')"

value="In the Evening">

</form>

<p>

When you click on one of the buttons, a function will be called. The function will alert

the argument that is passed to it.

</p>

</body>

</html>

17.

Some JavaScript Functions

<html>

<body>


var str="How are you doing today?";

document.write(str.split(" ") + "<br />");

document.write(str.split("") + "<br />");

document.write(str.split(" ",3));

</script>

</body>

</html>

18.

<html>

<body>


var str="Hello world!";

document.write(str.indexOf("Hello") + "<br />");

document.write(str.indexOf("World") + "<br />");

document.write(str.indexOf("world"));

</script>

</body>

</html>

19.

<html>

<body>



document.write(str.substring(3,7));

</script>

</body>

</html>

20.

<html>

<body>



document.write(str.substr(3,7));

</script>

</body>

</html>

21.

<html>

<body>


var txt="Hello World!";

document.write("<p>Big: " + txt.big() + "</p>");

document.write("<p>Small: " + txt.small() + "</p>");

document.write("<p>Bold: " + txt.bold() + "</p>");

document.write("<p>Italic: " + txt.italics() + "</p>");

document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>");

document.write("<p>Fixed: " + txt.fixed() + "</p>");

document.write("<p>Strike: " + txt.strike() + "</p>");

document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>");

document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>");

document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>");

document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>");

document.write("<p>Subscript: " + txt.sub() + "</p>");

document.write("<p>Superscript: " + txt.sup() + "</p>");

document.write("<p>Link: " + txt.link("http://www.w3schools.com") + "</p>");

</script>

</body>

</html>

22.

<html>

<body>


var d = new Date();

document.write(d.getHours());

document.write(".");

document.write(d.getMinutes());


document.write(d.getSeconds());


document.write(d.getMilliseconds());

</script>

</body>

</html>

23.

<html>

<body>


var arr = new Array(3);

arr[0] = "Jani";

arr[1] = "Hege";

arr[2] = "Stale";

document.write(arr.join() + "<br />");

document.write(arr.join("."));

</script>

</body>

</html>

24.

<html>

<body>



arr[0] = "Jani";

arr[1] = "Tove";

arr[2] = "Hege";

var arr2 = new Array(3);

arr2[0] = "John";

arr2[1] = "Andy";

arr2[2] = "Wendy";

document.write(arr.concat(arr2));

</script>

</body>

</html>

25.

<html>

<body>



arr[0] = "Jani";

arr[1] = "Hege";

arr[2] = "Stale";

arr[3] = "Kai Jim";

arr[4] = "Borge";

arr[5] = "Tove";

document.write(arr + "<br />");

document.write(arr.sort());

</script>

</body>

</html>

26.

<HTML>

<BODY>

<FORM name="Winform">

<INPUT TYPE="button" value="Open new window"

onClick="window1=window.open('documentcolor.html','Background','toolbar=yes,status=

yes,width=500,height=400');"><BR>



<INPUT TYPE="button" value="Close BackgroundColor window"

onClick="window1.close();"><BR>

<INPUT type=button value="Close First window" onClick="window.close();">

</form>



</BODY>

</HTML>

27.

<html>

<body>


var browser=navigator.appName;

var b_version=navigator.appVersion;

var version=parseFloat(b_version);

document.write("Browser name: "+ browser);


document.write("Browser version: "+ version);

</script>

</body>

</html>

28.

<html>

<head>


function goBack()

{

window.history.back()

}

</script>

</head>

<body><input type="button" value="Back" onclick="goBack()" />

</body>

</html>

29.

<html>

<head>


function replaceDoc()

{

window.location.replace("http://www.w3schools.com")

}

</script>

</head>

<body><input type="button" value="Replace document"

onclick="replaceDoc()" /></body>

</html>

30.

html>

<head>


function bgChange(bg)

{

document.body.style.background=bg;

}

</script>

</head>

<body>

<b>Mouse over the squares and the background color will change!</b>

<table width="300" height="100">

<tr>

<td onmouseover="bgChange('red')"

onmouseout="bgChange('transparent')"

bgcolor="red">

</td>

<td onmouseover="bgChange('blue')"


bgcolor="blue">

</td>

<td onmouseover="bgChange('green')"


bgcolor="green">

</td>

</tr>

</table>

</body>

</html>

31.

<html><head>


function changeColor()

{

for(i=0;i<document.form1.radioColor.length;i++)

{

if(document.form1.radioColor[i].checked == true)

{

document.bgColor=document.form1.radioColor[i].value;

}

}

}

</script>

</head><body>

<form name="form1">

<input type="radio" name="radioColor" value="red"

onClick="changeColor()">Red<br>

<input type="radio" name="radioColor" value="green"

onClick="changeColor()">Green<br>

<input type="radio" name="radioColor" value="blue"

onClick="changeColor()">Blue<br>

</form>

</body>

</html>

32.

<html><head>


red=0; green=0; blue=0;

function mixColor()

{

if(document.form1.check1.checked==true)

red=255;

else

red=0;


green=255;

else

green=0;


blue=255;

else

blue=0;

colornew="rgb("+red+","+green+","+blue+")"

//rgb is a function whcih take 3 integer arguments, the value between 0 and

255.

document.bgColor=colornew

}

</script>

</head><body>

<form name="form1">

<input type="checkbox" name="check1" value="red"

onClick="mixColor()">Red<br>

<input type="checkbox" name="check2" value="green"

onClick="mixColor()">Green<br>

<input type="checkbox" name="check3" value="blue"

onClick="mixColor()">Blue<br>

</form>

</body></html>

33.

Form Validation

Put this code in valid.js

/* function for checking age is number betbeen 10 and 100 */

function checkAge(age)

{

if(!(isFinite(age))){ // not isFinite

return false;

}

age1=parseInt(age);

if((age1>9) && (age1 <=100))

{

return true;

}

else

{

return false;

}

}

/* function for checking name is a string with minimum 5 characters */

function checkName(uname)

{

if((isFinite(uname))){

return false;

}

if( uname.length>2){

return true;

}

else

{

return false;

}

}

Put this code in .html file

<html>

<head>

<style>

td{ font-size:15pt;}

</style>

<script src="valid.js">

</script>


function check()

{

namevalidflag=checkName(document.form1.txtname.value)

if(namevalidflag==false)

{

alert("Please enter a proper name!..");

document.form1.txtname.select();

document.form1.txtname.focus();

return false;

}

agevalidflag=checkAge(document.form1.txtage.value);

if(agevalidflag==false)

{

alert("Please enter a proper age!..");

document.form1.txtage.select();

document.form1.txtage.focus();

return false;

}

// validate email here

return true;

}

</script>

</head>

<body>

<center><h1> Enter Details</h1></center>

<form name="form1">

<table width="75%" align="center" border="0" bgcolor="cyan">

<tr> <td>Name (*)</td> <td> <input type="text" name="txtname"

maxlength="25" size="25"></td></tr>

<tr> <td>Age (*)</td> <td> <input type="text" name="txtage"


<tr> <td>Email</td> <td> <input type="text" name="txtemail"


<tr><td> (*) mandatory fields</td><td><input type="submit"

name="button1" value="submit " onClick="return check()"></td></tr>

</table>

</form>

</body>

</html>

Excecises

Add an email validation to the previous form.

create a webpage to display a textbox to take a numeric input say n. Create a table with n

rows using javascript to display natural numbers from 1 to n.

css,html,javascript lab (good practical programs)

Documents