Scribd
Upload
28 views

Pooja

The document contains an HTML form code for employee registration with fields like name, email, city, state etc. Various HTML form elements like text field, radio buttons, select dropdown are used to design the registration form.

Uploaded by

dhamip333
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

Pooja

The document contains an HTML form code for employee registration with fields like name, email, city, state etc. Various HTML form elements like text field, radio buttons, select dropdown are used to design the registration form.

Uploaded by

dhamip333
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

NAME-Pooja Dhami

Roll no-50
Section -C2

Q8- write an html code to demonstrate the use of audio and video tag using html
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio and Video Demo</title>
</head> <style>
h2,video,audio{
margin-left: 42%;
}
</style>
<body>
<div class="audio">
<h2>Audio Example</h2>
<audio controls>
<source src="example_audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div class="video">
<h2>Video Example</h2>
<video controls width="400" height=">
<source src="example_video.mp4" type="video/mp4">
Your browser does not support the video element.
</video> </div>
</body>
</html>
NAME-Neema Raikhola
Roll no-44
Section -C2

OUTPUT:-
NAME-Neema Raikhola
Roll no-44
Section -C2

Q9:- Write an Html code to illustrate the use of <frame>, <frameset>,


<iframe>formatting tags and <img>.

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frames and Images Example</title>
</head>
<body>
<!--
<h2>Frameset Example</h2>

<frameset cols="50%, 50%">


<frame src="left_frame.html" name="leftFrame">
<frame src="right_frame.html" name="rightFrame">
</frameset>
-->
<h2>IFrame Example</h2>
<div style="width: 100%"><iframe width="250" height="200" scrolling="no"
src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q
=1%20Grafton%20Street,%20Dublin,%20Ireland+(My%20Business%20Name)&amp;t=&amp;z
=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed">
<a href="https://www.gps.ie/">gps tracker sport</a></iframe></div>

<h2>Image Example</h2>
<img src="example_image.jpg" alt="Example Image" width="300" height="200">
</body>
NAME-Neema Raikhola
Roll no-44
Section -C2

</html>

Output:-
NAME-Neema Raikhola
Roll no-44
Section -C2

Q10:- Write an html code for the below login page: Using internal CSS.
Code:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>log-in</title>
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head> <style> body{
background-color: rgb(10, 95, 151);
justify-content: center; align-items:
center; display: flex;
} .login{ background-color:
aliceblue; border-radius: 5%;
border: 5px solid ; border-
color:rgb(10, 77, 105) ;
}
h3{
text-align: center ;
font-size: larger; color:
rgb(18, 118, 99);
} .login{ border-radius: 5%;
border: 5px solid ; border-
color:rgb(10, 77, 105) ;
NAME-Neema Raikhola
Roll no-44
Section -C2

} label{ margin-left:
20px; } input{
margin-right: 20px;
padding-right: 20px;
} a{ margin-left: 23px;
color: red; text-
decoration: none;
} button{ font-size: medium;
height: 21px; color: aliceblue;
background-color: rgb(12, 126, 160);
border: 1px solid black; margin-
bottom: 10px;

margin-left: 20px;
} p{ color: white; background-
color: rgb(23, 66, 89); text-align:
center; border-radius: 5px;
} section i{ position: relative;
height: 19px; right: 4px; border-
radius: 0px 3px 3px 0px ; border: 1px
solid; background-color: rgb(25, 184,
224);
}
</style>
<body>
<form>
<div class="login">
<h3>LOGIN</h3><hr>
<div class="user">
<label for="user">Username:</label><br>
NAME-Neema Raikhola
Roll no-44
Section -C2

<i class='bx bxs-user'></i>


<input type="text" id="user" placeholder="Username">
</div>
<hr>
<div class="pass">
<label for="pass">Password:</label><br>
<i class='bx bxs-lock' ></i>
<input type="text" id="pass" placeholder="Password">
</div>
<section>
<hr>
<button>Login</button>
<i class='bx bx-log-in' ></i>
<a href="#">forget password ?</a>
</div>
<p>error Page| Successful Login</p>
<p>coded by ME</p>
</section>
</form>
</body>
</html>

OUTPUT:-
NAME-Neema Raikhola
Roll no-44
Section -C2

Q11:- Write an HTML code to demonstrate the use of hover selector with <a> tag using
CSS.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Selector Example</title>
<style> body{
display: flex; align-
items: center; justify-
content: center; } a {
NAME-Neema Raikhola
Roll no-44
Section -C2

color: blue; text-


decoration: none;
font-size: large;}
a:hover { color: red;
}</style>
</head>
<body>
<a href="#">Hover over me</a>
</body>
</html>

OUTPUT:-

Q12:- Write an HTML code to display a drop down menu (list) on mouse over event
(using hover selector) on the web page like:
Code:-
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> <style> ul{ list-
style: none; background-
color: black; color:
aliceblue; } ul li { display:
inline-block; padding:
10px; } ul li:hover{
NAME-Neema Raikhola
Roll no-44
Section -C2

background-color: green;
color: white; }
.dropdown{display: none;
} ul li:hover .dropdown
{ display: block;
position: absolute;
margin-left: 0.29cm;
margin-top: 0.27cm; }
.dropdown ul li{
display: block; }
.dropdown ul{
margin: 0;
padding: 0; }
</style>
<body>
<ul>
<li> home</a></li> <li>languages
<div class="dropdown">
<ul>
<li>html</a></li>
<li>css</a></li>
<li> Javascript</a></li>
</ul> </div>
</li>
<li>about</a></li>
</ul>
</body>
</html>
NAME-Neema Raikhola
Roll no-44
Section -C2

OUTPUT:-

Q13:- Write an HTML code to design a web page similar to “facebook.com” front page.

<!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>Facebook Login Page</title>
<link rel="stylesheet" href="./login_form_2.css" />
</head>
<body>
<style>
@import
url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,50
0;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap
"); * { margin: 0;
padding: 0; box-sizing:
border-box;
} body { font-family: "Poppins",
sans-serif; background: #f2f4f7;
NAME-Neema Raikhola
Roll no-44
Section -C2

.content { position: absolute;


top: 50%; left: 50%; transform:
translate(-50%, -50%);
}
.flex-div { display: flex;
justify-content: space-evenly;
align-items: center;
}
.name-content { margin-
right: 7rem;
}
.name-content .logo {
font-size: 3.5rem;
color: #1877f2;
}
.name-content p {
font-size: 1.3rem;
font-weight: 500;
margin-bottom: 5rem;
} form { display: flex; flex-direction: column; background: #fff;
padding: 2rem; width: 530px; height: 380px; border-radius: 0.5rem;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
} form input { outline:
none; padding: 0.8rem
1rem; margin-bottom:
0.8rem; font-size:
1.1rem;
} form .login {
outline: none; border:
NAME-Neema Raikhola
Roll no-44
Section -C2

none; background:
#1877f2; padding:
0.8rem 1rem; border-
radius: 0.4rem; font-
size: 1.1rem; color:
#fff; } form a { text-
decoration: none; text-
align: center; font-size:
1rem; padding-top:
0.8rem; color:
#1877f2; } form
.create-account {
outline: none; border:
none; background:
#06b909; padding:
0.8rem 1rem; border-
radius: 0.4rem; font-
size: 1.1rem; color:
#fff; width: 75%;
margin: 0 auto; }
.name-content {
margin: 0; text-
align: center; }
</style>
<div class="content">
<div class="flex-div"> <div class="name-content">
<h1 class="logo">Facebook</h1>
<p>Connect with friends and the world around you on Facebook.</p>
</div>
NAME-Neema Raikhola
Roll no-44
Section -C2

<form>
<input type="text" placeholder="Email or Phone Number" required />
<input type="password" placeholder="Password" required>
<button class="login">Log In</button>
<a href="#">Forgot Password ?</a>
<button class="create-account">Create New Account</button>
</form>
</div>
</div>
</body>
</html>
Output:-
NAME-Neema Raikhola
Roll no-44
Section -C2

Q14:- Create employee registration webpage using HTML form objects.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
display: flex; justify-content:
center; align-items: center;

} div label{
margin-right: 0;
padding-right:0 ;
NAME-Neema Raikhola
Roll no-44
Section -C2

} select, div input{


margin-left: 60%;
width: 40%;
}
.text #box{ margin-left:
50%; background-color:
aqua;
} .btn{ margin-left:
100px;
}
</style>
<body>
<form >
<h2 style="color: red;margin-left: 40px;"> Employee Registration Form </h2>
<input type="radio">Mr
<input type="radio">Mrs
<input type="radio">Ms <br>
<div>
<label for="fname">First Name</label>
<input type="text" id="fname" placeholder="First Name"><br>
<label for="lname">Last Name</label>
<input type="text" id="lname" placeholder="Last Name"><br>
<label for="mail1">Mail Address 1</label>
<input type="email" id="mail1"><br>
<label for="mail2">Mail Address 2</label>
<input type="email" id="mail2"><br>
<label for="city">City</label>
<input type="text" id="city"><br>
NAME-Neema Raikhola
Roll no-44
Section -C2

<label for="state">state</label>
<select id="state">
<option value="Gujrat">Gujrat</option>
<option value="delhi">delhi</option>
<option value="agra">agra</option>
</select><br>
<label for="zip">zip</label>
<input type="text" id="zip" ><br>

<label for="pic">Upload photo</label>


<input type="file" id="pic"><br>
<label for="email">E-Mail</label>
<input type="email" id="email"><br>
<label for="mobile">Mobile</label>
<input type="text"id="mobile"><br>
</div>

<label for="lang">Languages Known</label><br>


<input type="checkbox" id="lang">Gujrat <br>
<input type="checkbox" id="lang">Hindi<br>
<input type="checkbox" id="lang">English<br>
<input type="checkbox" id="lang">Marathi<br>
<div class="text">
<label for="box">Additional Information</label><br>
<textarea name="" id="box" cols="30" rows="10"
placeholder="optional"></textarea><br>
<div class="btn">
<button type="submit" class="btn btn-primary">Submit</button>
NAME-Neema Raikhola
Roll no-44
Section -C2

<button type="reset" class="btn btn-primary">Reset</button>


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

Output:-
NAME-Neema Raikhola
Roll no-44
Section -C2

Q15:- Write a html code to show the different type of list.


Source Code:-
<!DOCTYPE >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Types</title>
</head>
<body>
<!-- Unordered List -->
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul
<!-- Ordered List -->
<h2>Ordered List</h2>
<ol>
NAME-Neema Raikhola
Roll no-44
Section -C2

<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<!-- Description List -->
<h2>Description List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
<!-- Definition List -->
<h2>Definition List</h2>
<dl>
<dt>Computer</dt>
<dd>A machine that performs computations</dd>
<dt>Internet</dt>
<dd>A global network connecting millions of computers</dd>
</dl>
</body> </html>
output:-
NAME-Neema Raikhola
Roll no-44
Section -C2

You might also like