PROGRAM LIST
1. Design Simple Web Pages using standard HTML tags like, HEAD, TITLE, BODY.
2. Design HTML web pages, which make use of INPUT, META, SCRIPT, FORM,
APPLET, BGSOUND, MAP
3. Working with various attributes of standard HTML elements
4. Using JavaScript's Window and document objects and their properties and various
methods like alert(), eval(), Parselnt () etc. methods to give the dynamic functionality
to HTML web pages
5. Writing JavaScript snippet which makes use of JavaScript's in-bulit as well as user
defined objects like navigator, Date Array, Event, Number etc.
6. Write code which does the form validation in various INPUT elements like
TextFiled, Text Area, Password, Selection list etc.
7. Writing XML web Documents which make use of XML Declaration, Element
Declaration, Attribute Declaration
8. Usage of Internal DTD, External DTD, Entity Declaration.
EX.N0:1 SIMPLE WEB PAGE
DATE :
AIM
To design a simple web page using standard HTML tags such as <HEAD>, <TITLE>, and
<BODY>.
ALGORITHM
Step 1: Start
Step 2: Open a text editor (Notepad / VS Code)
Step 3: Create an HTML document
Step 4: Add the <HTML> tag
Step 5: Inside <HEAD>, include the <TITLE> tag
Step 6: Inside <BODY>, add page content like headings and paragraphs
Step 7: Save the file with .html extension
Step 8: Open the file in a web browser
Step 9: Stop
PROGRAM CODE
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a simple web page designed using HTML.</p>
<p>HTML uses tags like HEAD, TITLE, and BODY.</p>
</body>
</html>
OUTPUT
RESULT
Thus, a simple web page was successfully designed using basic HTML tags such as HEAD,
TITLE, and BODY.
EX.N0:2
DATE : STUDENT REGISTER FORM
AIM
To design an HTML web page using INPUT, META, SCRIPT, FORM, and BGSOUND tags.
ALGORITHM
Step1 Start
Step2 Open a text editor (Notepad / VS Code)
Step3 Create a new HTML file
Step4 Use the <META> tag inside the <HEAD> section
Step5 Use the <SCRIPT> tag to include JavaScript code
Step6 Create a <FORM> using various <INPUT> elements
Step7 Add background sound using the <BGSOUND> tag
Step8 Save the file with .html extension
Step9 Open the file in a web browser
Step10 Stop
Program Code
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Example</title>
<!-- META tag -->
<meta name="description" content="HTML page using INPUT, META, SCRIPT, FORM, and
BGSOUND">
<meta name="author" content="Student">
<!-- SCRIPT tag -->
<script>
function showAlert() {
alert("Form submitted successfully!");
}
</script>
</head>
<!-- BGSOUND tag (for academic use) -->
<bgsound src="[Link]" loop="1">
<body>
<h2>Student Registration Form</h2>
<!-- FORM and INPUT tags -->
<form > Name: <input type="text" name="name"><br><br>
Roll No: <input type="text" name="roll"><br><br>
Age: <input type="number" name="age"><br><br>
Gender:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Output
Result
Thus, an HTML web page using INPUT, META, SCRIPT, FORM, and BGSOUND tags was
successfully designed and executed.
EX.N0:3
DATE :
AIM
To design an HTML web page for a College Admission Form demonstrating the use of various
attributes of standard HTML elements.
Algorithm
1. Start the program.
2. Create an HTML document using <html>, <head>, and <body> tags.
3. Set the title of the web page using the <title> tag.
4. Use heading tags to display the college name and form title.
5. Create a form using the <form> tag.
6. Use <input> elements with attributes such as type, name, placeholder, required,
maxlength, and value.
7. Use <select> and <option> tags to create a dropdown list.
8. Use radio buttons and checkboxes to collect user choices.
9. Use <textarea> for address input.
10. Add submit and reset buttons.
11. Save the file with .html extension and open it in a web browser.
12. Stop the program.
Program (HTML Code)
<!DOCTYPE html>
<html>
<head>
<title>College Admission Form</title>
</head>
<body bgcolor="#e6f2ff">
<h1 align="center" style="color:darkblue;">ABC College of Engineering</h1>
<h2 align="center">College Admission Form</h2>
<form align="center">
<p>
<label>Student Name:</label>
<input type="text" name="sname" placeholder="Enter your name" required>
</p>
<p>
<label>Date of Birth:</label>
<input type="date" name="dob" required>
</p>
<p>
<label>Gender:</label>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="example@[Link]" required>
</p>
<p>
<label>Phone Number:</label>
<input type="text" name="phone" maxlength="10" placeholder="10-digit number">
</p>
<p>
<label>Address:</label><br>
<textarea rows="4" cols="30" placeholder="Enter your address"></textarea>
</p>
<p>
<label>Course Applied:</label>
<select name="course">
<option>B.E - Computer Science</option>
<option>B.E - Electronics</option>
<option>[Link] - Information Technology</option>
<option>[Link] - Computer Science</option>
</select>
</p>
<p>
<label>Hobbies:</label><br>
<input type="checkbox" name="hobby" value="Sports"> Sports
<input type="checkbox" name="hobby" value="Music"> Music
<input type="checkbox" name="hobby" value="Reading"> Reading
</p>
<p>
<input type="submit" value="Submit Application">
<input type="reset" value="Reset">
</p>
</form>
</body>
</html>
OUTPUT:
EX.N0:4
DATE :
Aim
To design an HTML web page and validate user input using JavaScript Window and
Document objects with methods such as alert() and parseInt() to provide dynamic functionality.
Algorithm
1. Start the program.
2. Create an HTML form with input fields for Name and Age.
3. Attach a JavaScript function to the form’s submit event.
4. Use the document object to access form field values.
5. Check whether the Name field is empty.
6. Convert the Age value from string to integer using parseInt().
7. Validate that the Age is a number and is greater than or equal to 18.
8. Display appropriate messages using the alert() method.
9. Submit the form if all validations are satisfied.
10. Stop the program.
Program Code :
<!DOCTYPE html>
<html>
<head>
<title>Form Validation using JavaScript</title>
<script>
function validateForm() {
// Access form fields using document object
var name = [Link]("name").value;
var age = [Link]("age").value;
// Check for empty fields
if (name == "") {
alert("Name must not be empty");
return false;
}
// Convert string to integer
var userAge = parseInt(age);
// Validate age
if (isNaN(userAge) || userAge < 18) {
alert("Age must be a number and 18 or above");
return false;
}
// Success message
alert("Form submitted successfully!");
return true;
}
</script>
</head>
<body bgcolor="#eef5ff">
<h2 align="center">Student Registration Form</h2>
<form align="center" validateForm()">
<p>
Name:
<input type="text" id="name" placeholder="Enter your name">
</p>
<p>
Age:
<input type="text" id="age" placeholder="Enter your age">
</p>
<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</p>
</form>
</body>
</html>
EX.N0:5
DATE :
Aim
To design an interactive HTML web page using JavaScript built-in objects such as Date, Array,
Math, String, Navigator, Event, and user-defined objects to dynamically process and display
student information.
Algorithm
1. Start the program.
2. Create an HTML form to accept student name and subject marks.
3. Define a user-defined object to store student details and calculate average and grade.
4. Use the String object to format the student name.
5. Store marks using the Array object.
6. Calculate the average marks using the Math object.
7. Determine the grade based on the calculated average.
8. Use the Date object to display the current date.
9. Use the Navigator object to display browser information.
10. Handle button click using the Event object and addEventListener().
11. Display the student report dynamically using the Document object.
12. Use window methods such as setTimeout() and alert() to show messages.
13. Stop the program.
PROGRAM CODE :
<!DOCTYPE html>
<html>
<head>
<title>Advanced JavaScript Objects Demo</title>
<script>
// User-defined object
function Student(name, marksArray) {
[Link] = name;
[Link] = marksArray;
[Link] = function () {
var sum = 0;
for (var i = 0; i < [Link]; i++) {
sum += [Link][i];
}
return [Link](sum / [Link]);
};
[Link] = function () {
var avg = [Link]();
if (avg >= 75) return "Distinction";
else if (avg >= 50) return "Pass";
else return "Fail";
};
}
function displayInfo(event) {
[Link]();
// Built-in objects
var date = new Date();
var browser = [Link];
// String object
var name = [Link]("name").value;
name = [Link]();
// Array object
var marks = new Array(
Number([Link]("m1").value),
Number([Link]("m2").value),
Number([Link]("m3").value)
);
// Create student object
var student = new Student(name, marks);
[Link]("output").innerHTML =
"<h3>Student Report</h3>" +
"<b>Name:</b> " + [Link] + "<br>" +
"<b>Average Marks:</b> " + [Link]() + "<br>" +
"<b>Grade:</b> " + [Link]() + "<br>" +
"<b>Date:</b> " + [Link]() + "<br>" +
"<b>Browser:</b> " + browser;
// Dynamic style
[Link]("output").[Link] = "green";
// Window method
setTimeout(function () {
alert("Student Report Generated Successfully!");
}, 500);
}
// Event listener
[Link] = function () {
[Link]("btn").addEventListener("click", displayInfo);
};
</script>
</head>
<body bgcolor="#eef7ff">
<h2 align="center">Advanced JavaScript Object Demonstration</h2>
<form align="center">
Name:
<input type="text" id="name" required><br><br>
Marks 1:
<input type="text" id="m1" required><br><br>
Marks 2:
<input type="text" id="m2" required><br><br>
Marks 3:
<input type="text" id="m3" required><br><br>
<input type="button" id="btn" value="Generate Report">
</form>
<p align="center" id="output" style="font-weight:bold;"></p>
</body>
</html>
EX.N0:6
DATE :
AIM
To design and implement a form using HTML and perform client-side validation using
JavaScript for various input elements such as text field, password, text area, and selection list.
ALGORITHM
1. Start
2. Create an HTML form with required input elements
3. When the submit button is clicked, call the validation function
4. Check whether the text field is empty
5. Check whether the password length is valid
6. Check whether the text area is empty
7. Check whether an option is selected from the list
8. If any field is invalid, display an alert message
9. If all fields are valid, display a success message
10. Stop
HTML & JAVASCRIPT CODE
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validateForm() {
var name = [Link]("name").value;
var password = [Link]("password").value;
var address = [Link]("address").value;
var course = [Link]("course").value;
if (name == "") {
alert("Name cannot be empty");
return false;
}
if ([Link] < 6) {
alert("Password must be at least 6 characters");
return false;
}
if (address == "") {
alert("Address cannot be empty");
return false;
}
if (course == "") {
alert("Please select a course");
return false;
}
alert("Form submitted successfully!");
return true;
}
</script>
</head>
<body>
<h2>Registration Form</h2>
<form validateForm()">
Name:
<input type="text" id="name"><br><br>
Password:
<input type="password" id="password"><br><br>
Address:
<textarea id="address"></textarea><br><br>
Course:
<select id="course">
<option value="">--Select--</option>
<option value="C">C</option>
<option value="Java">Java</option>
<option value="Python">Python</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
EX.N0:7
DATE :
AIM
To create an XML web document using XML declaration, element declaration, and attribute
declaration.
ALGORITHM
1. Start
2. Create an XML file
3. Write the XML declaration
4. Define elements using tags
5. Define attributes inside elements
6. Store data using elements and attributes
7. Save the file with .xml extension
8. Stop
PROGRAM CODING (Simplified XML Coding)
<?xml version="1.0" encoding="UTF-8"?>
<college>
<student id="S101">
<name>Rahul</name>
<department>Computer Science</department>
<year>3</year>
</student>
<student id="S102">
<name>Anita</name>
<department>Information Technology</department>
<year>2</year>
</student>
</college>
EX.N0:8
DATE :
AIM
To create an XML document demonstrating the usage of Internal DTD, External DTD, and
Entity Declaration.
ALGORITHM
1. Start
2. Create an XML document
3. Declare XML version
4. Define elements and attributes using DTD
5. Use Internal DTD inside the XML file
6. Create an External DTD file and link it to XML
7. Declare and use entities
8. Validate the XML document
9. Stop
PROGRAM CODE
1. XML with Internal DTD and Entity Declaration
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE college [
<!ELEMENT college (student+)>
<!ELEMENT student (name, dept)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT dept (#PCDATA)>
<!ATTLIST student id ID #REQUIRED>
<!ENTITY clg "ABC Engineering College">
]>
<college>
<student id="S1">
<name>Ravi</name>
<dept>Computer Science</dept>
</student>
<student id="S2">
<name>Priya</name>
<dept>Information Technology</dept>
</student>
</college>
<!-- Entity usage -->
<!-- &clg; represents college name -->
2. XML using External DTD
(a) External DTD File – [Link]
<!ELEMENT college (student+)>
<!ELEMENT student (name, dept)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT dept (#PCDATA)>
<!ATTLIST student id ID #REQUIRED>
(b) XML File Linking External DTD
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE college SYSTEM "[Link]">
<college>
<student id="S101">
<name>Arun</name>
<dept>Mechanical</dept>
</student>
<student id="S102">
<name>Kavya</name>
<dept>Electrical</dept>
</student>
</college>
