Scribd
Upload
146 views18 pages

WT 1 Assignment

The document contains code for 5 programming assignments: 1) Create an HTML page with frames displaying images. 2) Create a nested ordered list of cars with different styles. 3) Design a student admission form using HTML and CSS. 4) Add external CSS rules to style headings, paragraphs, and text colors. 5) Add inline CSS and internal DTD for a library information page.

Uploaded by

dinesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
146 views18 pages

WT 1 Assignment

The document contains code for 5 programming assignments: 1) Create an HTML page with frames displaying images. 2) Create a nested ordered list of cars with different styles. 3) Design a student admission form using HTML and CSS. 4) Add external CSS rules to style headings, paragraphs, and text colors. 5) Add inline CSS and internal DTD for a library information page.

Uploaded by

dinesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Progressive Education Society’s

Modern College of Engineering, Pune


MCA Department
(310908) PYTHON Laboratory
**********************************************************************************
Class: SY-MCA Shift: II Roll Number: 52133

Name: kshitija chandrashekhar kamble Assignment No:1 Date of


Implementation:13/09/2021

**********************************************************************************

Question 1. Create a static HTML page that displays the


following output using frame:

Code –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--<frameset rows = "20%, 60%, 20%">
<frame name = "top" src =
"C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src =
"C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src =
"C:/Users/dharam/Desktop/col_last.png" />
<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>-->
<iframe src="p.html" height='300px'
width="500px">Hello</iframe>
</body>
</html>
Output –
Question 2. Create an HTML document that describes
nested ordered lists of cars. The outer list must have three
entries: compact, midsize and sports. Inside each of these
lists there must be two sub-lists of body styles. The compact
and midsize car sub-lists are two doors and four doors; the
sports car sublists are coupe and convertible. Each body
style sub-list must have at least three entries, each of which
is the make and model of a particular car that fits the
category. The outer list must use uppercase Roman
numerals, the middle lists must use uppercase letters, and
the inner lists must use Arabic numerals. The background
color for the compact car list must be pink; for the mid-size
car list, it must be blue; for the sports car list, it must be
red. All of the styles must be in a document style sheet.
Code –
<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.outlist1 {
background-color:green;
list-style-type:upper-roman;
}

.outlist2 {
background-color:blue;
list-style-type:upper-roman;
}

.outlist3 {
background-color:red;
list-style-type:upper-roman;
}

.midlist {
list-style-type:upper-alpha;
}
.innerlist {
list-style-type:decimal;
}
</style>

</head>
<body>
<ol>
<li class="outlist1">compact
<ol class="midlist">
<li>two door
<ol class="innerlist">
<li>2005 Toyota Tacoma</li>
<li>2005 Dodge Dakota </li>
<li>2005 Ford F-150</li>
</ol>
</li>
<li>four door
<ol class="innerlist">
<li>2005 Dodge Magnum </li>
<li>2005 Audi A4 </li>
<li>2005 Mercedes-Benz E-Class
</li>
</ol>
</li>
</ol><br />
</li>
<li class="outlist2">midsize
<ol class="midlist">
<li>two door
<ol class="innerlist">
<li>2005 Lincoln LS</li>
<li>2005 Lexus LX 470 </li>
<li>2005 Chrysler Sebring </li>
</ol>
</li>
<li>four door
<ol class="innerlist">
<li>2005 Toyota Sienna </li>
<li>2005 Kia Sedona </li>
<li>2005 Nissan Quest</li>
</ol>
</li>
</ol><br />
</li>
<li class="outlist3">sports
<ol class="midlist">
<li>coupe
<ol class="innerlist">
<li>2005 Chevrolet Corvette </li>
<li>2005 Mercedes-Benz CL-Class
</li>
<li>2005 Mazda RX-8</li>
</ol>
</li>
<li>convertible
<ol class="innerlist">
<li>2005 Mercedes-Benz SL-Class
</li>
<li>2005 BMW 6 Series</li>
<li>2005 Chevrolet Corvette </li>
</ol>
</li>
</ol><br />
</li>
</ol>

</body>
</html>

Output –

Question 3. Design and develop a suitable static web site for


student admission process using HTML and CSS.
Code –
<Html>
<head>
<title>Registration Page</title>
</head>
<script>
function matchPassword()
{
var pw1 =
document.getElementById("pswd1");
var pw2 =
document.getElementById("pswd2");
if(pw1 != pw2)
{
alert("Passwords did not match");
}
else
{
alert("Password created
successfully");
}
}
</script>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>
<h1><u> <center>Student Registration
Form<br></u></h1>
<center><label> Firstname </label>
<input type="text" name="firstname" size="15"/> <br>
<br>
<label> Middlename: </label>
<input type="text" name="middlename" size="15"/>
<br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br>
<br>

<label>
Course :
</label>

<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>

<br>
<br>
<label>
Gender :
</label><br>
<form action="">
<input type="radio" name="gender"
value="male">Male<br>
<input type="radio" name="gender"
value="female">Female<br>
<input type="radio" name="gender"
value="other">Other<br>
<br>
</form>
<label>
Phone :
</label>
<input type="text" name="country code"
value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br>
<br>
Address
<br>
<textarea cols="50" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/>
<br>
<br>
Password:
<input type = "password" name = "pswd1"> <br>
<br>
Re-type password:
<input type = "password" name = "pswd2"> <br>

<button type = "submit"


onclick="matchPassword()">Submit</button><br>
</form>
</body>
</html>
Output –
Question 4. Design external CSS to set the following rules
and link in HTML file.
a. Give Heading
b. Set paragraph with font size 13,
c. Set text color as blue.
d. Set Heading text color as green.
Code –
<html>
<head>
<center><title>My first styled page</title>
<link rel="stylesheet" href="mystyle.css">
</head>

<body>

<h1>NATURAL Environment </h1>

<p>An Environment is everything that is around us, which


includes both living and nonliving things such as soil, water,
animals and plants, which adapt themselves to their
surroundings. It is nature’s gift that helps in nourishing life on
the earth.
The environment plays an important role in the
existence of life on the planet earth. The word Environment
is derived from the French word “Environ” which meaning
“surrounding.” An ecosystem refers to all the living and the
non-living things present in the environment and it is a
foundation of the Biosphere, which determines the health of
the entire planet earth.
Ecology and Environmental science are the branches of
life science, which mainly deal with the study of organisms
and their interactions among organisms and their
environment.
</p>

</body>
</html>

mystyle.css

body
h1 {
color: green;
}
p{
font-size: 14px;
color: blue;
}
Output –
Question 5. Create an inline CSS that changes the font color
of the h1 heading by setting the color property to blue with
center aligned And internal DTD for the Library Information
like Book Name, Author Name, Publication and Year of
Publication.
a. Ensure its validity
b. Then try to break it
Code –
<html>
<head>
<center><title>Library Information</title>
</head>

<body>

<h1 style="color:blue;">Library Information</h1>

<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT information (book name,author
name,publication,year of publication)>
<!ELEMENT book name (#PCDATA)>
<!ELEMENT author name (#PCDATA)>
<!ELEMENT publication (#PCDATA)>
<!ELEMENT year of publication (#PCDATA)>
]>
<information>
<br></br>
<book name>power of habit</book name>
<br></br>
<author name>charles duhigg</author name>
<br></br>
<publication>XYZ</publication>
<br></br>
<year of publication>2012</year of publication>

</information>

</body>
</html>
Output –

You might also like