Chapter 1:
Advanced Web Designing
Important Chapter for both
practicals and theory
Topics Of Html covered in
11th Std-(HTML 5)
• Heading level tags- H1 to H6
• Paragraph Tag-<p>
• Image Tag- <img>
• Break Tag- <br> and <hr>
• Input tag- <Input type=>
• <form> tag
Syntax of Html File
<html>
<head>
<title> </title>
</head>
<body>
<!-- Start your code here -->
</body>
</html>
Types Of Lists in Html
1. Ordered List(Also known as numbered list)
2. Unordered List(Also known as bulleted list)
3. Definition List
HTML Tag to add music or
sound on webpage
<audio>……</audio>
Attributes
<audio>……</audio>
1. Src(compulsory)-gives name of audio
file
2. Autoplay-audio plays automatically
3. Controls-display play and pause button
4. Loop- it play audio continuously
5. Muted-sound gets disabled
HTML Tag to add video on
webpage
<video>…….</video>
Attributes
<video>……</video>
1. Src(compulsory)-gives name of video file
2. Autoplay-video plays automatically
3. Controls-display play and pause button
4. Loop- it play video continuously
5. Muted-sound gets disabled
6. Height – changes the height of video display box
7. width – changes the width of video display box
<Iframe> tag
<iframe> tag is used to display content
like ads on website
The content of <iframe> tag is displayed
by third party
Its also known as floating frame or inline
frame
It’s a paired tag
(<iframe>…..</iframe>)
Attributes
<iframe>……</iframe>
1. Src(compulsory)-gives name of file
2. name- gives a name to inline frame
3. Height – changes the height of inline frame
4. width – changes the width of inline frame
5. Srcdoc-specifies the html content to be
displayed in inline frame
<meta> tag
<meta> tag is used by search
engine(google,yahoo etc) to display content of
website
Meta means about.It describes the content of
webpage
Its placed between <head>…..</head>
It’s a singular tag (<meta>)
<meta> tag makes no difference in the output
Attributes
<meta>
1. Name
Author Description Keywords Copyright
Attributes
<meta>
2.Content
It can contain any textual matter related to
website/webpage
Eg:<meta content=“musical website”>
Attributes
<meta>
3.Charset
(it describes the character encoding used)
Big5
UTF-8
Used for other characters like
Used for Indian characters japanese,chinese etc
Attributes
<meta>
4.http-equiv
(it describes how webpage will work internally)
refresh content Content-type expires
Eg:<meta http-equiv=refresh content=5>
Different shapes that can be
created in Image for mapping
polygon
Rectangle circle
Types of Image Maps
1. Client Side Image Mapping
2. Server Side Image Mapping
Tags Related to Image Map
<img>
<map>
<area>
Attributes
<area> (singular tag)
1. Href –specifies name of the file to which the clickable
region navigates
2. Shape- defines shape to be created in image.
– Rect for rectangle shape
– Circle for circular shape
– Poly for any other shape (even for triangle)
– Default for entire image(if user clicks anywhere on
image)
3. Coords-specifies the co-ordinates of shapes(default
shape has no co-ordinates)
4. Alt-it gives information about clickable region
For rectangle
shape there are 4
co-ordinates points
For any other
shape (poly)
the
co-ordinates
points
depends on the For circle shape
no of points there are 3
co-ordinates points
Forms in HTML5
• Html forms are used to make
interactive web-pages where input can
be taken from user.
• To create html forms we need different
Form Objects.
Form Objects Studied in 11th Std
1. Textbox
2. Textarea ……. For taking multi-line input
like address
3. Radio Buttons
4. Checkbox
5. Drop down list
6. Submit Button
7. Reset Button
Advanced Form Objects or
Advanced <input> tag
Advanced Form Objects or
Advanced <input> tag
Attributes of <input> tag used for
Form Validation
1. Disabled-specifies the <input> field is
disabled(can be used with all form objects)
2. required-specifies the <input> field is
required(can be used with all form objects
where fields cant be left blank)
3. autofocus-specifies the <input> field gets
automatically focussed when page loads in
browser(can be used with all form objects)
Attributes of <input> tag used for
Form Validation
4. readonly-specifies the <input> field is only
readable, values can’t be changed(can be
used with all form objects)
5. autocomplete-specifies the <input> field
values should be auto filled or not.
It has two values
– yes
– no
(mostly used with text fields)
Attributes of <input> tag used for
Form Validation
6. placeholder-with this attribute we can add a
temporary label to <input> fields(mostly
used with text fields)
7. height-specifies the height of <input> field
(used with <input type=image>)
8. width-specifies the width of <input> field
(used with <input type=image>)
Attributes of <input> tag used for
Form Validation
9. min-specifies the minimum value of
<input> fields(mostly used with date fields)
10. max-specifies the maximum value of
<input> fields(mostly used with date fields)
11.pattern-specifies the regular expressions or
pattern of values to be entered
in<input> field (used with <input type=tel>)
12. multiple-specifies that multiples values can
be entered in the <input> field (used with
<input type=email/file>,<select>)
