Scribd
Upload
89 views

12 Practical Web Design

Uploaded by

neetasangolkar2575
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
89 views

12 Practical Web Design

Uploaded by

neetasangolkar2575
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/ 16

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 centre 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.

Form controls
A form is a collection of different elements also called as controls like textbox,
radio button, checkbox, submit button and many more.
Attributes used with form element and Input element.
<Form> tag can have following attributes
1) Name : It specifies a name to a form.
2) Action : The action attribute specifies the path where the form is to be
submitted. When user clicks on submit button if the action attribute is
committed, the action is set to the current page.
3) Method : The method attribute specifies get or post method to be used when
submitting the form data. Method of from are GET or POST

The <Input> tag


The <Input> tag is used to specify the different types of controls by using
type attribute. Syntax of using <Input> with type attribute is;
Cascading Style Sheets in HTML5
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to
be displayed on screen, paper, or in other media. CSS saves a lot of work. It can
control the layout of multiple web pages all at once. CSS allows you to control the
look and feel of several pages by changing a single source.
CSS Syntax
1) A CSS rule set contains
2) A selector and
3) A declaration block.
Progarm:-
sop 1:-Part 1

<!DOCTYPE html><html><head><title>Tata group</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">Tata sons private limited</h1><p>

66%of the equity share capital of Tata Sons is held by philanthropic trusts,which
support education,health,livelihood generation and art and culture. Each Tata
company or enterprise operates independently under the guidance and
supervision of its own Board of directors.</p>

<b>Governance Philosophy</b><br><br>

<i>Tata Code of conduct </li><br><br>

<u>Tata Bussiness Excellence Model(TBEM)</u><br><br>

<h3>Image of Tata industries</h3>

<Img src =" C:\Users\ASM\Downloads\tata.jpg"width="200"height="250"

alt="Tata Industries"><br><br>

<a href="C:\Users\lenovo\Desktop\ 12 th science\sop 1 part 2.html">click


here</a></body></html>
Sop 1 part 2

<!DOCTYPE html>

<html><head><title> forms </title>


<meta charset="utf-8">

<meta name="author" content="form">

<style>

h1{border-style:dashed}

body{background-color:aqua}

</style> </head>

<body>

<h1 align="center">Enrollment form </h1>

<form name="f1">

enter your name <input type="text"name="t1"required> <br><br>

enter your email id. <input type="email"name="email id"> <br><br>

<input type="submit"name="submit btn"value="submit">

</form><a href="c:\users\lenovo\desktop\sop1 pat1.html">clickhere</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 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 stylesheet for the left and right section with
background color and font styles.

Types of CSS
There are three methods of implementing styling information to an HTML
document.
1. Inline CSS
2. Embedded stylesheet or InternalCSS
3. External CSS
1. Inline stylesheet : It uses the style attribute in the HTML start tag. Inline CSS is
used to apply CSS on a single line or element.
For example : <p style="color:blue">Hello CSS</p>
2. Embedded stylesheet or internal CSS : This is used to apply CSS on a single
document or page. It can affect all the elements of the page. It is written inside
the style tag within
head section of html.
For example :
<!DOCTYPE html>
<html>
<head>
<style>
h1{color: Red;}
</style></head>
<body>
<h1>The internal style sheet is applied
on this heading.</h1>
<p>This paragraph will not be affected.
</p>
</body>
</html>
3. External stylesheet : The external style sheet is generally used when you want
to make changes on multiple pages. It facilitates to change the look of the entire
web site by changing
just one file. It uses the <link> tag on every page and the <link> tag should be put
inside the head section.
An external style sheet can be written in any text editor, and must be saved with a
.css extension. The external css file should not contain any HTML tags. Here is
how the "style.css" file looks like:
Style.css
h1{color:navy;margin-left:20px}
For example :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<h1>This is a heading</h1>
</body></html>

Program:-
<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>
<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>
</body>
</html>
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).

Inserting audio and video in HTML 5


HTML5 new specifications enables users to have a far more control over audio on
webpages.
HTML5 features include native audio and video support without the need for
Flash. HTML5 includes special elements (tags) allowing to include video and audio
and to define controls.
Common Audio Formats :
mp3 : An audio format from MPEG(Moving / Motion Pictures Experts Group).
aac : Advanced Audio Coding, standard format on Iphone, youtube etc.
ogg : An Open container and free audio format.
<Audio >Tag
The <audio> element enables you to embed(or add) audio files on Webpages.
Declare the audio tag, and specify the source attribute with the Audio file
location.
Syntax : <audio src="sample.mp3" type="audio/mpeg" controls>
</audio>
Program:- audio.html
<!DOCTYPE html>
<html>
<head>
<Title>Inserting audio files</Title>
</head>
<body bgcolor="red">
<h1>AUDIO</h1>
<audio controls autoplay>
<Source src="C:\Users\Public\Music\Sample Music\Sleep Away.mp3"
type="audio/mpeg">
</audio></body></html>
audio1.html
<!DOCTYPE html>
<html>
<head>
<Title>Multiple audio files with controls</Title>
</head>
<body >
<h1 align="center"> Multiple audio files with controls</h1>
<h2> The text between audio tags will only be displayed in browsers that do not
support the audio element</h2>
<h3>List of sound file formats</h3>
<ol>
<li>mp3.audio/mpeg</li>
<li>ogg.audio/ogg</li>
<li>wav.audio/wav</li>
</ol>
<audio controls autoplay>
<Source src="E:/XII Sci IT 2022-23/sound/test.wav" type="audio/wav">
<Source src="E:/XII Sci IT 2022-23/sound/test.mp3" type="audio/mp3">
<Source src="E:/XII Sci IT 2022-23/sound/test.ogg" type="audio/ogg">
Tour 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).

HTML5 features include native video support without the need for Flash.
HTML5 includes special elements(tags) allowing to include video to define
controls.
<video>Tag
The HTML <video> tag is used to embed video into your web page, it has several
video sources.
There are three different formats that are commonly supported by web
browsers– .mp4, .Ogg and .WebM.
Syntax :
<video src="URL" controls></video>
The <source> tag is used to specify multiple media resources for video as well as
audio media elements.
Program: Video.html
<!DOCTYPE html>
<html><head>
<title>Single video files on web page with controls</title></head>
<body><h1 align="center">
Single video file on web page with controls</h1>
<Video src="C:\users\public\videos\Sample video\Shutle.mp4" controls
width="150" height="150" loop=-1 autoplay>
</video></body></html>
Video1.html
<!DOCTYPE html>
<html><head>

<title>Multiple video files on web page with controls</title></head>

<body><h1 align="center">

multiple video file on web page with controls</h1>

<h2>The text between the video tags will only be displayed in browsers that do
not support

the video element</h2>

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

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

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

<li>WebM-vfideo/webM<li></ol>

<video controls width="300" height="300" autoplay>

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

<source src="video_ogg.ogg" type="video/ogg">

<source src="video_webm.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 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.

Image map in HTML 5An image with multiple hyperlinks is called an image
map.Image map is used to connect links to different regions on the webpage. An
Image map is created by marking certain regions on an image clickable. These
clickable regions are called as hotspots.
Image Maps are of two types; Client Side and Server Side. We will confine only to
Client Side image map. The tags used to define client side image map are
1. <Img> : It is used to insert an image on a web page. To create a client side
image map usemap attribute of <img> is used with value which is preceded with a
# symbol. The usemap attribute acts as a pointer which indicates that the image is
a client side image map.
2. <map> : It has only one attribute name. It specifies name of the image used for
client side image map. The value of the name attribute is the value specified in
usemap attribute of <img>.
3) <area> - It defines specific clickable regions. A given <map> element can
contain multiple <area> element within it.<area> is singular tag and <map> is
paired.
Attributes of <area> tag are as follows:-
Program:-
<!DOCTYPE html>
<html>
<head><Title>image mapping</title>
</head>
<Body>
<h1 align="center"> Program for Image Mapping</h1>
<img src="C:\Windows\Web\Wallpaper\Landscapes\img8.jpg"
usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="397,460,527,524" href="http:\\www.google.com"
alt="Google website">
<area shape="circle" coords="1004,509,60"
href="C:\Users\lenovo\Documents\Arpita\Javascript part2.html" alt="SOP 2">
<area shape="Poly" coords="570,700,571,823,729,820"
href="http://www.Yahoo.com" alt="Yahoo website">
</map>
</body>
</html>

You might also like