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)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS, HTML, JavaScript LAB (Good Practical Programs)

Uploaded by

Copyright:

Available Formats

IWT Lab

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

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

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

<h2><a name="C4">Chapter 4</a></h2>

<h2><a name="C10">Chapter 10</a></h2>

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

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

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

Click these three

<h4>An Ordered List:</h4>

<h4>An Unordered List:</h4>

<h4>A background color:</h4>

<h4>A background image:</h4>

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

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

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

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

Create a page that includes the following elements:

• Use a color for the background of your site.

• Leave two blank lines after the paragraph.

Things I Like Assignment

• Create a folder for this assignment (Folder NameThings).

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

Your page needs to include:

• A title bar title

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

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

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

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

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

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

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

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

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

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

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

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

looks like bold

THIS IS CAPITAL SMALL

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

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

Use appropriate background colors.

Java Script Lab

document.write("In External Script");

Write a HTML page with the following content.

Immediate Mode example

Operators – Strict Equals Demo

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

Control Structure Example

if (time < 10)

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

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

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

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

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

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

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

Some JavaScript Functions

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

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

var str="Hello world!";