12TH HTML Programs PDF
12TH HTML Programs PDF
* EXAMPLE OF ID SELECTOR:-
<!DOCTYPE html>
<html>
<head>
<title>
ID Slector
</title>
<style>
#abc{
letter-spacing:20pt;color:red}
</style>
</head>
<body>
<h1 align="center">Welcome</h1>
<b id="abc">Welcome to my webpage</b>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Grouping Selector
</title>
<style>
h1,h2,h3{color:green}
</style>
</head>
<body>
<h1 align="center">Welcome</h1>
<h2 align="center">TO</h2>
<h3 align="center">I.T</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
ABSOLUTE POSITIONING
</title>
<style>
.abs{position:absolute;top:35px;right:10px}
</style>
</head>
<body>
<p>
Education is a key that opens doors to a world of knowledge. It helps us
learn new things, like how to read, write, and count. It also teaches us
important lessons about being good people, by showing us how to share, be
kind, and respect others.
Education is not just about books and schools, it’s also about learning
from our experiences, family, and friends.
</p>
<p class="abs">
When we learn new things, we grow smarter and stronger. We get to know
how to solve problems and make good choices. Education teaches us manners
and helps us understand right from wrong. It’s like a spark that lights
up our minds and helps us think and create. Teachers at school are our
guides in this journey of learning
</p>
</body>
</html>
<h2>Faculty Information</h2>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4"
required></textarea><br>
<button type="submit">Submit</button>
</form>
</body></html>
Q.8.Write a html program to accept Name of the hospital,EmailID of the
hospital,Number of beds in hospitals.The data should be sent to the
server.
ANS-<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Hospital Information Form</title>
</head>
<body>
<h2>Hospital Information</h2>
<button type="submit">Submit</button>
</form>
</body>
</html>
ANS-<!DOCTYPE html>
<html>
<body>
<h2>Student Information</h2>
<ul>
<li>sanika</li>
<li>sachin</li>
</ul>
<ol>
<li>sanika:1 IT,2 Maths</li>
<li>sachin:1 English, 2 PT</li>
</ol>
</body>
</html>
h1 {
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Maharashtra State Board</h1>
</body>
</html>
<button type="submit">Submit</button>
</form>
</body>
</html>
ANS-<!DOCTYPE html>
<html>
<body>
<ol type=”I”>
<li>LOTUS</li>
<li>ROSE</li>
<li>LILY</li>
</ol>
</body>
</html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Information Form</title>
</head>
<body>
<form>
<label for="employee_id">Employee ID:</label>
<input type="text" id="employee_id" name="employee_id" required><br>
<label for="qualification">Qualification:</label>
<select id="qualification" name="qualification" required>
<option value="high_school">High School</option>
<option value="college">College</option>
<option value="university">University</option>
</select><br>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4"
required></textarea><br>
<label for="designation">Designation:</label>
<input type="text" id="designation" name="designation" required><br>
</html>
Q.20. Write a HTML code using CSS with following specifications. Create
ordered list of
college names in particular city you are living in. create unordered list
of degrees
using above particular single college name that you have listed. Divide
the list into
two sections left and right by using proper CSS.
Ans_-<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College and Degrees</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
background-color: #f2f2f2;
}
#colleges {
width: 45%;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-right: 20px;
}
#degrees {
width: 45%;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
#colleges-list,
#degrees-list {
list-style-type: none;
padding: 0;
}
#colleges-list li {
margin-bottom: 10px;
}
#degrees-list li {
margin-left: 20px;
}
</style>
</head>
<body>
<div id="colleges">
<h2>Colleges in My City</h2>
<ul id="colleges-list">
<li>College 1</li>
<li>College 2</li>
<li>College 3</li>
</ul>
</div>
<div id="degrees">
<h2>Degrees from Selected College</h2>
<ul id="degrees-list">
<li>Degree 1</li>
<li>Degree 2</li>
<li>Degree 3</li>
</ul>
</div>
</body>
</html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
h1 {
background-color: #3498db;
color: #fff;
padding: 10px;
text-align: center;
font-style: italic;
}
form {
width: 50%;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 8px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 15px;
box-sizing: border-box;
}
ul {
list-style-type: none;
padding: 0;
margin: 20px 0;
}
p {
color: #ff0000;
font-size: 13px;
text-align: right;
}
button {
background-color: #3498db;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Employee Information Form</h1>
<form>
<label for="empid">Employee ID:</label>
<input type="text" id="empid" name="empid" required>
<label for="age">Age:</label>
<input type="text" id="age" name="age" required>
<label for="department">Department:</label>
<input type="text" id="department" name="department" required>
<ul>
<li>Department 1</li>
<li>Department 2</li>
<li>Department 3</li>
</ul>
<button type="submit">Submit</button>
</form>
</body>
</html>
Q.22. Write a program using HTML with following CSS Specifications
1. To Create a form that should accept name, age, date, time, std from
user
2. A heading on top of the form with Violet as background color with a
different font-style
3. Create an Ordered list of Subject in Class 12
4. Write a paragraph with red text color and 15px font-size with right
alignment.
5. Create a Submit button to send data.
Ans-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Information Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
h1 {
background-color: #9400D3; /* Violet color */
color: #fff;
padding: 10px;
text-align: center;
font-style: oblique; /* Different font style */
}
form {
width: 50%;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 8px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 15px;
box-sizing: border-box;
}
ol {
padding: 0;
margin: 20px 0;
}
p {
color: #ff0000;
font-size: 15px;
text-align: right;
}
button {
background-color: #9400D3; /* Violet color */
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Student Information Form</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="age">Age:</label>
<input type="text" id="age" name="age" required>
<label for="date">Date:</label>
<input type="text" id="date" name="date" required>
<label for="time">Time:</label>
<input type="text" id="time" name="time" required>
<ol>
<li>Subject 1</li>
<li>Subject 2</li>
<li>Subject 3</li>
</ol>
<button type="submit">Submit</button>
</form>
</body>
</html>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required><br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Schools and Grades</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: space-between;
}
#left-section {
width: 45%;
}
#right-section {
width: 45%;
}
#school-list {
margin: 0;
padding: 0;
list-style-type: decimal;
}
#grades-list {
margin: 0;
padding: 0;
list-style-type: none;
}
</style>
</head>
<body>
<div id="left-section">
<h2>Schools in My City</h2>
<ol id="school-list">
<li>School A</li>
<li>School B</li>
<li>School C</li>
<!-- Add more schools as needed -->
</ol>
</div>
<div id="right-section">
<h2>Grades for School A</h2>
<ul id="grades-list">
<li>Grade 1</li>
<li>Grade 2</li>
<li>Grade 3</li>
<!-- Add more grades as needed -->
</ul>
</div>
</body>
</html>