Malad (W) | Bhayandar (W) | Vile Parle (E) | Vile Parle (W) | Poisar-Kandivali (E)
Important HTML Programs:
1) Write HTML5 code with CSS as follows:
a) Create ordered list with names of tourist cities.
b) Create unordered list with tourist places of those cities.
c) 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>
<ol>
<li>Paris</li>
<li>Lon</li>
<li>lndia</li>
<li>Singpore</li>
</ol>
<ul>
<li>Eiffel</li>
<li>Big Ben</li>
<li >TajMahal</li>
<li>Singapore Zoo</li>
</ul>
</body>
</html>
2) Write a program using html with following CSS specifications.
a) To create a form that should accept name, contact number of office (compulsory), month, number
of years completed (between 1-30) from the user.
b) Create submit button to send the data and reset button to reload the page.
c) The heading of the 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>
Malad (W) | Bhayandar (W) | Vile Parle (E) | Vile Parle (W) | Poisar-Kandivali (E)
<hl align="center">Office Details</h1>
Enter your name
<input type="text" name="nm"><br><br>
Office Contact number
<input type="tel" pattern="[0-9] [3]-[0-9] (4)-[0-9] (4)" required><br><br>
Select month
<input type="month"><br><br>
Year of Service
<input type="number" name="yos" min="1" max="30"><br><br> <input type="submit" name="btn"
value="Submit">
<input type="reset" name="rs">
</form>
</body>
</html>
3)Write HTML program with following CSS specification:
a) The background color of the College name should be in red color.
b) The text color of the College name should be yellow color.
c) The description of the college should be paragraph with right align.
Ans:
<!DOCTYPE html>
<html>
<head>
<title>
College Information
</title>
<style>
H1{background-color:red;color:yellow}
P{text-align:right}
</style
</head>
<body>
<h1 align="center>RKT College</h1>
<p>
Our mission is to educate, enlighten and empower students in general and girls in particular thereby
developing their
mental, physical and emotional dimensions in order to create better citizens and society. To this end we
endeavor to
mobilize the available resources which are necessary for higher education and add to the existing one.
</p>
</body>
</html>
4) Design a web page that should accept name of the user, Select Photo file for upload, Color picker
tool, Website URL,
Search box and submit button.
Ans:
<!DOCTYPE html>
<html>
<head>
<title>
Form elements
</title>
Malad (W) | Bhayandar (W) | Vile Parle (E) | Vile Parle (W) | Poisar-Kandivali (E)
</head>
<body>
<form name="f1">
Enter your name
<input type="text" name="t1" autocomplete="on"><br><br>
Select File to upload
<input type="file" name="newfile"><br><br>
Pick your favourite Color
<input type="color" name="color"><br><br> Enter your Webiste URL
<input type="url" name="website" placeholder="[Link]
Search here
<input type="search" name="s"><br><br> <input type="submit" name="b1" value="Search">
</form>
</body>
</html>
5) Write html code to display a text World is Beautiful having font size 35, spacing between the letters
using CSS.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 style="font-size: 35px; letter-spacing: 5px">World is Beautiful</h1>
</body>
</html>
6) 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
<html> <head>
<title>
Titan FastTrack
</title>
<style>
H1{background-color:[Link]:red;font
family:Comic Sans MS}
p(color:blue] </style>
</head>
<body>
<h1align="center">Titan FastTrack</h1>
<p>
Fastrack is a fashion accessory retail brand in India. The company was launched in 1998 as a sub-brand
of Titan Watches. In
2005, Fastrack was spun off as an independent brand targeting the urban youth and growing fashion
industry in India.
Fastrack began opening retail stores throughout the country.
</p>
</body>
</html>
Malad (W) | Bhayandar (W) | Vile Parle (E) | Vile Parle (W) | Poisar-Kandivali (E)
7) Write a program using html with following CSS specifications:
(a) The background color of the College name should be in red color.
(b) The text color of the College name should be yellow color.
(c) The description of the college should be paragraph with right align.
Ans:
Coding:
<!DOCTYPE html>
<html>
<head>
<title>
College Information
</title>
<style>
H1{background-color:red;color:yellow}
P{text-align:right} </style>
</head>
<body>
<h1 align="center">RKT College</h1>
<p>
Our mission is to educate, enlighten and empower students in general and girls in particular thereby
developing their mental, physical and emotional dimensions in order to create better citizens and
society. To this end we endeavor to mobilize the available" resources which are necessary for higher
education and add to the existing one.
</p> </body>
</html>
8) Write a program using html with following CSS specifications:
(a) The page should contain heading as XII IT in blue color
(b) Create Unordered List of topics in IT
(c) Change the font to comic Sans
Ans. :
<!DOCTYPE html>
<html>
<head>
<title>
XII Science IT
</title>
<style>
h1{color:blue)
ul{font-family:Comic Sans MS)
</style>
</head>
<body>
<h1 align="center">XIITh Science IT</h1>
<ul>
<li>Advanced Web Designing</li>
<li>Introduction to SEO</li>
<li>Advanced JavaScript</li>
<li>Emerging Technologies</li> <li>Server-side Scripting</li>
<li>E-Commerce and E-governance</li>
</ul>
</body>
</html>
Malad (W) | Bhayandar (W) | Vile Parle (E) | Vile Parle (W) | Poisar-Kandivali (E)
9) Write a program using html to create inline frame. It should contain image.
Ans:
<html>
<body>
<iframe src="C:\Users\Public Pictures\Sample Pictures\[Link]"
width="400" height="250"
name="img"> </body>
</html>
10) Design a web page that should accept name of the user, Email ID, 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" name="t1" autocomplete="off"><br><br>
Enter your Email ID
<input type="email" name="emailid"><br><br>
Number of Years completed (1-50)
<input type="number" min="1" max="50"><br><br> Office Contact Number(in format of xx-
xxxxxxxxxxxxx)
<input type="tel" name="contact" pattern="[0-9] [2]-[0-9] [10)"
required><br><br>
<input type="image" src="E:\XII SCI IT 2020-21\html codes\[Link]"
alt="Submit" width="100" height="100">
</form>
</body>
</html>