1.
What is the use of Canvas Element in HTML5?
HTML5 Canvas element can be used
to draw graphics images on a web page by using JavaScript.
2.
Can you give an example of Canvas element how it can be used?
<canvas id=“KCCanvas” width=“500″ height=“400″>
</canvas>
<script type=“text/javascript”>
var KCCanvas=document.getElementById(“KCCanvas”);
var KCText=KCCanvas.getContext(“2d”);
KCText.fillStyle=“#82345c”;
KCText.fillRect(0,0,150,75);
</script>
<canvas id=“KCCanvas” width=“500″ height=“400″>
</canvas>
<script type=“text/javascript”>
var KCCanvas=document.getElementById(“KCCanvas”);
var KCText=KCCanvas.getContext(“2d”);
KCText.fillStyle=“#82345c”;
KCText.fillRect(0,0,150,75);
</script>
This book is far better than any
other learning material. It has very basic information that includes both HTML5
and CSS3 with sample code and comprehensive examples.
3.
What is the purpose of HTML5 versus XHTML?
HTML5
is the next version of HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to
reduce the need for proprietary plug-in-based rich internet application (RIA)
technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun
JavaFX. Instead of using those plugins, it enables browser to serve elements
such as video and audio without any additional requirements on the client
machine.
4.
What is the difference between HTML and HTML5?
HTML5 is nothing more than upgraded
version of HTML where in HTML5 supports the innovative features such as Video,
Audio/mp3, date select function , placeholder , Canvas, 2D/3D Graphics, Local
SQL Database added so that no need to do external plugin like Flash player or
other library elements.
5.
WHAT are some other advantages of HTML5?
a) Cleaner markup than earlier versions of HTML
b) Additional semantics of new elements like <header>, <nav>, and <time>
c) New form input types and attributes that will (and in Opera’s case, do) take the hassle out of scripting forms.
b) Additional semantics of new elements like <header>, <nav>, and <time>
c) New form input types and attributes that will (and in Opera’s case, do) take the hassle out of scripting forms.
6. What
is the <!DOCTYPE>? Is it mandatory to use in HTML5?
The <!DOCTYPE> is an
instruction to the web browser about what version of HTML the page is written
in. The <!DOCTYPE> tag does not have an end tag. It is not case
sensitive.
The <!DOCTYPE> declaration must
be the very first thing in HTML5 document, before the <html> tag.
As In HTML 4.01, all <! DOCTYPE > declarations require a reference
to a Document Type Definition (DTD), because HTML 4.01 was based on Standard
Generalized Markup Language (SGML). WHERE AS HTML5 is not based on SGML, and
therefore does not require a reference to a Document Type Definition (DTD).
7. What
are the New Media Elements in HTML5?
New Media Elements in HTML5 are:
|
TAG
|
DESCRIPTION
|
|
<audio>
|
For multimedia content, sounds, music or other audio streams
|
|
<video>
|
For video content, such as a movie clip or other video streams
|
|
<source>
|
For media resources for media elements, defined inside video or
audio
elements |
|
<embed>
|
For embedded content, such as a plug-in
|
|
<track>
|
For text tracks used in media players
|
8.
What is the major improvement with HTML5 in reference to Flash?
Flash is not supported by major
mobile devices such as iPad, iPhone and universal android applications. Those
mobile devices have lack of support for installing flash plugins. HTML5 is supported
by all the devices, apps and browser including Apple and Android products.
Compared to Flash, HTML5 is very secured and protected. That eliminates major
concerns that we have seen with Flash.
9. What
is the sessionStorage Object in html5? How you can create and access that?
The HTML5 sessionStorage object
stores the data for one session. The data is deleted when the user closes the
browser window. We can create and access a sessionStorage, created “name” as
session
<script type=“text/javascript”>
sessionStorage.name=“KoolClasses”;
document.write(sessionStorage.name);
</script>
sessionStorage.name=“KoolClasses”;
document.write(sessionStorage.name);
</script>
10.
Can a <section> contain <article> elements? Can an <article>
contain <section> elements? Provide usage examples.
The answer to both questions is yes; i.e., a <section> can
contain <article> elements, and an <article> can
contain <section>elements.
For example, a personal dashboard page might contain a <section> for
social network interactions as well as a <section> for the
latest news articles, the latter of which could contain several <article> elements.
Conversely, an <article> might contain
a <section> at the end for reader comments.
11.
Can a web page contain multiple <header> elements? What about
<footer> elements?
Yes to both. In fact, both the <header> and
<footer> tags are designed to serve their respective purposes in relation
to whatever their parent “section” may be. So not only can the page
<body> contain a header and a footer, but so can every <article>
and <section> element. In fact, a <header> should be present for
all of these, although a <footer> is not always necessary.
12.
How do you indicate the character set being used by an HTML5 document? How does
this differ from older HTML standards?
In HTML5, the encoding used can be
indicated with the charset attribute of a <meta> tag inside
the document’s <head> element:
<!DOCTYPE html>
<html>
<head>
...
<meta charset="UTF-8">
...
</head>
...
</html>
This is a slightly simpler syntax
from older HTML standards, which did not have the charset attribute.
For example, an HTML 4.01 document would use the <meta> tag as
follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
...
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
...
</head>
...
</html>
13.
Write the code necessary to create a 300 pixel by 300 pixel <canvas>.
Within it, paint a blue 100 pixel by 100 pixel square with the top-left corner
of the square located 50 pixels from both the top and left edges of the canvas.
Here is one simple implementation:
<canvas id="c" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById( "c" );
var drawing_context = canvas.getContext( "2d" );
drawing_context.fillStyle = "blue";
drawing_context.fillRect( 50, 50, 100, 100 );
</script>
14.
Briefly describe the correct usage of the following HTML5 semantic elements:
<header>, <article>, <section>, <footer>.
The <header> element is
used to contain introductory and navigational information about a section of
the page. This can include the section heading, the author’s name, time and
date of publication, table of contents, or other navigational information.
The <article> element is
meant to house a self-contained composition that can logically be independently
recreated outside of the page without losing its meaning. Individual blog posts
or news stories are good examples.
The <section> element is a
flexible container for holding content that shares a common informational theme
or purpose.
The <footer> element is
used to hold information that should appear at the end of a section of content
and contain additional information about the section. Author’s name, copyright
information, and related links are typical examples of such content.
15.
Describe the relationship between the <header> and <h1> tags
in HTML5.
In previous specifications of HTML, only one <h1>
element was typically present on a page, used for the heading of the entire
page. HTML5 specifies that <h1> represents the top-level heading of a
“section”, whether that be the page <body>, or an <article> or
<section> element. In fact, every <header> element should at least
contain an <h1> element. If there is no natural heading for the section,
it is a good indication it should not use an <article> or <section>
tag.
16.
What are some of the key new features in HTML5?
Key new features of HTML5 include:
Improved support for embedding graphics, audio, and
video content via the new <canvas>, <audio>, and <video> tags.
Extensions to the JavaScript API such as geolocation and drag-and-drop as
well for storage and caching.
Introduction of “web workers”.
Several new semantic tags were also added to complement
the structural logic of modern web applications. These include the <main>, <nav>, <article>, <section>, <header>, <footer>,
and <aside> tags.
New form controls, such as <calendar>, <date>, <time>, <email>, <url>,
and <search>.
17.
What were some of the key
goals and motivations for the HTML5 specification?
HTML5 was designed to replace both HTML 4, XHTML, and
the HTML DOM Level 2.
Major goals of the HTML specification were to:
Deliver rich content (graphics, movies, etc.) without
the need for additional plugins (e.g., Flash).
Provide better semantic support for web page structure
through the introduction of new structural element tags.
Provide a stricter parsing standard to simplify error
handling, ensure more consistent cross-browser behavior, and simplify backward
compatibility with documents written to older standards.
Provide better cross-platform support (i.e., to work
well whether running on a PC, Tablet, or Smartphone).
18.
What is the HTML5 email
form field input?
In HTML5, there is a new type that is specifically for
email inputs on a form. The markup <input type=”email”> basically tells
the browser that it should not allow the form to be submitted if the user has
not entered what the browser determines to be a correctly formatted email
address.
Remember that the browser must do the validation –
HTML5 is just a standard that means nothing until the browser actually
implements it. Also, this doesn’t mean that the browser is supposed to actually
check to see if the email address is a real email address (that would be very
difficult to do), but only that it’s format is valid (like it contains an “@”
sign, etc.).
Empty email form field inputs
Just like any other input type, a user can submit a
form with an empty email input field – unless of course there is a “required”
attribute for the input field.
The email input and “multiple” attribute
The HTML5 email input type can also have what’s known
as the multiple attribute, which, when used inside an input tag with type
“email”, basically means that the value of the field can be a list of comma -separated,
valid email addresses. This would just look something like this: <input
type=”email” multiple>. But, this functionality doesn’t mean that the user
has to put in a comma separated list manually. The browser could possibly offer
some suggestions for which emails to add to the input field – through a
contacts list stored somewhere – the point is that it’s up to the browser to
display other options to the user in this scenario.
