Assignment 1: TO STUDY HTML, HTML5 & CSS
Set-A
Q1) Create a HTML document to display the following screen.
Ans :
<!DOCTYPE html>
<html lang="en">
<head>
<title>LIST OF INDIAN STATES</title>
</head>
<body>
<p>List of Indian States with their capital</p>
<ol>
<li>Delhi</li>
<ul>
<li>New Delhi</li>
</ul>
<li>Haryana</li>
<ul>
<li>Chandigarh</li>
</ul>
<li>Gujarat</li>
<ul>
<li>Gandhinagar</li>
</ul>
<li>Rajasthan</li>
<ul>
<li>Jaipur</li>
</ul>
<li>Maharashtra</li>
<ul>
<li>Mumbai</li>
</ul>
<li>Uttarpradesh</li>
<ul>
<li>Lucknow</li>
</ul>
</ol>
</body>
</html>
Q 2. Write a HTML code, which generate the following output.
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
</head>
<body>
<center>
<p>List of Books</p>
<table border=1 cellspacing=0 cellpadding=9>
<tr>
<th rowspan="2">Item No</th>
<th rowspan="2">Item Name</th>
<th colspan="2">Price</th>
</tr>
<tr>
<td>Rs.</td>
<td>Paise</td>
</tr>
<tr align="center">
<td>1</td>
<td>Programming in Python </td>
<td>500</td>
<td>50</td>
</tr>
<tr align="center">
<td>2</td>
<td>Programming in Java</td>
<td>345</td>
<td>00</td>
</tr>
</table>
</center>
</body>
</html>
Q3. Write a HTML script to design the following screen
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<style>
body
{
}
.first
{
position: relative;
height:300px;
width:650px;
border: 1px solid black;
position: fixed;
}
.second
{
height:100px;
width:644px;
border: 1px solid black;
margin-top:5px;
margin-left: 5px;
}
.third
{
height:100px;
width:170px;
border: 1px solid black;
margin-left: 5px;
float: left;
}
.fourth
{
float: right;
position: relative;
height: 100px;
width: 471px;
border: 1px solid black;
}
.fifth
{
float: left;
border: 1px solid black;
height: 94px;
width: 648px;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="first">
<div class="second">
<h1>This is a header</h1>
</div>
<div class="third"><p>Look in the box at the right for some
information</p></div>
<div class="fourth"><p>Here is some information</p></div>
<div class="fifth"><h1>This is a footer</h1></div>
</div>
</body>
</html>
Set B
Q 1. Write the HTML code for generating the form as shown below.
Apply the internal CSS to following form change the font size of the
heading to 6pt and change the color to red and also change the
background color yellow
Ans:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Operating System Information</title>
</head>
<body>
<form>
<h3>Operating System Information</h3>
Enter your name
<input type="text" name="uname"><br><br>
Password
<input type="password" name="pwd"><br>
Which of the following Operating System have you used <br>
<input type="checkbox" name="os1" value="Linux"> Linux
<input type="checkbox" name="os2" value="Windows"> Windows 10
<input type="checkbox" name="os3" value="Macintosh"> Macintosh 8.0
<br><br>
Which of the Operating System do you like the best? <br>
<input type="radio" name="best" value="Linux"> Linux
<input type="radio" name="best" value="Windows"> Windows 10
<input type="radio" name="best" value="Macintosh"> Macintosh 8.0
<br><br>
You have completed the form
<input type="submit" value="Sign Up">
</form>
</body>
</html>
Q 2. Write HTML 5 code which generates the following output and
display each element of list in different size, color & font. Use
external CSS to format the list
Ans:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<ul>
<li> Non flowering plants</li>
<ul type="circle">
<li>Fern</li>
<li>Spore</li>
</ul>
<li>Flowering plants</li>
<ul type="square">
<li>Lilly</li>
<li>Rose</li>
<ol>
<li>Red rose</li>
<li>pink rose</li>
</ol>
</ul>
</ul>
</body>
</html>
Q 3. Create HTML5 page with following specifications i) Title should
be about your City. ii) Color the background by Pink color. iii) Place
your city name at the top of page in large text and in blue color. iv)
Add names of the landmarks in your city, each in different color,
style and font v) Add scrolling text about your City. vi) Add any
image at the bottom. (Use inline CSS to format the web page)
Ans:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pune City</title>
</head>
<body style="background-color:pink; margin:0; font-family:Arial, sans-serif;">
<!-- City Name -->
<h1 style="color:blue; text-align:center; font-size:40px; margin-top:20px;">
PUNE
</h1>
<!-- Landmarks -->
<ul style="list-style:none; padding:20px;">
<li style="color:green; font-family:'Georgia', serif; font-
size:20px;">Shaniwar Wada</li>
<li style="color:purple; font-family:'Courier New', monospace; font-
size:20px;">Aga Khan Palace</li>
<li style="color:red; font-family:'Verdana', sans-serif; font-
size:20px;">Sinhagad Fort</li>
<li style="color:brown; font-family:'Lucida Handwriting', cursive; font-
size:20px;">Pataleshwar Caves</li>
</ul>
<!-- Scrolling text -->
<marquee style="color:darkblue; font-size:22px; font-weight:bold;">
Welcome to Pune - The Cultural Capital of Maharashtra!
</marquee>
<!-- Image at bottom -->
<div style="text-align:center; margin:20px;">
<img
src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Shaniwar_Wada_Pune.jp
g"
alt="Shaniwar Wada Pune"
style="width:70%; max-width:600px; border:3px solid black;">
</div>
</body>
</html>
