Assignment 1: TO STUDY HTML, HTML5 & CSS
Set-A
Q1) Create a HTML document to display the following screen.
<!-- Set A Q. 1 -->
<!Doctype HTML>
<html>
<head>
<title> Lists in HTML </title>
</head>
<body>
<h4> List Of Indian States With Their Capitals </h4>
<ol>
<li> Delhi </li>
<ul type="circle">
<li> NewDelhi </li>
</ul>
<li>Haryana</li>
<ul type="circle">
<li> Chandigarh </li>
</ul>
<li>Gujrat</li>
<ul type="circle" >
<li>GadhiNagar </li>
</ul>
<li>Rajasthan</li>
<ul type ="circle" >
<li> Jaipur </li>
</ul>
<li>Maharashtra </li>
<ul type ="circle" >
<li> Mumbai </li>
</ul>
<li>UttarPradesh</li>
<ul type="circle" >
<li> Lucknow </li>
</ul>
</ol>
</body>
</html>
Q 2. Write a HTML code, which generate the following output
<!-- Set A Q.2 -->
<!Doctype HTML>
<html>
<head>
<title> Table </title>
</head>
<body>
<h4><center>List Of Books</center></h4>
<table border= 2>
<tr>
<th align="center" rowspan="2"> Item No. </th>
<th align="center" rowspan="2"> Item Name </th>
<th align="center" colspan ="2"> Price </th>
</tr>
<tr>
<th align ="center" > Rs </th>
<th align="center" > Paise </th>
</tr>
<tr>
<td> 1.</td>
<td> Programming in Python </td>
<td > 500 </td>
<td> 50 </td>
</tr>
<tr>
<td > 2.</td>
<td>Programming in Java </td>
<td> 345</td>
<td> 00 </td>
</tr>
</table>
</body>
</html>
Q3. Write a HTML script to design the following screen
<!Doctype html>
<html>
<head>
<title>THIS IS A FRAMESET PROGRAM </title>
</head>
<frameset rows = " 20%, 60%, 20%">
<frame src = "frame1.html"></frame>
<frameset cols = "40%, 60%">
<frame src = "frame2.html"></frame>
<frame src = "frame3.html"></frame>
</frameset>
<frame src = "frame4.html"></frame>
</frameset>
</html>
frame1.html:-
<!Doctype html>
<html>
<head>
<title> This is Frame1 </title>
</head>
<body>
<h1> This is a Heading</h1>
</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
<!-- SET B Q.1 -->
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> LOGIN FORM </TITLE>
<STYLE>
BODY {
WIDTH : 15;
}
FORM{
BACKGROUND-COLOR: yellow;
BORDER : 2PX DASHED BLACK;
}
H2{
COLOR : red;
FONT-SIZE : 15 PT;
}
</STYLE>
</HEAD>
<BODY >
<FORM>
<CENTER>
<H2>OPERATING SYSTEM INFORMATION </H2> <BR> <BR> <BR>
Enter Your Name : <INPUT TYPE ="TEXT" > <BR> <BR>
Password : <INPUT TYPE="PASSWORD"> <BR><BR> <BR> <BR>
Which of the following Operating System have you used <BR> <BR> <BR>
<INPUT TYPE ="CHECKBOX" > Linux
<INPUT TYPE="CHECKBOX"> Windows 10
<INPUT TYPE="CHECKBOX"> Macintosh 8.0 <BR> <BR> <BR>
Which of the Operating System do you like the most ? <BR> <BR> <BR>
<INPUT TYPE="RADIO" NAME = "OS" > Linux
<INPUT TYPE="RADIO" NAME = "OS" > Windows 10
<INPUT TYPE="RADIO" NAME="OS" > Macintosh 8.0 <BR> <BR> <BR> <BR>
You Have a Complete the Form <br> <br> <INPUT TYPE="SUBMIT" VALUE="Sign UP">
</CENTER>
</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
<!-- Set B Q.2 -->
<!Doctype HTML>
<html>
<head>
<title> Assignment 1 Set B Q.2 </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li id="a"> Non Flowering Plants </li>
<ul type = "circle">
<li id="c"> Fern </li>
<li> Spore </li>
</ul>
<li id="b"> Flowering Plants </li>
<ul type = "square">
<li id="d"> Lily </li>
<li> Rose </li>
</ul>
<ol>
<dd><li> Red Rose </li></dd>
<dd><li>Pink Rose </li></dd>
</ol>
</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)
<!Doctype html>
<html>
<head>
<title> Nashik </title>
</head>
<body style="background:pink;">
<h1 style = " color:blue; text-align: center; text-decoration:underline;"> NASHIK</h1>
<ul type = "square">
<li style= "color:yellow; font-size: 30px" >KalaRam Temple </li>
<li style= "font-size: 20px; color:blue"> Panchavati </li>
<li style="color:green; font-size:35px"> Dwaraka </li>
<li style="color:red; font-size:10px"> Godavari </li>
</ul>
<marquee style="width: 250px; direction: down; margin-left: 100px;" >Nashik is a beautiful city </marquee> <br> <br>
<img style="align-self:center; margin-left: 250px;" src="nashik.jpg"; alt="Nashik_Goda_ghat"; height="400px">
</body>
</html>
Set C.
Q 1. Design HTML 5 Page Using CSS which display the following Box
( use Box Model Property in CSS)
<html>
<head>
<title>box </title>
<style>
div
{
background-color:yellow;
border:2px solid black;
height : 60%;
width : 60%;
margin-left : 250px;
margin-top: 100px;
}
#a
{
background-color:brown;
border:2px solid black;
height : 70%;
width : 70%;
margin-top : 60px;
margin-left : 110px;
}
#b{
background-color:white;
border:2px solid black;
height : 90px;
width : 510px;
margin-bottom : 100px;
margin-left : 30px;
margin-top : 10px;
}
#c{
font-size : 30px;
text-align: center;
font-weight: bold;
}
#d{
background-color:white;
border:2px solid black;
height : 90px;
width : 510px;
margin-bottom : 100px;
margin-left : 30px;
margin-top : -50px;
}
#e{
font-size : 30px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<h2 style="margin-left:500px; margin-top: 30px;">CSS Box Model Property</h2>
<div>
<div id="a">
<div id="b">
<p id="c"> T.Y.B.Sc(Comp.Sci)</p>
</div>
<div id="d">
<p id="e"> Academic Year 2022-23</p>
</div>
</div>
</div>
</body>
</html>
Q 2) Design HTML 5 Page Using CSS Which Display the following Navigation Bar
<!-- nav bar-->
<!DOCTYPE html>
<html>
<head>
<style>
nav {
display: flex;
flex-wrap: wrap;
}
nav a {
text-decoration: none;
display: block;
padding: 15px 25px;
text-align: center;
background-color: rgb(189, 185, 185);
color: #464141;
margin: 0;
font-family: sans-serif;
}
nav a:hover {
background-color: Black;
color:blue;
}
</style>
</head>
<body>
<h1>Example of the HTML nav tag:</h1>
<nav>
<a href="#">Home</a>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JAVA</a>
<a href="#">Python</a>
</nav>
</body>
</html>
No comments:
Post a Comment