Scribd
Upload
3 views

HTML Programs with Solution

The document provides a series of HTML program examples, each demonstrating how to create various forms, lists, and styled text using HTML and CSS. Each example includes a problem statement followed by a complete HTML solution. The programs cover topics such as form creation, lists, inline frames, and styling with CSS.

Uploaded by

shauryareddy482
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML Programs with Solution

The document provides a series of HTML program examples, each demonstrating how to create various forms, lists, and styled text using HTML and CSS. Each example includes a problem statement followed by a complete HTML solution. The programs cover topics such as form creation, lists, inline frames, and styling with CSS.

Uploaded by

shauryareddy482
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

HTML Programs with Solution:-

1) Write html program to design a form which accept the username and password.
Also displays submit and reset buttons.

Solution:
<html>
<head>
<title>Form Design</title>
</head>
<body>
<h1 align="center">Login Form</h1>
<form>
Enter the Username:- <input type="text" name="t1" size="30"><br><br>
Enter the Password:- <input type="password" name="t2" size="30"><br><br>
<input type="submit" name="b1" value="Submit">
<input type="reset" name="b2" value="Reset">
</form>
</body>
</html>

2) Write a html program to accept name of the hospital, email-id of hospital, number
of beds in hospital. Displays submit and reset buttons on form.

Solution:-
<html>
<head>
<title>Hospital Details</title>
</head>
<body>
<h1 align="center">Hospital Details</h1>
<form>
Name of the Hospital:- <input type="text" name="t1"><br><br>
Email-id of Hospital:- <input type="text" name="t2"><br><br>
Number of beds in Hospital:- <input type="text" name="t3"><br><br>
Address of Hospital:-<textarea name = "t4" rows="4" cols=
"30"></textarea><br><br>
<input type="submit" name="b1" value="Submit">
<input type="reset" name="b2" value="Reset">
</form>
</body>
</html>

3) Write a html program to create a form to accept student roll no (in number format),
Unit test marks (max - 25 marks), Terminal exam marks (max - 50 marks). Include
the name of the subject teacher and display submit button.

Solution:-

<html>
<head>
<title>Student Details</title>
</head>
<body>
<h1 align="center">Student Details</h1>
<form name = "f1">
Name of the Student:- <input type="text" name="t1"><br><br>
Roll No of Student:- <input type="number" name="t2"><br><br>
Unit Test Marks of Student:-<input type="number" name="t3" max="25"><br><br>
Terminal Marks of Student:-<input type="number" name="t4" max="50"><br><br>
Name of the Subject Teacher:-<input type="text" name="t5"><br><br>
<input type="submit" name="b1" value="Submit">
</form>
</body>
</html>

4) Write a html program to create Registration Form to accept name, mobile no., birth
date. The form should have ‘register’ caption on the button to submit the data.

Solution:-

<html>
<head>
<title>Registration Details</title>
</head>
<body>
<h1 align="center">Registration Details</h1>
<form name="f1">
Enter the Name:-<input type="text" name="t1"><br><br>
Enter the Mobile Number:-<input type="tel" name="t2" pattern="[0-
9]{10}"><br><br>
Enter Date of Birth:-<input type="date" name="t3"><br><br>
<input type="submit" name="b1" value="Register">
</form>
</body>
</html>

5) Write a html program to create a form to accept Student name, number of practical
he/she has completed and provide a facility to upload completion certificate.
Display submit and reset button.

Solution:-

<html>
<head>
<title>Student Details</title>
</head>
<body>
<h1 align="center">Student Details</h1>
<form name="f1">
Enter the Name of Student:-<input type="text" name="t1" required><br><br>
Enter the Number of completed practicals:-
<input type="number" name="t2" required><br><br>
Upload the completion Certificate:-
<input type="file" name="t3" required><br><br>
<input type="submit" name="b1" value="Submit">
<input type="reset" name="b1" value="Reset">
</form>
</body>
</html>

6) Write a html program to create an ordered list having names of 2 friends. Add
unordered list of their hobbies under each name.

Solution:-

<html>
<head>
<title>Friends and their Hobbies</title>
</head>
<body>
<h1 align = "center">Friends and their Hobbies</h1>
<ol>
<li>Neha</li>
<ul>
<li>Dancing</li>
<li>Reading Books</li>
</ul>
<li>Pooja</li>
<ul>
<li>Swimming</li>
<li>Sketching</li>
</ul>
</ol>
</body>
</html>

7) Write a html program to create an ordered list of 3 languages used for speaking and
unordered list having 3 computer languages.

Solution:-

<html>
<head>
<title>Computer language and Speaking language</title>
</head>
<body>
<h1 align = "center">Computer language and Speaking language</h1>
<h2>Language used for Speaking</h2>
<ol type="A">
<li>English</li>
<li>Marathi</li>
<li>Hindi</li>
</ol>
<h2>Computer Language</h2>
<ul>
<li>Python</li>
<li>PHP</li>
<li>C++</li>
</ul>
</body>
</html>

8) Write a html code to display a list of 4 student names having roman “i” to “iv”
numbering in reverse order using relevant tags.

Solution:-

<html>
<head>
<title>Ordered List with roman numbers</title>
</head>
<body>
<h1 align = "center">Ordered List with roman numbers</h1>
<ol type="i" reversed>
<li>Ajay</li>
<li>Viraj</li>
<li>Neha</li>
<li>Pooja</li>
</ol>
</body>
</html>

9) Write a html program to display a ordered list of any 3 scientist names having
alphabetical numbering and display their inventions in unordered list under the
scientist name.

Solution:-

<html>
<head>
<title>Scientist Names and their Inventions</title>
</head>
<body>
<h1 align = "center">Scientist Names and their Inventions</h1>
<ol type="A">
<li>Nikola Tesla</li>
<ul>
<li>A.C. motorcar</li>
</ul><br><br>
<li>Right Brothers</li>
<ul>
<li>Aircraft</li>
</ul><br><br>
<li>Charles Babbage</li>
<ul>
<li>Computer</li>
</ul><br><br>
</ol>
</body>
</html>

10) Write a html program to display names of streams of college (Science, Arts and
Commerce) in ordered list and also displays course like B.Sc., M.Sc., B.Com, M.Com,
B.A. and M.A. under the stream name in unordered list.

Solution:-

<html>
<head>
<title>College Details</title>
</head>
<body>
<h1 align = "center">College and Stream Details</h1>
<ol>
<li>Science Stream</li>
<ul>
<li>B.Sc.</li>
<li>M.Sc.</li>
</ul>
<li>Commerce Stream</li>
<ul>
<li>B.Com.</li>
<li>M.Com.</li>
</ul>
<li>Arts Stream</li>
<ul>
<li>B.A.</li>
<li>M.A.</li>
</ul>
</ol>
</body>
</html>

11) Write a html program to create an ordered list of Tea, Coffee and Milk and add
unordered list under milk as Turmeric Milk and plain Milk.

Solution:-

<html>
<head>
<title>Ordered List</title>
</head>
<body>
<h1 align = "center">Ordered List and Unordred List</h1>
<ol type = "I">
<li>Tea</li>
<li>Coffee</li>
<li>Milk</li>
<ul style = "list-style-type:disc">
<li>Turmeric Milk</li>
<li>Plain Milk</li>
</ul>
</ol>
</body>
</html>

12) Write a html program to display heading as ”E-commerce” with underline and
center alignment as well as with solid border using internal CSS. Display the related
text to the given topic in red color with yellow background color.

Solution:-

<html>
<head>
<title>E-commerce</title>
<style>
h1{text-decoration:underline;text-align:center;border:solid}
p{color:red;background-color:yellow;font-size:20px}
</style>
</head>
<body>
<h1>E-commerce</h1>
<p>Electronic commerce allows the customer to choose a product or services
of their choice from any vendor at anytime at anywhere in the world through
internet.</br>
customers can buy product or service without moving anywhere.</p>
</body>
</html>

13) Write a html program to display “Digital World” with yellow color having underline,
in times new roman font with background color green using internal CSS. Add an
ordered list of having any two sentences of it with red color.

Solution:-

<html>
<head>
<title>Digital World</title>
<style>
h1{color:yellow;background-color:green;text-decoration:underline;
font-family:times new roman}
ol{color:red;font-size:20px}
</style>
</head>
<body>
<h1>Digital World</h1>
<ol>
<li>It provides a infrastructure as a utility to each citizen.</li>
<li>High Speed internet will be made available on just one click.</li>
</ol>
</body>
</html>

14) Write a html program to display heading as ”Maharashtra State Board” in font size
50 px using internal CSS. Add paragraph of two sentences related to I.T. subjects.
Give background color yellow for the added text.

Solution:-

<html>
<head>
<title>Maharashtra State Board</title>
<style>
h1{font-size:50px;text-align:center;color:green}
p{background-color:yellow;font-size:20px}
body{background-color:skyblue}
</style>
</head>
<body>
<h1>Maharashtra State Board</h1>
<p>Information Technology is the use of any computers, networking
and other physical devices, infrastructure to create, collect, store the
all forms of data.</p>
</body>
</html>

15) Write a html program to display “Digital India” in Verdana font using Internal CSS.
Add any two sentences about Digital India in orange color.

Solution:-

<html>
<head>
<title>Digital India</title>
<style>
h1{font-family:vardana;text-align:center}
p{color:orange;font-size:20px}
</style>
</head>
<body>
<h1>Digital India</h1>
<p>It allows access to public center within their locality will be made easy.<br>
It shares private space on a public cloud.</p>
</body>
</html>

16) Write a html program to insert Inline Frame on web page. Use xyz.html file as a
source for inline frame and size of inline frame should be 300*300 pixels.

Solution:-

<html>
<head>
<title> Inline Frame</title>
</head>
<body>
<h1 align = "center">Inline Frame</h1>
<iframe src = "xyz.html" width = "300" height = "300">
</iframe>
</body>
</html>
xyz.html
<html>
<head>
<title>Inline Frames</title>
</head>
<body>
<p>This is an example of inline frame. It is used in online advertising.
It is created by using "iframe" tag.</p>
</body>
</html>

17) Write html program to create unordered list of topics in IT with the heading as “XII
I.T.”. Use “comic sans ms” as a font.

Solution:-

<html>
<head>
<title>XII Science I.T.</title>
<style>
h1{color:blue}
ul{font-family:comic sans ms}
</style>
</head>
<body>
<h1 align = "center">XII Science I.T.</h1>
<ul>
<li>Advanced Web Designing</li>
<li>Introduction of SEO</li>
<li>Advanced JavaScript</li>
<li>Emerging Technology</li>
<li>Server-side Scripting</li>
<li>E-commerce and E-Governance</li>
</ul>
</body>
</html>

18) Write a html program to create a list of 4 flowers in ordered list and list of 4 fruits in
unordered list.

Solution:-

<html>
<head>
<title>Flowers and Fruits List</title>
</head>
<body>
<h1 align = "center">Flowers and Fruits List</h1>
<h2>Flowers List</h2>
<ol type="A">
<li>Lotus</li>
<li>Sunflowers</li>
<li>Rose</li>
<li>Tulip</li>
<li>Lily</li>
</ol><br><br>
<h2>Fruits List</h2>
<ul>
<li>Apple</li>
<li>Grapes</li>
<li>Pine-apple</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</body>
</html>

19) Write a html program to display “Information Technology” in bold and calibri font
using inline CSS. Add any two sentences about “IT” subject in orange color with
20px.
Solution:-

<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<h1 style="font-family:calibri;font-weight:bold;text-align:center">
Information Technology</h1>
<p style="color:orange;font-size:20px">Information Technology is the use of any
computers, networking
and other physical devices, infrastructure to create, collect, store the
all forms of data.</p>
</body>
</html>

20) Write a html program to display list of two subjects in unordered list and add any
two chapter names under each subject in ordered list.

Solution:-

<html>
<head>
<title>Subject And Chapter Details</title>
</head>
<body>
<h1 align = "center">Subject And Chapter Details</h1>
<ul>
<li>Information Technology</li>
<ol>
<li>Advanced Web Designing</li>
<li>Advanced Javascript</li>
</ol><br><br>
<li>Computer Science</li>
<ol>
<li>Logic Gates</li>
<li>Program Analysis</li>
</ol>
</ul>
</body>
</html>

You might also like