Web Technologies Practical Record
Web Technologies Practical Record
G College
Narayanaguda –Hyderabad
College Seal
Index
Page
S.No Name of the Program
No.
1
Write a HTML program to create your college web site using
15
multi column layouts.
2
1. Write a HTML program using basic text formatting tags, <p>,
<br>, <pre>.
<html>
<head>
<title>TEXT-FORMATTING-TAGS</title>
</head>
<body>
<p> This is
a paragraph. </p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and line breaks
</pre>
</body>
</html>
3
2. Write a HTML program by using text formatting tags.
<html>
<head>
<title>TEXT-FORMATTING-TAGS</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p> This is
a paragraph. </p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and line breaks
</pre>
</body>
</html>
4
3. Write a HTML program using presentational element tags tags
<b>, <i>, <strike>, <sup>, <sub>, <big>, <small>, <hr>
<html>
<head>
<title>Presentational-Elements</title>
</head>
<body>
Defines text: <b>bold </b> typeface <br>
Defines text: <i>italic </i> typeface <br>
Defines text : <u>underlined </u> typeface<br>
It strikes the text <strike>strikethrough </strike>
<br>
Formula for Water : H<sub>2</sub>O <br>
E = mc<sup>2</sup>. It's the world's most famous equation
<br>
The following word should be <big>bigger</big> than
those around it.<br>
The following word should be <small>smaller</small> than
those around it.<hr>
</body>
</html>
5
4. Write a HTML program using phrase element tags <blockquote>,
<cite>,<abbr>, <acronym>, <kbd>, <address>
<html>
<head>
<title>Phrase-Elements</title>
</head>
<body>
<p>Hover mouse over the HTML and see the abbreviation <br>
An <abbr title = "Hypertext Markup language">HTML
</abbr>language is used to create web pages. </p>
<blockquote cite="https://blog.kerridgecs.com/10-
inspirational-tech-quotes">
Technology is best when it brings people together
</blockquote>
<cite>-Matt Mullenweg</cite> <br>
<p>Hover mouse over the content and see the acronym <br>
<acronym title="Hypertext Markup Language"> HTML
</acronym></p>
To copy text, you can use the keyboard shortcut:
<code>Ctrl</code> + <code>c</code> <br>
<p>College Address :</p>
<address>
3-4-875/A/1, Barkatpura Bus Depot Road,
Barkatpura, Kachiguda, Hyderabad,
Telangana 500027 </address>
</body>
</html>
6
7
5. Write a HTML program using different list types.
<!DOCTYPE html>
<html>
<head>
<title>Types of Lists</title>
</head>
<body>
<h3> Here is an unordered list, which is just a bulleted
list:</h3>
<ul>
<li>Bullet point number one</li>
<li>Bullet point number two</li>
<li>Bullet point number three</li>
</ul>
8
9
6. Create a HTML page that displays ingredients and instructions to
prepare a recipe.
<html>
<head>
<title>recipe</title>
</head>
<body bgcolor= cyan>
<h2>Banana Milkshake</h2>
<b>Ingredients:</b>
<ul>
<li>1 banana</li>
<li>250ml Milk</li>
<li>3 Ice cubes</li>
</ul>
<b>Method:</b>
<ol>
<li>Peel the banana and add to the blender</li>
<li>Add the milk and ice cubes to the blender</li>
<li>Turn on the blender for 30 seconds</li>
</ol>
<hr>
</body>
</html>
10
7. Write a HTML program using grouping elements <div> and <span>.
<!Doctype html>
<html>
<head>
<title> Grouping Elements </title>
<style>
.Divclass
{
border: 5px outset green;
background-color: gray;
text-align: center;
color: yellow;
}
</style>
</head>
<body bgcolor="LightSalmon">
Hello User!...
<div class="Divclass">
Grouping Elements are div and span tags
<br> <br>
Div tag is a generic container and a block-level tag.<br>
This tag basically used to group or collection of various
Html tags <br>
Span tag is used as a <span style=color:cyan> generic
container of inline elements </span>.
</div>
</body>
</html>
11
8. Write a HTML Menu page for Example cafe site
<html>
<head>
<title> menu Page of Cafe </title>
</head>
<body>
<h1>Tea Time</h1>
<h4>TEA</h4>
<ul>
<li>Masala Tea</li>
<li>Ginger Tea</li>
<li>Green Tea</li>
<li>Ginger Lemon Tea</li>
<li>Badam Tea</li>
</ul>
<h4>SNACKS</h4>
<ul>
<li>Samosa</li>
<li>Osmania Biscuit</li>
</ul>
<h4>MILK SHAKES</h4>
<ul>
<li>Chocolate Shake</li>
<li>Vanilla Shake</li>
<li>Rose Milk</li>
</ul>
</body>
</html>
12
13
9. Write a HTML program using images, audios, videos.
<!DOCTYPE html>
<html>
<head>
<title> Image Audio Video tag in html</title>
</head>
<body>
<audio controls>
<source src="C:\Users\system-28\Downloads\Roar Of RRR.mp3"
type="audio/mpeg">
</audio>
<br>This is audio file<br>
</body>
</html>
14
10. Write a HTML program to create your time table.
<html>
<head>
<title> Time Table</title>
</head>
<body>
<h1 align="center" style="color:red">
Avanthi Degree & P.G College </h1>
<center>
<table border="2" bordercolor="red" rules="all" height="60%"
width="60%" style="font-size:17px">
<tr align="center">
<th >Group</th>
<th>9:00 to 9:45</th>
<th>9:45 to 10:30</th>
<th>10:30 to 11:15</th>
<th rowspan="4" style="writing-mode:vertical-rl">Break</th>
<th>11:25 to 12:10</th>
<th>12:10 to 01:00</th>
</tr>
15
<td>Computer Science</td>
<td>English</td>
<td>Mathematics</td>
<td>Second Languages</td>
</tr>
</table>
</center>
</body>
</html>
16
17
11. Write a HTML program to create a form using text inputs, password
inputs, multiple line text input, buttons, check boxes,
radio buttons, select boxes, file select boxes.
<html>
<head>
<title>FormControls</title>
</head>
<body>
<form action="https://www.osmania.ac.in/">
UserName: <input type="text" name="uname"><br>
Password: <input type="password" name="pwd"><br>
E-mail id:<input type="text"><br>
Gender:
<input type="radio" name="radiogroup1"> Male
<input type="radio" name="radiogroup1"> Female<br><br>
Contact Number: <input type="text" name="mobile">
<h3>Educational Qualification</h3>
Degree: <select>
<option selected>-- Select Group --</option>
<option>B.Com</option>
<option>B.Sc</option>
<option>BBA</option>
<option>B.A</option>
</select><br>
Hobbies: <br> <input type="checkbox">Playing chess
<input type="checkbox">Reading Books
<input type="checkbox">Watching Movies <br>
Address:<br>
<textarea cols="30" rows="5" >
Enter Address Here
</textarea><br><br>
Attach Resume: <input type="file"><br><br>
<input type="submit" value="Submit">
</body>
</html>
18
19
12. Write a HTML program to create a frames and links between frames.
Anchor.html
<html>
<head>
<title>Anchor Tag</title>
</head>
<body>
<a href="https://www.osmania.ac.in/" target="Frame2">
Osmania University </a> <br>
<a href="https://www.w3.org/" target="Frame2"> W3C</a>
</body>
</html>
Frames.html
<html>
<head>
<title>Frames</title>
</head>
<frameset cols="50%,50%" border="2" bordercolor="red">
<frame src="anchor.html" name="Frame1">
<frame src=" " name="Frame2">
<noframes>
</noframes>
</frameset>
</html>
20
21
13. Write a HTML program to create different types of style sheets.
Inline Stylesheet
<html>
<head>
<title>Inline Style Sheets</title>
</head>
<body>
<p style="color:red; background-color:cyan">
Welcome to Inline Style Sheets
</p>
</body>
</html>
Internal Stylesheet
<html>
<head>
<title>Internal Style Sheets</title>
<style type="text/css">
p
{
color:red;
background-color:cyan;
}
</style>
</head>
<body>
<p> Welcome to Internal Style Sheets</p>
<b> Bold tag</b>
</body>
</html>
22
External Stylesheet
Styles.css
p
{
color:red;
background-color:cyan;
}
Externalstylesheet.html
<html>
<head>
<title>External Style Sheets</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Welcome to External Style Sheet </p>
<b>Bold tag</b>
</body>
</html>
23
14. Write a HTML program to create CSS on links, lists, tables and
generated content
CSS on links
<html>
<head>
<title>Links</title>
<style type="text/css">
a:link
{
background-color:pink;
}
a:visited
{
color:red;
text-decoration:underline;
}
a:hover
{
color:yellow;
text-decoration:overline;
background-color:white;
}
a:active
{
color:blue;
}
</style>
</head>
<body>
<a href="https://www.osmania.ac.in/" target="_blank">
osmania University
</a>
</body>
</html>
24
CSS on lists
<html>
<head>
<title>list</title>
<style type="text/css">
ul
{
list-style-position: inside;
list-style-image:url
("https://mdn.mozillademos.org/files/11981/starsolid.gif");
}
ol
{
list-style-type: upper-roman;
}
</style>
<body>
<ul>
<li>coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>B.Sc</li>
<li>B.Com</li>
<li>BBA</li>
</ol>
</body>
</html>
25
CSS on Table
<html>
<head>
<title>Table</title>
<style type="text/css">
table
{
border-spacing:40px 20px;
text-align:center;
}
caption
{
caption-side:bottom;
}
th
{
background-color: green;
color: white;
}
tr:hover
{
background-color: cyan;
}
</style>
<table border="2">
<caption>Faculty names</caption>
<tr>
<th>S.No</th>
<th>Faculty Name</th>
</tr>
<tr>
<td>1</td>
<td>Santhosh</td>
26
</tr>
<tr>
<td> 2 </td>
<td> Narendra Chary </td>
</tr>
<tr>
<td> 3 </td>
<td> Shanthi Priya </td>
</tr>
</table>
</body>
</html>
27
Css on generated Content :
<html>
<head>
<title>External Style Sheets</title>
<style>
.demonstration:before
{
content: "☻";
display: block;
font-size: 1.5rem;
}
.demonstration:after
{
content: "!!!";
color: cornflowerblue;
font-size: 1.5rem;
}
</style>
</head>
<body>
<p class="demonstration">A paragraph that uses the
<em>:before and :after</em> pseudo-element</p>
</body>
</html>
28
15. Write a HTML program to create your college web site using multi
Column layouts.
<!DOCTYPE html>
<html>
<head>
<title>College Web site</title>
<style>
#header
{
background-color:red;
color:white;
text-align:center;
padding:10px;
}
#nav
{
line-height:30px;
background-color:silver;
height:210px; width:20%;
float:left;
padding:5px;
}
#section
{
width:80% float:left;
padding:10px;
}
#footer
{
background-color:red;
color:white; clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
29
<body>
<div id="header">
<h2>Avanthi Degree & P.G College</h2>
</div>
<div id="nav">
About<br>
Academics<br>
Admissions<br>
Department<br>
Placements<br>
Events<br>
IQAC<br>
</div>
<div id="section">
<h2>Start Learning Today </h2>
<p> Our Academy has a first rate academic program,
<br>a fully qualified and very well educated teaching
staff,
<br>bright and comfortable classrooms, continuous
student counseling and advising,
<br> and a very effective and enthusiastic student
support staff.
</p>
</div>
<div id="footer">
Copyright @ avanthicollege.ac.in
</div>
</body>
</html>
30
31
17. Write a HTML program to create login form and verify username and
password
<html>
<head>
<title> Login page </title>
</head>
<body>
<h1 style="font-family:Comic Sans Ms;
text-align="center"; font-size:20pt;
color:#00FF00;">
Simple Login Page
</h1>
<form name="login">
Username : <input type="text" name="userid"> <br>
Password : <input type="password" name="pswrd"> <br>
<input type="button" onclick="check(this.form)" value="Login">
<input type="reset" value="Cancel">
</form>
<script language="javascript">
function check(form) /*function to check userid & password*/
{
/*the following code checkes whether the entered userid and
password are matching*/
if(form.userid.value=="santhosh" && form.pswrd.value == "1234")
{
window.open('https://www.osmania.ac.in/') /*opens the target
page while Id & password matches*/
}
else
{
alert("Error Password or Username")/*displays error message*/
}
}
</script>
</body>
</html>
32
33
18. Write a JavaScript program to calculate area of rectangle using
Function.
<html>
<head>
<title> Area of Rectangle </title>
</head>
<body>
<script>
var length = parseInt(prompt("Type the length of a Rectangle : "));;
var width = parseInt(prompt("Type the width of a Rectangle : "));;
function areaRectangle(width, length)
{
var area = width * length;
return area;
}
document.write("Area of
Rectangle="+areaRectangle(width,length)+"<br>");
</script>
</body>
</html>
34
19. Write a JavaScript program to wish good morning, good afternoon,
good evening depending on the current time.
<html>
<head>
<title>Wishing on time</title>
</head>
<body>
<script type="text/JavaScript">
date = new Date();
time = date.getHours();
if (time < 12)
document.write('Good Morning');
else if (time > 12 && time < 16)
document.write('Good Afternoon')
else
document.write('Good Evening');
</script>
</body>
</html>
35
20. Write a JavaScript program using switch case?
<html>
<head>
<title> Switch Case </title>
</head>
<body>
<p id="demo"></p>
<script>
var day;
switch (new Date().getDay())
{
case 0: day = "Sunday";
break;
case 1: day = "Monday";
break;
case 2: day = "Tuesday";
break;
case 3: day = "Wednesday";
break;
case 4: day = "Thursday";
break;
case 5: day = "Friday";
break;
case 6: day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>
</body>
</html>
36
21. Write a JavaScript program to print multiplication table of given
number using loop
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Multiplication Table</h1>
<script>
var table = 9;
var length = 10;
var i = 1;
37
22. Write a JavaScript programs using any 5 events.
onclick event
<html>
<head>
<title> Javascript Events</title>
</head>
<body>
<h3> Click the button to display message </h3>
<script >
function display()
{
alert("Onclick Event");
}
</script>
<form>
<input type="submit" onclick="display()" value="Click Here">
</form>
</body>
</html>
38
onkeyup event
<!DOCTYPE html>
<html>
<head>
<title>onkeyup event</title>
</head>
<body>
<script>
function display()
{
alert("event activated when the user releases a key.");
}
</script>
<form>
Enter the text:
<input type="text" onkeyup= "display()">
</form>
</body>
</html>
39
onload event
<!DOCTYPE html>
<html>
<head>
<title> HTML onload event</title>
<script>
function display()
{
alert(" Onload event")
}
</script>
</head>
<body onload="display()">
<h2> Page Loaded successfully </h2>
</body>
</html>
40
onmouseup and onmousedown event
<!DOCTYPE html>
<html>
<head>
<title> onmousedown and up attribute</title>
</head>
<body>
<p onmousedown="mouseDown(this)" onmouseup="mouseUp(this)">
Click Here to check onmousedown Event.<br>
<script>
function mouseDown(obj)
{
obj.style.color = "red";
}
function mouseUp(obj)
{
obj.style.color = "blue";
}
</script>
</body>
</html>
41
onresize event
<!DOCTYPE html>
<html>
<head>
<title> onresize event</title>
<script>
function display()
{
alert ("You have changed the size of thewindow!");
}
</script>
</head>
<body onresize="display()">
<p>Try to resize the browser window</p >
</body>
</html>
42
23. Write a JavaScript program using JavaScript built in objects.
<html>
<head>
<title>String Objects</title>
</head>
<body>
<script>
var st="Avanthi Degree College";
document.write("Length of the String is : "+st.length);
document.write("<br> charcater index is : "+st.charAt(0));
document.write("<br> Ascii value of the index is : "
+st.charCodeAt(2));
document.write("<br> index of the character : "
+st.indexOf("e"));
document.write("<br> index of the character : "
+st.lastIndexOf("e"));
document.write("<br> lowercase : "+st.toLowerCase());
document.write("<br> uppercase : "+st.toUpperCase());
document.write("<br> font color: "+st.fontcolor('red'));
document.write("<br> font size: "+st.fontsize(20));
</script>
</body>
</html>
43
24. Write a JavaScript program to create registration form and
validate all fields using form validation.
<!DOCTYPE html>
<html>
<head>
<title>Reg Form</title>
<style type="text/css">
form
{
text-align: center;
font-family: Calibri;
font-size: 20px;
border: 3px solid black;
width: 600px;
margin: 20px auto;
}
</style>
<script>
function validate()
{
var fname = document.reg_form.fname;
var lname = document.reg_form.lname;
var txtarea = document.reg_form.txtarea;
var gender = document.reg_form.gender;
var email = document.reg_form.email;
var mobile = document.reg_form.mobile;
var course = document.reg_form.course;
if (fname.value.length <= 0)
{
alert("Name is required");
fname.focus();
return false;
}
44
if (lname.value.length <= 0)
{
alert("Last Name is required");
lname.focus();
return false;
}
if (gender.value.length <= 0)
{
alert("Gender is required");
gender.focus();
return false;
}
if (email.value.length <= 0)
{
alert("Email Id is required");
email.focus(); return false;
}
if (mobile.value.length <= 0)
{
alert("Mobile number is required");
mobile.focus(); return false;
}
if (course.value == "select course")
{
alert("Course is required");
course.focus(); return false;
}
if (txtarea.value.length <= 0)
{
alert("address is required");
txtarea.focus(); return false;
}
}
</script>
</head>
45
<body>
<center>
<h1>Form Validation using HTML,CSS,JavaScript</h1>
</center>
<hr>
<form action=" " name="reg_form" onsubmit="return validate()">
<h2>Registration Form</h2>
<label>First Name: </label>
<input type="text" name="fname" placeholder="First Name"><br>
<label>Last Name: </label>
<input type="text" name="lname" placeholder="Last Name"> <br>
<label>Gender: </label>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="femele">Female <br>
<label>Email Id: </label>
<input type="text" name="email" placeholder="[email protected]">
<br>
<label>Mobile: </label>
<input type="number" name="mobile"> <br>
<label>Course: </label>
<select name="course">
<option value="select course">select course</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JAVASCRIPT</option>
</select> <br>
<label>Address: </label> <br>
<textarea name="txtarea" rows="3" cols="30"
placeholder="Enter Address here"></textarea><br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</form>
</body>
</html>
46
47
48
49
50
25. Write a XML Program to represent Student Data using DTD
STUDENT.XML
<students>
<student>
<name>Raju</name>
<group>MSCs</group>
<gender>Male</gender>
</student>
<student>
<name>Ramya</name>
<group>MSCs</group>
<gender>Female</gender>
</student>
<student>
<name>Ramu</name>
<group>MSCs</group>
<gender>Male</gender>
</student>
</students>
51
Internal DTD of Given XML
<!DOCTYPE students[
<!ELEMENT students (student+)>
<!ELEMENT student (name,group,gender)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT group (#PCDATA)>
<!ELEMENT gender (#PCDATA)>
]>
<students>
<student>
<name>Raju</name>
<group>MSCs</group>
<gender>Male</gender>
</student>
<student>
<name>Ramya</name>
<group>MSCs</group>
<gender>Female</gender>
</student>
<student>
<name>Ramu</name>
<group>MSCs</group>
<gender>Male</gender>
</student>
</students>
52
External DTD of Given XML
Students.dtd
<!ELEMENT students (student+)>
<!ELEMENT student (name,group,gender)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT group (#PCDATA)>
<!ELEMENT gender (#PCDATA)>
Students.xml
<!DOCTYPE students SYSTEM "D:\students.dtd">
<students>
<student>
<name>Raju</name>
<group>MSCs</group>
<gender>Male</gender>
</student>
<student>
<name>Ramya</name>
<group>MSCs</group>
<gender>Female</gender>
</student>
<student>
<name>Ramu</name>
<group>MSCs</group>
<gender>Male</gender>
</student>
</students>
53
26. Write a XML Program to represent Data using XML Schema Definition.
STUDENT.XML
<students>
<student>
<name>Raju</name>
<group>MSCs</group>
<gender>Male</gender>
</student>
<student>
<name>Ramya</name>
<group>MSCs</group>
<gender>Female</gender>
</student>
<student>
<name>Ramu</name>
<group>MSCs</group>
<gender>Male</gender>
</student>
</students>
54
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="students">
<xs:complexType>
<xs:sequence>
<xs:element name="student" maxOccurs="unbounded"
minOccurs="0">
<xs:complexType>
<xs:sequence>
<xs:element type="xs:string" name="name"/>
<xs:element type="xs:string" name="group"/>
<xs:element type="xs:string" name="gender"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
55