Archana S.
Hanjankar
[Link], Churchgate, Mumbai -20
1) 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. (Textbook)
<!DOCTYPE html>
<html>
<head><title>College Profile</title>
<style>
H1{background-color:red; color:yellow}
P{text-align:right}
</style>
</head>
<body>
<H1>[Link]</H1>
<p> It was founded in the year 1960. It is situated in Central Suburbs. There
are around 3000 students taking admission in different courses offered by the
college.
</p>
</body>
</html>
Write a program to 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.
<!DOCTYPE html>
<html>
<head><title>Form</title> </head>
<body bgcolor=yellow>
<form>
<H1>Personal Details</H1>
User Name : <input type=”text” name=”t1”><br><br>
Email ID : <input type=”email” name=”em”><br><br>
Number of years completed in office : <input type = “number” name = “yrs”>
<br><br>
Office phone number : <input type=”tel” name=”phone” pattern=”[0-9]{2}-[0-9]
{10}” required><br><br>
<input type="image" src="[Link]" alt="click here to submit" >
</form>
</body>
</html>
Write a program using with following CSS specifications :-
To create a form that should accept name, number of present students (compulsory) ,
time and file to upload from the user.
Create a Submit button to send the data.
The Heading of the form should have border with blank spaces around the contents
<!DOCTYPE html>
<html>
<head>
<title>Form </title>
<style>
H1{border:solid; padding:20px;background-color: yellow;width:20%}
</style>
</head>
<body>
<H1>Student Details</H1>
Name of the Student :<input type =text name=t1> <br><br>
Number of Present Students : <input type=number name = pre required> <br><br>
Reporting Time : <input type=time name=tm> <br><br>
Upload File : <input type=file name=f1> <br><br>
<input type = submit name=sub value=Submit>
</form>
</body>
</html>
Write HTML 5 Code with CSS as follows : (Textbook)
To create form to accept name, age, Email address from the user.
Create a Submit button to send the data.
The heading of the form should have a background colour and a different font style
<!DOCTYPE html>
<html>
<head>
<title>Form </title>
<style>
H1{background-color:yellow;font-style:italic}
</style>
</head>
<body>
<H1>Personal Details</H1>
Name:<input type =text name=t1> <br><br>
Age : <input type=number name = n1> <br><br>
Email Address : <input type=email name=em> <br><br>
<input type = submit name=sub value=Submit>
</form>
</body>
</html>
Design a web page that should accept Personal Details of the user i.e.
name of the user along with today’s date and time values. The Page
must contain Submit button.
<!DOCTYPE html>
<html>
<head><title>Form </title>
<head>
<body>
<form>
<H1> Personal Details </H1>
User Name : <input type =text name=t1> <br><br>
Date : <input type = date name=dt><br><br>
Time : <input type=time name=tm><br><br>
<input type = Submit value=Submit name=Sub>
</form>
</body>
</html>
Design a web page that should accept name of the user, select file for
upload, color picker tool, website URL, search and Submit button.
<!DOCTYPE html>
<html>
<head><title>Form</title> </head>
<body bgcolor=yellow>
<form>
<H1>Personal Information</H1>
User Name : <input type=”text” name=”t1”><br><br>
Select favourite color : <input type=color name=”cl”><br><br>
Company website address : <input type = “url” name = “ul”> <br><br>
Search from the website : <input type=”search” name=”srh” ><br><br>
<input type = Submit value=Submit name=Sub>
</form>
</body>
</html>
Write a program using with following CSS specifications :-
To create a form that should accept name, age, date of appointment from the user.
Create a Submit button to send the data.
The Heading of the form should have orange background color with different font style
<!DOCTYPE html>
<html>
<head>
<title>Form </title>
<style>
H1{ background-color: orange;font-family:arial}
</style>
</head>
<body>
<H1>Employee Details</H1>
Name :<input type =text name=t1> <br><br>
Age : <input type=number name=n1><br><br>
Date of Appointment: <input type=date name = doj> <br><br>
<input type = submit name=sub value=Submit>
</form>
</body>
</html>
Write HTML 5 Code with CSS as follows :
To create form to accept name, mobile number of the employee, number of years completed
(between 1 – 30) from the user.
Create a Submit button to send the data and refresh button to reload the page.
The heading of the form should have a border, text color should be red.
<!DOCTYPE html>
<html>
<head>
<title>Form </title>
<style>
H1{color:red;border:solid}
</style>
</head>
<body>
<H1>Employees Details</H1>
Name of the employee:<input type =text name=t1> <br><br>
Number of years completed : <input type=number name = yrs min=1 max=30 required> <br><br>
<input type = submit value=Submit name=sub>
<input type=reset value =Clear name=res>
</form>
</body>
</html>
Write a HTML code with following CSS specification:
The page should contain heading as XII I.T in blue color.
Create Unordered List of topics in I.T Change the font to Comic Sans.
<!DOCTYPE html>
<Html>
<head>
<title>standard 12th
</title>
<style>
h1{color:blue;}
ul{font-family:"Comic Sans MS"}
</style>
</head>
</body>
<h1 align="center">XII I.T </h1>
<ul>
<li>Advanced Web Designing </li>
<li> Digital marketing </li>
<li> Computerised Accounting with GST</li>
<li> E-Commerce and E-Governance</li>
<li> Database Concepts using LibeOffice Base</li>
<li> Enterprise Resource Planning (ERP)</li>
</ul>
</body>
</html>
Design a Employee Details form that should accept name of the
employee, department name, age , email id , Submit button.
<!DOCTYPE html>
<html>
<head><title>Form</title> </head>
<body bgcolor=yellow>
<form>
<H1>Employee Details</H1>
Employee Name : <input type=”text” name=”t1”><br><br>
Department : <input type=text name=”t2”><br><br>
Age : <input type = “number” name = “ag”> <br><br>
Email id : <input type=”email” name=”em” ><br><br>
<input type = Submit value=Submit name=Sub>
</form>
</body>
</html>
Write a program using with following CSS specifications :-
To create a form that should accept name, age, email address from the user.
Create a Submit button to send the data.
The Heading of the form should have red font color with underline effect in CSS.
<!DOCTYPE html>
<html>
<head>
<title>Form </title>
<style>
H1{color:red; text-decoration:underline}
</style>
</head>
<body>
<H1>Personal Information Form</H1>
Name :<input type =text name=t1> <br><br>
Age : <input type=number name=n1><br><br>
Email id: <input type=email name = em> <br><br>
<input type = submit name=sub value=Submit>
</form>
</body>
</html>
Write HTML 5 Code with CSS as follows :
Create ordered list with names of tourist cities. Create unordered list with tourist places of those
[Link] the list into two sections left and right by using CSS. (Textbook)
<!DOCTYPE html>
<html>
<head>
<title> Country </title>
<style>
ol{float:left}
ul{float:right}
</style>
</head>
<body>
<ol>
<li>Agra</li>
<li>Bangalore</li>
<li>Hyderabad</li>
<li>Delhi</li>
</ol>
<ul>
<li> Taj Mahal</li>
<li> Botanical Garden</li>
<li> Ramoji City</li>
<li>Red Fort </li>
</ul>
</body></html>
Write a HTML5 code with CSS as follows :
To create form to accept name, age, email address from the user.
Create a Submit button to send the data.
The heading of the form should have border, background color and padding around the
heading.
<!DOCTYPE html>
<html>
<head>
<title>Form </title>
<style>
H1{ background-color: yellow; border:solid; padding:30px}
</style>
</head>
<body>
<H1>Personal Details</H1>
Name :<input type =text name=t1> <br><br>
Age : <input type=number name=n1><br><br>
Email Address : <input type=email name = em> <br><br>
<input type = submit name=sub value=Submit>
</form>
</body>
</html>
Design a web page that should accept name of the user, select file for
upload, color picker tool, website URL, search and Submit button.
<!DOCTYPE html>
<html>
<head><title>Form</title> </head>
<body bgcolor=yellow>
<form>
<H1>Registration form</H1>
User Name : <input type=”text” name=”t1”><br><br>
Select file to upload: <input type=color name=”c1”><br><br>
Enter website URL : <input type = “url” name = “u1”> <br><br>
Search : <input type=”search” name=”se” ><br><br>
<input type = Submit value=Submit name=Sub>
</form>
</body>
</html>
Design a web page that should accept name of the user, Email ID, Number of
years completed in office, office phone number(compulsory), image as a
Submit button.
<!DOCTYPE html>
<html>
<head>
<title>Form </title>
</head>
<body>
<H1>Personal Information Form</H1>
Name :<input type =text name=t1> <br><br>
Email id: <input type=email name = em> <br><br>
Number of years completed : <input type=number name=n1><br><br>
Phone number : <input type=tel name = t2 pattern =”[0-9]{3}-[0-9]{8}”><br><br>
<input type = image src=”[Link]” height=50 width=50 alt=Submit>
</form>
</body>
</html>
Write HTML 5 Code with following CSS specifications :
The page should contain heading as Digital Marketing with red color.
Create unordered list of topics.
Change the font to Arial.
<!DOCTYPE html>
<Html>
<head>
<title>Digital marketing</title>
<style>
h1{color:red;}
ul{font-family:"Arial"}
</style>
</head>
</body>
<h1 align="center">Digital Marketing </h1>
<ul>
<li>Meaning of Digital Marketing </li>
<li>Concept of Search engine </li>
<li> Organic and paid search</li>
<li> Categories of SEO</li>
</ul>
</body>
</html>