10CSL78 Web Programming Laboratory
VII sem ISE
QMP 7.1 D/D
Channabasaveshwara Institute of Technology
(An ISO 9001:2008 Certified Institution)
NH 206 (B.H. Road), Gubbi, Tumkur – 572 216. Karnataka.
DEPARTMENT OF INFORMATION SCIENCE AND ENGINEERING
SYLLABUS
WEB PROGRAMMING LAB
Sub Code: 10CSL78
Hrs/ Week: 03
Total Hrs. 42
IA Marks
: 25
Exam Hours: 03
Exam Marks: 50
1. Develop and demonstrate a XHTML file that includes Javascript script for the following
problems:
a) Input: A number n obtained using prompt
Output: The first n Fibonacci numbers
b) Input: A number n obtained using prompt
Output: A table of numbers from 1 to n and their squares using alert
2. a) Develop and demonstrate, using Javascript script, a XHTML document that
collects
the USN ( the valid format is: A digit from 1 to 4 followed by two upper-case characters
followed by two digits followed by two upper-case characters followed by three digits; no
embedded spaces allowed) of the user. Event handler must be included for the form
element that collects this information to validate the input. Messages in the alert windows
must be produced when errors are detected.
b) Modify the above program to get the current semester also (restricted to be a number
from 1 to 8).
3. a) Develop and demonstrate, using Javascript script, a XHTML document that contains
three short paragraphs of text, stacked on top of each other, with only enough of each
showing so that the mouse cursor can be placed over some part of them. When the cursor
is placed over the exposed part of any paragraph, it should rise to the top to become
completely visible.
b) Modify the above document so that when a paragraph is moved from the top stacking
position, it returns to its original position rather than to the bottom.
4. a) Design an XML document to store information about a student in an engineering
college affiliated to VTU. The information must include USN, Name, Name of the College,
Brach, Year of Joining, and e-mail id. Make up sample data for 3 students. Create a CSS
style sheet and use it to display the document.
b) Create an XSLT style sheet for one student element of the above document and use it to
create a display of that element.
5. a) Write a Perl program to display various Server Information like Server Name, Server
Software, Server protocol, CGI Revision etc.
b) Write a Perl program to accept UNIX command from a HTML form and to display the
output of the command executed.
6. a) Write a Perl program to accept the User Name and display a greeting message
randomly chosen from a list of 4 greeting messages.
Dept. of ISE, CIT, Gubbi
1
10CSL78 Web Programming Laboratory
VII sem ISE
b) Write a Perl program to keep track of the number of visitors visiting the web page and to
display this count of visitors, with proper headings.
7. Write a Perl program to display a digital clock which displays the current time of the
server.
8. Write a Perl program to insert name and age information entered by the user into a table
created using MySQL and to display the current contents of this table.
9. Write a PHP program to store current date-time in a COOKIE and display the ‘Last visited
on’ date-time on the web page upon reopening of the same page.
10. Write a PHP program to store page views count in SESSION, to increment the count on
each refresh, and to show the count on web page.
11. Create a XHTML form with Name, Address Line 1, Address Line 2, and E-mail text fields.
On submitting, store the values in MySQL table. Retrieve and display the data based on
Name.
12. Build a Rails application to accept book information viz. Accession number, title,
authors, edition and publisher from a web page and store the information in a database and
to search for a book with the title specified by the user and to display the search results
with proper headings.
Note: In the examination each student picks one question from the lot of all 12
questions.
Dept. of ISE, CIT, Gubbi
2
10CSL78 Web Programming Laboratory
VII sem ISE
BASIC HTML TAGS
Paragraph Tags
Tag: <p> </p> (Has a closing tag) </> means closed.
What it Does: Puts 2 breaks between lines of text.
Attributes:
Align=left, right, center
Code Example:
<p align=left>This is a paragraph tag</p>
<p align=left >This is a paragraph tag</p>
What it looks like:
This is a paragraph tag.
This is a paragraph tag.
Break Tags
Tag: <br> (Has no closing tag)
What it Does: Puts a one line break between text.
Code Example:
This is a break tag. <br>
This is another break tag.
What it looks like:
This is a break tag.
This is another break tag.
Bold Tags
Tag: <b></b>(Has closing tag) </> means closed.
What it Does: Creates bold text
Code Example: <b>this is bold. </b>
What it looks like:
this is bold.
Italic Tags
Tag: <i></i>(Has closing tag) </> means closed.
What it Does: Creates Italic text.
Code Example: <i> This text is italic. </i>
What it looks like:
This text is italic.
Unordered List Tags
Tag: <ul> </ul> (Has closing tag) </> means closed.
What it Does: The UL tag lists items using bullets. Also indents your list tags.
Code Example:
<ul>This is a ul tag</ul>
What it looks like:
This is a ul tag.
List Tags
Tag: <li> </li> (Has closing tag) </> means closed.
What it Does: Creates a bulleted list.
Code Example:
<li>Apple </li>
<li>Orange</li>
<li>Peach</li>
What it looks like:
Apple
Orange
Peach
Hyperlink Tag
Dept. of ISE, CIT, Gubbi
3
10CSL78 Web Programming Laboratory
VII sem ISE
Tag: <a href="URL"></a> Has closing tag) </> means closed.
What it does: Creates a hyperlink to another page.
Attributes:
Target=”new” This opens up a new window.
Code Example:
<a href=”doc.html”>document</a>
What it looks like:
Document
To create a “hotlink” email reference:
<a href=mailto:janiceg@projecta.com>janiceg@projecta.com</a>
Table Tags
Tag: <table></table> Creates a table
Tag: <tr></tr> Sets off each row in a table
Tag: <td></td> Sets off Each cell in a table>
Attributes:
align=left, right, center
border=x
cellpadding=x
cellspacing=x
width=
height=
How these work and look: All these tags must be closed. </>
<table border=1 cellpadding=2 cellspacing=2>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
How it looks:
Cell 1 Cell 2
Image Tags
Tag: <img src=”imagename.gif” alt=”description”> there is no closing tag
Attributes:
alt=”description”
Align=right or left
Border=0
What it does: Inserts an image into the page. Always have an alt tag in your images. Alt
tags are part of priority
one ADA compliance. The site will not be compliant without this tag.
Code Example: This is an image <img src=”images/arrow.gif” alt=”arrow”>.
What it looks like: This is an image .
1. Always use alt tags (alternative text) in images
2. Close your tags </>
Email Tags
<a href=”mailto:gordon@sno-cat.com” class=”links” >Gordon@sno-cat.com </a>
Image Tags with locations
To insert an image into text area
<img src=”images/imagemanager/filename.gif(jpg)”alt=”Title of Image”>
To place this in a left, center or right position you would:
<center><img src=”images/imagemanager/filename.gif(jpg)”alt=”Title of
Image”></center>
Dept. of ISE, CIT, Gubbi
4
10CSL78 Web Programming Laboratory
VII sem ISE
JAVASCRIPT BASICS
1.How to put a JavaScript code into an HTML page?
• Use the <script> tag (also use the type attribute to define the scripting language)
<html>
<head>
<script type="text/javascript">
...
</script>
</head>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>
2. Where Do You Place Scripts?
• Scripts can be in the either <head> section or <body> section
• Convention is to place it in the <head> section
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
3. Referencing External JavaScript File
• Scripts can be provided locally or remotely accessible JavaScript file using src attribute.
<html>
<head>
<script language="JavaScript"
type="text/javascript"
src="http://somesite/myOwnJavaScript.js">
</script>
<script language="JavaScript"
type="text/javascript"
src="myOwnSubdirectory/myOwn2ndJavaScript.js">
</script>
4.JavaScript Variable
• You create a variable with or without the var statement
var strname = some value
strname = some value
• When you declare a variable within a function, the variable can only be accessed within
that function
• If you declare a variable outside a function, all the functions on your page can access it
• The lifetime of these variables starts when they are declared, and ends when the page is
closed.
Dept. of ISE, CIT, Gubbi
5
10CSL78 Web Programming Laboratory
VII sem ISE
5.JavaScript Popup Boxes
• Alert box
> User will have to click "OK" to proceed
> alert("sometext")
• Confirm box
> User will have to click either "OK" or "Cancel" to proceed
> confirm("sometext")
• Prompt box
> User will have to click either "OK" or "Cancel" to proceed after
entering an input value
> prompt("sometext","defaultvalue")
DIFFERENCE BETWEEN XHTML AND XML
Dept. of ISE, CIT, Gubbi
6
10CSL78 Web Programming Laboratory
VII sem ISE
SIMPLE PERL COMMANDS
#!/usr/bin/perl
This command tells the operating system where the perl executable is located. The
path may change from system to system. Use the whereis command in UNIX to
locate it. This feature only works for UNIX based operating systems.
print
Prints list of arguments that it is passed.
print "Enter your name", "->";
In this example, two strings are being passed to the print command. You could have
just as easily used print "Enter your name ->";
<STDIN>
The read function in perl is implemented using a < sign and a > sign. The variable in
uppercase in the middle is referred to as the File Handle. A file handle connects the
read function to an input stream. STDIN is the input stream associated with standard
input.
Standard input by default comes from your keyboard.
$name = <STDIN>;
This statement reads from standard input into a scalar variable named name.
chop
The chop function in perl is used to indiscriminately remove the last character from a
variale.
chop($name);
This statement removes the last character in the variable $name
Scalar Variables
Scalar variables in perl stored one piece of information that is not type specific
meaning it could be a string or a number. They are created as you see in the
example above using a simple assignment into a variable name preceded by the $.
print "My name is $name\n";
This command will print the words 'My name is' and the value of the variable $name
Dept. of ISE, CIT, Gubbi
7
10CSL78 Web Programming Laboratory
VII sem ISE
if
The if statement is used on a condition to change the flow of your program.
if($name eq "Patti")
{
print "It's Patti\n";
} else
{
print "It's someone else\n";
}
This command will print 'It's Patti' wherever the value stored in $name is Patti.
Otherwise, it will print 'It's someone else'. The else statement is optional, but will
only be executed when the condition in the if evaluates to false. If it evaluates to
true, the block of code immediately following the if statement will be executed. The
eq operator is the equality operator for string comparisons.
while
The while statement is used to iterate through some code time and time again.
while($num < 5)
{
print "The number is ", $num, "\n";
$num = $num + 1;
}
This command will print 'The number is' and num's value so long as the number is
less than 5.
for
The for statement is also used to iterate through some code time and time again.
Different from the while loop the number of iterations are known.
for($i = 0; $i < 5; $i++)
{
print "The number is ", $i, "\n";
}
This command will print 'The number is 0' all the way to 4. The for statement
consists of the initialization of a counter variable, a test for that variable and a
Dept. of ISE, CIT, Gubbi
8
10CSL78 Web Programming Laboratory
VII sem ISE
modification of the variable. As long as the condition is true, the loop will continue to
iterate.
continue
The continue statement is used to stop the current iteration and go on to the next
iteration
while($num < 5)
{
if($num % 2 == 1)
{
continue;
}
print "The number is ", $num, "\n";
$num = $num + 1;
}
This command will print 'The number is' and the even values so long as the number
is less than 5. We are using the numerical comparison operators == and < and the
modulus or remainder operator %. Other numeric operators include <=, >=, >, *,
/, +, -
Note: The semicolon is used as a separator of statements in perl and should be at the end of all
your commands except for the if, while, and for statements
Executes within browser window
JAVASCRIPT
YES
NO
PERL
NO
Requires HTTP to execute
YES
NO
NO
YES
YES
NO
Can update files on server
NO
YES
YES
Can use MySQL
NO
YES
YES
Can obtain files from other domains on
the internet.
YES
YES
YES
Source code within web page file
Dept. of ISE, CIT, Gubbi
PHP
9
10CSL78 Web Programming Laboratory
VII sem ISE
1. Develop and demonstrate a XHTML file that includes Javascript script for the following
problems:
a) Input: A number n obtained using prompt
Output: The first n Fibonacci numbers
<?xml version = "1.0" encoding = "utf-8" ?>
<html xmlns = "http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript">
var fib1=0,fib2=1,fib=0;
var num = prompt("Enter a number : \n", "");
if(num!=null && num>0)
{
document.write("<h1>" + num + " Fibonocci are <br></h1>");
if(num==1)
document.write("<h1> "+ fib1 + "</h1>");
else
document.write("<h1>" + fib1 + " " + fib2 + "</h1>");
for(i=3;i<=num; i++)
{
fib= fib1 + fib2;
document.write("<h1> " + fib + "</h1>");
fib1=fib2;
fib2=fib;
}
}
else
alert("No Proper Input");
</script>
</body></html>
Dept. of ISE, CIT, Gubbi
10
10CSL78 Web Programming Laboratory
VII sem ISE
1. Develop and demonstrate a XHTML file that includes Javascript script for the following
problems:
b) Input: A number n obtained using prompt
Output: A table of numbers from 1 to n and their squares using alert
<?xml version = "1.0" encoding = "utf-8" ?>
<html xmlns = "http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript">
var num = prompt("Enter a number : \n", "");
if(num >0 && num !=null)
{
msgstr="Number and its Squares are \n";
for(i=1;i <= num; i++)
{
msgstr = msgstr + i + " - " + i*i + "\n";
}
alert(msgstr)
}
else
alert("No input supplied");
</script>
</body>
</html>
Dept. of ISE, CIT, Gubbi
11
10CSL78 Web Programming Laboratory
VII sem ISE
2. a) Develop and demonstrate, using Javascript script, a XHTML document that
collects
the USN ( the valid format is: A digit from 1 to 4 followed by two upper-case characters
followed by two digits followed by two upper-case characters followed by three digits; no
embedded spaces allowed) of the user. Event handler must be included for the form
element that collects this information to validate the input. Messages in the alert windows
must be produced when errors are detected.
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml/">
<head><title>USN.html</title>
<script type="text/javascript">
function checkusn()
{
var str=document.getElementById("usn");
var result=str.value.search(/^[1-4]{1}[A-Z]{2}\d{2}[A-Z]{2}\d{3}$/);
if(result != 0)
{
alert("Entered usn("+str.value+") is not in correct form. The correct
pattern is :ICG09CS100");
}
else
{
alert("Entered usn("+str.value+") is in the correct form.");
}
}
</script>
</head>
<body style="background-color:yellow">
<h3 style="text-align:center;color:red"> Program includes XHTML document to
collect the Student-Information</h3>
<h3 style="color:purple">Student Information </h3>
<form name="my form">
<p style="color:purple"> Enter your USN:</p>
<input type="text" id="usn" size=15/>
<br/>
<br/>
<input type="button" onclick="checkusn()" value="Submit"/>
<input type = "reset" value= "Reset" />
<br/>
</form>
</body>
</html>
Dept. of ISE, CIT, Gubbi
12
10CSL78 Web Programming Laboratory
VII sem ISE
Output
Dept. of ISE, CIT, Gubbi
13
10CSL78 Web Programming Laboratory
VII sem ISE
b) Modify the above program to get the current semester also (restricted to be a number
from 1 to 8).
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml/">
<head><title>USN.html</title>
<script type="text/javascript">
function validate()
{
var str=document.getElementById("usn");
var str1 = document.getElementById("sem");
var result=str.value.search(/^[1-4]{1}[A-Z]{2}\d{2}[A-Z]{2}\d{3}$/);
var semres = str1.value.search(/^[1-8]{1}$/);
if(result>=0 && semres>=0)
{
alert("Entered usn("+str.value+") is in correct form and entered
sem("+str1.value+") is in correct form.");
}
else if(result<0 && semres>=0)
{
alert("Entered usn("+str.value+") is not in correct form The correct form
is:1CG09CS100.");
}
else if(result>=0 && semres<0)
{
alert("Entered sem("+str1.value+") is not in correct form The number is
between 1 to 8.");
}
else
{
alert("Entered usn("+str.value+") and entered sem ("+str1.value+")is not in
the correct form.");
}
}
</script>
</head>
<body style="background-color:yellow">
<h3 style="text-align:center;color:red"> Program includes XHTML document to
collect the Student-Information</h3>
<h3 style="color:purple">Student Information </h3>
<form name="my form">
<p style="color:purple"> Enter your USN:</p>
<input type="text" id="usn" size=15/>
<br/>
<br/>
<p style="color:purple"> Enter your SEM:</p>
<input type="text" id="sem" size=15/>
<br/>
Dept. of ISE, CIT, Gubbi
14
10CSL78 Web Programming Laboratory
VII sem ISE
<br/>
<input type="button" onclick="validate()" value="Validate"/>
<input type = "reset" value= "Reset" />
<br/>
</form>
</body>
</html>
Output
Dept. of ISE, CIT, Gubbi
15
10CSL78 Web Programming Laboratory
VII sem ISE
3. a) Develop and demonstrate, using Javascript script, a XHTML document that contains
three short paragraphs of text, stacked on top of each other, with only enough of each
showing so that the mouse cursor can be placed over some part of them. When the cursor
is placed over the exposed part of any paragraph, it should rise to the top to become
completely visible.
<?xml version = "1.0" encoding = "utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Stacking order</title>
<style type="text/css">
.layer1Style
{
border: solid thick black;
padding: 1em;
width:300px;
background-color:green;
position:absolute;
top:100px;
left:200px;
z-index:0;
}
.layer2Style
{
border: solid thick red;
padding: 1em;
width:300px;
background-color:BLUE;
position:absolute;
top:120px;
left:220px;
z-index:0;
}
.layer3Style
{
border: solid thick green;
padding: 1em;
width:300px;
background-color:purple;
position:absolute;
top:140px;
left:240px;
z-index:0;
}
</style>
<script type="text/javascript">
var topLayer="layer3";
function mover(toTop)
{
var oldTop=document.getElementById(topLayer).style;
var newTop=document.getElementById(toTop).style;
Dept. of ISE, CIT, Gubbi
16
10CSL78 Web Programming Laboratory
VII sem ISE
oldTop.zIndex="0";
newTop.zIndex="10";
topLayer=document.getElementById(toTop).id;
alert(topLayer);
}
</script>
</head>
<body bgcolor = "red">
<h2 style="text-align:center;color:yellow"> Program includes XHTML
document to show the Stacking of Paragraphs</h2>
<div style="z-index: 10;" class="layer1Style" id="layer1"
onmouseover="mover('layer1')">
The lives of most inhabitants of Industrialized Countries, has
well as some unindustrialized countries, have been changed forever by the
advent of WWW.
</div>
<div style="z-index: 2;" class="layer2Style" id="layer2"
onmouseover="mover('layer2')">
The www may seem like magic , untill you undrestand how it
works.The Web is accessed through a browser.
</div>
<div style="z-index: 0;" class="layer3Style" id="layer3"
onmouseover="mover('layer3')">
Windows XP provides many ways for you to communicate with friends,
co-workers, and I with the rest of the world.
</div>
</body>
</html>
Output
Dept. of ISE, CIT, Gubbi
17
10CSL78 Web Programming Laboratory
VII sem ISE
b) Modify the above document so that when a paragraph is moved from the top stacking
position, it returns to its original position rather than to the bottom.
<?xml version = "1.0" encoding = "utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Stacking order 5b</title>
<style type="text/css">
.layer1Style{
border: solid thick black;
padding: 1em;
width:300px;
background-color:green;
position:absolute;
top:100px;
left:400px;
z-index:1;
}
.layer2Style{
border: solid thick blue;
padding: 1em;
width:300px;
background-color:red;
position:absolute;
top:120px;
left:420px;
z-index:2;
}
.layer3Style{
border: solid thick brown;
padding: 1em;
width:300px;
background-color:orange;
position:absolute;
top:140px;
left:440px;
z-index:3;
}
</style>
<script type="text/javascript">
var topLayer="layer3";
var origPos;
function mover(toTop,pos)
{
var newTop=document.getElementById(toTop).style;
newTop.zIndex="10";
topLayer=document.getElementById(toTop).id;
origPos=pos;
}
function moveBack()
{
document.getElementById(topLayer).style.zIndex=origPos;
}
Dept. of ISE, CIT, Gubbi
18
10CSL78 Web Programming Laboratory
VII sem ISE
</script>
</head>
<body style="background-color:yellow">
<h1 style="text-align:center;color:red"> The Stacking of paragraphs when
moved from the top stacking position, it returns to its original
position.</h1>
<div style="z-index: 1;" class="layer1Style" id="layer1"
onmouseover="mover('layer1','1')" onmouseout="moveBack()">
The lives of most inhabitants of Industrailzed Countries, has well as some
unindustralized countries, have been changed forever by the advent of WWW.
</div>
<div style="z-index: 2;" class="layer2Style" id="layer2"
onmouseover="mover('layer2','2')" onmouseout="moveBack()">
The www may seem like magic , untill you undrestand how it works.The Web is
accessed through a browser.
</div>
<div style="z-index: 3;" class="layer3Style" id="layer3"
onmouseover="mover('layer3','3')" onmouseout="moveBack()">
Windows XP provides many ways for you to communicate with friends, coworkers,
and Iwith the rest of the world.
</div>
</body>
</html>
Output
Dept. of ISE, CIT, Gubbi
19
10CSL78 Web Programming Laboratory
VII sem ISE
4. a) Design an XML document to store information about a student in an engineering
college affiliated to VTU. The information must include USN, Name, Name of the College,
Brach, Year of Joining, and e-mail id. Make up sample data for 3 students. Create a CSS
style sheet and use it to display the document.
<?xml version ="1.0" encoding = "utf-8"?>
<!DOCTYPE student[
<!ELEMENT student_information (ad+)>
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
ad (usn,name,collegename,branch,year,email)>
usn (#PCDATA)>
name (#PCDATA)>
collegename (#PCDATA)>
branch (#PCDATA)>
year (#PCDATA)>
email (#PCDATA)>
label (#PCDATA|email|year|branch|college|name|usn)*>
h3 (#PCDATA)>
h2 (#PCDATA)>
]>
<?xml-stylesheet type="text/css" href="stu.css"?>
<student_information>
<h3>Student-Information</h3>
<h2> student 1</h2>
<ad><label> usn:<usn> 4bd06499 </usn></label></ad>
<ad><label> Name:<name> AAA </name></label></ad>
<ad><label> College name:<College> CIT,Gubbi
</College></label></ad>
<ad><label> Branch:<branch> CSE </branch></label></ad>
<ad><label> Year of joining:<year> 2006 </year></label></ad>
<ad><label> Email-ID:<email> aaa@gmail.com </email></label></ad>
<h2> student 2</h2>
<ad><label> usn:<usn> 4bd06490 </usn></label></ad>
<ad><label> Name:<name> BBB</name></label></ad>
<ad><label> College name:<College> CIT,Gubbi
</College></label></ad>
<ad><label> Branch:<branch> CSE </branch></label></ad>
<ad><label> Year of joining:<year> 2006 </year></label></ad>
<ad><label> Email-ID:<email> bbb@gmail.com </email></label></ad>
<h2> student 3</h2>
<ad><label> usn:<usn> 4bd06491 </usn></label></ad>
<ad><label> Name:<name> CCC </name></label></ad>
<ad><label> College name:<College> CIT,Gubbi
</College></label></ad>
<ad><label> Branch:<branch> CSE </branch></label></ad>
<ad><label> Year of joining:<year> 2006 </year></label></ad>
<ad><label> Email-ID:<email> ccc@gmail.com </email></label></ad>
</student_information>
Dept. of ISE, CIT, Gubbi
20
10CSL78 Web Programming Laboratory
VII sem ISE
Stu.css
ad{display:block; margin-top:15px; color:blue; font-size:13pt; }
usn {color;red; font-size:12pt; margin-left:15px; }
name {color;red; font-size:12pt; margin-left:15px; }
college {color;red; font-size:12pt; margin-left:15px; }
branch {color;red; font-size:12pt; margin-left:15px; }
year {color;red; font-size:12pt; margin-left:15px; }
email {color;red; font-size:12pt; margin-left:15px; }
h3{color;red; font-size:16pt; }
h2 {display:block; color;red; font-size:16pt; }
Output
Dept. of ISE, CIT, Gubbi
21
10CSL78 Web Programming Laboratory
VII sem ISE
b) Create an XSLT style sheet for one student element of the above document and use it to
create a display of that element.
<?xml version ="1.0" encoding="utf-8"?>
<!DOCTYPE
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
<!ELEMENT
student[
student_information (ad+)>
ad (usn,name,collegename,branch,year,email)>
usn (#PCDATA)>
name (#PCDATA)>
collegename (#PCDATA)>
branch (#PCDATA)>
year (#PCDATA)>
email (#PCDATA)>
]>
<?xml-stylesheet type = "text/xsl" href = "xslstudent.xsl" ?>
<student>
<usn> 4bd06cs099 </usn>
<name> Kumar </name>
<college> CIT </college>
<branch> CSE </branch>
<year> 2006 </year>
<email> abc@gmail.com</email>
</student>
Xslstudent.xsl
<?xml version ="1.0"?>
<xsl:stylesheet version ="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:template match = "/">
<h2> Student information </h2>
<span style = "font-style: italic;color:red;marginright::5pt;"> USN: </span>
<xsl:value-of select = "student/usn" /> <br />
<span style = "font-style: italic;color:red;marginright::5pt;">Name: </span>
<xsl:value-of select = "student/name" /> <br />
<span style = "font-style: italic;color:red;marginright::5pt;"> Branch: </span>
<xsl:value-of select = "student/branch" /> <br />
<span style = "font-style: italic;color:red;marginright::5pt;"> College Name: </span>
<xsl:value-of select = "student/college" /> <br />
<span style = "font-style: italic;color:red;marginright::5pt;"> Year of joining: </span>
<xsl:value-of select = "student/year" /> <br />
<span style = "font-style: italic;color:red;marginright::5pt;"> Email-ID: </span>
<xsl:value-of select = "student/email" /> <br />
</xsl:template>
</xsl:stylesheet>
Dept. of ISE, CIT, Gubbi
22
10CSL78 Web Programming Laboratory
VII sem ISE
Output
Dept. of ISE, CIT, Gubbi
23
10CSL78 Web Programming Laboratory
VII sem ISE
5. a) Write a Perl program to display various Server Information like Server Name, Server
Software, Server protocol, CGI Revision etc.
#!/usr/bin/perl
print "content-type:text/html \n\n",
"<html>",
"<h1>Welcome to CIT</h1>",
"<h2>Welocome to PWEB LAB</h2>",
"<body>",
"Server Name: $ENV{'SERVER_NAME'}<br>",
"Server Port: $ENV{'SERVER_PORT'}<br>",
"Server Software: $ENV{'SERVER_SOFTWARE'}<br>",
"Server Protocol: $ENV{'SERVER_PROTOCOL'}<br>",
"CGI VERSION: $ENV{'GATEWAY_INTERFACE'}",
"</html>";
Output
Dept. of ISE, CIT, Gubbi
24
10CSL78 Web Programming Laboratory
VII sem ISE
b) Write a Perl program to accept UNIX command from a HTML form and to display the
output of the command executed.
#!/usr/bin/perl
use CGI':standard';
print
header(),
start_html(-title=>'UNIX COMMAND',-bgcolor=>'#00ffff'),
h1({-align=>'center'},'UNIX COMMAND EXECUTION'),
hr(),
startform(-method=>'get',-action=>'./lab5b.cgi'),
'ENTER UNIX COMMAND:',
textfield(-name=>'cmd'),br(),
br(),
submit(-value=>'EXECUTE'),
endform(),
hr(),
'$',$cmd=param("cmd"),
br(),
pre(`$cmd`),
end_html();
Output
Dept. of ISE, CIT, Gubbi
25
10CSL78 Web Programming Laboratory
VII sem ISE
6. a) Write a Perl program to accept the User Name and display a greeting message
randomly chosen from a list of 4 greeting messages.
#!/usr/bin/perl
use CGI’:standard’;
print
header(),
start_html(-title=>’GREETING’,-bgcolor=>’brown’),
h1({-align=>’center’},’USER GREETING’),
hr,
font({-color=>’lightblue’,-weight=>’bold’,-size=>’5’},’ENTER THE USER
NAME HERE’),
br,
start_form(-action=>’./6a.cgi’),
textfield(-name=>’name’),
submit(-value=>’SEND’),
end_form(),
hr,
font({-color=>’yellow’,-size=>’5’},’DEAR USER’),
font({-color=>’white’,-size=>’8’},$username=param(‘name’),
br);
@msgs=(“GOOD”,”BAD”,”HELLO”,”HELL”);
print
font({-color=>’lightblue’,-size=>’8’},$msgs[int rand scalar
@msgs]),
hr,
end_html;
Output
Dept. of ISE, CIT, Gubbi
26
10CSL78 Web Programming Laboratory
VII sem ISE
b) Write a Perl program to keep track of the number of visitors visiting the web page and to
display this count of visitors, with proper headings.
#!/usr/bin/perl
use CGI’:standard’;
print
header(),
start_html(-bgcolor=>’lightyellow’),
h1({-align=>’center’},’PAGE VISITOR INFO’),
hr,
font({-color=>’lightblue’,-size=>’4’},’This page is visited’),
br,
font({-color=>’orange’,-size=>’7’},`grep ‘/cgi-bin/6b.cgi’ accesslog |
wc –l`),
br,
font({-color=>’lightblue’,-size=>’4’},’no of times’),
br,
hr,
end_html;
ln /var/log/httpd/access_log accesslog
Output
Dept. of ISE, CIT, Gubbi
27
10CSL78 Web Programming Laboratory
VII sem ISE
7. Write a Perl program to display a digital clock which displays the current time of the
server.
#!/usr/bin/perl
use CGI ':standard';
($sec,$min,$hr)=localtime();
print
header(),
start_html(-title=>'digital clock',-bgcolor=>'#00ffff'),
h1({-align=>'center'},'DIGITAL CLOCK'),
hr(),
h3({-align=>'center'},"The Current Time is:"),
h1({-align=>'center'},b("$hr:$min:$sec")),
"<meta http-equiv='refresh' content = '1'>",
hr(),
end_html();
Output
Dept. of ISE, CIT, Gubbi
28
10CSL78 Web Programming Laboratory
VII sem ISE
8. Write a Perl program to insert name and age information entered by the user into a table
created using MySQL and to display the current contents of this table.
#!/usr/bin/perl
use CGI':standard';
use DBI;
$dbh = DBI->connect(“DBI:mysql:veena”,”root”) or die “can not connect”.DBI>errstr();
$sth
=
$dbh->prepare(‘insert
into
userinfo
values(?,?)’)
or
die
“can
not
insert”.$dbh->errstr();
$sth1 = $dbh->prepare(‘select * from userinfo’) or die “cannot select”.$dbh>errstr();
print
header(),
start_html(-title=>'database access',-bgcolor=>'#00ffff'),
h1({-align=>'center'},'Database Access'),
hr(),
h2({-align=>'center'},'Database insert'),
‘ENTER USER INFORMATION’,
start_form(-action=>’./8.cgi’),
‘NAME:’,
textfield(-name=>’name’),
br,
‘AGE:’,
textfield(-name=>’age’),br,
submit(-value=>’Insert’),
reset(-value=>’Reset’),
end_form(),
hr();
$ename = param(‘name’);
$eage = param(‘age’);
if($ename eq “”)
{
print “do not enter null values”;
}
else
{
$sth->execute($ename, $eage) or die “cannot insert”.$sth>errstr();
print “successfully inserted”;
}
print
hr(),
h2({-align=>'center'},'Database display'),
pre(
‘userinfo’
br(),
‘-’x 50,br(),
‘NAME
Dept. of ISE, CIT, Gubbi
AGE’,br(),
29
10CSL78 Web Programming Laboratory
VII sem ISE
‘-’x 50);
$sth1->execute();
while(($ename,$eage)=$sth1->fetchrow())
{
print “<pre>$ename $eage \n</pre>”;
}
$sth1->finish();
$sth->finish();
$dbh->disconnect;
end_html();
Output
9. Write a PHP program to store current date-time in a COOKIE and display the ‘Last visited
on’ date-time on the web page upon reopening of the same page.
Dept. of ISE, CIT, Gubbi
30
10CSL78 Web Programming Laboratory
VII sem ISE
<?php
setcookie("lastvisit",date("h:i-m/d/y"),time()+60*60);?>
<html>
<body bgcolor=”lightyellow”>
<font size=20pt>
<p align=”center”><b><u>COOKIE INFORMATION</u></b></p></font>
<hr>
<?
if(isset($_COOKIE["lastvisit"]))
{
echo “<font size=10pt color = ligtblue><p align=center><i>DEAR USER,YOU
LAST VISITED THE SITE ON </i></p></font>”;
echo “<font size=10pt color =white><p
align=center>”.$_COOKIE["lastvisit"];
echo “</p></font>”;
}
else
echo "You have got some stale cookies";
?>
Output
Dept. of ISE, CIT, Gubbi
31
10CSL78 Web Programming Laboratory
VII sem ISE
10. Write a PHP program to store page views count in SESSION, to increment the count on
each refresh, and to show the count on web page.
<?php
session_start();?>
<html>
<body bgcolor=”lightyellow”>
<hr>
<h1 align= “center”>SESSION INFORMATION</h1>
<hr>
<?
if(isset($_SESSION['views']))
$_SESSION['views'] = $_SESSION['views']+ 1;
else
$_SESSION['views'] = 1;
?>
<h2><i><b>The page is visited</h2>
<font size=20pt,color=red>
<?
echo $_SESSION['views']
?></font><br><i><b>Times</b></i>
</body></html>
Output
Dept. of ISE, CIT, Gubbi
32
10CSL78 Web Programming Laboratory
VII sem ISE
11. Create a XHTML form with Name, Address Line 1, Address Line 2, and E-mail text fields.
On submitting, store the values in MySQL table. Retrieve and display the data based on
Name.
INSERT FORM
<?xml version=”1.0” encoding = “utf-8”>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="lightyellow">
<form method ="post" action="13.php">
<table align="center" width="100%" border="1">
<tr>
<td colspan="2" align="center"><h1>USER INFORMATION</h1></td>
</tr>
<tr>
<td width="50%"><h3>USER INFO ENTRY</h3></td>
<tr>
<td>
<table border="1">
<tr>
<td>Name:</td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>ADDRESS1:</td>
<td><input type="text" name="add1"/></td>
</tr>
<tr>
<td>ADDRESS2:</td>
<td><input type="text" name="add2"/></td>
</tr>
<tr>
<td>EMAIL:</td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="INSERT"/>&nbsp;
<input type="reset" value="RESET"/></td>
</tr>
</table>
</td>
</tr>
</table>
<a href="13a.html" align = center>CLICK HERE TO SEARCH</a>
</form>
</body>
</html>
Dept. of ISE, CIT, Gubbi
33
10CSL78 Web Programming Laboratory
VII sem ISE
Output
Dept. of ISE, CIT, Gubbi
34
10CSL78 Web Programming Laboratory
VII sem ISE
SEARCH FORM
<html>
<head>
<title>Insert title here</title>
</head>
<html>
<body bgcolor = "lightyellow">
<h2 align ="center">DATABASE SEARCH</h2>
<form action = "13a.php "method="post">
<table>
<tr>
<td>
<p><b>Enter the user name here:</b></p><br/>
<input type="text" name="name1"/>&nbsp;
<input type="submit" value="SEARCH"/>
</td>
</tr>
</table>
<a href="13.html" align = center>HOME</a>
</body>
</html>
13.php
<?php
$mysql = mysql_connect("localhost","root","") or die("Cannot connect");
?>
<html>
<body bgcolor = "lightyellow">
<h2 align ="center">USER ENTRY</h2>
<?php
$name = $_REQUEST["name"];
$add1 = $_REQUEST["add1"];
$add2 = $_REQUEST["add2"];
$email = $_REQUEST["email"];
if($name == NULL && $add1 == NULL && $add2 == NULL && $email == NULL)
{
echo "Dont enter null values";
}
else
{
mysql_select_db("perlexample") or die("Cannot select the database");
$result = mysql_query("insert into user_info
values('$name','$add1','$add2','$email')") or die("Cannot insert");
echo "Successfully Inserted";
}
?>
Dept. of ISE, CIT, Gubbi
35
10CSL78 Web Programming Laboratory
VII sem ISE
<a href="13.html" align = center>HOME</a>
</table>
</body>
</html>
13a.php
<?php
$mysql = mysql_connect("localhost","root","") or die("Cannot connect");
?>
<html>
<body bgcolor="lightyellow">
<h2 align = "center">SEARCH RESULTS</h2>
<?php
$name1 = $_REQUEST["name1"];
if($name1==NULL)
{
echo "Dont enter null values";
}
else
{
mysql_select_db("perlexample") or die("Cannot select the database");
$result1 = mysql_query("select * from user_info where name = '$name1'")
or die("Cant select");
}
echo "<hr>";
echo "<table border= 1 align = center>
<tr>
<td>Name:</td>
<td>Address1:</td>
<td>Address2:</td>
<td>Email:</td>
</tr>";
while($array = mysql_fetch_row($result1))
{
echo "<tr>
<td>$array[0]</td>
<td>$array[1]</td>
<td>$array[2]</td>
<td>$array[3]</td>";
}
echo "</table>";
echo "<hr>";
?>
Dept. of ISE, CIT, Gubbi
36
10CSL78 Web Programming Laboratory
VII sem ISE
<a href="13.html" align = center>HOME</a>
</body>
</html>
Output
Dept. of ISE, CIT, Gubbi
37
10CSL78 Web Programming Laboratory
VII sem ISE
12. Build a Rails application to accept book information viz. Accession number, title,
authors, edition and publisher from a web page and store the information in a database and
to search for a book with the title specified by the user and to display the search results
with proper headings.
Steps to create a ruby application
1. Create a new application, by issuing the command => rails Books
2. Create the model by using the command => ruby script/generate model book
3. Go to the directory db and make the following changes in the 001_create_books.rb
t.column
t.column
t.column
t.column
t.column
:accessionnumber, :string
:title, :string
:author, :string
:edition, :string
:publisher, :string
4. Create the controller file by using the command => ruby script/generate controller main
5. Create the database by name books_development and the table by the name books or use
the db migrate command
6. Create the front end forms for insert and search and the result forms and save it in the
directory /app/views/main/
7. Write the controller code in file named /app/controllers/main_controller.rb.
8. Start the server by using the command ruby script/server
dbinsert.rhtml
<html>
<head><title>DBINSERT</title></head>
<body bgcolor="lightyellow">
<h1 align = "center">DBINSERT</h1>
<hr />
<form action = "resultinsert" method="post">
<table>
<tr>
<td> <b>Enter the Accession Number here:</b> </td>
<td> <input type="text" name="book[accessionnumber]"
size="30"/></td>
</tr>
<tr>
<td> <b>Enter the title here:</b> </td>
<td> <input type="text" name="book[title]" size="30"/></td>
</tr>
<tr>
<td> <b>Enter the Author:</b> </td>
<td> <input type="text" name="book[author]" size="30"/></td>
</tr>
Dept. of ISE, CIT, Gubbi
38
10CSL78 Web Programming Laboratory
VII sem ISE
<tr>
<td> <b>Enter the Edition:</b> </td>
<td> <input type="text" name="book[edition]" size = "30"/></td>
</tr>
<tr>
<td> <b>Enter the Publisher here:</b> </td>
<td> <input type="text" name="book[publisher]" size="30"/></td>
</tr>
<tr>
<td colspan = "2">
<input type="submit" value="INSERT"/>
<input type="reset" value="RESET"/>
</td>
</tr>
</table>
<hr>
</form>
</body>
</html>
resultinsert.rhtml
<html>
<head><title>DBSEARCH BASED ON TITLE</title></head>
<body bgcolor="lightyellow">
<h1 align = "center">SUCCESSFULLY INSERTED
</h1>
<hr />
</body>
</html>
dbsearch.rhtml
<html>
<head><title>DBSEARCH BASED ON TITLE</title></head>
<body bgcolor="lightyellow">
<h1 align = "center">DATABASE SEARCH BASED ON TITLE</h1>
<hr />
<form action = "searchresult" method="post">
<table>
<tr>
<td> <b>Enter the title here:</b> </td>
<td> <input type="text" name="title"/></td>
</tr>
<tr>
Dept. of ISE, CIT, Gubbi
39
10CSL78 Web Programming Laboratory
VII sem ISE
<td colspan = "2">
<input type="submit" value="SEARCH"/>
<input type="reset" value="RESET"/>
</td>
</tr>
</table>
<hr>
</form>
</body>
</html>
searchresult.rhtml
<html>
<head>
<title> result.rhtml </title>
</head>
<body bgcolor="lightyellow">
<h1 align = "center"> SEARCH RESULTS </h1>
<hr>
<table border = "border" align="center">
<tr>
<th> Accession Number </th>
<th> Title
</th>
<th> Author
</th>
<th> Edition
</th>
<th> Publication </th>
</tr>
<% @names.each do |boo|
@name = boo. accessionnumber
@title = boo.title
@author = boo.author
@edition = boo.edition
@publication = boo.publisher %>
<tr>
<td><%= @name %></td>
<td><%= @title %></td>
<td><%= @author %></td>
<td><%= @edition %></td>
<td><%= @publication%></td>
</tr>
<% end %>
</table>
</body>
</html>
Dept. of ISE, CIT, Gubbi
40
10CSL78 Web Programming Laboratory
VII sem ISE
main_controller.rb
class MainController < ApplicationController
def resultinsert
@book = Book.new(params[:book])
if @book.save
flash[:notice] = 'Book details was successfully created.'
else
render :action => 'dbinsert'
end
end
def searchresult
@titlename = params[:title]
@names = book.find(:all, :conditions =>["title = ?",@titlename])
end
end
Output
Dept. of ISE, CIT, Gubbi
41
10CSL78 Web Programming Laboratory
Dept. of ISE, CIT, Gubbi
VII sem ISE
42
10CSL78 Web Programming Laboratory
VII sem ISE
Viva Questions
HTML
1. What does HTML stand for?
2. Who is making the Web standards?
3. Which is the correct HTML tag for the largest heading
4.
HTML tag for inserting a line break?
5. What is the preferred way for adding a background color in HTML?
6. What is the HTML tag to make a text bold
7. Choose the correct HTML tag to make a text italic
8. What is the correct HTML for creating a hyperlink?
9. How can you create an e-mail link?
10. How can you open a link in a new browser window?
11. Which of these tags are all <table> tags?
12. Choose the correct HTML to left-align the content inside a tablecell
13. How can you make a list that lists the items with numbers?
14. How can you make a list that lists the items with bullets?
15. What is the correct HTML for making a checkbox?
16. What is the correct HTML for making a text input field?
17. What is the correct HTML for making a drop- down list?
18. What is the correct HTML for making a text area?
19. What is the correct HTML for inserting an image?
20. What is the correct HTML for inserting a background image?
SQL
1. What does SQL stand for?
2. Which SQL statement is used to extract data from a database?
3. Which SQL statement is used to update data in a database?
4. Which SQL statement is used to delete data from a database?
5. Which SQL statement is used to insert new data in a database?
6. With SQL, how do you select a column named "FirstName" from a table named "Persons"?
Dept. of ISE, CIT, Gubbi
43
10CSL78 Web Programming Laboratory
VII sem ISE
7. With SQL, how do you select all the columns from a table named "Persons"?
8. With SQL, how do you select all the records from a table named "Persons" where the value of
the column "FirstName" is "Peter"?
9. With SQL, how do you select all the records from a table named "Persons" where the value of
the column "FirstName" starts with an "a"?
10. The OR operator displays a record if ANY conditions listed are true. The AND operator
displays a record if ALL of the conditions listed are true
11. With SQL, how do you select all the records from a table named "Persons" where the
"FirstName" is "Peter" and the "LastName" is "Jackson"?
12. With SQL, how do you select all the records from a table named "Persons" where the
"LastName" is alphabetically between (and including) "Hansen" and "Pettersen"?
13. Which SQL statement is used to return only different values?
14. Which SQL keyword is used to sort the result-set?
15. With SQL, how can you return all the records from a table named "Persons" sorted
descending by "FirstName"?
16. With SQL, how can you insert a new record into the "Persons" table?
17. With SQL, how can you insert "Olsen" as the "LastName" in the "Persons" table?
18. How can you change "Hansen" into "Nilsen" in the "LastName" column in the Persons table?
19. With SQL, how can you delete the records where the "FirstName" is "Peter" in the Persons
Table?
20. With SQL, how can you return the number of records in the "Persons" table?
CSS
1. What does CSS stand for?
2. What is the correct HTML for referring to an external style sheet?
3. Where in an HTML document is the correct place to refer to an external style sheet?
4. Which HTML tag is used to define an internal style sheet?
5. Which HTML attribute is used to define inline styles?
6. Which is the correct CSS syntax?
7. How do you insert a comment in a CSS file?
8. Which property is used to change the background color?
9. How do you add a background color for all <h1> elements?
Dept. of ISE, CIT, Gubbi
44
10CSL78 Web Programming Laboratory
VII sem ISE
10. How do you change the text color of an element?
11. Which CSS property controls the text size?
12. What is the correct CSS syntax for making all the <p> elements bold?
13. How do you display hyperlinks without an underline?
14. How do you make each word in a text start with a capital letter?
15. How do you change the font of an element?
16. How do you make the text bold?
17. How do you display a border like this:
18. How do you change the left margin of an element?
19. To define the space between the element's border and content, you use the padding property,
but are you allowed to use negative values?
20. How do you make a list that lists its items with squares?
PHP
1. What does PHP stand for?
2. PHP server scripts are surrounded by delimiters, which?
3. How do you write "Hello World" in PHP
4. All variables in PHP start with which symbol?
5. What is the correct way to end a PHP statement?
6. The PHP syntax is most similar to:
7. How do you get information from a form that is submitted using the
"get" method?
8. When using the POST method, variables are displayed in the URL:
9. In PHP you can use both single quotes ( ' ' ) and double quotes ( " " )
for strings:
10. Include files must have the file extension ".inc"
11. What is the correct way to include the file "time.inc”?
12. What is the correct way to create a function in PHP?
13. What is the correct way to open the file "time.txt" as readable?
14. PHP allows you to send emails directly from a script
15. What is the correct way to connect to a MySQL database?
16. What is the correct way to add 1 to the $count variable?
17. What is a correct way to add a comment in PHP?
Dept. of ISE, CIT, Gubbi
45
10CSL78 Web Programming Laboratory
VII sem ISE
18. PHP can be run on Microsoft Windows IIS(Internet Information
Server):
19. In PHP, the die() and exit() functions do the exact same thing.
20. Which one of these variables has an illegal name?
XML
1. What does XML stand for?
2. There is a way of describing XML data, how?
3. XML's goal is to replace HTML
4. What is the correct syntax of the declaration which defines the XML
version?
5. What does DTD stand for?
6. Is this a "well formed" XML document?
<?xml version="1.0"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
7. Is this a "well formed" XML document?
<?xml version="1.0"?>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
8. Which statement is true?
9. Which statement is true?
10. XML preserves white spaces
11. Is this a "well formed" XML document?
<?xml version="1.0"?>
Dept. of ISE, CIT, Gubbi
46
10CSL78 Web Programming Laboratory
VII sem ISE
<note>
<to age="29">Tove</to>
<from>Jani</from>
</note>
12. Is this a "well formed" XML document?
<?xml version="1.0"?>
<note>
<to age=29>Tove</to>
<from>Jani</from>
</note>
13. XML elements cannot be empty
14. Which is not a correct name for an XML element?
15. Which is not a correct name for an XML element?
16. Which is not a correct name for an XML element?
17. XML attribute values must always be enclosed in quotes
18. What does XSL stand for?
19. What is a correct way of referring to a stylesheet called "mystyle.xsl"?
20. For the XML parser to ignore a certain section of your XML document, which syntax is
correct?
JavaScript
1. Inside which HTML element do we put the JavaScript?
2. What is the correct JavaScript syntax to write "Hello World"?
3. Where is the correct place to insert a JavaScript?
4. What is the correct syntax for referring to an external script called "xxx.js"?
5. The external JavaScript file must contain the <script> tag
6. How do you write "Hello World" in an alert box?
7. How do you create a function?
8. How do you call a function named "myFunction"?
9. How do you write a conditional statement for executing some code if "i" is equal to 5?
10. How do you write a conditional statement for executing some code if "i" is NOT equal to 5?
Dept. of ISE, CIT, Gubbi
47
10CSL78 Web Programming Laboratory
VII sem ISE
11. How does a "while" loop start?
12. How does a "for" loop start?
13. How can you add a comment in a JavaScript?
14. What is the correct JavaScript syntax to insert a comment that has more than one line?
15. What is the correct way to write a JavaScript array?
16. How do you round the number 7.25, to the nearest integer?
17. How do you find the number with the highest value of x and
y?
18. What is the correct JavaScript syntax for opening a new window called "w2" ?
19. How do you put a message in the browser's status bar?
20. How can you find a client's browser name?
XHTML
1. What does XHTML stand for?
2. XHTML is a Web standard
3. XML and HTML will be replaced by XHTML
4. What is correct XHTML for a horizontal line?
5. What is the correct XHTML for a paragraph?
6. What is correct XHTML for a line break?
7. What is the correct XHTML for an attribute and its value?
8. All elements in XHTML must be closed
9. Is this correct XHTML?
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>
10. The DOCTYPE declaration has no closing tag
Dept. of ISE, CIT, Gubbi
48
10CSL78 Web Programming Laboratory
VII sem ISE
11. Which elements are mandatory in an XHTML document?
12. XHTML documents must be "well-formed"
13. What XHTML code is "well-formed"?
14. Which of the following is the right use of the lang attribute?
15. Which attribute replaces the name attribute for the following elements: a, applet, frame,
iframe, img, and map?
16. Is attribute minimization allowed in XHTML?
17. Do all XHTML documents require a doctype?
18. What are the different DTDs in XHTML?
19. What is the most common XHTML DTD?
20. All XHTML tags and attributes must be in lower case
Dept. of ISE, CIT, Gubbi
49
10CSL78 Web Programming Laboratory
VII sem ISE
References:
Sites:
www.w3schools.com
Text Books:
1. Programming the World Wide Web – Robert W. Sebesta, 4th Edition, Pearson Education,
2008.
2. Internet & World Wide Web How to H program – M. Deitel, P.J. Deitel, A. B. Goldberg, 3rd
Edition, Pearson Education / PHI, 2004.
3. Web Programming Building Internet Applications – Chris Bates, 3rd Edition, Wiley India,
2006.
4. The Web Warrior Guide to Web Programming – Xue Bai et al,
Dept. of ISE, CIT, Gubbi
Thomson, 2003.
50