Scribd
Upload
199 views12 pages

Assignment 1 WT Dinesh Dodeja

The document contains 5 questions regarding HTML and CSS assignments. Question 1 asks to create a static HTML page with frames. Question 2 asks to create a nested ordered list of cars with different styles. Question 3 asks to design a student admission form using HTML and CSS. Question 4 asks to create an external CSS stylesheet to style headings, paragraphs, and text colors. Question 5 asks to create inline CSS and an 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
199 views12 pages

Assignment 1 WT Dinesh Dodeja

The document contains 5 questions regarding HTML and CSS assignments. Question 1 asks to create a static HTML page with frames. Question 2 asks to create a nested ordered list of cars with different styles. Question 3 asks to design a student admission form using HTML and CSS. Question 4 asks to create an external CSS stylesheet to style headings, paragraphs, and text colors. Question 5 asks to create inline CSS and an 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/ 12

Progressive Education Society’s

Modern College of Engineering, Pune


MCA Department
**********************************************************************************
Class: SY-MCA Shift: II Roll Number: 52119

Name: Dinesh Dodeja Assignment No:1 Date of Implementation:17/09/2021

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

Question 1. Create a static HTML page that displays the


following output using frame:

Code –
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>

</head>

<frameset rows ="10%,*">


<frame name ="top" src="home.html" />
<frameset rows = "*">
<frameset cols = "30%,70%">
<frame src="list.html" name="Left" />
<frame src=""name="right" />
</frameset>
<frameset>
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</frameset>
</frameset>

</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>
<title>Assignment 2 Dinesh</title>

<style type="text/css">

.outlist1{

list-style-type: upper-roman;

background-color: pink;

.innerlist{

list-style: arabic-indic;

.outlist2{

list-style-type: upper-roman;

background-color:blue;

.outlist3{

list-style-type: upper-roman;

background-color: red;

</style>

</head>

<body>

<ol>

<li class="outlist1">Compact

<ol class="midlist" type="A">

<li>Two Door

<ol class="innerlist" >

<li>2021 BMW 2 SERIES</li>

<li>2021 Audi A5</li>

<li>2021 Mercedes-Benz C-Class</li>

<li>2021 Audi TT</li>


</ol>

</li>

<li>Four Door

<ol class="innerlist">

<li>TATA TIGOR</li>

<li>FORD ASPIRE</li>

<li>MARUTI SUZUKI DZIRE</li>

<li>Mazda Mazda3</li>

</ol>

</li>

</ol>

</li>

</ol></br>

<ol>

<li class="outlist2">Mid Size

<ol class="midlist" type="A">

<li>Two Door

<ol class="innerlist">

<li>2021 Ford Mustang</li>

<li>2021 Lexus LC</li>

<li>2021 Mercedes-Benz E-Class</li>

<li>2021 Chevrolet Camero</li>

</ol>

</li>

<li>Four Door

<ol class="innerlist">

<li>2021 Mazda Mazda6</li>

<li>2021 Subaru Legacy</li>

<li>2021 Hyundai Sonata</li>


<li>2021 Honda Accord</li>

</ol>

</li>

</ol>

</li></br>

</ol>

<ol>

<li class="outlist3">Sports

<ol class="midlist" type="A">

<li>Coupe

<ol class="innerlist">

<li>Mercedes-Benz AMG-GT</li>

<li>Lamborgini Aventador</li>

<li>Ferrari Roma</li>

<li>Jaguar F-TYPE</li>

<li>Nissan GT-R</li>

</ol>

</li>

<li>Convertible

<ol class="innerlist">

<li>Ferrari Portofono</li>

<li>Porsche 911</li>

<li>Rolls-Royce Dawn</li>

<li>Aston Martin Vantage</li>

<li>Lamborgini Huracan Evo</li>

<li>Mercedes-Benz C-Class</li>

</ol>

</li>

</ol>
</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 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">
<link rel="stylesheet" href="Q4style.css" type="text/css">
<title>Question 4</title>
</head>
<body>
<h1>WELCOME</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum."</p>
</body>
</html>

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