Web Tech Practical File

WEB TECH PRACTICAL FILE
2020UCD2103
1. Write a Java script to prompt for user name and display it on screen.
var name = prompt("Enter your name");
alert(name);
2. Write an html code to show the usage of ordered list, unordered list and definition list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lists</title>
</head>
<body>

<p>Red list of threatened Species</p>
<ol>
<li>
Lychas Braueri
</li>
<li>
Cucurbita pepo
</li>
<li>
Paracilacris periclitatus
</li>
</ol>

<p>Fastest Cars in the World</p>
<ul>
<li>
SSC Tuatara
</li>
<li>
Bugatti Chiron SS
</li>
<li>
Koenigsegg Agera
</li>
</ul>
<p>New Words in the English Dictionary</p>
<dl>
<dt>Deplatform</dt>
<dd>
To remove a registered user from a social networking platform.
</dd>
<dt>Digital Nomad</dt>
<dd>
A person who performs his occupation on the internet entirely while traveling.
</dd>
</dl>
</body>
</html>
3. Write separate html codes to show the usage of inline CSS, internal CSS, external CSS.

<!DOCTYPE html>
<html lang="en">
<head>
<title>inline CSS</title>
</head>
<body>
<h1 style="color: red; font-size: 5rem;">This is inline CSS</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal CSS</title>
<style>
body{
background-color: aquamarine;
h1{
color: chartreuse;
font-weight: bold;
</style>
</head>
<body>
<h1>
This is our heading

</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is the first heading</h1>
</body>
</html>
CSS:
h1{color:red;}
4. Write an html code to create a home page having 3 links
-About us
-Our services
-contact us
Create seperate web pages for 3 links
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
</head>
<body>
<a href="aboutus.html">About Us</a>
<a href="services.html">Our Services</a>
<a href="contact.html">Contact Us</a>
</body>
</html>
5. Write an html registration form with validation, on submission the user should be displayed a
confirmation message
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
</head>
<body>
<h1>Register</h1>
<form action="submit.php" name="main" method="post" onsubmit="return good()">
<label for="fname">Enter First Name:</label>
<input type="text" id="fname" name="fname">
<br>
<label for="lname">Enter Last Name:</label>
<input type="text" id="lname" name="lname">
<br>
<label for="address">Enter Address:</label>
<input type="text" id="address" name="address" size="30">
<br>
<label for="email">Enter e-mail Address:</label>
<input type= "text" id="email" name="email" size="40">
<input type="submit" value="Submit">
</form>
<script>
function good(){
var fname = document.forms["main"]["fname"];
var lname = document.forms["main"]["lname"];
var address = document.forms["main"]["address"];
var email = document.forms["main"]["email"];
if(fname.value == "")
alert("Enter First Name");
fname.focus();
return false;
if(lname.value == "")
alert("Enter Last Name");
lname.focus();
return false;
if(address.value == "")
alert("Enter Address");
address.focus();
return false;
}
if(email.value == "")
alert("Enter email");
email.focus();
return false;
return alert("Data Has Been Sent");
</script>
</body>
</html>
6. Write an HTML program to design an entry form of student details and send it to store at database
server like SQL, Oracle or MS Access.
<!DOCTYPE html>
<html lang="en">
<head>
<title>PHP insertion</title>
</head>
<body>
<form action="insert.php" name = "main" method="POST">
<label for="name">Enter Name:</label>
<input type="text" size = "50" id = "name" name="name">
<br>
<label for="email">Enter e-mail address</label>
<input type="text" size="50" id="email" name="email">
<br>
<label for="password">Enter Password:</label>
<input type="secret" name="password" id="password">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
7. Write programs using Java script for Web Page to display browsers information.
<html>
<head>
<title>Browser Information</title>
</head>
<body>
<h1>Browser Information</h1>
<hr>
<p>
The <b>navigator</b> object contains the following information
about the browser you are using.
</p>
<ul>
<script LANGUAGE="JavaScript" type="text/javascript">
document.write("<li><b>Code Name:</b> " + navigator.appCodeName);
document.write("<li><b>App Name:</b> " + navigator.appName);
document.write("<li><b>App Version:</b> " + navigator.appVersion);
document.write("<li><b>User Agent:</b> " + navigator.userAgent);
document.write("<li><b>Language:</b> " + navigator.language);
document.write("<li><b>Platform:</b> " + navigator.platform);
</script>
</ul>
<hr>
</body>
</html>
8. To write a program, which takes user id as input and displays the user details by taking the user
information from the XML document?
<html> <head>
<script language="javascript">
function fncDisplayInfo()
var xhttp=null;
var flag=0;
var userid = document.frm.uname.value;
var xmlDoc = new ActiveXObject("microsoft.xmldom");
xmlDoc.load("user.xml");
var noOfUsers = xmlDoc.getElementsByTagName("userlist")[0].childNodes.length;
for(var i=0;i<parseInt(noOfUsers);i++)
var uid
=xmlDoc.getElementsByTagName("user")[i].childNodes[0].childNodes[0].nodeValue;
if(uid == userid)
document.write("<h1> User Details</h1>");
var userName =
xmlDoc.getElementsByTagName("user")[i].childNodes[1].childNodes[0].nodeValue;
var Address
=xmlDoc.getElementsByTagName("user")[i].childNodes[2].childNodes[0].nodeValue;
var phone =
var email=
document.write("<br><b>User ID :&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+uid)
document.write("<br>User Name :&nbsp"+userName);
document.write("<br>Address :&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp "+Address);
document.write("<br>Phone no : &nbsp&nbsp&nbsp&nbsp&nbsp"+phone);
document.write("<br>E - Mail : &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+email);
flag =1;
break;
if(flag==0)
alert("InValid User");
</script>
</head>
<body>
<center>
<h1><b>User Information</h1>
<form name="frm">
User ID : <input type="text" name="uname"><br>
<input type="button" name="btn" value="Submit" onclick="fncDisplayInfo()">
</form>
</center>
</body>
</html>
9. Writing program in XML and creates a style sheet in CSS & displays the document in internet
explorer.
<?xml-stylesheet href="classic.css"?>
<ARTICLE>
<HEADLINE>A Fairytale</HEADLINE>
<AUTHOR>John Brown</AUTHOR>
<PARA>
Once upon a time, in a kingdom called Pansia lived a brave King. He loved to
play
<INSTRUMENT>flute</INSTRUMENT>
One fine day he called his ministers to hear him play the instrument.
</PARA>
</ARTICLE>
10. Write a program using PHP and HTML to create a form and display the details entered by the user.
<html>
<head>
<title>PHP Form Validation</title>
</head>
<body>
<?php
// define variables and set to empty values
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["name"]);
$email = test_input($_POST["email"]);
$website = test_input($_POST["website"]);
$comment = test_input($_POST["comment"]);
$gender = test_input($_POST["gender"]);
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>Tutorials Point Absolute classes registration </h2>
<form method="post" action="/php/php_form_introduction.htm">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>E-mail:</td>
<td> <input type="text" name="email"></td>
</tr>
<tr>
<td>Specific Time:</td>
<td> <input type="text" name="website"></td>
</tr>
<tr>
<td>Class details:</td>
<td><textarea name="comment" rows="5"
cols="40"></textarea></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="Submit">
</td>
</tr>
</table>
</form>
<?php
echo "<h2>Your Given details are as :</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>
</body>
</html>

Web Tech Practical File

Uploaded by

Document Information

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

Web Tech Practical File

Uploaded by

Copyright:

Available Formats

WEB TECH PRACTICAL FILE

var name = prompt("Enter your name");

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<p>Red list of threatened Species</p>

<p>Fastest Cars in the World</p>

<p>New Words in the English Dictionary</p>

To remove a registered user from a social networking platform.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<h1 style="color: red; font-size: 5rem;">This is inline CSS</h1>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This is our heading

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="styles.css">

<h1>This is the first heading</h1>

4. Write an html code to create a home page having 3 links

Create seperate web pages for 3 links

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<a href="aboutus.html">About Us</a>

<a href="services.html">Our Services</a>

<a href="contact.html">Contact Us</a>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<form action="submit.php" name="main" method="post" onsubmit="return good()">

<label for="fname">Enter First Name:</label>

<input type="text" id="fname" name="fname">

<label for="lname">Enter Last Name:</label>

<input type="text" id="lname" name="lname">

<label for="address">Enter Address:</label>

<input type="text" id="address" name="address" size="30">

<label for="email">Enter e-mail Address:</label>

<input type= "text" id="email" name="email" size="40">

<input type="submit" value="Submit">

var fname = document.forms["main"]["fname"];

var lname = document.forms["main"]["lname"];

var address = document.forms["main"]["address"];

var email = document.forms["main"]["email"];

alert("Enter First Name");

alert("Enter Last Name");

return alert("Data Has Been Sent");

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<form action="insert.php" name = "main" method="POST">

<label for="name">Enter Name:</label>

<input type="text" size = "50" id = "name" name="name">

<label for="email">Enter e-mail address</label>

<input type="text" size="50" id="email" name="email">

<label for="password">Enter Password:</label>

<input type="secret" name="password" id="password">

<input type="submit" value="Submit">

The <b>navigator</b> object contains the following information

about the browser you are using.

<script LANGUAGE="JavaScript" type="text/javascript">

document.write("<li><b>Code Name:</b> " + navigator.appCodeName);

document.write("<li><b>App Name:</b> " + navigator.appName);