Web Technology (3161012)

LABORATORY MANUAL

SEMESTER VI

DEPARTMENT OF
ELECTRONICS AND COMMUNICATION
ENGINEERING
GOVERNMENT ENGINEERING COLLEGE- MODASA
 200160111006

CERTIFICATE

This is to certify that Mr. Doshi Parth Dipeshkumar and

Enrollment no. 200160111007 of Six Semester of B.E has satisfactorily
completed his one full semester termwork in “Web Technology
(3161012) ” satisfactorily in partial fulfilment of Bachelor of Electronics
and communication Engineering degree to be awarded by Gujarat
Technological University.

Prof. Sameer Mansuri

Date: - …. /… /…….
 200160111006

Index
Exp Q. Date List Of Experiments Pag Sign
No. No. e
No.
Create a web page named MY
INTRODUCTION with two paragraphs , one
1 1
with your personal details and second with
your educational details.
Create a web page named MY ADDRESS
containing name of your city, taluka, district,
2
state, country and continent in decreasing
order of font size.
Create a webpage named UNIVERSITIES that
provides a list of five different universities.
2 1
When the name of university is clicked, a
website of university should open.
Design a web page named MY LOCAL IMAGE
2 which displays an image stored in your local
drive with its alternate name.
Create a webpage which shows ordered list of
3 your 5 favourite personalities and an unordered
list of your best 5 friends.
Design web page for your college containing a
4 description of the courses, departments,
faculties, library etc, using href, list tags.
3 1 Write an HTML for display following webpage

Design a web page displaying 5 famous quotes

2
with the names of writer/speakers.
Design a web page named with any one
famous historical place (such as Rani ki Vav,
Sarkhez Roza, Gandhi Ashram etc) and
4 1
display its image with their description in
different text color, font size , back ground
color, citation and address.
Design a web page displaying two simple
HTML tables showing top 3 male and female
5 1 tennis players with most grand slams win in
their career and corresponding numbers of
grand slams.
 200160111006

Exp Q. Date List Of Experiments Pag Sign

No. No. e
No.
Design web page displaying a simple HTML
2 table showing top 10 states of India in terms of
literacy and corresponding rates.
Design a web page displaying the following
3
table with borders and with collapsed borders.
Design a web page displaying following table
4
with border and with collapsed border.
Create a web page named “Few Bharat Ratna
Awardees ” with Div tag and Internal CSS for
6 1 different back ground and text color, paragraph
borders. Each division must include
Wikipedia link for that personality.
Create a web page named Ladakh, containing
2 its historical and geographical information in 3
column text using CSS column width.
Create a web page named optical fiber types
using margin , padding properties of CSS and
3 display the information in different paragraphs
and borders. The page should have link of
IEEE Journal of optical fiber.
Design a web page displaying following table
with border and with collapsed border. Use
7 1
CSS for back ground, border color, font color,
font styling etc.
Create a web page named Rotation and
2 scaling using CSS and show rotation and
scaling effect with arbitrary images.
Write HTML and CSS code for the following:
i. Set color of visited link to "green".
ii. Set background color of paragraph to
3 “yellow”
iii. Set list style for unordered lists to "square".
iv. Set "calendar.jpeg" as the repeated
background image of the page.
Design a contact us form using HTML and
CSS. Form includes following details : Name,
8 1
birthdate,
Gender, Email and Phone number.
Exp Q. Date List Of Experiments Pag Sign
 200160111006

No. No. e
No.
Design a registration form for website. Form
contains first name, last name, email address,
2
phone number, password and confirm
password fields.
Develop simple calculator for addition,
9 1 subtraction, multiplication and division
operation using JavaScript
Create an HTML page which asks user to enter
name and a mobile number. Apply following
validations on mobile number:
2
a.) Must start with 7, 8 or 9
b.) Must have 10 digits, not more or less
c.) No other characters allowed
Design a form using HTML and JavaScript that
asks the user to enter his date of birth and on
3 clicking the Calculate Button it calls the
function that calculates how many days are left
in your birthday.
Design a login form with username and
password option using HTML and JavaScript.
Perform following validations.
a.) Username field: minimum length 6
characters, it should not have any special
10 1
character or digits other than _
b.) Password field: minimum length 8
characters and maximum length 12 characters,
it must contain at least one digit and at least
one special character from the set {* , #, _ }
Write a JavaScript that handles following
events.
a.) If the mouse is over heading, change font
color to “red” and if the mouse goes out of the
heading change it to “black”
2
b.) If key pressed is ‘a’, ’e’, ’i’, ’o’, ’u’, the
message should be displayed on pop up box
that “vowel is pressed”
c.) If “Date and Time” button is clicked it
displays current date and time information
Exp Q. Date List Of Experiments Pag Sign
No. No. e
 200160111006

No.
Write a php program to display today’s date in
11 1
dd-mm-yyyy format.
Write a PHP program to find whether entered
2
year is a leap year or not.
Write a PHP program to print following pattern:
1
01
3
101
0101
10101
Create an HTML form that takes number as
input from user. When user clicks on CHECK
4
PRIME button, a php program checks if
number is prime or not and display the result.
Create HTML page that contain textbox, submit
5 / reset button. Write php program to display
this information and also store into text file.
Write a php script to read data from txt file and
12 1 display it in html table (the file contains info in
format Name: Password: Email)
Write a PHP program to upload an image. Also
2 check file size should not be greater than 30
KB.
Write a PHP script to store user registration
3 details (user-name, address, date of birth, age,
pan card, gender) with MySQL database.
 200160111006

Experiment-1

Question 1. Create a web page named MY INTRODUCTION with two

paragraphs ,one with your personal details and second with your
educational details.

Code :
<html>
<head>
<title>MY Introduction</title>
<body>
<div>
<header><h1> My Introduction Page</h1></header>
<span><b><h3>My personal details</h3></b></span>
<p><h4>Hello, My name is parth. I'm 20 year old. I'm living in
Ahmedabad.My mother tongue is Gujarati.I have also speaking in Hindi
English.</h4></p>
<span><b><h3>My eductional details</h3></b></span>
<p><h4>I'm currently studing in bechlor of engineering in government
engineering collage modasa.My field is Electronics and communication. My score
of the engineering is 7.81 CGPA.</h4></p>

</div>
</body>
</head>
</html>
Output :

Web Technology (3161012) 1

 200160111006

Question 2. Create a web page named MY ADDRESS containing name

of your city, taluka, district, state, country and continent in decreasing
order of font size

Code :

Web Technology (3161012) 2

 200160111006

<!DOCTYPE html>
<html>
<head>
<title>MY ADDRESS</title>

</head>
<body>
<h1>MY ADDRESS</h1>
<h2>City: Ahmedabad</h2>
<h3>Taluka: Ahmedabad</h3>
<h4>District: Ahmedabad city</h4>
<h5>State: Gujarat</h5>
<h6>Country: India</h6>
<p>Continent: Asoa</p>
</body>
</html>

Output :

Web Technology (3161012) 3

 200160111006

Experiment-2

Question 1. Create a webpage named UNIVERSITIES that provides a

list of five different universities. When the name of university is clicked, a
website of university should open.

Code :

<!DOCTYPE html>
<html>
<head>
<title>UNIVERSITIES</title>
</head>
<body>
<h1>List of Universities</h1>
<ul>
<li><a href="https://www.harvard.edu/" target="_blank">Harvard
University</a></li>
<li><a href="https://www.stanford.edu/" target="_blank">Stanford
University</a></li>
<li><a href="https://www.mit.edu/" target="_blank">Massachusetts
Institute of Technology (MIT)</a></li>
<li><a href="https://www.ox.ac.uk/" target="_blank">University of
Oxford</a></li>
<li><a href="https://www.cam.ac.uk/" target="_blank">University of
Cambridge</a></li>
</ul>
</body>
</html>

Output :

Web Technology (3161012) 4

 200160111006

Question 2. Design a web page named MY LOCAL IMAGE which

displays an image stored in your local drive with its alternate name.

Code :

<!DOCTYPE html>
<html>
<head>
<title>MY LOCAL IMAGE</title>
</head>
<body>
<h1>My Local Image</h1>
<img src="Image/download.jpeg" alt="My Image" />
</body>
</html>

Output :

Web Technology (3161012) 5

 200160111006

Question 3. Create a webpage which shows ordered list of your 5

favourite personalities and an unordered list of your best 5 friends.

Code :

<!DOCTYPE html>
<html>
<head>
<title>My Favourite Personalities and Best Friends</title>
</head>
<body>
<h1>My Favourite Personalities</h1>
<ol>
<li>Elon Musk</li>
<li>mukesh ambani</li>
<li>mark zuckerberg</li>
<li>Bill Gates</li>
<li>Rohit sharma</li>
</ol>
<h1>My Best Friends</h1>
<ul>
<li>Parth</li>
<li>Anurag</li>
<li>gurang</li>
<li>darshan</li>
<li>Dhruv</li>
</ul>
</body>
</html>

Output :

Web Technology (3161012) 6

 200160111006

Question 4. Design web page for your college containing a description

of the courses, departments, faculties, library etc, using href, list tags.

Code :

<!DOCTYPE html>
<html>
<head>
<title>My College</title>
</head>
<body>
<h1>Welcome to The Government Engineering collage modasa</h1>
<h2>Courses</h2>
<ul>
<li><a href="https://www.gecmodasa.ac.in" target="_blank">Bechlor
Engineering</a></li>
</ul>
<h2>Departments</h2>
<ul>
<li><a href="https://www.gecmodasa.ac.in/departments/ec/ec.php"
target="_blank">Electronics and communication Engineering</a></li>

Web Technology (3161012) 7

 200160111006

<li><a href="https://www.gecmodasa.ac.in/departments/ee/ee.php"
target="_blank">Electrical Engineering</a></li>
<li><a href="https://www.gecmodasa.ac.in/departments/it/it.php"
target="_blank">comuter and information Technology</a></li>
<li><a href="https://www.gecmodasa.ac.in/departments/mech/mech.php"
target="_blank">Michenical and automobile Engineering</a></li>
<li><a href="https://www.gecmodasa.ac.in/departments/civil/civil.php"
target="_blank">civil Engineering</a></li>
</ul>
<h2>Faculties</h2>
<ul>
<li><a href="https://www.gecmodasa.ac.in/departments/ec/faculties.php"
target="_blank">Faculty of ECE</a></li>
<li><a href="https://www.gecmodasa.ac.in/departments/ee/faculties.php"
target="_blank">Faculty of Electrical</a></li>
<li><a href="https://www.gecmodasa.ac.in/departments/it/faculties.php"
target="_blank">Faculty of Computer and IT</a></li>
<li><a href="https://www.gecmodasa.ac.in/departments/mech/faculties.php"
target="_blank">Faculty of Michenical</a></li>
<li><a
href="https://www.gecmodasa.ac.in/departments/civil/faculties.php"
target="_blank">Faculty of civil</a></li>
</ul>
<h2>Library</h2>
<p>Our college has a well-equipped library with a wide range of books and
journals on various subjects.</p>
</body>
</html>

Output :

Web Technology (3161012) 8

 200160111006

Web Technology (3161012) 9

 200160111006

Experiment-3

Question 1. Write an HTML for display following webpage.

Code :

<!DOCTYPE html>
<html>
<head>
<title>The Adventures of Sherlock Holmes</title>
<style>
h1 , h2 , h3 , div{
/* display: block; */
text-align: center;
align-items: center;
}
ol{
list-style-position: inside;
display: inline-block;
text-align: left;

}
li span{
color:blue
}
</style>
<body>
<h1>The Adventures of Sherlock Holmes</h1><br><br><br>
<h2>by Arthur conan Doyle</h2><br><br><hr>

1
Web Technology (3161012)
0
 200160111006

<h2>contents</h2><br>
<div>
<ol type="I">
<li><span>A scandal in Bohemia</span></li>
<li><span> Red-Headed League</span></li>
<li><span> A Case of Identity</span></li>
<li><span> boscomebe Valley Mystery</span></li>
<li><span> Five Oranbe Pips</span></li>
<li><span> Man with the Twisted Lip</span></li>
</ol>
</div>
</body>
</head>
</html>

Output :

1
Web Technology (3161012)
1
 200160111006

Question 2. Design a web page displaying 5 famous quotes with the

names of writer/speakers.

Code :
<html>
<head>
<title>Famous quotes</title>
<body>
<header><h1>Famous quotes</h1></header>
<ul>
<li>"Do Everything You Have To Do, But Not With Ego, Not With
Lust, Not With Envy But With Love, Compassion, Humility, And
Devotion."</li><span>- Lord Krishna </span>
<li>"A fit body, a calm mind, a house full of love. These
things cannot be bought — they must be earned."</li><span>- Naval
Ravikant</span>
<li>"My life has far exceeded my expectations not because of my
own personal efforts or mindset but because of my friends who have enriched my
existence"</li><span>- John Paul Warren
</span>
<li>"If you're going to be a speaker, remember this: No one
cares about you."</li><span>- Richie Norton</span>
<li>"Sow strategically, reap abundantly!"</li><span>- Daren
Martin</span>
</ul>
</body>
</head>
</html>

Output :

1
Web Technology (3161012)
2
 200160111006

Experiment-4

Question 1. Design a web page named with any one famous historical
place (such as Rani ki Vav, Sarkhez Roza, Gandhi Ashram etc) and
display its image with their description in different text color, font size ,
back ground color, citation and address.

Code :

<!DOCTYPE html>
<html>
<head>
<title>sun temple</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
color: #333;
font-size: 16px;
line-height: 1.5;
}
h1 {
color: #333;
font-size: 36px;
text-align: center;
margin-top: 10px;
}
img {
display: block;
margin: auto;
max-width: 35%;
height: auto;
margin-top: 30px;
}
/* .img{
width: 40%;
height: 50%;
align-items: center;
} */
.description {
margin: 30px auto;
max-width: 800px;
text-align: justify;

1
Web Technology (3161012)
3
 200160111006

}
.address {
text-align: center;
font-size: 18px;
margin-top: 30px;
}
/* .citation {
text-align: right;
font-size: 14px;
margin-top: 30px;
} */
</style>
</head>
<body>
<h1>Sun Temple</h1>
<div class="img">
<img
src="https://lh3.googleusercontent.com/proxy/FOKZ4QH59mwKfmfm8qP6_SlPB6WBUnTf-
8AldnOA8cwxya-bGIylxA5wEYDdpYV7BQlfxsk9Z05QJ5KajlcWpdj3M4CTDEkgrAaG5iQE0z-
lhReCRTDTc7b3n34D61d7NVxhCOKn5xVAp62YBXGLYgx8j-u_Wpw=s1360-w1360-h1020"></div>
<div class="description">
<p>Konark Sun Temple is a 13th-century CE Sun temple at Konark about 35
kilometres northeast from Puri city on the coastline in Puri district, Odisha,
India. The temple is attributed to king Narasimhadeva I of the Eastern Ganga
dynasty about 1250 CE.</p>
<p>Dedicated to the Hindu Sun God Surya, what remains of the temple
complex has the appearance of a 100-foot (30 m) high chariot with immense
wheels and horses, all carved from stone. Once over 200 feet (61 m) high,[1]
[5] much of the temple is now in ruins, in particular the large shikara tower
over the sanctuary; at one time this rose much higher than the mandapa that
remains. The structures and elements that have survived are famed for their
intricate artwork, iconography, and themes, including erotic kama and mithuna
scenes. Also called the Surya Devalaya, it is a classic illustration of the
Odisha style of Architecture or Kalinga architecture.</p>
</div>
<div class="address">
<p>Address:Konark, Puri district, Odisha, India</p>
</div>

</body>
</html>

Output :
1
Web Technology (3161012)
4
 200160111006

1
Web Technology (3161012)
5
 200160111006

Experiment-5

Question 1. Design a web page displaying two simple HTML tables

showing top 3 male and female tennis players with most grand slams
win in their career and corresponding numbers of grand slams.

Code :

<!DOCTYPE html>

<html>
<head>
<title>Top Grand Slam Winners</title>
<style>
table
{
margin-left: auto;
margin-right: auto;
border: 2px solid black;
}
h1{
text-align: center;
}
th , tr , td {
border: 2px solid black;
}
table td{
padding-left: 30px;
}
</style>
</head>
<body>
<h1>Top Grand Slam Winners</h1>
<table>
<caption><h4>Top 3 Male Tennis Players with Most Grand Slam
Wins</h4></caption>
<tr>
<th>Player</th>
<th>Number of Grand Slam Wins</th>
</tr>
<tr>
<td>Roger Federer</td>
<td>20</td>

1
Web Technology (3161012)
6
 200160111006

</tr>
<tr>
<td>Rafael Nadal</td>
<td>20</td>
</tr>
<tr>
<td>Novak Djokovic</td>
<td>20</td>
</tr>
</table>
<table>
<caption><h4>Top 3 Female Tennis Players with Most Grand Slam
Wins</h4></caption>
<tr>
<th>Player</th>
<th>Number of Grand Slam Wins</th>
</tr>
<tr>
<td>Margaret Court</td>
<td>24</td>
</tr>
<tr>
<td>Serena Williams</td>
<td>23</td>
</tr>
<tr>
<td>Steffi Graf</td>
<td>22</td>
</tr>
</table>
</body>
</html>

Output :

1
Web Technology (3161012)
7
 200160111006

Question 2. Design web page displaying a simple HTML table showing

top 10 states of India in terms of literacy and corresponding rates.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Top 10 States of India by Literacy Rate</title>
<style>
table
{
margin-left: auto;
margin-right: auto;
border: 2px solid black;
}
th , tr , td {
1
Web Technology (3161012)
8
 200160111006

border: 2px solid black;

}
h1{
text-align: center;
}
table td{
padding-left: 30px;
}
</style>
</head>
<body>
<h1>Top 10 States of India by Literacy Rate</h1>
<table>
<!-- <caption>Top 10 States of India by Literacy Rate</caption> -->
<tr>
<th>State</th>
<th>Literacy Rate (%)</th>
</tr>
<tr>
<td>Kerala</td>
<td>96.2</td>
</tr>
<tr>
<td>Lakshadweep</td>
<td>91.8</td>
</tr>
<tr>
<td>Mizoram</td>
<td>91.3</td>
</tr>
<tr>
<td>Tripura</td>
<td>87.2</td>
</tr>
<tr>
<td>Goa</td>
<td>87.4</td>
</tr>
<tr>
<td>Daman and Diu</td>
<td>87.1</td>
</tr>
<tr>
<td>Andaman and Nicobar Islands</td>
<td>86.3</td>
</tr>
<tr>

1
Web Technology (3161012)
9
 200160111006

<td>National Capital Territory of Delhi</td>

<td>86.2</td>
</tr>
<tr>
<td>Puducherry</td>
<td>85.8</td>
</tr>
<tr>
<td>Chandigarh</td>
<td>85.5</td>
</tr>
</table>
</body>
</html>

Output :

2
Web Technology (3161012)
0
 200160111006

Question 3. Design a web page displaying the following table with

borders and with collapsed
borders.
Name Profession Experience Age
Viral Maheta Embedded 4 years 25
Engineer
Ramesh Amin System Analyst 6 years 27
Shriaknt Patel PHP Programmer 9 years 30

Code :

<!DOCTYPE html>
<html>
<head>
<title>Table with Borders</title>
<style>
table {
border-collapse: collapse;
width: auto;
margin: auto;
}
th, td {
border: 1px solid BLACK;
padding: 8px;
text-align: center;
}
h1{
text-align: center;
}

</style>
</head>
<body>
<h1>Table with Borders</h1>
<table>
<tr>
<th>Name</th>
<th>Profession</th>
<th>Experience</th>
<th>Age</th>
</tr>
<tr>
<td>Viral Maheta</td>
<td>Embedded Engineer</td>
<td>4 years</td>

2
Web Technology (3161012)
1
 200160111006

<td>25</td>
</tr>
<tr>
<td>Ramesh Amin</td>
<td>System Analyst</td>
<td>6 years</td>
<td>27</td>
</tr>
<tr>
<td>Shriaknt Patel</td>
<td>PHP Programmer</td>
<td>9 years</td>
<td>30</td>
</tr>
</table>

</body>
</html>

Output :

Question 4. Design a web page displaying following table with border and
with collapsed border.

Name Profession Experience Age

Viral Maheta Embedded 4 years 25
Engineer
Ramesh Amin System Analyst 6 years 27
Vinay Arora Fresher- yet to decide 22

2
Web Technology (3161012)
2
 200160111006

Shriaknt Patel PHP Programmer 9 years 30

* Above information is correct as on 4/2/2021

Code :
<!DOCTYPE html>
<html lang="en">
<head>

<title>Employee Information</title>
<style>
table {
border-collapse: collapse;
width: auto;
margin: auto;
border: 1px solid black;
}
th, td {
border: 2px solid black;
padding: 8px;
text-align: center;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>Employee Information</h1>
<table>
<tr>
<th>Name</th>
<th>Profession</th>
<th>Experience</th>
<th>Age</th>
</tr>
<tr>
<td>Viral Maheta</td>
<td>Embedded Engineer</td>
<td>4 years</td>
<td>25</td>
</tr>
<tr>
<td>Ramesh Amin</td>
<td>System Analyst</td>
<td>6 years</td>
<td>27</td>

2
Web Technology (3161012)
3
 200160111006

</tr>
<tr>
<td>Vinay Arora</td>
<td colspan="2">Fresher- yet to decide</td>
<td>22</td>
</tr>
<tr>
<td>Shriaknt Patel</td>
<td>PHP Programmer</td>
<td>9 years</td>
<td>30</td>
</tr>
<tr>
<td colspan="4"><b>* Above information is correct as on
4/2/2021</b></td>
</tr>
</table>
</body>
</html>

Output :

2
Web Technology (3161012)
4
 200160111006

Experiment-6

Question 1. Create a web page named “Few Bharat Ratna Awardees ”

with Div tag and Internal CSS for different back ground and text color,
paragraph borders. Each division must include Wikipedia link for that
personality.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Few Bharat Ratna Awardees</title>
<style>
/* Style for the first div */
#div1 {
background-color: #F9D9EB;
color: #2C2C2C;
border: 2px solid #2C2C2C;
padding: 10px;
margin-bottom: 20px;
}
/* Style for the second div */
#div2 {
background-color: #C3E4ED;
color: #2C2C2C;
border: 2px solid #2C2C2C;
padding: 10px;
margin-bottom: 20px;
}
/* Style for the third div */
#div3 {
background-color: #EFECCA;
color: #2C2C2C;
border: 2px solid #2C2C2C;
padding: 10px;
2
Web Technology (3161012)
5
 200160111006

margin-bottom: 20px;
}
/* Style for the Wikipedia links */
a {
color: #E32636;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Few Bharat Ratna Awardees</h1>
<div id="div1">
<h2>Dr. APJ Abdul Kalam</h2>
<p>
Dr. APJ Abdul Kalam was an Indian scientist and politician who served
as the 11th President of India from 2002 to 2007. He was awarded the Bharat
Ratna in 1997 for his contributions to the field of aerospace engineering.
</p>
<p>
For more information, visit his <a
href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam"
target="_blank">Wikipedia page</a>.
</p>
</div>
<div id="div2">
<h2>Mother Teresa</h2>
<p>
Mother Teresa was a Catholic nun who dedicated her life to serving the
poor and needy in India. She was awarded the Bharat Ratna in 1980 for her
humanitarian work.
</p>
<p>
For more information, visit her <a
href="https://en.wikipedia.org/wiki/Mother_Teresa" target="_blank">Wikipedia
page</a>.
</p>
</div>
<div id="div3">
<h2>Sachin Tendulkar</h2>
<p>
Sachin Tendulkar is a retired Indian cricketer who is widely regarded
as one of the greatest batsmen in the history of cricket. He was awarded the
Bharat Ratna in 2014 for his contributions to Indian cricket.
</p>
<p>

2
Web Technology (3161012)
6
 200160111006

For more information, visit his <a

href="https://en.wikipedia.org/wiki/Sachin_Tendulkar"
target="_blank">Wikipedia page</a>.
</p>
</div>
</body>
</html>

Output :

Question 2. Create a web page named Ladakh, containing its historical

and geographical information in 3 column text using CSS column width.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Ladakh</title>
<style>
/* Style for the columns */
.column {
column-width: 33%;
padding: 10px;
}
</style>
</head>
<body>
<h1>Ladakh</h1>
2
Web Technology (3161012)
7
 200160111006

<div class="column">
<h2>Historical Information</h2>
<p>
Ladakh is a region in the northernmost part of India that has a rich
history dating back to the 2nd century BC. It was an important center for
Buddhism and was ruled by various dynasties, including the Kushans, the
Tibetans, and the Mughals.
</p>
<p>
In the 19th century, Ladakh was annexed by the Dogra dynasty of Jammu
and Kashmir and became a part of the Indian subcontinent. Ladakh has been a
union territory of India since 2019.
</p>
</div>
<div class="column">
<h2>Geographical Information</h2>
<p>
Ladakh is located in the high-altitude desert region of the Himalayas,
with an average elevation of over 3,000 meters. It is bounded by the Karakoram
Range in the north and the Zanskar Range in the south.
</p>
<p>
The region is characterized by extreme weather conditions, with
temperatures ranging from -30°C in winter to 30°C in summer. The Indus River
flows through Ladakh, providing water for irrigation and hydroelectric power
generation.
</p>
</div>
<div class="column">
<h2>Tourism</h2>
<p>
Ladakh is a popular tourist destination known for its stunning natural
beauty and rich cultural heritage. Visitors can explore the region's ancient
Buddhist monasteries, trek through its rugged terrain, and experience the
unique Ladakhi way of life.
</p>
<p>
Some popular tourist attractions in Ladakh include the Leh Palace, the
Hemis Monastery, the Pangong Lake, and the Nubra Valley.
</p>
</div>
</body>
</html>

Output :

2
Web Technology (3161012)
8
 200160111006

Question 3. Create a web page named optical fiber types using margin ,
padding properties of CSS and display the information in different
paragraphs and borders. The page should have link of IEEE Journal of
optical fiber.

Code :
<!DOCTYPE html>
<html>
<head>
<title>Optical Fiber Types</title>
<style>
/* Style for the paragraphs */
p {
margin: 20px 0;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Optical Fiber Types</h1>
<p>
There are several types of optical fibers used in modern communication
systems. The most commonly used types are:
</p>
<p>

2
Web Technology (3161012)
9
 200160111006

<strong>Single-mode fiber:</strong> This type of fiber has a small core

diameter, typically around 9 microns. It allows for transmission of light in a
single mode, resulting in low signal attenuation and high bandwidth.
</p>
<p>
<strong>Multimode fiber:</strong> This type of fiber has a larger core
diameter, typically around 50 or 62.5 microns. It allows for transmission of
light in multiple modes, resulting in higher signal attenuation and lower
bandwidth compared to single-mode fiber.
</p>
<p>
<strong>Plastic optical fiber:</strong> This type of fiber is made of
plastic and has a larger core diameter, typically around 1mm. It is less
expensive than glass fibers and is commonly used for short-distance
communication applications.
</p>
<p>
<strong>Silica-clad fiber:</strong> This type of fiber has a silica core
and a cladding made of a different material such as fluorine-doped silica or
boron-doped silica. It is used for specialized applications such as fiber
amplifiers and fiber lasers.
</p>
<p>
For more information on optical fibers, you can visit the <a
href="https://ieeexplore.ieee.org/xpl/RecentIssue.jsp?punumber=5804">IEEE
Journal of Optical Fiber Technology</a>.
</p>
</body>
</html>

Output :

3
Web Technology (3161012)
0
 200160111006

Experiment-7

Question 1. Design a web page displaying following table with border

and with collapsed border. Use CSS for back ground, border color, font
color, font styling etc.

Name Profession Experience Age

Viral Maheta Embedded 4 years 25
Engineer
Ramesh Amin System Analyst 6 years 27
Vinay Arora Fresher- yet to decide 22
Shriaknt Patel PHP Programmer 9 years 30
* Above information is correct as on 4/2/2021

Code :
<!DOCTYPE html>
<html lang="en">
<head>

<title>Employee Information</title>
<style>
body{
background-color: rgb(247, 211, 139);
}
h1{
color: cornflowerblue;
}
table {
border-collapse: collapse;
width: 40%;
margin: auto;
border: 2px solid black;
background-color: rgb(237, 205, 160);
color:rgb(227, 88, 88);

3
Web Technology (3161012)
1
 200160111006

th, td {
border: 2px solid black;
padding: 8px;
text-align: center;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>Employee Information</h1>
<table>
<tr>
<th>Name</th>
<th>Profession</th>
<th>Experience</th>
<th>Age</th>
</tr>
<tr>
<td>Viral Maheta</td>
<td>Embedded Engineer</td>
<td>4 years</td>
<td>25</td>
</tr>
<tr>
<td>Ramesh Amin</td>
<td>System Analyst</td>
<td>6 years</td>
<td>27</td>
</tr>
<tr>
<td>Vinay Arora</td>
<td colspan="2"><b>Fresher- yet to decide</b></td>
<td>22</td>
</tr>
<tr>
<td>Shriaknt Patel</td>
<td>PHP Programmer</td>
<td>9 years</td>
<td>30</td>
</tr>
<tr>
<td colspan="4"><b>* Above information is correct as on
4/2/2021</b></td>
</tr>
</table>

3
Web Technology (3161012)
2
 200160111006

</body>
</html>

Output :

Question 2. Create a web page named Rotation and scaling using CSS
and show rotation and scaling effect with arbitrary images.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Rotation and Scaling using CSS</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
padding: 20px;
}

.image {
width: 200px;
height: 200px;
margin: 20px;

3
Web Technology (3161012)
3
 200160111006

position: relative;
overflow: hidden;
border: 2px solid #ccc;
border-radius: 5px;
}

.image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center center;
transition: transform 0.5s ease-in-out;
}

.image:hover img {
transform: scale(1.5) rotate(45deg);
}
</style>
</head>
<body>
<h1>Rotation and Scaling using CSS</h1>
<div class="container">
<div class="image">
<img src="https://picsum.photos/id/237/200/200" alt="Image 1">
</div>
<div class="image">
<img src="https://picsum.photos/id/238/200/200" alt="Image 2">
</div>
<div class="image">
<img src="https://picsum.photos/id/239/200/200" alt="Image 3">
</div>
<div class="image">
<img src="https://picsum.photos/id/240/200/200" alt="Image 4">
</div>
</div>
</body>
</html>

Output :

3
Web Technology (3161012)
4
 200160111006

Question 3. Write HTML and CSS code for the following:

i. Set color of visited link to "green".

ii. Set background color of paragraph to “yellow”
iii. Set list style for unordered lists to "square".
iv. Set "calendar.jpeg" as the repeated background image of the page.

Code:

<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
a {
color: blue;
}
a:visited {
color: green;
font-size: xx-large;
}
p {
background-color: yellow;
font-size: xx-large;
}
ul {
list-style-type: square;
color: blue;
font-size: xx-large;
}
body {
background-image: url("/Image/Calendar.jpg");

3
Web Technology (3161012)
5
 200160111006

background-repeat: repeat;
image-resolution: 200;
}
</style>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>This is a paragraph of text that has a yellow background color.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<h3><a href="https://www.example.com">A link to Example.com</a></h3>
</body>
</html>

Output :

3
Web Technology (3161012)
6
 200160111006

Experiment-8

Question 1. Design a contact us form using HTML and CSS. Form

includes following details : Name, birthdate, Gender, Email and Phone
number.

Code :

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Contact Us Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
form {
background-color: #fff;
max-width: 500px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}

3
Web Technology (3161012)
7
 200160111006

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select {
width: 100%;
padding: 10px;
border-radius: 3px;
border: none;
margin-bottom: 20px;
box-sizing: border-box;
}
select {
height: 40px;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="birthdate">Birthdate</label>
<input type="date" id="birthdate" name="birthdate" required>
<label for="gender">Gender</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" required>
<input type="submit" value="Submit">
</form>

3
Web Technology (3161012)
8
 200160111006

</body>
</html>

Output :

Question 2. Design a registration form for website. Form contains first

name, last name, email address, phone number, password and confirm
password fields.

Code :

<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style>

3
Web Technology (3161012)
9
 200160111006

form {
width: 50%;
margin: 0 auto;
font-family: Arial, sans-serif;
border: 2px solid #ccc;
padding: 20px;
background-color: #f7f7f7;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

input[type="text"], input[type="email"], input[type="tel"],

input[type="password"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 2px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}

input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" required>

4
Web Technology (3161012)
0
 200160111006

<label for="last_name">Last Name:</label>

<input type="text" id="last_name" name="last_name" required>

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

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

<label for="phone">Phone Number:</label>

<input type="tel" id="phone" name="phone" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<label for="confirm_password">Confirm Password:</label>

<input type="password" id="confirm_password" name="confirm_password"
required>

<input type="submit" value="Register">

</form>
</body>
</html>

Output :

4
Web Technology (3161012)
1