HTML Practicals
Uploaded by
aayushrawat970HTML Practicals
Uploaded by
aayushrawat970NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 1: Create a static webpage using table tags of html.
Source Code:
<html>
<head>
<title>
</title>
</head>
<body>
<b>Name: Anjali Joshi<br>
Class rollno: 66</b><br><br>
<table border=2px cellpadding=10px align=center>
<caption><b>Specification Table with Hours and Marks</caption>
<tr>
<throwspan=2>Unit No.</th>
<throwspan=2>Unit Title</th>
<throwspan=2>Teaching Hours</th>
<thcolspan=4>Distribution of Theory Marks</th>
</tr>
<tr>
<td>R Level</td>
<td>U Level</td>
<td>A Level</td>
<td>Total Marks</td>
</tr>
<tr align=center>
<td>I</td>
<td>Introduction to Internet Technology</td>
<td>2</td>
<td>4</td>
<td>4</td>
<td>0</td>
<td>8</td>
</tr>
<tr align=center>
<td>II</td>
<td>Basics of HTML & CSS</td>
<td>6</td>
<td>0</td>
<td>2</td>
<td>6</td>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
<td>8</td>
</tr>
<tr align=center>
<td>III</td>
<td>Active Server Pages 3.0</td>
<td>6</td>
<td>4</td>
<td>8</td>
<td>0</td>
<td>12</td>
</tr>
<tr align=center>
<td>IV</td>
<td>Server Side Coding with VBScript and XML</td>
<td>8</td>
<td>2</td>
<td>4</td>
<td>8</td>
<td>14</td>
</tr>
<tr align=center>
<td>V</td>
<td>ASP Objects & Components</td>
<td>10</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>14</td>
</tr><tr align=center>
<td>VI</td>
<td>Accessing database with ASP & ADO</td>
<td>10</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>14</td>
</tr>
<tr align=center>
<td></td>
<td><b>Total</td>
<td><b>42</td>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
<td><b>18</td>
<td><b>26</td>
<td><b>26</td>
<td><b>70</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Practical list 2: Demonstrate the use of different style sheet.
(a)Inline
Source Code:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aditya</title>
</head>
<body>
<div style="font-style:sans-serif; color: red; border: 4px dotted black;">Aditya
Bhya
</div>
</body>
</html>
Output:
(b)internal
Source Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aditya</title>
<style type="text/css">
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
div{
font-style:sans-serif;
color: red;
border: 4px solid black;
background-color: lightyellow;
}
</style>
</head>
<body>
<div>Aditya
Bhya
</div>
</body>
</html>
Output:
(b)external
Source Code:
<!DOCTYPE html>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aditya</title>
<link rel="stylesheet" type="text/css" href="inl-int-ext.css">
</head>
<body>
<div>Aditya
Bhya
</div>
</body>
</html>
inl-int-ext.css [external css file]
div{
font-style:sans-serif;
color: red;
border: 4px solid black;
background-color: lightyellow;
}
Output:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 3: Create an internal hyperlink from the top of your page to the bottom of
the same page.
Source Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aditya</title>
<style type="text/css">
li{
list-style: none;
display: inline-flex;
padding-left: 180pxpx;
font: sans-serif;
font-size: 16px;
padding-left: 80px;
padding-right: 24px;
color: red;
li a{
color: #060606;
font-weight: 1000;
text-decoration: none;
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
padding-top:100px;
margin-bottom: 620px;
margin-right: 20px;
body{
background-color: lightsteelblue;
</style>
</head>
<body>
<div class="div-1">
<ul>
<li><a href=#Home>Home</a></li>
<li><a href=#About>About</a></li>
<li><a href=#Contact>Contact Us</a></li>
<li><a href=#Feedback>Feedback</a></li>
</ul>
<p id="Contact">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</html>
Output:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 4: Write an html code to create a website of your own(only front page of a
website).
Source Code:
<!DOCTYPE html>
<html>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Yoga</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div id="carouselExampleDark" class="carousel carousel-dark slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-
label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-
label="Slide 3"></button>
<div class="div-1">
<ul>
<li><a href=#Home>Home</a></li>
<li><a href=#About>About</a></li>
<li><a href=#Contact>Contact Us</a></li>
<li><a href=#Feedback>Feedback</a></li>
</ul>
</div>
</div>
<div class="carousel-inner">
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
<div class="carousel-item active" data-bs-interval="10000">
<p>
<img src="https://www.tonal.com/wp-content/uploads/2019/12/1200x800_1-1.jpg?
resize=1024%2C683" class="d-block w-100" alt="...">
<p>
<div class="carousel-caption d-none d-md-block">
<h5>PEETH AASAN</h5>
<p>This is for relief in backbone pain and strength to our backbone.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<p>
<img src="https://assets.myy.org/dev/wp-content/uploads/20220601111320/
AdobeStock_338364178-1200x800.jpeg" class="d-block w-100" alt="...">
</p>
<div class="carousel-caption d-none d-md-block">
<h5>Bakason</h5>
<p>This is for the strength to arm and increase height.</p>
</div>
</div>
<div class="carousel-item">
<p>
<img src="https://wp-test-dev.s3.amazonaws.com/public/uploads/2022/02/Yoga-Pose-
Ausfallschritt.gif" alt="...">
</p>
<div class="carousel-caption d-none d-md-block">
<h5>Dhyan Aasan</h5>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
<p>This is for the meditation .</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class=small-div-1>
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcRTtPwxa4npeNt8bHjAmRXWwUpdlaYwAJzsG5k16sm8S1eTuxeSAVNp51
jpKyMX6uRTHI8&usqp=CAU" class="small-div-1">
<p style="display: block; background-color: #fffefe;color: #568d49;margin-top:-
87px;margin-left:58px">
Yoga is a vast collection of spiritual techniques and practices aimed at integrating mind,
body and spirit to achieve a state of enlightenment or oneness with the universe.</p>
</div>
<div class=small-div-2>
<img src="https://media.istockphoto.com/id/1214418482/vector/set-of-meditating-yogi-
men-characters-in-the-lotus-position-vector-illustration-in-flat.jpg?
s=612x612&w=0&k=20&c=1t9MV9mAoBWB2SN3Iuiz4mWsFOE1ADzhCOMIymk47Ns=
" class="small-div-1">
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
<p style="display: block; background-color: #fffefe;color: #568d49;margin-top:-
87px;margin-left:47px">
Yoga is a vast collection of spiritual techniques and practices aimed at integrating mind,
body and spirit to achieve a state of enlightenment or oneness with the universe.</p>
</div>
<div class=small-div-3>
<img src="https://static.vecteezy.com/system/resources/previews/013/787/938/original/set-
of-poses-faceless-woman-yoga-and-stretching-collection-of-female-cartoon-yoga-positions-
isolated-on-white-background-full-body-yoga-workout-free-vector.jpg" class="small-div-1">
<p style="display: block; background-color: #fffefe;color: #568d49;margin-top:-
87px;margin-left:43px">
Yoga is a vast collection of spiritual techniques and practices aimed at integrating mind,
body and spirit to achieve a state of enlightenment or oneness with the universe.</p>
</div>
</div>
<div id="Contact">
<section id="contact">
<h2 id="h1" style="color: black;margin:20px;font-size:40px;padding-top: 160px">
Contact
</h2>
<div id="contact-1">
<div id="contact-2">
<input id="input-1" type="text" placeholder="Name" ">
<input id="input-2" type="email" placeholder="Mail">
<input id="input-3" typr="text" placeholder="Message">
</div>
<div id="get-in-touch-with">
<h6 id="h6">
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Get In Touch
<p id="p1">
I am aditya semwal if you want to connect with me so contact me.my team is
available for you 24X7 hours.
</p>
<h6 id="h62">
My Address
<p id="p2">
RISHIKESH , UTTARAKHAND
</p>
<p id="p2">
6383399334
<p id="p2">
</p> </p>
<h6> </h6>
</div></div>
</section>
</div>
<div id="social">
<a id="facebook" class="social-btn" target="_blank"
href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fptop.only.wip.la%3A443%2Fhttp%2Fblog.codingninjas.in
%2F2018%2F03%2F13%2Fa-step-by-step-walk-through-of-your-first-html-page%2F"><img
class="social-img"
src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000014_1549330414_facebook
-logo.png" alt="fb"></a>
<a id="linkedin" class="social-btn" target="_blank"
href="https://www.linkedin.com/shareArticle?
mini=true&title=Best+Coding+Practices+for+Hassle-free+Programming&url=http%3A%2F
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
%2Fblog.codingninjas.in%2F2018%2F04%2F02%2Fbest-coding-practices-for-hassle-free-
programming%2F"><img class="social-img"
src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000015_1549330433_linkedin-
logo.png" alt="in"></a>
<a id="twitter" class="social-btn" target="_blank" href="https://twitter.com/share?url=http
%3A%2F%2Fblog.codingninjas.in%2F2018%2F04%2F02%2Fbest-coding-practices-for-
hassle-free-programming%2F&text=Best+Coding+Practices+for+Hassle-
free+Programming"><img class="social-img"
src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000016_1549330452_twitter-
logo.png" alt="twi"></a>
<a id="gmail" class="social-btn" target="_blank" href="https://plus.google.com/share?
url=https%3A%2F%2Fptop.only.wip.la%3A443%2Fhttp%2Fblog.codingninjas.in%2F2018%2F04%2F02%2Fbest-coding-
practices-for-hassle-free-programming%2F"><img class="social-img"
src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000017_1549330467_google-
logo.png" alt="g+"></a>
<a id="whatsapp" class="social-btn" target="_blank" href="whatsapp://send?text=http%3A
%2F%2Fblog.codingninjas.in%2F2018%2F04%2F02%2Fbest-coding-practices-for-hassle-
free-programming%2F"><img class="social-img"
src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000018_1549330485_whatsapp
-logo.png" alt="w-app"></a>
<a id="mail" class="social-btn" target="_blank" href="mailto:[email protected]?
subject=7%20best%20coding%20practices%20to%20follow%20%7C
%20blog.codingninjas.in&body=https%3A%2F%2Fptop.only.wip.la%3A443%2Fhttp%2Fblog.codingninjas.in
%2F2018%2F04%2F02%2Fbest-coding-practices-for-hassle-free-programming%2F"><img
class="social-img"
src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000019_1549330510_mail-
logo.png" alt="mail"></a>
</div>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbS
SUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-
heAjqF+bCxXpCWLa6Zhcp4fu20XoNIA98ecBC1YkdXhszjoejr5y9Q77hIrv8R9i"
crossorigin="anonymous"></script>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
</body>
</html>
index.css[EXTERNAL CSS FILE]
li{
list-style: none;
display: inline-flex;
padding-left: 180pxpx;
font: sans-serif;
font-size: 16px;
padding-left: 80px;
padding-right: 24px;
color: red;
li a{
color: #060606;
font-weight: 1000;
text-decoration: none;
padding-top:100px;
margin-bottom: 620px;
margin-right: 20px;
div p img{
height: 700px;
width: 1280px;
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
body{
background-color: #E0ECE4;
div-1 p{
padding-right:260px;
.Search{
margin-left: 760px;
margin-top: -5px;
.Search-2{
margin-left: 900px;
margin-top: 5px;
.small-div-1{
margin-left: 30px;
margin-top: 40px;
height: 215px;
width: 225px;
margin-bottom: 88px;
.small-div-2{
margin-left: 30px;
margin-top: 40px;
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
height: 215px;
width: 210px;
margin-bottom: 88px;
margin-top: -303px;
margin-left: 531px;
.small-div-3{
margin-left: 30px;
margin-top: 40px;
height: 215px;
width: 210px;
margin-bottom: 88px;
margin-top: -303px;
margin-left: 1037px;
#h1{
padding-top:-240px;
color:white;
#contact-1{
/* border:2px solid red;*/
height:auto;
width:auto;
background-image:linear-gradient(to top right, #2857a4,#403066);
padding:100px;
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
display:flex;
/* width:100vw; */
#contact-2 input{
color:grey;
margin-left:40px;
#get-in-touch-with{
margin-left:250px;
#contact{
height:auto;
width:100%;
#h6{
color:white;
padding-left:50px;
margin-top:-10px;
#p1{
font-size:10px;
#h62{
color:white;
padding-left:50px;
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
#p2{
font-size:10px;
##contact{
height:auto;
width:100%;
#input-1{
margin-left:-75px;
display:block;
margin-bottom:25px;
/* padding-bottom:6px; */
border:0px solid transparent;
border-bottom:1px solid white;
background:transparent;
#input-2{
margin-left:-75px;
display:block;
margin-bottom:25px;
/* padding-bottom:6px; */
border:0px solid transparent;
border-bottom:1px solid white;
background:transparent;
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
#input-3{
margin-left:-75px;
display:block;
/* padding-bottom:6px; */
border:0px solid transparent;
border-bottom:1px solid white;
background:transparent;
/*social Button*/
#social {
position: fixed;
top: 25%;
left: 0;
line-height: 1;
#social .social-btn {
display: block;
padding: 14px 13px;
color: #ffffff;
#social .social-img {
width:19px;
#facebook {
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
background-color: #3b5998;
#facebook:hover {
background-color: #2d4373;
#linkedin {
background-color: #0077b5;
#linkedin:hover {
background-color: #00121c;
#twitter {
background-color: #83c3f3;
#twitter:hover {
background-color: #55acee;
#gmail {
background-color: #dd4b39;
#gmail:hover {
background-color: #c23321;
#whatsapp {
background-color: #6ba92f;
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
#whatsapp:hover {
background-color: #528124;
#mail {
background-color: #ed4926;
#mail:hover {
background-color: #cf3311;
OUTPUT:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 5: Write an html code to divide the page into two columns using div tag with
proper margin and border properties. One column should display the login page and other
should display the text and image.
Source Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aditya</title>
<link rel="stylesheet" type="text/css" href="inl-int-ext.css">
</head>
<body>
<div class="background">
<div class="Form-1">
<form class="form"><p>Log In</p>
<input type="text" name="Name" placeholder="Name"><br>
<input type="password" name="Password" placeholder="Password"><br>
<p class="p-2">Forgot Password ?</p>
<button type="submit">Log In</button>
<p class="p-3">Don't have an account ?<a href=""> Sign Up</a></p>
</form>
</div>
</div>
<div class="second-part">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</body>
</html>
index.css[EXTERNAL CSS FILE]
.background{
background-color: black;
height: 640px;
width: 590px;
display:inline-block;
.form input{
margin-bottom: 20px;
border:2px solid yellow;
padding: 3px;
margin-left: 5px;
margin-top: 20px;
border-radius: 5px;
background-color: black;
color: whitesmoke;
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
.form{
color: green;
font-style: sans-serif;
border: 5px solid blue;
height: 300px;
width: 300px;
text-align: center;
border-radius: 8px;
margin: 100px;
margin-top: -8px;
margin-left: 88px;
margin-top: 0px;
form p{
font-style: sans-serif;
font-size: 25px;
color: yellow;
margin-bottom: -5px;
form button{
height: 35px;
width:180px;
background-color: red;
border-radius: 7px;
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
font-style: sans-serif;
.p-2{
color: white;
font-size:12px;
margin-top: -10px;
margin-left: -70px;
margin-bottom: 15px;
font-style: initial;
.p-3{
color: white;
font-size:12px;
a{
color: red;
button:hover{
background-color: grey;
cursor:pointer;
box-shadow: 0 0 20px #00FFD1,inset 0 0 20px #31C6;
/*image text section*/
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
.second-part{
background-image: url(https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-
3082832__340.jpg);
height: 185pxpx;
width: 678px;
border: 2px solid grey;
background-repeat: no-repeat;
display: inline-block;
padding-top: 156px;
color: whitesmoke;
image{
height: 640px;
width: 590px;
}
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
OUTPUT:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 6 : Following target names are reserved while using <a href>. Explain each by
designing single html document.
1._blank
2._self
3._parent
4._top
Source Code:
<html>
<head>
<title>
</title>
</head>
<body>
<b>ADITYA SEMWAL<br>
Class rollno: 31</b><br><br>
<div style="background-color: black;">
<a href="http://www.google.com" target="_blank" style="color:
lightcyan;">Google_Blank</a><br>
<a href="http://www.google.com" target="_self"
style="color:lightcoral;">Google_self</a><br>
<a href="http://www.google.com" target="_parent"
style="color:lightsalmon;">Google_parent</a><br>
<a href="http://www.google.com" target="_top"
style="color:lightgoldenrodyellow;">Google_top</a><br>
</div>
</body>
</html>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
OUTPUT:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 7 : Write a html program to demonstrate the use of following tags.
(i) div
(ii) span
(iii) pre
(iv) marquee
(v) footer
(vi) header
(vii) nav
(viii) article
(ix) section
Source Code:
<html>
<head>
<title>
</title>
</head>
<body>
<header style="height:50px;background-color:darkcyan;color:white;">Header
Tag</header>
<div style="background-color:lightblue;height:50px;">
<h1>DIV TAG</h1>
</div>
It is a <span style="color:white;background-color:red;">SPAN </span>TAG
<pre style="font-size:20px;background-color:blue;color:white;">Pre tag Defines
preformatted text eg: abc</pre>
<marquee style="background-color:yellow;height:50px;">Marquee Tag</marquee>
<footer style="background-color:red;color:white;height:80px;font-
size:30px;">Footer Tag</footer>
<nav style="background-color:yellow;height:50px;">
<h3>Nav Tag</h3>
<a href="/html/">HTML</a>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
<a href="/css/">CSS</a>
<a href="/js/">JAVASCRIPT</a>
<a href="/python/">PYTHON</a>
</nav>
<article style="background-color:lightblue;">
<h3>Article Tag</h3>
<p>Article Tag specifies independent,self-contained content.</p>
</article>
<section style="background-color:pink;">
<h3>Section Tag</h3>
<p>Section Tag defines a section in a document.</p>
</section>
</body>
</html>
OUTPUT:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 8 : Write an HTML code to demonstrate the use of audio and video tags using
HTML 5
Source Code:
. <!DOCTYOE html>
<html>
<head>
<title>
</title>
</head>
<body>
<b>Name: Anjali Joshi<br>
Class rollno: 66</b><br><br>
Audio:<audio controls src="C:\Users\ACER\Desktop\Web_Design\
maan.mp3.mp3"></audio><br><br>
Video:<video controls src="C:\Users\ACER\Desktop\Web_Design\
mov_bbb.mp4"></video>
</body>
</html>
OUTPUT:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 9 : Write an html code to illustrate the use of <frame>,<frameset>,formatting
tags and <img>.
Source Code:
<html>
<head>
<title>
</title>
</head>
<frameset rows="50%,50%" border="5">
<frame name="top" src="FormattingTags.html">
<frame name="bottom" src="image.html">
</frameset>
</html>
OUTPUT:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 10 : Write an html code for the login page using internal css.
Source Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aditya</title>
<style>
body{
background-color: black;
}
.form input{
margin-bottom: 20px;
border:2px solid yellow;
padding: 3px;
margin-left: 5px;
margin-top: 20px;
border-radius: 5px;
background-color: black;
color: whitesmoke;
}
.form{
color: green;
font-style: sans-serif;
border: 5px solid blue;
height: 300px;
width: 300px;
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
text-align: center;
border-radius: 8px;
margin: 100px;
MARGIN-LEFT: 500px
}
form p{
font-style: sans-serif;
font-size: 25px;
color: yellow;
margin-bottom: -5px;
}
form button{
height: 35px;
width:180px;
background-color: red;
border-radius: 7px;
font-style: sans-serif;
}
.p-2{
color: white;
font-size:12px;
margin-top: -10px;
margin-left: -70px;
margin-bottom: 15px;
font-style: initial;
}
.p-3{
color: white;
font-size:12px;
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
}
a{
color: red;
}
button:hover{
background-color: grey;
cursor:pointer;
box-shadow: 0 0 20px #00FFD1,inset 0 0 20px #31C6;
}
</style>
</head>
<body>
<div class="background">
<div class="Form-1">
<form class="form"><p>Log In</p>
<input type="text" name="Name" placeholder="Name"><br>
<input type="password" name="Password" placeholder="Password"><br>
<p class="p-2">Forgot Password ?</p>
<button type="submit">Log In</button>
<p class="p-3">Don't have an account ?<a href=""> Sign Up</a></p>
</form>
</div>
</div>
</body>
</html>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
OUTPUT:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 11: Write an HTML code to demonstrate the use of hover selector with <a>
tag using CSS
Source Code:
. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ADITYA</title>
<style type="text/css">
a:hover{
border: 1px solid black;
color: darkcyan;
background-color: lightcoral;
}
</style>
</head>
<body>
<div >
<a href="#Home">HOME</a><br>
<a href="#About">ABOUT</a><br>
<a href="#contact">CONTACT US</a><br>
</div>
</body>
</html>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
OUTPUT:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 12 : Write an html code to display the drop down menu(list) on mousehover
event (using hover selector) on the web page like.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
height: 100vh;
background-color: green;
}
.list {
display: flex;
}
li {
list-style: none;
}
a{
display: block;
text-decoration: none;
color: rgb(0, 0, 0);
padding-inline: 1rem;
padding-block: 0.5rem;
background-color: white;
border: 1px solid grey;
}
.dropdown {
position: relative;
}
.dropdown-items {
display: none;
position: absolute;
left: -40px;
}
.dropdown:hover> a {
background-color: yellow;
}
.dropdown:hover .dropdown-items {
display: block;
}
</style>
</head>
<body>
<ul class="list">
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#">Products</a>
<ul class="dropdown-items">
<li><a href="#">Laptops</a></li>
<li><a href="#">Monitors</a></li>
<li><a href="#">Printers</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
OUTPUT:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 13 : Write an html code to design a web page similar to “facebook.com”
front page.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="facebook.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left-container">
<img
src="https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg"
alt="facebook logo"
/>
<p>Facebook helps you connect and share with the people in your life</p>
</div>
<div class="right-container">
<form>
<input type="text" placeholder="Email address or phone number" />
<input type="text" placeholder="Password" />
<button class="btn" type="submit">Log in</button>
<a href="#">forgotten password?</a>
<span class="line"></span>
<button class="btn2">Create new account</button>
</form>
<p><a href="#">create a page</a> for a celebrity, bran or business</p>
</div>
</div>
</body>
</html>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
OUTPUT:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 14 : Create employee registration webpage using html form objects.
Source Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aditya</title>
</head>
<body>
<form>
<b style="color: red; margin: 449px;
font-size: 30px;">Employee Registration Form</b><br>
<div style="margin-left: 533px;">
Mr.<input type="radio" name="">
Mrs.<input type="radio" name="">
Ms.<input type="radio" name="">
</div>
<div style="margin-left: 412px;">
First Name<input type="name" name="fs" placeholder="First Name"><br>
Last Name<input type="name" name="ls" placeholder="Last Name"><br>
Mail Address 1<input type="mail" name="mail"><br>
Mail Address 2<input type="mail" name="mail"><br>
City<input type="name" name="city"><br>
State<select><option>Uttarakhand</option>
<option>Jammu & Kashmir</option>
<option>Uttar Pradesh</option>
<option>Punjab</option></select></td><br>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
<tr>
<td>Zip</td>
<td><input type="text"></td>
</tr><br>
<tr>
<td>Upload Photo</td>
<td><input type="button" value="Browse.."> No file selected</td><br>
</tr>
<tr>
<td>E-mail</td>
<td><input type="text"></td><br>
</tr>
<tr>
<td>Mobile</td>
<td><input type="text" placeholder="+91"></td><br>
</tr>
<tr>
<td>Languages Known</td>
<td><input type="checkbox">Gujarati</input><br><input
type="checkbox">Hindi</input><br><input type="checkbox">English</input><br><input
type="checkbox">Marathi</input></td><br>
</tr>
<tr>
<td>Additional Information</td>
<td><input type="textarea" placeholder="optional"></td>
</tr><br>
<tr>
<td></td>
<td><input type="submit" placeholder="submit"><input type="reset"
placeholder="Reset"></td>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
</tr><br>
</div>
</div>
</form>
</body>
</html>
OUTPUT:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 15 : Write a html code to show the different types of list.
Source Code:
<html>
<head>
<title>
</title>
</head>
<body>
<h1>Types Of List</h1>
<h2>1.Ordered List</h2>
<ol type=1>
<li>Tea</li>
<li>Coffee</li>
<li>Milk</li>
</ol>
<ol type=a>
<li>Tea</li>
<li>Coffee</li>
<li>Milk</li>
</ol>
<h2>2.Unordered List</h2>
<ul type=disc>
<li>Tea</li>
<li>Coffee</li>
<li>Milk</li>
</ul>
<ul type=square>
<li>Tea</li>
<li>Coffee</li>
<li>Milk</li>
</ul>
<h2>3.Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>-black hot drink</dd>
<dt>Milk</dt>
<dd>-white cold drink</dd>
</dl>
</body>
</html>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
OUTPUT:
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
Practical list 16 : Write a html code to design a webpage.
Source Code:
<html>
<head>
<title>
</title>
<style>
body{
background-color:black;
color:white;
text-align:center;
}
h1{
font-size:120px;
}
input[type=button]{
background-color:lightblue;
padding:10px;
border-radius:5px;
border:1px solid white;
}
</style>
</head>
<body>
<br><br><br>
<h1>404</h1>
<h2>PAGE NOT FOUND</h2>
<h3>The page you are looking for does not exist.</h3><br>
<input type="button" value="Visit Homepage">
</body>
</html>
NAME: Aditya Semwal
CLASS ROLLNO: 31
UNIVERSITY ROLLNO: 2121048
Date: 7/4/23
OUTPUT:
You might also like
- Apache Cassandra Administrator Associate - Exam Practice TestsFrom EverandApache Cassandra Administrator Associate - Exam Practice TestsNo ratings yet
- Web Technology Lab: Department of Computer Science & EngineeringNo ratings yetWeb Technology Lab: Department of Computer Science & Engineering42 pages
- To Write A Program To Create A HTML Pages With Frames, Links, Tables and Other TagsNo ratings yetTo Write A Program To Create A HTML Pages With Frames, Links, Tables and Other Tags62 pages
- Cloud Computing: Resource Management in CloudNo ratings yetCloud Computing: Resource Management in Cloud33 pages
- Chapter 2 HTML Forms and Server Side Scripting PDF100% (2)Chapter 2 HTML Forms and Server Side Scripting PDF16 pages
- Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by100% (1)Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by12 pages
- Course - DBMS: Course Instructor Dr.K. Subrahmanyam Department of CSE, KLEFNo ratings yetCourse - DBMS: Course Instructor Dr.K. Subrahmanyam Department of CSE, KLEF99 pages
- Practical 1: Develop and Demonstrate The Usage of Inline, Internal and External Style Sheet Using CSS. SolutionNo ratings yetPractical 1: Develop and Demonstrate The Usage of Inline, Internal and External Style Sheet Using CSS. Solution4 pages
- 1.squares, Roots, Cubes, Complements Program CodingNo ratings yet1.squares, Roots, Cubes, Complements Program Coding18 pages
- Object Oriented Software Engineering Notes BCA Degree 1st YearNo ratings yetObject Oriented Software Engineering Notes BCA Degree 1st Year31 pages
- Practical 1 Introduction To HTML. Create A Basic HTML FileNo ratings yetPractical 1 Introduction To HTML. Create A Basic HTML File11 pages
- Apache Cassandra Administrator Associate - Exam Practice TestsFrom EverandApache Cassandra Administrator Associate - Exam Practice Tests
- Web Technology Lab: Department of Computer Science & EngineeringWeb Technology Lab: Department of Computer Science & Engineering
- To Write A Program To Create A HTML Pages With Frames, Links, Tables and Other TagsTo Write A Program To Create A HTML Pages With Frames, Links, Tables and Other Tags
- Chapter 2 HTML Forms and Server Side Scripting PDFChapter 2 HTML Forms and Server Side Scripting PDF
- Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented byProf. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by
- Course - DBMS: Course Instructor Dr.K. Subrahmanyam Department of CSE, KLEFCourse - DBMS: Course Instructor Dr.K. Subrahmanyam Department of CSE, KLEF
- Practical 1: Develop and Demonstrate The Usage of Inline, Internal and External Style Sheet Using CSS. SolutionPractical 1: Develop and Demonstrate The Usage of Inline, Internal and External Style Sheet Using CSS. Solution
- 1.squares, Roots, Cubes, Complements Program Coding1.squares, Roots, Cubes, Complements Program Coding
- Object Oriented Software Engineering Notes BCA Degree 1st YearObject Oriented Software Engineering Notes BCA Degree 1st Year
- Building Websites with VB.NET and DotNetNuke 4From EverandBuilding Websites with VB.NET and DotNetNuke 4
- Practical 1 Introduction To HTML. Create A Basic HTML FilePractical 1 Introduction To HTML. Create A Basic HTML File