Scribd
Upload
10 views39 pages

finalprintout12thScience (1)

The document outlines a series of programming tasks related to web development using HTML5, CSS, JavaScript, and PHP. It includes instructions for creating web pages with various functionalities such as audio and video integration, form validations, and navigation using image mapping. Additionally, it provides examples of code for each task, demonstrating the implementation of these web technologies.

Uploaded by

ghorpadeaniket067
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
10 views39 pages

finalprintout12thScience (1)

The document outlines a series of programming tasks related to web development using HTML5, CSS, JavaScript, and PHP. It includes instructions for creating web pages with various functionalities such as audio and video integration, form validations, and navigation using image mapping. Additionally, it provides examples of code for each task, demonstrating the implementation of these web technologies.

Uploaded by

ghorpadeaniket067
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/ 39

SR.

NO DATE PARTICULARS SIGN

1 Creation of Website using HTML5

2 Create a webpage using HTML and CSS code to design a web


page as the layout displayed below.

3 Use of Audio on web pages using html5.

4 Use of video on web pages using html5.

5 Navigation on an image using Client side image Mapping in web


page using html 5.

6 Create a Webpage in HTML having a white background and one


Button Object. Write code using JavaScript Such that when the
mouse is placed over the first button Object without Clicking.
7 Create JavaScript program for the following form Validations.
Make use of HTML5 Properties to do the following Validations.

8 Create event driven JavaScript program for the following . Make


use of appropriate variables, JavaScript inbuilt string functions
and control Structures.
9 Create JavaScript Program Which compute the average marks of
Students. Accept six subject marks of student from user.
Calculate average marks of student which is used to determine
the corresponding grades.
10 Write a PHP program to check if a person if eligible to vote or
not. The Program should include the following.
11 Write a PHP Program to save marks of English, Hindi, Marathi,
Math and Information Technology in an array. Display marks of
individual subject along with total marks and percentage.
12 Write a Program using PHP to calculate Electricity bill by
accepting the limits.

INDEX

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

Name : -Div :-
Seat No :-

SOP 1 : Creation of website using HTML5

Create a website using html5 and CSS using any 4 css properties . Write a code for 2 separate pages having
different file name such first page as index.html, 2nd page as page2.html as form.html. Use any theme such as
college profile or company profile etc. Every page must contain proper Meta information and design web page as
follows-

1) The index page must contain a heading which is highest among other text on pages and must

be at center of the page. There must be a paragraph which introduces general information

about the theme chosen must have at least 3 physical style tags and one image with alternate

text. This page must be connected to other two pages with proper navigational links.

2) The 2nd page must contain the feedback or enrollment form related with theme chosen with

feature of html5. The form must contain text element and email address of the company or person .Include the
submit button.

**********************************************************
Index.html

<!DOCTYPE html>

<html>

<head>

<meta name = "authors" content = "aca">

<meta name = "description" content ="History of Ahmednagar college">

<meta name = "keywords" content ="history of college, ahmednagar college">

<meta name="copyright" content= "copyright Ahmednagar College All right Reserve">

<style>

.intro{text-align:center;color:blue}

</style></head>

<body>

<h1 class="intro">AHMEDNAGAR COLLEGE, AHMEDNAGAR</h1>

<a href="form.html">Go to FeedbackFOrm</a>

<p><h2>History of College</h2>
The B.P.H. Education Society's Ahmednagar College is a Christian minority institution, situated on a 32.9-acre
campus at the heart of Ahmednagar city. The College was the first to be established in Ahmednagar district in
1947. It is a multi-faculty institution, consisting of the faculties of Arts, Science and Commerce, affiliated to the
University of Pune. The Founder of the College, Dr. B.P. Hivale, believed that the primary aim of the College “is to
provide higher education for the students who for various reasons would not otherwise be able to have it”.
Translating the ideas of the Founder, the College always strives to facilitate better teaching, better learning and
better results. True to its mottoes, the College makes every effort to provide access to education to all who need
it, irrespective of their background. Thus, in spite of being a Christian Minority Institution, the faculty and
students of the College form a cosmopolitan atmosphere with teachers and students coming from diverse
backgrounds and from various parts of India and Maharashtra. Building personality, not merely producing degree-
holders, is the purpose of education. The College continuously tries to go beyond syllabi so that learning becomes
at once meaningful and intensive. The College is committed to the liberal humanist ideals and has been renowned
for its active role in social justice initiatives, innovative educational programs, research and community-oriented
activities. Ahmednagar College has come to be known for its pioneering projects, the most notable among them
being students' involvement in community development which grew into the NSS; 'Self Study' of the College
undertaken in 1967, the postgraduate course in Drug -Chemistry and in the recent past the Resource Centre for
the Differently-abled.</p>

<img src="collegeIMG.jpg">

</body>

</html>

page2.html

<!DOCTYPE html>

<html>

<head>

<title>Feedback form </title></head>

<body>

<form> Name: <input type="text"autocomplete><br><br>

E-mail:<input type="email" name="email"><br><br>

Please give your feedback here<input type="textarea" name="feedback"><br<br>

<a href="index.html">Go to HomePage</a>

<input type="submit" name="b1" >

</form>

</body>

</html>
**********************************************************

Name : -Div :-

Seat No :-

SOP 2 : Create a web page using HTML and CSS code to design a web page as the layout

displayed below.The top section willdisplay the heading ,’Tourist places’ in header. The section on the left has
list of cities. The right hand side display tourist places in any one of the city. Use Inline style sheet in the top
section to display background colour for the text ‘Touristplaces’. Use internal style sheet for the left and right
section with background colours and font styles.

**********************************************************
Index.html

<html>

<head>

<title> Tourist Place </title>

<style>

section{background-color:yellow;width:50%;height:50%;float:left;color:black;font-size:30px;outline-style:solid;}

aside{background-color:pink;width:50%;height:50%;float:right;color:black;font-size:30px;outline-style:solid;}

</style>

</head>

<body>

<header style="background-color:lightblue;color:deeppink;text-align:center; height:30%;width:100%;font-


size:50px;outline-style:solid">Tourist places

</header>

<header>

<section>

<b> City </b>

<ol>

<li> Pune </li>

<li> Delhi </li>


<li> Banglore </li>

<li> Hyderabad </li>

</ol>

</section>

<aside>

<p> Tourist places in Pune </p>

<ul>

<li> Shaniwarwada </li>

<li> Sinhgad </li>

<li> Kelkar Museum </li>

</ul>

</aside>

</header>

</body>

</html>
**********************************************************
Name : -Div :-
Seat No :-

SOP 3 :

: Use of Audio on web pages using html5.

Create a webpage named audio.html to set an audio file in web page with controls such that it uses html 5
elements. The audio file must play as soon as the webpage loads in browser and it will start over again, every
time when it is completed.

Create another webpage named audio1.html which provides multiple source file formats for the same audio
file that plays a sound automatically with controls. The browser should display the message with appropriate
attribute when audio file is not supported by browser. The code must incorporate the list of sound files formats
(like wav, MP3 or ogg etc).

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

Audio.html

<html>

<head>

<title> Audio </title>

</head>

<body>

<p> Audio sample </p>

<audio controls loop>

<source src="myMusic.mp3" type="audio/mp3">

</audio>

</body>

</html>

Audio1.html

<!DOCTYPE html>

<html>

<body>

<h1>The audio </h1>

<ol>
<li>mp3-audio/mpeg</li>

<li>ogg-audio/ogg</li>

<li>wav-audio/wav</li>

<audio controls autoplay>

<source src="myMusic.mp3" type="audio/mp3">

<source src="myMusic.ogg" type="audio/ogg">

<source src="myMusic.wav" type="audio/wav">

Your browser does not support the audio element.

</audio>

</body>

</html>
**********************************************************

Name : -Div :-

Seat No :-
SOP 4 :

: Use of video on web pages using html5.

Create awebpage named video.html to display a video file on web page and plays automatically with controls.
The dimension of video area should be 150* 150 pixels.

Create another webpage which provide multiple source file formats for the same audio file that playsa sound
automatically with controls.The dimension of video area should be 100* 100 pixels. The browser should display
the message with appropriate attribute when audio file is not supported by browser. The code must
incorporate the list of video files formats (like webM, MP4 or ogg etc).

**********************************************************
Video.html

<!DOCTYPE html>

<html>

<body>

<video width="320" height="240" controls>

<source src="myVideo.mp4" type="video/mp4">

</video>

</body>

</html>

Video1.html

<!doctype html>

<html>

<head><title>

Multiple Video File on Web Page with controls</title></head>

<body>

<h1 align="center">Multiple Video File on Web Page with controls</h1>

<h2><b>

The text between the video tags will only bedisplayed in browsers that do not support the video
element.</b></h2>

<h3> List of video file formats</h3>

<ol>
<li>mp4-video/mp4</li>

<li>ogg-video/ogg</li>

<li>WebM-video/webM</li>

</ol>

<video controls width="100" height="100" autoplay loop=”2”>

<source src="myVideo.mp4" type=”video/mp4”>

<source src="myVideo.ogg" type=”video/ogg”>

<source src="myVideo.webm"type=”video/webm”>

</video>

</body>

</html>
**********************************************************
Name : -Div :-

Seat No :-

SOP 5 :

: Navigation on an image using Client side image Mapping in web page using html
5.
Create a webpage named imagemap. html with an inserted image having jpeg, png
or gif extension. Create 3 different shapes (like rectangle, circle and polygon) which
do not overlap. Note the co-ordinates making use of Ms-
Paint/GIMP/IrfanView/Pinta. Each shape should be mapped or navigate with a
different URL that should navigate to a local webpage.
**********************************************************
Name : -Div :-

Seat No :-

SOP 6 :

: Create a Webpage in HTML having a white background and one Button Object. Write code using JavaScript
Such that when the mouse is placed over the first button Object without Clicking., the color of the background
of the page

**********************************************************
**********************************************************
Name : -Div :-

Seat No :-

SOP 7 :

: Create JavaScript program for the following form validations. Make


use of HTML5 properties to do the following validations :

1) Name, address, contact number and email are required fields of the

form.

2) Address field should show the hint value which will disappear when

field gets focus or key press event.

3) Telephone number should be maximum 10 digit number only.

4) Email field should contain valid email address, @ should appear only

once and not at the beginning or at end. It must contain at least one

dot(.).

5) Make use of pattern attribute for email to accept lowercase, uppercase

alphabets, digits and specified symbols.

**********************************************************
**********************************************************
Name : -Div :-

Seat No :-

SOP 8 :

Create event driven JavaScript program for the following. Make use of

appropriate variables, JavaScript inbuilt string functions and control

structures.

To accept string from user and count number of vowels in the given

string.

**********************************************************
**********************************************************
Name : -Div :-

Seat No :-

SOP 9: Create JavaScript program which computes the average marks of

students. Accept six subject marks of student from user. Calculate

average marks of student which is used to determine the corresponding

grades.

Range Grade

35 to 60 F

61 to 70 D

71 to 80 C

81 to 90 B

91 to 100 A

**********************************************************
**********************************************************
Name : -Div :-

Seat No :-

SOP 10 : Write a PHP program to check if a person is eligible to vote or not. The

program should include the following-

Minimum age required for vote is 18.

Use PHP functions.

Use Decision making statement.

**********************************************************
**********************************************************
Name : -Div :-

Seat No :-

SOP 11 : Write a PHP program to save marks of English, Hindi, Marathi, Maths

and Information Technology in an array. Display marks of individual

subject along with total marks and percentage.

**********************************************************
******************************************************
Name : -Div :-

Seat No :-

SOP 12 : Write a program using PHP to calculate Electricity bill by accepting the

limits.

For first 100 units - Rs. 4

For next 100 units - Rs. 5

For next all units - Rs. 6

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

You might also like