Scribd
Upload
27 views21 pages

Web T

wt

Uploaded by

ANMOL RATAN
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
27 views21 pages

Web T

wt

Uploaded by

ANMOL RATAN
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
You are on page 1/ 21

Experiment No…………………………… Date…………………………………..

Name – Anmol Ratan Roll No. - 2201320100037

Objective: Write HTML Program for designing your institute website. Display
department information of your institute on the website.

Source Code:
Frame.html

<html>
<head>
<title>GNIOT</title>
</head>
<frameset rows="20%,80%">
<frame src="top.html">
<frameset cols="25%,75%">
<frame src="left.html">
<frame src="right.html">
</frameset>
</frameset>
</html>

Top.html

<html>
<body bgcolor="#89CFF0">
<a href="">Home</a>&nbsp&nbsp&nbsp&nbsp&nbsp
<a href="">Student Registration </a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<a href="">Faculty Details </a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&
<a href="">Courses offered </a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&
<a href="">Help Desk </a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<img src="gniot.jpeg" width="100" height="120" float="right">
</body>
</html>

Left.html

<html>
<body bgcolor="#E5E4E2">
<h3>Welcome to GNIOT</h3>
<br>
<h4>Address:</h4>
<p>Plot 7,<br>
knowledge park 2,<br>
Greater Noida,<br>
Uttar Pradesh-201310<br>
</p>
<h4>Contact:</h4>
<p><u>email: </u><br>[email protected]
<br>[email protected]<br><br><u>Phone:</u><br>8860606661<br>8860606662
</p>
</body>
</html>
Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….
Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

Right.html

<html>
<body>
<h2>Greater Noida Institute of Technology</h2>
<br>
<p>Greater Noida Institute of Technology (GNIOT) is one of the premier Institutions in the field of
Technical and Management Education. It has been formed by Shri Ram Educational Trust, Noida on no
profit basis with a firm determination and commitment to foster a holistic approach towards the
development of Engineering and Management Education. The Trust was formed in the year 2000 and the
Institute was established in the year 2001. The Trust has had a meteoric rise, and on date, has established
a chain of educational institutions covering the fields of engineering and management leading towards
Graduate and Post Graduate degrees. Plans are also afoot to introduce Doctoral Programmes in the very
near future. It has been approved by AICTE, Ministry of HRD, Goverment of India and affiliated to Dr. A.P.J.
Abdul Kalam Technical University, Lucknow The Institute distinguishes itself from other colleges and
Institutes due to its holistic approach and unique foresighted planning in providing technical and professional
education with the state-of-the-art techniques. The main objective of an Institute is to generate a bunch
of highly creative professionals, who can contribute not only in the Human Resource Development but
also in the Nation Building Exercise.</p>
<img src="gniot1.jpeg" width="300" height="150">
<img src="gniot2.jpeg" width="300" height="150">
</body>
</html>

Output:

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037
Objective: - Write an HTML program to design an entry form of student details.
SOURCE CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Student Entry Form</title>
</head>
<body>
<h2>Student Entry Form</h2>
<form>
<label for="first-name">First Name:</label><br>
<input type="text" id="first-name" name="first-name" required><br><br>

<label for="last-name">Last Name:</label><br>


<input type="text" id="last-name" name="last-name" required><br><br>

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


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

<label for="dob">Date of Birth:</label><br>


<input type="date" id="dob" name="dob" required><br><br>

<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>

<label for="course">Course:</label><br>
<select id="course" name="course" required>
<option value="computer-science">Computer Science</option>
<option value="mathematics">Mathematics</option>
<option value="biology">Biology</option>
<option value="engineering">Engineering</option>
</select><br><br>

<label for="address">Address</label><br>
<textarea id="address" name="address" rows="4" cols="50"></textarea><br><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</body>
</html>

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

OUTPUT:

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

Objective: Develop a Responsive website for tutorial using CSS and HTML.

Source Code:-

event.html
<!DOCTYPE html>
<html lang="en">
<head>
<title> Event Booking Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<div class="logo">Extravaganza</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<h1>Welcome to Extravaganza </h1>
<p>Your one-stop solution to plan weddings , functions and parties!</p>
</section>
<section id="about">
<h2>About Us</h2>
<p>We provide ideas and arrangements to make your dream plan executed.
</p>
</section>
<section id="events">
<h2>Functions</h2>
<div class="event-list">
<div class="event">
<h3>Weddings</h3>
<p>Make that special day of your life even more special.</p>
</div>

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

<div class="event">
<h3>Birthday</h3>
<p>Cheers to one more year of living happily.</p>
</div>
<div class="event">
<h3>Corporate functions</h3>
<p>Lets crack the deal and have some party. </p>
</div>
</div>
</section>
<section id="contact">
<h2>Contact NO: +91-701737888</h2>
<h2>Email: [email protected]</h2>
</section>
<footer>
<p>© 2024 Extravaganza. All rights reserved.</p>
</footer>
</body>
</html>

Styles.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 0;
margin: 0;
}

/* Header and Navigation */


header {
background-color: #333;
padding: 10px 0;
color: white;
text-align: center;}

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

.logo {
font-size: 24px;
font-weight: bold;
}

nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
}

nav ul li {
display: inline;
}

nav ul li a {
color: white;
text-decoration: none;
font-size: 18px;
}

nav ul li a:hover {
text-decoration: underline;
}

/* Section Styles */
section {
padding: 40px 20px;
text-align: center;
}

#home {
background: #f4f4f4;
padding: 80px 20px;
}

#about, #tutorials, #contact {


background: #e2e2e2;
}

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

.event-list {
display: flex;
justify-content: space-around;
margin-top: 20px;
}

.event {
background-color: #fff;
padding: 20px;
border-radius: 8px;
width: 30%;
}

.event h3 {
color: #333;
}

/* Footer */
footer {
background-color: #333;
color: white;
padding: 20px 0;
text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
.event-list {
flex-direction: column;
align-items: center;
}

.event {
width: 80%;
margin-bottom: 20px;
}
}

@media (max-width: 500px) {


nav ul {
flex-direction: column;
}

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

nav ul li {
margin: 10px 0;
}

header {
padding: 20px 0;
}
}

Output:

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

Objective: Write programs using HTML and Java Script for validation of
input data.

Source Code:

Main page:

<html>
<body>
<form action="f1.html" target="_blank" method="get""post"">
<center><fieldset>
<legend> STUDENT
REGISTRATION FORM
</legend> USERNAME: <input
type="text" name=" "
id="name"/><br>
PASSWORD: <input type="password" name="pass"
minlength="10" required/><br>ADDRESS: <input type="text"
placeholder="address" size="20%"/><br>
EMAIL: <input type="email" name="email" placeholder="email"/><br>
PHONE: <input type="number" maxlength="10"
placeholder="phone" name="num"/><br>DATE OF BIRTH:
<input type="date" placeholder="dd/mm/yyyy"
name="num"/><br> GENDER: <input type="radio" value="male"
name="gender" checked/>male <input type="radio"
value="female" name="gender" />female <br>
CATEGORY: <input type="checkbox" value="sc"
name="category" checked/> SC <input type="checkbox"
value="st" name="category"/> ST <input type="checkbox"
value="obc"name="category"/>OBC <input type="checkbox"
value="general" name="category"/>GENERAL<br>
SELECT YOUR COURSE: <select name="subject" multiple size=2>
<option value="web technology"> web technology </option>
<option value=" computer network"> computer network </option>
<option value="java"> java </option>
</select><br>
<input type="button" onclick="submit it " value="submit"/>
<input type="button" onclick="submit it " value="reset"/>
</center>
</fieldset>
</form>
</body>
</html>

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

F1.html:
<html>
<body>Sucessfully submitted the form.<br></body>
</html>

FORM VALIDATION:
<script> function form()
{

var username = document.forms["RegForm"]["Name"]; var email =


document.forms["RegForm"]["EMail"];
var phone = document.forms["RegForm"]["Telephone"];

var SelectYourCourse = document.forms["RegForm"]["Subject"]; var password =


document.forms["RegForm"]["Password"];
var address = document.forms["RegForm"]["Address"];
var dateofbirth = document.forms["RegForm"]["DateOfBirth"]; var gender =
document.forms["RegForm"]["Gender"];
var category = document.forms["RegForm"]["Category"];
if (username.value == "")
{

window.alert("Please enter your name."); username.focus();


return false;
}

if (address.value == "")
{

window.alert("Please enter your address."); address.focus();


return false;
}
if (email.value == "")

window.alert("Please enter a valid e-mail address."); email.focus();


return false;

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

if (phone.value == "")
{

window.alert("Please enter your telephone number."); phone.focus();


return false;
}

if (password.value == "")
{
window.alert("Please enter your password");

password.focus(); return false;

}
if (dateofbirth.value ==””)
{
window.alert(“Please enter your date of birth.”);
dateofbirth.focus(); return false;

}
if (gender.selectedIndex <1)
{
alert(“Please enter your gender.”);
gender.focus(); return false;
}

if (category.selectedIndex <1)
{
alert(“please enter your category.”);
category.focus(); return false;
}

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Ankit Yadav Roll No. - 2201320100035
if (SelectYourCourse.selectedIndex < 1)
{
alert("Please enter your course."); SelectYourCourse.focus();

return false;

}
return true;
}
</script>

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

OUTPUT:

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

Objective: Write a program in XML for creation of DTD, which specifies set ofrules.
Create a stylesheet in CSS/XSL and display the document in internet explorer. [Book
information]

Source code:

book.DTD
<!ELEMENT books (heading,book*)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT book (title,author,publisher,edition,price)>
<!ELEMENT bookname (#PCDATA)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>

Book css:
book{
color: white;
background-color:grey;
width:100%;
}

heading {
color: green;
font-size: 40px;
background-color: blue;
}
heading,title,author,publisher,edition,price{
display: block;
}
title{
font-size: 25px;
font-weight: bold;
}

Book.xml

<?xml version="1.0" encoding="UTF-8"?>


<?xml-stylesheet type="text/css" href="book.css"?>

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

<!DOCTYPE books SYSTEM "book.dtd">


<books>
<heading>xml with css</heading>
<book>
<title>Title: Harry Potter</title>
<author>Author: J.K.Rowling</author>
<publisher>Publisher: abcde</publisher>
<edition>Edition : 1st</edition>
<price>Price: Rs.700</price>
</book>
<book>
<title>Title: Merchant Of Venice</title>
<author>Author: William Shakespear</author>
<publisher>Publisher: xyz</publisher>
<edition>Edition : 1 st</edition>
<price>Price: Rs.500</price>
</book>
</books>

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

OUTPUT:

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

Objective: Create an HTML page named as “table.html” to display your class time table.
Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Timetable</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: #333;
}
table {
width: 80%;
margin: 0 auto;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #444;
text-align: center;
}
th {
background-color: #f2f2f2;
color: #333;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:nth-child(odd) {
background-color: #e9e9e9;
}
</style>
</head>
<body>
<h1>Class Timetable</h1>
<table>
<tr>
<th>Time</th>

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>9:15 AM - 10:05 AM</td>
<td>Web Tech</td>
<td>DBMS</td>
<td>COI</td>
<td>ML</td>
<td>Apptitue</td>
</tr>
<tr>
<td>10:05 AM - 11:00 AM</td>
<td>DBMS</td>
<td>DAA</td>
<td>TRaining</td>
<td>WT</td>
<td>COI</td>
</tr>
<tr>
<td>11:00 AM - 12:00 PM</td>
<td>DAA</td>
<td>WT</td>
<td>ML</td>
<td>DBMS</td>
<td>sports</td>
</tr>
<tr>
<td>12:00 PM - 1:00 PM</td>
<td>DAA</td>
<td>COI</td>
<td>WT</td>
<td>DBMS</td>
<td>Training</td>
</tr>
<tr>
<td>1:00 PM - 2:00 PM</td>
<td colspan="5">Lunch Break</td>
</tr>
<tr>
<td>2:00 PM - 3:00 PM</td>

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

<td>Training</td>
<td>DBMS</td>
<td>ML</td>
<td>WT</td>
<td>DAA</td>
</tr>
<tr>
<td>3:00 PM - 4:00 PM</td>
<td>CSE</td>
<td>WT LAB</td>
<td>DAA LAB</td>
<td>ML LAB</td>
<td>DAA</td>
</tr>
</table>
</body>
</html>

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….


Experiment No…………………………… Date…………………………………..
Name – Anmol Ratan Roll No. - 2201320100037

OUTPUT:

Faculty Name: Mr. Sunny Gupta Sign. With Date……………………….

You might also like