Scribd
Upload
93 views14 pages

Course Code: MCSL-016 Course Title: Internet Concepts and Web Design (Lab Course) Assignment Number: MCA (1) /016/assign/2020

The document contains code for creating 4 web pages for a university website - Home, Programme List, Registration, and Important Dates. Each page would have a header, options menu, and content section. The Home page would display welcome text, objectives, and strengths. The Programme List page would show programs in a table with details. The Registration page would have a form to fill. The Important Dates page would list admission dates in an unordered list.

Uploaded by

Jugmendra Singh Dalal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
93 views14 pages

Course Code: MCSL-016 Course Title: Internet Concepts and Web Design (Lab Course) Assignment Number: MCA (1) /016/assign/2020

The document contains code for creating 4 web pages for a university website - Home, Programme List, Registration, and Important Dates. Each page would have a header, options menu, and content section. The Home page would display welcome text, objectives, and strengths. The Programme List page would show programs in a table with details. The Registration page would have a form to fill. The Important Dates page would list admission dates in an unordered list.

Uploaded by

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

• Facebook-https://www.facebook.com/dalal.

tech
• telegram - https://t.me/DalalTechnologies
• YouTube-https://www.youtube.com/channel/UCilEr1rW-SIrJlJ5_ioKQfw

Course Code : MCSL-016


Course Title : Internet Concepts and Web Design (Lab Course)
Assignment Number : MCA(1)/016/Assign/2020

Q1. A University offers its programmes online. It allows students to take admission though an online form.
The dates of online admissions are announced on the University website along with the details of the
programmes on offer. Design and create four web pages for the website of the University namely, Home,
Programme List, Registration Form and Important Dates, having the following features :

For consistency, every web page of the website should consists of three basic divisions –

Header – This division should be of the same for all the four web pages and should display name and logo
of the University. This division should be in different background colour.

Options – This division should be same in every web page and should be towards the left in every web
page. It should contain links to all the web pages viz. Home, Programme List, Registration and Important
Dates.

Data – This division should display the basic information as given below. The web pages that you are
designing should differ in this Division only.

The Data division of the different pages should be as under :

• Home page should include Welcome message, the aims and objectives of the University and strengths
of the University.
• Programme List page should display information about the programmes of the University in a tabular
form. The table should contain Programme Code, Programme name, duration, Medium of instruction,
eligibility criteria and total fee of the Programme.
• Registration page should contain a form which should have fields - name of the student, email id,
phone, qualification of student, programme being registered, and a Submit button. You should also
write the JavaScript code to verify that all the fields are filled by the person registering for the
University.
• Important Dates page should display the start date of admission, the last date of admission and start
date of commencement of programme, using an unordered list.

Ans.

HOME.HTML

<html>

<head>

<title>Home Page</title>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>

<div style="width:100%; height:75px; background-color:#FFF8DC; padding:20px;">

<div style="float:left; width:250px;">

<img src="logo.png" width="180">


Disclaimer/Note
These are just the sample of the answers/solution to some of the questions given in the assignments. Student should read and refer the official study material provided by
the university.
• Facebook-https://www.facebook.com/dalal.tech
• telegram - https://t.me/DalalTechnologies
• YouTube-https://www.youtube.com/channel/UCilEr1rW-SIrJlJ5_ioKQfw

</div>

<div><center><h1>INDIRA GANDHI NATIONAL OPEN UNIVERSITY</h1></center></div>

</div>

<table width="100%">

<tr><td width="220">

<div class="vertical-menu">

<a href="Home.html" class="active">Home</a>

<a href="ProgrammeList.html">Programme List</a>

<a href="Registration.html">Registration</a>

<a href="ImportantDates.html">Important Dates</a>

</div>

</td><td>

<div style="overflow: auto; height: 600; margin-left:10px; line-height:1.428;" class="textcss">

<br /><center><h3>WELCOME TO OUR UNIVERSITY HOME PAGE</h3></center>

<h4>Premble</h4>

<p>The Indira Gandhi National Open University (IGNOU), established by an Act of Parliament in
1985, has continuously striven to build an inclusive knowledge society through inclusive education. It has tried to
increase the Gross Enrollment Ratio (GER) by offering high-quality teaching through the Open and Distance
Learning (ODL) mode.</p>

<p>The University began by offering two academic programmes in 1987, i.e., Diploma in
Management and Diploma in Distance Education, with a strength of 4,528 students.</p>

<p>Today, it serves the educational aspirations of over 3 million students in India and other
countries through 21 Schools of Studies and a network of 67 regional centres, around 2,667 learner support
centres and 29 overseas partner institutions. The University offers about 228 certificate, diploma, degree and
doctoral programmes, with a strength of nearly 810 faculty members and 574 academic staff at the headquarters
and regional centres and about 33,212 academic counsellors from conventional institutions of higher learning,
professional organisations, and industry among others.</p>

<br /><h4>Objectives</h4>

<ul>

<li><p>Provide access to higher education to all segments of the society.</p>

<li><p>Offer high-quality, innovative and need-based programmes at different levels, to all those
who require them.</p>

<li><p>Reach out to the disadvantaged by offering programmes in all parts of the country at
affordable costs.</p>

Disclaimer/Note
These are just the sample of the answers/solution to some of the questions given in the assignments. Student should read and refer the official study material provided by
the university.
• Facebook-https://www.facebook.com/dalal.tech
• telegram - https://t.me/DalalTechnologies
• YouTube-https://www.youtube.com/channel/UCilEr1rW-SIrJlJ5_ioKQfw

<li><p>Promote, coordinate and regulate the standards of education offered through open and
distance learning in the country.</p>

</ul>

</div>

</td></tr>

</table>

<hr width="100%" size="3" color="#00008B">

</body>

</html>
IMPORTANTDATES.HTML
<html>
<head>
<title>Important Dates</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div style="width:100%; height:75px; background-color:#FFF8DC; padding:20px;">
<div style="float:left; width:250px;">
<img src="logo.png" width="180">
</div>
<div><center><h1>INDIRA GANDHI NATIONAL OPEN UNIVERSITY</h1></center></div>
</div>
<table width="100%">
<tr><td width="220">
<div class="vertical-menu">
<a href="Home.html">Home</a>
<a href="ProgrammeList.html">Programme List</a>
<a href="Registration.html">Registration</a>
<a href="ImportantDates.html" class="active">Important Dates</a>
</div>
</td><td>
<div style="overflow: auto; height: 600; margin-left:10px;" class="textcss">
<br /><center><h3>IMPORTANT DATES</h3>
<p><table border="3" width="650" cellpadding="10" class="textcss">
<tr><th colspan="2">New Admission for January 2021 Session</th></tr>

Disclaimer/Note
These are just the sample of the answers/solution to some of the questions given in the assignments. Student should read and refer the official study material provided by
the university.
• Facebook-https://www.facebook.com/dalal.tech
• telegram - https://t.me/DalalTechnologies
• YouTube-https://www.youtube.com/channel/UCilEr1rW-SIrJlJ5_ioKQfw

<tr><td>Start Date : 1<sup>st</sup> January 2021</td><td>Last Date : 10<sup>th</sup> February


2021</td></tr>
</table></p>
<p><table border="3" width="650" cellpadding="10" class="textcss">
<tr><th colspan="2">Re-Registration for January 2021 Session</th></tr>
<tr><td>Start Date : 15<sup>th</sup> Octoberber 2020</td><td>Last Date : 30<sup>th</sup> November
2020</td></tr>
</table></p>
<p><table border="3" width="650" cellpadding="10" class="textcss">
<tr><th colspan="2">Start Date of Commencement of Programme</th></tr>
<tr><th>Programme Name</th><th>Start Date</th></tr>
<tr><td>Bachelor of Computer Applications (BCA)</td><td>25<sup>th</sup> August 2020</td></tr>
<tr><td>Certificate in Information Technology (CIT)</td><td>2<sup>nd</sup> September 2020</td></tr>
</table></p>
</center>
</div>
</td></tr>
</table>
<hr width="100%" size="3" color="#00008B">
</body>
</html>

ProgrammeList.html
<html>
<head>
<title>Programme List</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div style="width:100%; height:75px; background-color:#FFF8DC; padding:20px;">
<div style="float:left; width:250px;">
<img src="logo.png" width="180">
</div>
<div><center><h1>INDIRA GANDHI NATIONAL OPEN UNIVERSITY</h1></center></div>
</div>
<table width="100%">
<tr><td width="220">
Disclaimer/Note
These are just the sample of the answers/solution to some of the questions given in the assignments. Student should read and refer the official study material provided by
the university.
• Facebook-https://www.facebook.com/dalal.tech
• telegram - https://t.me/DalalTechnologies
• YouTube-https://www.youtube.com/channel/UCilEr1rW-SIrJlJ5_ioKQfw

<div class="vertical-menu">
<a href="Home.html">Home</a>
<a href="ProgrammeList.html" class="active">Programme List</a>
<a href="Registration.html">Registration</a>
<a href="ImportantDates.html">Important Dates</a>
</div>
</td><td>
<div style="overflow: auto; height: 600; margin-left:10px;" class="textcss">
<br /><center><h3>PROGRAMME LIST</h3></center>
<p><table border="3" width="100%" cellpadding="10" class="textcss" style="margin-right:10px;">
<tr>
<th>Programme Code</th>
<th>Programme Name</th>
<th width="170">Duration</th>
<th>Medium</th>
<th>Eligibility Criteria</th>
<th width="100">Total Fee</th>
</tr>
<tr>
<td>BCA</td>
<td>Bachelor of Computer Applications</td>
<td>Minimum : 3 years<br />Maximum : 6 years</td>
<td>English</td>
<td>10+2 or its equivalent.</td>
<td>Rs. 40200/-</td>
</tr>
<tr>
<tr>
<td>CIT</td>
<td>Certificate in Information Technology</td>
<td>Minimum : 6 months<br />Maximum : 2 years</td>
<td>English</td>
<td>10th Standard OR SSC OR IGNOU'S BPP or Microsoft's DLC or equivalent</td>
<td>Rs. 6000/-</td>
Disclaimer/Note
These are just the sample of the answers/solution to some of the questions given in the assignments. Student should read and refer the official study material provided by
the university.
• Facebook-https://www.facebook.com/dalal.tech
• telegram - https://t.me/DalalTechnologies
• YouTube-https://www.youtube.com/channel/UCilEr1rW-SIrJlJ5_ioKQfw

</tr>
</table></p>
</div>
</td></tr>
</table>
<hr width="100%" size="3" color="#00008B">
</body>
</html>
Registration.html
<html>
<head>
<title>Registartion</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script type="text/javascript">
function PageField()
{
document.getElementById("blankLabel").style.display = "none";
}
function BlankField()
{
var sname, email, phone, qualification, programme;
var notblank=true;
sname = document.getElementById("sname").value;
email = document.getElementById("email").value;
phone = document.getElementById("phone").value;
qualification = document.getElementById("qualification").value;
programme = document.getElementById("programme").value;
if(sname.length > 0 && email.length > 0 && phone.length > 0 && qualification.length > 0 &&
programme.length > 0)
document.getElementById("blankLabel").style.display = "none";
if(sname.length == 0 || email.length == 0 || phone.length == 0 || qualification.length == 0 ||
programme.length > 0)
{
document.getElementById("blankLabel").innerHTML = "Blank field not allow";
document.getElementById("blankLabel").style.display = "block";
Disclaimer/Note
These are just the sample of the answers/solution to some of the questions given in the assignments. Student should read and refer the official study material provided by
the university.
• Facebook-https://www.facebook.com/dalal.tech
• telegram - https://t.me/DalalTechnologies
• YouTube-https://www.youtube.com/channel/UCilEr1rW-SIrJlJ5_ioKQfw

notblank=false;
}
return notblank;
}
</script>
</head>
<body onload="PageField()">
<div style="width:100%; height:75px; background-color:#FFF8DC; padding:20px;">
<div style="float:left; width:250px;">
<img src="logo.png" width="180">
</div>
<div><center><h1>INDIRA GANDHI NATIONAL OPEN UNIVERSITY</h1></center></div>
</div>
<table width="100%">
<tr><td width="220">
<div class="vertical-menu">
<a href="Home.html">Home</a>
<a href="ProgrammeList.html">Programme List</a>
<a href="Registration.html" class="active">Registration</a>
<a href="ImportantDates.html">Important Dates</a>
</div>
</td><td>
<div style="overflow: auto; height: 600; margin-left:10px;" class="textcss">
<br /><center><h3>ONLINE REGISTRATION</h3>
<form name="Feedback" method="post" onsubmit="return BlankField()" action="#">
<table cellpadding="10" class="textcss" style="line-height:1.5;">
<tr><td><input type="text" id="sname" name="sname" size="30" maxlength="50"
placeholder="Full Name"></td></tr>
<tr><td><input type="text" id="email" name="email" size="30" maxlength="100"
placeholder="E-mail id"></td></tr>
<tr><td><input type="text" id="phone" name="phone" size="12" maxlength="11"
placeholder="Contact Number"></td></tr>
<tr><td>Qualification
<br /><select id="qualification" name="qualification" size="1" style="width: 300px;">
<option></option>
Disclaimer/Note
These are just the sample of the answers/solution to some of the questions given in the assignments. Student should read and refer the official study material provided by
the university.
• Facebook-https://www.facebook.com/dalal.tech
• telegram - https://t.me/DalalTechnologies
• YouTube-https://www.youtube.com/channel/UCilEr1rW-SIrJlJ5_ioKQfw

<option>Madhyamik / Class 10</option>


<option>Higher Secondary / Class 12</option>
<option>Graduate</option>
<option>Post Graduate</option>
<option>Deploma</option>
</select>
</td></tr>
<tr><td>programme Name
<br /><select id="programme" name="programme" size="1" style="width: 550px;">
<option></option>
<option>Bachelor of Computer Applications (BCA)</option>
<option>Master of Computer Applications (MCA)</option>
<option>Certificate in Information Technology (CIT)</option>
<option>Post Graduate Diploma in Computer Applications (PGDCA)</option>
</select>
</td></tr>
<tr><td><b><font color="red"><label id="blankLabel"></label></font></b></td></tr>
<tr><td><center><input type="submit" style='width:100'
value="SUBMIT"></center></td></tr>
</table>
</form></center>
</div>
</td></tr>
</table>
<hr width="100%" size="3" color="#00008B">
</body>
</html>
Mystyle.css
h1 { font-family:Cambria; color: #0CABE8; }
h3 { font-family:Cambria; color:#8B0000; }
h4 { font-family:Cambria; color:#00008B; }
.textcss { font-size:14pt; font-family:Cambria; }
.vertical-menu { height: 600; width: 220px; font-size:15pt; font-family:Cambria; font-weight: bold; background-color:
#F0FFF0; }
.vertical-menu a { background-color: #F0FFF0; color:000000; display: block; padding: 12px; text-decoration: none; }
Disclaimer/Note
These are just the sample of the answers/solution to some of the questions given in the assignments. Student should read and refer the official study material provided by
the university.
• Facebook-https://www.facebook.com/dalal.tech
• telegram - https://t.me/DalalTechnologies
• YouTube-https://www.youtube.com/channel/UCilEr1rW-SIrJlJ5_ioKQfw

.vertical-menu a:hover { background-color: #D0FFD0; }


.vertical-menu a.active { background-color: #D0FFD0; }
input[type="text"] { height: 45px; font-size:14pt; font-family:Cambria; padding: 5px 5px; border-radius: 5px; outline:
0!important; }
select { font-family: Cambria; font-size:14pt; padding: 10px; border-radius: 5px; }
option { font-family: Cambria; font-size:14pt; }
input[type="text"]:hover, select:hover { border: 2px solid #8B0000; }
input[type="submit"] { font-size:14pt; font-family:Cambria; color: white; font-weight: bold; height: 45px; width:160px;
border: none; cursor: pointer; outline: 0!important; border-radius: 5px; margin: 5px 5px; padding: 0px 15px;
background-color: #008000; }
table, th, td { border-collapse: collapse; }
th { color:#00008B; }
a { text-decoration: none; }

Disclaimer/Note
These are just the sample of the answers/solution to some of the questions given in the assignments. Student should read and refer the official study material provided by
the university.
• Facebook-https://www.facebook.com/dalal.tech
• telegram - https://t.me/DalalTechnologies
• YouTube-https://www.youtube.com/channel/UCilEr1rW-SIrJlJ5_ioKQfw

Disclaimer/Note
These are just the sample of the answers/solution to some of the questions given in the assignments. Student should read and refer the official study material provided by
the university.
• Facebook-https://www.facebook.com/dalal.tech
• telegram - https://t.me/DalalTechnologies
• YouTube-https://www.youtube.com/channel/UCilEr1rW-SIrJlJ5_ioKQfw

Disclaimer/Note
These are just the sample of the answers/solution to some of the questions given in the assignments. Student should read and refer the official study material provided by
the university.
• Facebook-https://www.facebook.com/dalal.tech
• telegram - https://t.me/DalalTechnologies
• YouTube-https://www.youtube.com/channel/UCilEr1rW-SIrJlJ5_ioKQfw

Q2. What is the need of CSS? What are its important features of CSS? What is Angular JS? How is Angular
JS similar or different to JavaScirpt?
Ans.

CSS stands for Cascading Style Sheets and almost all webpages and user interfaces written with HTML use it. CSS is a style sheet
language that adds styling and formatting to documents written in a markup language.

Currently in its third version (often referred to as CSS3), CSS adds presentation to a web page whereas HTML creates the
page structure.

CSS is important because it allows web designers, developer, bloggers, and so forth to make our websites unique and attractive.
CSS gives us the opportunity to play with a page layout, adjust colors and fonts, add effects to images, etc.

While in the past it was possible to add style via HTML or more simpler CSS, CSS3 has really expanded and allows for more
creativity.

Ultimately, it makes our lives easier. CSS allows us to separate the presentation from the structure (HTML) into different files.

Some CSS3 Features

There are many CSS features. Here are just a few to be aware of.

Disclaimer/Note
These are just the sample of the answers/solution to some of the questions given in the assignments. Student should read and refer the official study material provided by
the university.
• Facebook-https://www.facebook.com/dalal.tech
• telegram - https://t.me/DalalTechnologies
• YouTube-https://www.youtube.com/channel/UCilEr1rW-SIrJlJ5_ioKQfw

CASCADING

As I mentioned earlier, CSS stands for Cascading Style Sheets. You may be wondering what this cascading business is.

“The style sheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed

on to a source of lower priority, such as the user agent style. This process is called cascading.”

Basically, there is a cascading order to the CSS styles you set. Let's say in the beginning of your external style sheet you make all
paragraphs have a blue font. But then, inside your HTML document, you make a single paragraph a red color.

Because of the cascading order, the red style declaration will win out the blue. And that paragraph will be red.

THE CASCADING ORDER

Generally speaking all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the
highest priority:

1. Browser default

2. External style sheet

3. Internal style sheet (in the head section)

4. Inline style (inside an HTML element)

This may sound confusing to beginners. Don't worry. It's kind of like the order of operations in math, or something.

And cascading is a good thing. Because, say you set a color for all your paragraphs on the website, you can later change the
paragraph color for one page or section.

CSS MAKES ACCESSIBILITY EASIER

In the past, setting up HTML files so that they were accessible to screen-readers and other kinds of methods was a pain. CSS3 has
made this easier.

CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in
print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices.

GREAT FOR MOBILE THANKS TO MEDIA QUERIES

Like HTML5, CSS3 has also been constructed to be more mobile-friendly.

To allow your website to be visually appealing on multiple screens, CSS3 has this nifty feature called media queries.

Media queries allows you to format the presentation to different screen sizes, like tablet, mobile, and desktop, without having to
change the content itself. Yay!

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend
HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency
injection eliminate much of the code you would otherwise have to write.
Is Angular JS similar or different to JavaScirpt?

Disclaimer/Note
These are just the sample of the answers/solution to some of the questions given in the assignments. Student should read and refer the official study material provided by
the university.
• Facebook-https://www.facebook.com/dalal.tech
• telegram - https://t.me/DalalTechnologies
• YouTube-https://www.youtube.com/channel/UCilEr1rW-SIrJlJ5_ioKQfw

Both are the two different web technologies used for developing web applications. JavaScript is a programming language
whereas AngularJS is an open source framework and based on MVC architecture. ... It is mainly used with Java applications and
JQuery. AngularJS is mainly used for large-scale single page web applications.

Disclaimer/Note
These are just the sample of the answers/solution to some of the questions given in the assignments. Student should read and refer the official study material provided by
the university.

You might also like