HTML

Programming Language:-
The language which is used to represent the instructions of a program to execute

it is called a programming language.
1.Compiled language:-
The language which consist of a compiler and produce errors on compile is
called compiled language.
Ex:- c,c++,java etc.
2. Interpreted language:-
The language which is based on parser and runs on browser and don’t produce
any error while running is called interpreted language.
Ex:- html,css,xml,javascript etc.
Static Website Dynamic Website
Prebuilt content is same every time Content is generated quickly and

the page is loaded. changes regularly.
It uses the HTML code for It uses the server side languages such as
developing a website. PHP,SERVLET, JSP, and
ASP.NET etc. for developing a website.
It sends exactly the same response It may generate different HTML for
for every request. each of the request.
The content is only changed when The page contains "server-side" code
someone publishes and updates the which allows the server to generate the
file (sends it to the web server). unique content when the page is loaded.
Flexibility is the main advantage of Content Management System (CMS) is

static website. the main advantage of dynamic website.
HTML:-
 HTML stands for Hyper Text Markup Language, which is the most
widely used language on Web to develop web pages.
 HTML was created by Tim Berners-Lee in late 1991 but "HTML 2.0"
was the first standard HTML specification which was published in 1995.
 HTML 4.01 was a major version of HTML and it was published in late
1999. Though HTML 4.01 version is widely used but currently we are
having HTML-5 version which is an extension to HTML 4.01, and this
version was published in 2012.
HyperText:-
It refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
Markup language:-
HTML is a Markup Language which means you use HTML to simply "mark-
up" a text document with tags that tell a Web browser how to structure it to
display.
Versions of HTML:-
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
Characteristics of HTML:-
1. HTML is used to create web-pages.
2. HTML used many tags to make a webpage. So it is a tag based language.
3. The tags of HTML are surrounded by angular bracket.
4. It can use wide ranges of colors, objects and layouts.
5. Very useful for beginners in web designing field.
Advantages of HTML:-
1. First advantage it is widely used.
2. Every browser supports HTML language.
3. Easy to learn and use.
4. It is by default in every windows so you don't need to purchase extra
software.
Disadvantages of HTML:-
1. It can create only static and plain pages so if we need dynamic pages then
HTML is not useful.
2. Need to write lot of code for making simple webpage.
3. Security features are not good in HTML.
4. If we need to write long code for making a webpage then it produces some
complexity.
Software requirement for html:-
1. An editor- notepad/notepad++/edit-plus/dream-weaver
2. A browser- google chrome/mozila/internet explorer/opera
How to start with HTML:-
HTML is a interpreted programming language where the codes are run in
browser because browser contain a parser which converts the text codes into its
appropriate meaning and display the output on the browser. Html codes consist
of tags.
Steps to write and run html:-
1. open any editor like notepad.
2. write your code.
3. save the file at any location with file extension “.html” or “.htm”
4. double click on the file to view the output.
Tag:-
Tag is an instruction or code must be enclosed within a pair of angular
bracket”<>” .
Types of tag:-
1.singular tag:-
The tag which once opened needn’t to be closed is called singular tag.
Ex:- <br>
2.paired tag:-
The tag which once opened must be closed with the help of “/” forward slash
symbol is called paired tag.
Structure of html/elements of html:-
1 <!DOCTYPE...>
This tag defines the document type and HTML version.
2 <html>
This tag encloses the complete HTML document and mainly
comprises of document header which is represented by
<head>...</head> and document body which is represented
by <body>...</body> tags. It is a paired tag.
3 <head>
This tag represents the document's header which can keep
other HTML tags like <title>, <link> etc. It is a paired tag.
4 <title>
The <title> tag is used inside the <head> tag to mention the
document title. It is a paired tag.
5 <body>
This tag represents the document's body which keeps other
HTML tags like <h1>, <div>, <p> etc. It is a paired tag.
Wap to print a message on the browser screen ?
<html>
<head>
<title>abc</title>
</head>
<body bgcolor=”red” text=”blue”>
</body>
</html>
Property of body tag:-
1. text=”colorname/colorcode”
2. bgcolor=”colorname/colorcode”
3. background=”path with file name.extension”
Line formatting tags:-
<br> tag:- it is a singular tag which is used to break an existing line.
Ex:- welcome to html programming<br>
<pre> tag:- it is a paired tag which is used to arrange the text in that manner in
which the user want to see like space gap etc.
Ex:- <pre>welcome to html</pre>
<hr> tag:- it is a singular tag which is used to draw horizontal ruler.
Properties:-
i. width=”per/px”
ii. size=”per/px”
align=”left/right/center”
Ex:- <hr width=”50%” size=10 align=”center”>
<p> tag:- it is a paired tag which is used to display large amount of text in
different-different paragraphs.
Ex:- <p>welcome to html programming</p>
<center> tag:-it is a paired tag which is used to display the text at center of the
page.
Ex:- <center>welcome to html</center>
Text formatting tags:-
<h1> to <h6> tags:- all are paired tags which are used to display the text in
heading in six different-different sizes.
Properties:
1. align=”left/right/center”
Ex:-
<h1>welcome to html</h1>
<b> tag:- it is a paired tag which is used to bold the text.
Ex:-<b>welcome to html</b>
<strong> tag:- it is a paired tag which is used to bold the text.
Ex:-<strong>welcome to html programming</strong>
<i> tag:- it is a paired tag which is used to italic the text.
Ex:- <i>welcome to html programming</i>
<em> tag:- it is a paired tag stand for emphasized tag which is used to italic the
text.
Ex:- <em>welcome to html programming</em>
<address> tag:- it is a paired tag which is used to italic the text.
Ex:- <address>welcome to html programming</address>
<u> tag:- it is a paired tag which is used to underline the text.
Ex:- <u>welcome to html programming</u>
<del> tag:- it is a paired tag which is used to strike through the text.
Ex:- <del>welcome to html programming</del>
<sup> tag:- it is a paired tag which is used to superscript the text.
Ex:- (a+b)<sup>2</sup>
<sub> tag:- it is a paired tag which is used to subscript the text.
Ex:- H<sub>2</sub>O
<small> tag:- it is a paired tag which is used to display text in small size.
Ex:- welcome to <small>html</small>
<mark> tag:- it is a paired tag which is used to highlight the text.
Ex:-welcome to <mark>html</mark>
<ins> tag:- it is a paired tage which is used to insert text.
Ex:- welcome to <ins>html</ins>
<q> tag:- it is a paired tag and is used for short quotation(“”).
Ex:- <q>welcome to html</q>
<blockquote> tag:- it is a paired tag that defines a section that is quoted from
another source.
Ex:- welcome to html program.
<blackquote>this is an example of blockquote</blockquote>
comment:- it is a paired tag which is used to deactivate a line of text.
Ex:- <!- -this is a comment line- ->
<script> tag:- used to write java-script programming and is a paired tag.
Ex:- <script language=”JavaScript”></script>
<applet> tag:- it is a paired tag and is used to create a window in java
programming.
Ex:-<applet code=”clasname” width=200 height=300 align=”center”></applet>
<style> tag:- it is a paired tage which is used to create style in css inside html.
Ex:- <stype type=”text/css”></style>
<bdo> tag:- it is a paired tag which is used to display the text as bidirectional
object.
Ex:- <bdo>welcome to html</bdo>
<progress> tag:- create a progress bar and is a paired tag.
Ex:- <progress value=”22” max=”100”></progress>
<meter> tag:- it is a paired tag which is used to create a meter bar to measure
progress.
Ex:-
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
<code> tag:- it is a paired tag and it format text in a document.
Ex:- <code>welcome to html</code>
<abbr> tag:- paired tag whose abbreviation is marked on the text.
Ex:- <p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
<kbd> tag:- used to display the text in a format in document and is a paired tag.
Ex:- <kbd>welcome to html</kbd>
<link> tag:- singular tag and is used for external css.
Ex:- <link rel=”stylesheet” type=”text/css” href=”abc.css”>
<s> tag:- it is a paired tag and is used to strike through the text.
Ex:- <s>welcome to html</s>
<strike> tag:- is a paired tag and is used to strike through the text.
Ex:- <strike>welcome to html</strike>
<var> tag:- it is a paired tag which is used to underline the text.
Ex:- <var>welcome to html</var>
<span> tag:- it is a paired tag which is used to color a part of the text.
Ex:- <p>welcome <span style=”color:red”>to html.
<caption> tag:- it is a paired tag which is used for table tag in which we can
define a heading for table with center alignment.
<caption>login info</caption>
<dl> tag:- paired tag stands for description list.
<dt> tag:- paired tag stands for description text.
<dd> tag:- paired tag stands for description data.
Ex:-
<html>
<head>
<title>abc</title>
</head>
<body bgcolor=”cyan” text=”red”>
<dl>
<dt>welcome to html</dt>
<dd> welcome to html </dd>
</dl>
<dl>
<dt> welcome to html </dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
<fieldset> tag:- it is a paired tage and it group related elements in a form.
<legend> tag:- it is a paired tage and it group related elements in a form.
Ex:-
<html>
<head>
<title>abc</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal database:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
<input type=”button” name=”submit”>
</fieldset>
</form>
</body>
</html>
<meta> tag:- singulat tag to describe metadata in html document.
Ex:-
<!DOCTYPE html>
<html>
<head>
<title>abc</title>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>
<nav> tag:- used to create a list of navigation elements.
Ex:-
<html>
<head>
<title>abc</title>
</head>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
Font tag:-it is a paired tag which is used to format the text.
Properties:-
i. size=”1 to 7”
ii. face=”stylename”
iii. color=”colorname/colorcode”
wap to format a text ?
<html>
<head>
<title>abc</title>
</head>
<body>
<font face=”monotype corsive” size=7 color=”red”> welcome to html
programming</font>
</body>
</html>
Link tag:-
used to create a hyperlink over text using anchor tage denoted by <a> which is a
paired tag.
Properties:-
i. href=”path with filename.extension”
ii. target=”anyreferencename”
wap to linking text ?
<html>
<head>
<title>abc</title>
</head>
<body>
<a href=”abc.html” >click me</a>
</body>
</html>
Marquee tag:-
It is a paired tag which is used to move the text from one direction to another
direction using following properties.
Properties:-
i. bgcolor=”colorname/colorcode”
ii. height=”per/px”
width=”per/px”
iv. direction=”left/right”up/down”
v. scrolldelay=”value”
vi. scrollamount=”value”
wap for marquee text ?
<html>
<head>
<title>abc</title>
</head>
<body>
<marquee direction=”right” bgcolor=”grey” height=50 width=”100%”
secolldelay=10 scrollamount=10>
<font size=7>this is the example of marquee text</font>
</marquee>
</body>
</html>
Image tag:-
It is a singular tage which is used to draw image on the screen.
Properties:-
i. src=”path with filename.extension”
ii. height=”per/px”
iii. width=”per/px”
iv. border=”value”
v. alt=”alternate name”
vi. border-color=”colorname/colorcode”
wap for creating an image ?
<html>
<head>
<title>abc</title>
</head>
<body>
<img src=”abc.jpg” height=”200” width=”45%” border=2 alt=”anil” border-
color=”red”>
</body>
</html>
Listing tag:-
It is the type of tag which is used to create ordered and unordered list elements
inside the web page using following tags:
1. <ul>:- it is a paired tag and is stand for unorder list.
Properties:-
i. type=”circle/disc/square/none”
2. <ol>:- it is a paired tag which stand for order list.
Properties:-
i. type=”1/i/I/a/A”
ii. start=”numeric value”
3. <li>:- it is a singular tag which is used to add list of elements to ul or ol tags.
Wap for list elements display ?
<html>
<head>
<title>abc</title>
</head>
<h1 align=”center”><u>food items</u></h1>
<h2>veg:-</h2>
<ul type=”square”>
<li>chilly mushroom
<li>paneer masala
<li>veg korma
</ul>
<h2>non-veg:-</h2>
<ol type=”1” start=”4”>
<li>chilly chicken
<li>egg masala
<li>mutton curry
</ol>
</body>
</html>
Nested list:-
When one or more than one type of list are nested inside another list then it is
called nested list.
Wap for creating this structure ?
Computer System
 Hardware
1. Input device
A. Mouse
B. Keyboard
2. Output device
 Monitor
 Printer
i. Laser printer
ii. Inkjet printer
 Software
I. System software
a. Windows
b. Linux
II. Application software
o Ms-office
o Vlc media player
<html>
<head>
<title>abc</title>
</head>
<body bgcolor=”green” text=”red”>
<h1 align=”center”><u>Computer System</u></h1>
<ul type=”disk”>
<li>Hardware
<ol type=”1”>
<li>Input device
<ol type=”A”>
<li>Mouse
<li> Keyboard
</ol>
<li>Output device
<ul type=”square”>
<li>Monitor
<li>Printer
<ol type=”i”>
<li>Laser printer
<li>Inkjet printer
</ol>
</ul>
</ol>
</body>
</html>
Frame tag:-
There are two types of frames available in html to create different size of
frames.
1. frameset:-
It is a paired tag. It must be written after head is closed. There is no body in
frameset. We can only use source file for webpage using frameset.
Properties:-
i. rows=”per/px”
ii. cols=”per/px”
iii. src=”path with filename.extension”
iv. name=”anyname”
wap for create this frame ?
<html>
<head>
<title>abc</title>
</head>
<frameset rows=”50%,50%”>
<frame src=”abc.html”>
<frame src=”xyz.jpg”>
</frameset>
</html>
Wap to create this frame ?
<html>
<head>
<title>abc</title>
</head>
<frameset cols=”50%,*”>
</frameset>
</html>
Note:- here “*” means rest of the percentage to be occupied.
Nested frame:-
When one or more than one frames are written inside another frame then it is
called nested frame.
<html>
<head>
<title>abc</title>
</head>
<frameset rows=”30%,40%,*”>
<frameset rows=”50%,*”>
</frameset>
</frameset>
</html>
<html>
<head>
<title>abc</title>
</head>
<frameset rows=”25%,50%,*”>
</frameset>
</frameset>
<frameset rows=”50%,*”>
</frameset>
<frameset cols=”25%,50%,*”>
</frameset>
</html>
2.iframe:-
It is a paired tag and must be specified inside body area. Used to create a frame
of user’s choice of size.
Properties:-
i. height=”per/px”
ii. width=”per/px”
iii. src=”path withfilename.extension”
wap for iframe ?
<html>
<head>
<title>abc</title>
</head>
<body>
<iframe src=”abc.html” height=”200” width=”40%”></iframe>
</body>
</html>
Wap for frame with target property ?
frame.html
<html>
<head>
<title>abc</title>
</head>
<frame src=”link.html” name=”left”>
<frame src=”” name=”right”>
</frameset>
</html>
link.html
<html>
<head>
<title>abc</title>
</head>
<body>
<a href=”red.html” target=”right”></a><br>
<a href=”green.html” target=”right”></a><br>
<a href=”blue.html” target=”right”></a>
</body>
</html>
red.html
<html>
<head>
<title>abc</title>
</head>
<body bgcolor=”red” >
</body>
</html>
green.html
<html>
<head>
<title>abc</title>
</head>
<body bgcolor=”green” >
</body>
</html>
blue.html
<html>
<head>
<title>abc</title>
</head>
<body bgcolor=”blue” >
</body>
</html>
Table tag:-
It is a paired tag which is used to create a table to store data in row and column
format.
Properties:-
i. height=”per/px”
ii. width=”per/px”
iii. border=”1 to 8”
iv. bgcolor=”colorname/colorcode”
v. background=”path with filename.extension”
vi. cellpadding=”value”
vii. cellspacing=”value”
viii. border-color=”colorname/colorcode”
note:- cellpadding is the distance between cell border and table border where as
cellspacing is the distanc between two consecutive cells.
Table tag consist of three sub tags, that are:
1.<tr>:- stand fo table row. It is a paired tag which is used to create a table row
having following properties.
i. align=”left/right/center”
ii. background=”path with filename.extension”
iii. bgcolor=”colorname/colorcode”
2.<th>:- stand fo table heading. It is a paired tag which is used to create a table
column heading having following properties.
3.<td>:- stand fo table data. It is a paired tag which is used to create a table data
having following properties.
wap to create student table having field roll,name,age and course ?
<html>
<head>
<title>abc</title>
</head>
<body bgcolor=”pink” text=”blue”>
<h1 align=”center”><u>student info.</u></h1>
<center>
<table width=300 height=200 border=3 cellpadding=5 cellspacing=5
bgcolor=”grey”>
<tr>
<th>roll</th><th>name</th><th>age</th><th>course</th>
</tr>
<tr>
<td>101</td><td>anil</td><td>28</td><td>phd</td>
</tr>
<tr>
<td>102</td><td>swarnaa</td><td>18</td><td>bca</td>
</tr>
<tr>
<td>103</td><td>ansu</td><td>0</td><td>null</td>
</tr>
</table>
</center>
</body>
</html>
Rowspan:- it is the merging of rows inside a table.
Colspan:- it is the merging of columns inside a table.
Wap to create train schedule using rowspan and colspan?
<html>
<head>
<title>abc</title>
</head>
<body bgcolor=”yellow” text=”indigo”>
<marquee direction=”right” bgcolor=”red”><font size=5” face=”lucida
handwriting”>welcome to Indian railways</font></marquee><br><br>
<center>
<h1><u>train schedule</u></h1>
<table width=500 height=250 border=3 cellpadding=5 cellspacing=5
bgcolor=”grey”>
<tr>
<th rowspan=2>train no.</th>
<th rowspan=2>train name</th>
<th colspan=2>place</th>
<th colspan=2>time</th>
<th rowspan=2>fare</th>
</tr>
<tr>
<th>from</th>
</th>to</th>
<th>arr. Time</th>
<th>dept. Time</th>
</tr>
<td>10110</td><td>tapaswini express</td><td>delhi</td><td>bbsr</td>
<td>12:00</td><td>12:30</td><td>2800.00</td>
</tr>
</tr>
<td>12310</td><td>konark express</td><td>mumbai</td><td>jammu</td>
<td>14:05</td><td>14:25</td><td>2230.00</td>
</tr>
</tr>
<td>21890</td><td>rajdhaniexpress</td><td>bangalore</td><td>kolkata</td>
<td>08:30</td><td>09:00</td><td>3200.00</td>
</tr>
</table>
Visit us at:<a href=””>www.indianrailways.co.in</a>
</center>
</body>
</html>
Form tag:-
Properties:-
i. name=”formname”
ii. method=”GET/POST”
iii. action=”filename.extension”
GET POST
1. Less secure. 1. More secure.
2. URL is visible on the address bar. 2. URL is invisible on the address bar.
3. Size for taking input of variable 3. Size for taking input of variable data
data is 2000 bytes. data is 4000 bytes.
Components of form:-
1.Textbox:-
<input type=”text” name=”t1” value=”” size=30 maxlength=20
placeholder=”enter name”>
2.Password:-
<input type=”password” name=”t1” value=”” size=30 maxlength=20
placeholder=”enter password”>
3.Textarea:-
<textarea rows=20 cols=30></textarea>
4.Radio button:-
<input type=”radio” name=”r” value=”male”>male<br>
<input type=”radio” name=”r” value=”female”>female
5.Checkbox:-
<input type=”checkbox” name=”c1” value=”painting”>painting<br>
<input type=”checkbox” name=”c2” value=”eating”>eating
6.Combobox:-
<select name=”nationality”>
<option value=”indian”>indian</option>
<option value=”chinese”>chinese</option>
</select>
(or)
<select>
<optgroup label="veg">
<option value="paneer"> paneer </option>
<option value="mushroom"> mushroom </option>
</optgroup>
<optgroup label="nonveg">
<option value="chicken"> chicken </option>
<option value="mutton"> mutton </option>
</optgroup>
</select>
7.Button:-
<input type=”button” name=”b1” value=”click”>
8.Submit:-
<input type=”submit” name=”b1” value=”submit”>
9.Reset:-
<input type=”reset” name=”b1” value=”reset”>
10.Color:-
<input type="color" name="favcolor">
11.Date:-
<input type="date" name="bday">
12.Datetime-local:-
<input type="datetime-local" name="bdaytime">
13.Email:-
<input type="email" name="email">
14.Month:-
<input type="month" name="bdaymonth">
15.Number:-
<input type="number" name="quantity" min="1" max="5">
<input type="range" name="points" min="0" max="10">
17.Search:-
<input type="search" name="googlesearch">
18.Telephone:-
<input type="tel" name="usrtel">
19.Time:-
<input type="time" name="usr_time">
20.Url:-
<input type="url" name="homepage">
21.Week:-
<input type="week" name="week_year">
22. file:-
<input type=”file” name=”f1”>
Wap to design a biodata page ?
<html>
<head>
<title>abc</title>
</head>
<h1 align=”center”><u>biodata form</u></h1>
<form name=”fm1” method=”POST” action=””>
First name:<input type=”text” name=”t1” placeholder=”enter first name”><br>
Last name:<input type=”text” name=”t2” placeholder=”enter last name”><br>
Email:<input type=”text” name=”t3” placeholder=”enter email id”><br>
Mob. No.:<input type=”text” name=”t4” placeholder=”enter mobile no.”><br>
Address:<textarea rows=4 cols=10>/textarea><br>
DOB:
<select name=”day”>
<option value=”day”>day</option>
<option value=”1”>1</option>
</select>
<select name=”mon”>
<option value=”day”>day</option>
<option value=”jan”>jan</option>
<option value=”feb”>feb</option>
<option value=”mar”>mar</option>
</select>
<select name=”year”>
<option value=”year”>year</option>
</select><br>
Hobbies:
<input type=”checkbox” name=”painting”> painting <br>
<input type=”checkbox” name=”listening to music”> listening to music”<br>
<input type=”checkbox” name=”reading novels”> reading novels <br>
Nationalities:
<select name=”nationality”>
<option value=”indian”>indian</option>
<option value=”chinese”>chinese</option>
</select><br>
Upload your resume:<input type=”file” name=”f1”><br>
<input type=”button” value=”submit”>
</form>
</body>
</html>
Wap to design a login page ?
<html>
<head>
<title>abc</title>
</head>
<font size=5 face=”lucida handwriting”><marquee bgcolor=”grey”>welcome
to login page</marquee></font>
<h1 align=”center”><u>login info</u></h1>
<center>
<form name=”form1” method=”POST” action=””>
<table height=150 width=250>
<tr>
<td>Enter id:</td><td><input type=”text” name=”text1” placeholder=”enter
your id”></td>
</tr>
<tr>
<td>Enter pwd:</td><td><input type=”password” name=”text2”
placeholder=”enter your password”></td>
</tr>
<tr>
<td align=”center”><input type=”button” value=”submit”></td>
<td align=”center”><input type=”button” value=”reset”></td>
</tr>
<tr>
<td><input type=”checkbox”>stay sign-in</td><td align=”right”><a
href=””>forgotten password ?</a></td>
</tr>
</table>
</form>
</center>
</body>
</html>
Animation in html:-
1.Audio:- for playing audio in html we use the following tag inside body part.
<bgsound src=”filename.mp3” loop=”infinite”>
(or)
<audio controls>
<source src="filename.mp3" type="audio/mpeg">
</audio>
2. Video:- for playing video in html we use the following tag inside body part.
<img dynsrc=”filename.mp4/flv/wav/3gp” height=200 width=200>
(or)
<embed src=” filename.mp4/flv/wav/3gp” align=”top/left/right/bottom”>
(or)
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
3.2d drawing:- used to draw 2d designs on the screen.
<svg> tag:- used to draw space for 2d components and is a paired tag.
Properties:
1. height=”per/px”
2. width=”pre/px”
Ex:- <svg height=200 width=200></svg>
Rectangle:- used to draw rectangle.
Ex:-
<html>
<head>
<title>abc</title>
</head>
<body>
<svg width="500" height="500">
<rect height="100" width="200" stroke="green" stroke-width="4"
fill="yellow">
</svg>
</body>
</html>
Circle:- used to draw circle.
Ex:-
<html>
<head>
<title>abc</title>
</head>
<body>
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"
fill="yellow">
</svg>
</body>
</html>
Square:- used to draw square.
Ex:-
<html>
<head>
<title>abc</title>
</head>
<body>
<rect height=”100” width=”100" stroke="green" stroke-width="4"
fill="yellow">
</svg>
</body>
</html>
Roundedsquare:- used to draw rounded square.
Ex:-
<html>
<head>
<title>abc</title>
</head>
<body>
<rect x="50" y="50" rx="30" ry=”30” height=200 width=200
stroke="green" stroke-width="4" fill="yellow">
</svg>
</body>
</html>
Roundedrectangle:- used to draw rounded rectangle.
Ex:-
<html>
<head>
<title>abc</title>
</head>
<body>
<rect x="50" y="50" rx="30" ry=”30” height=100 width=200
stroke="green" stroke-width="4" fill="yellow">
</svg>
</body>
</html>
Polygon- used to draw polygon.
Ex:-
<html>
<head>
<title>abc</title>
</head>
<body>
<polygon points="100,10,40,198,190,78,10,78,160,198" rx="30" ry=”30”
height=200 width=200 stroke="green" stroke-width="4" fill="yellow">
</svg>
</body>
</html>
Interview Questions
1.What is HTML5?
HTML5 is the next major revision of the HTML standard superseding HTML
4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and
presenting content on the World Wide Web.
2.Name some of the new features of HTML5.
HTML5 introduces a number of new elements and attributes that helps in
building a modern websites. Following are great features introduced in
HTML5 −
 New Semantic Elements − These are like <header>, <footer>, and
<section>.
 Forms 2.0 − Improvements to HTML web forms where new attributes
have been introduced for <input> tag.
 Persistent Local Storage − To achieve without resorting to third-party
plugins.
 WebSocket − A a next-generation bidirectional communication
technology for web applications.
 Server-Sent Events − HTML5 introduces events which flow from web
server to the web browsers and they are called Server-Sent Events
(SSE).
 Canvas − This supports a two-dimensional drawing surface that you can
program with JavaScript.
 Audio & Video − You can embed audio or video on your web pages
without resorting to third-party plugins.
 Geolocation − Now visitors can choose to share their physical location
with your web application.
 Microdata − This lets you create your own vocabularies beyond HTML5
and extend your web pages with custom semantics.
 Drag and drop − Drag and drop the items from one location to another
location on a the same webpage.
3.Which browsers support HTML5?
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and
Opera all support many HTML5 features and Internet Explorer 9.0 will also
have support for some HTML5 functionality.
The mobile web browsers that come pre-installed on iPhones, iPads, and
Android phones all have excellent support for HTML5.
4.Is HTML5 backward compatible with old browsers?
Yes! HTML5 is designed, as much as possible, to be backward compatible
with existing web browsers. New features build on existing features and allow
you to provide fallback content for older browsers. It is suggested to detect
support for individual HTML5 features using a few lines of JavaScript.
5.Are HTML tags case sensitive?
No!
6.What is the purpose of 'section' tag in HTML5?
This tag represents a generic document or application section. It can be used
together with h1-h6 to indicate the document structure.
7.What is the purpose of 'article' tag in HTML5?
This tag represents an independent piece of content of a document, such as a
blog entry or newspaper article.
8.What is the purpose of 'aside' tag in HTML5?
This tag represents a piece of content that is only slightly related to the rest of
the page.
9.What is the purpose of 'header' tag in HTML5?
This tag represents the header of a section.
10.What is the purpose of 'footer' tag in HTML5?
This tag represents a footer for a section and can contain information about the
author, copyright information, et cetera.
11.What is the purpose of 'nav' tag in HTML5?
This tag represents a section of the document intended for navigation.
12.What is the purpose of 'dialog' tag in HTML5?
This tag can be used to mark up a conversation.
13.What is the purpose of 'figure' tag in HTML5?
This tag can be used to associate a caption together with some embedded
content, such as a graphic or video.
14.What are custom attributes in HTML5?
A custom data attribute starts with data- and would be named based on your
requirement. Following is the simple example−
<div class="example" data-subject="physics" data-level="complex">
...
</div>
The above will be perfectly valid HTML5 with two custom attributes called
data-subject and data-level. You would be able to get the values of these
attributes using JavaScript APIs or CSS in similar way as you get for standard
attributes.
15.What is Web Forms 2.0?
Web Forms 2.0 is an extension to the forms features found in HTML4. Form
elements and attributes in HTML5 provide a greater degree of semantic mark-
up than HTML4 and remove a great deal of the need for tedious scripting and
styling that was required in HTML4.
16.What is the purpose of datetime input control in Web form 2.0?
It represents a date and time (year, month, day, hour, minute, second, fractions
of a second) encoded according to ISO 8601 with the time zone set to UTC.
17.What is the purpose of datetime-local input control in Web form 2.0?
It represents a date and time (year, month, day, hour, minute, second, fractions
of a second) encoded according to ISO 8601 with no time zone information.
18.What is the purpose of date input control in Web form 2.0?
It represents a date (year, month, day) encoded according to ISO 8601.
19.What is the purpose of month input control in Web form 2.0?
It represents a date consisting of a year and a month encoded according to ISO
8601.
20.What is the purpose of week input control in Web form 2.0?
It represents a date consisting of a year and a week number encoded according
to ISO 8601.
21.What is the purpose of time input control in Web form 2.0?
It represents a time (hour, minute, seconds, fractional seconds) encoded
according to ISO 8601.
22.What is the purpose of number input control in Web form 2.0?
This control accepts only numerical value. The step attribute specifies the
precision, defaulting to 1.
23.What is the purpose of range input control in Web form 2.0?
The range type is used for input fields that should contain a value from a range
of numbers.
24.What is the purpose of email input control in Web form 2.0?
This accepts only email value. This type is used for input fields that should
contain an e-mail address. If you try to submit a simple text, it forces to enter
only email address in email@example.com format.
25.What is the purpose of url input control in Web form 2.0?
This accepts only URL value. This type is used for input fields that should
contain a URL address. If you try to submit a simple text, it forces to enter only
URL address either in http://www.example.com format or in
http://example.com format.
26.What is the purpose of 'output' tag in HTML5?
HTML5 introduced a new element <output> which is used to represent the
result of different types of output, such as output written by a script.
27.What is the purpose of 'placeholder' attribute in HTML5?
HTML5 introduced a new attribute called placeholder. This attribute on
<input> and <textarea> elements provides a hint to the user of what can be
entered in the field. The placeholder text must not contain carriage returns or
line-feeds.
28.What is the purpose of 'autofocus' attribute in HTML5?
This is a simple one-step pattern, easily programmed in JavaScript at the time
of document load, automatically focus one particular form field.
29.What is the purpose of 'required' attribute in HTML5?
HTML5 introduced a new attribute called required which would insist to have
a value in an input control.
30.Can you use SVG tags directly in HTML5 without any plugin?
Yes! HTML5 allows embeding SVG directly using <svg>...</svg> tag.
31.Can you use MathML tags directly in HTML5 without any plugin?
Yes! The HTML syntax of HTML5 allows for MathML elements to be used
inside a document using <math>...</math> tags.
32.What are the drawbacks of cookies?
Cookies have following drawbacks−
 Cookies are included with every HTTP request, thereby slowing down
your web application by transmitting the same data.
 Cookies are included with every HTTP request, thereby sending data
unencrypted over the internet.
 Cookies are limited to about 4 KB of data . Not enough to store required
data.
33.What do you mean by session storage in HTML5?
HTML5 introduces the sessionStorage attribute which would be used by the
sites to add data to the session storage, and it will be accessible to any page
from the same site opened in that window i.e. session and as soon as you close
the window, session would be lost.
34.What do you mean by local storage in HTML5?
HTML5 introduces the localStorage attribute which would be used to access a
page's local storage area without no time limit and this local storage will be
available whenever you would use that page.
35.When a session storage data gets deleted?
The Session Storage Data would be deleted by the browsers immediately after
the session gets terminated.
36.When a local storage data gets deleted?
local storage data has no time limit. To clear a local storage setting you would
need to call localStorage.remove('key'); where 'key' is the key of the value you
want to remove. If you want to clear all settings, you need to call
localStorage.clear() method.
37.What is Server Side Events in HTML5?
Along with HTML5, WHATWG Web Applications 1.0 introduces events
which flow from web server to the web browsers and they are called Server-
Sent Events (SSE). Using SSE you can push DOM events continously from
your web server to the visitor's browser. The event streaming approach opens a
persistent connection to the server, sending data to the client when new
information is available, eliminating the need for continuous polling.
Server-sent events standardizes how we stream data from the server to the
client.
38.How to utilize a server-sent event in HTML5?
To use Server-Sent Events in a web application, you would need to add an
<eventsource> element to the document. The src attribute of <eventsource>
element should point to an URL which should provide a persistent HTTP
connection that sends a data stream containing the events. The URL would
point to a PHP, PERL or any Python script which would take care of sending
event data consistently.
39.What are the steps of server side scripts for SSE?
server side script should send Content-type header specifying the type
text/event-stream as follows−
print "Content-Type: text/event-stream\n\n";
After setting Content-Type, server side script would send an Event − tag
followed by event name. Following example would send Server-Time as event
name terminated by a new line character.
print "Event: server-time\n";
Final step is to send event data using Data − tag which would be followed by
integer of string value terminated by a new line character as follows−
$time = localtime();
print "Data: $time\n";
40.What are web sockets?
Web Sockets is a next-generation bidirectional communication technology for
web applications which operates over a single socket and is exposed via a
JavaScript interface in HTML 5 compliant browsers. Once you get a Web
Socket connection with the web server, you can send data from browser to
server by calling a send() method, and receive data from server to browser by
an onmessage event handler. Following is the API which creates a new
WebSocket object.
var Socket = new WebSocket(url, [protocal] );
Here first argument, url, specifies the URL to which to connect. The second
attribute, protocol is optional, and if present, specifies a sub-protocol that the
server must support for the connection to be successful.
41.What is the purpose of Socket.readyState atribute of WebSocket?
The readonly attribute readyState represents the state of the connection. It can
have the following values:
 A value of 0 indicates that the connection has not yet been established.
 A value of 1 indicates that the connection is established and
communication is possible.
 A value of 2 indicates that the connection is going through the closing
handshake.
 A value of 3 indicates that the connection has been closed or could not be
opened.
42.What is the purpose of Socket.bufferedAmount atribute of WebSocket?
The readonly attribute bufferedAmount represents the number of bytes of UTF-
8 text that have been queued using send() method.
43.What is the purpose of 'canvas' tag in HTML5?
HTML5 element <canvas> gives you an easy and powerful way to draw
graphics using JavaScript. It can be used to draw graphs, make photo
compositions or do simple (and not so simple) animations.
44.What is the purpose of 'audio' tag in HTML5?
HTML5 supports <audio> tag which is used to embed sound content in an
HTML or XHTML document. The current HTML5 draft specification does not
specify which audio formats browsers should support in the audio tag. But
most commonly used audio formats are ogg, mp3 and wav. You can use
<source> tag to specify media along with media type and many other
attributes. An audio element allows multiple source elements and browser will
use the first recognized format.
45.What is the purpose of 'video' tag in HTML5?
HTML5 supports <video> tag which is used to embed a video file in an HTML
or XHTML document.The current HTML5 draft specification does not specify
which video formats browsers should support in the video tag. But most
commonly used video formats are−
 Ogg − Ogg files with Thedora video codec and Vorbis audio codec.
 mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec.
You can use <source> tag to specify media along with media type and many
other attributes. An audio element allows multiple source elements and
browser will use the first recognized format.
46.What is Geolocation API in HTML?
HTML5 Geolocation API lets you share your location with your favorite web
sites. A Javascript can capture your latitude and longitude and can be sent to
backend web server and do fancy location-aware things like finding local
businesses or showing your location on a map. Today most of the browsers and
mobile devices support Geolocation API. The geolocation APIs work with a
new property of the global navigator object ie. Geolocation object which can
be created as follows:
var geolocation = navigator.geolocation;
The geolocation object is a service object that allows widgets to retrieve
information about the geographic location of the device.
47.What is purpose of getCurrentPosition() method of geolocation object of
HTML5?
This method retrieves the current geographic location of the user.
48.What is purpose of watchPosition() method of geolocation object of
HTML5?
This method retrieves periodic updates about the current geographic location of
the device.
49.What is purpose of clearPosition() method of geolocation object of
HTML5?
This method cancels an ongoing watchPosition call.
50.What are Web Workers?
Web Workers do all the computationally expensive tasks without interrupting
the user interface and typically run on separate threads. Web Workers allow for
long-running scripts that are not interrupted by scripts that respond to clicks or
other user interactions, and allows long tasks to be executed without yielding to
keep the page responsive.
51.What SVG stands for?
SVG stands for Scalable Vector Graphics.
52.What is SVG?
SVG is a XML based format to draw vector images. It is used to draw two −
dimentional vector images.
53.What are the features of SVG?
Following are the core features of SVG −
 SVG, Scalable Vector Graphics is an XML based language to define
vector based graphics.
 SVG is intended to display images over the web.
 Being vector images, SVG image never loses quality no matter how they
are zoomed out or resized.
 SVG images supports interactivity and animation.
 SVG is a W3C standard.
 Others image formats like raster images can also be clubbed with SVG
images.
 SVG integrates well with XSLT and DOM of HTML.
54.What are the advantages of using SVG?
Following are the advantages of using SVG images −
 Use any text editor to create and edit SVG images.
 Being XML based, SVG images are searchable, indexable and can be
scripted and compressed.
 SVG images are highly scalable as they never loses quality no matter
how they are zoomed out or resized.
 Good printing quality at any resolution.
 SVG is an Open Standard.
55.What are the disadvantages of using SVG?
Following are the disadvantages of using SVG images −
 Being text format size is larger then compared to binary formatted raster
images.
 Size can be big even for small image.
56.Which tag of SVG is used to draw a rectangle?
'rect' tag of SVG is used to draw a rectangle.
57.Which tag of SVG is used to draw a circle ?
'circle' tag of SVG is used to draw a circle.
58.Which tag of SVG is used to draw a ellipse?
'ellipse' tag of SVG is used to draw a ellipse.
59.Which tag of SVG is used to draw a line?
'line' tag of SVG is used to draw a line.
60.Which tag of SVG is used to draw a closed shape consisting of connected
straight lines?
'polygon' tag of SVG is used to draw a closed shape consisting of connected
straight lines.
61.Which tag of SVG is used to draw a open shape consisting of connected
straight lines?
'polyline' tag of SVG is used to draw a open shape consisting of connected
straight lines.
62.Which tag of SVG is used to draw any path?
'path' tag of SVG is used to draw any path.
63.Which tag of SVG is used to draw text?
'text' tag of SVG is used to draw text.
64.Which attribute of text tag of SVG represents the x axis cordinates of
glyphs?
'x' attribute of text tag of SVG represents the x axis cordinates of glyphs.
65.Which attribute of text tag of SVG represents the y axis cordinates of
glyphs?
'y' attribute of text tag of SVG represents the y axis cordinates of glyphs.
66.Which attribute of text tag of SVG represents the shift along with x-
axis?
'dx' attribute of text tag of SVG represents the shift along with x-axis.
67.Which attribute of text tag of SVG represents the shift along with y-
axis?
'dy' attribute of text tag of SVG represents the shift along with y-axis.
68.Which attribute of text tag of SVG sets the rotation to be applied to all
glyphs?
'rotation' attribute of text tag of SVG sets the rotation to be applied to all
glyphs.
69.Which attribute of text tag of SVG sets the rendering length of the text?
'textlength' attribute of text tag of SVG sets the rendering length of the text.
70.Which stroke property defines color of text, line or outline of any
element?
'stroke' property defines color of text, line or outline of any element.
71.Which stroke property defines thickness of text, line or outline of any
element?
'stroke-width' property defines thickness of text, line or outline of any element.
72.Which stroke property defines different types of ending of a line or
outline of any path?
'stroke-linecap' property defines different types of ending of a line or outline of
any path.
73.Which stroke property used to create dashed lines?
'stroke-dasharray' property used to create dashed lines.
74.What are SVG filters?
SVG uses <filter> element to define filters. <filter> element uses an id attribute
to uniquely identify it.Filters are defined within <def> elements and then are
referenced by graphics elements by their ids.
75.Name some of the commonly used filers.
SVG provides a rich set of filters. Following is the list of the commonly used
filters −
 feBlend
 feColorMatrix
 feComponentTransfer
 feComposite
 feConvolveMatrix
 feDiffuseLighting
 feDisplacementMap
76.What are SVG Patterns?
SVG uses <pattern> element to define patterns. Patterns are defined using
<pattern> element and are used to fill graphics elements in tiled fashion.
77.What are SVG Gradients?
Gradient refers to smooth transition of one color to another color within a
shape. SVG provides two types of gradients −
 Linear Gradients
 Radial Gradients
78.What is Linear Gradients in SVG
Linear Gradients represents linear transition of one color to another from one
direction to another. It is defined using <linearGradient> element.
79.What is Radial Gradients in SVG
Radial Gradients represents circular transition of one color to another from one
direction to another. It is defined using <radialGradient> element.
80.Can SVG images be made responsive to user actions?
Yes! SVG images can be made responsive to user actions. SVG supports
pointer events, keyboard events and document events.
81.Can we write javascript functions in SVG images?
Yes! SVG supports JavaScript/ECMAScript functions. Script block is to be in
CDATA block consider character data support in XML.
82.Are mouse events, keyboard events supported in SVG?
Yes! SVG elements support mouse events, keyboard events. We've used
onClick event to call a javascript functions.
83.How to get a SVG document using javascript?
In javascript functions, document represents SVG document and can be used to
get the SVG elements.
84.How to get a active SVG element using javascript?
In javascript functions, event represents current event and can be used to get
the target element on which event got raised.
85.Which element of SVG is used to create links?
<a> element is used to create hyperlink. "xlink:href" attribute is used to pass
the IRI (Internationalized Resource Identifiers) which is complementary to
URI (Uniform Resource Identifiers).
86.How will you embed an SVG image in HTML page?
SVG image can be embedded using following ways −
 using embed tag
 using object tag
 using iframe
87.How to draw a rectangle in SVG?
'rect' tag of SVG is used to draw a rectangle. Following are the commonly used
attributes −
 x − x-axis co-ordinate of top left of the rectangle. Default is 0.
 y − y-axis co-ordinate of top left of the rectangle. Default is 0.
 width − width of the rectangle.
 height − height of the rectangle.
 rx − used to round the corner of the rounded rectangle.
 ry − used to round the corner of the rounded rectangle.
Example −
<rect
x = "100" y = "30"
width = "300" height = "100"
style = "fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" >
88.How to draw a circle in SVG?
'circle' tag of SVG is used to draw a circle. Following are the commonly used
attributes −
 cx − x-axis co-ordinate of the center of the circle. Default is 0.
 cy − y-axis co-ordinate of the center of the circle. Default is 0.
 r − radius of the circle.
Example −
<circle
cx = "100" cy = "100" r = "50"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)" >
89.How to draw a ellipse in SVG?
'ellipse' tag of SVG is used to draw a ellipse. Following are the commonly used
attributes −
 cx − x-axis co-ordinate of the center of the ellipse. Default is 0.
 cy − y-axis co-ordinate of the center of the ellipse. Default is 0.
 rx − x-axis radius of the ellipse.
 ry − y-axis radius of the ellipse.
Example −
<ellipse
cx = "100" cy = "100"
rx = "90" ry = "50"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">
90.How to draw a line in SVG?
'line' tag of SVG is used to draw a line. Following are the commonly used
attributes −
 x1 − x-axis co-ordinate of the start point. Default is 0.
 y1 − y-axis co-ordinate of the start point. Default is 0.
 x2 − x-axis co-ordinate of the end point. Default is 0.
 y2 − y-axis co-ordinate of the end point. Default is 0.
Example −
<line
x1 = "20" y1 = "20"
x2 = "150" y2 = "150"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">
91.How to draw a close ended polygon in SVG?
'polygon' tag of SVG is used to draw a polygon. Following is the commonly
used attribute −
points - List of points to make up a polygon.
Example −
<polygon
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">
92.How to draw a open ended polygon in SVG?
'polyline' tag of SVG is used to draw a open ended polygon. Following is the
commonly used attribute −
points − List of points to make up a polygon.
Example −
<polyline
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke = "black"
stroke-width = "3"
fill = "none">
93.How to draw a free flow path in SVG?
'path' tag of SVG is used to draw a free flow path. Following is the commonly
used attribute −
d − path data,usually a set of commands like moveto, lineto etc.
Example −
<path
d = "M 100 100 L 300 100 L 200 300 z"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">
94.Which command of path element moves cursor from one point to
another point?
M command of path element move from one point to another point.
95.Which command of path element creates a line?
L command of path element creates a line.
96.Which command of path element creates a horizontal line?
H command of path element creates a horizontal line.
97.Which command of path element creates a vertical line?
V command of path element creates a vertical line.
98.Which command of path element creates a curve?
C command of path element creates a curve.
99.Which command of path element creates a smooth curve?
S command of path element creates a smooth curve.
100.Which command of path element creates quadratic Bezier curve
Q command of path element creates a quadratic Bezier curve.
101.Which command of path element creates a smooth quadratic Bezier
curve?
T command of path element creates a smooth quadratic Bezier curve.
102.Which command of path element creates a elliptical arc?
A command of path element creates a elliptical arc.
103.Which command of path element closes the path.
Z command of path element closes the path.
104.When commands of Path element takes absolute path?
When commands are in Upper case, these represents absolute path. In case
their lower case commands are used, then relative path is used.
105.Which of the following browser supports HTML5 in its latest version?

A - Mozilla Firefox
B - Opera
C - Both of the above.
D - None of the above.
Answer : C
Explanation
Both of the above browsers supports HTML5.
106.Which of the following tag represents the header of a section in
HTML5?
A - section
B - article
C - aside
D - header
Answer : D
Explanation
'header' tag represents the header of a section.
107.Which of the following input control represents a date and time (year,
month, day, hour, minute, second, fractions of a second) encoded
according to ISO 8601 with no time zone information in Web Form 2.0?
A - datetime
B - datetime-local
C - date
D - month
Answer : B
Explanation
'datetime-local' input control represents a date and time (year, month, day,
hour, minute, second, fractions of a second) encoded according to ISO 8601
with no time zone information.
108.Which of the following tag is used to represent the result of different
types of output in HTML5?
A - output
B - placeholder
C - autofocus
D - required
Answer : A
Explanation
HTML5 introduced a new element <output> which is used to represent the
result of different types of output, such as output written by a script.
109.How to delete a local storage data in HTML5?
A - To clear a local storage setting you would need to call
localStorage.remove('key'); where 'key' is the key of the value you want to
remove.
B - If you want to clear all settings, you need to call localStorage.clear()
method.
Answer : C
Explanation
Both of the above options are valid.
110.Which of the following method retrieves the current geographic
location of the user?
A - geolocation.getCurrentPosition()
B - geolocation.watchPosition()
C - geolocation.clearPosition()
Answer : A
Explanation
geolocation.getCurrentPosition() method retrieves the current geographic
location of the user.
111.Which of the following is correct about web workers in HTML5?
A - Web Workers do all the computationally expensive tasks without
interrupting the user interface and typically run on separate threads.
B - Web Workers allow for long-running scripts that are not interrupted by
scripts that respond to clicks or other user interactions.
C - Web Workers allow long tasks to be executed without yielding to keep the
page responsive.
D - All of the above.
Answer : D
Explanation
All of the above options are correct.
112.Which of the following attribute triggers event when media can be
played to the end, without stopping for buffering?
A - onbeforeplay
B - onplay
C - oncanplay
D - oncanplaythrough
Answer : D
Explanation
oncanplaythrough − Triggers event when media can be played to the end,
without stopping for buffering.
113.Which of the following attribute triggers event when dragged element
is being dropped?
A - ondrop
B - ondurationchange
C - onemptied
D - onended
Answer : A
Explanation
ondrop − Triggers event when dragged element is being dropped.
114.Which of the following attribute triggers event when the message is
triggered?
A - onloadedmetadata
B - onloadstart
C - onmessage
D - onoffline
Answer : C
Explanation
onmessage − Triggers event when the message is triggered.
115.Which of the following is an advantage of using SVG?
A - Use any text editor to create and edit SVG images.
B - Being XML based, SVG images are searchable, indexable and can be
C - SVG images are highly scalable as they never loses quality no matter how
they are zoomed out or resized.
Answer : D
Explanation
All of the above options are correct.
116.Which of the following attribute of text tag of SVG represents shift
along with y-axis?
A-x
B-y
C - dx
D - dy
Answer : D
Explanation
'dy' attribute of text tag of SVG represents the shift along with y-axis.
117.Which of the following is a valid SVG filter?
A - feComposite
B - feConvolveMatrix
C - feDiffuseLighting
Answer : D
Explanation
All of the above are valid SVG filters.
118.Which of the following element of SVG is used to create links?
A - text
B-a
C - Link
D - None of the above
Answer : B
Explanation
<a> element is used to create hyperlink. 'xlink:href' attribute is used to pass the
IRI (Internationalized Resource Identifiers) which is complementary to URI
(Uniform Resource Identifiers).
119.Which of the following represents y-axis co-ordinate of top left of the
rectangle?
A-y
B - ry
C - height
D - None of the above
Answer : A
Explanation
y − y-axis co-ordinate of top left of the rectangle. Default is 0.
120.Which of the following command of path element creates a horizontal
line?
A-M
B-L
C-H
D-V
Answer : C
Explanation
H command of path element creates a horizontal line.
121.SVG images supports interactivity and animation.
A - false
B - true
Answer : B
Explanation
SVG images supports interactivity and animation.
122.What is the default value of x-axis co-ordinate of center of the circle?
A-0
B - -1
C - Any arbitrary value.
Answer : A
Explanation
Default value is 0.
123.What is the default value of x-axis co-ordinate of center of the ellipse?
A-0
B - -1
C - Any arbitrary value.
Answer : A
Explanation
Default value is 0.
124.l command of path element move from one point to another point.
A - true
B - false
Answer : B
Explanation
m command of path element move from one point to another point.
125.Which of the following is true about HTML 5?
A - HTML5 is the next major revision of the HTML standard superseding
HTML 4.01, XHTML 1.0, and XHTML 1.1.
B - HTML5 is a standard for structuring and presenting content on the World
Wide Web.
C - HTML5 is a cooperation between the World Wide Web Consortium (W3C)
and the Web Hypertext Application Technology Working Group (WHATWG).
126.Which of the following feature is a part of HTML 5?
A - Persistent Local Storage
B - WebSocket
C - Server-Sent Events
127.Which of the following feature is a part of HTML 5?
A - Canvas
B - Audio & Video
C - Geolocation
A - Apple Safari
B - Google Chrome
A - Mozilla Firefox
B - Opera
A - Mozilla Firefox
B - Opera
131.Is HTML5 backward compatible with old browsers?
A - true
B - false
132.Are HTML tags case sensitive?
A - true
B - false
133.Which of the following tag represents a generic document or
application section in HTML5?
A - section
B - article
C - aside
D - header
134.Which of the following tag represents an independent piece of content
of a document in HTML5?
A - section
B - article
C - aside
D - header
135.Which of the following tag represents a piece of content that is only
slightly related to the rest of the page in HTML5?
A - section
B - article
C - aside
D - header
136.Which of the following tag represents the header of a section in
HTML5?
A - section
B - article
C - aside
D - header
137.Which of the following tag represents the footer of a section in
HTML5?
A - footer
B - nav
C - section
D - dialog
138.Which of the following tag represents a section of the document
intended for navigation in HTML5?
A - footer
B - nav
C - section
D - dialog
139.Which of the following tag represents a section of the document
intended for navigation in HTML5?
A - footer
B - nav
C - section
D - dialog
140.Which of the following tag can be used to mark up a conversation in
HTML5?
A - footer
B - nav
C - dialog
D - figure
141.Which of the following tag can be used to associate a caption together
with some embedded content in HTML5?
A - footer
B - nav
C - dialog
D - figure
142.Which of the following is correct about custom attributes in HTML5?
A - A custom data attribute starts with data- and would be named based on
your requirement.
B - You would be able to get the values of these attributes using JavaScript
APIs or CSS in similar way as you get for standard attributes.
143.Which of the following is correct about custom attributes in HTML5?
A - A custom data attribute starts with data- and would be named based on
your requirement.
B - You would be able to get the values of these attributes using JavaScript
APIs or CSS in similar way as you get for standard attributes.
144.Which of the following is correct about Web form 2.0 in HTML5?
A - Web Forms 2.0 is an extension to the forms features found in HTML4.
B - Form elements and attributes in HTML5 provide a greater degree of
semantic mark-up than HTML4.
C - Form elements and attributes in HTML5 remove a great deal of the need
for tedious scripting and styling that was required in HTML4.
145.Which of the following is correct about Web form 2.0 in HTML5?
A - Web Forms 2.0 is an extension to the forms features found in HTML4.
B - Form elements and attributes in HTML5 provide a greater degree of
semantic mark-up than HTML4.
C - Form elements and attributes in HTML5 remove a great deal of the need
for tedious scripting and styling that was required in HTML4.
according to ISO 8601 with the time zone set to UTC in Web Form 2.0?
A - datetime
B - datetime-local
C - date
D - month
according to ISO 8601 with no time zone information in Web Form 2.0?
A - datetime
B - datetime-local
C - date
D - month
148.Which of the following input control represents a date (year, month,
day) encoded according to ISO 8601 in Web Form 2.0?
A - datetime
B - datetime-local
C - date
D - month
149.Which of the following input control represents a date consisting of a
year and a month encoded according to ISO 8601 in Web Form 2.0?
A - datetime
B - datetime-local
C - date
D - month
150.What SVG stands for?
A - Scalar Vector Graph
B - Scalable Vector Graphics
C - Scalable Vector Graph
151.Which of the following is true about SVG?
A - SVG is a XML based format to draw vector images.
B - It is used to draw two - dimensional vector images.
152. Which of the following is true about SVG?
A - SVG is intended to display images over the web.
B - Being vector images, SVG image never loses quality no matter how they
are zoomed out or resized.
C - SVG images supports interactivity and animation.
153.Which of the following is true about SVG?
A - SVG is a W3C standard.
B - Others image formats like raster images can also be clubbed with SVG
images.
C - SVG integrates well with XSLT and DOM of HTML.
A - Use any text editor to create and edit SVG images.
B - Being XML based, SVG images are searchable, indexable and can be
C - SVG images are highly scalable as they never loses quality no matter how
they are zoomed out or resized.
A - Good printing quality at any resolution.
B - SVG is an Open Standard and is free to use.
156.Which of the following is a disadvantage of using SVG?
A - Being text format size is larger then compared to binary formatted raster
images.
B - Size can be big even for small image.
157.Which of the following tag of SVG is used to draw a rectangle?
A - rect
B - rectangle
158.Which of the following tag of SVG is used to draw a circle?
A - circle
B - ellipse
159.Which of the following tag of SVG is used to draw a ellipse?
A - circle
B - ellipse
160.Which of the following tag of SVG is used to draw a line?
A - linear
B - line
161. Which of the following tag of SVG is used to draw a close ended
polygon?
A - polygon
B - polyline
C - path
162.Which of the following tag of SVG is used to draw a open ended
polygon?
A - polygon
B - polyline
C - path
163.Which of the following tag of SVG is used to draw a free flow path?
A - polygon
B - polyline
C - path
164.Which of the following tag of SVG is used to draw text?
A - text
B - polyline
C - path
165.Which of the following attribute of text tag of SVG represents the x
axis cordinates of glyphs?
A-x
B-y
C - dx
D - dy
166.Which of the following attribute of text tag of SVG represents the y
axis cordinates of glyphs?
A-x
B-y
C - dx
D - dy
along with x-axis?
A-x
B-y
C - dx
D - dy
along with y-axis?
A-x
B-y
C - dx
D - dy
169.Which of the following attribute of text tag of SVG sets the rotation to
be applied to all glyphs?
A - rotation
B-y
C - dx
D - dy
170.Which of the following attribute of text tag of SVG sets the rendering
length of the text?
A - rotation
B - textlength
C - dx
D - dy
171.Which of the following stroke property defines color of text, line or
outline of any element?
A - stroke
B - stroke-width
C - stroke-linecap
D - stroke-dasharray
172.Which of the following stroke property defines thickness of text, line
or outline of any element?
A - stroke
B - stroke-width
C - stroke-linecap
173.Which of the following stroke property defines different types of
ending of a line or outline of any element?
A - stroke
B - stroke-width
C - stroke-linecap
174.Which of the following stroke property used to create dashed lines?
A - stroke
B - stroke-width
C - stroke-linecap

HTML

Uploaded by

Copyright:

Available Formats

HTML

Uploaded by

Document Information

Original Description:

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

HTML

Uploaded by

Copyright:

Available Formats

Programming Language:-

The language which is used to represent the instructions of a program to execute

Static Website Dynamic Website

Prebuilt content is same every time Content is generated quickly and

Flexibility is the main advantage of Content Management System (CMS) is

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

105.Which of the following browser supports HTML5 in its latest version?

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.