0% found this document useful (0 votes)

2 views

Web Application Project-1

This document outlines a web application project focused on Wildlife National Parks, submitted by Anushka Pandey for the AISSCE. It includes sections on HTML, CSS, and JavaScript, detailing their roles in web development, along with features of the wildlife website and its structure. The project also acknowledges the support received from teachers, parents, and friends during its completion.

Uploaded by

Aradhya Verma

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

2 views

Web Application Project-1

Uploaded by

Aradhya Verma

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 65

WEB APPLICATION PROJECT

SESSION – 2021-2022
Wildlife National Parks
In Partial Fulfilment Of The
Requirements Of The All India Senior
Secondary Certificate Examination
(AISSCE)

Submitted To : Submitted By :
Mrs. Eti Joshi Ma’am Anushka Pandey
Certificate
This is to certify that Anushka Pandey of class
XII of Delhi Public School, Indore has completed
this project under my guidance, as per the
requirement of CBSE. She has taken keen
interest and has shown utmost sincerity while
collecting and analysing all the relevant
information required to prepare this project on
Wildlife National Parks. It is further certified
that this project is individual work of the
student. She has completed her project up to my
satisfaction.

Signature of Teacher Signature of External

School Stamp Signature of Principal

Acknowledgement
I extend my gratitude towards my
Principal Mr. Ajay K. Sharma Sir for the
moral support extended during the tenure
of the project.

I am extremely thankful and pay my

gratitude to my teacher Mrs. Eti Joshi for
her valuable guidance and support during
the completion of this project.

I also acknowledge with a great sense of

reverence, my gratitude towards my
parents and friends for their valuable
suggestions given to me in completing this
project.

Without active guidance, help,

cooperation and encouragement of all
these people, I wouldn’t have completed the
project on time.
INDEX

S.NO PARTICULARS
1 HTML
2 CSS
3 JS
4 FEATURES OF WILDLIFE WEBSITE :
• Home page
• Kanha national park page
• Bandhavgarh national park page
• Panna national park page
• Pench national park page
• Madhav national park page
• Contact us page
• About us page
• Form page
5 SOURCE CODE
6 OUTPUT
7 CONCLUSION
8 FUTURE ENHANCEMENTS
9 BIBLIOGRAPHY
HTML
HTML stands for Hyper Text Markup Language

HTML is the standard markup language for Web pages

HTML elements are the building blocks of HTML pages

HTML elements are represented by <> tags

HTML Elements
An HTML element is a start tag and an end tag with content in between:

<h1>This is a Heading</h1>

Start tag Element content End tag

<h1> This is a Heading </h1>

<p> This is paragraph. </p>

HTML Attributes
• HTML elements can have attributes
• Attributes provide additional information about the element
• Attributes come in name/value pairs like charset="utf-8"
A Simple HTML Document
<!DOCTYPE html>
<html lang="en">

<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>

</html>

HTML elements are the building blocks of HTML pages.

• The <!DOCTYPE html> declaration defines this document to be HTML5

• The <html> element is the root element of an HTML page
• The lang attribute defines the language of the document
• The <meta> element contains meta information about the document
• The charset attribute defines the character set used in the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
• The HTML document itself begins with <html> and ends with </html>.
• The visible part of the HTML document is between <body> and </body>.

HTML Headings
HTML headings are defined with <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important
heading:

1) HTML paragraphs are defined with <p> tags

2) HTML links are defined with <a> tags
The link's destination is specified in the href attribute.

Example
<a href="https://www.w3schools.com">This is a link</a>
3) HTML images are defined with <img> tags.

The source file (src), alternative text (alt), width, and height are provided as
attributes:

4) HTML lists are defined with <ul> (unordered/bullet list)

or <ol> (ordered/numbered list) tags, followed by <li> tags (list items)

5) An HTML table is defined with a <table> tag.

Table rows are defined with <tr> tags.

Table headers are defined with <th> tags. (bold and centered by default).

Table cells (data) are defined with <td> tags

CSS
CSS stands for Cascading Style Sheets

CSS describes how HTML elements are to be displayed

CSS Example
<style>

body {background-color:lightblue; text-align:center;}

h1 {color:blue; font-size:40px;}
p {font-family:verdana; font-size:20px;}

</style>

CSS Syntax
A CSS rule consists of a selector and a declaration block:
The selector points to the HTML element to style (h1).

The declaration block (in curly braces) contains one or more declarations
separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a

colon.

In the following example all <p> elements will be center-aligned, red and
have a font size of 32 pixels:

External style sheets are linked to HTML pages with <link> tags

JavaScript

JavaScript is the Programming Language for the Web.

JavaScript can update and change both HTML and CSS.

JavaScript can calculate, manipulate and validate data.

JavaScript Variables
JavaScript variables are containers for storing data values.

JavaScript variables can be:

• Numbers
• Strings
• Objects
• Arrays
• Functions
JavaScript Numbers
JavaScript has only one type of number. Numbers can be written with or
without decimals.

All numbers are stored as double precision floating point numbers.

The maximum number of decimals is 17, but floating point is not always
100% accurate

JavaScript Strings
Strings store text. Strings are written inside quotes. You can use single or
double quotes

The length of a string is found in the built in property length

JavaScript Objects
Objects are variables too. But objects can contain many values.

This code assigns many values (Fiat, 500, white) to a variable

JavaScript Arrays
JavaScript arrays are used to store multiple values in a single variable.

Example
var cars = ["Saab", "Volvo", "BMW"]

JavaScript Functions
A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when "something" invokes it (calls it).

JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById().This example uses the
method to "find" an HTML element (with id="demo") and changes the element content
(innerHTML) to "Hello JavaScript"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>WEB APPLICATION PROJECT</title>

.auto-style1 {

font-family: "Bookman Old Style";

color: #FFFFFF;

.auto-style2 {

text-align: center;

.auto-style3 {

text-align: left;

.auto-style4 {

font-family: "Franklin Gothic Heavy";

font-size: large;

.auto-style5 {

text-align: left;

font-family: "Franklin Gothic Heavy";

font-size: large;

color: #FF00FF;

.auto-style7 {

font-family: "Franklin Gothic Heavy";

text-decoration: underline;

font-size: large;

.auto-style8 {
font-size: xx-large;

.auto-style9 {

text-align: center;

font-family: "Lucida Fax";

.auto-style10 {

background-color: #0000FF;

.auto-style12 {

margin-top: 0px;

.auto-style13 {

text-align: center;

border-bottom-style: solid;

border-bottom-width: 1px;

padding-bottom: 1px;

.auto-style14 {

background-color: #E7FF00;

.auto-style15 {

font-family: "Bookman Old Style";

color: #0000FF;

.auto-style16 {

font-size: xx-large;

font-weight: bold;

.auto-style18 {

text-align: left;

color: #FFFFFF;

}
</style>

<!--

function FP_preloadImgs() {//v1.0

var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();

for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }

function FP_swapImg() {//v1.0

var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2;

n<args.length;

n+=2) { elm=FP_getObjectByID(args[n]); if(elm) {

doc.$imgSwaps[doc.$imgSwaps.length]=elm;

elm.$src=elm.src; elm.src=args[n+1]; } }

function FP_getObjectByID(id,o) {//v1.0

var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);

else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;

if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)

for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }

f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;

for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }

return null;

// -->

</script>

</head>

<p style="width: 1119px" class="auto-style1"><span class="auto-style10"><strong>

 This website will help you know about the wildlife national parks.

</strong></span></p>

<p style="width: 1119px" class="auto-style15"><span class="auto-style10">

<strong><span class="auto-style14">Click on the name buttons to know

more.</span></strong></span></p>

<u>

<font color="red"><a href="HOME%20PAGE.html"><strong>

<img id="img1" alt="HOME" height="20"

onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button4.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button2.jpg')"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button3.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button3.jpg')" src="button2.jpg"
style="border: 0" width="100" /></strong></a></font></u><font color="red"><a
href="KANHA%20NATIONAL%20PARK.html"><img id="img2" alt="KANHA "
height="20" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button7.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button5.jpg')"
onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button6.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button6.jpg')" src="button5.jpg"
style="border: 0" width="100" /></a><a href="BANDHAVGARH.html"><img
id="img3" alt="BANDHAV" height="20"
onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'buttonA.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button8.jpg')"
onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button9.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button9.jpg')" src="button8.jpg"
style="border: 0" width="100" /></a><a href="PANNA.html"><img
id="img4" alt="PANNA" height="20"
onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button16.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'button14.jpg')"
onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button15.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button15.jpg')" src="button14.jpg"
style="border: 0" width="100" /></a><a href="PENCH.html"><img id="img5"
alt="PENCH" height="20"
onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'button19.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'button17.jpg')"
onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'button18.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'button18.jpg')" src="button17.jpg"
style="border: 0" width="100" /></a><a href="MADHAV.html"><img
id="img6" alt="MADHAV" height="20"
onmousedown="FP_swapImg(1,0,/*id*/'img6',/*url*/'button1C.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img6',/*url*/'button1A.jpg')"
onmouseover="FP_swapImg(1,0,/*id*/'img6',/*url*/'button1B.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img6',/*url*/'button1B.jpg')" src="button1A.jpg"
style="border: 0" width="100" /></a><img id="img7" alt="CONTACT"
height="20" onmousedown="FP_swapImg(1,0,/*id*/'img7',/*url*/'button4A.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img7',/*url*/'button48.jpg')"
onmouseover="FP_swapImg(1,0,/*id*/'img7',/*url*/'button49.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img7',/*url*/'button49.jpg')" src="button48.jpg"
style="border: 0" width="100" /><img id="img8" alt="ABOUT US"
height="20" onmousedown="FP_swapImg(1,0,/*id*/'img8',/*url*/'button4D.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img8',/*url*/'button4B.jpg')"
onmouseover="FP_swapImg(1,0,/*id*/'img8',/*url*/'button4C.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img8',/*url*/'button4C.jpg')" src="button4B.jpg"
style="border: 0" width="100" /><a href="FORM%201.html"><img
id="img9" alt="FORM" height="20"
onmousedown="FP_swapImg(1,0,/*id*/'img9',/*url*/'button5A.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img9',/*url*/'button58.jpg')"
onmouseover="FP_swapImg(1,0,/*id*/'img9',/*url*/'button59.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img9',/*url*/'button59.jpg')" src="button58.jpg"
style="border: 0" width="100" /></a><h1 class="auto-style9">

<u>THIS IS HOME PAGE</h1></u></font>

<u>

</b></font>
<span class="auto-style16">Top 5 National Parks In Madhya Pradesh

.</span><span class="auto-style8"> </span></div>

<ol>

<u>

<span class="auto-style4"><em>Kanha National

Park</em></span></a></u></strong></u><strong><span class="auto-
style7"><em></li></em></span></strong><span class="auto-
style7"><strong><em> 

</em></strong></span>

<u>

</em></strong></span>

<span class="auto-style4"><em>Bandhavgarh National

Park</em></span></a><span class="auto-
style4"><em></li></em></span></strong><span class="auto-
style4"><strong><em> 

</em></strong></span>

<span class="auto-style4"><em>Panna National

Park</em></span></a><span class="auto-
style4"><em></li></em></span></strong><span class="auto-
style4"><strong><em> 

</em></strong></span>

<span class="auto-style4"><em>Pench National Park</em></span></a><span

class="auto-style4"><em></li></em></span></strong><span class="auto-
style4"><strong><em> 

</em></strong></span>

<li class="auto-style5"><strong><em>Madhav National

Park</em></strong></ol>

</div>

<img src="C:\Users\ANUSHKA PANDEY\Documents\bandhavgarh-national-park.jpg"

class="auto-style12">

<img src="C:\Users\ANUSHKA PANDEY\Documents\panna-national-park3.jpg"

width="513">

<img src="C:\Users\ANUSHKA PANDEY\Documents\pench-national-park2.jpg">

<img src="C:\Users\ANUSHKA PANDEY\Documents\madhav-national-park.jpg"

height="407">

</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<meta content="en-in" http-equiv="Content-Language" />

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>KANHA NATIONAL PARK</title>

.auto-style1 {

font-family: "Engravers MT";

text-align: center;

font-size: xx-large;

.auto-style2 {

font-family: "Lucida Fax";

text-decoration: underline;

.auto-style9 {

text-decoration: underline;

background-color: #00FFFF;
}

.auto-style10 {

font-family: "Monotype Corsiva";

font-size: large;

.auto-style11 {

background-color: #FF0000;

.auto-style12 {

text-align: center;

font-size: x-large;

margin-left: 198px;

margin-top: 81px;

.auto-style13 {

font-family: "Lucida Fax";

text-decoration: underline;

background-color: #221D1D;

color: #00FFFF;

.auto-style14 {

text-align: left;

.auto-style15 {

text-align: center;

.auto-style16 {

font-weight: normal;

color: #800080;

text-decoration: underline;

font-family: "Copperplate Gothic Bold";

.auto-style17 {
font-size: x-large;

.auto-style18 {

color: rgb(255, 0, 0);

.auto-style19 {

font-size: large;

.auto-style20 {

text-align: center;

font-size: xx-large;

</style>

<font color="purple"><h4 class="auto-style1"><em>KANHA NATIONAL

PARK</em></h4></font>

</head>

<p align="center"" class="auto-style13">Kanha National Park, also known as Kanha

Tiger Reserve, is a vast expanse of grassland and forest in the central Indian state of
Madhya Pradesh. Tigers, jackals and wild pigs can be spotted in Kanha Meadows. The
elevated plateau of Bamhnidadar is home to birds of prey. Animals often gather at the
watering holes of Sondar Tank and Babathenga Tank. The park’s flora and fauna are
documented in the park's Kanha Museum.</p>

<h1 align="center" class="auto-style16"><strong>: SOME PICS :</strong></h1>

<p align="center"" class="auto-style2"> </p>

<span class="auto-style19">     

</span>

<img src="C:\Users\ANUSHKA PANDEY\Documents\kanha-national-park-20.jpg">

<img src="C:\Users\ANUSHKA PANDEY\Documents\kanha-national-park-24.jpg">

<img src="C:\Users\ANUSHKA PANDEY\Documents\kanha-national-park-32.jpg">

<img src="C:\Users\ANUSHKA PANDEY\Documents\kanha-national-park-33.jpg">

<img src="C:\Users\ANUSHKA PANDEY\Documents\kanha-national-park-34.jpg">

<img src="C:\Users\ANUSHKA PANDEY\Documents\kanha-national-park-36.jpg">

</div>

<P align="center"><span class="auto-style10">Safari Timings:

Kanha National Park remain open for visitors from 16th October to 30th June. The safari
timings are:</span>

<table style="width: 100%; height: 194px;">

<tr>

<td><span class="auto-style11">TIMINGS</span><table border="0"

cellpadding="0" cellspacing="0" style="padding: 0px; margin: 0px auto 20px; outline:
none; width: 639px; border-right: 1px solid rgb(109, 141, 6); color: rgb(0, 0, 0); font-
family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-variant-
ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal;
orphans: 2; text-align: start; text-transform: none; white-space: normal; widows: 2;
word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255,
255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-
color: initial;" width="600">

<tbody style="padding: 0px; margin: 0px; outline: none;">

<tr class="heading" style="padding: 0px; margin: 0px;

outline: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: rgb(255,
255, 255); font-weight: bold; background: rgb(91, 167, 10);">

<td style="padding: 8px; margin: 0px; outline:

none; color: rgb(83, 83, 83); border-left: 1px solid rgb(109, 141, 6); border-bottom:
1px solid rgb(109, 141, 6); vertical-align: text-top;">

Timings</td>

<td style="padding: 8px; margin: 0px; outline:

none; color: rgb(83, 83, 83); border-left: 1px solid rgb(109, 141, 6); border-bottom:
1px solid rgb(109, 141, 6); vertical-align: text-top;">

Morning Safari</td>

<td style="padding: 8px; margin: 0px; outline:

none; color: rgb(83, 83, 83); border-left: 1px solid rgb(109, 141, 6); border-bottom:
1px solid rgb(109, 141, 6); vertical-align: text-top;">

Afternoon Safari</td>

</tr>