Advanced Web Designing
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 names such as first page as Index.html and second page as page2.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 enrolment form related
with theme chosen with features 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>
<title>RCP
Educational Trust</title>
<meta
charset="utf-8">
<meta
name="author"content="Physical Tags">
<style>
h1{border-style:dotted}
p{color:red;font-size:15pt}
body{background-color:pink}
b{text-decoration:overline}
u{text-align:right}
</style>
</head>
<body>
<h1
align="center">R. C. Patel Education Society</h1>
<p>We at R. C.
Patel Shirpur Education Soceity believe that
the path of success lies
in accepting challenges as opportunities for growth.
Our institution
inculcates the values of hard work and diligence amongst
its students enabling
them to overcome obstacles in the journey ...</p>
<b>RCP
I.T.</b><br><br>
<i>RCP Pharmacy
College</i><br><br>
<u>RCP
IMRD</u><br><br>
<h3>Image of
R.C.Patel College,Shirpur</h3>
<img
src="theme.jpg" height="300" width="300"
alt="RCP Trust"><br>
<a
href="page2.html">Second Page</a>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<meta
charset="utf-8">
<meta
name="author"content="Forms">
<style>
h1{border-style:dashed}
body{background-color:aqua}
</style>
</head>
<body>
<h1
align="center">Enrollment Form</h1><br>
<form
name="f1">
Enter Your Name:-
<input
type="text"name="t1"required>
<br><br>
Enter Your E-Mail ID:-
<input
type="email" name="emailID"><br><br>
<input
type="submit" name="submitbtn" value="Submit">
</form>
<a
href="index.html">First Page</a>
</body>
</html>
SOP 2 : Create a webpage using HTML and CSS
code to design a web page as the
layout displayed Below.
·
The top section will display the heading, ‘Tourist Places’ in the
header. The section on the left has list of cities. The right hand side
displays tourist places of any one of the city.
·
Use inline style sheet in the top section to display background
color for the text ‘Tourist Places’. Use internal style sheet for the left and
right section with background color and font style.
|
Tourist places |
|
|
City 1. Pune 2. Banglore 3. Hyderabad 4. Delhi |
Tourist places in
Pune • Shanivarwada • Kelkar Museum • Sinhgad fort |
Page1.html
<!DOCTYPE html>
<html><head><title>Tourist
Places</title>
<style>
section{background-color:pink;width50%;height50%;float:right}
aside{width:50%;float:left}
ol{font-style:italic;font-size:30pt;font-family:arial}
ul{font-weight:bold;font-size:20pt}
</style>
</head> <body>
<header
style="background-color:skyblue; height:100pt">
<h1
align="center">Tourist Places</h1>
</header>
<br>
<aside>
<h3>City</h3>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>hydarabad</li>
<li>Delhi</li>
</ol> </aside> <section>
<h3>Tourist Places
in Pune</h3>
<ul>
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad</li>
<li>Aga Khan
Palace</li> </ul> </section>
</body> </html>
SOP 3: Create a website using HTML and CSS code to design webpages
as follows –
·
The first webpage will accept the name of the traveller, date of
travel, telephone number. It also has submit button as an image.
·
The second webpage has information
about the name of
transporter, time, seat no and destination displayed one below the other in the form of unordered
list as
Name of transporter –
Air Asia
Time - 09:30 am
Seat no – B39
Destination - Delhi
Both pages should be
interlinked. Create external style sheet with relevant tags.
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>SOP 3</title>
<link rel="stylesheet" type="text/css"
href="external.css">
</head>
<body>
<h1 align="center">Traveller Information
Form</h1>
<form name="f1">
Enter Your Name : <input type="text"
name="name" autocomplete> <br><br>
Select Date of Travel : <input type="date"
name="trvdate"> <br><br>
Enter Telephone Number : <input type="tel"
name="phone" placeholder="123-456-7890"
pattern="[0-9]{3}-[0-9]{3} [0-9]{4}" required>
<br><br>
<input type="image" name=""
value="" placeholder="" src="submit.png">
</form>
<br><br>
<a href="page2.html">Second Page</a>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Transporter Information</title>
<link rel="stylesheet" type="text/css"
href="external.css">
</head>
<body>
<h1 align="center">Information about
Transporter</h1>
<ul>
<li>Name of Transporter - Air Asia</li>
<li>Time - 09 : 30 am</li>
<li>Seat No - B39</li>
<li>Destination - Delhi</li>
</ul>
<a href="page1.html">First page</a>
</body>
</html>
external.css
h1{
background-color:orange;
border-style: double;
}
body{
background-color: LightSalmon;
}
ul{
font-family: Arial;
list-style-type: none;
}
SOP 5 : 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 HTML5
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
<!DOCTYPE html>
<html>
<head> <title>Single Audio With Controls</title>
</head>
<body bgcolor=pink>
<h1 align="center">Audio
with Controls</h1>
<audio controls
Autoplay loop="-1">
<source
src="Symphony No.6 (1st movement).mp3" type="audio/mp3">
</audio>
</body> </html>
Audio1.html
<!DOCTYPE html>
<html>
<head>
<title>Miltiple
Audio Files With Controls</title>
</head>
<body>
<h1
align="center">Multiple Audio Files with
Controls</h1><br>
<h2>The text
between the audio tags will only be displayed in browsers that do not support
the audio element.</h2>
<h3>List of sound
files formats</h3>
<ol>
<li>mp3-audio/mpeg</li>
<li>ogg-audio/ogg</li>
<li>wav-audio/wav</li>
</ol>
<audio controls
autoplay>
<source
src="Symphony No.6 (1st movement).mp3"
type="audio/mpeg">
<source
src="Symphony No.6 (1st movement).ogg" type="audio/ogg">
<source
src="Symphony No.6 (1st movement).wav" type="audio/wav">
Your Browser does not
support the audio element.
</audio>
</body>
</html>
SOP 6: Use of
video on web pages using html5.
·
Create a webpage 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 plays a 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>
<head>
<title> Single video
File on Web page with Controls </title>
</head>
<body bgcolor=pink>
<h3 align=center>
Single Video File on Web page with controls </h3>
<video
src="sample_1920x1080.mp4" width="150"
height="150" loop=-1 autoplay controls>
</video>
</body>
</html>
Video1.html
<!DOCTYPE html>
<html>
<head>
<title> Multiple
Video on Web PAge With Controls</title>
</head> <body
bgcolor=aqua>
<h1 align=
"center">Multiple video File on Web Page with Controls</h1>
<h3> The text
bnetween the video tags will only be displayed in browser that do not support
the video element </h3>
<h2>List of Video
file Formats</h2>
<ol>
<li>mp3-video/mpeg </li>
<li>ogg-video/ogg</li>
<li>WebM-video/webM</li>
</ol>
<video controls
width="100" height="100" autoplay>
<source src="sample_1920x1080.mp4"
type="video/mp4">
<source
src="sample_1920x1080.ogg" type="video/ogg">
<source
src="sample_1920x1080.webm"
type="video/webM">
</video>
</body>
</html>
SOP 7 : 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 bmp 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.
Imagemap.html
<!DOCTYPE html>
<html>
<head>
<title>Image
Mapping</title>
</head>
<body>
<h1
align="center">Client Side Image Mapping</h1>
<img
src="nature.jpg" height="500" width="600"
alt="Nature" usemap="#myfile">
<map
name="myfile">
<area
shape="rect" coords="42,51,255,153"
alt="Rectangle"
href="https://www.youtube.com/watch?v=1JsH0Up_5Hc">
<area
shape="circle" coords="433,129,60" href="video.html">
<area
shape="poly"
coords="58,328,282,329,160,424,130,251,283,423"
href="http://www.google.com">
</map>
</body>
No comments:
Post a Comment