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>
</html>
0 comments:
Post a Comment