PRACTICAL ONE
HTML
What is HTML?
HTML = HyperText Markup Language
It is the code used to create and structure content on the web.
How to View the Web Page:
1. Open Notepad or VS Code on your computer
2. Paste the HTML code above
3. Save it as [Link] on your desktop
4. Double-click the file — it will open in your browser!
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is my first web page.</p>
</body>
</html>
Output
1|Page
Let’s create a simple web page using HTML. This will include a title, heading,
paragraph, and even a link.
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple web page created using HTML.</p>
<p>Here is a link to <a href="[Link]
target="_blank">Google</a>.</p>
</body>
</html>
Output
2|Page
PRACTICAL TWO
ENHANCED HTML WEB PAGE WITH VARIOUS TAGS
<!DOCTYPE html>
<html>
<head>
<title>My Enhanced Web Page</title>
</head>
<body>
<!-- Header section -->
<header>
<h1 style="color: darkblue;">🌐 Welcome to My Web Page</h1>
<p><em>Learning HTML is fun and powerful!</em></p>
<hr>
</header>
<!-- Navigation -->
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#skills">My Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<hr>
<!-- About Section -->
<section id="about">
<h2>👋 About Me</h2>
<p>My name is <strong>Alex</strong>, and I am learning to build websites using
<mark>HTML</mark>.</p>
</section>
<!-- Skills Section -->
<section id="skills">
<h2>🧰 My Skills</h2>
<ul>
<li>HTML Basics</li>
<li>Creating Web Pages</li>
<li>Adding Links and Images</li>
</ul>
</section>
<!-- Image Example -->
<figure>
<img src="[Link] alt="Placeholder image"
width="300">
3|Page
<figcaption>This is an example image using the <code><figure></code>
tag.</figcaption>
</figure>
<!-- Table Example -->
<h3> Schedule</h3>
<table border="1">
<thead>
<tr>
<th>Day</th>
<th>Task</th>
<tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Learn HTML</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Build a Web Page</td>
</tr>
</tbody>
</table>
<!-- Contact Form -->
<section id="contact">
<h2>📬 Contact Me</h2>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Send">
</form>
</section>
<footer>
<hr>
<p>© 2025 Alex's Web Page | <small>All rights reserved.</small></p>
</footer>
</body>
</html>
4|Page
Output
5|Page
PRACTICAL THREE
MULTIMEDIA IN HTML
1. Adding Images
HTML Tag: <img>
<img src="[Link] alt="Placeholder Image" width="300">
Attributes:
Attribute Purpose
src URL or file path to the image
alt Text shown if image fails to load
width Controls image width (in px)
You can also use local images like:
<img src="images/[Link]" alt="My Photo">
2. Adding Video
HTML Tag: <video>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Attributes:
Attribute Purpose
controls Shows play/pause, volume, etc.
autoplay Starts playing automatically
loop Repeats the video automatically
muted Starts video without sound
3. Adding Audio
HTML Tag: <audio>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
6|Page
Your browser does not support the audio tag.
</audio>
Common Audio Formats:
MP3 (.mp3)
OGG (.ogg)
WAV (.wav)
4. Using <figure> and <figcaption> for Descriptions
<figure>
<img src="[Link]" alt="Nature Scene" width="300">
<figcaption>A peaceful nature scene</figcaption>
</figure>
This adds a caption below the image, making your content more descriptive.
5. Embedding YouTube or Other Content
Use <iframe> to embed videos from other platforms:
<iframe width="560" height="315"
src="[Link]
frameborder="0" allowfullscreen></iframe>
You can replace VIDEO_ID with the actual ID from the YouTube URL.
7|Page
PRACTICAL FOUR
SIMPLE HTML FORM WITH INPUT CONTROLS
<!DOCTYPE html>
<html>
<head>
<title>User Registration Form</title>
</head>
<body>
<h2>📋 User Registration Form</h2>
<form action="[Link]" method="POST">
<!-- Text Input -->
<label for="name">Full Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<!-- Email Input -->
<label for="email">Email Address:</label><br>
<input type="email" id="email" name="email" required><br><br>
<!-- Password Input -->
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br><br>
<!-- Radio Buttons -->
<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<!-- Checkbox -->
<label>Select your interests:</label><br>
<input type="checkbox" name="interest" value="coding"> Coding<br>
<input type="checkbox" name="interest" value="music"> Music<br>
<input type="checkbox" name="interest" value="sports"> Sports<br><br>
<!-- Dropdown -->
<label for="country">Country:</label><br>
<select id="country" name="country" required>
<option value="">--Select Country--</option>
8|Page
<option value="nigeria">Nigeria</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select><br><br>
<!-- Number Input -->
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" min="18" max="100"><br><br>
<!-- Date Input -->
<label for="dob">Date of Birth:</label><br>
<input type="date" id="dob" name="dob"><br><br>
<!-- Submit Button -->
<input type="submit" value="Register">
</form>
</body>
</html>
Output
9|Page
PRACTICAL FIVE
HTML TABLE
What Is an HTML Table?
An HTML table is used to organize data in rows and columns, like a spreadsheet.
Basic Table Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Alex</td>
<td>25</td>
<td>Nigeria</td>
</tr>
<tr>
<td>Sophia</td>
<td>30</td>
<td>UK</td>
</tr>
</table>
</body>
</html>
Output
10 | P a g e
Enhanced Table with CSS
<!DOCTYPE html>
<html>
<head>
<title>Enhanced HTML Table</title>
<style>
body {
font-family: Arial, sans-serif;
}
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 12px 16px;
text-align: center;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
text-transform: uppercase;
letter-spacing: 0.5px;
}
tr:hover {
background-color: #f5f5f5;
}
caption {
caption-side: top;
font-size: 1.5em;
margin-bottom: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption>Student Exam Scores</caption>
<tr>
<th>Student</th>
<th>Subject</th>
<th>Score</th>
</tr>
<tr>
<td>John</td>
<td>Mathematics</td>
11 | P a g e
<td>85</td>
</tr>
<tr>
<td>Jane</td>
<td>Biology</td>
<td>92</td>
</tr>
<tr>
<td>Mike</td>
<td>History</td>
<td>78</td>
</tr>
</table>
</body>
</html>
12 | P a g e
PRACTICAL SIX
WHAT CSS IS
CSS = Style Rules that tell your HTML how it should look.
HTML is the structure, and CSS is the presentation.
Ways to Add CSS to HTML
There are 3 methods:
Method How It's Done Use Case
Inline CSS In the HTML tag itself Quick, one-time styles
Internal CSS Inside <style> in <head> For single-page styling
External CSS In a separate .css file Best for full websites
Example1(External):
HTML File ([Link])
<!DOCTYPE html>
<html>
<head>
<title>My Styled Page</title>
<link rel="stylesheet" href="[Link]"> <!-- External CSS -->
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a styled web page using external CSS.</p>
<a href="[Link] to Google</a>
</body>
</html>
CSS File ([Link])
/* This styles the whole page background */
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
text-align: center;
}
13 | P a g e
/* This styles the heading */
h1
{
color: darkblue;
font-size: 36px;
margin-top: 30px;
}
/* This styles paragraphs */
p{
color: #333;
font-size: 18px;
}
/* This styles links */
a{
color: green;
text-decoration: none;
}
a:hover {
color: red;
}
Example 2:
In-line CSS code
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; font-size: 36px;">Welcome to My Website</h1>
<p style="color: gray; font-family: Arial;">This paragraph uses inline CSS to style
the text.</p>
<a href="[Link]
style="color: green; text-decoration: none;">
Visit Google
14 | P a g e
</a>
</body>
</html>
Example: Internal CSS in Action
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
background-color: #f0f0f0;
font-family: Verdana, sans-serif;
text-align: center;
}
h1 {
color: darkblue;
font-size: 40px;
}
p{
color: #333;
font-size: 18px;
}
a{
color: green;
text-decoration: none;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This page uses internal CSS for styling.</p>
<a href="[Link] target="_blank">Visit Google</a>
</body>
</html>
15 | P a g e
Output
16 | P a g e
PRACTICAL SEVEN
JAVASCRIPT CODING
JavaScript is a scripting language used to make web pages dynamic. It can:
React to user actions (clicks, typing)
Modify HTML/CSS on the page
Validate form data
Create animations, popups, calculators, games, etc.
How to Add JavaScript to a Web Page
There are 2 common ways:
1. Inline (inside HTML file)
<!DOCTYPE html>
<html>
<head>
<title>My First JS Page</title>
</head>
<body>
<h2>Click the Button</h2>
<button onclick="showMessage()">Click Me</button>
<script>
function showMessage() {
alert("Hello! This is JavaScript in action.");
}
</script>
</body>
</html>
Output
17 | P a g e
2. External JavaScript File
HTML File:
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>External JS</title>
<script src="[Link]"></script>
</head>
<body>
<button onclick="greetUser()">Greet</button>
</body>
</html>
[Link] File:
javascript
CopyEdit
function greetUser() {
alert("Welcome to the page!");
}
External JS files are better for reusability and cleaner code.
Basic JavaScript Syntax Examples
Variables
let name = "Alex";
const age = 25;
Functions
function greet() {
[Link]("Hello from JavaScript!");
}
Events
[Link]("myBtn").onclick = function() {
alert("Button clicked!");
};
18 | P a g e
Conditions
let age = 20;
if (age >= 18) {
[Link]("You are an adult.");
}
Loops
for (let i = 1; i <= 5; i++) {
[Link]("Count: " + i);
}
What is an Event Handler?
An event handler is a JavaScript function that runs when a specific event happens
on a webpage.
Common events:
Event Description
click User clicks an element
mouseover Mouse hovers over an element
keyup User releases a keyboard key
submit A form is submitted
change Value in input or dropdown changes
1. Inline Event Handler (HTML Attribute)
<button onclick="sayHello()">Click Me</button>
<script>
function sayHello() {
alert("Hello from JavaScript!");
}
</script>
2. Using DOM Methods (Best Practice)
<button id="myBtn">Click Here</button>
19 | P a g e
<script>
[Link]("myBtn").addEventListener("click", function() {
alert("Button clicked!");
});
</script>
3. Named Function as Event Handler
<input type="text" id="nameInput" placeholder="Type your name">
<script>
function handleTyping() {
[Link]("User is typing...");
}
[Link]("nameInput").addEventListener("keyup", handleTyping);
</script>
Example: Multiple Events on One Element
<div id="box" style="width:150px;height:150px;background:lightgray;">
Hover or Click Me!
</div>
<script>
const box = [Link]("box");
[Link]("click", function() {
[Link] = "lightgreen";
});
[Link]("mouseover", function() {
[Link] = "orange";
});
[Link]("mouseout", function() {
[Link] = "lightgray";
});
</script>
Event Object
[Link]("click", function(event) {
[Link]("You clicked: " + [Link]);});
PRACTICAL EIGHT
20 | P a g e
DHTML
DHTML stands for Dynamic HTML. It is not a separate language — it’s a
combination of technologies used to create interactive and animated web pages
without reloading the page.
DHTML =
HTML + CSS + JavaScript + DOM (Document Object Model)
Purpose of DHTML
Feature Description
Interactivity Responds to user actions like clicks and hovers
Animation Moves elements or changes them dynamically
Real-time Updates Changes page content without reloading
Better UX Makes websites more responsive and fun
DHTML Example – Step-by-Step
Let’s build a simple DHTML page where a box moves when a user clicks a button.
Example
<!DOCTYPE html>
<html>
<head>
<title>Simple DHTML Page</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: steelblue;
position: absolute;
top: 50px;
left: 50px;
transition: all 0.5s ease;
}
</style>
</head>
<body>
21 | P a g e
<h2>DHTML Box Movement</h2>
<div id="box"></div>
<button onclick="moveBox()">Move Box</button>
<script>
let position = 50;
function moveBox() {
position += 100;
[Link]("box").[Link] = position + "px";
}
</script>
</body>
</html>
Output
1. Mouseover effects
<button onmouseover="[Link]='orange'"
onmouseout="[Link]=''">Hover Me</button>
22 | P a g e
2. Change content dynamically
<p id="text">Original Text</p>
<button onclick="[Link]('text').innerHTML = 'New
Text!'">Change Text</button>
3. Show/Hide content
<button onclick="toggle()">Show/Hide</button>
<div id="myDiv" style="display: none;">This is some text.</div>
<script>
function toggle() {
let div = [Link]("myDiv");
[Link] = ([Link] === "none") ? "block" : "none";
}
</script>
DHTML lets you build dynamic websites without needing a full backend or
frameworks.
What is an Embedded Style Sheet?
An embedded style sheet allows you to write CSS (Cascading Style Sheets) inside
an HTML file using the <style> tag in the <head> section.
It applies styles only to that HTML page (unlike external style sheets which are
linked separately).
Example of an Embedded Style Sheet
<!DOCTYPE html>
<html>
<head>
<title>Embedded CSS Example</title>
<!-- Embedded Style Sheet Starts Here -->
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
23 | P a g e
}
p{
color: #333333;
font-size: 16px;
line-height: 1.5;
}
.highlight {
color: red;
font-weight: bold;
}
</style>
<!-- Embedded Style Sheet Ends Here -->
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This paragraph uses styles from an <span class="highlight">embedded style
sheet</span>.</p>
</body>
</html>
Output
PRACTICAL NINE
CLASS IN HTML/CSS
24 | P a g e
Definition: A class is an attribute you use in HTML to group elements so they can
be styled together using CSS or targeted by JavaScript.
HTML Example:
<!DOCTYPE html>
<html>
<head>
<title>Div Class Example</title>
<style>
.box {
background-color: #e0f7fa;
border: 2px solid #00acc1;
padding: 20px;
margin: 20px auto;
width: 60%;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.box h2 {
color: #006064;
}
.box p {
color: #333;
}
</style>
</head>
<body>
<div class="box">
<h2>Hello from a Div</h2>
<p>This is some text inside a styled div using a class.</p>
</div>
</body>
</html>
Output
25 | P a g e
Why Use Classes?
Reuse styles on multiple elements
Apply specific formatting without changing the HTML tag
Allow dynamic changes with JavaScript
2. How to Implement a Class (Step-by-Step)
Steps:
1. Assign the class in HTML:
<div class="box">Hello</div>
2. Define the class in CSS:
.box {
width: 200px;
height: 100px;
background-color: lightblue;
text-align: center;
padding: 10px;
}
You can apply multiple classes:
26 | P a g e
<div class="box shadow">Welcome</div>
And define both:
.shadow {
box-shadow: 2px 2px 5px gray;
}
Example 1: Show and Hide with Separate Buttons
<!DOCTYPE html>
<html>
<head>
<title>Show and Hide Example</title>
<style>
#message {
display: none;
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Show and Hide an Element</h2>
<button onclick="showMessage()">Show Message</button>
<button onclick="hideMessage()">Hide Message</button>
<p id="message">👋 Hello! This is a hidden message.</p>
<script>
function showMessage() {
[Link]("message").[Link] = "block";
}
function hideMessage() {
[Link]("message").[Link] = "none";
}
</script>
</body>
</html>
27 | P a g e
Output
28 | P a g e
PRACTICAL TEN
PHP
PHP stands for PHP: Hypertext Preprocessor. It’s a server-side scripting
language used to build dynamic websites, handle forms, connect to databases (like
MySQL), and more.
What You Need to Run PHP
1. PHP Installed Locally
o Use XAMPP, WAMP (Windows), or MAMP (Mac) to create a local
server.
2. A Text Editor
o VS Code, Sublime, Notepad++, or any IDE.
3. .php File
o PHP code is saved in files ending with .php.
Basic PHP Code Structure Example: [Link]
<!DOCTYPE html>
<html>
<head>
<title>My First PHP Page</title>
</head>
<body>
<h1>Welcome to My PHP Page</h1>
<?php
echo "Hello, World!"; // PHP outputs this text
?>
</body>
</html>
Output
29 | P a g e
How to Run It
1. Save the file as [Link].
2. Place it inside the htdocs folder (if using XAMPP).
3. Start Apache from the XAMPP Control Panel.
4. Open a browser and go to: ([Link]
More PHP Examples
1. Variables and Output
<?php
$name = "Holiness";
echo "Hello, $name!";
?>
2. If-Else Statement
<?php
$score = 80;
if ($score >= 50) {
echo "You passed!";
} else {
echo "Try again.";
}
?>
3. Form Handling
[Link]
<form action="[Link]" method="post">
Name: <input type="text" name="username">
<input type="submit" value="Submit">
</form>
[Link]
<?php
$name = $_POST['username'];
echo "Hello, $name!";
?>
30 | P a g e
PRACTICAL ELEVEN
GRAPHIC WEB APPLICATION SOFTWARE
These are visual tools that allow you to design websites or web apps using a GUI
(drag-and-drop interface), while still allowing you to use HTML/CSS/JavaScript if
needed.
Examples of Graphic Web App Tools:
Tool Features
Wix Drag-and-drop builder with built-in hosting
WordPress Website CMS with visual builders (e.g., Elementor)
Webflow Visual front-end builder with clean code export
CodeCharge Studio RAD tool for building data-driven web apps
Replit / CodePen Online IDEs for live web dev with GUI preview
We’ll Now Demonstrate Using Webflow (or CodeCharge/Web IDE) to Create a
Simple Web App
Objective: Create a "Contact Us" web app that lets users:
Enter their name and message
Submit the form
See a response message
OPTION 1: Code-Based with Visual Preview (Replit / CodeLobster / VS Code)
Step 1: HTML (Form Layout)
<!DOCTYPE html>
<html>
<head>
<title>Simple Web App</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h2>Contact Us</h2>
<form id="contactForm">
<input type="text" id="name" placeholder="Your Name" required><br>
<textarea id="message" placeholder="Your Message" required></textarea><br>
<button type="submit">Send</button>
</form>
31 | P a g e
<p id="response"></p>
</div>
<script src="[Link]"></script>
</body>
</html>
Step 2: CSS ([Link])
body {
font-family: Arial;
background-color: #f9f9f9;
}
.container {
width: 300px;
margin: auto;
padding: 20px;
background: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input, textarea {
width: 100%;
padding: 8px;
margin: 10px 0;
}
button {
background-color: teal;
color: white;
padding: 10px;
width: 100%;
border: none;
}
Step 3: JavaScript ([Link])
[Link]("contactForm").addEventListener("submit", function(e) {
[Link](); // prevent page reload
let name = [Link]("name").value;
let message = [Link]("message").value;
[Link]("response").innerText =
`Thank you, ${name}! We received your message: "${message}"`;
});
32 | P a g e
RESULT: A working web application with:
A form
Dynamic response
Clean layout
OPTION 2: No-Code with Wix or Webflow
Steps (Webflow or Wix):
1. Create an Account on Webflow or Wix
2. Choose a blank template
3. Use the drag-and-drop interface to:
o Add a text field
o Add a textarea
o Add a submit button
4. Set the form action (can be connected to a database or email)
5. Click Preview or Publish to see the live web app
These tools auto-generate HTML/CSS and can export to your own code if needed.
33 | P a g e
PRACTICAL TWELVE
XML
XML (eXtensible Markup Language) is a markup language designed to store and
transport data. It's both human-readable and machine-readable, and commonly
used in:
Web services
Data configuration
Software applications
Mobile and cloud platforms
What Is an XML Package?
An XML package refers to:
A group of XML files or templates used to store data
OR software that parses and processes XML, such as:
o [Link] in Python
o DOMParser in JavaScript
o XML libraries in Java, .NET, or PHP
Case Study: Student Records System
Scenario:
You’re building a system to manage student profiles in a school. You need to:
Store students' info (name, ID, department)
Read and display it dynamically
Step-by-Step Demonstration Using XML + Python
Step 1: Create an XML File ([Link])
<?xml version="1.0" encoding="UTF-8"?>
<students>
<student>
<id>101</id>
<name>Alice James</name>
<department>Computer Science</department>
</student>
<student>
<id>102</id>
<name>Brian Smith</name>
34 | P a g e
<department>Mathematics</department>
</student>
</students>
Step 2: Python Code to Parse and Display XML (Using [Link])
import [Link] as ET
# Load the XML file
tree = [Link]('[Link]')
root = [Link]()
# Print student details
for student in [Link]('student'):
student_id = [Link]('id').text
name = [Link]('name').text
dept = [Link]('department').text
print(f"ID: {student_id}, Name: {name}, Department: {dept}")
Output:
ID: 101, Name: Alice James, Department: Computer Science
ID: 102, Name: Brian Smith, Department: Mathematics
BONUS: Displaying XML in a Web Page (JavaScript DOM)
HTML + JavaScript Example:
<!DOCTYPE html>
<html>
<body>
<h2>Student Records</h2>
<div id="output"></div>
<script>
const xmlData =
<students>
<student><id>101</id><name>Alice</name><department>CS</department></
student>
<student><id>102</id><name>Brian</name><department>Math</department></
student>
</students>
35 | P a g e
const parser = new DOMParser();
const xmlDoc = [Link](xmlData, "text/xml");
let students = [Link]("student");
let html = "<ul>";
for (let i = 0; i < [Link]; i++) {
let name = students[i].getElementsByTagName("name")[0].textContent;
let dept = students[i].getElementsByTagName("department")[0].textContent;
html += `<li>${name} - ${dept}</li>`;
}
html += "</ul>";
[Link]("output").innerHTML = html;
</script>
</body>
</html>
Output
Other XML Package Uses
Use Case XML Role
Android apps Layout and UI config (.xml)
Web services (SOAP) Data format and request struct
RSS Feeds Deliver news/blog updates
Office docs (Word) Underlying XML structure
PRACTICAL TASK
36 | P a g e
NOTE: Every practical task is mandatory work to do, and must be printed out and
attached to the manual for submission.
1. Design the following static web pages required for an online book store web
site.
a) HOME PAGE: The static home page must contain three frames.
b) LOGIN PAGE
c) CATOLOGUE PAGE: The catalogue page should contain the details of all
the books available in the web site in a table.
d) REGISTRATION PAGE
2. Write JavaScript to validate the following fields of the Registration page.
a) First Name (Name should contains alphabets and the length should not
be less than 6 characters).
b) Password (Password should not be less than 6 characters length).
c) E-mail id (should not contain any invalid and must follow the standard
pattern name@[Link])
d) Mobile Number (Phone number should contain 10 digits only).
e) Last Name and Address (should not be Empty).
3. Develop and demonstrate the usage of inline, internal and external style
sheet using CSS
4. Develop and demonstrate JavaScript with POP-UP boxes and
functions for the following problems:
a) Input: Click on Display Date button using onclick( ) function Output:
Display date in the textbox
b) Input: A number n obtained using prompt
Output: Factorial of n number using alert
c) Input: A number n obtained using prompt
Output: A multiplication table of numbers from 1 to 10 of n using
alert
d) Input: A number n obtained using prompt and add another number using
confirm
Output: Sum of the entire n numbers using alert
5. Write an HTML page that contains a selection box with a list of 5 countries.
When the user selects a country, its capital should be printed next in the list.
Add CSS to customize the properties of the
font of the capital (color,bold and font size).
6. Write an HTML page including any required JavaScript that takes a number
37 | P a g e
from text field in the range of 0 to 999 and shows it in words. It should not
accept four and above digits, alphabets and special
characters.
7. Develop and demonstrate PHP Script for the following problems:
a) Write a PHP Script to find out the Sum of the Individual Digits.
b) Write a PHP Script to check whether the given number is Palindrome or not
8. Create an XML document that contains 10 users information. Write a Java
Program, which takes User Id as input and returns the user details by taking
the user information from XML document using
DOM parser or SAX parser.
9. Implement the following web applications using (a) PHP
(b) Servlets
(c) JSP
i) A web application that takes a name as input and on submit it shows a hello
<name> page where name is taken from the request. It shows the start time at the right
top corner of the page and provides a logout button. On clicking this button, it should
show a logout page with Thank You <name > message
with the duration of usage (hint: Use session to store name and time).
ii) Write a PHP Program to display current Date, Time and Day.
iii) A web application that takes name and age from an HTML page. If the age is
less than 18, it should send a page with “Hello <name>, you are not
authorized to visit the site” message, where <name> should be replaced with
the entered name. Otherwise it should send “Welcome <name> to this site”
message.
iv) A web application that lists all cookies stored in the browser on clicking
“List Cookies” button. Add cookies if necessary.
10. Implement the web applications with Database using
(a) PHP, (b) Servlets and (c) JSP.
11. Modify the above PHP program to use an xml instead of database
12. Write a program to design a simple calculator using (a) JavaScript (b) PHP (c)
Servlet and (d) JSP.
38 | P a g e