Aim:-Write, Test and Debug Small Applications With Basic HTML. #CODE

WDB(1030106405) COMPUTER ENGINEERING.
Practical-1
Aim:- Write, test and debug small applications with Basic HTML.
#CODE.
<!DOCTYPE html>
<html>
<head>
<title>MY INFORMATION</title>
</head>
<body>
<center>
<h1 style="color: crimson;"><b><i><u> My self introduction.</u></i></b></h1>
<img src="images/dk.jpg" width="300" height="400" >
<h2><i> MY NAME IS DHRUV SOJITRA.</i></h2>
<h2><i>I AM PASS STD:-<U>10</U> IN P.P. SAVANI SCHOOL.</i></h2>
<h2><i> I AM STUDY IN BHAGAWAN MAHAVIR POLYTECHNIC.</i></h2>
<h2><i>I AM STUDY IN SOFTWARE ENGINNER IN B.M.U.</i></h2>
</center>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 1
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 2
Practical-2
Aim:- Write HTML codes for displaying image and demonstrate
hyper linking.
#CODE FOR 1 PAGE.
<html>
<head>
<title>UNIVERSE</title>
<style>
body {
background-image: url('images/d.k.jpg');
}
</style>
</head>
<body>
<h1> UNIVERSE </h1>
<img src="images/180914-stock-universe-al-1025.jpg" width="400" height="400">
<h3 style="color: red;"><u>****Parallel universe video for science
language****</u></h3>
<a href="https://youtu.be/JeS4wGguldk">go to video link.</a>
<h3 style="color:teal;"><u>****Parallel universe video for Sage monk(ऋिष-

मुिन)language****</u></h3>
<a href="https://youtu.be/a3nHzetWwao">go to video link.</a>
<H3>Next Page on Clik down Link</H3>
<a href="Practical2_secondepage.html">GO TO NEXT PAGE.
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 3
#CODE FOR 2 PAGE.

<html>
<head>
<title>UNIVERSE</title>
</head>
<body>
<h1>UNIVERSE </h1>
<img src="images/dc-Cover-r87op5mr2mq1at6t7sedep6oa5-
20170104022309.Medi.jpeg" width="600" height="600">
<a href="Practical2_homepage.html">GO TO HOME PAGE
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 4
#OUTPUT.
DATE___________________
SIGNATURE__________________
DHRUV SOJITRA
(20270106160) Page 5
Practical-3
Aim:- Create webpage using list tags of HTML.
#CODE.
<html>
<head>
<title> Dhruv </title>
</head>
<body>
<ol>
<li>SEM:1</li>
<li>SEM:2</li>
<li>SEM:3</li>
<li>SEM:4</li>
<li>SEM:5</11>
<li>SEM:6</li>
<ul>
<li>WT</li>
<ol type-"A">
<li>exp:1</li>
<ol type="I">
<li>title:1</li>
<li>title:2</li>
</ol>
<li>exp:2</li>
</ol>
DHRUV SOJITRA
(20270106160) Page 6
<ul style="list-style-type: square;">

<li>title 1</ul>
</ul>
</ul>
<ul>
<li>SE</li>
<li>NET</li>
</ul>
<li>SEM:7</li>
<li>SEM:8</li>
</ol>
</body>
</html>
#OUTPUT.
DATE___________________
SIGNATURE__________________
DHRUV SOJITRA
(20270106160) Page 7
Practical-3_1
AIM:-Create simple form using html forms using attribute,
element end input type.
#CODE.
<html>
<head>
<title>Registration Form</title>
<style>
h2 {
font-family: Sans-serif;
font-size: 24px;
font-style: italic;
font-weight: bold;
color: blue;
text-align: center;
text-decoration: underline dashed darkmagenta
}
table {
font-family: verdana;
color: white;
font-size: 16px;
font-style: italic;
font-weight: bold;
background-color: darkorange;
DHRUV SOJITRA
(20270106160) Page 8
border: 4px solid #000000;

border-style: double;
table.inner {
border: 300px
}
input[type=text],
input[type=email],
input[type=number] {
width: 50%;
padding: 6px 12px;
margin: 5px 0;
box-sizing: border-box;
}
input[type=submit],
input[type=reset] {
width: 15%;
padding: 8px 12px;
margin: 5px 0;
}
</style>
DHRUV SOJITRA
(20270106160) Page 9
</head>
<body>
<h2>Student Registration Form Using Table in HTML</h3>
<table align="center" cellpadding="5">


<tr>
<td>First Name</td>
<td><input type="text" name="FirstName" maxlength="50" placeholder="your
Name" />
</td>
</tr>


<tr>
<td>Last Name</td>
<td><input type="text" name="LastName" maxlength="50" placeholder="your
Sarname" />
</td>
</tr>


<tr>
<td>Email ID</td>
<td><input type="email" name="EmailID" maxlength="100" placeholder="your
emailid@gmail.com" /></td>
DHRUV SOJITRA
(20270106160) Page 10
</tr>


<tr>
<td>Mobile Number</td>
<td>
<input type="text" name="MobileNumber" maxlength="10"
placeholder="9512XXXXXX" />
</td>
</tr>


<tr>
<td>Gender</td>
<td>
<input type="radio" name="Gender" value="Male" />
Male
<input type="radio" name="Gender" value="Female" />
Female
</td>
</tr>

<tr>
<td>Date of Birth(DOB)</td>
<td>
<select name="BirthDay" id="Birthday_Day">
<option value="-1">Day:</option>
DHRUV SOJITRA
(20270106160) Page 11
<option value="1">1</option>
DHRUV SOJITRA
(20270106160) Page 12
</select>
<select name="BirthdayMonth" id="Birthday_Month">

<option value="-1">Month:</option>
<option value="January">Jan(1)</option>
<option value="February">Feb(2)</option>
<option value="March">Mar(3)</option>
<option value="April">Apr(4)</option>
<option value="May">May(5)</option>
<option value="June">Jun(6)</option>
<option value="July">Jul(7)</option>
<option value="August">Aug(8)</option>
<option value="September">Sep(9)</option>
<option value="October">Oct(10)</option>
<option value="November">Nov(11)</option>
<option value="December">Dec(12)</option>
</select>
<select name="BirthdayYear" id="Birthday_Year">

DHRUV SOJITRA
(20270106160) Page 13
</td>
</tr>
DHRUV SOJITRA
(20270106160) Page 14


<tr>
<td>Address<br /><br /><br /></td>
<td><textarea name="Address" rows="10" cols="50"></textarea></td>
</tr>


<tr>
<td>City</td>
<td>
<input type="text" name="City" maxlength="50" placeholder="Surat" />
</td>
<td>Pin Code</td>
<td>
<input type="Number" name="PinCode" maxlength="6"
placeholder="395010" />
</td>
</tr>


<tr>
<td>Country</td>
<td>
<input type="text" name="Country" placeholder="India" />
</td>
<td>State</td>
DHRUV SOJITRA
(20270106160) Page 15
<td>
<input type="text" name="State" maxlength="50" placeholder="Gujrat" />
</td>
</tr>


<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 16
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 17
Practical-4
AIM:- Develop HTML pages with Frames.
#CODE.
<!DOCTYPE html>
<html lang="en">
<head>
<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>Document</title>
</head>
<frameset cols = "3*, 2*, 1*">
<frame name = "main" src = "Practical1.html" />
<frame name = "top" src = "Practical2_homepage.html" />
<frame name = "bottom" src = "Practical3.html" />
<noframes>
<body>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 18
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 19
Practical-5
AIM:- Write, test and debug small applications with CSS by
employing local styles& making use of ids and classes,
managing appearance, absolute and float positioning.
#CODE.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>use css</title>
<style>
#heading
{
font-size:1cm;
font-weight: 1000;
text-transform: capitalize;
text-align:center;
text-decoration:underline;
text-decoration-color: red;
}
.box_one
{
margin: 10px;
height:08cm;
DHRUV SOJITRA
(20270106160) Page 20
width:body;
border:4px solid greenyellow;
border-radius:1.2cm;
size:110;
}
.box_one img
{
height:200px;
width:200px;
float:right;
margin-top:1cm;
margin-right:1cm;
border-radius: 0.8cm;
border:3px solid black;
}
.box_one p
{
color:black;
font-weight:900;
font-size:.5cm;
margin-top:1cm;
text-align:left;
margin-left: 1cm;
margin-right: 1cm;
}
.box_two
{
margin: 10px;
DHRUV SOJITRA
(20270106160) Page 21
height:10cm;
width:body;
border:4px dashed red;
size:110;}
.box_two img
{
height:200px;
width:200px;
float:left;
margin-top:1cm;
margin-left:1cm;
}
.box_two p
{
color:black;
font-weight:900;
font-size:.5cm;
margin-top:1cm;
margin-left:9cm;
margin-right:1cm;
}
h2
{
text-align:center;
background-color:#fcba03;
DHRUV SOJITRA
(20270106160) Page 22
}
#box_three
{
margin: 10px;
height:12cm;
width:body;
border:4px double greenyellow;
}
#box_three img
{
margin-top: 0.5cm;
margin-left: 0.5cm;
height:200px;
width:200px;
}
#box_three p
{
color:black;
margin-left: 0.2cm;
margin-right: 0.2cm;
font-weight:900;
font-size:.5cm;
margin-top:1cm;
}
</style>
DHRUV SOJITRA
(20270106160) Page 23
</head>
<body>
<p id="heading">Galaxy information<p>
<div class="box_one">
<img src="images/solar system.jpg">
<p>The Solar System is made up of all the planets that orbit our Sun. In addition to
planets, the Solar System also consists of moons, comets, asteroids, minor planets,
dust and gas. The inner solar system contains the Sun, Mercury, Venus, Earth and
Mars. The main asteroid belt lies between the orbits of Mars and Jupiter. The planets
of the outer solar system are Jupiter, Saturn, Uranus and Neptune (Pluto is now
classified as a dwarf planet).Everything in the Solar System orbits or revolves around
the Sun. The Sun contains around 98% of all the material in the Solar System. The
larger an object is, the more gravity it has. Because the Sun is so large, its powerful
gravity attracts all the other objects in the Solar System towards it. At the same time,
these objects, which are moving very rapidly, try to fly away from the Sun, outward
into the emptiness of outer space.
The result of the planets trying to fly away, at the same time that the Sun is trying
to pull them inward is that they become trapped half-way in between. Balanced
between flying towards the Sun and escaping into space, they spend eternity orbiting
around their parent star.
</p>
</div>
<div class="box_two">
<img src="images/180914-stock-universe-al-1025.jpg">
<p>The idea of a multiverse is as fertile a subject for fantasy as it is for science
fiction, allowing for epic settings and godlike protagonists. One example of an epic
and far-ranging fantasy "multiverse" is that of Michael Moorcock, who actually
named the concept in a 1963 science fiction novel The Sundered Worlds. Like many
authors after him, Moorcock was inspired by the many worlds interpretation of
quantum mechanics, saying, "It was an idea in the air, as most of these are, and I
would have come across a reference to it in New Scientist (one of my best friends
DHRUV SOJITRA
(20270106160) Page 24
was then editor) ... [or] physicist friends would have been talking about it. ...
Sometimes what happens is that you are imagining these things in the context of
fiction while the physicists and mathematicians are imagining them in terms of
science. I suspect it is the romantic imagination working, as it often does, perfectly
efficiently in both the arts and the sciences."[6]
Unlike many science-fiction interpretations, Moorcock's Eternal Champion stories

go far beyond alternative history to include mythic and sword and sorcery settings as
well as worlds more similar to, or the same as, our own.
The term 'polycosmos' was coined as an alternative to 'multiverse' by the author

and editor Paul le Page Barnett (also known by the pseudonym John Grant), and is
built from Greek rather than Latin morphemes. It is used by Barnett to describe a
concept binding together a number of his works, its nature meaning that "all
characters, real or fictional [...] have to co-exist in all possible real, created or dreamt
worlds; [...] they're playing hugely different roles in their various manifestations, and
the relationships between them can vary quite dramatically, but the essence of them
remains the same."</p>
</div>
<div id="box_three">
<img src="images/time travel.jpg">
<img src="images/time travel.jpg">
<p>Main articles: Time travel and Alternate history
Technically, alternative histories as a result of time travel are not parallel
universes: while multiple parallel universes can co-exist simultaneously, only one
history or alternative history can exist at any one moment, as alternative history
usually involves, in essence, overriding the original timeline with a new one. As a
result, travel between alternative histories is not possible without reverting the
timeline back to the original.
There are exceptions to the above, and an alternate history doesn't necessarily
overwrite the old one. There are no rules written in stone regarding this. Modern
ideas of time travel pose the idea of branching timelines, such as the 2009 Star Trek
reboot and Avengers: Endgame. Technically, if a timeline isn't explicitly stated to
have been erased, it's still there.
DHRUV SOJITRA
(20270106160) Page 25
Parallel universes as a result of time travel can serve simply as the backdrop, or it
may be a central plot point. The Guns of the South by Harry Turtledove, where the
Confederate Army is given thousands of AK-47 rifles and ends up winning the
American Civil War, is a good example of the former, while Fritz Leiber's novel The
Big Time where a war between two alternative futures manipulating history to create
a timeline that results in or realizes their own world is a good example of the
latter.</p>
</div>
</body>
</html>
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 26
Practical-5_1
AIM:- Write, test and debug small applications with CSS by
Different Position Propertyies.
#CODE.
<html>
<head>
<title>Position</title>
<style>
/*-------------------------------------<H1>&<H2>-------------------------------------*/
h2{
text-align: center;
text-transform: uppercase;
color: black;
text-decoration: underline red;
}
h1{
text-align: center;
}
/*-------------------------------------CONTAINER-------------------------------------*/
#Container{
margin: 50px;
width: body;
height: 300px;
border: 5px solid black;
DHRUV SOJITRA
(20270106160) Page 27
/*-------------------------------------CONTAINER IN ABSOLUTE---------------------------------
----*/
div.Frist{
position: absolute;
top: 150px;
left: 130px;
width: 100px;
height: 170px;
background-color: red;
}
div.Second{
position: absolute;
top: 150px;
left: 240px;
width: 100px;
height: 170px;
background-color: blue;
}
div.Thired{
position: absolute;
top: 150px;
left: 350px;
width: 100px;
height: 170px;
DHRUV SOJITRA
(20270106160) Page 28

background-color: green;
}
/*-------------------------------------CONTAINER IN RELATIVE----------------------------------
---*/
div.Frist_1A{
position: relative;
top: 10px;
left: 70px;
width: 100px;
height: 170px;
}
div.Second_2A{
position: relative;
top: -166px;
left: 180px;
width: 100px;
height: 170px;
}
div.Thired_3A{
position: relative;
top: -342px;
right: -1980px;
DHRUV SOJITRA
(20270106160) Page 29
width: 100px;
height: 170px;
/*-------------------------------------CONTAINER IN RELATIVE----------------------------------
---*/
div.Second_2B{
position: relative;
top: -166px;
left: 1000px;
width: 100px;
height: 170px;
}
/*-------------------------------------CONTAINER IN FIXED-------------------------------------
*/
div.Frist_1{
position: fixed;
top: 870px;
left: 130px;
width: 100px;
height: 170px;
DHRUV SOJITRA
(20270106160) Page 30
}
div.Second_2{
position: fixed;
top: 870px;
left: 240px;
width: 100px;
height: 170px;
}
div.Thired_3{
position: fixed;
top: 870px;
right: 90px;
width: 100px;
height: 170px;
}
</style>
</head>
<body>
<h1>Position 1</h1>
<div id="Container">
<h2>Stlye of absolute</h2>
<div class="Frist"></div>
<div class="Second"></div>
DHRUV SOJITRA
(20270106160) Page 31
<div class="Thired"></div>
</div>
<h1>Position 2</h1>
<h2>Stlye of relative</h2>
<div class="Frist_1A"></div>
<div class="Second_2A"></div>
<div class="Thired_3A"></div>
</div>
<h1>Position 3</h1>
<h2>Stlye of relative</h2>
<div class="Frist_1A"></div>
<div class="Second_2B"></div>
<div class="Thired_3A"></div>
</div>
<h1>Position 4</h1>
<h2>Stlye of fixe</h2>
<div class="Frist_1"></div>
<div class="Second_2"></div>
<div class="Thired_3"></div>
</div>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 32
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 33
Practical-5_2
AIM:- Develop navigation bar using HTML list tag and
dishing with help of CSS.
#CODE.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drop-Down Manu.</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<style>
*{
padding: 0;
margin: 0;
}
body{
background-image: url(images/drop.jpeg);
background-size: cover;
font-family: sans-serif;
}
.menu-bar{
background-color: rgb(0,100,0);
text-align: center;
DHRUV SOJITRA
(20270106160) Page 34
}
.menu-bar ul{
display: inline-flex;
list-style: none;
color: white;
}
.menu-bar ul li{
width: 150px;
margin: 15px;
padding: 15px;
}
.menu-bar ul li a{
text-decoration: none;
color: white;
}
.active,.menu-bar ul li:hover{
background-color: #2bab2b;
border-radius: 3px;
}
.menu-bar .fa{
margin-right: 8px;
}
.sub-menu-1{
display: none;
}
.menu-bar ul li:hover .sub-menu-1{
display: block;
position: absolute;
DHRUV SOJITRA
(20270106160) Page 35
margin-top: 15px;
margin-left: -15px;
}
.menu-bar ul li:hover .sub-menu-1 ul{
display: block;
margin: 0px;
}
.menu-bar ul li:hover .sub-menu-1 ul li{
width: 150px;
padding: 10px;
border-bottom: 1px dotted white;
background: transparent;
border-radius: 0;
text-align: left;
}
.menu-bar ul li:hover .sub-menu-1 ul li:last-child{
border-bottom: none;
}
.menu-bar ul li:hover .sub-menu-1 ul li a:hover{
color: red;
}
.sub-menu-2{
display: none;
}
/*-----------------------------------SUB MENU 1---------------------------------------*/
.menu-bar ul li:hover .sub-menu-2{
display: block;
DHRUV SOJITRA
(20270106160) Page 36
position: absolute;
margin-top: 15px;
margin-left: -15px;
}
.menu-bar ul li:hover .sub-menu-2 ul{
display: block;
margin: 0px;
}
.menu-bar ul li:hover .sub-menu-2 ul li{
width: 150px;
padding: 10px;
border-bottom: 1px dotted white;
background: transparent;
border-radius: 0;
text-align: center;
}
.menu-bar ul li:hover .sub-menu-2 ul li:last-child{
border-bottom: none;
}
.menu-bar ul li:hover .sub-menu-2 ul li a:hover{
color: red;
}
.fa-angle-left{
float: left;
}
/*-----------------------------------SUB MENU 2---------------------------------------*/
.sub-menu-3{
DHRUV SOJITRA
(20270106160) Page 37
display: none;
}
.hover-me:hover .sub-menu-3{
position: absolute;
display: block;
margin-top: -40px;
margin-left: -200px;
}
/*-----------------------------------SUB MENU 3---------------------------------------*/
</style>
</head>
<body>
<div class="menu-bar">
<ul>
<li class="active"><a href="#"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#"><i class="fa fa-graduation-cap"></i>Collage</a></li>
<li><a href="#"><i class="fa fa-users"></i>Clinents</a></li>
<li><a href="#"><i class="fa fa-edit"></i>Information</a></li>
<li><a href="#"><i class="fa fa-inr"></i>Pricing</a></li>
<li><a href="#"><i class="fa fa-clone"></i>Services</a></li>
<li><a href="#"><i class="fa fa-user"></i>About us</a></i>
<div class="sub-menu-1">
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Vision</a></li>
<li><a href="#">Team</a></li>
DHRUV SOJITRA
(20270106160) Page 38
</ul>
</div>
</li>
<li><a href="#"><i class="fa fa-phone"></i>Contact</a>
<ul>
<li><a href="#">Trustee</a></li>
<li><a href="#">Principal</a></li>
<li class="hover-me"><i class="fa fa-angle-left"></i><a
href="#">Department</a>
<ul>
<li><a href="#">Computer</a></li>
<li><a href="#">IT</a></li>
<li><a href="#">electrical</a></li>
<li><a href="#">mechanical</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 39
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 40
Practical-6
AIM:- Styling Table with Help Of CSS.
#CODE.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>STUCUTRE</title>
<style>
tr {
background-color: gray;
font-size: 50px;
text-align: center;
}
.table1 {
margin-top: -50px;
border-color: sienna;
height: 400px;
width: 400px;
}
.table2{
DHRUV SOJITRA
(20270106160) Page 41
margin-left: 80px;
border-color:blue;
width: 10px;
}
H1 {
text-align: center;
color: darkviolet;
}
</style>
</head>
<body>
<h1>STUCTUCER</h1>
<table class="table2" align="center" border="8px">
<tr>
<td bgcolor="lightgreen">ROWMARGE</td>
</tr>
<tr>
<td bgcolor="pink">COLUMNMARGE</td>
</tr>
<tr>
<td bgcolor="gray">NORMAL</td>
</tr>
</table>
<table class="table1" align="center" border="8px">

<tr>
DHRUV SOJITRA
(20270106160) Page 42
<td rowspan="2" bgcolor="lightgreen">A</td>

<td>B</td>
<td rowspan="3" bgcolor="lightgreen">D</td>
<td colspan="2" bgcolor="pink">E</td>
<td>F</td>
</tr>
<tr>
<td>C</td>
<td rowspan="2" bgcolor="lightgreen">G</td>
<td rowspan="2" bgcolor="lightgreen">H</td>
<td rowspan="2" bgcolor="lightgreen">I</td>
</tr>
<tr>
<td colspan="2" bgcolor="pink">J</td>
</tr>
<tr>
<td colspan="3" bgcolor="pink">K</td>
<td>L</td>
<td colspan="2" bgcolor="pink">M</td>
</tr>
</table>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 43
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 44
Practical-7
AIM:- Develop various pages using CSS Selectors and
embedded Style sheets.
#CODE.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>DevFolio Bootstrap Portfolio Template - Index</title>

<meta content="" name="description">
<meta content="" name="keywords">


<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">


<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">


<link href="assets/css/style.css" rel="stylesheet">
DHRUV SOJITRA
(20270106160) Page 45

</head>
<body>


<header id="header" class="fixed-top">
<div class="container d-flex align-items-center justify-content-between">
<h1 class="logo"><a href="index.html">PortFolio</a></h1>



<nav id="navbar" class="navbar">

<ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li>
<li><a class="nav-link scrollto " href="#">Work</a></li>
<li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-
chevron-down"></i></a>
DHRUV SOJITRA
(20270106160) Page 46
<ul>
<li><a href="#">Drop Down 1</a></li>
<li class="dropdown"><a href="#"><span>Drop Down 2</span> <i class="bi
bi-chevron-right"></i></a></li>
</ul>
</li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
</div>
</header>


<div id="hero" class="hero route bg-image" style="background-image:
url(assets/img/dhruv.jpg)">
<div class="overlay-itro"></div>
<div class="hero-content display-table">
<div class="table-cell">
<div class="container">

<h1 class="hero-title mb-4">I am Dhruv Sojitra</h1>
<p class="hero-subtitle"><span class="typed" data-typed-
items="Designer,Android Developer,Photographer"></span></p>

</div>
</div>
DHRUV SOJITRA
(20270106160) Page 47
</div>
</div>
<main id="main">


<section id="about" class="about-mf sect-pt4 route">
<div class="row">
<div class="col-sm-12">
<div class="box-shadow-full">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-sm-6 col-md-5">
<div class="about-img">
<img src="assets/img/dhruv1.jpg" class="img-fluid rounded b-shadow-
a" alt="">
</div>
</div>
<div class="col-sm-6 col-md-7">
<div class="about-info">
<p><span class="title-s">Name: </span> <span>Dhruv
Sojitra</span></p>
<p><span class="title-s">Profile: </span> <span>Android and Web
developer</span></p>
<p><span class="title-s">Email: </span>
<span>002dhruv*******@gmail.com</span></p>
DHRUV SOJITRA
(20270106160) Page 48
<p><span class="title-s">Phone: </span> <span>(+91)

951******9</span></p>
</div>
</div>
</div>
<div class="skill-mf">
<p class="title-s">Skill</p>
<span>HTML</span> <span class="pull-right">95%</span>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 95%;" aria-
valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span>CSS3</span> <span class="pull-right">90%</span>
<div class="progress-bar" role="progressbar" style="width: 90%" aria-
</div>
<span>BOOTSTRAP</span> <span class="pull-right">80%</span>
</div>
<span>JAVASCRIPT</span> <span class="pull-right">85%</span>
</div>
</div>
</div>
DHRUV SOJITRA
(20270106160) Page 49
<div class="about-me pt-4 pt-md-0">
<div class="title-box-2">
<h5 class="title-left">
About me
</h5>
</div>
<p class="lead">
Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
Curabitur arcu erat, accumsan id
imperdiet et, porttitor
at sem. Praesent sapien massa, convallis a pellentesque nec, egestas non
nisi. Nulla
porttitor accumsan tincidunt.
</p>
<p class="lead">
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus
suscipit tortor eget felis
porttitor volutpat. Vestibulum
ac diam sit amet quam vehicula elementum sed sit amet dui. porttitor at
sem.
</p>
<p class="lead">
Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia
in, elementum id enim.
Nulla porttitor accumsan
tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
</p>
</div>
DHRUV SOJITRA
(20270106160) Page 50
</div>
</div>
</div>
</div>
</div>
</div>
</section>


<section id="services" class="services-mf pt-5 route">
<div class="row">
<div class="title-box text-center">
<h3 class="title-a">
Services
</h3>
<p class="subtitle-a">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</p>
<div class="line-mf"></div>
</div>
</div>
</div>
<div class="row">
<div class="service-box">
<div class="service-ico">
DHRUV SOJITRA
(20270106160) Page 51
<span class="ico-circle"><i class="bi bi-briefcase"></i></span>

</div>
<div class="service-content">
<h2 class="s-title">Web Design</h2>
<p class="s-description text-center">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni adipisci
eaque autem fugiat! Quia,
provident vitae! Magni
tempora perferendis eum non provident.
</p>
</div>
</div>
</div>
<span class="ico-circle"><i class="bi bi-card-checklist"></i></span>
</div>
<h2 class="s-title">Web Development</h2>
</p>
</div>
</div>
DHRUV SOJITRA
(20270106160) Page 52
</div>
<span class="ico-circle"><i class="bi bi-bar-chart"></i></span>
</div>
<h2 class="s-title">Photography</h2>
</p>
</div>
</div>
</div>
</div>
</div>
</section>


<section id="contact" class="paralax-mf footer-paralax bg-image sect-mt4 route"
style="background-image: url(assets/img/overlay-bg.jpg)">
<div class="overlay-mf"></div>
<div class="row">
DHRUV SOJITRA
(20270106160) Page 53
<div class="contact-mf">
<div id="contact" class="box-shadow-full">
<div class="row">
<div class="title-box-2">
Send Message Us
</h5>
</div>
<div>
<form action="forms/contact.php" method="post" role="form"
class="php-email-form">
<div class="row">
<div class="col-md-12 mb-3">
<div class="form-group">
<input type="text" name="name" class="form-control" id="name"
placeholder="Your Name" required>
</div>
</div>
<input type="email" class="form-control" name="email" id="email"
placeholder="Your Email" required>
</div>
</div>
<input type="text" class="form-control" name="subject"
id="subject" placeholder="Subject" required>
DHRUV SOJITRA
(20270106160) Page 54
</div>
</div>
<textarea class="form-control" name="message" rows="5"
placeholder="Message" required></textarea>
</div>
</div>
<div class="col-md-12 text-center my-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank
you!</div>
</div>
<div class="col-md-12 text-center">
<button type="submit" class="button button-a button-big button-
rouded">Send Message</button>
</div>
</div>
</form>
</div>
</div>
<div class="title-box-2 pt-4 pt-md-0">
Get in Touch
</h5>
</div>
<div class="more-info">
DHRUV SOJITRA
(20270106160) Page 55
<p class="lead">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorum
dolorem soluta quidem
expedita aperiam aliquid at.
Totam magni ipsum suscipit amet? Autem nemo esse laboriosam
ratione nobis
mollitia inventore?
</p>
<ul class="list-ico">
<li><span class="bi bi-geo-alt"></span> NANA VARCHHA SURAT.</li>
<li><span class="bi bi-phone"></span> (+91) 951******9</li>
<li><span class="bi bi-envelope"></span>
002dhruv*******@gmail.com</li>
</ul>
</div>
<div class="socials">
<ul>
<li><a href="002dhruvsojitra@gmail.com"><span class="ico-circle"><i
class="bi bi-facebook"></i></span></a></li>
<li><a href=""><span class="ico-circle"><i class="bi bi-
instagram"></i></span></a></li>
twitter"></i></span></a></li>
linkedin"></i></span></a></li>
</ul>
</div>
</div>
</div>
</div>
DHRUV SOJITRA
(20270106160) Page 56
</div>
</div>
</div>
</div>
</section>
</main>


<footer>
<div class="row">
<div class="copyright-box">
<div class="credits"></div>
</div>
</div>
</div>
</div>
</div>
</footer>
<div id="preloader"></div>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
class="bi bi-arrow-up-short"></i></a>


<script src="assets/vendor/purecounter/purecounter.js"></script>
DHRUV SOJITRA
(20270106160) Page 57
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/typed.js/typed.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>


<script src="assets/js/main.js"></script>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 58
#OUTPUT.
DHRUV SOJITRA
(20270106160) Page 59
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 60
Practical-8
AIM:- Create Bootstrap grid system for all device.
#CODE.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practical-8</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
></script>
</head>
<body>
<style>
.container{
margin-top: 10px;
border-color: red;
text-align: center;
}
</style>
<div class="container-fluid mt-3 container">

<div class="row">
<div class="col-sm-6 bg-primary text-white">6 Column</div>
DHRUV SOJITRA
(20270106160) Page 61
<div class="col-sm-6 bg-dark text-white">6 Column

</div>
</div>
<br>
<div class="row">
<div class="col-sm-4 bg-success text-white">4 Column</div>
<div class="col-sm-4 bg-warning text-white">4 Column</div>
<div class="col-sm-4 bg-success text-white">4 Column</div>
</div>
<br>


<div class="row">
<div class="col-sm bg-secondary text-white">3 Column</div>
<div class="col-sm bg-danger text-white">3 Column</div>
<div class="col-sm bg-secondary text-white">3 Column</div>
<div class="col-sm bg-danger text-white">3 Column</div>
</div>
<br>
<div class="row">
<div class="col bg-primary text-white">2 Column</div>
<div class="col bg-dark text-white">2 Column</div>
DHRUV SOJITRA
(20270106160) Page 62
</div>
</div>
</body>
</html>
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 63
Practical-9
AIM:- Creating Typography and make responsive image with
bootstrap .
#CODE.
<!DOCTYPE html>
<html lang="en">
<head> <title>Practical-9</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css "
rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></scrip
t>
</head>
<style>
.imag{
border-radius: 200px;
margin-top: 30px;
margin-left: 580px;
}
.dh{
margin: 50px;
width: body;
height: 650px;
padding: 20px;
DHRUV SOJITRA
(20270106160) Page 64
}
.dh1{
margin: 10px;
width: body;
height: 250px;
border: 3px solid red;
}
</style>
<body>
<div class="dh">
<div class="dh1"><img class="imag" src="images/dk.jpg" width="200"
height="200"></div>
<h4>This is head tag</h4>
<p>This is <b>Bold </b>tag</p>
<p>This is <mark>Mark </mark>tag</p>
<p>This is <abbr >Abbr </abbr>tag</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
<p class="bg-secondary text-white">This text is important.</p>
</div>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 65
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 66
Practical-10
AIM:- Creating Simple List and Tables with Bootstrap.
#CODE.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></scrip
t>
</head>
<style>h2{text-align: center;}</style>
<body>
<h2 style=color:red >Electronics Devices</h2>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>SLNo</th>
<th>ProductName</th>
<th>Price</th>
DHRUV SOJITRA
(20270106160) Page 67
<th>Color</th>
<th>Review</th>
<th>Categories</th>
<th>Brand</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Laptop</td>
<td>70000</td>
<td>Blue</td>
<td>Very Good</td>
<td>Electronics</td>
<td>DELL</td>
</tr>
<tr>
<td>2</td>
<td>Tv</td>
<td>100000</td>
<td>Silver</td>
<td>Average</td>
<td>LG</td>
</tr>
<tr>
DHRUV SOJITRA
(20270106160) Page 68
<td>3</td>
<td>whashing Machin</td>
<td>100000</td>
<td>Silver</td>
<td>Average</td>
<td>Sony</td>
</tr>
<tr>
<td>4</td>
<td>Mobile</td>
<td>10000</td>
<td>Red</td>
<td>VeryGood</td>
<td>Samsung</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 69
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 70
Practical-11
AIM:- Creating Form input with Bootstrap.
#CODE.
<!doctype html>
<html>
<head> <title>Practical-11</title>
<link
href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css'
rel='stylesheet'>
<link href='' rel='stylesheet'>
<style>body {
background-image: linear-gradient(to right, #7B1FA2, #E91E63)
}
.section {
position: relative;
height: 100vh;
}
.section .section-center {
position: absolute;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
DHRUV SOJITRA
(20270106160) Page 71
#booking {
font-family: 'Raleway', sans-serif;
}
.booking-form {
position: relative;
max-width: 642px;
width: 100%;
margin: auto;
padding: 40px;
overflow: hidden;
background-image: url('https://i.imgur.com/8z1tx3u.jpg');
background-size: cover;
border-radius: 5px;
z-index: 20;
}
.booking-form::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -1;
}
DHRUV SOJITRA
(20270106160) Page 72
.booking-form .form-header {
text-align: center;
position: relative;
margin-bottom: 30px;
}
.booking-form .form-header h1 {
font-weight: 700;
text-transform: capitalize;
font-size: 42px;
margin: 0px;
color: #fff;
}
.booking-form .form-group {
position: relative;
margin-bottom: 30px;
}
.booking-form .form-control {
background-color: rgba(255, 255, 255, 0.2);
height: 60px;
padding: 0px 25px;
border: none;
color: #fff;
-webkit-box-shadow: 0px 0px 0px 2px transparent;
box-shadow: 0px 0px 0px 2px transparent;
DHRUV SOJITRA
(20270106160) Page 73
-webkit-transition: 0.2s;
transition: 0.2s;
}
.booking-form .form-control::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
.booking-form .form-control:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
.booking-form .form-control::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.booking-form .form-control:focus {
-webkit-box-shadow: 0px 0px 0px 2px #ff8846;
box-shadow: 0px 0px 0px 2px #ff8846;
}
.booking-form input[type="date"].form-control {
padding-top: 16px;
}
.booking-form input[type="date"].form-control:invalid {
color: rgba(255, 255, 255, 0.5);
}
DHRUV SOJITRA
(20270106160) Page 74
.booking-form input[type="date"].form-control+.form-label {
opacity: 1;
top: 10px;
}
.booking-form select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.booking-form select.form-control:invalid {
color: rgba(255, 255, 255, 0.5);
}
.booking-form select.form-control+.select-arrow {
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 32px;
line-height: 32px;
height: 32px;
text-align: center;
pointer-events: none;
color: rgba(255, 255, 255, 0.5);
DHRUV SOJITRA
(20270106160) Page 75
font-size: 14px;
}
.booking-form select.form-control+.select-arrow:after {
content: '\279C';
display: block;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.booking-form select.form-control option {

color: #000;
}
.booking-form .form-label {
position: absolute;
top: -10px;
left: 25px;
opacity: 0;
color: #ff8846;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.3px;
height: 15px;
line-height: 15px;
-webkit-transition: 0.2s all;
transition: 0.2s all;
DHRUV SOJITRA
(20270106160) Page 76
.booking-form .form-group.input-not-empty .form-control {

padding-top: 16px;
}
.booking-form .form-group.input-not-empty .form-label {

opacity: 1;
top: 10px;
}
.booking-form .submit-btn {
color: #fff;
background-color: #e35e0a;
font-weight: 700;
height: 60px;
padding: 10px 30px;
width: 100%;
border: none;
font-size: 16px;
letter-spacing: 1.3px;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.booking-form .submit-btn:hover,
DHRUV SOJITRA
(20270106160) Page 77
.booking-form .submit-btn:focus {
opacity: 0.9;
}</style>
<script type='text/javascript'
src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></scri
pt>
src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js'></script
>
</head>
<body oncontextmenu='return false' class='snippet-body'>
<div id="booking" class="section">
<div class="section-center">
<div class="row">
<div class="booking-form">
<div class="form-header">
<h1>Make your reservation</h1>
</div>
<form>
<input class="form-control" type="text" placeholder="Country, ZIP,
city...">
<span class="form-label">Destination</span>
</div>
<div class="row">
DHRUV SOJITRA
(20270106160) Page 78
<input class="form-control" type="date" required>

<span class="form-label">Check In</span>
</div>
</div>
<input class="form-control" type="date" required>
<span class="form-label">Check out</span>
</div>
</div>
</div>
<div class="row">
<select class="form-control" required>
<option value="" selected hidden>no of rooms</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<span class="select-arrow"></span>
<span class="form-label">Rooms</span>
</div>
</div>
<option value="" selected hidden>no of adults</option>
DHRUV SOJITRA
(20270106160) Page 79
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<span class="form-label">Adults</span>
</div>
</div>
<option value="" selected hidden>no of children</option>
<option>0</option>
<option>1</option>
<option>2</option>
</select>
<span class="form-label">Children</span>
</div>
</div>
</div>
<div class="row">
<input class="form-control" type="email" placeholder="Enter
your Email">
<span class="form-label">Email</span>
</div>
DHRUV SOJITRA
(20270106160) Page 80
</div>
<input class="form-control" type="tel" placeholder="Enter you
Phone">
<span class="form-label">Phone</span>
</div>
</div>
</div>
<div class="form-btn">
<button class="submit-btn">Book Now</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type='text/javascript'></script>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 81
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 82
Practical-12
AIM:- Creating a Button group with Bootstrap.
#CODE.
<!DOCTYPE html>
<html>
<head>


<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-
r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<style>
.dh{
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div style="text-align: center;
DHRUV SOJITRA
(20270106160) Page 83
width: 600px; margin-top:100px; margin-left: 500px;">

<h1 style="color: green;">
GRUOP OF BUTTON
</h1>
</div>
<div style="width: 600px;height: 200px; margin-top:40PX; margin-left: 500px; text-
align: center;">
<div class="btn-group">
<div class="dh"><button type="button" class="btn btn-
primary">Primary</button></div>
secondary">Secondary</button></div>
success">Success</button></div>
danger">Danger</button></div>
</div>
<div class="btn-group" style="margin-top: 30px;">
warning">Warning</button></div>
info">Info</button></div>
light">Light</button></div>
dark">Dark</button></div>
</div>
</div>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 84
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 85
Practical-13
AIM:- Write test and debug a JavaScript program illustrating
the use of variablesand its data types.
#CODE.
<!DOCTYPE html>
<html lang="en">
<head><title>Practical-13</title></head>
<body>
<p><u>x = 160, y = 100</u></p>
<p id="d1">x+y=</p>
<p id="d2">y-x=</p>
<p id="d3">x*y=</p>
<script>
var x = 160, y = 100;
var z = x + y; document.getElementById("d1").innerHTML += z;
z = y - x; document.getElementById("d2").innerHTML += z;
z = x * y; document.getElementById("d3").innerHTML += z;
</script>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 86
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 87
Practical-14
AIM:- Write test and debug a JavaScript Operators.
#CODE.
<!DOCTYPE html>
<html lang="en">
<head><title>Practical14</title></head>
<body>
<h1>Arithmatic Operator</h1>
<p><u>x = 160, y = 100</u></p>
<p id="d1">x+y=</p>
<p id="d2">y-x=</p>
<p id="d3">x*y=</p>
<p id="d4">y/x=</p>
<h2> ++(increment by 1) AND --(Decrement by 1s) Operators</h2>

<p><u>x = 160</u></p>
<p id="d6">x++=</p>
<p id="d7">x=</p>
<p id="d8">++x=</p>
<p id="d9">x--=</p>
<p id="d10">x=</p>
<p id="d11">--x=</p>
<h1>Compar Operators</h1>
<p>var a = 160, b = 20, c = "10", x = b;</p>
DHRUV SOJITRA
(20270106160) Page 88
<p id="d12">a == c returns </p>

<p id="d13">a == b returns </p>
<p id="d14">a == x returns </p>
<p id="d17">a < b returns </p>
<p id="d16">a < c returns </p>
<p id="d18">a > b returns </p>
<p id="d19">a > c returns </p>
<script>
var x = 160, y = 100;
var z = x + y; document.getElementById("d1").innerHTML += z;
z = y - x; document.getElementById("d2").innerHTML += z;
z = x * y; document.getElementById("d3").innerHTML += z;
z = y / x; document.getElementById("d4").innerHTML += z;
document.getElementById("d6").innerHTML += x++;
document.getElementById("d7").innerHTML += x;
document.getElementById("d8").innerHTML += ++x;
document.getElementById("d9").innerHTML += x--;
document.getElementById("d10").innerHTML += x;
document.getElementById("d11").innerHTML += --x;
var a = 5, b = 10, c = "5", x = a;
document.getElementById("d12").innerHTML += a == c;
document.getElementById("d13").innerHTML += a === c;
document.getElementById("d14").innerHTML += a == x;
DHRUV SOJITRA
(20270106160) Page 89
document.getElementById("d15").innerHTML += a != b;
document.getElementById("d16").innerHTML += a > b;
document.getElementById("d17").innerHTML += a < b;
document.getElementById("d18").innerHTML += a >= b;
document.getElementById("d19").innerHTML += a <= b;
</script>
</body>
</html>
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 90
Practical-15
AIM:- Write test and debug a JavaScript control structure.
#CODE.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>A time series greeting:</h1>
<p id="demo"></p>
<script>
const hour = new Date().getHours();
let greeting;
if (hour < 12)
{
greeting = "Good Morning";
}
else if (hour < 15)
{
greeting = "Good Afternoon";
}
else{ greeting ="Good Evening"}
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 91
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 92
Practical-15_1
#CODE.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practical15_1</title>
</head>
<body>
<h2>Switch Opraction in <u>JavaScript </u></h2>
<p id="demo"></p>
<script>
let day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
DHRUV SOJITRA
(20270106160) Page 93
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>
</body>
</html>
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 94
Practical-15_2
#CODE.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practical15_2</title>
</head>
<body>
<h2>Loop in <u>JavaScript </u></h2>
<p id="demo"></p>
<script>
const cars = ["DHRUV", "RAJNI", "NEMIL", "RUTVIK", "DARSHIL",
"MANAN","AAYUSH","MEET"];
let dhruv = "";

for (let i = 0; i < cars.length; i++) {
dhruv += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = dhruv;
</script>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 95
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 96
Practical-16
#CODE.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practical16</title>
</head>
<body>
<h2>My First Page</h2>
<p id="demo"></p>
<p id="demo1"></p>
<button onclick="myFunction()">Click Me</button>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
function myFunction() {
document.getElementById("demo1").innerHTML = "My Name is Dhruv";
}
</script>
</body>
</html>
DHRUV SOJITRA
(20270106160) Page 97
#OUTPUT.
DATE___________________
SIGNATURE_________________
DHRUV SOJITRA
(20270106160) Page 98

Aim:-Write, Test and Debug Small Applications With Basic HTML. #CODE

Uploaded by

Document Information

Original Title

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

Aim:-Write, Test and Debug Small Applications With Basic HTML. #CODE

Uploaded by

Copyright:

Available Formats

WDB(1030106405) COMPUTER ENGINEERING.

<h3 style="color:teal;"><u>****Parallel universe video for Sage monk(ऋिष-

#CODE FOR 2 PAGE.

<ul style="list-style-type: square;">

border: 4px solid #000000;

<table align="center" cellpadding="5">

<select name="BirthdayMonth" id="Birthday_Month">

<select name="BirthdayYear" id="Birthday_Year">

Unlike many science-fiction interpretations, Moorcock's Eternal Champion stories

The term 'polycosmos' was coined as an alternative to 'multiverse' by the author

border: 3px solid black;

<table class="table1" align="center" border="8px">

<td rowspan="2" bgcolor="lightgreen">A</td>

<title>DevFolio Bootstrap Portfolio Template - Index</title>

<h1 class="logo"><a href="index.html">PortFolio</a></h1>

<nav id="navbar" class="navbar">

<p><span class="title-s">Phone: </span> <span>(+91)

<span class="ico-circle"><i class="bi bi-briefcase"></i></span>

</main>

<div class="col-sm-6 bg-dark text-white">6 Column

.booking-form select.form-control option {

.booking-form .form-group.input-not-empty .form-control {

.booking-form .form-group.input-not-empty .form-label {

<input class="form-control" type="date" required>

width: 600px; margin-top:100px; margin-left: 500px;">

<h2> ++(increment by 1) AND --(Decrement by 1s) Operators</h2>

<p id="d12">a == c returns </p>

var a = 5, b = 10, c = "5", x = a;

let dhruv = "";

You might also like