Scribd
Upload
34 views37 pages

WT Lab

Uploaded by

nationindo845
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
34 views37 pages

WT Lab

Uploaded by

nationindo845
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/ 37

Experiment No :01

Qs. Write an HTML code to display your education details in a tabular format.

Code :
<!DOCTYPE html>
<head>
<title>Education Details</title>
</head>
<body>
<h1 style="color: #351895; text-align: center;">Here are the Educational Details of Akash Anuragi</h1>
<table border="2" align="center" style="border:8px solid rgb(180, 180, 239); text-align: center;">
<tr style="background-color: rgb(181, 218, 232); font-size: 23px;" >
<th style="padding: 12px;">S.NO.</th>
<th style="padding: 12px;">Level of Education</th>
<th style="padding: 12px;">Board/University</th>
<th style="padding: 12px;">School/College</th>
<th style="padding: 12px;">Year of Passing</th>
<th style="padding: 12px;">Percentage</th>
</tr>
<tr style="font-size: 18px;">
<td style="padding: 12px;">1</td>
<td style="padding: 12px;">High School</td>
<td style="padding: 12px;">U.P. Board</td>
<td style="padding: 12px;">S.V.M.Inter College,Ganga Nagar(Meerut)</td>
<td style="padding: 12px;">2019</td>
<td style="padding: 12px;">84.83%</td>
</tr>
<tr style="font-size: 18px; " >
<td style="padding: 12px;">2 </td>
<td style="padding: 12px;">Entermediate </td>
<td style="padding: 12px;">U.P. Board</td>
<td style="padding: 12px;">S.V.M.Inter College,Ganga Nagar(Meerut)</td>
<td style="padding: 12px;">2021 </td>
<td style="padding: 12px;">78.6% </td>
</tr>
<tr style="font-size: 18px; " >
<td style="padding: 12px;"> 3</td>
<td style="padding: 12px;"> Bachelor of Technology</td>
<td style="padding: 12px;">AKTU</td>
<td style="padding: 12px;">IIMT Engineering College Ganga Nagar(Meerut)</td>
<td style="padding: 12px;">2025</td>
<td style="padding: 12px;">70%</td>
</tr>
</table>
</body>
</html>
Experiment No :02

Qs. Write an HTML code to display your CV on a webpage.

HTML Code :-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My CV</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-
icons.min.css">
<link rel="stylesheet" href="cv.css">
</head>
<body>
<section class="main-section">
<div class="left-part">
<div class="photo-container">
<img src="img/resumepic.png" alt="Not Found!!">
</div>
<div class="contact-container">
<h2 class="title">Contact Me</h2>
<div class="contact-list">
<div class="icon-container">
<i class="bi bi-geo-alt-fill"></i>
</div>
<div class="contact-text">
<p>Ganga Nagar , Meerut(U.P.), 250001</p>
</div>
</div>

<div class="contact-list">
<div class="icon-container">
<i class="bi bi-envelope-fill"></i>
</div>
<div class="contact-text">
<p>[email protected]</p>
</div>
</div>

<div class="contact-list">
<div class="icon-container">
<i class="bi bi-telephone-fill"></i>
</div>
<div class="contact-text">
<p>+91-8449226893</p>
</div>
</div>
<div class="contact-list">
<div class="icon-container">
<i class="bi bi-github"></i>
</div>
<div class="contact-text">
<p>@Akash Anuragi </p>
</div>
</div>

<div class="contact-list">
<div class="icon-container">
<i class="bi bi-linkedin"></i>
</div>
<div class="contact-text">
<p>@AkashAnuragi01</p>
</div>
</div>
</div>

<div class="education-container">
<h2 class="title">Education</h2>
<div class="course">
<h2 class="education-title">High School</h2>
<h5 class="college">University/College Details</h5>
<p class="college-name">S.V.M Inter College, Ganga Nagar Meerut(U.P), 250001</p>
<p class="edu-date">2018 - 2019</p>
</div>
<div class="course">
<h2 class="education-title">Intermediate</h2>
<h5 class="college">University/College Details</h5>
<p class="college-name">S.V.M Inter College, Ganga Nagar Meerut(U.P), 250001</p>
<p class="edu-date">2020 - 2021</p>
</div>
<div class="course">
<h2 class="education-title">Degree/Bachelor of Technology</h2>
<h5 class="college">University/College Details</h5>
<p class="college-name">IIMT Engineering College, Ganga Nagar Meerut(U.P), 250001</p>
<p class="edu-date">2021 - 2025</p>
</div>
</div>

<div class="skill-container">
<h2 class="title">Skills</h2>
<div class="skills">
<h3 class="hard-skills">Programing Language</h3>
<ul class="coding">
<li>C Language</li>
<li>C++ Language</li>
<li>java Language</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
<h3 class="soft-skills">Soft Skills</h3>
<ul class="non-tech">
<li>Problem solving</li>
<li>Teamwork</li>
<li>Communicaton</li>
<li>Work Ethic</li>
<li>Self Motivated</li>
</ul>

</div>
</div>
</div>

<div class="right-part">
<div class="banner">
<h1 class="firstname">Akash</h1>
<h1 class="lastname">Anuragi</h1>
<p class="position">Student</p>
</div>
<div class="summery-container">
<h2 class="title">Summery</h2>
<p class="job">As a recent graduate with a passion for web development, I bring fresh ideas,
enthusiasm, and a strong foundation in programming languages such as HTML, CSS, and JavaScript. My
educational background has equipped me with the necessary skills to design, develop, and maintain
responsive and user-friendly websites. I am adept at working with frameworks like Bootstrap and libraries like
jQuery, and I am eager to expand my knowledge in backend technologies such as Node.js and databases like
MySQL. With a keen eye for detail and a commitment to staying updated with the latest industry trends and
technologies, I am ready to contribute to innovative web projects and grow within a dynamic team
environment.</p>
</div>
<div class="project-container">
<h2 class="title">Project</h2>
<h4 class="wood-project">Wood Store project</h4>
<p class="wood-text">Developed a fully responsive online wood store using HTML, CSS, and JavaScript,
implementing features such as product galleries and a dynamic shopping cart, enhancing user engagement
and streamlining the shopping experience.</p>

<h4 class="quiz">Quiz App</h4>


<p class="quiz-text">Developed a dynamic Quiz App utilizing HTML, CSS, and JavaScript to create an
interactive user interface that enables real-time feedback and score tracking, enhancing user engagement and
learning.</p>

<h4 class="ecommerce">E-Commerce Website</h4>


<p class="ecommerce-text">Designed and developed an interactive e-commerce website utilizing
HTML, CSS, and JavaScript, enhancing user engagement and streamlining the shopping experience with
intuitive navigation and responsive design elements.</p>
</div>
<div class="hobbie-container">
<h2 class="title">Hobbies</h2>
<ul class="hobbies">
<li>Listening Music</li>
<li>Playing Kho-Kho</li>
<li>Reading Books</li>
<li>Explore New People</li>
</ul>
</div>
</div>
</section>
</body>
</html>
CSS CODE :-
@import
url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,4
00;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,300;0,400;
0,500;0,600;0,700;1,100&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: hsl(228, 14%, 93%);
}

.main-section{
width: 210mm;
height: 380mm;
background-color: white;
margin: 0 auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
display: flex;
}

.main-section .left-part{
width: 40%;
height: 100%;
background-color:#F4F4F4;
padding: 2.8rem;
}

.left-part .photo-container{
margin-bottom: 2.8rem;
}

.left-part .photo-container img{


width: 100%;
height: 100%;
border-radius: 50%;
border: 1rem solid white;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px ;
}

.title{
font-family: "Public Sans", sans-serif;
font-size: 23px;
text-transform: uppercase;
padding: 12px;
text-align: center;
background-color: black;
color: white;
margin: 1.4rem 0;
}
.contact-container{
margin-bottom: 2.2rem;
}

.contact-container .contact-list{
display: flex;
gap: 1rem;
margin-bottom: 1rem;
font-family: 'Lato' ,sans-serif;
color: #444440;
letter-spacing: 1px;
font-size: 1rem;
}

.education-container{
margin-bottom: 2.2rem;
font-family: 'Lato' ,sans-serif;
}

.education-container .course{
margin-bottom: 1rem;
color: #353437;
}

.education-container .education-title{
font-size: 1rem;
font-weight: 800;
margin-bottom: .3rem;
}
.education-container .college{
margin-bottom: .3rem;
font-weight: 600;
}

.education-container .college-name ,.edu-date{


font-size: 0.9rem;
}

.skill-container{
margin-bottom: 2.2rem;
font-family: 'Lato' ,sans-serif;
}

.skill-container .hard-skills ,.soft-skills{


font-size: 1rem;
font-weight: 800;
margin-bottom: .3rem;
font-family: 'Public Sans' ,sans-serif;

.skill-container .coding li , .non-tech li{


margin-bottom: .3rem;
color: #353437;
font-size:.9em;
}

.right-part{
padding: 2.8rem;
}

.right-part .banner{
font-family: 'Open Sans', sans-serif;
color: #4D4D4D4f;
margin-bottom: 1.2rem;
}

.right-part .banner .firstname{


color: #666660;
margin-top: 1rem;
font-size: 4rem;
}
.right-part .banner .lastname{
color: #666666;
font-weight: 300;
font-size: 4rem;
letter-spacing: 0.2rem;
margin-top: -1rem;
}

.right-part .banner .position{


letter-spacing: 0.5rem;
font-size: 1.4rem;
margin: -0.5rem;
}

.summery-container{
margin-bottom: 5rem 0;
font-family: 'Lato' ,sans-serif;

}
.summery-container .job{
color: #737373;
font-size: 1rem;
text-align: justify;
line-height: 1.2rem;
}

.project-container{
margin-bottom: 5rem 0;
font-family: 'Lato' ,sans-serif;
}

.project-container .wood-project, .quiz, .ecommerce{


font-size: 1rem;
font-weight: 800;
margin-bottom: .3rem;
font-family: 'Lato' ,sans-serif;
}

.project-container .wood-text , .quiz-text, .ecommerce-text{


color: #737373;
font-family: 'Open Sans', sans-serif;
margin: 1rem;
font-size: 1rem;
text-align: justify;
line-height: 1.2rem;
}

.hobbie-container{
font-family: 'Lato' ,sans-serif;
color: #737373;
margin: 1rem;
font-size: 1rem;
text-align: justify;
line-height: 1.2rem;
}

.hobbie-container .hobbies li{


margin:1rem;
}
Experiment No :03
Qs. Write an HTML code to create a homepage having links for
About Us, Our Services and Contact Us.
HTML 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>Design Your House</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="navbar">
<img src="img/logo-home-png-7434.png " class="logo" alt="no image">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">BEDROOM</a></li>
<li><a href="#">DINING</a></li>
<li><a href="#">KITICHEN</a></li>
<li><a href="#">BACK YARD</a></li>
</ul>
</div>
<div class="content">
<h1>DESIGN YOUR HOUSE</h1>
<P>Lorem ipsum dolor sit amet consectetur adip sapiente unde error in nisi,
perspiciatis voluptates fuga perferendis optio quo molestiae quis?</P>
<div>
<button type="button"> <span> WATCH MORE</span></button>
<button type="button"> <span> SUBSCRIBE </span></button>
</div>
</div>
</html>
</body>
CSS CODE:-
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}

.navbar{
display:flex;
width: 85%;
margin: auto;
padding: 34px 0px;
align-items: center;
justify-content:space-between;
}
.container{
width: 100%;
height: 100vh;
background-image:linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)), url('img/bg.jpg');
background-size: cover;
background-position: center;
}

.logo{
width: 120px;
counter:pointer;
}

.navbar ul li{
list-style: none;
display: inline-block;
margin: 0px 20px;
position: relative;
}

.navbar ul li a {
text-decoration: none;
color: white;
}

.navbar ul li::after{
content: " ";
height: 3px;
width: 0;
background-color:skyblue;
position: absolute;
left: 0;
bottom: -10px;
transition: 0.9s;
}

.navbar ul li:hover::after{
width: 100%;
}

.content{
width: 100%;
position: absolute;
top: 50%;
/* transform: translate(-50%); */
text-align: center;
/* text-item:center; */
color: white;
}

.content h1{
font-size: 47px;
margin-bottom: 20px;
}
.content{
margin: 20px auto;
font-weight: 100;
line-height: 25px;
}

button{
width: 200px;
padding: 12px 0;
text-align: center;
font-size: medium;
border-radius: 20px 10px;
font-weight: bold;
border: 2px solid rgb(12, 210, 224);
background: transparent;
color: rgb(255, 255, 255);
cursor: pointer;
position: relative;
overflow: hidden;
}

span{
/* background:rgb(2, 147, 214); */
height: 100%;
width: 0;
border-radius: 25px;
position:relative;
left: 0;
bottom: 0;
/* z-index: -1; */
transition: 0.6s;
}
button:hover span{
width: 100%;

}
button:hover{
border: none;
}
Experiment No :04
Qs. Write an HTML code to create a login form. On submitting
the form ,the user should be navigated to a profile page.
HTML CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Design by foolishdeveloper.com -->
<title>Login Page</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="form.css">
</head>
<body>
<div class="background">
<div class="shape"></div>
<div class="shape"></div>
</div>
<form>
<h3>Login Here</h3>
<label for="username">Username</label>
<input type="text" placeholder="Email or Phone" id="username">
<label for="password">Password</label>
<input type="password" placeholder="Password" id="password">
<button>Log In</button>
<div class="social">
<div class="go"><i class="fab fa-google"></i> Google</div>
<div class="fb"><i class="fab fa-facebook"></i> Facebook</div>
</div>
</form>
</body>
</html>
CSS CODE:-
*,*:before,*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #080710;
}
.background{
width: 430px;
height: 520px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.background .shape{
height: 200px;
width: 200px;
position: absolute;
border-radius: 50%;
}
.shape:first-child{
background: linear-gradient(
#2709ab,
#d419b1
);
left: -80px;
top: -80px;
}
.shape:last-child{
background: linear-gradient(
to right,
#ad0a1d,
#a41482
);
right: -30px;
bottom: -80px;
}
form{
height: 520px;
width: 400px;
background-color: rgba(255,255,255,0.13);
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
border-radius: 30px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.1);
box-shadow: 0 0 40px rgba(8,7,16,0.6);
padding: 50px 35px;
}
form *{
font-family: 'Poppins',sans-serif;
color: #ffffff;
letter-spacing: 0.5px;
outline: none;
border: none;
}
form h3{
font-size: 32px;
font-weight: 500;
line-height: 42px;
text-align: center;
}

label{
display: block;
margin-top: 30px;
font-size: 16px;
font-weight: 500;
}
input{
display: block;
height: 50px;
width: 100%;
background-color: rgba(255,255,255,0.07);
border-radius: 3px;
padding: 0 10px;
margin-top: 8px;
font-size: 14px;
font-weight: 300;
}
::placeholder{
color: #e5e5e5;
}
button{
margin-top: 50px;
width: 100%;
background-color: #ffffff;
color: #080710;
padding: 15px 0;
font-size: 18px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
}
.social{
margin-top: 30px;
display: flex;
}
.social div{
background: rgb(67, 79, 138);
width: 150px;
border-radius: 3px;
padding: 5px 10px 10px 5px;
background-color: rgba(255,255,255,0.27);
color: #eaf0fb;
text-align: center;
}
.social div:hover{
background-color: rgba(255,255,255,0.47);
}
.social .fb{
margin-left: 25px;
}
.social i{
margin-right: 4px;
}
Experiment No :05
Qs. Write an HTML code to create a registration form. On
submitting the form ,the user should be asked to login with new
credentials.
HTML CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
</head>
<style>
body{
padding: 0;
margin: 0;
}

h3{
font-family: Calibri;
font-size: 25pt;
font-style: normal;
font-weight: bold;
color:SlateBlue;
text-align: center;
text-decoration: underline
}

table{
/* padding: 12px; */
font-family: Calibri;
color:white;
font-size: 11pt;
font-style: normal;
font-weight: bold;
background-color: SlateBlue;
border-collapse: collapse;
border: 2px solid navy
}
table.inner{
border: 0px
}
</style>
<body>
<h3>STUDENT REGISTRATION FORM </h3>
<table align="center" cellpadding = "10">

<!----- First Name ---------------------------------------------------------->


<tr>
<td>FIRST NAME</td>
<td><input type="text" name="First_Name" maxlength="30"/>
(max 30 characters a-z and A-Z)
</td>
</tr>

<!----- Last Name ---------------------------------------------------------->


<tr>
<td>LAST NAME</td>
<td><input type="text" name="Last_Name" maxlength="30"/>
(max 30 characters a-z and A-Z)
</td>
</tr>

<!----- Date Of Birth -------------------------------------------------------->


<tr>
<td>DATE OF BIRTH</td>

<td>
<select name="Birthday_day" id="Birthday_Day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>

<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>

<option value="31">31</option>
</select>

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


<option value="-1">Month:</option>
<option value="January">Jan</option>
<option value="February">Feb</option>
<option value="March">Mar</option>
<option value="April">Apr</option>
<option value="May">May</option>
<option value="June">Jun</option>
<option value="July">Jul</option>
<option value="August">Aug</option>
<option value="September">Sep</option>
<option value="October">Oct</option>
<option value="November">Nov</option>
<option value="December">Dec</option>
</select>

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

<option value="-1">Year:</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>

<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>

<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
</select>
</td>
</tr>

<!----- Email Id ---------------------------------------------------------->


<tr>
<td>EMAIL ID</td>
<td><input type="email" required name="Email_Id" maxlength="100" /></td>
</tr>

<!----- Mobile Number ---------------------------------------------------------->


<tr>
<td>MOBILE NUMBER</td>
<td>
<input type="tel" name="Mobile_Number" maxlength="10" />
(10 digit number)
</td>
</tr>

<!----- Gender ----------------------------------------------------------->


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

<!----- Address ---------------------------------------------------------->


<tr>
<td>ADDRESS <br /><br /><br /></td>
<td><textarea name="Address" rows="4" cols="30"></textarea></td>
</tr>

<!----- City ---------------------------------------------------------->


<tr>
<td>CITY</td>
<td><input type="text" name="City" maxlength="30" />
(max 30 characters a-z and A-Z)
</td>
</tr>

<!----- Pin Code ---------------------------------------------------------->


<tr>
<td>PIN CODE</td>
<td><input type="text" name="Pin_Code" maxlength="6" />
(6 digit number)
</td>
</tr>

<!----- State ---------------------------------------------------------->


<tr>
<td>STATE</td>
<td><input type="text" name="State" maxlength="30" />
(max 30 characters a-z and A-Z)
</td>
</tr>

<!----- Country ---------------------------------------------------------->


<tr>
<td>COUNTRY</td>
<td><input type="text" name="Country" value="India" readonly="readonly" /></td>
</tr>

<!----- Hobbies ---------------------------------------------------------->

<tr>
<td>HOBBIES <br /><br /><br /></td>

<td>
Drawing
<input type="checkbox" name="Hobby_Drawing" value="Drawing" />
Singing
<input type="checkbox" name="Hobby_Singing" value="Singing" />
Dancing
<input type="checkbox" name="Hobby_Dancing" value="Dancing" />
Sketching
<input type="checkbox" name="Hobby_Cooking" value="Cooking" />
<br />
Others
<input type="checkbox" name="Hobby_Other" value="Other">
<input type="text" name="Other_Hobby" maxlength="30" />
</td>
</tr>

<!----- Qualification---------------------------------------------------------->
<tr>
<td>QUALIFICATION <br /><br /><br /><br /><br /><br /><br /></td>

<td>
<table>

<tr>
<td align="center"><b>Sl.No.</b></td>
<td align="center"><b>Examination</b></td>
<td align="center"><b>Board</b></td>
<td align="center"><b>Percentage</b></td>
<td align="center"><b>Year of Passing</b></td>
</tr>

<tr>
<td>1</td>
<td>Class X</td>
<td><input type="text" name="ClassX_Board" maxlength="30" /></td>
<td><input type="text" name="ClassX_Percentage" maxlength="30" /></td>
<td><input type="text" name="ClassX_YrOfPassing" maxlength="30" /></td>
</tr>

<tr>
<td>2</td>
<td>Class XII</td>
<td><input type="text" name="ClassXII_Board" maxlength="30" /></td>
<td><input type="text" name="ClassXII_Percentage" maxlength="30" /></td>
<td><input type="text" name="ClassXII_YrOfPassing" maxlength="30" /></td>
</tr>

<tr>
<td>3</td>
<td>Graduation</td>
<td><input type="text" name="Graduation_Board" maxlength="30" /></td>
<td><input type="text" name="Graduation_Percentage" maxlength="30" /></td>
<td><input type="text" name="Graduation_YrOfPassing" maxlength="30" /></td>
</tr>

<tr>
<td>4</td>
<td>Masters</td>
<td><input type="text" name="Masters_Board" maxlength="30" /></td>
<td><input type="text" name="Masters_Percentage" maxlength="30" /></td>
<td><input type="text" name="Masters_YrOfPassing" maxlength="30" /></td>
</tr>

<tr>
<td></td>
<td></td>
<td align="center">(10 char max)</td>
<td align="center">(upto 2 decimal)</td>
</tr>
</table>

</td>
</tr>

<!----- Course ---------------------------------------------------------->


<tr>
<td>COURSES<br />APPLIED FOR</td>
<td>
B.Tech
<input type="radio" name="Course_B.tech" value="B.Tech">
BCA
<input type="radio" name="Course_BCA" value="BCA">
B.Sc
<input type="radio" name="Course_BSc" value="B.Sc">
B.A
<input type="radio" name="Course_BA" value="B.A">
</td>
</tr>

<!----- Submit and Reset ------------------------------------------------->


<tr>
<td colspan="2" align="center">
<button type="submit" id="submit">Submit</button>
<button type="reset" id="reset">Reset</button>
</td>
</tr>
</table>

</form>
</body>
</html>
Experiment No :06
Qs. Write an HTML code to illustrate the usage of : ordered list,
unordered list, definition list.
CODE:-
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Types of list in HTML</title>

</head>

<body style="background-color: rgb(202, 164, 237);" >

<h1>TYPES OF LIST IN HTML</h1>

<h2> PROGRAMMING LANGUAGE IN ORDER LIST</h2>

<ol type="I" style="background-color: aqua;">

<li>C Language</li>

<li>C++ Language</li>

<li>Java Language</li>

<li>JavaScript Language</li>

<li>Python Language</li>

</ol>

<h2> SUBJECTS IN UNORDER LIST </h2>

<ul type="square" style="background-color: rgb(0, 149, 255);">

<li>Data Base Management System</li>

<li>Operating System</li>

<li>Web Technology</li>
<li>Computer Network</li>

<li>Software Engineering</li>

</ul>

<dl><h2> MANG COMPANY IN DEFINITION LIST</h2>

<div style="background-color: rgb(228, 234, 113);">

<dt>(1) Meta</dt>

<dd>Meta is a social technology company that was formerly known as Facebook</dd>

<dt>(2) Apple</dt>

<dd> It was the first successful personal computer company and the popularizer of the graphical user
interface.</dd>

<dt>(3) Netflix</dt>

<dd>Netflix is a subscription-based streaming service that allows our members to watch TV shows and
movies on an internet-connected device.</dd>

<dt>(4) Google</dt>

<dd>Google is a popular internet search engine. It scans the Web to find Web pages that are relevant to the
words you have typed in the search box.</dd>

</div>

</dl>

</body>

</html>
Experiment No :07
Qs. Write an HTML code to illustrate the usage of 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>Internal CSS</title>
</head>
<style>
body{
background-color: rgb(206, 240, 245);
}
h1{
color: rgb(89, 56, 160);
}
p{
font-size: 23px;
color: rgb(233, 63, 15);
text-align: justify;
}
span{
font-weight: bold;
}
</style>
<body>
<h1>Akash Anuragi</h1>
<p>Dear Arzoo mam, <br>
Greetings! My name is Akash Anuragi, and I'm currently pursuing B.Tech in Computer Science Engineering. I'm
passionate about web development and have been honing my skills in this field. From crafting elegant user
interfaces to building robust backend systems, I find joy in every aspect of web development. Throughout
my academic journey, I've embraced challenges and sought opportunities to expand my knowledge and
expertise. Whether it's mastering new programming languages or keeping up with the latest trends in web
technology, I'm committed to continuous learning and growth. As a web developer, I believe in the power of
technology to transform ideas into reality. I thrive in collaborative environments where innovation and
creativity flourish, and I'm eager to contribute my skills and enthusiasm to meaningful projects. Thank you for
taking the time to learn a bit about me. I'm excited about the possibility of connecting further and exploring
how we can work together to achieve our goals. <br>
<span>Warm regards , </span> <br>
<span>Akash Anuragi</span></p>
</body>
</html>
Experiment No :08
Qs. Write an HTML code to illustrate the usage of
external CSS.
HTML CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS</title>
</head>
<link rel="stylesheet" href="external.css">
<body>
<p class="container">Akash Anuragi</p>
</body>
</html>

CSS CODE:-
*{
padding: 0;
margin: 0;
}
body{
background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at
top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;

}
.container{
text-align: center;
margin-top: 50vh;
font-size: 100px;
text-transform: uppercase;
background-image: url(img/bgtext.jpg);
color: transparent;
background-clip: text;
background-size: cover;
}
Experiment No :09
Qs. Write program in XML for creation of DTD with
student information.
DTD Code:
<!ELEMENT student(name,address,std,marks)>
<!ELEMENT name(#PCDATA)>
<!ELEMENT address(#PCDATA)>
<!ELEMENT std(#PCDATA)>
<!ELEMENT marks(#PCDATA)>

XML Code:
<?xml version="1.0"?>
<!DOCTYPE student SYSTEM "student.dtd">
<student>
<name>Akash</name>
<address>Meerut</address>
<std>B.tech</std>
<marks>71%</marks>
<name>Ayushi </name>
<address>Ganga nagar</address>
<std>Bsc</std>
<marks>80%</marks>
</student>
Experiment 10
Qs.Write a script that reads an integer and determines to
display whether its odd or even.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Find Odd & Even Number</title>
</head>
<body>
<script type="text/javascript">
var num=prompt("Enter some number");
if(num%2==0)
document.write("the number is even");
else
document.write("the number is odd");
</script>
</body>
</html>
Experiment 11
Qs. Develop a JavaScript page to determine an if condition
by which the time on your browser is less than 10 A.M. ,
you will get a Good Morning greeting.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Good Morning</title>
</head>
<body>
<script type="text/javascript">
{
var Today=new Date();
var Hr=Today.getHours();
var Mint=Today.getMinutes();
var Sec= Today.getSeconds();
if(Hr<10)
document.write("Good Morning!. <br>Its "+Hr+":"+Mint+":"+Sec+"A.M.");
else
document.write("Have a good day!. <br> Its "+Hr+":"+Mint+":"+Sec+"P.M.");
}
</script>
</body>
</html>
Experiment 12
Qs. Develop a Button using JavaScript in HTML form.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button</title>

<script type="text/javascript">
function Button()
{
alert("This is a Button");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click" onclick="Button()">
</form>
</body>
</html>
Experiment 13
Qs. Develop a Radio Button using JavaScript in HTML form.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio Button</title>

<script type="text/javascript">
function Button(obj)
{
alert("You have Selected option "+obj.value);
}
</script>
</head>
<body>
<form>
<input type="radio" name="gender" id="male" value="male" onclick="Button(this)"/>
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female" onclick="Button(this)"/>
<label for="female">Female</label>
<input type="radio" name="gender" id="other" value="other" onclick="Button(this)" />
<label for="other">Other</label>
</form>
</body>
</html
Experiment 14
Qs. Write a code using JavaScript to validate the password.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password</title>
<script type="text/javascript">
function myFunc(){
var mypwd = document.getElementById("pwd");
var myrepwd = document.getElementById("repwd");
if(mypwd.value === "") {
alert("You have not entered the password");
mypwd.focus();
return false;
}
if(mypwd.value !== myrepwd.value) {
alert("Password not verified. Re-enter the password");
myrepwd.focus();
myrepwd.select();
return false;
} else {
alert("Great!! Password verified");
return true;
}}
</script>
</head>
<body>
<form method="post" id="form1" onsubmit="return myFunc()">
<label>Enter your Password<input type="password" name="password" placeholder="Enter
Password" id="pwd"></label><br><br>
<label>Re-enter your Password<input type="password" name="password" placeholder="Re-
Enter Password" id="repwd" onblur="myFunc()"></label><br><br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</form>
</body>
</html>
Experiment 15
Qs. Write a code using JavaScript to find the square root of
a number.
Code:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Square Root</title>
</head>
<body>
<script type="text/javascript">
var num=25;
document.write( "Square root of 25 is : "+ Math.sqrt(num));
</script>
</body>
</html>
Experiment 16
Qs. Write a code using Asynchronous JavaScript(AJAX) to
change the content of webpage.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX</title>
<script type="text/javascript">
function myFunc(){
var req;
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.onreadystatechange = function() {
if(req.readyState === 4 && req.status === 200) {
document.getElementById("myID").innerHTML = req.responseText;
}
}
req.open("GET", "data.txt", true);
req.send();
}
</script>
</head>
<body>
<div id="myID">Akash Anuragi</div>
<button type="button" onclick="myFunc()">Change</button>
</body>
</html>

You might also like