Table of Content
S.N Lab work Signature
1 HTML
2 HTML Attributes
3 HTML Headings
4 Hyperlinks
5 HTML List
6 HTML Tables
7 HTML Forms
8 CSS
9 JavaScript
10 Validation in JS
11 jQuery
12 Write an XML and DTD for a document
13 Write an XML and external XML schema for a document
14 PHP
15 PHP Forms, Validation and Session
16 Write a PHP program to store data from form to database
HTML
HTML (Hypertext Markup Language) is the standard language used to create and design the
structure of web pages on the internet. It provides a way to organize text, images, and other content
by using a system of tags and elements.
Key Features of HTML:
Tags: HTML uses tags to define elements within a document. Tags are usually enclosed in angle
brackets, like <tag_name>. For example, <p> is a tag used to define a paragraph.
Elements: An HTML element typically includes a start tag, content, and an end tag. For example,
<p>This is a paragraph.</p> is a paragraph element.
Attributes: Tags can also have attributes that provide additional information about an element. For
instance, <a href="[Link] here</a> uses the href attribute to specify the URL
of a link.
Document Structure: HTML documents start with a <!DOCTYPE html> declaration, followed by
an <html> element that contains the head (metadata like title and styles) and the body (the main
content).
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage using HTML.</p>
</body>
HTML ATTRIBUTES
HTML attributes provide additional information about HTML elements and are used to define the
properties or characteristics of those elements. They are always included in the opening tag of an
element and consist of a name and a value.
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="[Link]" width="200" height="200" alt="This is a car." >
<img src="[Link]" width="80" height="80" alt="This is a car." >
</body>
</html>
Output:
HTML Headings
HTML headings are used to define titles or subtitles in a web document, and they range from <h1>
to <h6>. The numbers indicate the level of the heading, with <h1> being the most important
(usually the main title) with the largest font size and <h6> being the least important.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Output:
HTML Hyperlinks
Hyperlinks, also known as links, are a fundamental element of HTML that allows users to navigate
from one webpage to another or to a specific section within the same page. They are created using
the <a> (anchor) tag.
Basic Structure of a Hyperlink:
<a href="URL">Link Text</a>
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="[Link]">Go to headings</a>
<a href="[Link]">Go to attributes</a>
<a href="[Link]">
<img src="[Link]" alt="Image as hyperlink.">
</a>
</body>
</html>
Output:
HTML List
HTML lists are used to group related items together in a structured format. There are three main
types of lists in HTML: unordered lists, ordered lists, and definition lists.
1. Unordered List (<ul>)
An unordered list is used when the order of items does not matter. The items in an unordered list
are typically displayed with bullet points.
Structure:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul>: Defines the unordered list.
<li>: Defines a list item.
2. Ordered List (<ol>)
An ordered list is used when the order of items is important. The items in an ordered list are
typically displayed with numbers or letters.
Structure:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<ol>: Defines the ordered list.
<li>: Defines a list item.
Example:
<ol>
<li>First Step</li>
<li>Second Step</li>
<li>Third Step</li>
</ol>
3. Definition List (<dl>)
A definition list is used for listing terms and their corresponding definitions. It consists of <dl>,
<dt>, and <dd> elements.
Structure:
<dl>
<dt>Term 1</dt>
<dd>Definition of Term 1</dd>
<dt>Term 2</dt>
<dd>Definition of Term 2</dd>
</dl>
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Thhird item</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Thhird item</li>
</ol>
<dl>
<dt>Order list</dt>
<dd>Items are numbered or lettered.</dd>
<dt>Unorder list</dt>
<dd>Items are in bullet points.</dd>
</dl>
</body>
</html>
Output:
HTML Tables
HTML tables are used to organize and display data in a tabular format, consisting of rows and
columns. They are created using the <table> tag and several other tags to define the structure of
the table.
Basic Structure of an HTML Table:
<table>
<tr>
<th>Header</th>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
</table>
Key Elements of a Table:
<table>: The container for the entire table.
<tr>: Represents a table row. Each row is defined with this tag.
<th>: Represents a table header cell. These are usually bold and centered by default. They appear
at the top of columns or rows.
<td>: Represents a table data cell. This is where the actual data in the table goes.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apple</td>
<td>Rs.99</td>
<td>5</td>
</tr>
<tr>
<td>Banana</td>
<td>Rs.87</td>
<td>10</td>
</tr>
<tr>
<td>Cherry</td>
<td>Rs.56</td>
<td>20</td>
</tr>
</table>
</body>
</html>
Output:
HTML Form
Objective: To create a HTML form.
Theory
HTML forms are used to collect user input and send it to a server for processing. They are a crucial
part of interactive websites, allowing users to enter data such as text, selections, and files, which
can then be submitted for processing.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">Nepal</option>
<option value="ca">Other</option>
</select><br><br>
<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</body>
</html>
Output:
CSS
CSS, which stands for Cascading Style Sheets, is a stylesheet language used to describe the
presentation of a document written in HTML or XML. While HTML structures the content of a
webpage, CSS is used to control the layout, colors, fonts, and overall visual appearance of the
content.
CSS can be applied to HTML webpages in three different ways. They are:
1. Internal CSS
Internal CSS allows us to include CSS styles directly within an HTML document. This is done by
placing the CSS code inside a <style> element within the <head> section of the HTML file.
Internal CSS is useful when you want to apply styles to a single page without affecting other pages
on the website.
2. Inline CSS
Inline CSS is a method that applies CSS styling directly to HTML elements using the ‘style’
attribute. This approach allows developers to define styles for individual elements, making it an
effective tool for applying unique styles to specific HTML elements.
Syntax:
<tag style = " "></tag>
3. External CSS
External CSS is used to style multiple HTML pages with a single style sheet. External CSS
contains a separate CSS file with a .css extension. The CSS file contains style properties added on
selectors (For example class, id, heading, etc.).
Source Code:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Types Example</title>
<link rel="stylesheet" href="[Link]">
<style>
nav {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
}
nav a:hover {
text-decoration: underline;
}
main {
padding: 20px;
}
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1>CSS Example: External, Internal, and Inline</h1>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<main>
<h2>CSS</h2>
<p>This webpage demonstrates the use of <span style="color: blue; font-weight:
bold;">inline CSS</span>, internal CSS, and external CSS.</p>
<p class="highlight">This paragraph is styled with a class using internal CSS.</p>
</main>
</body>
</html>
[Link] :
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #007bff;
color: white;
padding: 20px;
text-align: center;
}
Output:
JavaScript
JavaScript is a versatile programming language primarily used to create dynamic and interactive
content on websites. It allows developers to implement complex features such as timely content
updates, interactive maps, animated graphics, etc.
JavaScript is often used alongside HTML and CSS, forming the core technologies of web
development. While HTML structures the content and CSS styles it, JavaScript adds behavior and
interactivity. For example, it can be used to create interactive forms, games, and real-time updates
on web pages.
JavaScript can applied to webpages in three different ways. They are:
1. Internal
The JS code is written inside a <script> tag within the <head> or <body> section of an HTML
document.
2. Inline
The JS code is written directly within an HTML element using the onclick, onload, etc., attributes
3. External
The JS code is applied through external .js file and is linkec through script tag.
Source Code:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Example: Internal, Inline, and External</title>
<script src="[Link]"></script>
<script>
function changeHeadingText() {
[Link]("heading").innerText = "Text changed by Internal
JavaScript!";
}
function changeParagraphColor() {
[Link]("myParagraph").[Link] = "green";
}
</script>
</head>
<body>
<h1 id="heading" onclick="changeHeadingText()">Click to change this text (Inline JS)</h1>
<button onclick="alert('Button clicked! (Inline JS)')">Click Me (Inline JS)</button>
<p id="myParagraph">This is a paragraph. Click the button below to change its color.</p>
<button onclick="changeParagraphColor()">Change Paragraph Color (Internal JS)</button>
<button onclick="changeBackgroundColor()">Change Background Color (External
JS)</button>
</body>
</html>
[Link] :
function changeBackgroundColor() {
[Link] = "#00ff00";
}
[Link] = function() {
alert("Welcome to the page!");
};
Output :
JavaScript Validation
JavaScript validation is used to ensure that the data entered into a form by a user meets specific
requirements before the form is submitted to the server. This helps in improving user experience
by providing instant feedback, reducing server load by filtering invalid data, and ensuring data
integrity.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
<script>
function validateForm() {
var name = [Link]("name").value;
var email = [Link]("email").value;
var password = [Link]("password").value;
if (name == "") {
alert("Name must be filled out");
return false;
}
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if () {
alert("Please enter a valid email address");
return false;
}
if ([Link] < 8) {
alert("Password must be at least 8 characters long");
return false;
}
alert("Form submitted successfully!");
return true;
}
</script>
</head>
<body>
<h2>Registration Form</h2>
<form onsubmit="return validateForm()">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
jQuery
jQuery is a fast, small, and feature-rich JavaScript library that simplifies tasks like HTML
document traversal and manipulation, event handling, animation, and AJAX interactions. It
provides an easy-to-use API that works across a multitude of browsers, making it one of the most
popular JavaScript libraries.
It is a powerful tool that simplifies many common tasks in web development. Whether we're
manipulating the DOM, handling events, or making AJAX requests, jQuery provides a clean,
simple API that saves time and effort. While modern JavaScript frameworks like React and
Angular have become popular, jQuery is still widely used, especially in projects where
lightweight solutions are preferred or legacy systems are being maintained.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Example</title>
<script src="[Link]
<style>
#myDiv {
width: 300px;
height: 150px;
background-color: lightblue;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<h1>jQuery Implementation</h1>
<p id="myParagraph">This is a paragraph.</p>
<button id="myButton">Click Me</button>
<div id="myDiv">
This is a div element.
</div>
<script>
$(document).ready(function() {
$("#myButton").click(function() {
$("#myParagraph").text("The button was clicked!");
$("#myDiv").slideToggle();
});
});
</script>
</body>
</html>
Output :
Write an XML and external DTD for a document
XML (eXtensible Markup Language) is a markup language designed to store and transport data.
Unlike HTML, which is used to display data in a browser, XML is focused on data representation
and transfer. XML allows us to define our own tags, making it both flexible and customizable for
various types of data.
DTD (Document Type Definition) is a set of rules that define the structure, elements, and attributes
of an XML document. A DTD ensures that the XML document adheres to a specific format and is
valid according to the defined structure.
Source Code:
[Link]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE catalog SYSTEM "[Link]">
<catalog>
<book>
<title>The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
<year>1925</year>
<genre>Fiction</genre>
</book>
<book>
<title>To Kill a Mockingbird</title>
<author>Harper Lee</author>
<year>1960</year>
<genre>Fiction</genre>
</book>
<book>
<title>1984</title>
<author>George Orwell</author>
<year>1949</year>
<genre>Dystopian</genre>
</book>
</catalog>
[Link]
<!ELEMENT catalog (book+)>
<!ELEMENT book (title, author, year, genre)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT genre (#PCDATA)>
Output:
Write XML and external XML schema for a document
Objective: To write an XML document and an external XML schema for that document.
Source Code:
[Link]
<?xml version="1.0" encoding="UTF-8"?>
<inventory xmlns:xsi="[Link]
instance"xsi:noNamespaceSchemaLocation="[Link]">
<item>
<name>Apple iPhone 14</name>
<category>Electronics</category>
<price>999.99</price>
<quantity>50</quantity>
</item>
<item>
<name>Samsung Galaxy S23</name>
<category>Electronics</category>
<price>899.99</price>
<quantity>40</quantity>
</item>
<item>
<name>Dell XPS 13</name>
<category>Computers</category>
<price>1200.00</price>
<quantity>25</quantity>
</item>
</inventory>
[Link]
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="[Link]
<xs:element name="inventory">
<xs:complexType>
<xs:sequence>
<xs:element name="item" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="name" type="xs:string"/>
<xs:element name="category" type="xs:string"/>
<xs:element name="price" type="xs:decimal"/>
<xs:element name="quantity" type="xs:int"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
Output :
PHP
PHP (Hypertext Preprocessor) is a widely-used open-source server-sided scripting language
especially suited for web development. It can be embedded into HTML and is used to manage
dynamic content, databases, session tracking, and even build entire e-commerce sites.
Key Features of PHP:
1. Server-Side Scripting: PHP code is executed on the server, and the result is sent to the client's
web browser as plain HTML.
2. Embedded in HTML: PHP code can be embedded directly within HTML, making it easy to add
dynamic content to web pages.
3. Database Interaction: PHP can interact with various database systems like MySQL, PostgreSQL,
Oracle, and others.
4. Cross-Platform: PHP scripts can run on different platforms like Windows, Linux, MacOS, etc.
5. Open Source: PHP is free to use and has a large community that contributes to its development.
6. Database interaction: PHP can connect to MySql database which can be used to connect the
front end to backend.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>
<?php
echo "Today's date is: " . date("Y-m-d");
?>
</p>
<p>
<?php
$hour = date("H");
if ($hour < 12) {
echo "Good morning!";
} elseif ($hour < 18) {
echo "Good afternoon!";
} else {
echo "Good evening!";
}
?>
</p>
<?php $a = 5;
$b = 10;
$sum = $a + $b;
echo "The sum of $a and $b is: $sum";
?>
</p>
</body>
</html>
Output:
PHP Forms, Validation and Session
Objective: To create a login form, validate the inputs and create a session
Source Code:
[Link]
<?php
session_start();
if (isset($_SESSION['username'])) {
header("Location: [Link]");
exit();
}
$username = $password = "";
$username_err = $password_err = $login_err = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty(trim($_POST["username"]))) {
$username_err = "Please enter your username.";
} else {
$username = trim($_POST["username"]);
}
if (empty(trim($_POST["password"]))) {
$password_err = "Please enter your password.";
} else {
$password = trim($_POST["password"]);
}
if (empty($username_err) && empty($password_err)) {
if ($username == "admin" && $password == "password123") {
$_SESSION["username"] = $username; // Store username in session
header("Location: [Link]"); // Redirect to welcome page
exit();
} else {
$login_err = "Invalid username or password.";
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<?php
if (!empty($login_err)) {
echo '<div style="color:red;">' . $login_err . '</div>';
}
?>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"
method="post">
<div>
<label>Username:</label>
<input type="text" name="username" value="<?php echo $username; ?>">
<span style="color:red;"><?php echo $username_err; ?></span>
</div>
<br>
<div>
<label>Password:</label>
<input type="password" name="password">
<span style="color:red;"><?php echo $password_err; ?></span>
</div>
<br>
<div>
<input type="submit" value="Login">
</div>
</form>
</body>
</html>
[Link]
<?php
session_start();
if (!isset($_SESSION['username'])) {
header("Location: [Link]");
exit();
}
if (isset($_GET['action']) && $_GET['action'] == 'logout') {
session_destroy();
header("Location: [Link]");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
</head>
<body>
<h2>Welcome, <?php echo htmlspecialchars($_SESSION["username"]); ?>!</h2>
<p><a href="[Link]?action=logout">Logout</a></p>
</body>
</html>
Output :
Write a PHP program to store data from Form into Database
Objective : To write a PHP program that takes data from user using form and stores in the database
Source Code:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="contact-form">
<form action="process_form.php" method= “POST” >
<input type="" placeholder="Enter Your Name" required>
<input type="email" placeholder="Enter Your Email" required>
<input type="" placeholder="Enter Your Subject">
<textarea name="" id="" cols="40" rows="10" placeholder="
Enter Your Message"></textarea>
<input type="submit" value="Submit" class="send">
</form>
</body>
</html>
process_form.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "formp";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
function sanitize_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = sanitize_input($_POST["name"]);
$email = sanitize_input($_POST["email"]);
$subject = sanitize_input($_POST["subject"]);
$message = sanitize_input($_POST["message"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
die("Invalid email format");
}
$stmt = $conn->prepare("INSERT INTO contact_messages (name, email, subject, message)
VALUES (?, ?, ?, ?)");
$stmt->bind_param("ssss", $name, $email, $subject, $message);
if ($stmt->execute()) {
echo "New record created successfully";
} else {
echo "Error: " . $stmt->error;
}
$stmt->close();
$conn->close();
} else {
header("Location: [Link]");
exit();
}
?>
Output: