Ej KRai A96 JORp CPT RZLa

1 Advanced Web Designing 1
Let us learn different versions supporting different

features. HTML5 is currently used
 Student can design the layout of web because it supports mobile technology.
pages using CSS. The major browsers are Google Chrome,
 Students can learn to design the Mozilla Firefox, Microsoft Edge, Safari,
website. Opera and Apple support the features of
HTML5.
 Student can design the web form
with validations. 1.2 Forms in HTML5
 Students can learn concept of image In eleventh standard we have studied

map and Iframe (inline frame). different controls related to form like text,
radio, checkbox, submit, reset, select and
 The aim is to give the skills to create textarea.
HTML WebPages, using HTML5
These controls are used to collect
and CSS.
different kinds of user inputs, such as
contact details like name, address, single
1.1 Advanced Web Designing or multiple options from group of options,
as well as clearing and submitting data
We have been introduced to basic
etc.
terminologies related to creation of web
pages. The Hypertext Mark-up Language HTML5 has introduced additional
(HTML) is an evolving language, with form controls which can also be used for
validation purpose.
HTML5 advanced <input> elements
HTML5 introduces a number of new input type values for the type attribute of
<input> tag.
Input type Description
<input type="color"> Defines a color picker
<input type="number"> Defines a field for entering a number
<input type="url"> Defines a field for entering a URL.
<input type="image"> Defines an image as a submit button.
<input type="date"> Defines a date picker with the year, month and day
<input type="email"> Defines a field for an e-mail address
1
Input type Description
Defines a month and year control in format is
<input type="month">
"YYYY-MM"
<input type="range"> Define a range control. Default range is 0 to 100.
Defines a date picker that includes the year, month,
<input type="datetime-local">
day and time.
<input type="time"> Defines a control for entering a time.
<input type="week"> Defines a week and year control.
Defines a text field for entering a search string like
<input type="search">
a site search or Google search.
Defines a file-select field and a "Browse" button for
<input type="file">
file uploads.
Used to define input fields that should contain a
<input type="tel">
telephone number.
Input Restrictions
A list of some common input restrictions is given below, few of which can be used
for validation purpose.
Attribute Description
disabled Specifies that an input field should be disabled.
max Specifies the maximum value for an input field.
min Specifies the minimum value for an input field.
pattern Specifies a regular expression to check the input values.
read only Specifies that an input field is read only (cannot be changed).
This acts as a temporary label showing the purpose of a text field
placeholder
without requiring a label tag.
required Specifies that an input field is required (must be filled out).
Specifies whether a form or input field should have autocomplete On
autocomplete
or Off.
Specifies that the input field should automatically get focus when the
autofocus
page loads.
height and Specifies the height and width of an <input type="image">
width
Specifies that the user is allowed to enter more than one value in the
multiple
<input> element. This works with input types like email and file.
2
Some other useful attributes used with <input> are-
1. id : This is used to identify the html element uniquely through the document object
model.
2. class: It is used to apply CSS style to the individual input element.
Examples :
<!DOCTYPE html> <html>
<head>
<title>Forms in html 5 </title></head>
<body>
<form> Name: <input type="text"autocomplete><br><br>
E-mail:<input type="email" name="email"><br><br>
Date of Inception: <input type="date" name="bday"><br><br>
Office time: <input type="time" name="usr_time"><br><br>
Number of years completed(between 1 and 100): <input type="number" min="1"
max="100"><br><br>
Office phone number: <input type="tel" name="phone" pattern="[0-9]{2}-[0-9]
{10}" required><br><br>
Add your homepage:
<input type="url" name="homepage"><br><br>
<input type="image" src="E:/submitbutton.png" alt="click here to submit" >
</form>
</body>
</html>
The output is as follows
Do it Yourself
1. Use multiple attribute in <input>
2. Use pattern attribute in <input>
and see the Output.
1.3 <meta> tag

The meta tag is a tag in html that
describes some aspects of contents of a
webpage. The HTML <meta> tag is used
by search engines to search information
3
that is provided with the webpage. This is empty tag (singular tag) which carries
information within its attributes. The <meta> tag is placed between the <head>and
</head> tags. Metadata will not be displayed on the webpage.
Attribute of <meta> tag
Attribute Values Description
Name The value of the name attribute Specifies the Name of the meta-
can be related to any of the data like the author, keywords or
following- i) Author ii) Description description.
iii) Keywords iv) copyright
e.g. <meta name = "author" >
Content It can have any textual matter
related to the name as in eg.
i. <meta name = "author" content Here content of author is
= "Balbharti"> balbharati.
ii. <meta name = "description" Here the value for content attribute
content = "Advance web de- specifies name of the topic
signing"> advance web designing.
iii. <meta name = "keywords" Here the values for content
content = "html5, learn html5, attribute are given as keywords
list in html 5"> like html5 , learn html5 etc.
Charset UTF-8, Big5 Specifies the character encoding

e.g used by the document, This is
<meta charset="UTF-8"> called a character encoding
<meta charset="Big5"> declaration.
UTF-8 For Indian characters
Big5 – for Chinese characters
http-equiv refresh , set-cookie, content-type, Used for http response message
expires, headers.
e.g. <meta http- Here the page will get refresh after
equiv="refresh"content="5"> every 5 seconds.
<meta http-equiv="set-cookies"> The browser sends the cookies
<meta http-equiv="content- back to the server.
type"content="text/ Specifies the character encoding
html"charset="Big5"> for the document
<meta http-equiv="expires" Here page session will get expire at
content="userid=pqr; specified date and time.
expires=Wednesday, 8-feb-2018
23:59:59 GMT;">
4
Example:
<!DOCTYPE html>
<html>
<head>
<title>meta tag
examples</title>
<meta name = "authors" Selector : Selector indicates the HTML
content = "Balbharti"> element you want to style. It could be
<meta name = "description" content = any tag like <h1>, <body> etc.
"Advance web designing"> Declaration Block : The declaration
<meta name = "keywords" content = block can contain one or more
"html5, learn html5, list in html5"> declarations separated by a semicolon.
<meta name="copyright" content
For the above example, there are two
= "copyright Balbharti All right
declarations:
Reserve">
</head> 1. color : yellow;
<body> 2. font-size :11 px;
<p> Welcome to HTML5 Each declaration contains a property
</p> name and value, separated by a colon.
</body>
Property : A Property is a type of
</html>
attribute of HTML element. It could be
color, border etc.
1.4 Cascading Style Sheets in HTML5
Value : Values are assigned to CSS
CSS stands for Cascading Style properties. In the above example, value
Sheets. CSS describes how HTML "yellow" is assigned to color property.
elements are to be displayed on screen, Selector{Property1: value1; Property2:
paper, or in other media. CSS saves a value2}
lot of work. It can control the layout
Types of CSS
of multiple web pages all at once. CSS
allows you to control the look and feel There are three methods of
of several pages by changing a single implementing styling information to an
source. HTML document.
1. Inline CSS
CSS Syntax
2. Embedded stylesheet or Internal
 A CSS rule set contains CSS
 a selector and
3. External CSS
 a declaration block.
1. Inline stylesheet : It uses the style
attribute in the HTML start tag.
5
Inline CSS is used to apply CSS on a </style></head>
single line or element. <body>
For example : <h1>The internal style sheet is applied
on this heading.</h1>
<p style="color:blue">Hello CSS</p> <p>This paragraph will not be affected.
2. Embedded stylesheet or internal </p>
</body>
CSS : This is used to apply CSS on
</html>
a single document or page. It can
affect all the elements of the page. It The output of above program is as
is written inside the style tag within follows-
head section of html.
For example :
<!DOCTYPE html>
<html>
<head>
<style>
h1{color: Red;}
CSS Properties
Property Use Value Example
Color Changes the color of the text Color name h1{color: maroon}
Background-color To set the background color Color name body{background-
in your webpage color:yellow}
Font-weight Used to bold text bold or 100, p{font-weight:300}
200…900
Font-style Used to italicize text Italic, oblique or p{font-style:italic}
normal
Text-decoration This property is used to add p{text-decoration:
1. strike-through marks 1. line-through underline}
2. underline 2. underline a{text-decoration:
3. overstrike 3. overline none}
4. to remove underlines from 4. none
links
Text-align This property is use to left, right, center h1{text-
control the horizontal or justify align:center}
alignment of any block-level
text that are paragraphs,
tables and other elements
Font-family This is used to control the Font name p{font-
fonts family:arial}
6
Property Use Value Example
Font-size This property allows you to px, in, mm, cm, p{font-size:10px}
control the size of the font pt
Letter-spacing This helps in controlling the px, in, mm, cm, h1{letter-spacing:
horizontal spacing between pt 5pt}
characters of text
Padding This property is used when Pixel h1{padding:30px}
you want to add padding
(blank spaces) around the
content of an element.
Border This property adds a border Solid, double, h1{border:double}
to a webpage element groove, ridge,
inset, outset,
dotted or dashed
Background-image To set an image as the url(''X'') body{background-
background of your webpage where X is the image:
path of image url('background.
file jpg')}
Background-repeat To set the background image repeat no-repeat background-repeat:
to repeat or not repeat
background-repeat:
no-repeat
Margin-Left Sets margin area on the left px,pt,cm etc. h1{margin-
side of the element. left;10px}
3. External stylesheet : The external An external style sheet can be written

style sheet is generally used when you in any text editor, and must be saved
want to make changes on multiple with a .css extension. The external css
pages. It facilitates to change the look file should not contain any HTML tags.
of the entire web site by changing
just one file. It uses the <link> tag on Here is how the "style.css" file looks
every page and the <link> tag should like:
be put inside the head section. Style.css
For example : h1{color:navy;margin-left:20px}
<!DOCTYPE html> The output is as follows
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<h1>This is a heading</h1>
</body></html>
7
CSS Id Selector The class name should not start
The Id selector selects the id with number.
attribute of an HTML element to Let's take an example with a class "intro".
select a specific element. An id is
always unique within the page so it is <!DOCTYPE html>
unique element. It is written with the <html>
<head>
hash character(#), followed by the id
<style>
name.
.intro{text-align:center;color:blue}
<!DOCTYPE html> </style></head>
<html> <body>
<head> <h1 class="intro">This heading is blue
<style> and center-aligned.</h1>
#para1{text-align: center; color: blue} <p class="intro">This paragraph is
</style> blue and center-aligned.</p>
</head> </body>
<body> </html>
<p id="para1">Hello Students</p> The above code results as
<p>This paragraph will not be
affected.</p>
</body>
</html>
Class Selector for specific element
See the output as follows
To specify only one specific HTML
element should be affected then you
should use the element name with class
selector.
Let's see an example :
<!DOCTYPE html>
<html><head><style>
p.intro {text-align: center;color: blue}
CSS Class Selector
</style></head>
The class selector selects HTML <body>
elements with a specific class attribute. <h1 class="intro">This heading is not
It is used with a period character '.' affected</h1>
(full stop symbol) followed by the class <p class="intro">This paragraph is
name. The Class selector is used when blue and center-aligned.</p>
you want to change a group of elements </body></html>
within your HTML page.
8
The output is as follows h1{ text-align:center;color:blue}
h2{ text-align:center;color:blue}
p {text-align:center;color:blue}
As you can see, you need to define
Universal Selector CSS properties for all the elements. It
The universal selector is used as can be grouped as-
a wildcard character. It selects all the h1,h2,p{ text-align:center;color:blue}
elements on the Webpages.
Let`s see full code as follows :
<!DOCTYPE html>
<!DOCTYPE html>
<html><head><style> <html>
* { color: green; font-size: 20px;} <head>
</style></head> <style>
<body> h1,h2,p{text-align: center; color: blue}
This css style will be applied on Entire </style>
page.It does not check tag or plain </head>
text<br> <body>
<h2>This css is applied to heading <h1>Hello Heading 1</h1>
</h2> <h2>Hello Heading 2 (In smaller
<p id="para1">it is applied to first font)</h2>
paragaraph</p> <p>This is a paragraph.</p>
<p>Also to second paragraph !</p> </body>
</body> </html>
</html>
Output :
Output :
Group Selector
The grouping selector is used to select Positioning in CSS
all the elements with the same style CSS helps to position the HTML
definitions. It is used to minimize the elements. The position property is used
code. Commas are used to separate each to set position for an element. The
selector in grouping. element can be positioned using the top,
Let's see the CSS code without group bottom, left and right properties.
selector.
9
Syntax : Output :
Selector{position:value;top:value;
left:value:bottom:value;right:value}
Where values in positions are fixed,
absolute, relative and values of top,
bottom, left, right are in pixels 3. Relative Positioning : The relative
There are four types of positioning in positioning property is used to set the
CSS element relative to its normal position.
1. Static Positioning : This is a by- 4. Absolute Positioning : This property

default position for HTML elements. sets an element in a specific location
It is not affected by the top, bottom, and it is not affected by the flow of
left and right properties. the page. This property positions the
element at the specified coordinates
2. Fixed Positioning : This property relative to your screen top-left corner.
helps to put the text fixed on the
For example :
browser. The FIXED property forces
an element into a fixed position <!DOCTYPE html>
relative to the browser window. The <html><head><style>
fixed element will not move, even .first{position: relative;top: -10px;
when the page is scrolled. right: -10px;}
h2{position: absolute;
Let`s see the example : left:100px;top:150px}
<!DOCTYPE html> </style></head><body>
<html><head><style> <h1 class="first">This is heading 1
p.fixed{position: fixed; top: 50px; right: </h1>
5px; color: blue} <h2>This is heading 2</h2>
</style></head> </body></html>
<body> Output :
<p>This is paragraph 1</p>
<p class="fixed">This is the fix
positioned text.</p>
</body>
</html>
10
In above output the Level 1 headings <h2 class="float-right">Balbharati
with class=“first"have a relative position </h2>
10 pixels above and 10 pixels to the right <p>This text rearranges itself to flow
of it’s original position. around the element that is floated
right. </p>
All level 2 headings will be positioned
</body></html>
100 pixels from the left of the browser
window and 150 pixels from the top of Output
the browser window.
Float Property
Float is a CSS property written in CSS
file or directly in the style of an element.
Display property
The float property defines the flow of
content. The Display property in CSS defines
how the components (div, hyperlink,
Following are the types of floating
heading, etc) are going to be placed on
properties :
the web page. It specifies how the element
1. float : left : This keeps the element is displayed. As the name suggests, this
float on left side of the container property is used to define the display of
2. float : right : This keeps the element different parts of a web page.
float on right side of container Syntax :
3. float : none : This is default property Display : value;
i.e. this shows the element as it is.
Where values are :
For example :
Inline : It is used to display an element as
<!DOCTYPE html> an inline element.
<html><head>
<title>Float Example</title> Block : It is used to display an element
<style> as an block element. It starts on a new
.float-left{float:left;font- line, and takes up the whole width of the
size:20px;background-color:gold} browser window.
.float-right{float: right;
Inline-Block : This value is very similar
font-size:20px;background-color:gold}
to inline element but the difference is that
</style></head><body>
<h2 class="float-left">Balbharati you are able to set the width and height.
</h2><p>This text rearranges itself to None : The element is completely
flow around the element that is floated removed.
left.
</p>
11
Let's see an example Output :
<!DOCTYPE html>
<html>
<head> Based on the CSS properties studied
<style> so far, the representation of semantic tags
p{ displayed in 11th standard textbook can
display: inline; be coded as follows.
}
</style> Example 1 :
</head> Use of semantic tags and CSS.
<body>
<p>welcome to balbharti</p> <!DOCTYPE html>
<p>Javascript</p> <html>
<p>HTML5</p> <head>
<p>CSS</p></body></html> <style>
header{background-color:pink;width:1
Output :
00%;height:20%}
nav{background-
color:skyblue;width:100%;height:20%}
aside{background-color:grey;width:40
Example 2 :
%;height:42%;float:right}
<!DOCTYPE html> section{background-color:lightyellow;
<html lang="en"> width:60%;height:10%;float:left}
<head> article{background-color:violet;width:
<title>Example of CSS display</title> 60%;height:40%}
<style type="text/css"> footer{background-color:orange;width
a{ :100%;height:10%}
display : block;
</style>
background-color:orange;
</head>
}
</style> <body>
</head> <header>
<body> <h1>HTML5 includes new
<p> semantics</h1>
<a href="https://www.ebalbharti.in" > <p>It includes semantic tags like
Visit balbharti</a> header, footer, nav
<br> <h1>Example of complete HTML5
</p></body> Basics</h1>
</html> <h2>The markup of the future under
12
development.</h2></p></header> forum posts or individual comments.</p>
<nav>The nav element represents a section of </article>
navigation links. It is suitable for either site
<footer>© 2018 Balbharti.</footer>
navigation or a table of contents.<br>
<a href="/">http://www.w3schools.com</a><br> </body></html>
<a href="http://www.ebalbharati.in">Balbharti
website</a><br></nav>
1.5 Ordered list or numbered list
<aside> The <ol> tag defines an ordered
<h1>Other education based websites of State</h1> list. An ordered list can be numerical or
<a href="http://mahahsscboard.ac.in">State
alphabetical.
Board website</a><br>
<a href="http://unipune.ac.in">Pune university Attributes of <ol> tag-
website</a><br>
</aside>
<section> Type "1" 1 is default value and
<h1>Impressive Web Designing</h1> /"a"/"I"/"i" other values specify
<p>The aside element is for content the numbering type for
that is tangentially related to the content around the used items.
it, and is typically useful for marking up
sidebars.</p> Reversed Reversed This attribute specifies
</section> that the items of the
<section> list are specified in the
<h1>Articles on:Article tag</h1>
reverse order.
</section>
<article> Start Number Specifies the starting
<p>The article element represents an number of the first
independent section of a document, page or site. item in an ordered list.
It is suitable for content like news or blog articles,
13
<!DOCTYPE html> Output :
<html><body>
<h3>List of Topics</h3>
<ol>
<li>Basics of IT</li>
<li>HTML 5</li>
<li>PostgreSQL</li>
</ol>
<h3>List of Topics start with series 1.6 Unordered list or bulleted list
50</h3>
<ol start="50"> An unordered list created using the
<li>Basics of IT</li> <ul> tag, and each list item starts with
<li>HTML 5</li> the <li> tag. The list items in unordered
<li>PostgreSQL</li> lists are marked with bullets (small black
</ol></body></html> circles), by default.
Output : Example : 1
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Unordered
List</title>
</head>
<body>
<h3>HTML Unordered List</h3>
<ul>
<li>HTML 5</li>
Example 2 : <li>PostgreSQL</li>
</ul></body></html>
<!DOCTYPE html>
<html>
Output :
<body>
<h3>List of Topics in reverse
sequence</h3>
<ol reversed>
<li>HTML 5</li>
<li>PostgreSQL</li>
</ol></body></html>
14
Attributes of <ul> tag
Type = disc/ style="list-style-type:disc" Sets the list item marker to a
circle/square e.g bullet (default)
(use style (css) <ul style="list-style-type:disc;">
instead of type style="list-style-type:circle"
attribute in
e.g
HTML5.
<ul style="list-style-type:circle"> Sets the list item marker to a
Type attribute is circle
supported by style="list-style-type:square"
previous e.g
versions of <ul style="list-style-type:square"> Sets the list item marker to a
HTML) square
style="list-style-type:none"
e.g
The list items will not be
<ul style="list-style-type:none;">
marked
Note : HTML5 does not support bullets, <body>

circle and square value of type attribute <h3>Example of HTML definition
instead you use CSS style. List</h3>
<dl>
1.7 Definition list <dt><b>Web</b></dt>
To define a definition list <dl> tag is <dd>The part of the Internet that
used. You can create items in definition contains websites and web pages</dd>
<dt><b>HTML</b></dt>
list with the <dt> and <dd> tags. The <dt>
<dd>A markup language for creating
tag is used to define the term whereas
web pages</dd>
the <dd>tag is used to define the term’s <dt><b>CSS</b></dt>
definition. <dd>A technology to make HTML look
Type the following code better</dd>
</dl>
<!DOCTYPE html>
</body>
<html>
</html>
<head>
<title>definition List</title>
</head>
15
Output : Multi level list :
<!DOCTYPE html>
<html >
<head>
<title>nested list</title>
</head>
<body>
<h3> Multi-level list Nested List</h3>
Nested list <ul>
List within another list either order <li>Daily computing</li>
list or unordered list is called nested list. <li>Web design</li>
<ol>
Examples : Single level nested list
<li>html 5</li>
<!DOCTYPE html> <li>hyperlink</li>
<html > <li>Inserting Images</li>
<head> </ol>
<title>Example of HTML nested list</ <li>Javascript</li>
title> <ul style="list-style-type:circle">
</head> <li>conditional structure</li>
<body> <ul style="list-style-type:square">
<h3>HTML Nested List</h3> <li>If statment</li>
<ol> <li>If else statement</li>
<li>Introduction to IT</li> <li>case statement</li>
<li>Introduction to DBMS</li> </ul>
<ul style="list-style-type:circle"> <li>loop statement</li>
<li>Definition of DBMS</li> </ul>
<li>applications of DBMS</li> </ul>
<li>Advantages of DBMS</li> </body>
</ul> </html>
<li>Postgresql</li>
</ol></body></html> Output :
Output :
16
1.8 Inserting audio and video in Attributes of <audio> tag
HTML 5
HTML5 new specifications enables The audio will
users to have a far more control over start playing as
audio on webpages. Autoplay -
soon as it is
HTML5 features include native audio ready
and video support without the need for The audio
Flash. HTML5 includes special elements controls should
(tags) allowing to include video and Controls - be displayed
audio and to define controls. (i.e. play/pause
button etc.)
Common Audio Formats :
The audio will
mp3 : An audio format from
start over
MPEG(Moving / Motion Pictures Experts loop - again, every
Group). time it is
aac : Advanced Audio Coding, standard finished
format on Iphone, YouTube etc. This Specifies
ogg : An Open container and free audio that the audio
muted -
format. output should
be muted
<Audio >Tag
Specifies the
The <audio> element enables you to src URL URL of the
embed(or add) audio files on Webpages. audio file
Declare the audio tag, and specify
Example :
the source attribute with the Audio file
location. <!DOCTYPE html>
<html>
Syntax :
<body>
<audio src="sample.mp3" type="audio/ <p>Audio Sample</p>
mpeg" controls> <audio controls>
</audio> <source src="test.mp3" type="audio/
mp3">
Note: Autoplay, controls, muted are
</audio>
without any values. Browsers have
</body></html>
their own policies. Autoplay attribute is
supported by Microsoft Edge or Firfox, Output :
when the permission from 'Privacy &
Security' panel is set as 'Allow Audio
Autoplay'.
17
In previous code <video>Tag
The controls attribute is used to add The HTML <video> tag is used to
audio controls such as play, pause, and embed video into your web page, it has
volume. several video sources.
The"source"element is used to specify There are three different formats that
the audio files which the browser may are commonly supported by web browsers
use. – .mp4, .Ogg and .WebM.
Adding audio with multiple sources :
Syntax :
Multiple sources of audios are
<video src="URL" controls></video>
specified so that if the browser is unable
to play the first source then it will Attributes of <video> tag :
automatically jump to the second source.
<source> tag Attribute Values Description
The <source> tag is used to specify Defines link to
Src URL
multiple media resources for media video file
elements. It is used with <audio> and Specifies that
<video> both. the video will
autoplay - start playing as
Example : soon as it is
ready
<!DOCTYPE html>
<html> Specifies that
<body> video controls
<p>Audio Sample</p> should be
controls -
<audio controls autoplay> displayed (such
<source src="test.mp3" as a play/pause
type="audio/mp3"> button etc).
<source src="test.ogg" Sets the height
type="audio/ogg"> height Pixels of the video
<source src="test.opus" player
type="audio/ogg"> Specifies that
</audio> the video will
</body> loop Value start over again,
</html> every time it is
finished
Output : Specifies that
the audio output
muted -
of the video
should be muted
18
Attribute Values Description Output :
Specifies an
image to be
shown while the
video is
poster URL
downloading, or
until the user
hits the play
button
Specifies if and
1. auto how the author
2. metadata thinks the video
preload
3. none should be 1.9 Image map in HTML 5
loaded when the An image with multiple hyperlinks is
webpage loads called an image map.
Sets the width
Image map is used to connect links
width Pixels of the video
to different regions on the webpage. An
player
Image map is created by marking certain
The <source> tag is used to specify regions on an image clickable. These
multiple media resources for video as clickable regions are called as hotspots.
well as audio media elements. Image Maps are of two types; Client
Side and Server Side. We will confine
Example :
only to Client Side image map. The tags
<!DOCTYPE html> used to define client side image map are
<html> 1. <Img> : It is used to insert an image
<body> on a web page. To create a client side
<video width="320" height="240" image map usemap attribute of <img>
controls> is used with value which is preceded
<source src="movie.mp4" with a # symbol. The usemap attribute
type="video/mp4"> acts as a pointer which indicates that
<source src="movie.ogg" type="video/ the image is a client side image map.
ogg">
2. <map> : It has only one attribute
Your browser does not support the
name. It specifies name of the image
video tag.
used for client side image map. The
</video></body></html>
value of the name attribute is the
value specified in usemap attribute of
<img>.
19
3) <area> - It defines specific clickable Example : Image Map with element
regions. A given <map> element can <map> and <area>
contain multiple <area> element
within it.<area> is singular tag and
<!DOCTYPE HTML>
<map> is paired. <html>
Attributes of <area>: <head><title>image map</title>
</head>
Attribute Description <body>
<h1>An example of Image Map
Defines the URL to which </h1>
the clickable region <img src="Tulips.jpg"
Href
within the image-map usemap="#imagemap" alt="Image of
navigates. Tulip">
It can value rect, circle or <map name="imagemap">
Shape <area href="http://www.google.com"
poly.
shape="rect" coords="0,0,93,65"
Specifies co-ordinates of alt="google site"/>
the clickable regions on <area href=" great_wall_china.html"
the image-map. shape="circle" coords="118,140 ,40"
Rect- specifies alt=" great wall of china"/>
rectangular area with <area href="http://mahahsscboard.
four co-ordinates. in" shape="poly"coords
Circle-Defines a circular ="145,187,198,215,245,280,305"
region. It requires three alt="maharashtra stateboard site"/>
coords co-ordinates. </map>
Poly-Defines a polygon </body></html>
region with co-ordinates (In the above program great_wall_
specifying each point on china.html is a local file created on the
the polygon. It requires machine.)
four co-ordinates.
Default-Region covers
the entire image. No 1.10 Inline Frame in HTML5
co-ordinates are required The <iframe> element creates an
inline frame. Inline frames are often used
Specifies extra
in online advertising, where the contents
information about
of the <iframe> is an advertisement
alt clickable area. It is the
alternative text to the from an external party. HTML5 allows
clickable region. the incorporation to be seamless (no
scrollbars, borders, margins etc).
20
Attributes of <iframe> : 1.11 Website Hosting
Attribute Values Description In this chapter we have seen how to
Specifies the create a website. But just creating of a
address of the website is not sufficient. One has to make
Src URL document to the website available on the Internet.
embed in the These web pages are to be stored in the
<iframe> web servers that are connected to the
Specifies the Internet, to be made available to others.
Height Pixel height of an
<iframe> What is web hosting?
Specifies the Web hosting is the service of providing
Width Pixels width of an storage space. The website is made
<iframe> available on the Internet with the help of
Specifies name of web hosting.
Text an <iframe>
Name What is Web Host?
Specifies the The companies that provides web
HTML_ HTML content of hosting services are called web hosts.
srcdoc
code the page to show Web hosts own and manage web servers.
in the <iframe> These web servers offer uninterrupted
Internet connectivity.
For example :
Types of Web hosting :
<!DOCTYPE html>
<html> Types of web hosting are
<body> 1. Shared hosting : It is cost effective. It
<h2>HTML Iframes</h2>
gives domain name to your website.
<p>This is the example of iframes.</p>
<iframe src="abc.html" height="200" 2. Free hosting : There are some hosting
width="300"></iframe> websites which provide you free
</body> hosting of the website for limited
</html> period of time.
Output : 3. Dedicated hosting : These are paid

hosting servers for large websites.
Note : You can buy your own web server

space, but it is the most expensive way
to publish your website. Though it is
very expensive, but it gives you a lot of
control over your website.
21
For information purpose only
Prerequisites for Free Web Hosting : webpages including image, audio
1. Three to Four pages website having files etc) and click on "Logout"
first or Home Page named as index. 10. Your website is ready with the sub
html. domain as 000webhostapp.com
2. Computer with internet connection. e.g.it-xi-textbook.000webhostapp.
3. Gmail id with password. com
4. Need to toggle between two websites Acquire Domain Name :
https://www.000webhost.com/ and 1. Open the website https://my.freenom.
http://my.freenom.com com
5. Have to acquire free web space from 2. From Use social sign in Click on
web server named 000webhost.com. "sign in" Login with your gmail id
6. Have to acquire domain name for and give password
your website from my.freenom.com. 3. Click on "Services" --> Register a
7. Park the website domain address with New Domain
free server website i.e. with 000web- 4. Type your website name and click on
host.com. "check availability" button
Redirect the domain free server name 5. Choose any domain(e.g. .tk,.ml.cg
to the domain website i.e. with my. etc) and click on "Get it now" if avail-
freenom.com. able click on "CheckOut" button
Steps to Acquire free webspace : 6. Set the free period to host the website,
1. Open the website https:// click on "Continue" button
www.000webhost.com/ 7. From Review &Checkout page if the
2. Click on free signup Login with your Total Due is $0.00 then only select
email id and password terms and conditions
3. verification email will be send to your 8. Click on "Complete Order" button e.g.
email it-xi-textbook.tk
4. open your email and click on "verify 9. From Order Confirmation Screen
email" click on "Click here to go to Client
5. Click on "Get Started" Area" button
6. From My Website page click on Park the website domain :
"+Create New site" button Go to http://www.000webhost.com
7. Type your website name and any website perform the following steps first
password 1. Select "MyWebsite"--> "Manage
8. e.g. website name as :- it-xi-textbook Website" -->dashboard-->Tools-->
9. From File Manager box select "Up- Set Web Address
load" option to upload your web pag- 2. Click on "+Add domain" button then
es. Home page of the website must be select radio button Park domain and
named as "index.html" (Select all then click on "Next" button
22
3. Type the site URL acquired by you 2. "My Domains"-->"Manage Domain"
from Freenom.com e.g. it-xi-textbook. 3. From Domain details screen click on
tk. (Remember don’t give http or / or "Management Tools" -->
any special character) "Nameservers"
4. Then click on "Park domain" button. 4. Change the radio button to "Use
5. You may see domain status as custom nameservers (enter below)"
"pending" for sometime. Once it is and type the NameServer1 as
through from the 000webhost side you "NS01.000WEBHOST.COM"and
can see the domain status as "parked". NameServer2 as
6. Configure your domain's DNS "NS02.000WEBHOST.COM"
provider to point to the 5. Click on "Change Nameservers"
ns01.000webhost.com and button
ns02.000webhost.com as your 6. Logout from the my.freenom.com
nameservers. 7. Type the website address in the
Redirect the domain to free server : browser's address bar to view your
Now follow the final steps given website
below through my.freenom.com website 8. The website can also be seen from
1. Sign in to my.freenom.com click on your mobile. Hosting is done.
"Services"-->
Summary
 Html5 has introduced new types in <Input> like number, date, Tel, email, search,
URL, range, month, week, color.
 Few attributes of <Input> can be used for validation purpose.
 <meta> is used by search engines to search information that is provided with the
webpage. It is inserted in the <head>
 CSS- Cascading Style Sheet describes how HTML elements are to be displayed
on screen, paper, or in other media.
 CSS syntax Selector{Property1: value1; Property2: value2}
 The <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical.
 An unordered list created using the <ul> tag, and each list item starts with the <li>
tag. The list items in unordered lists are marked with bullets (small black circles),
by default.
 To insert Audio and Video in a web page, <audio> and <video> are used which
specifies the source with the file location.
 An image with multiple hyperlinks is called an image map. The usemap attribute
acts as a pointer which indicates that the image is a client side image map.
 The <iframe> element creates an inline frame.
23
Exercise
Q 1. Fill in the blanks. Q2. State whether the following

statement is True or False.
1. The………………element is a
staring element in an HTML, it 1. HTML is an Object Oriented
indicates that document type Programming Language.
definition being used by the 2. Charset is used for character
document. encoding declaration.
2. The……………. is a tag in html 3. An unordered list can be
that describe some aspects of numerical or alphabetical.
contents of a webpage.
4. Multilevel list can be created in
3. The <ol> tag defines HTML 5.
an……………… 5. Srccode specifies the HTML
4. An unordered list is created using content of the page to show in the
the…………….. tag. <iframe>
6. The ‘controls’ attribute is not
5. T h e … … … … … … … e l e m e n t
used to add play, pause, and
creates an inline frame.
volume.
6. …………….tag is used to specify 7. .cs is the extension of CSS file
video on an HTML document.
Q.3. Choose Single correct answer
7. If a web developer wants to add
from the given options.
the description to an image he
must use ……… attribute of 1. ………………….element used
<img> tag. to create a linking image.
8. The……………… property is a) <img> b) <td>
used to set position for an element. c) <map> d) <usemap>
9. The float property defines 2. The ……………tag is used to
the………………..of content. embed audio files on Webpages.
10. ………………is used with a) <sound> b) <audio>
elements that overlap with each c) <video> d) <embeded>
other.
24
3. A programmer wants to define 4. Client-side image map can be
range for age between 18 to 50, created using two elements
he will use a form with following …………… and………...
appropriate control. a) <area> b) <image>
a) number b) compare c) <usemap> d) <map>
c) range d) Textboxes e) <server>
4. ……….character is used to Q.5. Choose Three correct answers
create id in CSS. from the given options.
a) % b) $
1. Attributes of <area> tag
c) @ d) # is……………………..
a) href b) src
Q 4. Choose Two correct answers from c) coords d) data
the given options. e) alt f) usemap
1. List within another list 2. Attributes used with iframe
either………list or………list is are………………..
called nested list.
a) srcdoc b) name
a) multilevel b) order
c) att d) src
c) unordered d) general
e) href f) loop
e) cascading
3. Following are the Form
2. Image maps are of two types
controls……………
……...........and …………..........
a) Network side a) email b) search
c) label d) video
b) Client Side
e) tel f) audio
c) Computer side
4. Attributes used with <audio>
d) Server Side tag…………………………..
e) n-computing
a) autoplay b) href
3. A CSS rule set contains………..
c) controls d) cntrl
and……………………...............
e) loop f) bgsound
a) Set b) selector
c) post
d) declaration block e) < >
25
5. CSS types are …………………, 1. The background colour of the
………...... and………………… company name should be in
green.
a) internal b) external
2. The text colour of the
c) control d) inline
company name should be red.
e) loop f) style
3. The heading should be large
with font ''comic sans ms''
6. Positioning types in CSS 4. The description of the
are…………………… company should be displayed
in blue color in a paragraph.
a) Static b) fixed
c) absolute d)position 2) Write Html5 code with CSS as
follows-
e) dynamic f) nested
1. To create form to accept
7. Types of floating properties
name,age, email address,
are………,…………, …………..
from the user.
a) left b) zero 2. Create a submit button to
c) right d) all send the data.
e) none f) dock 3. The heading of the form
should have a background
colour and a different font
Q. 6. Match the pair style.
A B
a) Client side 3) Write Html5 code with CSS as
1) <ul>
image map follows-
2) usemap b) CSS Property 1. Create ordered list with names
c) bulleted list of tourist Cities.
3) color
d) Image as a 2. Create unordered list with
4) <Img>
submit tourist places of those cities.
button 3. Divide the list into two
5) <Input type =image> e) inserts an sections left and right by
image using CSS.
Q.7. Programs.

1) Write a program using html with
following CSS specification-
26

Ej KRai A96 JORp CPT RZLa

Uploaded by

Copyright:

Available Formats

You might also like

Ej KRai A96 JORp CPT RZLa

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ej KRai A96 JORp CPT RZLa

Uploaded by

Copyright:

Available Formats

1 Advanced Web Designing 1

Let us learn different versions supporting different

 Students can learn concept of image In eleventh standard we have studied

1.3 <meta> tag

Charset UTF-8, Big5 Specifies the character encoding

3. External stylesheet : The external An external style sheet can be written

1. Static Positioning : This is a by- 4. Absolute Positioning : This property

Note : HTML5 does not support bullets, <body>

Output : 3. Dedicated hosting : These are paid

Note : You can buy your own web server

Q 1. Fill in the blanks. Q2. State whether the following

You might also like