Scribd
Upload
4 views50 pages

HTML It

The document is a practical record for the Skill Based Subject 2 (Lab) on HTML, XML, and JavaScript for the Bachelor of Information Technology program at KPR College for the academic year 2022-2023. It includes a list of practical exercises, their dates, and aims, along with example programs demonstrating various web development concepts. The record is certified for submission to Bharathiar University for practical examinations.

Uploaded by

rithikajennifer96
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
4 views50 pages

HTML It

The document is a practical record for the Skill Based Subject 2 (Lab) on HTML, XML, and JavaScript for the Bachelor of Information Technology program at KPR College for the academic year 2022-2023. It includes a list of practical exercises, their dates, and aims, along with example programs demonstrating various web development concepts. The record is certified for submission to Bharathiar University for practical examinations.

Uploaded by

rithikajennifer96
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

KPR College of Arts Science and Research

(Affiliated to Bharathiar University, Coimbatore)

Avinashi Road, Arasur, Coimbatore – 641 407

SCHOOL OF COMPUTING SCIENCE

DEPARTMENT OF INFORMATION TECHNOLOGY

PRACTICAL RECORD

SKILL BASED SUBJECT 2 (LAB): HTML, XML and


JavaScript - Lab

[4ZP]

BACHELOR OF INFORMATION TECHNOLOGY

ACADEMIC YEAR : 2022-2023

BATCH : 2021 - 2024

SEMESTER : IV (EVEN)
KPR College of Arts Science and Research
(Affiliated to Bharathiar University, Coimbatore)

Avinashi Road, Arasur, Coimbatore – 641 407

Register Number
Name
Class II – BSc INFORMATION TECHNOLOGY
Subject SKILL BASED SUBJECT 2 (LAB): HTML, XML
and JavaScript - Lab

Subject Code 4ZP

CERTIFICATE
Certified that this is a bonafide record of practical work done by the above student
during Even semester of the academic year 2022-2023.

Submitted for the Bharathiar University Practical Examination held at KPR College of
Arts Science and Research on 18.04.2023 (FN/AN).

Faculty In-Charge Head of the Department

Internal Examiner External Examiner


INDEX

Ex. Page
Date Title Signature
No. No.
SIMPLE WEB PAGE USING STANDARD HTML
1 08.02.2023
TAGS
PERSONAL INFORMATION AND MAP USING
2 15.02.2023 INPUT, META, SCRIPT, FORM, APPLET,
BGSOUND & MAP TAGS
COLLEGE WEBSITE USING VARIOUS
3 28.02.2023 ATTRIBUTES OF STANDARD HTML
ELEMENTS
STUDENTS MARKSHEET USING ALERT(),
4 08.03.2023
EVAL() AND PARSELNT() IN JAVASCRIPT
JAVASCRIPT CODE DEMONSTRATING THE USE
5 10.03.2023
OF USER-DEFINED & BUILT-IN OBJECTS
LOGIN FORM VALIDATION USING VARIOUS
6 15.03.2023
INPUT ELEMENTS IN JAVASCRIPT
YELLOW PAGES USING XML DECLARATION,
7 17.03.2023 ELEMENT DECLARATION, ATTRIBUTE
DECLARATION IN XML
ADDRESS BOOK USING INTERNAL DTD,
8 24.03.2023 EXTERNAL DTD, ENTITY DECLARATION IN
XML
[Link]: 1

DATE: 08.02.2023 SIMPLE WEB PAGE USING STANDARD HTML


TAGS

AIM:

ALGORITHM:
PROGRAM :
<!DOCTYPE html>
<html>
<head>
<title>My Simple Web Page</title>
</head>
<body>
<header> <h1>Welcome to my simple web page </h1> </header>
<main>
<h2>About me</h2>
<p>Hi, my name is John and I am learning how to code.</p>
<h2>My Hobbies</h2>
<ul>
<li>Reading</li>
<li>Playing video games</li>
<li>Hiking</li>
</ul>
<h2>Contact me</h2>
<p>Email: john@[Link]</p>
</main>
<footer> <p>Copyright © 2023 John</p> </footer>
</body>
</html>
OUTPUT:
[Link]
PERSONAL INFORMATION AND MAP USING
DATE: 15.02.2023 INPUT, META, SCRIPT, FORM, APPLET,
BGSOUND & MAP TAGS

AIM:

ALGORITHM:
PROGRAM :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<meta name="description" content="This is a sample web page that uses various
HTML elements.">
<meta name="keywords" content="HTML, input, meta, script, form, applet,
background sound, map">
<meta name="author" content="Your Name">
</head>
<body background="[Link]" onload="playSound()">
<h1>Welcome to My Web Page</h1>
<form>
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name" required>
<label for="district">Enter your district:</label>
<input type="district" id="name" name="district" required>
<input type="submit" value="Submit">
</form>
<applet code="[Link]" width="300" height="200">
<param name="param1" value="value1">
<param name="param2" value="value2">
</applet>
<script>
function playSound() {
var audio = new Audio('background_music.mp3');
[Link]();
}
</script>
<iframe
src="[Link]
7906!2d77.36381290000001!3d11.108582250000001!2m3!1f0!2f0!3f0!3m2!1i1024!2
i768!4f13.1!3m3!1m2!1s0x3ba907b0424d75b9%3A0x4750551698a91687!2sTiruppur
%2C%20Tamil%20Nadu!5e0!3m2!1sen!2sin!4v1681550430011!5m2!1sen!2sin"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</script>
</body>
</html>
APPLET PROGRAM:
import [Link];
import [Link];
public class MyApplet extends Applet
{
private String param1;
private String param2;
public void init()
{
param1 = getParameter("param1");
param2 = getParameter("param2");
}
public void paint(Graphics g)
{
[Link]("Applet parameter 1: " + param1, 20, 20);
[Link]("Applet parameter 2: " + param2, 20, 40);
}
}
OUTPUT:
[Link]
DATE: 28.02.2023 COLLEGE WEBSITE USING VARIOUS
ATTRIBUTES OF STANDARD HTML
ELEMENTS

AIM:

ALGORITHM:
PROGRAM :
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>KPRCAS</title>

</head>

<body background="[Link]"> <p><br> <br>

&nbsp;&nbsp;&nbsp;<img src="[Link]" width="170" height="87" alt=""/>


</p>

<p><img src="kprcas_pic.jpg" width="800" height="300" alt=""/></br>

</p>

<ul type="square" >

<font color=#7F0709 size=30> <li>About</li></font>

<font color=#0C16DC face="calibri"> <h3>

KPRCAS founder Dr. K P Ramasamy hails from an agricultural family who has

overcome several obstacles in his path he had travelled before attaining the present
milestone.

KPR Mill Limited has stepped into various sectors including sugar, power generation,
automobiles and education.

KPRCAS is such a novel feather added to the crown of KPR Group of Institutions
which was established with vibrant vision and mission to mold the young minds to
reach the next stage in career ladder.

</h3></font>

<font color=#7F0709 size=30> <li>Departments</li></font>


<font color=#0C16DC face="calibri">

There are 11 departments in our institution.

<li><a href="[Link]
new/">Information Technology</a></li>

<li><a href="[Link]

Science</a></li>

<li>Computer Science with Data Analytics</li>

<li>Commere</li>

<li>Commerce with Computer Applications</li>

<li>Commerce with Professional Accounting</li>

<li>Commerce with Business and Insurance</li>

<li>Commerce with E-Commerce</li>

<li>Commerce with Business Analytics</li>

<li>Business Administration</li>

<li>Business Administration with CA</li> </h3></font>

<font color=#7F0709 size=30> <li>Students</li></font>

<font color=#0C16DC face="calibri">

<table width="200" border="1">

<tbody>

<tr>

<td>Department</td>

<td>Boys</td>

<td>Girls</td>
<td>Total</td>

</tr>

<tr>

<td>[Link](IT)</td>

<td>200</td>

<td>120</td>

<td>320</td>

</tr>

<tr>

<td>[Link](CS)</td>

<td>150</td>

<td>200</td>

<td>350</td>

</tr>

<tr>

<td>[Link](CS with DA)</td>

<td>90</td>

<td>185</td>

<td>275</td>

</tr>

<tr>

<td>[Link]</td>

<td>250</td>
<td>200</td>

<td>450</td>

</tr>

</tbody>

</table>

</font>

<font color=#7F0709 size=30> <li>News</li></font>

<font color=#0C16DC face="calibri">

<ul>

<li>International conference on "Cyber Security and its threats" will be conducted

on 01.06.2022</li>

<li>Workshop on &quot;Python and R&quot; will be conducted on

02.06.2022</li>

<li>Industrial visit to Bangalore is on 04.06.2022</li>

</ul>

</font>

</ul>

</body>

</html>
OUTPUT:
[Link] STUDENTS MARKSHEET USING ALERT(),

DATE: 08.03.2023 EVAL() AND PARSELNT() IN JAVASCRIPT

AIM:

ALGORITHM:
PROGRAM :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body background="pgm4_bg.jpg">
<h1 align=center> STUDENTS MARKSHEET</h1>
<form id="form1" name="form1" method="post">
<p>
<label for="textfield">Enter Roll Number :</label>
<input type="text" name="textfield" id="id">
</p>
<p>
<label for="textfield2">Enter Name:</label>
<input type="text" name="textfield2" id="name">
</p>
<p>
<label for="textfield3">Tamil Mark:</label>
<input type="text" name="textfield3" id="tamil">
</p>
<p>
<label for="textfield4">English Mark:</label>
<input type="text" name="textfield4" id="english">
</p>
<p>
<label for="textfield5">Maths Mark :</label>
<input type="text" name="textfield5" id="maths">
</p>
<p>
<label for="textfield6">Total</label>
<input type="text" name="textfield6" id="total">
</p>
<p>
<label for="textfield7">Average:</label>
<input type="text" name="textfield7" id="average">
</p>
<p>
<input type="button" name="button" id="button" onclick="calc()"
value="Calculate">
</p>
</form>
<script>
function calc()
{
x=parseInt([Link]("tamil").value);
y=parseInt([Link]("english").value);
z=parseInt([Link]("maths").value);
res=eval(x+y+z);
[Link]("total").value=res;
[Link]("average").value=res/3;
alert("Successfully Submitted");
}
</script>
</body>
</html>
OUTPUT:
[Link]

DATE: 10.03.2023 JAVASCRIPT CODE DEMONSTRATING THE USE OF


USER-DEFINED & BUILT-IN OBJECTS

AIM:

ALGORITHM:
PROGRAM :
// User-defined object
let person = {
firstName: "John",
lastName: "Doe",
age: 30,
fullName: function() {
return [Link] + " " + [Link];
}
};
// Built-in objects
let date = new Date();
let array = [1, 2, 3, 4];
let event = new Event("click");
let number = 42;
// Using built-in objects
[Link]("Today's date is " + [Link]());
[Link]("The second item in the array is " + array[1]);
[Link](event);
[Link]("The square root of " + number + " is " + [Link](number));
// Using user-defined object
[Link]("The person's full name is " + [Link]());
[Link]("The person is " + [Link] + " years old.");
OUTPUT:
[Link]
LOGIN FORM VALIDATION USING VARIOUS INPUT
DATE: 15.03.2023 ELEMENTS IN JAVASCRIPT

AIM:

ALGORITHM:
PROGRAM:
<!doctype html>

<html>

<form onsubmit="return validateForm()">

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

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

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

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

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

<label for="gender">Gender:</label>

<select id="gender" name="gender" required>

<option value="">Please select</option>

<option value="male">Male</option>

<option value="female">Female</option>

<option value="other">Other</option>

</select>

<label for="message">Message:</label>

<textarea id="message" name="message"></textarea>

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

</form>

<script>
function validateForm() {

let form = [Link][0];

let name = [Link]["name"].value;

let email = [Link]["email"].value;

let password = [Link]["password"].value;

let gender = [Link]["gender"].value;

let message = [Link]["message"].value;

if (name === "") {

alert("Name must be filled out");

return false;

if (email === "") {

alert("Email must be filled out");

return false;

if (password === "") {

alert("Password must be filled out");

return false;

}
if (gender === "") {

alert("Gender must be selected");

return false;

if (message === "") {

alert("Message must be filled out");

return false;

return true;

</script>

</html>
OUTPUT:
[Link] YELLOW PAGES USING XML DECLARATION,
ELEMENT DECLARATION, ATTRIBUTE
DATE: 17.03.2023 DECLARATION IN XML

AIM:

ALGORITHM:
PROGRAM:

<?xml version="1.0"

encoding="UTF-8"?>

<address_book>

<address>

<name>Anil</name>

<door_no>11</door_no>

<street>Gandhi Street</street>

<district>Madurai</district>

<state>Tamilnadu</state>

</address>

<address>

<name>Chopra</name>

<door_no>34/5</door_no>

<street>Anna street</street>

<district>Tirunelveli</district>

<state>Tamilnadu</state>

</address>

<address>

<name>Bhuvanesh</name>
<door_no>23/1</door_no>

<street>Netaji Street</street>

<district>Mumbai</district>

<state>Maharashtra</state>

</address>

<address>

<name>Reshmi</name>

<door_no>5.6</door_no>

<street>PVC Street</street>

<district>Ahamedabad</district>

<state>Gujarat</state>

</address>

<address>

<name>Lilly</name>

<door_no>9</door_no>

<street>Chekka Road</street>

<district>Hyderabad</district>

<state>Andhrapradesh</state>

</address>

<address>
<name>Anne</name>

<door_no>78</door_no>

<street>Electonic City</street>

<district>Bangalore</district>

<state>Karnataka</state>

</address>

</address_book>
OUTPUT:
[Link] ADDRESS BOOK USING INTERNAL DTD,
EXTERNAL DTD, ENTITY DECLARATION IN
DATE: 24.03.2023 XML

AIM:

ALGORITHM:
PROGRAM :
Internal DTD:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE address
[
<!ELEMENT address (name,door_no,street,district,state)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT door_no (#PCDATA)>
<!ELEMENT street (#PCDATA)>
<!ELEMENT district (#PCDATA)>
<!ELEMENT state (#PCDATA)>
]>
<address_book>
<address>
<name>Anil</name>
<door_no>11</door_no>
<street>Gandhi Street</street>
<district>Madurai</district>
<state>Tamilnadu</state>
</address>
<address>
<name>Chopra</name>
<door_no>34/5</door_no>
<street>Anna street</street>
<district>Tirunelveli</district>
<state>Tamilnadu</state>
</address>
<address>
<name>Bhuvanesh</name>
<door_no>23/1</door_no>
<street>Netaji Street</street>
<district>Mumbai</district>
<state>Maharashtra</state>
</address>
<address>
<name>Reshmi</name>
<door_no>5.6</door_no>
<street>PVC Street</street>
<district>Ahamedabad</district>
<state>Gujarat</state>
</address>
<address>
<name>Lilly</name>
<door_no>9</door_no>
<street>Chekka Road</street>
<district>Hyderabad</district>
<state>Andhrapradesh</state>
</address>
<address>
<name>Anne</name>
<door_no>78</door_no>
<street>Electonic City</street>
<district>Bangalore</district>
<state>Karnataka</state>
</address>
</address_book>

Address DTD:
<!ELEMENT address (name,door_no,street,district,state)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT door_no (#PCDATA)>
<!ELEMENT street (#PCDATA)>
<!ELEMENT district (#PCDATA)>
<!ELEMENT state (#PCDATA)>
External DTD:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE address SYSTEM "[Link]">
<address_book>
<address>
<name>Anil</name>
<door_no>11</door_no>
<street>Gandhi Street</street>
<district>Madurai</district>
<state>Tamilnadu</state>
</address>
<address>
<name>Chopra</name>
<door_no>34/5</door_no>
<street>Anna street</street>
<district>Tirunelveli</district>
<state>Tamilnadu</state>
</address>
<address>
<name>Bhuvanesh</name>
<door_no>23/1</door_no>
<street>Netaji Street</street>
<district>Mumbai</district>
<state>Maharashtra</state>
</address>
<address>
<name>Reshmi</name>
<door_no>5.6</door_no>
<street>PVC Street</street>
<district>Ahamedabad</district>
<state>Gujarat</state>
</address>
<address>
<name>Lilly</name>
<door_no>9</door_no>
<street>Chekka Road</street>
<district>Hyderabad</district>
<state>Andhrapradesh</state>
</address>
<address>
<name>Anne</name>
<door_no>78</door_no>
<street>Electonic City</street>
<district>Bangalore</district>
<state>Karnataka</state>
</address>
</address_book>
OUTPUT:

You might also like