WT Lab Manual

A Laboratory Manual for
Web Technology
(3161012)
B.E. Semester 6 (E.C.)
Electronics and Communication Engineering Department

L.D.C.E Ahmedabad.
L.D. Collage of Engineering
Electronics and Communication Department
CERTIFICATE
This is to certify that Mr./Ms. Enrollment No.

of B.E. Semester 6th Electronics & Communication
Engineering of this Institute has Satisfactorily completed the Practical /
Tutorial work for the subject Web Technology (3161012) for the academic
year 2024-25.
Place: L.D. Collage of Engineering
Date:
Sign of Faculty Head of the Department

INDEX
Sr.No. LIST OF EXPERIMENT DATE PAGE NO. Sign
To understand HTML Title,

1. Paragraph, Heading, Links, Button,
Image Order list & Unordered list.
To understand HTML Style Attribute &
2.
Quotation and Citation Elements.
To understand HTML Emphasized, smaller

3. text, break line, delete word & subscripted
text formatting.
To understand inline CSS implementation

4.
in HTML.
To understand internal CSS application in

5.
HTML
To create tables and perform 3D object

6. transformation using internal , external CSS
and HTML.
To create forms using HTML

7.
and improve style using CSS.
To understand semantics usage by HTML ,

8.
CSS.
To implement JavaScripting mouse event

9. operations and array operations with HTML
and CSS.
To implement various JS programs along

10.
with HTML and CSS.
To create a full fledged front end

11. version of a form using HTML ,
CSS and JS.
To implement PHP along with HTML ,

12.
CSS and JS.
WEB TECHNOLOGY
EXPERIMENT 1
Aim: To understand HTML Title, Paragraph, Heading, Links, Button, Image

Order list & Unordered list.
Example 1: Shows title of page and paragraph in body.

Code:
<!DOCTYPE html>
<html>
<head>
<title> Web Technology</title>
</head>
<body>
<h1>today is monday</h1>
<p>Monday marks the beginning of work week.
people hardly like monday!
but still work is worship.
</p>
</body>
</html>
Output:
Example 2: Shows headings in bold from 1 to 6 n largest to smallest.

Code:
<!DOCTYPE html>
<html>
<body>
<h1> 1 one</h1>
<h2>2 two </h2>
<h3>3 three</h3>
<h4>4 FOUR</h4>
<h5>5 fIvE</h5>
<h6>6 SIX</h6>
</body>
</html>
Page 1
WEB TECHNOLOGY
Output:
Example 3: Shows how to display links.
Code:
<!DOCTYPE html>
<html>
<head>
<title> showing link </title>
</head>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.gtu.ac.in">This is a link </a>
</body>
</html>
Output:
Page 2
WEB TECHNOLOGY
Example 4: Shows how to display image.
Code:
<!DOCTYPE html>
<html>
<head>
<title> showing Image </title>
</head>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="wt.jpeg" alt="Web Technology" width="100" height="120">
</body>
</html>
Output:
Example 5: Shows how to display button.

Code:
<!DOCTYPE html>
<html>
<head>
<title> showing button </title>
</head>
<body>
<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>
<button>Click HERE</button>
</body>
</html>
Output:
Page 3
WEB TECHNOLOGY
Example 6: Shows how to display lists either ordered or unordered.

Code:
<!DOCTYPE html>
<html>
<head>
<title> showing lists </title>
</head>
<body>
<h1>An Unordered HTML List</h1>
<ul>
<li>CHINA </li>
<li>USA</li>
<li>INDIA</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>CHINA</li>
<li>USA</li>
<li>INDIA</li>
</ol>
</body>
</html>
Output:
Page 4
WEB TECHNOLOGY
 TASK:
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>
</head>
<body>
<h1>
MY INTRODUCTION
</h1>
<p>
<h2>Kathan Master</h2>
<strong>Address:</strong><br>
7,Gokul Park Row House,<br> Near Drasti Complex,
<br>Honey Park Road, <br>Adajan, Surat - 395009.<br>
<strong >City:</strong> Surat <br>
<strong >State:</strong> Gujarat<br>
<strong >Country:</strong> India.<br>
<strong >Mobile No.:</strong> <a
href="tele:+919499506064">+919499506064</a> <br>
<strong >E-mail:</strong> <a
href="mailto:22eckat016@ldce.ac.in">22eckat016@ldce.ac.in</a><
br>
</h1></p>
<hr>
<p>
<b><ol><li
class="largegreentext"><a href="https://ldce.ac.in/">L.D.
Collage of Engineering</a> | <a
href="https://www.gtu.ac.in/">Gujarat Technology
University</a><br></b></li>
Field: Bachelor of Engineering in Electronic and
Communication.<br>
Date : Sepetember 2022 - Present<br>
<b><li class="largegreentext"><a href="https://cgpit-
bardoli.edu.in/">Chhotubhai Gopalbhai Patel Institute of
Technology</a> | <a href="http://utu.ac.in/">Uka Tarsadia
Field: Diploma in Electical Engineering.<br>
Date : August 2019 - May2022<br>
CGPA : 7.71<br>
<b><li class="largegreentext"><a
href="https://lpsavani.org/l-p-savani-vidhyabhavan-english-
medium/">L.P. Savani Vidhyabhavan</a> | <a
href="https://lpsavani.org/">L.P. Savani - Group of
School</a><br></b></li>
Field: 10th S.S.C.<br>
Date : April 2018 - July 2019 <br>
Percentage : 51% <br>
Page 5
WEB TECHNOLOGY
</p>
</body>
</html>
Output:
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:
<html>
<head>
<title>Address</title>
</head>
<body>
<h1>City: Surat</h1>
<h2>Taluka: Surat</h2>
<h3>District: Surat</h3>
<h4>State: Gujarat</h4>
<h5>Country: India</h5>
<h6>Continent: Asia</h6>
</body>
</html>
Page 6
WEB TECHNOLOGY
Output:
3. 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:
<html>
<head>
<title>
UNIVERSITY
</title>
</head>
<body>
<h2 class="underline"><strong>University</strong></h2>
<b><ol>
<li><a href="https://www.gtu.ac.in/">Gujarat Technology
<b><li><a href="http://utu.ac.in/">Uka Tarsadia University</a><br></b></li>
<b><li><a href="https://nirmauni.ac.in/">Nirama University</a><br></b></li>
<b><li><a href="https://www.pdpu.ac.in/">PDPU</a><br></b></li>
<b><li><a href="https://darshan.ac.in/"> Darshan University</a><br></b></li>
</ol>
</body>
</html>
Output:
Page 7
WEB TECHNOLOGY
4. Design a web page named MY LOCAL IMAGE which displays an image stored in
your local drive with its alternate name.
Code:
<html>
<head>
<title>MY LOCAL IMAGE</title>
</head>
<body>
<h1>MY LOCAL IMAGE</h1>
<hr>
<strong>
<ol>
<li>Birds <br>
<img src="DSC00015.JPG" alt="birds"
width="150px" height="150px" align="center"
border="3px"></li><br>
<li>Dear <br>
<img src="DSC00025.JPG" alt="dear"
width="150px" height="150px" align="center"
<li>Havelock Island <br>
<img src="20221026_132603.jpg" alt="havelock
island" width="320px" height="180px" align="center"
<li>Neil Island <br>
<img src="20221027_131542.jpg" alt="neil
island" width="320px" height="180px" align="center"
</ol>
</strong>
<hr>
</body>
</html>
Output:
Page 8
WEB TECHNOLOGY
5. Create a webpage which shows ordered list of your 5 favorite personalities and an
unordered list of your best 5 friends.
Code:
<html>
<head>
<title>
Order Unorder List
</title>
</head>
<body>
<ol>
<h3>5 Favorate Personalities</h3>
<li>Akshay Kumar</li>
<li>Narandra Modi</li>
<li>M.S. Dhoni</li>
<li>APJ Abdul Kalam</li>
<li>Sachin Tendulkar</li>
</ol>
<ul>
<h3>5 Best Friends</h3>
<li>Pratham Mehta</li>
<li>Dhruv Kanthriya</li>
<li>Harsh Kayasht</li>
<li>Pankil Doshi</li>
<li>Kaveesh Bhatt</li>
</ul>
</body>
</html>
Output:
Page 9
WEB TECHNOLOGY
Page 10
WEB TECHNOLOGY
EXPERIMENT 2
Aim: To understand HTML Style Attribute & Quotation and Citation Elements.
Example 1: Showing styles in HTML.

Code:
<html>
<head>
<title> STYLE ATTRIBUTE </title>
</head>
<body>
<p>it shows normal text</p>
<p style="color:red;">it shows red text</p>
<p style="color:blue;">it shows blue text</p>
<p style="font-size:100px;">I am big</p>
</body>
</html>
Output:

Code:
<html>
<head>
<title> STYLE ATTRIBUTE for back ground color </title>
</head>
<body style="background-color:powderblue;">
Page 11
WEB TECHNOLOGY
<p style="background-color:orange;">it shows orange
color text back ground</p>
<p style="background-color:yellow;">it shows yellow
color text back ground</p>
<p style="font-size:100px;">it shows red color text back
ground </p>
</body>
</html>
Output:

Code:
<html>
<head>
<title> STYLE ATTRIBUTE for text alignment </title>
</head>
<body>
<h1 style="text-align:center;">3 paragraphs</h1>
<p style="text-align:center;">Rama is the hero of the Ramayana
epic, an incarnation of the God Vishnu.<br>
The eldest and favourite son of
Dasaratha, King of Ayodhya, he is a virtuous prince and is much
loved by the people.<br>
He is exiled from Ayodhya due to the
plotting of his stepmother, Kaikeyi.
</p>
<hr>
<p style="text-align:left;">Sita is Rama's wife and
daughter of King Janaka of Mithila.<br>
Sita is the epitome of womanly purity and virtue.
</p>
<hr>
<p style="text-align:right;">Ravana is the king of Lanka and
has 10 heads and 20 arms.<br>
He received a boon from the God Brahma that he cannot be
killed by gods, demons or by spirits,<br>
after performing a severe penance for 10,000 years
</p>
</body>
</html>
Page 12
WEB TECHNOLOGY
Output:

Code:
<html>
<head>
<title> STYLE ATTRIBUTE for text formatting
</title>
</head>
<body>
<p>
<b>following is an euation of single variable</b><br><br>
<i>find its solution if x=2, </i><br><br>
X<sup>2</sup> - 2X + 1=0 <br><br>
solution is X<sub>1</sub> = 1 & X<sub>2</sub>= 1 <br><br>
<strong>such algebra seems very easy!!!!!</strong>
</p>
</body>
</html>
Output:
Page 13
WEB TECHNOLOGY
Example 5: Showing Quotation and Citation Elements in HTML.
Code:
<html>
<head>
<title> text formatting </title>
</head>
<body>
<p>Here is a quote from Swami VIVEKANAND</p>
<blockquote>
"Arise, Awake and dont stop until the goal is
achieved."
</blockquote>
</body>
</html>
Output:
 TASK
1. Write an HTML for display following webpage.
Page 14
WEB TECHNOLOGY
Code:
<!DOCTYPE html>
<html>
<head>
<title>display</title>
<style>
body {
text-align: center;
}
.list {
display: inline-block;
text-align: left;
margin: 0 auto;
}
.list li {
text-align: justify;
color: blue;
}
.list li::marker {
color: black;
}
</style>
</head>
<body>
<p font="Time New Roman">
<h2>The Adventures of Sherlock <br> Holmes <br></h2>
</p>
<p>
by Arthur Conan Doyle
</p><br><hr><br>
<p>
<b>Contents</b>
</p>
<div class="list">
<ol type="I">
<li> A Scandal in Bohemia</li>
<li> The Red-Headed League</li>
<li> A Case of Identity</li>
<li> The Boscombe Valley Mystery</li>
<li> The Five Orange Pips</li>
<li> The Man with the Twisted Lip</li>
</ol>
</div>
</body>
</html>
2. Design web page for your college containing a description of the courses,
departments, faculties, library etc, using href, list tags.
Code: HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
Page 15
WEB TECHNOLOGY
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Kathan Master</title>
<link rel="Stylesheet" type="" href="home.css">
<style>
</style>
</head>
<body>
<header>
<nav align="right">
<h3>
<div id="div2">
<a href="home.html">Home</a> |
<a href="#about">About</a> |
<a href="departments.html">Department</a> |
<a href="courses.html">Courses</a> |
<a
href="https://ldce.ac.in/upload/pdf/legal/LDCE-Faculty-Staff-
List.pdf">Facilties</a> |
<a href="library.html">Library</a> |
<a href="contact.html">Contact</a>
</div>
</h3>
</nav>
<div id="div1" >
<a href="home.html"><img src="download.png" alt=""
weight="100" height="100"> </a>
<h1 align="right">
L.D. COLLEGE OF ENGINEERING
<br>
Ahmadabad, Gujarat, India
</h1>
</div>
</header>
<main>
<div id="div3">
<section id="about">
<h1 align="center"><hr>
WELCOME TO L.D.C.E. <br>
</h1>
<img src="ldce.jpg" alt="ldce" width="1450"
height="auto" border="1px" align="center">
<h4 align="justify">
<ol>
<li>
L. D. College of Engineering endearingly
known as L.D.C.E is Ahmedabad’s premier engineering college
situated at the city’s heart and surrounded by elite
organization like PRL, ATIRA, ISRO, IIM and CEPT.
Starting in 1948 to impart quality higher
education in various fields of engineering, it has seen
unprecedented growth.
Page 16
WEB TECHNOLOGY
</li>
<li>
It is affiliated with Gujarat
Technological University & administrated by Department of
Technical Education, Government of Gujarat.
</li>
</ol>
</h4>
<h3>Vision</h3><hr>
<h4>
<ul>
<li>
To contribute for sustainable
development of nation through achieving excellence in technical
education and research while facilitating transformation of
students into responsible citizens and competent professionals.
</li>
</ul>
</h4>
<h3>Mission</h3><hr>
<h4>
<ul>
<li>To impart affordable and quality
education in order to meet the needs of industries and achieve
excellence in teaching-learning process.</li>
<li>To create a conducive research
ambience that drives innovation and nurtures research-oriented
scholars and outstanding professionals.</li>
<li>To collaborate with other academic
& research institutes as well as industries in order to
strengthen education and multidisciplinary research.</li>
<li>To practise and encourage high
standards of professional ethics, transparency and
accountability.</li>
<li>To promote equitable and harmonious
growth of students, academicians, staff, society and industries,
thereby becoming a center of excellence in technical
education.</li>
</ul>
</h4>
</section>
</div><hr>
</main>
<footer>
<div class="footer-row">
<div class="footer-cell
contact-info">
<h2>Contact Us</h2>
<h4>Phone No.: <a href="tele: 079-
2630-2887">079-2630-2887</a></h4>
<h4>E-mail:<a href="mailto:ldce-
abad-dte@gujarat.gov.in">ldce-abad-dte@gujarat.gov.in</a></h4>
<h4 id="contact"><b>
Address:<br>
Page 17
WEB TECHNOLOGY
<a
href="https://maps.app.goo.gl/soxCt29WhbW42bKLA">
Lalbhai Dalpatbhai Collage of
Engineering, <br>
120, Circular Road, University
Area, <br>
Ahmedabad, Gujarat
380015<br></a>
</div>
<div class="footer-cell working-hours">
<h2>Working Hours</h2>
<p><strong>Monday-Friday:</strong>
10:30am to 6:10pm </p>
<p><strong>Saturday:</strong>
10:30am to 6:10pm (Closed on 2nd and 4th)</p>
<p><strong>Sunday:</strong>
Closed</p>
</div>
<div class="footer-cell social-media">
<h2>Social Media</h2>
<a
href="mailto:https://mail.google.com/mail/u/0/?ogbl#inbox?compo
se=CllgCJNqtbmqCPpZdnwGCJTzzDwHLSnPTTwXbDzNtbFBKgSWLrSGngQPCdLq
wxzCFCsPhLbSVdB"><img src="google.jpg" alt="Gmail" width="30"
height="30"></a>
<a
href="https://www.linkedin.com/in/kathan-master-31b4b4229"><img
src="linked in.jpg" alt="LinkedIn" width="30" height="30"></a>
<a
href="https://instagram.com/_master_kathan_?igshid=ZDdkNTZiNTM=
"><img src="insta.jpg" alt="Instagram" width="30"
height="30"></a>
<a
href="https://www.youtube.com/channel/UCZRgdL0bvyTZQrDDU1o6mmA"
><img src="yt.jpg" alt="Youtube" width="30" height="30"></a>
</div> </div>
</div>
</div>
<p align="right">© 2024 Our College. All
rights reserved.</p>
</footer>
</body>
</html>
CSS code:
body{
text-align: justify;
background-color: orange;
}
#div1{
display: flex;
background: rgb(0, 4, 255);
color: rgb(255, 255, 255);
}
main {
Page 18
WEB TECHNOLOGY
background-color: #ffffff;
min-height: auto;
}
#div2{
background-color: orange;
}
#div3{
background-color: white;
}
footer {
background-color: #000000;
text-align: left;
color: #ffffff;
}
.footer-row {
display: flex;
align-items: center;
}
.footer-cell {
padding: 10px;
text-align: left;
}
.footer-cell h2 {
margin-top: 0;
}
.footer-cell
.working-hours,
.social-media{
max-width: 300px; /* Limits the maximum width of the cells */
text-align: justify; /* Aligns the content of these cells to the center
*/
}
Output:
Page 19
WEB TECHNOLOGY
3. Design a web page named Rani ki Vav and display its image with their description
in different text color, font size , back ground color, citation and address.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Rani ki Vav</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
color: #333;
}
h1 {
text-align: center;
color: #4CAF50;
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 20px;
}
p {
font-size: 16px;
line-height: 1.6;
}
Page 20
WEB TECHNOLOGY
.description {
color: #0e0f10;
font-size: 18px;
}
.citation {
color: #999;
font-style: italic;
}
.address {
color: #ff6600;
}
</style>
</head>
<body>
<div class="container">
<h1>Rani ki Vav</h1>
<img src="C:\WEB TECHNOLOGY\rani_ki_vav.jpg" alt="Rani
ki Vav">
<p class="description">Rani ki Vav, also known as the
Queen's Stepwell, is a UNESCO World Heritage Site located in
Patan, Gujarat, India. It is an intricately constructed
stepwell built in the 11th century AD by Queen Udayamati in
memory of her husband King Bhimdev I of the Solanki
dynasty.</p>
<p class="citation">"The stepwell is designed as an
inverted temple highlighting the sanctity of water." -
UNESCO</p>
<p class="address">Address: Near Patan, Gujarat,
India</p>
</div>
</body>
</html>
Output:
Page 21
WEB TECHNOLOGY
Page 22
WEB TECHNOLOGY
EXPERIMENT 3
Aim: To understand HTML Emphasized, smaller text, break line, delete word & subscripted text
formatting.

Code:
<html>
<body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
<i>This text is italic.</i>
<br><small>This is some smaller text.</small>
<br><p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>
Output:
Example 2: Showing Text Formatting.

Code:
<html>
<head>
<title> text formatting </title>
</head>
<body>
<p>
<b>following is an euation of single variable</b><br><br>
<i>find its solution </i><br><br>
Page 23
WEB TECHNOLOGY
X<sup>2</sup> - 2X + 1=0 <br><br>
solution is X<sub>1</sub> = 1 & X<sub>2</sub>= 1 <br><br>
<strong>such algebra seems very easy!!!!!</strong><br><br>
<em>this also displays italic </em><br><br>
it shows <del>deleted word </del> and <ins> inserted word </ins>
in the text<br><br>
Do not forget to use the <mark>proper tag </mark> at proper place.
</p>
</body>
</html>
Output:
Example 3: Showing Quotation and Citation Elements in HTML.

Code:
<html>
<head>
<title> Quotation and Citation
</title>
</head>
<body>
<p> Here is a quote from Swami VIVEKANAND</p><br><br>
<blockquote>
"Arise, Awake and dont stop until the goal is achieved."
</blockquote><br><br>
<p> alternate way to provide quote is: </p>
<q> Arise, Awake and dont stop until the goal is
achieved.</q><br><br>
<p> The <abbr title="Gujarat Public Service
Commission">GPSC</abbr> works very efficiently for last for few
Page 24
WEB TECHNOLOGY
years.</p>
<br> <br>
ુ રાત નો નાથ </cite> is the famous novel of Shri.
<p> <cite> જ
K.M.Munshi</p>
</body>
</html>
Output:
Page 25
WEB TECHNOLOGY
EXPERIMENT 4
Aim: To understand inline CSS implementation in HTML.
Example 1: It shows colors in grey levels of R G B.

Code:
<!DOCTYPE html>
<html>
<head>
<title> COLORS USING 0-255 GREY LEVELS OF RGB
</title>
</head>
<body>
<h1 style="background-color:rgb(255, 0, 0);"> ITS RED </h1>
<h1 style="background-color:rgb(0, 0, 255);"> ITS BLUE </h1>
<h1 style="background-color:rgb(0, 255, 0);"> ITS
GREEN </h1>
<h1 style="background-color:rgb(200, 130, 200);">identify the
color in back ground</h1>
<h1 style="background-color:rgb(255, 0, 255);"> identify the
color in back ground </h1>
</body>
</html>
Output:
Example 2: It shows shades of grey.

Code:
<!DOCTYPE html>
<html>
<head>
<title> SHADES OF GREY WITH EQUAL RBG </title>
</head>
<body>
<h1 style="background-color:rgb(255, 255, 255);"> ITS ALMOST
WHITE BG </h1>
<h1 style="background-color:rgb(0, 0, 0);"> ITS BLACK BG </h1>
Page 26
WEB TECHNOLOGY
<h1 style="background-color:rgb(100, 100, 100);"> ITS
GREEN </h1>
<h1 style="background-color:rgb(200, 200, 200);">NEARER TO WHITE
in back ground</h1>
<h1 style="background-color:rgb(10,10,10);"> NEARER TO BLACK in
back ground </h1>
</body>
</html>
Output:
Example 3: It shows colors with RGBA.

Code:
<!DOCTYPE html>
<html>
<head>
<title> COLORS WITH RGBA </title>
</head>
<body>
<h1 style="background-color:rgba(0, 255, 255, 0);"> ITS WITH MAXIMUM
TRANSPARENCY </h1>
<h1 style="background-color:rgba(0, 255, 255, 0.3);"> TRANSPARENCY
DECREASING</h1>
DECREASING</h1>
DECREASING </h1>
<h1 style="background-color:rgba(0, 255, 255, 1);"> ITS ALMOST NON
TRANSPARENT </h1>
</body>
</html>
Output:
Page 27
WEB TECHNOLOGY
Example 4: It shows colors with Hexadecimal values of RRGGBB.

Code:
<!DOCTYPE html>
<html>
<head>
<title> COLORS WITH RGB Hex values</title>
</head>
<body>
<h1 style="background-color:#ff0000;">BG IS RED</h1>
<h1 style="background-color:#0000ff;">BG IS BLUE</h1>
<h1 style="background-color:#3cb371;">IDENTIFY THE BG COLOR</h1>
<h1 style="background-color:#ee82ee;">IDENTIFY THE BG COLOR</h1>
<h1 style="background-color:#ffa500;">IDENTIFY THE BG COLOR</h1>
<h1 style="background-color:#6a5acd;">IDENTIFY THE BG COLOR</h1>
</body>
</html>
Output:
Example 5: It shows colors with HUE, SATURATION and LIGHTNESS.

Code:
<!DOCTYPE html>
<html>
<head>
<title> COLORS WITH HSL and HSLA </title>
</head>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%,
50%)</h1>
50%)</h1>
47%)</h1>
Page 28
WEB TECHNOLOGY
72%)</h1>
50%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">SHOWS MAXIMUM
SATURATION</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">SHOWS MINIMUM
SATURATION</h1>
<h1 style="background-color:hsl(0, 100%, 0%);">ZERO LIGHTNESS IN
RED</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">MAXIMUM LIGHTNESS IN
RED</h1>
<h1 style="background-color:hsl(0, 0%, 20%);">SHADE OF GREY </h1>
<h1 style="background-color:hsl(0, 0%, 90%);">SHADE OF GREY </h1>
<h1 style="background-color:hsla(50, 100%, 64%, 0.5);">SHOWS WITH
HSLA</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">SHOWS WITH HSLA
</h1>
</body>
</html>
Output:
Page 29
WEB TECHNOLOGY
EXPERIMENT 5
Aim: To understand internal CSS application in HTML.
Example 1: Internal CSS.

Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: YELLOW;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Internal CSS</h1>
<p>An internal CSS is defined in the section of an HTML page, within
a element.</p>
</body>
</html>
Output:
Example 2: Border Types in CSS.

Code:
<!DOCTYPE html>
<html>
<head>
<style>
.one {
border-style: solid;
border-width: 5px;
border-color: red;
}
.two {
Page 30
WEB TECHNOLOGY
border-width: medium;
border-color: red;
}
.three {
border-style: dotted;
border-width: 2px;
border-color: red;
}
.four {
border-style: dotted;
border-width: thick;
border-color: red;
}
.five {
border-style: double;
border-width: 15px;
border-color: red;
}
.six {
border-style: double;
border-width: thick;
border-color: red;
}
.seven {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
border-color: blue;
}
.eight {
border: 2px solid red;
border-radius: 12px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>
<p class="one">border types</p>
<p class="two">border types</p>
<p class="three">border types</p>
<p class="four">border types</p>
<p class="five">border types</p>
<p class="six">border types</p>
<p class="seven">border types</p>
<p class="eight">rounded border</p>
<p><b>Note:</b> The "border-width" property does not work if it is
used alone.
Always specify the "border-style" property to set the borders
first.</p>
</body>
</html>
Page 31
WEB TECHNOLOGY
Output:
Example 3: Paragraph Width.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS3 Column Count or Width </title>
<style>
.newspaper{
column-count:3;/* Standard syntax */
text-align:justify;
}
</style>
</head>
<body>
<div class="newspaper">
Patel was born into a self-sufficient landowning family of the
Leva Patidar caste. Reared in an atmosphere of traditional Hinduism,
he attended primary school at Karamasad and high school at Petlad but
was mainly self-taught. Patel married at the age of 16, matriculated
at 22, and passed the district pleader’s examination, which enabled
him to practice law. In 1900 he set up an independent office of
district pleader in Godhra, and two years later he moved to Borsad.
As a lawyer, Patel distinguished himself in presenting an
unassailable case in a precise manner and in challenging police
witnesses and British judges. In 1908 Patel lost his wife, who had
borne him a son and daughter, and thereafter remained a widower.
Determined to enhance his career in the legal profession, Patel
traveled to London in August 1910 to study at the Middle Temple.
There he studied diligently and passed the final examinations with
high honours.
Returning to India in February 1913, he settled in Ahmadabad,
rising rapidly to become the leading barrister in criminal law at the
Ahmadabad bar. Reserved and courteous, he was noted for his superior
mannerisms, his smart, English-style clothes, and his championship in
Page 32
WEB TECHNOLOGY
bridge at Ahmadabad’s fashionable Gujarat Club. He was, until 1917,
indifferent to Indian political activities.
In 1917 Patel found the course of his life changed after having
been influenced by Mohandas K. Gandhi. Patel adhered to Gandhi’s
satyagraha (policy of nonviolence) insofar as it furthered the Indian
struggle against the British. But he did not identify himself with
Gandhi’s moral convictions and ideals, and he regarded Gandhi’s
emphasis on their universal application as irrelevant to India’s
immediate political, economic, and social problems. Nevertheless,
having resolved to follow and support Gandhi, Patel changed his style
and appearance. He quit the Gujarat Club, dressed in the white cloth
of the Indian peasant, and ate in the Indian manner.
<div>
<br>
</body>
</html>
Output:
Example 4: Basic Css Applications - Introduction to CSS Types.

Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML with CSS</title>
<style>
/* Tag Base Selector */
body{
background-color: green;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
}
p{
font-size:25px;
font-weight:600;
}
span{
float: left;
border-width: 15px;
border-color: red;
color: yellow;
padding: 15px 5px 15px 5px;
Page 33
WEB TECHNOLOGY
}
/* Id base Selector */
.here{
width:100%;
height: 500px;
background-color: yellow;
float: left;
position: relative;
}
/* Class base Selector */
.gec{
float: left;
width: 40%;
height: 150px;
background-color: pink;
}
.amd{
float: left;
width: 70%;
height: 140px;
background-color: red;
position: none;
}
</style>
</head>
<body>
<div id="here">
<div class="gec">
<p>Cascading Style Sheet Practice</p>
<p>This is Div</p>
<div>
<div class="amd">
<span>This is Simple Web Page</span>
<p>This is also Div</p>
<div>
<div>
<div style="width: 100%; float:left; background-color: cyan;
height: 150px; position:relative;"> 
<a href="http://www.ldce.ac.in">Click Here</a>
<div>
</body>
</html>
Output:
Page 34
WEB TECHNOLOGY
Example 5: Margin & Padding in CSS(CSS3 Psuedo Class, Psuedo Elements, Borders and
Shadow).
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 border-radius & Pseudo-classes</title>
<style>
/* border radious*/
div {
padding: 15px;
background: #ffb6c1;
border: 2px solid #f08080;
}
div.one {
}
div.two {
border-radius: 10px 30px;
}
div.three {
border-radius: 10px 30px 20px;
}
div.four {
border-radius: 10px 20px 30px 40px;
}
/* Creating Gradiant*/
.gradient {
width: 900px;
height: 600px;
background: linear-gradient(to right, red, yellow);

}
/* Shadow Effect*/
.box{
width: 200px;
height: 150px;
background: #000;
Page 35
WEB TECHNOLOGY
box-shadow: 5px 5px 10px rgb(64, 0, 255), 10px 10px
20px yellow;
}
</style>
</head>
<body class="gradient">
<div class="one"><strong>one-value syntax:</strong> the single
value defines the radius of all corners.</div>
<div class="two"><strong>two-value syntax:</strong> the first
value defines the radius of top-left and bottom-right corner,
while the second value defines the radius of top-right and bottom-
left sides corner.</div>
<div class="three"><strong>three-value syntax:</strong> the
first value defines the radius of top-left corner, the second
value defines the radius of top-right and bottom-left corner, and
the third value defines the radius of bottom-right corner.</div>
<div class="four"><strong>four-value syntax:</strong> each
value defines the radius of the border individually in the order
top-left, top-right, bottom-right, and bottom-left corner.</div>
<p><strong>Warning:</strong> Internet Explorer 8 and earlier
versions don't support the <code>border-radius</code>
property.</p>
<br>
<p>Visit <a href="https://www.ldce.ac.in"
target="_blank">www.ldce.ac.in</a></p>
<div class="box"></div>
</body>
</html>
Output:
 TASK
Page 36
WEB TECHNOLOGY
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 lang="en">
<head>
<title>Few Bharat Ratna Awardees</title>
<style>
.awardee-1 {
color: #333;
padding: 10px;
border: 1px solid #ccc;
}
.awardee-2 {
background-color: #e6f7ff;
color: #004d99;
padding: 10px;
border: 1px solid #99c2e6;
}
.awardee-3 {
background-color: #fff2e6; /* Light orange */
color: #663300; /* Dark brown text */
padding: 10px;
border: 1px solid #cc6600;
}
.awardee-4 {
background-color: #e6ffe6; /* Light green */
color: #006600; /* Dark green text */
padding: 10px;
border: 1px solid #66cc66;
}
a {
color: inherit;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Few Bharat Ratna Awardees</h1>
<div class="awardee-1">
<h2>Dr. A.P.J. Abdul Kalam</h2>
Page 37
WEB TECHNOLOGY
<p>Dr. A.P.J. Abdul Kalam was the 11th President of India
and an aerospace scientist. He played a pivotal role in India's
missile and nuclear weapon programs.</p>
<p>Learn more on <a
href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam"
target="_blank">Wikipedia</a>.</p>
</div>
<h2>Mother Teresa</h2>
<p>Mother Teresa was a Catholic nun and missionary. She
dedicated her life to serving the poor and destitute in Kolkata,
India, and founded the Missionaries of Charity.</p>
<p>Learn more on <a
href="https://en.wikipedia.org/wiki/Mother_Teresa"
</div>
<h2>Dr. B.R. Ambedkar</h2>
<p>Dr. B.R. Ambedkar was a social reformer, jurist, and
principal architect of the Indian Constitution. He worked
tirelessly for the upliftment of the Dalits and other marginalized
groups.</p>
<p>Learn more on <a
href="https://en.wikipedia.org/wiki/B._R._Ambedkar"
</div>
<h2>Lata Mangeshkar</h2>
<p>Lata Mangeshkar was one of India's most renowned
playback singers, with a career spanning over seven decades. Her
voice is known to have graced many iconic Bollywood songs.</p>
<p>Learn more on <a
href="https://en.wikipedia.org/wiki/Lata_Mangeshkar"
</div>
</body>
</html>
Output:
Page 38
WEB TECHNOLOGY
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 lang="en">
<head>
<title>Ladakh</title>
<style>
.content {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #ccc;
margin: 20px;
padding: 10px;
}
body {
}
h1 {
text-align: center;
color: #333;
Page 39
WEB TECHNOLOGY
}
p {
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Ladakh</h1>
<div class="content">
<p>
Ladakh is a region in the northern part of India, lying
between the Kunlun mountain range in the north and the main Great
Himalayas to the south. It is known for its remote mountain
landscapes and unique culture. The region has a rich history, with
influences from Tibetan Buddhism and a diverse blend of cultures
due to its location on ancient trade routes.
</p>
<p>
Historically, Ladakh was an independent kingdom for
many centuries, with its capital at Leh. The kingdom was
established in the 10th century by Nyima-Gon, a Tibetan prince. It
was a major center for trade and Buddhism, with strong cultural
connections to Tibet.
</p>
<p>
Geographically, Ladakh is characterized by its high-
altitude deserts and towering mountains. The region experiences
harsh winters with heavy snowfall, while summers are relatively
mild. The unique terrain and climate have led to a distinct
ecosystem, with a variety of flora and fauna adapted to high-
altitude conditions.
</p>
<p>
Tourism in Ladakh has grown in recent years, with
visitors attracted to its natural beauty, adventure sports, and
cultural heritage. Key attractions include the monasteries in Leh
and Hemis, the Pangong Lake, and the Nubra Valley. Visitors also
come to experience the traditional festivals and the warm
hospitality of the Ladakhi people.
</p>
<p>
Due to its high elevation, Ladakh has limited
agricultural land, with barley and buckwheat being the primary
crops. The region relies heavily on tourism and handicrafts for its
economy. The local cuisine features dishes like momos and thukpa,
with a strong emphasis on tea, especially butter tea.
</p>
</div>
</body>
</html>
Output:-
Page 40
WEB TECHNOLOGY
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 lang="en">
<head>
<title>Optical Fiber Types</title>
<style>
body {
padding: 20px;
}
.content {
max-width: 800px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}
p {
padding: 10px;
border-radius: 3px;
Page 41
WEB TECHNOLOGY
}
a {
color: #0066cc;
font-weight: bold;
}
a:hover {
}
h1 {
text-align: center;
color: #333;
}
</style>
</head>
<body>
<h1>Optical Fiber Types</h1>
<p>
**Single-mode fiber (SMF)** is a type of optical fiber
that has a small core, allowing only a single mode of light to
propagate. This characteristic reduces modal dispersion, enabling
data to travel longer distances without signal degradation. Single-
mode fibers are used in long-distance telecommunications and high-
bandwidth applications.
</p>
<p>
**Multi-mode fiber (MMF)** has a larger core, allowing
multiple modes of light to propagate. This feature increases modal
dispersion, limiting the transmission distance compared to single-
mode fiber. However, multi-mode fiber is typically used in shorter
distance applications such as local area networks (LANs) and data
centers.
</p>
<p>
**Plastic optical fiber (POF)** is made from polymer-
based materials and is more flexible and durable than traditional
glass fibers. POF is commonly used in consumer applications like
home networks, automotive wiring, and short-range data transmission.
While POF has higher attenuation compared to glass fibers, it
offers easier handling and installation.
</p>
</div>
<p>
For more information on optical fiber technology and
the latest research, visit the [IEEE Journal of Optical
Fiber](https://ieeexplore.ieee.org/xpl/RecentIssue.jsp?punumber=661
3082).
</p>
</div>
</body>
</html>
Page 42
WEB TECHNOLOGY
Output:
Page 43
WEB TECHNOLOGY
EXPERIMENT 6
Aim: To create tables and perform 3D object transformation using internal , external CSS and
HTML.
Example 1: HTML Table with CSS.

Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table - thead, tbody & tfoot</title>
<style>
table{
background-color:yellow;
border-color: red;
font-size: 2vw;
color:white;
}
th,td{
background-color:blue;
text-align: center;
}
</style>
</head>
<body>
<table border="5" align="center" cellpadding="10" cellspacing="5">
<thead> 
<tr>
<th>Name</th>
<th>Profession</th>
<th>Experience</th>
<th>Age</th>
</tr>
</thead>
<tbody> 
<tr>
<th>Viral Maheta</th>
<td>Web Developer</td>
<td>4 years</td>
<td>25</td>
</tr>
<tr>
<th>Ramesh Amin</th>
<td>System Analyst</td>
<td>6 years</td>
<td>27</td>
</tr>
<tr>
<th>N/A</th>
<td colspan="2"> </td>
Page 44
WEB TECHNOLOGY
<td>-</td>
</tr>
<tr>
<th>Shriaknt Patel</th>
<td>PHP Programmer</td>
<td>9 years</td>
<td>30</td>
</tr>
</tbody>
<tfoot> 
<tr>
<td colspan="4">This is footer section of our table. One can
use it with any table.</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
Example 2 :
Code: CSS3 3D Rotation, Translate and Scaling.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 3D rotation Tranformation</title>
<style>
.container{
margin: 50px;
width: 125px;
height: 125px;
perspective: 100px;
border: 4px solid #ff0000;
background: #0000ff;
}
.transformed {
Page 45
WEB TECHNOLOGY
transform: rotate3d(0, 1, 1, 50deg); /* Standard syntax */
}
.container1{
margin: 50px;
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #0000ff;
background: #ffff00;
}
.transformed1 {
transform: translate3d(30px, 10px, 0)

}
.container2{
margin: 50px;
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #ff0000;
background: #ffff00;
}
.transformed2 {
transform: scale3d(1.5, 0.5, 0.5)
}
</style>
</head>
<body>
<h2>Before Rotation:</h2>
<img src="club.jpg" alt="Club Card">
</div>
<h2>After Rotation:</h2>
<img src="club.jpg" class="transformed" alt="Club Card">
</div>
<h2>Before Translate:</h2>
<div class="container1">
<img src="heart.jpg" alt="Heart Card">
</div>
<h2>After Translate:</h2>
<img src="heart.jpg" class="transformed1" alt="Heart Card">
</div>
<h2>Before Scaling:</h2>
<img src="spade.jpg" alt="Club Card">
</div>
<h2>After Scaling:</h2>
<img src="spade.jpg" class="transformed2" alt="Club Card">
</div>
</body>
</html>
Page 46
WEB TECHNOLOGY
Output:
Example 3:
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
Page 47
WEB TECHNOLOGY
<p>An external style sheet is used to define the style for many
HTML pages.</p>
<p>To use an external style sheet, add a link to it in the <head>
section of each HTML page:</p>
<p>The external style sheet can be written in any text editor.</p>
<p>The file must not contain any HTML code, and must be saved with
a .css extension.</p>
</body>
</html>
Output:
 TASK
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
Embedded
Viral Maheta 4 years 25
Engineer
Ramesh Amin System Analyst 6 years 27
Rahul Gandhi Still to be finalized! 50
PHP
Shriaknt Patel 9 years 30
Programmer
*Information is subjected to individual capabilities and public domain. !
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Professional Details</title>
<style>
body {
padding: 20px;
}
Page 48
WEB TECHNOLOGY
table {
width: 80%;
margin: 0 auto;
border-collapse: collapse;
border: 2px solid #333;
font-size: 16px;
}
th {
background-color: #333;
color: #ffffff;
padding: 10px;
text-align: left;
}
td {
padding: 10px;
border: 1px solid #333;
}
.note {
font-style: italic;
text-align: center;
color: #666;
margin-top: 20px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Professional Details</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Profession</th>
<th>Experience</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<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>Rahul Gandhi</td>
<td>Still to be finalized!</td>
<td> - </td>
Page 49
WEB TECHNOLOGY
<td>50</td>
</tr>
<tr>
<td>Shriaknt Patel</td>
<td>PHP Programmer</td>
<td>9 years</td>
<td>30</td>
</tr>
</tbody>
</table>
<div class="note">
<p>*Information is subjected to individual capabilities and
public domain.</p>
</div>
</body>
</html>
Output:
2. Create a web page named Rotation and scaling and translation using CSS and show rotation,
scaling and translation effect with arbitrary images.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotation and Scaling and Translation</title>
<style>
body {
padding: 20px;
}
.image-container {
display: flex;
justify-content: space-around;
Page 50
WEB TECHNOLOGY
align-items: center;
height: 100vh;
}
.rotate {
transform: rotate(45deg);
transition: transform 0.5s;
}
.scale {
transform: scale(1.5);
}
.translate {
transform: translateX(50px);
}
.rotate:hover {
transform: rotate(0deg);
}
.scale:hover {
transform: scale(1);
}
.translate:hover {
transform: translateX(0px);
}
</style>
</head>
<body>
<h1>Rotation and Scaling and Translation</h1>
<div class="image-container">
<div>
<h2>Rotation</h2>
<img src="https://via.placeholder.com/150"
alt="Placeholder" class="rotate">
</div>
<div>
<h2>Scaling</h2>
alt="Placeholder" class="scale">
</div>
<div>
<h2>Translation</h2>
alt="Placeholder" class="translate">
</div>
</div>
</body>
</html>
Page 51
WEB TECHNOLOGY
Output:
Page 52
WEB TECHNOLOGY
EXPERIMENT 7
Aim : To create forms using HTML and improve style using CSS.
Example 1:
Code:

<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements</title> 
</head>
<body>
<form action="" method="">
<h3>Information Form</h3>
<p>Please fill in this form:</p>
<hr>
<label for="first-name"><b>First Name</b></label>
<input type="text" placeholder="Ramkrishna" name="fname"
id="fname" required> <br><br>
<label for="last-name"><b>Last Name</b></label>
<input type="text" placeholder="Parikh" name="lname"
id="lname" required>
<hr> 
<label for="date"><b>Date of Birth</b></label>
<input type="date" name="dob" id="dob" required>
<hr color="red">
<label for="address"><b>Address</b></label>
<textarea name="address" placeholder="Your Address.."
name="address" id="address" required></textarea>
<hr>
<label for="email"><b>Email Id</b></label>
<input type="text" placeholder="user123@yaaho.co.in"
name="email" id="email" required>
<hr color="Blue" size="5">
<label for="gender"><b>Gender: </b></label>
Male: <input type="radio" name="gender" id="gender"
value="Male" checked="true"> <b> | </b>
Female: <input type="radio" name="gender" id="gender"
value="Female"> <b> | </b>
Other: <input type="radio" name="gender" id="gender"
value="Other">
<br>
<label for="hobby"><b>Hobbies: </b></label>
Reading: <input type="checkbox" name="hobby" id="hobby1"
value="Reading"> <b> | </b>
Writing: <input type="checkbox" name="hobby" id="hobby2"
value="Writing" > <b> | </b>
Travelling: <input type="checkbox" name="hobby"
id="hobby3" value="Travelling"> <b> | </b>
Page 53
WEB TECHNOLOGY
Photography: <input type="checkbox" name="hobby"
id="hobby4" value="Reading"> <b> | </b>
Swimming: <input type="checkbox" name="hobby" id="hobby5"
value="Writing" >
<hr color="green" size="5" width="50%" align="left">
<label for="select"><b>Political View: </b></label>
<select name="politic" id="politic">
<option value="">Select Any...</option>
<option value="BJP">BJP</option>
<option value="INC">INC</option>
<option value="AAP">AAP</option>
<option value="None">None</option>
</select>
<hr>
<label for="username"><b>Username</b></label>
<input type="text" placeholder="user@123" name="usrname"
id="usrname" required>
<br><br>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password"
name="psw" id="psw" required>
<hr>
<label for="photo"><b>Select Your Photo:</b></label>
<input type="file" name="photo" id="photo" required>
<hr>
<label for="range"><b>Range bar</b></label>
<input type="range" name="range" id="range"
value="30"> 
<hr>


<button type="submit" name="btn" id="btn">Register</button>
</form>
</body>
</html>
Output:
Page 54
WEB TECHNOLOGY
 TASK
1. Design a web page named “ Journalism Course registration form” which should include
First name, Last name, Gender, D.O.B, Mail ID, Mobile number, Address, Hobbies, Political
Inclination, Image Upload, Username, Password & Register Button
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Journalism Course Registration Form</title>
<style>
.form-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
label {
font-weight: bold;
margin-bottom: 5px;
display: block;
}
input,
select,
textarea {
width: 100%;
padding: 10px;
border-radius: 3px;
Page 55
WEB TECHNOLOGY
}
textarea {
resize: vertical;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
h1 {
text-align: center;
color: #333;
}
</style>
</head>
<body>
<h1>Journalism Course Registration Form</h1>
<div class="form-container">
<form action="#" method="post" enctype="multipart/form-
data"> 
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first-name"
placeholder="Enter your first name" required>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="last-name"
placeholder="Enter your last name" required>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select your gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<label for="email">Mail ID:</label>
<input type="email" id="email" name="email"
placeholder="Enter your email" required>
<label for="mobile">Mobile Number:</label>
<input type="tel" id="mobile" name="mobile"
placeholder="Enter your mobile number" required>
<label for="address">Address:</label>
Page 56
WEB TECHNOLOGY
<textarea id="address" name="address" rows="3"
placeholder="Enter your address" required></textarea>
<label for="hobbies">Hobbies:</label>
<input type="text" id="hobbies" name="hobbies"
placeholder="List your hobbies">
<label for="political-inclination">Political
Inclination:</label>
<select id="political-inclination" name="political-
inclination">
<option value="">Select your inclination</option>
<option value="left">Left</option>
<option value="right">Right</option>
<option value="center">Center</option>
<option value="no preference">No preference</option>
</select>
<label for="profile-image">Image Upload:</label>
<input type="file" id="profile-image" name="profile-
image" accept="image/*">
<label for="username">Username:</label>
<input type="text" id="username" name="username"
placeholder="Create a username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
placeholder="Create a password" required>
<button type="submit">Register</button>
</form>
</div>
</body>
</html>
Output:
Page 57
WEB TECHNOLOGY
Page 58
WEB TECHNOLOGY
EXPERIMENT 8
Aim : To understand semantics usage by HTML , CSS.
Example 1:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: red;
}
.all-browsers h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google,
released in 2008. Chrome is the world's most popular web browser
today!</p>
</article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by
Mozilla. Firefox has been the second most popular web browser
since January, 2018.</p>
</article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft,
released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
Page 59
WEB TECHNOLOGY
Output:
Example 2:
Code:

<!DOCTYPE html>
<html>
<head>
<title>HTML Sementics Elements</title>
</head>
<body>
<main>
<article>
<header>
<h1>Welcome to Electronics and Communication World</h1>
<nav>
<ul>
<li>Home |</li>
<li>About us |</li>
<li>Contact us</li>
</ul>
</nav>
</header>
<aside> Jay Bharat </aside>

</article>
</main>
<br/>
<section>
<h1>Prime Minister</h1> <p>Since Independance of India, our
current PM Shri Narendra Modi is 14<sup>th</sup> Prime
Minister.</p>
</section>
<progress value="50" max="100"></progress>
<br/><br/>
<nav>
<a href="https://www.gtu.ac.in">GTU</a> |
<a href="https://www.youtube.com">YOU TUBE</a> |
<a href="https://ldce.ac.in">LDCE</a> |
Page 60
WEB TECHNOLOGY
<a href="https://www.incometax.gov.in">IT PORTAL</a>
</nav>
This Web Page is about <abbr title="HyperText Markup
Language">HTML5 Sementic Elements</abbr>.
<br><br>
<p>Tickets for the event are <del>$5</del> <ins>$10</ins>.
<br><br>
</p> <footer> 2020-21 </footer>
</body>
</html>
Output:
Page 61
WEB TECHNOLOGY
 TASK
1. Create a web page named “Incredible INDIA ” with the help of HTML5 Semantics and
generate the following page pattern.
Atulya Bharat
Since the inception of mankind on this earth, many civilisations came and gone. But the forever
“ Sanatan “ culture and its wide trajectories developed in Indian subcontinent, thousands year prior
to B.C.E has been the cultivating and motivating factor for the whole world till now.
You can add further details about fascinating aspects of Bharat within few next lines your self.
NORTH | SOUTH | EAST | WEST
Welcome to Incredible India

 Glorious Past |
 Pleasant Today |
 Splendid Future |
"India is the cradle of the human race, the birthplace of human speech, the mother of
history, the grandmother of legend, and the great grandmother of tradition. Our most valuable and
most artistic materials in the history of man are treasured up in India only!"
MARK TWAIN
This Web Page displays Incredible India using HTML5 Semantics.
Page 62
WEB TECHNOLOGY
EXPERIMENT 9
Aim : To implement JavaScripting mouse event operations and array operations with HTML
and CSS.
Example 1: Mouse Events with JavaScript Functions Practical.

Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML with JS Mouse Events</title>
<script type=text/javascript>
function key_event()
{
alert("Hey! You started typing in Name Field");
}
function btn_click()
{
alert("Hey! You Clicked Button");
}
function radio_event()
{
alert("Hey! You Changed Radio Button");
}
function focus_event()
{
alert("Hey! You focused Textarea");
}
function checkbox_click()
{
alert("Hey! You clicked on one Hobby");
}
function Mouse_In()
{
var ms=document.getElementById('msmv');
ms.style.border = "4px dashed Red";
}
function Mouse_Out()
{
var ms=document.getElementById('msmv');
ms.style.border = "none";
}
</script>
</head>
<body>
<h3>Mouse Events with JavaScript Functions</h3>
<label for="first-name"><b>Full Name</b></label>
<input type="text" placeholder="haresh" name="fname"
id="fname" onkeydown="key_event()" required>
Page 63
WEB TECHNOLOGY

<hr>
<div style="background-color: pink; width:300px"
onmouseover="Mouse_In()" onmouseout="Mouse_Out()" id="msmv">
Move your mouse cursor into and out of this Area!
</div>
</form>
</body>
</html>
Page 64
WEB TECHNOLOGY
Output: Before Mouse Course into Red box:
After Mouse Course into Red box:
Example 2: JS Array Practical for clicking check/uncheck all checkboxes.

Code:
<!DOCTYPE html>
<html>
<head>
<title>JS Array Select All | Deselect All</title>
<script type=text/javascript>
function select_all(src)
{
var ms=document.getElementsByName('hobby');
//alert('Length = ' + ms.length); //will display
length of ms array
for(var i=0;i < ms.length; i++)
{
Page 65
WEB TECHNOLOGY
if (ms[i] != src)
ms[i].checked = src.checked;
}
}
</script>
</head>
<body>
<h3>JavaScript Select/deselect All Checkboxes</h3>
<table>
<tr>
<th><input type="checkbox" onclick="select_all(this);"
/></th> 
<th>Select all</th>
</tr>
<tr>
<td><input type="checkbox" name="hobby"
value="Reading"></td>
<td>Reading: </td>
</tr>
<tr>
value="Writing"></td>
<td>Writing: </td>
</tr>
<tr>
value="Travelling"></td>
<td>Travelling: </td>
</tr>
<tr>
value="Photography"></td>
<td>Photography: </td>
</tr>
<tr>
value="Swimming"></td>
<td>Swimming: </td>
</tr>
</table>
</form>
</body>
</html>
Page 66
WEB TECHNOLOGY
Output:
Example 3:
Code: Mouse Events with JavaScript Functions Practical.
<!DOCTYPE html>
<html>
<head>
<title>HTML with JS Mouse Events</title>
<script src="myjs.js"></script> 
</head>
<body>
<h3>Mouse Events with JavaScript Functions</h3>
<label for="select"><b>Select Any one: </b></label>
<select id="select" onchange="change_it()">
<option value="">Select Any One...</option>
<option value="Son">Son</option>
<option value="Daughter">Daughter</option>
</select>

<label for="gender"><b>Selected: </b></label>
<input type="text" name="name" id="name"
Placeholder="Autofilled" readonly>
<hr color="red">
<label for="gender"><b>Who Loves: </b></label>
Father Loves: <input type="radio" name="parent"
id="father" value="papa" onchange="radio_event()" > <b> | </b>
Mother Loves: <input type="radio" name="parent"
id="mother" value="mamma" onchange="radio_event()">
<label for="hobby"><b>Whom: </b></label>
Son: <input type="checkbox" id="Son" value="Son" > <b> |
</b>
Daughter: <input type="checkbox" id="Daughter"
value="Daughter">
</form>
</body>
Page 67
WEB TECHNOLOGY
</html>
JS Code File:
function change_it()
{
var sel=document.getElementById('select').value;
document.getElementById('name').value=sel;
}
function radio_event()
{
var radio1=document.getElementById('father');
var radio2=document.getElementById('mother');
if(radio1.checked==true) go_to_checkbox(radio1.value);
else go_to_checkbox(radio2.value);
}
function go_to_checkbox(x)
{
if(x=='papa'){
document.getElementById('Daughter').checked=true;
document.getElementById('Son').checked=false;
}
else {
document.getElementById('Son').checked=true;
document.getElementById('Daughter').checked=false;
}
}
Output:
Page 68
WEB TECHNOLOGY
 TASK
1. Design a web page named “EC-LDCE Spring Fever-2022 Registration Form“ using
javascript mouse events, check boxes. Form should display Name, gender, checkbox selection
criteria for various cultural events, register button. As output, take screenshot images of
various messages displayed after every mouse event/selection of check boxes.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>EC-LDCE Spring Fever-2022 Registration Form</title>
<style>
.form-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
}
label {
font-weight: bold;
display: block;
}
input,
select {
width: 100%;
padding: 10px;
border-radius: 3px;
}
button {
color: white;
Page 69
WEB TECHNOLOGY
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049; /* Darken on hover */
}
.message {
color: #333;
font-size: 14px;
margin-top: 15px;
}
</style>
<script>
function handleCheckboxChange(event) {
const messageDiv = document.getElementById("message");
const isChecked = event.target.checked;
const eventName = event.target.value;
if (isChecked) {
messageDiv.textContent = `You selected the
${eventName} event.`;
} else {
messageDiv.textContent = `You deselected the
${eventName} event.`;
}
}
function handleMouseOver() {
messageDiv.textContent = "Ready to register?";
}
function handleMouseOut() {
messageDiv.textContent = "Looking forward to seeing
you!";
}
function handleFormSubmit(event) {
event.preventDefault(); /* Prevent form from
submitting */
alert("Registration successful!");
}
</script>
</head>
<body>
<h1>EC-LDCE Spring Fever-2022 Registration Form</h1>
<form onsubmit="handleFormSubmit(event)"> 
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select your gender</option>
Page 70
WEB TECHNOLOGY
</select>
<label>Cultural Events:</label>
<div>
<input type="checkbox" id="music" name="event"
value="Music" onclick="handleCheckboxChange(event)">
<label for="music">Music</label>
</div>
<div>
<input type="checkbox" id="dance" name="event"
value="Dance" onclick="handleCheckboxChange(event)">
<label for="dance">Dance</label>
</div>
<div>
<input type="checkbox" id="drama" name="event"
value="Drama" onclick="handleCheckboxChange(event)">
<label for="drama">Drama</label>
</div>
<button onmouseover="handleMouseOver()"
onmouseout="handleMouseOut()">Register</button> 
</form>
<div class="message" id="message">

</div>
</div>
</body>
</html>
Output:
Page 71
WEB TECHNOLOGY
Page 72
WEB TECHNOLOGY
EXPERIMENT 10
Aim : To implement various JS programs along with HTML and CSS.
 TASK
1. Write an HTML and JavaScript program which accepts N as input and print first N odd
numbers.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>First N Odd Numbers</title>
<style>
.form-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
}
input,
button {
width: 100%;
padding: 10px;
border-radius: 3px;
}
button {
color: white;
cursor: pointer;
}
button:hover {
}
.result {
margin-top: 15px;
color: #333;
}
</style>
<script>
function printOddNumbers() {
Page 73
WEB TECHNOLOGY
const n = parseInt(document.getElementById("input-
number").value);
if (isNaN(n) || n < 1) {
alert("Please enter a valid positive integer.");
return;
}
let oddNumbers = [];
for (let i = 0; i < n; i++) {
oddNumbers.push(2 * i + 1);
}
const resultDiv = document.getElementById("result");
resultDiv.textContent = "First " + n + " odd numbers:
" + oddNumbers.join(", ");
}
</script>
</head>
<body>
<h1>First N Odd Numbers</h1>
<input type="number" id="input-number" placeholder="Enter
a number" min="1" required> 
<button onclick="printOddNumbers()">Get Odd
Numbers</button> 
<div id="result" class="result">

</div>
</div>
</body>
</html>
Output:
Page 74
WEB TECHNOLOGY
2. Write a JavaScript to find first 10 prime numbers. Write a JavaScript to check mobile
number (mobile no. should start with 9 or 8).
Code: (1)
<!DOCTYPE html>
<html lang="en">
<head>
<title>First 10 Prime Numbers</title>
<style>
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
}
button {
padding: 10px;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
}
</style>
<script>
function isPrime(num) {
if (num < 2) {
return false;
}
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) {
return false;
}
}
return true;
}
function findFirst10Primes() {
const primes = [];
let num = 2;
while (primes.length < 10) {
if (isPrime(num)) {
primes.push(num);
}
Page 75
WEB TECHNOLOGY
num++;
}
return primes;
}
function displayPrimes() {
const primeNumbers = findFirst10Primes();
resultDiv.textContent = "First 10 prime numbers: " +
primeNumbers.join(", ");
}
</script>
</head>
<body>
<h1>First 10 Prime Numbers</h1>
<button onclick="displayPrimes()">Find Prime
Numbers</button> 
<div id="result"></div> 
</div>
</body>
</html>
Output:
Code: (2)
<!DOCTYPE html>
<html lang="en">
<head
<title>Mobile Number Validation</title>
<style>
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
Page 76
WEB TECHNOLOGY
}
input,
button {
width: 100%;
padding: 10px;
border-radius: 5px;
}
button {
color: white;
cursor: pointer;
}
button:hover {
}
</style>
<script>
function isValidMobileNumber() {
const mobileNumber = document.getElementById("mobile-
input").value; // Get the input
const firstDigit = mobileNumber.charAt(0); // Get the
first character
if (firstDigit === '8' || firstDigit === '9') {

resultDiv.textContent = "Valid mobile number.";
} else {
resultDiv.textContent = "Invalid mobile number.";
}
}
</script>
</head>
<body>
<h1>Mobile Number Validation</h1>
<input type="text" id="mobile-input" placeholder="Enter
mobile number" maxlength="10">
<button onclick="isValidMobileNumber()">Validate</button>
<div id="result"></div> 
</div>
</body>
</html>
Page 77
WEB TECHNOLOGY
Output:
Page 78
WEB TECHNOLOGY
EXPERIMENT 11
Aim : To create a full fledged front end version of a form using HTML , CSS and JS.
Aim:
Example 1:
Code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Form validation</title>
<link rel="stylesheet" href="form-style.css">
<script>
// Defining a function to display error message
function printError(elemId, hintMsg) {
document.getElementById(elemId).innerHTML = hintMsg;
}
// Defining a function to validate form
function validateForm() {
// Retrieving the values of form elements
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = [];
var checkboxes = document.getElementsByName("hobbies[]");
for(var i=0; i < checkboxes.length; i++) {
if(checkboxes[i].checked) {
// Populate hobbies array with selected values
hobbies.push(checkboxes[i].value);
}
}
// Defining error variables with a default value
var nameErr = emailErr = mobileErr = countryErr = genderErr =
true;
// Validate name
if(name == "") {
printError("nameErr", "Please enter your name");
} else {
var regex = /^[a-zA-Z\s]+$/;
if(regex.test(name) === false) {
printError("nameErr", "Please enter a valid name");
} else {
printError("nameErr", "");
nameErr = false;
}
}
// Validate email address
Page 79
WEB TECHNOLOGY
if(email == "") {
printError("emailErr", "Please enter your email address");
} else {
// Regular expression for basic email validation
var regex = /^\S+@\S+\.\S+$/;
if(regex.test(email) === false) {
printError("emailErr", "Please enter a valid email
address");
} else{
printError("emailErr", "");
emailErr = false;
}
}
// Validate mobile number
if(mobile == "") {
printError("mobileErr", "Please enter your mobile number");
} else {
var regex = /^[1-9]\d{9}$/;
if(regex.test(mobile) === false) {
printError("mobileErr", "Please enter a valid 10 digit
mobile number");
} else{
printError("mobileErr", "");
mobileErr = false;
}
}
// Validate country
if(country == "Select") {
printError("countryErr", "Please select your country");
} else {
printError("countryErr", "");
countryErr = false;
}
// Validate gender
if(gender == "") {
printError("genderErr", "Please select your gender");
} else {
printError("genderErr", "");
genderErr = false;
}
// Prevent the form from being submitted if there are any errors
if((nameErr || emailErr || mobileErr || countryErr || genderErr)
== true) {
return false;
} else {
// Creating a string from input data for preview
var dataPreview = "You've entered the following details: \n"
+
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) {
Page 80
WEB TECHNOLOGY
dataPreview += "Hobbies: " + hobbies.join(", ");
}
// Display input data in a dialog box before submitting the
form
alert(dataPreview);
}
};
</script>
</head>
<body>
<form name="contactForm" onsubmit="return validateForm()" action=""
method="post">
<h2>Application Form</h2>
<div class="row">
<label>Full Name</label>
<input type="text" name="name">
<div class="error" id="nameErr"></div>
</div>
<div class="row">
<label>Email Address</label>
<input type="text" name="email">
<div class="error" id="emailErr"></div>
</div>
<div class="row">
<label>Mobile Number</label>
<input type="text" name="mobile" maxlength="10">
<div class="error" id="mobileErr"></div>
</div>
<div class="row">
<label>Country</label>
<select name="country">
<option>Select</option>
<option>Australia</option>
<option>India</option>
<option>United States</option>
<option>United Kingdom</option>
</select>
<div class="error" id="countryErr"></div>
</div>
<div class="row">
<label>Gender</label>
<div class="form-inline">
<label><input type="radio" name="gender" value="male">
Male</label>
<label><input type="radio" name="gender" value="female">
Female</label>
</div>
<div class="error" id="genderErr"></div>
</div>
<div class="row">
<label>Hobbies <i>(Optional)</i></label>
<div class="form-inline">
<label><input type="checkbox" name="hobbies[]"
value="sports"> Sports</label>
Page 81
WEB TECHNOLOGY
value="movies"> Movies</label>
value="music"> Music</label>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>
External CSS File:

body {
font-size: 16px;
background: #00ff00;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h2 {
text-align: center;
}
form {
width: 300px;
background: yellow;
padding: 15px 40px 40px;
margin: 50px auto 0;
}
label {
display: block;
margin-bottom: 5px
}
label i {
color: red;
font-size: 80%;
}
input, select {
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
}
.row {
padding-bottom: 10px;
}
.form-inline {
padding: 8px 10px 4px;
border-radius: 2px;
Page 82
WEB TECHNOLOGY
}
.form-inline label, .form-inline input {
display: inline-block;
width: auto;
padding-right: 15px;
}
.error {
color: red;
font-size: 100%;
}
input[type="submit"] {
font-size: 110%;
font-weight: 100;
background: #006dcc;
border-color: white;
box-shadow: 0 3px 0 #0165b6;
color: white;
margin-top: 10px;
cursor: pointer;
}
input[type="submit"]:hover {
background: red;
}
Output: Before Submitting
Page 83
WEB TECHNOLOGY
After Submitting
 TASK
1. Design a web named LDCE Annual Sports week Registration form, with entries such as
student full name, Gender, branch, semester, enrollment number, email ID, Mobile number,
event selection out of Table Tennis, Football, Volleyball and Kabaddi, and validate it using
JavaScript by taking screenshot image of the message displayed after clicking submit button.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>LDCE Annual Sports Week Registration Form</title>
<style>
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
}
.form-group {
}
label {
display: block;
font-weight: bold;
Page 84
WEB TECHNOLOGY
}
input,
select {
width: 100%;
padding: 10px;
border-radius: 5px;
}
.error {
color: red;
font-size: 0.9em;
display: none;
}
button {
padding: 10px 20px;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
}
</style>
<script>
function validateForm() {
const name = document.getElementById("full-
name").value;
const gender = document.getElementById("gender").value;
const branch = document.getElementById("branch").value;
const semester =
document.getElementById("semester").value;
const enrollment =
document.getElementById("enrollment").value;
const email = document.getElementById("email").value;
const mobile = document.getElementById("mobile").value;
const event = document.getElementById("event").value;
let isValid = true;
if (name.trim() === "") {
document.getElementById("error-
name").style.display = "block";
isValid = false;
} else {
name").style.display = "none";
}
if (gender === "select") {
gender").style.display = "block";
isValid = false;
} else {
gender").style.display = "none";
Page 85
WEB TECHNOLOGY
}
if (branch.trim() === "") {
branch").style.display = "block";
isValid = false;
} else {
branch").style.display = "none";
}
if (semester.trim() === "") {
semester").style.display = "block";
isValid = false;
} else {
semester").style.display = "none";
}
if (enrollment.trim() === "") {
enrollment").style.display = "block";
isValid = false;
} else {
enrollment").style.display = "none";
}
if (!/^[\w.%+-]+@[a-zA-Z0-9.-]+\.[a-zA-
Z]{2,}$/.test(email)) {
email").style.display = "block";
isValid = false;
} else {
email").style.display = "none";
}
if (!/^[89]\d{9}$/.test(mobile)) { // Mobile number
should start with 8 or 9 and be 10 digits
mobile").style.display = "block";
isValid = false;
} else {
mobile").style.display = "none";
}
if (event === "select") {
event").style.display = "block";
isValid = false;
} else {
event").style.display = "none";
}
if (isValid) {
document.getElementById("message").textContent =
"Form submitted successfully!";
Page 86
WEB TECHNOLOGY
} else {
document.getElementById("message").textContent =
"Please correct the errors and try again.";
}
return isValid;
}
</script>
</head>
<body>
<h1>LDCE Annual Sports Week Registration Form</h1>
<form onsubmit="return validateForm()">
<div class="form-group">
<label for="full-name">Student Full Name</label>
<input type="text" id="full-name"
placeholder="Enter your full name">
<div id="error-name" class="error">Full name is
required.</div>
</div>
<label for="gender">Gender</label>
<select id="gender">
<option value="select">Select gender</option>
</select>
<div id="error-gender" class="error">Please select
a gender.</div>
</div>
<label for="branch">Branch</label>
<input type="text" id="branch" placeholder="Enter
your branch">
<div id="error-branch" class="error">Branch is
required.</div>
</div>
<label for="semester">Semester</label>
<input type="text" id="semester"
placeholder="Enter your semester">
<div id="error-semester" class="error">Semester is
required.</div>
</div>
<label for="enrollment">Enrollment Number</label>
<input type="text" id="enrollment"
placeholder="Enter your enrollment number">
<div id="error-enrollment"
class="error">Enrollment number is required.</div>
</div>
<label for="email">Email ID</label>
Page 87
WEB TECHNOLOGY
<input type="text" id="email" placeholder="Enter
your email ID">
<div id="error-email" class="error">Invalid email
address.</div>
</div>
<label for="mobile">Mobile Number</label>
<input type="text" id="mobile" placeholder="Enter
your mobile number">
<div id="error-mobile" class="error">Mobile number
must start with 8 or 9 and be 10 digits long.</div>
</div>
<label for="event">Event Selection</label>
<select id="event">
<option value="select">Select event</option>
<option value="table-tennis">Table
Tennis</option>
<option value="football">Football</option>
<option value="volleyball">Volleyball</option>
option value="kabaddi">Kabaddi</option>
</select>
<div id="error-event" class="error">Please select
an event.</div>
</div>
<button type="submit">Register</button> 
</form>
<div id="message"></div> <!-- Display validation message -
->
</div>
</body>
</html>
Output:
Page 88
WEB TECHNOLOGY
Page 89
WEB TECHNOLOGY
EXPERIMENT 12
Aim : To implement PHP along with HTML , CSS and JS.
Example 1.1:
Code:
<html>
<body>
<h1>PHP Demo </h1>
<?php
echo "Running first program in PHP on xampp server";
?>
</body>
</html>
Output:
Example 1.2:
Code:
<html>
<body>
<h1>PHP Demo </h1>
<?php
$price= 12999;
echo $price;
$name="PHP Programming";
echo "<br>";
echo "I am learning $name";
echo "<br>";
$height=5.67;
var_dump($height); //type and a value
?>
</body>
</html>
Page 90
WEB TECHNOLOGY
Output:
Example1.3:
Code:
<html>
<head>
</head>
<body>
<h1>PHP Demo </h1>
<?php
$name= "PHP language";
var_dump($name);
echo "<br>";
$price=250;
echo "The price is ". $price."It is high";
echo "<br>";
$temp=38.678;
var_dump($temp);
echo "<br>";
$choice=true;
var_dump($choice);
echo "<br>";
$langs= array("PHP","Java","Python");
echo "<pre>";
print_r($langs);
echo "</pre>";
echo "<br>";
?>
</body>
</html>
Ou
tp
ut:
Page 91
WEB TECHNOLOGY
Example1.4:
Code:
<html>
<head>
</head>
<body>
<h1>PHP Demo </h1>
<?php
//Origirnal string is in $text
$text= "I am learning PHP language";
echo "<br>";
echo strlen($text);
echo "<br>";
echo str_word_count($text);
echo "<br>";
echo strrev($text);
echo "<br>";
echo strpos("Hello world!", "world");
echo "<br>";
echo str_replace("PHP","Javascript", $text);
?>
</body>
</html>
O
ut
p
ut:
Example1.5:
Code:
<!DOCTYPE HTML>
<html>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
Password: <input type="password" name="pswd"><br>
<input type="submit">
</form>
</body>
</html>
Page 92
WEB TECHNOLOGY
Output:
Example1.6:
Code:
<html>
<body>
Welcome <?php
echo $_POST["name"];
?>
<br>
Your email address is:
<?php
echo $_POST["email"];
?>
<br>
Your password is :
<?php
echo $_POST["pswd"];
?>
<br>
</body>
</html>
Output:
Example 2.1:
Code:
<?php
$a= "Hello";
$b= $a. "World"; //String Concatanation - Joining
echo $b;
$age=21;
echo "<br> Your age is ". $age;
?>
Page 93
WEB TECHNOLOGY
Output:
Example2.2:
Code:
<?php
$a= "Hello";
$a= $a. " this is "; //String Concatanation - Joining
$a=$a." my world";
echo $a;
?>
Output:
Example2.3:
Code:
<?php
$age= 21; //number
$name= "Rahul"; //string
$greet=" Good morning!";
$msg= $greet. "My name is ". $name. " and I am ". $age;
echo $msg;
?>
Output:
Example2.4:
Code:
<?php
$nums = array(10,20,40,56);
echo $nums[3];
//String array
$days = array("Mon","Tue","Wed","Thu","Fri","Sat","Sun");
Page 94
WEB TECHNOLOGY
echo "<br>". $days[5];
//How to print all the days using loop
//How to print using pre formatted text using print_r
?>
Output:
Example2.5:
Code:
<?php
//Associative Array demo
$cost = array(5,20,28) ; // Key Value pair
//What if index also to be given names, eg. grocery items
//Key value pairs
$cost = array(
"parleg"=>5,
"maggie"=>12,
"amul"=>28
);
printArray($cost);
echo $cost["parleg"]. "<br>";
echo $cost["maggie"]. "<br>";
echo $cost['amul']. "<br>";
//You can reassign value also just like a simple array
$cost['amul']= 30;
function printArray($x)
{
echo "<pre>";
print_r($x);
echo "</pre>";
}
printArray($cost);
?>
Output:
Page 95
WEB TECHNOLOGY
Example3.1:
Code:
<html>
<head>
</head>
<body>
<?php
// define variables and set to empty values
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["name"]);
$email = test_input($_POST["email"]);
$website = test_input($_POST["website"]);
$comment = test_input($_POST["comment"]);
$gender = test_input($_POST["gender"]);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>PHP Form Validation Example</h2>
<form method="post" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name">
<br><br>
E-mail: <input type="text" name="email">
<br><br>
Website: <input type="text" name="website">
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="other">Other
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
Page 96
WEB TECHNOLOGY
?>
</body>
</html>
Output:
Example5.1:
Code:
<?php
if(isset($_FILES['image'])){
//uploading in next
$file_name = $_FILES['image']['name'];
$file_size = $_FILES['image']['size'];
$file_tmp = $_FILES['image']['tmp_name'];
$file_type = $_FILES['image']['type'];
//to upload file
//move_uploaded_file (temp name, where to save)
if(move_uploaded_file($file_tmp,"upload-images/".$file_name))
{
echo "File successfully uploaded !" ;
}
else
{
echo "Could not upload file !" ;
}
echo "<br>File name is ", $file_name;
}
?>
<!DOCTYPE html>
<html>
<body>
<form action="" method="POST" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="image" > <br><br>
</form>
Page 97
WEB TECHNOLOGY
</body>
</html>
Output:
Example5.2:
Code:
<?php
//uploading in next
//to upload file
if(file_exists("upload-images/".$file_name)){
echo "File already exists - Failed to upload" ;
}
else if(move_uploaded_file($file_tmp,"upload-
images/".$file_name))
{
}
else
{
}
}
?>
<!DOCTYPE html>
<html>
<body>
</form>
</body>
</html>
Page 98
WEB TECHNOLOGY
Output:
Example5.3:
Code:
<?php
//uploading in next
$uploadFlag=true;
//to upload file
if ($file_size>50000)
{
echo "File size is more than 50KB" ;
$uploadFlag=false;
}
else if(file_exists("upload-images/".$file_name)){
echo "File already exists - Failed to upload" ;
}
else if(move_uploaded_file($file_tmp,"upload-
images/".$file_name))
{
}
else
{
}
}
?>
<!DOCTYPE html>
<html>
<body>
</form>
</body>
</html>
Page 99
WEB TECHNOLOGY
Output:
Example5.4:
Code:
<?php
//How to read a text file from server
$filename = "sample.txt" ;
$fp = fopen($filename, "r");//open file in read mode
$contents = fread($fp, filesize($filename));//read file
echo "<pre>$contents</pre>";//printing data of file
fclose($fp);//close file
?>
Output:
Example6.1:
Code:
<?php
//Very important function
//15/03/2021
//date(format)
// Day Month Year Weekday
//djs = d 0 to 31, j has no prefix 0,S =st rd
//FmMn = month F - Full form, m numeric, M jan, n - no prefix
//Yy = Year Y - full year 2019, y - 19
//DlnwWeek Day = D mon, l - Full name, N (week day num m to s 1 to
7), w - sun to sat 0 to 6
//date
echo "Today is ". date("d");
echo "<br>Today is ". date("j");
echo "<br>Today is ". date("jS");
echo "<br>";
//month
echo "<br>Today is ". date("F");
Page 100
WEB TECHNOLOGY
echo "<br>Today is ". date("M");
echo "<br>Today is ". date("m");
echo "<br>Today is ". date("n");
echo "<br>";
//year
echo "<br>Today is ". date("Y");
echo "<br>Today is ". date("y");
echo "<br>";
//day
echo "<br>Today is ". date("D");
echo "<br>Today is ". date("l");
echo "<br>Today is ". date("N");
?>
Output:
Example6.2:
Code:
<?php
//15/03/2021
//date(format)
// Day Month Year Weekday
//djs = d 0 to 31, j has no prefix 0,S =st rd
//FmMn = month F - Full form, m numeric, M jan, n - no prefix
//Yy = Year Y - full year 2019, y - 19
//DlnwWeek Day = D mon, l - Full name, N (week day num), w - sun
to sat 0 to 6
echo "Today is ". date("d/m/y");
echo "<br> Today is ". date("d-m-y");
echo "<br> Today is ". date("d.m.y");
//In USA
echo "<br> Today is ". date("y/m/d");
//In text format
echo "<br> Today is ". date("jS F Y");
//days in a year
echo "<br> Total days in year ". date("z");
//Week of year
echo "<br> Total week of year ". date("W");
//days of month
echo "<br> Days in current month ". date("t");
?>
Page 101
WEB TECHNOLOGY
Output:
Example6.3:
Code:
<?php
//15/03/2021
//date(format)
// Hour Minute Second Meridian
//hHgG - 12 hour, 24 hour, without zero prefix both
//i mins
//s seconds
// a am or pm, A AM or PM
//Below will not show correct time
echo "Time is ". date("h:i:sa");
echo "<br> Date and Time is ". date("d-m-Y h:i:sa");
//PHP never shows system time, it shows server time
//PHP. ini file has already timezone set, default is Europe
date_default_timezone_set("Asia/Kolkata"); //php timezone
echo "<br> Time is ". date("h:i:sa");
//You can also print which time zone set currently
echo "<br> Time is ". date("h:i:sa e");
?>
Output:
Example6.4:
Code:
<?php
// To show a past time , birth time, written time
//date() - gives current date and time
//mktime(hour,min,sec,mon,day,year)
//gmmktime(hour,min,sec,mon,day,year) - gmt follow , UTC
//date(format,timestamp) timestamp is past
echo "Current Date and Time is ". date("d-m-Y h:i:sa");
//which day was on particular day in past
echo "<br>". date("l",mktime(10,10,10,04,16,2021));
echo "<br>". date("d-m-Y h:i:sa",mktime(10,10,10,04,16,2021));
Page 102
WEB TECHNOLOGY
echo "<br>". date("d-m-Y h:i:sa",gmmktime(10,10,10,04,16,2021));
?>
Output:
Example6.5:
Code:
<?php
// Check date and date difference
//date_diff(dt1,dt2,absolute)
//checkdate(m,d,y)
echo checkdate(2,29,2020); // leap year feb has an extra day
//Create two dates
$old_dt = date_create("2013-02-14");
$new_dt = date_create("2014-03-15");
$diff = date_diff($old_dt,$new_dt,false) ; //returns date interval
object, use print_r
//prints whole array in a formatted way
echo "<pre>";
print_r($diff);
echo "</pre>";
//To only print particular variable of object
echo $diff->days;
echo"<br>";
//You can check invert variable value
//Or second way
echo $diff->format(" %R %a days"); // R for sign, a for diff, days
?>
Output:
Page 103
WEB TECHNOLOGY
 TASK
Using XAMPP server, perform the following,
1. Execute html file with the help of php script to check whether the given number is prime,
odd or even .
Code:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Number Checker</title>
</head>
<body>
<h1>Number Checker</h1>
<form action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
<label for="number">Enter a number:</label>
<input type="number" id="number" name="number" required>
<button type="submit">Check</button>
</form>
<?php
$number = $_POST["number"];
if ($number <= 1) {
echo "Please enter a number greater than 1.";
} elseif ($number == 2) {
echo "$number is a prime number and an even number.";
} elseif ($number % 2 == 0) {
echo "$number is an even number.";
} else {
Page 104
WEB TECHNOLOGY
$is_prime = true;
for ($i = 3; $i <= sqrt($number); $i += 2) {
if ($number % $i == 0) {
$is_prime = false;
break;
}
}
if ($is_prime) {
echo "$number is a prime number and an odd
number.";
} else {
echo "$number is an odd number but not a prime
number.";
}
}
}
?>
</body>
</html>
Output:
2. Execute php script to read the contents of a text document.

Code:
<?php
// Specify the file path
$file = 'sample.txt';
// Check if the file exists
if (file_exists($file)) {
// Read the file contents
$contents = file_get_contents($file);
// Output the contents
echo $contents;
} else {
// File not found error message
echo "File not found!";
}
?>
Output:
Page 105
WEB TECHNOLOGY
3. Execute php script to display the leap years of 19 th century.

Code:
<?php
// Define the start and end years of the 19th century
$startYear = 1801;
$endYear = 1900;
echo "Leap years in the 19th century:<br>";
// Loop through each year in the range
for ($year = $startYear; $year <= $endYear; $year++) {
// Check if the year is a leap year
if (($year % 4 == 0 && $year % 100 != 0) || ($year % 400 == 0))
{
echo $year . "<br>";
}
}
?>
Output:
4. Execute form validation exercise of exp-12 using php script.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
Page 106
WEB TECHNOLOGY
scale=1.0">
<title>Form Validation with PHP</title>
<style>
.error { color: red; }
</style>
</head>
<body>
<?php
$nameErr = $emailErr = $genderErr = "";
$name = $email = $gender = "";
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
// Check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
// Check if email address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<h2>PHP Form Validation Example</h2>
<p><span class="error">* required field</span></p>
<form method="post" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name" value="<?php echo
$name;?>">
<span class="error">* <?php echo $nameErr;?></span>
Page 107
WEB TECHNOLOGY
<br><br>
Email: <input type="text" name="email" value="<?php echo
$email;?>">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Gender:
<input type="radio" name="gender" <?php if (isset($gender) &&
$gender=="female") echo "checked";?> value="female">Female
<input type="radio" name="gender" <?php if (isset($gender) &&
$gender=="male") echo "checked";?> value="male">Male
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST" && empty($nameErr) &&
empty($emailErr) && empty($genderErr)) {
echo "<h2>Your Input:</h2>";
echo "Name: " . $name;
echo "<br>";
echo "Email: " . $email;
echo "<br>";
echo "Gender: " . $gender;
}
?>
</body>
</html>
Output:
5. Execute php script to upload a file and an image .

Code:
<!DOCTYPE html>
<html>
<head>
<title>File and Image Upload</title>
Page 108
WEB TECHNOLOGY
</head>
<body>
<h2>Upload File and Image</h2>
<?php
if(isset($_FILES['image']) && isset($_FILES['file'])){
// Image upload
$image_name = $_FILES['image']['name'];
$image_tmp = $_FILES['image']['tmp_name'];
// File upload
$file_name = $_FILES['file']['name'];
$file_tmp = $_FILES['file']['tmp_name'];
// Upload image to specified folder
$image_upload_path = "C:/xampp/htdocs/php_exercise/upload-
images/" . $image_name;
if(move_uploaded_file($image_tmp, $image_upload_path)) {
echo "Image successfully uploaded: $image_name<br>";
} else {
echo "Error uploading image: $image_name<br>";
}
// Upload file to specified folder
$file_upload_path = "C:/xampp/htdocs/php_exercise/upload-
images/" . $file_name;
if(move_uploaded_file($file_tmp, $file_upload_path)) {
echo "File successfully uploaded: $file_name<br>";
} else {
echo "Error uploading file: $file_name<br>";
}
}
?>
<form action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post"
enctype="multipart/form-data">
<input type="file" name="image" ><br><br>
Select file to upload:
<input type="file" name="file" ><br><br>
</form>
</body>
</html>
Output:
Page 109
WEB TECHNOLOGY
Page 110

WT Lab Manual

Uploaded by

Document Information

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

WT Lab Manual

Uploaded by

Copyright:

Available Formats

A Laboratory Manual for

B.E. Semester 6 (E.C.)

Electronics and Communication Engineering Department

This is to certify that Mr./Ms. Enrollment No.

Place: L.D. Collage of Engineering

Sign of Faculty Head of the Department

Sr.No. LIST OF EXPERIMENT DATE PAGE NO. Sign

To understand HTML Title,

To understand HTML Emphasized, smaller

To understand inline CSS implementation

To understand internal CSS application in

To create tables and perform 3D object

To create forms using HTML

To understand semantics usage by HTML ,

To implement JavaScripting mouse event

To implement various JS programs along

To create a full fledged front end

To implement PHP along with HTML ,

Aim: To understand HTML Title, Paragraph, Heading, Links, Button, Image

Example 1: Shows title of page and paragraph in body.

Example 2: Shows headings in bold from 1 to 6 n largest to smallest.

Example 3: Shows how to display links.

Example 5: Shows how to display button.

Example 6: Shows how to display lists either ordered or unordered.

3. Create a webpage named UNIVERSITIES that provides a list of five different

Example 1: Showing styles in HTML.

Example 2: Showing styles in HTML.

Example 3: Showing styles in HTML.

Example 4: Showing styles in HTML.

Code: HTML CODE

Example 1: Showing styles in HTML.

Example 2: Showing Text Formatting.

Example 3: Showing Quotation and Citation Elements in HTML.

Aim: To understand inline CSS implementation in HTML.

Example 1: It shows colors in grey levels of R G B.

Example 2: It shows shades of grey.

Example 3: It shows colors with RGBA.

Example 4: It shows colors with Hexadecimal values of RRGGBB.

Example 5: It shows colors with HUE, SATURATION and LIGHTNESS.

Aim: To understand internal CSS application in HTML.

Example 1: Internal CSS.

Example 2: Border Types in CSS.

Example 3: Paragraph Width.

Example 4: Basic Css Applications - Introduction to CSS Types.

background: linear-gradient(to right, red, yellow);

Example 1: HTML Table with CSS.

transform: translate3d(30px, 10px, 0)

Aim : To understand semantics usage by HTML , CSS.

<aside> Jay Bharat </aside>

NORTH | SOUTH | EAST | WEST

Welcome to Incredible India

This Web Page displays Incredible India using HTML5 Semantics.

Example 1: Mouse Events with JavaScript Functions Practical.

Output: Before Mouse Course into Red box:

After Mouse Course into Red box:

Example 2: JS Array Practical for clicking check/uncheck all checkboxes.

Aim : To implement various JS programs along with HTML and CSS.

if (firstDigit === '8' || firstDigit === '9') {

External CSS File:

Output: Before Submitting

Aim : To implement PHP along with HTML , CSS and JS.

2. Execute php script to read the contents of a text document.

3. Execute php script to display the leap years of 19 th century.

4. Execute form validation exercise of exp-12 using php script.