Scribd
Upload
90 views28 pages

12TH HTML Programs PDF

The document contains multiple HTML programs demonstrating various CSS specifications and HTML elements, including forms, lists, and styling techniques. It includes examples of inline, internal, and external CSS, as well as positioning and display properties. Additionally, it features examples of audio, video, and iframe tags, along with exercises for creating web pages related to different topics in IT.

Uploaded by

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

12TH HTML Programs PDF

The document contains multiple HTML programs demonstrating various CSS specifications and HTML elements, including forms, lists, and styling techniques. It includes examples of inline, internal, and external CSS, as well as positioning and display properties. Additionally, it features examples of audio, video, and iframe tags, along with exercises for creating web pages related to different topics in IT.

Uploaded by

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

12THSCIENCE I.T HTML PROGRAMS.

Q.1 Write a program using html with following CSS specification-


(1) The background colour of the company name should be in green.
(2) The text colour of the company name should be red.
(3) The heading should be large with font "comic sans ms".
(4) The description of the company should be displayed in blue color in a
paragraph.
ANS-<html>
<head>
<title>
Titan Fast Track
</title>
<style>
h1
{
background-color:green;color:red;font-family:Comic sans MS
}
P
{
color:blue;
}
</style>
</head>
<body>
<h1 align="center">Titan Fast Track</h1>
<p>
Fasttrack is a fashion accesory brand in India.The company was launched
in 1998 as a sub-brand of Titan Watches.In 2005,
Fast track was spun off as an independent brand targeting the urban youth
and growing fashion industry in India.Fast track began opening retail
stores throughout the country.
</p>
</body>
</html>

Q.2 Write Html5 code with CSS as follows;-


1. To create form to accept name,age, email address, from the user.
2.Create a submit button to send the data.
3. The heading of the form should have a background colour and a
different style.
ANS-<html>
<head>
<title>
USER REGISTRATION FORM
</title>
<style>
h1
{
background-color:orange;font-style:italic;
}
</style>
</head>
<body>
<h1 align="center">User Registration Form</h1>
<form>
Enter Name:
<input type="text" name="t1"><br><br>
Enter Age:
<input type="number"name="age"><br><br>
Enter Email id:
<input type="email"name="email"><br><br>
<input type="submit"name="b1"value="submit">
</form>
</body>
</html>

Q3. Write Html5 code with CSS as follows;-


1. Create ordered list with names of tourist cities.
2.Create unordered list with tourist PLACES of those cities.
3. Divide the list into two sections left and right by using CSS.
ANS-<html>
<head>
<title>
Country
</title>
<style>
ul
{
float:left;
}
ol
{
float:right;
}
</style>
</head>
<body>
<h1>TOURIST PLACES</h1>
<ol>
<li>Paris</li>
<li>London</li>
<li>India</li>
</ol>
<ul>
<li>Eiffel</li>
<li>Big Ben</li>
<li>Taj Mahal</li>
<li>Singapore Zoo</li>
</ul>
</body>
</html>

* ADVANCED INPUT ELEMETS EXAMPLS:-


Q.4 Design a web page that should accept personal details of the user i.e
name of the user along with date and time values.The page must contain
submit button.
Ans.<!DOCTYPE html>
<html>
<head>
<title>
Form Date and Time
</title>
</head>
<body>
<form name="f1">
Enter your name
<input type="text" name="t1" autocomplete><br><br>
set date
<input type="date"><br><br>
set month
<input type="month"><br><br>
set Date
<input type="datetime-local"><br><br>
set time
<input type="time"><br><br>
set week
<input type="week"><br><br>
<input type="submit"name="b1" values="Submit">
</form>
</body>
</html>

Q.5 Design a webpage that should accept of the user,EmailID, Number of


years completed in office,Office phone number(compulsory),image with
submit button.
Ans.
<!DOCTYPE html>
<html>
<head>
<title>
Office details
</title>
</head>
<body>
<form name="f1">
ENTER YOUR NAME:
<input type="text" nmae="t1" autocomplete><br><br>
ENTER YOUR EMAILID:
<input type="email" name="emailid"><br><br>
NUMBER OF YEARS COMPLETED (1-50)
<input type="number" min="1" max="50"><br><br>
OFFICE PHONE NUMBER(in format of xx-xxxxxxxxxx)
<input type="tel" name="contact" pattern="[0-9]{2}-[0-9]
{10}"required><br><br>
<input type="image"src="E:\12thsciIT2024\htmlcodes\submit.jpg"
alt="Submit" width="100" height="100">
</form>
</body>
</html>
Q.6 Design a webpage that should accept name of the user,select file for
upload,color picker tool,website URL,search and submit button.
Ans
<!DOCTYPE html>
<html>
<head>
<title>
Form Date and Time
</title>
</head>
<body>
<form name="f1">
Enter your name
<input type="text" name="t1" autocomplete><br><br>
set date
<input type="date"><br><br>
set month
<input type="month"><br><br>
set Date
<input type="datetime-local"><br><br>
set time
<input type="time"><br><br>
set week
<input type="week"><br><br>
<input type="submit"name="b1" values="Submit">
</form>
</body>
</html>

* Example of Meta tag:-


<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<meta name=”keywords” contenr=”Form elements”>
<meta name=”description” content=”input elements”>
<meta name=”author” content=”thisauthor”>
<meta http-equiv=”refresh” content=”5 url=file:///E:/XII%20SCI%20IT%2020-
21/html%20codes/form.html”>
</head>
<body>
<h2>Example of Meta tag</h2>
<p>THIS IS THE EXAMPLE OF META TAG WITH IN AN HTML DOCUMENT</P>
</body>
</html>

* EXAMPLE OF INLINE CSS:-


<!DOCTYPE html>
<html>
<head>
<title>
Inline CSS
</title>
</head>
<body style="background-color:pink">
<b style="color:red;font-size:25pt">XII Science IT</b>
</body>
</html>

* EXAMPLE OF INTERNAL CSS:-


<!DOCTYPE html>
<html>
<head>
<title>
Internal CSS
</title>
<style>
h1{
border-style:dotted
}
body{
background-colors:skyblue
}
</style>
</head>
<body>
<h1 align="center">Internal CSS</h1>
</body>
</html>

* EXAMPLE OF Extenal CSS:-


<!DOCTYPE html>
<html>
<head>
<title>
External CSS
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 align="center">External CSS</h1>
</body>
</html>
Style.css
h1{color:green}
b{font-style:italic}
body{background-color:pink}

* 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>

* EXAMPLE OF CLASS SELECTOR :-


<!DOCTYPE html>
<html>
<head>
<title>
Class Selector
</title>
<style>
.xyz{
word-spacing:20pt;background-color:aqua}
</style>
</head>
<body>
<h1 align="center">Welcome</h1>
<b class ="xyz">Welcome to my webpage</b>
</body>
</html>

* EXAMPLE OF UNIVERSAL SELECTOR :-


<!DOCTYPE html>
<html>
<head>
<title>
Universal Selector
</title>
<style>
*{
padding:30pt;color:green}
</style>
</head>
<body>
<h1 align="center">Welcome</h1>
<b class ="xyz">Welcome to my webpage</b>
</body>
</html>

* EXAMPLE OF GROUP SELECTOR:-

<!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>

* EXAMPLE OF STATIC POSITIONING:-


<!DOCTYPE html>
<html>
<head>
<title>
STATIC POSITIONING
</title>
<style>
.static { postion:static;color:green;background-color:red;padding:20pt}
</style>
</head>
<body>
<p class="static">
Knowledge defined as an understanding of or information about a subject
that you get by experience or study. The ability to recall facts is
important in decision making. Thus, most of the leaders possess vast
knowledge on their chosen field.
However, knowledge alone isn’t enough. One must know how to use what
they’ve learned to effectively guide his/her employees.
May these Quotes On Knowledge inspire you to live a life always eager to
learn so you can take action.
</p>
</body>
</html>

* Example of fixed positioning:-


<!DOCTYPE html>
<html>
<head>
<title>
FIXED POSITIONING
</title>
<style>
.fixed { postion:fixed;color:green;top:15px;right:120px}
</style>
</head>
<body>
<p>Yoga is the best fitness regime for your body,heart and mind</p>
<p>Yoga is the best therapy to keep your mind and body calm.</p>
<p class="fixed">Nothing else would help you calm your mind and heart</p>
</body>
</html>

* EXAMPLE OF RELATIVE POSITIONING:-


<!DOCTYPE html>
<html>
<head>
<title>
RELATIVE POSITIONING
</title>
<style>
.rel { postion:relative;top:55px;right:10px}
</style>
</head>
<body>
<p>Yoga is the best fitness regime for your body,heart and mind</p>
<p>Yoga is the best therapy to keep your mind and body calm.</p>
<p class="rel">
Nothing else would help you calm your mind and heart.
as yoga does when you are suffering stress and anxiety.</p>
</body>
</html>

* EXAMPLE OF ABSOLUTE POSITIONING:-

<!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>

* EXAMPLES OF FLOAT PROPERTY:-


<!DOCTYPE html>
<html>
<head>
<title>
FLOAT PROPERTY
</title>
<style>
.left{float:left;background-color:green}
.right{float:right;font-size:15pt;background-color:gold
</style>
</head>
<body>
<h1 class="left">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. </h1>

<b class="right">It helps in positive thinking</b>


</body>
</html>
* EXAMPLES OF DISPLAY PROPERTY:-
<!DOCTYPE html>
<html>
<head>
<title>
DISPLAY PROPERTY
</title>
<style>
p{
display:inline;background-color:blue
}
b
{
display:block;background-color:red;
}
i
{
display:block-inline;background-color:red
}
</style>
</head>
<body>
<p>
Yoga is best therapy to keep your mind and body calm
</p>
<b>Yoga is best therapy to keep your mind and body calm</b><br><br>
<i>Yoga is the best therapy to keep your mind and body calm</i>
</body>
</html>

* EXAMPLES OF ORDERED LIST OR NUMBERED LIST:-


<!DOCTYPE html>
<html>
<head>
<title>
ORDERED LIST
</title>
</head>
<body>
<h1 align=’center”>’LIST OF COLORS</h1>
<ol start=”4” type=”A” reversed>
<li>RED</li>
<li>Green</li>
<li>BLUE</li>
<li>orange</li>
</ol>
</body>
</html>

* EXAMPLES OF UNORDERED LIST OR BULLETED LIST:-


<!DOCTYPE html>
<html>
<head>
<title>
UNORDERED LIST
</title>
</head>
<body>
<h1 align=’center”>’LIST OF APPLICATION</h1>
<ul>
<li>MS WORD</li>
<li>MS EXCEL</li>
<li>MS POWERPOINT</li>
<li>HTML</li>
<li>JAVASCRIPT</li>
</ul>
</body>
</html>

* EXAMPLES OF DEFINITION LIST:-


<!DOCTYPE html>
<html>
<title>HTML DESCRIPTION OR DEFINITION LIST</title>
</head>
</title>
<body>
<h2>HTML DEFINITION LIST</h2>
<dl>
<dt>JAVASCRIPT</dt>
<dd>CLIENT SIDE SCRIPTING LANGUAGE</dd>
<dt>IF ELSE IN JAVASCRIPT</dt>
<dd> IF ELSE STATEMENT IS USED TO CHECK THE CONDITIONS</dd>
</dl>
</body>
</html>

* EXAMPLES OF NESTED LIST:-


<!DOCTYE html>
<html>
<head>
<title>NESTED LIST</title>
</head>
<body>
<h1>NESTED LIST</h1>
<ul>
<li>LIBRE OFFICE</li>
<li>ADVANCED WEB DESIGN</li>
<ol>
<li>FORMS</li>
<li>META TAGS</li>
<li>HYPERLINKS</li>
</ol>
<li>JAVASCRIPT</li>
<ul style="list-style-type:circle">
<li>DATA TYPES</li>
<li>IF STATEMENTS</li>
<li>LOOPS</li>
</ul>
</body>
</html>

* EXAMPLES OF AUDIO TAG:-


<!DOCTYPE html>
<html>
<head>
<title>AUDIO TAG</title>
</head>
<body>
<audio controls muted autoplay loops="5">
<source src="C:\Users\Public\Music\Sample
Music\Kalimba.mp3"type="audio/mpeg">
</audio>
</body>
</html>

* EXAMPLES OF VIDEO TAG:-


<!DOCTYPE html>
<html>
<head>
<title>VIDEO TAG</title>
</head>
<body>
<video src="C:\Users\Public\video\Sample Video\shuttle.mp4controls
width=”500” height=”300” loop=”4”muted poster=”C:\Users\Public\Pictures\
Sample Pictures\Penguins.jpg"autoplay>
</video>
</body>
</html>

* EXAMPLES OF IFRAME TAG:-


<!doctype html>
<html>
<body>
<h1 align="center">Inline Frames</h1>
<iframessrc="E:\XIISCIIT 2023-24\html codes\form.html"width="500"
height="250"></iframes>
</body>
</html>
PYQ:-
Q.1. Write a program using html with following CSS specification-
(1) The page should contain heading as STD12th science IT in green.
(2) Create unordered list of topics in IT subject of class 12th science.
(3) change the font "comic sans ms".
ANS-<!DOCTYPE html>
<html>
<head>
<title>Design a webpage</title>
<style>
h1
{
color:green;
font-family:comic sans MS
}
</style>
</head>
<body>
<h2 align="center">STD 12<sup>th</sup></h2>
<h1>CLASS 12TH SCIENCE TOPICS OF IT SUBJECT</h1>
<ul>
<li>Search Engine Optimization</li>
<li>IOT</li>
<li>Data structrues using algorithm<li>
<li>PHP</li>
<li>E-Commerce</li>
</ul>
</body>
</html>

Q. 2 Write a program using html with following CSS specification-


(1)Create a uordered list of 5 popular Institute names currently active
in Mumbai city..
(2) Create ordered list of languages/subjects being taught there using
any one of above particular sionglr institute name that you have listed.
(3) Divide a list into two section left and right by using proper CSS.
ANS-<!DOCTYPE html>
<html>
<head>
<style>
.divided-list{
display:flex;
justify-content:space-between;
list-style:none;
padding:0;
}
.left-section{
width:45%;
}
.right-section{
width:45%;
}
</style>
<title>Mumbai Institutes</title>
</head>
<body>
<h2>Popular Institutes in Mumbai</h2>
<ul>
<li> XYZ Institude</li>
<li>ABC Academy</li>
<li>MNO Learning Center</li>
<li>PQR Institude of technology</li>
<li>LAW Language School</li>
</ul>
<h3>Subjects at XYZ Institute </h3>
<ol>
<li>Web Development</li>
<li>Data Science</li>
<li>Mobile App Development</li>
<li>Artificail Intelligence</li>
</ol>
<h3>DIVIDED LIST</h3>
<ul class="divided-list">
<div class="left-section">
<li>Management</li>
<li>Education</li>
<li>Learning</li>
</div>
<div>
<div class="right-section">
<li>students</li>
<li>Teachers</li>
<li>Classrooms</li>
</div>
</ul>
</body>
</html>

Q.3. Write a program using html with following CSS specification-


(1) The background colour of the college name should be in red color.
(2) The text colour of the college name should be yellow.
(3) The description of the college should be in a paragraph with right
align.
ANS-<html>
<head>
<title>
COLLEGE INFORMATION
</title>
<style>
h1
{
background-color:red;color:yellow;
}
P
{
text-align;right;
}
</style>
</head>
<body>
<h1 align="center”>X.Y.Z COLLEGE</h1>
<p>

Our mission is to educate young generation with enlighten and empower


students in general and girls in particular there by develop[ping their
mental,physical and emotional dimensions in order to create better
citizens and society.To this end we endeavour to mobilize the available
resources.
</p>
</body>
</html>

Q.4. Write a program using html with following CSS specification:-


A)To create a form that should accept name,number of present
students(complusory),time and file to upload from the user
B)Create submit button to send the data.
c)The heading of the form should have with blank spaces around the
contents.
Ans-
<!DOCTYPE html>
<html>
<head>
<title>
Students Info
</title>
<style>
H1{border-style:double;padding:30px}
</style>
</head>
<body>
<h1 align=”center”>DATA COLLECTION</h1>
<form>
Enter teachers name:
<input type=”text”name=”t1”><br><br>
Enter number of students present
<input type=”number” name=”stud”required><br><br>
Select time:
<input type=”time”><br><br>
Choose file to upload:
<input type=”file”><br><br>
<input type=”submit”value=”Submit” name=”b1”>
</form>
</body>
</html>

Q.5.Write a program using html with following CSS specifications:-


a)To create a form that should accept name,contact number of
office(complusory),month,number of years completed (between 1-30)from the
user.
b)Create submit button to send the data and refresh button to reload the
page.
c)The heading of form should have border, text color should be red.
ANS-<!DOCTYPE html>
<html>
<head>
<title>Office Details</title>
<style>
h1
{
border-style:solid;color:red;
}
</style>
</head>
<body>
<form>
<h1 align="center">OFFICE DETAILS</h1>
Enter your name:
<input type="text" name="nm"><br>
<br>
Office Contact number
<input type="tel"pattern"[0-9] {4}-[0-9] {4}"required><br><br>
Select month:
<input type="month"><br><br>
Years of Service:
<input type="number"name"yos"min="1"max="30"><br><br>
<input type="submit" name="btn"value="Submit">
<input type="reset"nmae="rs">
</form>
</body>
</html>

Q.6.Write a program using html to create inline frame.It should contain


image.
ANS<!DOCTYPE html>
<html>
<body>
<iframesrc=”C:\users\public\pictures\sample pictures\
penguins.jpg”widhth=”400”height=”250”name=”img”>
</body>
</html>

Q.7.Write a programme using HTML.Design webpage that should accept


Facultyname,Select faculty subject specialization from choice,faculty
Qualification,address,age of faculty and a submit button.
ANS-<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Faculty Information Form</title>
</head>
<body>

<h2>Faculty Information</h2>

<form action="/submit" method="post">


<label for="facultyName">Faculty Name:</label>
<input type="text" id="facultyName" name="facultyName"
required><br>

<label for="selectFaculty">Select Faculty:</label>


<select id="selectFaculty" name="selectFaculty" required>
<option value="fullTime">Full-time</option>
<option value="partTime">Part-time</option>
<option value="contract">Contract</option>
</select><br>

<label for="specialization">Subject Specialization:</label>


<input type="text" id="specialization" name="specialization"
required><br>

<label for="qualification">Faculty Qualification:</label>


<input type="text" id="qualification" name="qualification"
required><br>

<label for="address">Address:</label>
<textarea id="address" name="address" rows="4"
required></textarea><br>

<label for="age">Age of Faculty:</label>


<input type="number" id="age" name="age" required><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>

<form action="/submit" method="post">


<label for="hospitalName">Hospital Name:</label>
<input type="text" id="hospitalName" name="hospitalName"
required><br>

<label for="email">Email ID:</label>


<input type="email" id="email" name="email" required><br>

<label for="bedsNumber">Beds of Number:</label>


<input type="number" id="bedsNumber" name="bedsNumber"
required><br>

<button type="submit">Submit</button>
</form>

</body>
</html>

Q.9.Write a html program to create an unordered list having names of two


students.Add orderd list of subject as shown below.
* Sanika 1 IT Maths
* Sachin 1English 2 PT.

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>

Q.10.Write a html programme to display “Maharastra State Board”in blue


color and font size 30pixel using internal CSS .Give background color
yellow for the web
ANS-<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maharashtra State Board</title>
<style>
body {
background-color: yellow;
}

h1 {
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Maharashtra State Board</h1>
</body>
</html>

Q.11.Write a html program to accept students name,Date of birth and


Attendance percentage in number form.The data should br sent to the
server.
ANS-<!DOCTYPE html>
<html>
<head>
<title>Student Information Form</title>
</head>
<body>
<h1>Student Information Form</h1>
<form action="submit" method="post">
<label for="studentName">Student Name:</label>
<input type="text" id="studentName" name="studentName" required><br>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required><br>

<label for="attendance">Attendance Percentage:</label>


<input type="number" id="attendance" name="attendance" min="0"
max="100" required><br>

<button type="submit">Submit</button>
</form>
</body>
</html>

Q.12.Write a program using HTML to create a form and submit it with


personal data like name,address,and standards.
ANS-<!DOCTYPE html>
<html>
<head>
<title>PERSONAL DETAILS</title>
<body>
<form name=”f1”>
<h1 align=”center”>PERSONAL DETAILS </h1>
Enter your name:
<input type=”text” name=”t1”><br><br>
Enter your Address:
<textarea name=”t2”></textarea><br><br>
Select standard:
<input type=”radio” name=”r1”>XIth
<input type=”radio” name=”r1”>XIIth<br><br>
<input type=”submit”name=”b1” value=”submit”>
<input type=”reset”name=”b2”>
</form>
</body>
</html>

Q.12.Write a codes in HTML


Write a program using HTML to design your class Time table.
ANS-<!DOCTYPE html>
<html>
<head>
<title>12th SCI TIME TABLE </title>
</head>
<body>
<h1 align=”center”>12th STD Time table</h1>
<table border=”5” borderclor=”red”cellpadding=”10”>
<tr>
<th>TIME</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td>11:40-12:20</td>
<td>Eng</td>
<td>I.T</td>
<td>Maths</td>
<td>MAR</td>
<td>Bio</td>
<td>Chem</td>
</tr>
</tr>
<td>12:20-1:00</td>
<td>Chem</td>
<td>Maths</td>
<td>Bio</td>
<td>Phy</td>
<td>Eng</td>
<td>I.T</td>
</tr>
<r>
<td>1:00-2:00</td>
<td>Phy</td>
<td>I.T</td>
<td>Mar</td>
<td>Bio</td>
<td>Chem</td>
<td>I.T</td>
</tr>
</table>
</body>
</html>

NESTED LIST PROGRAMS:-


Q.13.write a HTML program to display list of any students names having
Roman i to iv numbering relevant.
i. AJAY
ii. RANI
iii. OM
iv. VIRAT
ANS-<!DOCTYPE html>
<html>
<body>
<ol type=”i”>
<li>AJAY</li>
<li>RANI</li>
<li>OM</li>
<li>VIRAT</li>
</ol>
</body>
</html>

Q.14. Write a html code for unordered list of 3 friuts in unfilled


circle.
* APPLE
* BANANA
* MANGO
<!DOCTYPE html>
<html>
<body>
<ul type=”circle”>
<li>APPLE</li>
<li>BANANA</li>
<li>MANGO</li>
</ui>
</body>
</html>

Q.15.write a HTML program to display ordered list of any 3 flowers in


numbering 11
11.LOTUS
12.ROSE
13.LILY
ANS-<!DOCTYPE html>
<html>
<body>
<ol type=”11”>
<li>LOTUS</li>
<li>ROSE</li>
<li>LILY</li>
</ol>
</body>
</html>

Q.16.write a HTML program to display ordered list of any 3 flowers in


numbering 11
i.LOTUS
ii.ROSE
iii.LILY
ANS-<!DOCTYPE html>
<html>
<body>
<ol type=”i”>
<li>LOTUS</li>
<li>ROSE</li>
<li>LILY</li>
</ol>
</body>
</html>

Q.17.Write a HTML program to display ordered list of any 3 flowers in


numbering(Roman number)
I.LOTUS
II.ROSE
III.LILY

ANS-<!DOCTYPE html>
<html>
<body>
<ol type=”I”>
<li>LOTUS</li>
<li>ROSE</li>
<li>LILY</li>
</ol>
</body>
</html>

Q.18.Write a HTML program to display ordered list of any 3 Fruits in


alphabets character
A.LOTUS
B.ROSE
C.LILY
<!DOCTYPE html>
<html>
<body>
<ol type=”A”>
<li>APPLE</li>
<li>GRAPES</li>
<li>MANGO</li>
</ol>
</body>
</html>
Q.19.Write a HTML Program.Design web page that should accept employee_id,
select qualification from choice, address , designation, of a employee
and a submit button
Ans-<!DOCTYPE html>
<html lang="en">

<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>

<input type="submit" value="Submit">


</form>
</body>

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

Q.21. Write a program using HTML with following CSS Specifications


1. To Create a form that should accept empid, empname, age,
department from user
2. Create an UnOrdered list of Departments
3. Write a paragraph with red text color and 13px font-size with right
alignment about the company.
4. A heading on top of the form with Blue as background color with a
different font-style.
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>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="empname">Employee Name:</label>


<input type="text" id="empname" name="empname" 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>

<p>About the company...</p>

<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>

<label for="std">Class 12 Standard:</label>


<input type="text" id="std" name="std" required>

<ol>
<li>Subject 1</li>
<li>Subject 2</li>
<li>Subject 3</li>
</ol>

<p>About the student...</p>

<button type="submit">Submit</button>
</form>
</body>

</html>

Q,23. Write a program using HTML


Design web page that should accept rollno, select standard from choice,
address , age, of a student and
a submit button.
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>
</head>
<body>
<h2>Student Information Form</h2>

<form action="#" method="post">


<label for="rollno">Roll No:</label>
<input type="text" id="rollno" name="rollno" required><br>

<label for="standard">Select Standard:</label>


<select id="standard" name="standard" required>
<option value="1">Standard 1</option>
<option value="2">Standard 2</option>
<!-- Add more options as needed -->
</select><br>

<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>

<input type="submit" value="Submit">


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

Q.24. Write a HTML code using CSS with following specificationsCreate


ordered list of school names in particular city you are living in.
create unordered list of grades using above particular single school 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>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>

You might also like