Web Development Lab Record

21ADL38
WEB DEVLOPMENT LABORATORIES

Record
Name : G.S.DEEPAKKUMAR
Reg No : 71762108006
LAB 1
Case Study – Indian Tourism
PROBLEM STATEMENT
Create a webpage for Indian Tourism. In the centre you should display a
heading Welcome to Ministry of Indian Tourism. The message should
be in separate block with Indian flag as its background. Below this
create 6 rows with each block showing the name of one state and when
we click it, it should move to the next page.
WORKING CODE:
<html>
<head>
<title> INDIAN TOURISM </title>
<style>
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body style="background-color:yellow">
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="E:\YEAR 2\html\11.10.22\trips.html">trips</a>
<a href="E:\YEAR
2\html\11.10.22\contact.html">Contact</a>
</div>
<h1 style="color:blue ;"><center> <b>WELCOME TO DK
TOURS AND TRAVELS</b></center></h1>
<center><img src="E:/YEAR 2/html/11.10.22/logo.png"
width="100px"</center>
<h3 style="color: red;"> <center>affiliated with indian
tourism.coaffliated with UNWTO <center><h3>
<hr>
<center> <img src="E:\YEAR 2\html\11.10.22\
download.jpg"></center><br>
<center> <img src="E:\YEAR 2\html\11.10.22\images
(1).jpg"></center><br>
(2).jpg"> </center><br>
(5).jpg"> </center>
</body>
</html>
TRIPS.HTML
<html>
<head>
</head>

<center><img src="E:YEAR 2/html/11.10.22/logo.png"
<hr>
<h2> COUNTRIES OFFERED ARE:<h2>
<a href="#india"> INDIA</a><br>
<a href="#paris"> PARIS</a><br>
<a href="#srilanka"> SRILANKA</a><br>
<a href="#austrlia"> AUSTRILA</a><br>
</h2>
<hr>
<H3 id="india">INDIA </H3>
<a href="https://www.tripadvisor.in/Tourism-g297683-
Agra_Agra_District_Uttar_Pradesh-Vacations.html"> Agra</a><br>
<a href="https://www.tripadvisor.com/Tourism-g297631-Kerala-
Vacations.html"> kerla</a><br>
Amritsar_Amritsar_District_Punjab-Vacations.html"> amristar</a><br>
<a href="https://www.tripadvisor.com/Tourism-g297685-
Varanasi_Varanasi_District_Uttar_Pradesh-Vacations.html">
varnasi</a><br>
Tamil_Nadu-Vacations.html"> tamilnadu</a><br>
<hr>
<h3 id="paris">PARIS </h3>

<a href=https://www.tripadvisor.com/Attraction_Review-
g187147-d188679-Reviews-Cathedrale_Notre_Dame_de_Paris-
Paris_Ile_de_France.html> Notre Dame Cathedral</a><br>
<a href=https://www.tripadvisor.com/AttractionProductReview-
g187147-d15846236-
Skip_the_Line_Arc_de_Triomphe_Tour_Champs_Elysees_Sunset_Strol
l-Paris_Ile_de_Franc.html>Champs Elysées / Arc of Triumph</a><br>
g187148-d188681-Reviews-Palace_of_Versailles-
Versailles_Yvelines_Ile_de_France.html> Palace of Versailles</a><br>
g187147-d188151-Reviews-Eiffel_Tower-Paris_Ile_de_France.html>
effil tower</a><br>
<hr>
<h3 id="srilanka">SRILANKA </h3>

Colombo_Western_Province-Vacations.html">Colombo_</a><br>
Kandy_Kandy_District_Central_Province-Vacations.html">Kandy</
a><br>
Galle_Galle_District_Southern_Province-Vacations.html">Galle</
a><br>
Nuwara_Eliya_Central_Province-Vacations.html"> Nuwara eliya</a>
<hr>
<h3 id="austrlia">AUSTRILA </h3>

Great_Barrier_Reef_Queensland-Vacations.html">Great barrier
reef</a><br>
<a href="https://www.bing.com/ck/a?!
&&p=ee9d3a9cf72f487bJmltdHM9MTY2NzM0NzIwMCZpZ3VpZD0z
OTU1Y2FlOS0xNGY3LTZkOGEtMTEyMC1kOGEyMTUwMDZjYm
MmaW5zaWQ9NTE5OQ&ptn=3&hsh=3&fclid=3955cae9-14f7-6d8a-
1120-
d8a215006cbc&psq=eureka+tower+trip+advisor&u=a1aHR0cHM6Ly9
3d3cudHJpcGFkdmlzb3IuY29tL0hvdGVsX1Jldmlldy1nMzE1ODItZDE
1MTU1NTgtUmV2aWV3cy1FdXJla2FfTWF0dGVyaG9ybl9Ub3dlcnM
tRXVyZWthX1NwcmluZ3NfQXJrYW5zYXMuaHRtbA&ntb=1">eure
ka tower</a>
</body>
</html>
CONTACTS.HTML:
<html>
<head>
<title>Contact</title>
</head>
<center><img src="E:/YEAR 2/html/11.10.22/logo.png"
<hr>
<h1 style="font-size: 32; font-color:blue;"> CONTACT US ON
</h1>
<center><img src="E:\YEAR
2\html\11.10.22\contact.jfif"></body></center>
<center><p>95548*****</p></center><br>
<center><p>95548*****</p></center><br>
<hr>
<h1 style="font-size:32 ;font-color:blue;">MAIL US</h1>
<img src="E:\YEAR 2\html\11.10.22\mail.jfif" >
<center><p>dktours@gmail.com</p></center>
<hr>
<h1>STAY IN TOUCH...</h1>
<hr>
</body>
</html>
OUTPUT
RESULT:
The website is successfully generated for Indian tourism.
LAB-2
ABSTRACT AND MODULE
[TEXTILE MANAGEMENT SYSTEM]
ABSTRACT:
Nowadays people shows much importance in purchasing the
cloth. They themselves buy clothes to be unique in the crowd. At the
busiest world, people don't have time to visit the textile shop and spend
their time to pick clothes. In order of that, we made a initiative to
develop. The page for “THE SALEM SILKS” in which we made as the
e-commerce website, which we can look at the product and order in
online.
OBJECTIVE:
The main objective of this website is to avoid customer rush at any
festival season in order to save the comfort and time.
Usually at the festival time it would be quite difficult to choose the
cloth. In order to avoid all this difficulty, we came up with a new
innovative idea of ecommerce. Here user can see the cloth and purchase
as their wish.
MODULES
 Subcategory module
 filter module
 customer module
 cloth order module
 contact module.
SUB-CATEGORY MODULE:
In this subcategory module we use drop down menu can
categorize the cloth as gender wise cloth wise which will make the user
to interact in their website. It will allow the user to save their time and
show based on their. Interest.
FILTER MODULE
In this filter module user can correctly show their area of interest
and by determining their cloth size, etc. It makes the user comfort feel in
choosing their cloth.
CUSTOMER MODULE
In customer module, the make that it should be registered
username and password for authentication. It should have option for
forget password. It should also link to sign up page. Sign up page should
receive a new username and password from the user.
CONTACT MODULE
This page should collect the details on how the web page actually
looks and what the user feels about changing and contacting him/her for
any issues or bugs.
ORDER MODULE
The cart of the webpage is connected to the shipping pageIt collects
the details such as address, phone number, location to deliver, cost of the
PC, estimated date of deliver, etc.Once this is done, it asks for the mode
of transaction, and moves to the transaction page
LAB 3
Forms
Problem Statement:
1. Create a form using HTML 5 form elements such as text box, text
area, radio button, check box, submit, reset, date, progress, range etc.
2. Also Include HTML Basic Tags, Formatting Tags, Image Tags, Links,
Lists, Marquee, and Table.
3. Iframes, Image Map, Box Model.
Working Code:
<!DOCTYPE html>
<html>
<head>
<style>
.row{
display: flex;
}
.space{
margin-right: 200px;
margin-bottom: 100px;
}
#virat{
border-radius:50%;
}
</style>
</head>
<body style="background-color: PINK;">
<h1 style="color:green ;"> <center>FORMS</center></h1>

<marquee> <h3> special thanks to deepak for creating this website
</h3></marquee>
<div class="row">
<div class="space">
<h2>Checkboxes</h2>
<p>REVIEW ON HOW IS HTML:</p>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1"
value="Bike">
<label for="vehicle1"> POOR</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">OKAY</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> GOOD</label><br><br>
<input type="submit" value="Submit">
</form>
</div>
<br>
<div class="space">
<h1> Radio Buttons</h1>
<p>Please select your favorite Web language:</p>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"
value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
</div>
<div class="space">
<h1>The input element</h1>
<label for="fname">First name:</label>
<input type="text" value="ex:jonson durairaj" id="fname"
name="fname"><br><br>
<label for="password">password:</label>
<input type="password" value="*******" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</div
<div class="space">
<h1> DATE</h1>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit">
</form>
</div>
</div>
<div class="row">
<div class="space">
<h2>Image Maps</h2>
<div id="viart">
<img src="E:\YEAR 2\html\forms\download.jfif" alt="VK"
usemap="#workmap" width="400" height="379">
</div
<map name="workmap">
<area shape="rect" coords="0,0,379,400" alt="Computer"
href="https://en.wikipedia.org/wiki/Virat_Kohli">
</map>
</div>
<div class="space">
<h1> LINKS</h1><br>
<a href="https://www.t20worldcup.com/"> ICC</a><br>
<a href="https://www.google.co.in/">GOOGLE</a>
</div>
<div class="space">
<h1> IFRAME</h1>
<iframe src=https://www.bing.com/ck/a?!
&&p=89bd5b2437c71dc8JmltdHM9MTY2NzM0NzIwMCZpZ3VpZD0
zOTU1Y2FlOS0xNGY3LTZkOGEtMTEyMC1kOGEyMTUwMDZjY
mMmaW5zaWQ9NTE5NQ&ptn=3&hsh=3&fclid=3955cae9-14f7-
6d8a-1120-
d8a215006cbc&psq=bcci&u=a1aHR0cHM6Ly93d3cuYmNjaS50di8&n
tb=1 title="W3Schools Free Online Web Tutorials"></iframe>
</div>
</div>
<div class="row">
<div class="space">
<h1> TABLE </h1>
<table border="2" style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>deepak</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</div>
</div>
</body>
</html>
OUTPUT
RESULT:
Thus the forms is created successfully
LAB 4
Javascript for Login Page
Problem Statement:
Write a JavaScript code for your web application including the
following:
i. Adding content slider.
ii. Generating random numbers for registration.
iii. Dynamic content display.
iv. Using cookies.
v. Manipulation and processing of data.
vi. Implement Events Concept
Working Code:
<html>
<head>
<title> SignUp Page</title>
<style>
body{
background-color: rgb(0, 80, 104);
background-repeat: no-repeat;
background-size: 1550px 800px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-radius: 30px;
}
li {
float: left;
}
li a {
display: block;
color: rgb(255, 255, 255);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: rgb(255, 255, 255);
}
.active {
}
.box1{
border: 5px solid rgb(255, 252, 252);
background-color: white;
border-radius: 30px;
height: 300px;
width: 500px;
margin-top: 10px;
margin-left: 500px;
text-align: center;
}
.showSlider {
display: none
}
.showSlider img {
width: 100%;
}
.container {
max-width: 1000px;
position: relative;
margin: auto;
}
.left, .right {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.right {
right: 0;
border-radius: 3px 0 0 3px;
}
.left:hover, .right:hover {
background-color: rgba(115, 115, 115, 0.8);
}
.contentBook {
color: #eff5d4;
font-size: 30px;
padding: 8px 12px;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
}
.active {
background-color: #fffcfc;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
</style>
<script type = "text/javascript">

</script>
</head>
<body>
<ul>
<li><a class="active" href="D:\CIT College\3rd Semester\
HTML codes\Custom PC Builder.html" style="color:
black;">Home</a></li>
<li><a href="#news">HOME</a></li>
<li><a href="#contact">MENS</a></li>
<li><a href="#about">Cart</a></li>
<li><a href="#about">FAQs</a></li>
<li style="margin-left: 925px;"><a href="D:\CIT College\3rd
Semester\HTML codes\Signup.html">Login</a></li>
<li><a href="#about">SignUp</a></li>
</ul>
<div class="box1">
<h1> CREATE YOUR ACCOUNT</h1>
<div class="container">
<form name="myform" method="post" action="#">
<div class="form-group">
Username: <input type="text" class="form-control"
name="username" placeholder="Username" required="true"
id="un"><br>
Email: <input type="text" class="form-control"
name="email" placeholder="Email" required="true" id="e"><br>
Password: <input type="password" class="form-
control" name="Password" placeholder="Password" required="true"
id="psw"><br>
DOB: <input type="date" required="true"
id="txtDOB">
</div>
<button type="submit" class="btn btn-primary"
onclick="return validateemail(),WriteCookie();" />Login</button>
</form>
</div>
</div>
<br><br>
<div class="container">
<div class="showSlider fade">
<img src="C:\Users\Admin\Pictures\pc_2.jpg" alt= "Entering
Library"/>
<div class="contentBook">Gaming workstation</div>
</div>
<div class="showSlider fade">
<img src="C:\Users\Admin\Pictures\pc_1.jpeg" alt = "Select Book"/>
<div class="contentBook">Gaming Desktop</div>
</div>

<a class="left" onclick="nextSlide(-1)">❮</a>
<a class="right" onclick="nextSlide(1)">❯</a>
</div>
<h1>Dynamic Content Display</h1>
<div id="red" onClick="red()">RED</div><br>
<div id="black" onClick="black()">BLACK</div><br>
<div id="blue" onClick="blue()">BLUE</div><br>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">Mouse over Text Events
Concept</h1>
<script>
function red()
{
var element = document.getElementById("red");
document.body.style.backgroundColor="FF0000";
element.style.color='white';
}
function black()
{
var element = document.getElementById("black");
document.body.style.backgroundColor="000000";
}
function blue()
{
var element = document.getElementById("blue");
document.body.style.backgroundColor='#005068';
}
function validateemail()
{
var x=document.myform.e.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 ||
dotposition+2>=x.length){
alert("Please enter a valid e-mail address");
return false;
}
else rand();
}
function rand()
{
alert("User Registration number: "+Math.floor(Math.random() *
100));
}
var slide_index = 1;
slidesDisplay(slide_index);
function nextSlide(n) {
slidesDisplay(slide_index += n);
}
function currentSlide(n) {
slidesDisplay(slide_index = n);
}
function slidesDisplay(n) {
var i;
var slides = document.getElementsByClassName("showSlider");
if (n > slides.length) { slide_index = 1 }
if (n < 1) { slide_index = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide_index - 1].style.display = "block";
}
</script>
</body>
</html>
PROCEDURE

Web Development Lab Record

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Development Lab Record

Uploaded by

Copyright:

Available Formats

21ADL38

WEB DEVLOPMENT LABORATORIES

<h1 style="color:blue ;"><center> <b>WELCOME TO DK

<h3 id="paris">PARIS </h3>

<h3 id="srilanka">SRILANKA </h3>

<h3 id="austrlia">AUSTRILA </h3>

<h1 style="color:green ;"> <center>FORMS</center></h1>

You might also like