13. Explain CSS Univesal Selector.

character, denoted by an
Ans, The universal selector s Used as wildcard
matches everysingle element on the page. asterisk
14, Explain CSS Group Selector, style rules
Often several selectors in astyle sheet share the same
Ans.
can group them into a comma-separated list to minimize the
code in
aino prevents youfrom repeating the same style rules over and over again,
declarations.
your style sheet,Yo
15. Explain Positioning in CSS.
Ans,: Positioning elements appropriately on the web pages is a necessity for a go04
layout design.
Syntax is
Selector(position:value; top:valuebottom:valueleft:value;right:value)
Following are four(4) methods in CSS that you can use for positioning elements
1) Static Positioning :
static positionisthe default position for html element, Astatic positioned
A
elemen
is always positioned according to the normal flow of the page. HTML elemens
positioned static by default. Static positioned elements are not affected by the top, bottor
left, right, and z-index properties.
2) Fixed Positioning
This property helps to put the text fixed on the browser.
3) Relative Positioning:
The relative positioning property is used to set the element relative to its norml
position.
4) Absolute Positioning
This property sets an element in a specific location and it is not affected by the flow
of the page.
16. Explain Float Property
Ans.: Float is a CSS property written in CSS file . It defines the flow of
the content.
Following are the types of floating properties:
1. float:left: this keeps theelement float on left side of the
container
2. float : right: this keeps the element float on right side of
3. float: none : this is default property i.e. this shows the
container
17.
element as it is.
Explain Display Property.
Ans. : The display property defines how the
web pag. components are going to be placed on u
Syntax :
display : value;
 where values are:
inline sit is used to display an elernent as an inline elemert.
block :it is used to display an element as an block element. it starts on a new
line, and takes up the whole width of the browser window.
block-inline :this value is very similar to inline elernent but the difference is that
you are able to set the width and height.
none : the element is completely removed.
1.5 Ordered List or Numbered List

18. Explain Ordered list or Numbered List.

or alphabetical.
Ans. : The <ol> tag defines the ordered list. It can be numbered
Attributes used are -
Attribute Values Description
"1" 1is default value and other values specify the numbering
Type
/"a"/""/"" type for the used items.
list are
Reversed Reversed This attribute specifies that the items of the
specified in the reverse order.
Specifies the starting number of the first item in an
Start Number
ordered list.

1.6 Unordered List or Bulleted List

19. Explain Unordered list or Bulleted List. list.

Unordered list is created by <u> tag. It is also called as bulleted
Ans. :
Values Description
Attribute
square, disc.
Disc, Square, circle Defines the type of the list as circ le,
Type Default is disc.

1.7 Definition List

Nested list.
20. Explain Definition List &
Ans.: Definition List : The <d> element is used in
created using <d> element.
The definition list is specify a term, and the <dd> element which
which
conjunction with the <d> element
specify the term's definition.
Nested List called nested list.
either ordered or unordered list is
List within another list
 1.8 Inserting Audio and
Video in HTMI5 hopte
21. Explain caudio> tag with attributes.
Ans. : The newly introduced HTML5 <audio>inelement are provides a standard
audio in web pages. File formats supported audio mp3, aac, ogg etc. way to
tag is sued to add multiple files for media elements. The <SOemurbcee
Syntax is:
caudio src="music.mp3" type="audio/mpeg" controls> </audio>
Attributes of <audio> tag:
Attribute Values Description
Autoplay The audio will start playing as soon as it is ready
Controls The audio controls should be displayed
(i.e. play/pause button etc.)
loop Value The audio willstart over again, every time it is finishbed
muted This Specifies that the audio output should be muted
Src URL Specifies the URL of the audio file
22. Explain <video> tag with attributes.
Ans. : <video> tag
The newly introduced HTML5 <video> element provides a
video in web pages. File formats supported in video are mp4,standard way to embe
ogg, WebM etc. Th
<Source> tag is used to add multiple files for media elements.
Syntax is :
<video src="video.mp4" controls> </video>
Attributes of <video> tag are :
Attribute Values
Src
Description
URL Defines link to video file
autoplay Specifies that the video will start playing as soon as
it is ready
controls
Specifies that video controls should be displayed
(such as a play/pause button etc).
height Pixels Sets the height of the video player
loop Value
Specifies that the video will start over again, every
time it is finished
muted
Specifies that the audiooutput of the video should
be muted
poster URL
Specifies an image to be shown while the video is
downloading, or until the user hits the play buutton
 Attribute Values Description
preload 1. Auto Specifies if and how the author thinks the video
2. metadata should be loaded when the webpage loads
3. none
width Pixels Sets the width of the video player
1.9 Image map in HTML5
23. Explain Image Mapping.
Ans. :
1. An image map allows you to define hotspots on an image that acts just like a
hyperlink. Image maps are of two type Client side Image Maps and server Side
Image Maps.
2. Tags used to define Client Side Image Maps are :
1. <img> > It is used to insert image on the web page.
2. <map>.. </map> ’ It specifies name of the image used for client side image
map.
3. <area> ’ It defines the clickable region.
Attributes of <area> tag are :
Attribute Description
Href Defines the URL to which the clickable region within the image-map
navigates.
Shape It can value rect, circle or poly.
coords Specifies co-ordinates of the clickable regions on the image-map.
Alt Specifies extra information about clickable area. It is the alternative text
to the clickable region.

1.10 Inline Frame in HTML5

24. Explain <iframe> tag.
Ans. : An iframe or inline frame is used to display external objects including other web
pages within a web page, its is used for online advertisements etc. The <iframe> tag is
used to create inline frames.
Attibutes of ciframe> tag are :
Description
Attribute Values
the documernt to embed
Src URL Specifies the address of
theciframe>
an<iframe>
Height Pixel Specifies the height of
Width Pixels Specifies the width of an<iframe>
Name Text Specifies name of an <iframe>
srodoc
HTML_Code Specifies the HTML content of the page to show in the
<iframe>

1.11 Web Hosting

25. What is web hosting?
Ans. : Web hosting is the service of providing storage space. The website is made
available on the internet with the help of web hosting.
26. What is web host?
Ans.: The companies that provides web hosting services are called web hosts. Web host
Own and manage web servers. These web servers offer uninterrupted intemet
connectivity.
Types of web hosting:
Types of web hosting are :
1. Shared hosting : It is cost effective. It gives domain name to your website.
2 Free hosting: There are some hosting websites which provide you free
of the website for limited period of time. hosting
3.
Dedicated hosting : These are paid hosting servers for large
websites.
Programs for Practice
Examples of advanced input elements
1. Design a web page that should accept
user along with date and time Personal Details of the user i.e. name ofthe

Ans. : Coding:
values. The Page must contain submit button.
DOCTYPE html>
<htnl>
<head>
<title>
Form Date & Time elements
</title>
</head>
 <body>lieas
<form name-"f1">
Enter your name
<input type="text" name="tl" autocomplete="on"><brocbro
Set date
<input type="date"><br><br>
Set Month
<input type='month"><br><br>
Set Date
<input type="datetime-local"'><br><br>
Set time
<input type="time'><brs<br>
Set Week
<input type="week'><br><br>
<input type='submit" namne-"bl">
</form>
</body>
</html>
Output :
9 form elements

(’C File /XI%20SCI%20T%202020-21/htmi%20codes/tormhtmi

Enter your name Pooja

Set date 04/24/2020

Set Month January, 2e20

Set Datee1/23/2020 02:@3 PH

Set tune 12:00 PH

Set Week Week 14, 2920

Submit
 that should accept name of the user, Email TPS

2. years a web page

Designcompletedin office, Office phone nuumber(compulsory), image with1D, Nunmb
button.
Ans.: Coding:
<DOCTYPE html>

<html>
<head>

titles

heat
<body>
form name="f1"> 3

Enter your name A

<input type='text" nanme="t1" autocomplete="off"><br><br»

Enter your Email ID
<input type='email" name="emailid"><br><br>
Number of Years completed (1-50)
<input type='number" min="1" max-"50"'><br><br>
Office Contact Number(in format of xX-XXXXXXXXXX)
cinput type='tel" name="contact' pattern="[0-9] (21-[0-9] {10)"
required><br><br>
<input type="image" src="E:\XI SCI IT 2020-21 \html codes\submitjpg
alt="Submit'" width="100" height="100">
</form>

</body>
</html>
Output :
VHTIALorm Input Types jvate M O Ofce Details

) File | E/XI%20SCIN201T%202020-21/htmi%20codes/olficehtmi
Enter your name Laxmi

Enter your Email D ux 2107dgmai.com

Number of Yearscornpleted (1-50) 23

Ofice Contact Nunber(in format of xXXXXKXAx) 021254689637

SUBMIT

3. Design a web page that should accept name of the user, select file for upload,
color picker tool, website URL, Search and submit button.
Ans. : Coding :
<!DOCTYPE html>
<html>
<head>
<title>
Form elements
</title>
</head>
cbody>
<form name="f1">
Enter your name
<input type="'text" name="t1"
Select File to upload autocomplete="on"><br><br>
<input type="file" name="newfile"s<br><br>
Pick your favourite Color
<input type="color" name='color"><br><br>
Enter your Webiste URL
<input type="url" name="website"
Search here
<input type='search" name="'s"><br><br>
placeholder="http:/ example.com"><brcbr>
 name of the
2 years compieted
Designa web page Officeacept
office,should
in that umber o
phone numbercompulsory), image with submi

buttom March 2
Ams. Coding:
<DOCTYPE htm

OHfceD s
Output :

3 Design a web p2ge that should 2ccept name of the user, select file for wplsad,
color picker tool, website URL, search and submit button
Ans. : Coding:
ADOCTYPE htrnb
htrn
head
<tifle
Forn elernents
</titles
</hezd>
body
<iorn arne f1>
Eriter yOur name
<input type-"text narne="t1 autocomnplete=on"xbor
Select File to upload
<input type=file arne-newfile >orcor
Pck your favourite Color
<input type= color narrne=olor orcbr
Enter your Webiste URL
<input type-"url name="website
Sezrch here placeholder="http/fexamplecomhodr
<ínput type-'search narne='sxbrbr
 accept name of the
2. Design a web
page that should
office, Office phone
number(compulsory), image Numbersubn
with
years completed in March
button.
Ans. : Coding :
<DOCTYPE html>

html>
<head>

<title>
Office Details

</title>
</head>

<body>
<form name="f1">

Enter your namne

autocomplete="off"><br><br>
<input type="'text" name="t1"
Enter your Email ID
<input type="'email"'name="emailid'><br><br>
Number of Years completed (1-50)
<input type='number" min="1" max="50"><br><br>
Office Contact Number(in format of xx-XXXXXXXox)
<input type="tel" name="contact' pattern="[09] (2)-[0-9] (10}"
required>cbr>cbr»
<input type="image" src="E:\X1 SCIIT 2020-21 \html codes\submit.jP8
alt-"Submit' width="100" height-="100">
</form>
</body>
</html>
Output :
7 HTML Form Input Types javat x Ofce Detals
’ C 0 File E/XI9520SCI%20IT%202020-21/htmis20codes/affice html

Enter vour narne Laxmi

Enter your Enail ID lax [email protected]

Number of Years completed (1-50) 23

Office Contact Nurnber(in format of xx xo)021254589632z

SUBMIT

3. Design a web page that should accept name of the user, select file for upload,
color picker tool, website URL, search and submit button.
Ans. : Coding:
<!DOCTYPE html>
<html>
<head>
<title>
Form elements
</title>
</head>
cbody>
<form name-"f1"s
Enter your name
input type="text" name="t1" autocomplete="on"><br<br>
Select File to upload
<input type="file" name="newfile"><br><br>
Pick your favourite Color
<input type="color" name="color'><br>cbr>
Enter your Webiste URL
<input type="url" name="website"
Search here placeholder='"http://example.com'><brcbr>
<input type="search" name="s"><br><br>
 value="Search">
Cinput tpe= submit name=bl"
</form
</body>
</html
Output:
7 LFa nputTypes jaatX S Fom elements

OFieEXI20SC20TS202020-21/htmi%20codes/search htm!

Enter O nme Mahesh

Select Fle to upioad Choose File ID new docCx

Psck yo favourte Color

Enter vour Webste URL htplexampile com

Serch bere

Searcht sta

4. Example of Meta tag

Ans. :

<DOCTYPE htmlb
<htmb
<head>
<meta charset="utf-8>
<meta name= keywords content-Form elements">
<meta narme= description content-input elements">
<meta name= author content=" thisauthor
<meta http-equiv= refresh content="5
url-file:/I/E:/XI%20SCI
%201T%202020-21/html%20codes/form.html'
</head>
<body>
<h2>Example of Meta tag</h2>
<D>This example shows the use of meta tag within an HTML
</body> </htmi> document</p7
Output :
HTM T a g n t
DNXoSCIN20rT202020-21/htm20code/meta htmt

Example of Meta tag

This exanple slhows he use of raeta tag wYthun an HT document

5. Example of Inline CSS

Ans. : Coding :
<!DOCTYPE html>
<html>
<head>
<title>
Inline CSS
</title>
</head
<body style=-"background-color:pink'>
<b style="color:red;font-size:25pt'>XII Science IT</b>
</body>
</html
Output:
9 inline CSS

File
E:/XU%205CT%20T96202020-21.
XII Science IT
 CSS
6. Example of Internal
Ans. :

Coding :
<DOCTYPE htmi
<html>
chead>
<title>
Internal CSS
</title>
<style>
h1{border-style:dotted )
body(background-color:skyblue)
</style>
</head>
<body>
hl align="center"'>Internal CSS</h1>
</body>
</html>
Output:
ernal CSS

O File EpAI620SCI%20rT%202020-21.

Internal CSS

7 Example of External CSS

Ans.
Coding:
Externalcss.html
<DOCTYPE htrnl>
 <html>
<head>
<title>
External CSS

</title>

<link rel="'stylesheet" type="text/css" href="style.css">

</head>

<body>
<hl align="center">Exterrnal CSS</hl>
<b>Like my web page</b>
</body>
</html>

Style.css
hl(color:green)
b{font-style:italic)
body(background-color:pink}
Output:
9 External CSS
+
File E:pXI1%20SCI%20IT%202020-21...

External CSS
Like WEY Web page
8. Example of Id selector
Ans. : Coding :
<DOCTYPE htmbb

<html>

<head>

<title>

ID Selector
</title>

<style>
#abc{letter-spacing 20pt,color:red)
</style>
</head>

<body>
<hl align="center"> Welcome</hi>
<b id="abc'>Welcome to my web page</b>
</body>
</htm>

Output:
1D Selector +

File EDAIS20SCI%201T%202020-21.

Welcome
W t
9. Example of Class selector
Ans. :
<!DOCTYPE htrml>
<html>
<head>
<title>
Class Selector
</title>
<style>
xyz(word-spacing:20ptbackground-color:aqual
</style>
</head>
<body>
<hl align="center">Welcome</hl>
<b class="xyz">Welcome to my web page</b>
</body>
</html>
Output:

3 Cass Selector

(’ C File| EDMIS%20SCI%201T%202020-21.. 9:

Welcome
Welcome to my web page
 Seler
Cnvesal
ramgiesf

Cniveral Seler

"paddingtasiorg,

h aligente Welcome</h1>
oMeácse to my we pages/b

Outgut

Welcome

11. Exarmple of Group selector

Ans,
Coding:
4DOCTYPE html>
htrnl>
heads
 Gropig Selectr

hlh2h3iciorg
</styie
<fheat

<hl alig-teNecoesfhb
h2 alignte>Tox/h
<h3 alignterLI/3
<fbodys
</htrmib
Output:

Welcome

LT

12. Example of Static Positioning in CSS.

Ans. :

DOCTYPE htrnb
<htrmi>
head>
<title>
Static Positioning
</title>
 <stvles
staticlpoosition staticolorgreen background-colorredpadding:2 mu
</style>
</head>

<hody>
p class="'static'>
Yoga is the best fitness regime for your body, heart and mind,
therapy to keep your mind and body calm. Nothing else wouldA Yoga is the bes
your mind and heart as Yoga does when you are suffering stress
help you alm
and
is the practice for ahealthy body, mind, soul and heart aniety
</p>
</body>
</html>

Output:
9 Static Positioning

t’ File E/XI%205CI%20IT%-202020-21.. 9:

13.
Example of Fixed Positioning in CSS.
Ans. :

Coding:
<!DOCTYPE html>
<html>
<head>
<title>
 Fixed Positioning
</title>
<style>
.fixed|position:fixed;color:green;top:15px;right:120px}
</style>
</head>
cbody>
<p>Yoga is the best fitness regime for your body, heart and mind</p>
<p>Yoga is the best therapy to keep your mind and body calm. </p>
heart </p>
<p class ="fixed'>Nothing else would help you calm your mind and
</body>
</html>

Output:
9 Static Positioning X +

OFile EXIS%20SCT%20IT%202020-21.. 9:
Yoga is the best fitness regime for your body, heart and mind
Nothing else would help you calm vor mind and heart
Yoga is the best therapy to keep vour mind and body calm

14. Example of Relative Positioning in CSS.

Ans. :
Coding :
<!DOCTYPE html>
<html>
<head>
<title>