Scribd
Upload
75 views40 pages

Web Technology Practical

Uploaded by

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

Web Technology Practical

Uploaded by

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

Practical 1

Aim: Design a webpage that makes use of


(a) Document Structure Tags
INPUT:
<HTML>
<HEAD>
<TITLE>
THIS IS FIRST PAGE</TITLE> </HEAD>
<BODY>

THIS IS HELLO WORLD.


</BODY>
</HTML>

OUTPUT:

(b) Various text formatting tags.


INPUT:
<html>
<head> <title> Various text formating tags </title> </head>
<body bgcolor="lime">
<h1>This is heading tag. </h1>
<h2>This is heading tag. </h2>
<h3>This is heading tag. </h3>
<h4>This is heading tag. </h4>
<h5>This is heading tag. </h5>
<h6>This is heading tag. </h6>

<b> BOLD </b> <br>


<u> UNDERLINE</u> <br>
<i> ITALIC </i> <br> <br>

THIS <sub>is </sub>SUBSCRIPT<sub>tag. </sub> <BR>


THIS <sup>is </sup>SUPERSCRIPT<sup>tag. </sup> <br>

<p> This is paragraph with some <code> compute </code> </p>

<p> copy the text using the keyboard shortcut <kbd> ctrl </kbd> + <kbd>C</kbd>
<br> <br>
<mark> This is mark. </mark> <br>
<del> This is used to deleting a text. </del>

</body>
</html>

OUTPUT:
(c) List Tags
INPUT:
<html>
<head>
<title> list in html </title>
</head>

<body bgcolor="darkturquoise">
<h1 align="center"> Courses offered </h1>

<ol type="1" start="1">


<li> <b>B.com </b></li>

<ul type="disc" font="red">


<li> TYBcom</li>
<li> SYBcom</li>
<li> FYBcom</li>
</ul>
</ol>

<ol type="1" start="2">

<li> <b>BSc(CS)</b> </li>


<ul type="disc">
<li> TYCS</li>
<li> SYCS</li>
<li> FYCS</li>
</ul>
</ol>
<ol type="1" start="3">
<li> <b>BSc(IT) </b></li>

<ul type="disc">
<li> TYIT</li>
<li> SYIT</li>
<li> FYIT</li>
</ul>
</ol>

<h3 align="center">This is definition tag.</h3>

<dl>
<dt><b>Notepad</b></dt>
<dd>
Notepad is a generic text editor included with all versions of Microsoft Windows
that lets you create, open, and read plaintext files with a .txt file extension.
</dd>
<dt>
<b>Chrome</b></dt>
<dd>
Chrome is designed to be the fastest web browser.
</dd>
</dl>
</body>
</html>

OUTPUT:

(d) Image and Image Maps


<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page
and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"
height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="coffee.htm">
</map>

</body>
</html>

OUTPUT:
Practical 2
Design a webpage that makes use of
a. Table tags
INPUT:
<html>
<head>
<title>table in html.</title>
</head>
<body>
<table border="5" height="25%" width="50%">
<caption> <h1> Report Card </h1> </caption>

<tr bgcolor="red">
<th colspan="5"> Report Card </th>
</tr>

<tr bgcolor="yellow">
<th rowspan="2"> Name</th>
<th rowspan="2"> Roll No</th>
<th colspan="3"> Mark</th>
</tr>

<tr bgcolor="yellow">
<th>S1</th>
<th>S2</th>
<th>S3</th>
</tr>

<tr align="center" bgcolor="aqua">


<td>abc</td>
<td>101</td>
<td>40</td>
<td>50</td>
<td>60</td>
</tr>

<tr align="center" bgcolor="aqua">


<td>xyz</td>
<td>102</td>
<td>50</td>
<td>40</td>
<td>60</td>
</tr>

<tr align="center" bgcolor="aqua">


<td>pqr</td>
<td>103</td>
<td>60</td>
<td>50</td>
<td>40</td>
</tr>

</table>
</body>
</html>
OUTPUT:
b. Form Tags (forms with various form elements)
INPUT:
<html>
<head>
<title>Form</title>
</head>
<body>
<h2>Form using html</h2>
<form action="/action_page.php">
<fieldset>
<legend>Personal Data</legend>

<p><label><b>Name</b><input type="text" id="n1" Name="txt"/> </label></p>


<p><label><b>SurName</b><input type="text" id="sn" Name="txtSN"/>
</label></p>
<p><label><b>Last Name</b><input type="text" id="ln" Name="txtln"/>
</label></p>
<p><label><b>Gender</b><input type="radio" id="g1" Name="gender"/>Male
<input type="radio" id="g1" Name="gender"/>Female
</label></p>

<p><label><b>Age</b><input type="text" id="age" Name="a"/> </label></p>

<p><label><b>Hobbies</b>
<input type="checkbox" id="c1" Name="c1"/>Reading
<input type="checkbox" id="c2" Name="c2"/>Dancing
<input type="checkbox" id="c3" Name="c3"/>Singing </label></p>

<p><label><b>Address</b>
<textarea row="3" column="10"></textarea> </label></p>

<p><label><b>City</b>
<select>
<option value="mumbai">Mumbai</option>
<option value="delhi">Delhi</option>
<option value="pune">Pune</option>
<option value="bangalore">Bangalore</option>
<option value="chennai">Chennai</option>
</select> </label></p>
<p><label><b>Education</b>
<input type="checkbox" id="e1" name="e1">SSC<br>
<input type="checkbox" id="e2" name="e2">HSC<br>
<input type="checkbox" id="e3" name="e3">Graduation<br>
<input type="checkbox" id="e4" name="e4">Post-Graduation<br>
<input type="checkbox" id="e5" name="e5">Phd<br>
<button type="submit">Submit</button> </label></p>

</fieldset>
</form>
</body>

</html>

OUTPUT:
c. Navigation across multiple pages
<html>
<head>
<title>navigation</title>
</head>
<body>

<p>To create a link that opens in the user's Conversation and tables</p>
<p><a href="hello.html">Click here to see convestation</a></p>
<p><a href="D:\web programs\table.html">Click here to see tables</a></p>

</body>
</html>
OUTPUT:
d). Embedded Multimedia elements
<html>
<head>
</head>

<title>embeded</title>

<body bgcolor="red">

<audio controls height="250px" width="450px">


<source src="golden.mp3" type="audio/MP3">
</audio><br><br>

<p><h2> Audio play-back..</h2></p>

<video controls height="250px" width="450px"><br>


<source src="airoplane.mp4" type="video/mp4">
</video>
<p><h2> Video play...</h2></p>

</body>
</html>
OUTPUT:

Practical 3

Aim:-Design a webpage that make use of Cascading Style Sheets with


a. CSS properties to change the background of a Page
<html>
<head>
<style>
body
{
background-color: lightblue;
background-image: url("flowers.jpg");
background-repeat: repeat-x;
background-position:right-top;
background-attachment: fixed;
}
</style>
</head>
<body>

h1>The background-attachment Property</h1>

<p>The background-attachment property specifies whether the


background image should scroll or be fixed (will not scroll with the rest of
the page).</p>

<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize


the browser window.</p>

</html>

Output:-
b. CSS properties to change Fonts and Text Styles

<head>
<style>
<style>
p.normal {
font-weight: normal;
}

p.light {
font-weight: lighter;
}

p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>

<h1>The font-weight property</h1>

<p class="normal">This is a paragraph.</p>


<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>

OUTPUT:
c).CSS properties for positioning an element.
<html>
<head>
<style>

div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
h2 {
position: absolute;
left: 100px;
top: 217px;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
<p>Let the user resize both the height and the width of this div
element.</p>
<p>To resize: Click and drag the bottom right corner of this div
element.</p>
</div>
<h1>The position Property</h1>

<h2>This is a heading with an absolute position</h2>


<p>With absolute positioning, an element can be placed
anywhere on a page.
The heading below is placed 100px from the left of the page and
150px from the top of the page.</p>

</body>
</html>
OUTPUT:

Practical 4
Write Javascript code for,
A)
A) Aim: Performing various mathematical operation such as calculating
factorial.
<html>
<head>
<script type="text/javascript">
function fact()
{
var n=prompt("enter a number");
var ans=1;
for(i=1;i<=n;i++)
{
ans=ans*i;
}
document.write("the factorial is"+ans);
}
</script>
</head>
<body>
<form>
<input type="button" onClick="fact()"value="Calculate">
</body>
</html>

OUTPUT:
B) Aim:- Validating the various Form Elements.

<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">

function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.pass.value == "")
{
alert( "Please provide your correct password" );
document.myForm.pass.focus() ;
return false;
}
if(document.myForm.pass.value.length<8)
{
alert( "Please provide your correct password" );
document.myForm.pass.focus() ;
return false;
}
if( document.myForm.Zip.value == "" ||isNaN(
document.myForm.Zip.value )
||document.myForm.Zip.value.length != 5 )
{
alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}

return( true );
}
</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm"
onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Password</td>
<td><input type="password" name="pass" /></td>
</tr>
<tr>

<td align="right">Zip Code</td>


<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>

</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>

OUTPUT

Practical 5
Write JavaScript code for,
Aim: Demonstrating different JavaScript Objects as string, Math, date.

String
<html>
<body>
<h2>JavaScript String Properties</h2>

<p>The length property returns the length of a string:</p>

<p id=”demo”></p>

<script>
let text = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
document.getElementById(“demo”).innerHTML = text.length;
</script>

</body>
</html>

OUTPUT

Math:-
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.round()</h2>

<p>Math.round(x) returns the value of x rounded to its nearest


integer:</p>

<p id="demo"></p>

<p>Math.pow(x,y) returns the value of x to the power of y:</p>

<p id="demo1"></p>

<script>
document.getElementById("demo").innerHTML =
Math.round(4.6);

document.getElementById("demo1").innerHTML =
Math.pow(8,2);
</script>
</body>
</html>
OUTPUT
Time:-

<html>
<body>

<h2>JavaScript new Date()</h2>


<p id="demo"></p>
<p id="demo1"></p>

<script>
const d = new Date(2018, 11, 24, 10, 33, 30, 0);
const d1 = new Date(2018, 06, 25);
document.getElementById("demo").innerHTML = d;
document.getElementById("demo1").innerHTML = d1;
</script>

</body>
</html>
OUTPUT
Practical 6
Aim: Create a XML file with Internal /External DTD and display it
using,
XML file:
Creating Students.xml as:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl "href="Rule.xsl" ?>
<student>
<s>
<name> Divyank Singh Sikarwar </name>
<branch> CSE</branch>
<age>18</age>
<city> Agra </city>
</s>
<s>
<name> Aniket Chauhan </name>
<branch> CSE</branch>
<age> 20</age>
<city> Shahjahanpur </city>
</s>
<s>
<name> Simran Agarwal</name>
<branch> CSE</branch>
<age> 23</age>
<city> Buland Shar</city>
</s>
<s>
<name> Abhay Chauhan</name>
<branch> CSE</branch>
<age> 17</age>
<city> Shahjahanpur</city>
</s>
<s>
<name> Himanshu Bhatia</name>
<branch> IT</branch>
<age> 25</age>
<city> Indore</city>
</s>
</student>

XSLT file:
Creating Students.xml as:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h1 align="center">Students' Basic Details</h1>
<table border="3" align="center" >
<tr>
<th>Name</th>
<th>Branch</th>
<th>Age</th>
<th>City</th>
</tr>
<xsl:for-each select="student/s">
<tr>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="branch"/></td>
<td><xsl:value-of select="age"/></td>
<td><xsl:value-of select="city"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

OUTPUT:

Practical 7
Write PHP Script for,
A) Retrieving data from HTML forms.
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>

<?php
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
}

if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
}

if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
}

if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}

if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

<h2>PHP Form Validation Example</h2>


<p><span class="error">* required field</span></p>
<form method="post" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5"
cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="other">Other
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>

<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>
</body>
</html>
OUTPUT:

Practical 8
Aim: Design a webpage with some Jquery animation effects.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.j
s"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>

<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>

<button>Show Value</button>

</body>
</html>

OUTPUT:

You might also like