Scribd
Upload
121 views18 pages

Web Tech Practical File

The document contains 10 programming tasks related to web technologies. It includes tasks to prompt for a user name, display lists using HTML, use different CSS styles, create web pages with links, build a registration form with validation, design a student details form, display browser information using JavaScript, look up user details from an XML file, style an XML document with CSS, and create a form to display user-entered details using PHP and HTML.

Uploaded by

ARYAN ARYA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
121 views18 pages

Web Tech Practical File

The document contains 10 programming tasks related to web technologies. It includes tasks to prompt for a user name, display lists using HTML, use different CSS styles, create web pages with links, build a registration form with validation, design a student details form, display browser information using JavaScript, look up user details from an XML file, style an XML document with CSS, and create a form to display user-entered details using PHP and HTML.

Uploaded by

ARYAN ARYA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 18

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>

<!-- Ordered List -->

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

<ol>

<li>

Lychas Braueri

</li>

<li>

Cucurbita pepo
</li>

<li>

Paracilacris periclitatus

</li>

</ol>

<!-- Unordered List -->

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

<!-- CODE FOR INLINE CSS -->

<!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>inline CSS</title>

</head>

<body>

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

</body>

</html>
<!-- CODE FOR INTERNAL CSS -->

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

<!-- CODE FOR EXTERNAL css -->

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

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

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

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

xmlDoc.getElementsByTagName("user")[i].childNodes[3].childNodes[0].nodeValue;

var email=

xmlDoc.getElementsByTagName("user")[i].childNodes[4].childNodes[0].nodeValue;
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>

You might also like