Exam 70-480 HTML5 Notes at Jinal Desai .NET

Articles from Jinal Desai .NET
Exam 70-480 HTML5 Notes
2012-12-28 00:12:11 Jinal Desai

HTML5 introduces elements and attributes that reflect typical usage on modern
websites. Some of them are semantic replacements for common uses of generic
block (<div>) and inline (<span>) elements, for example <nav> (website navigation
block), <footer> (usually referring to bottom of web page or to last lines of HTML
code), or <audio> and <video> instead of <object>.

Considering Microsoft Certification Exam 70-480: Programming in HTML5 with
JavaScript and CSS3

This article is short summary of HTML5 features.

New Semantic Tags

<header><h1>Header</h1></header>
<nav><ul><li>News</li><li>About</li></ul></header>
<section><article><h2>welcome></h2> <aside><h2>Links</h2><ul><li>
<p>content</p></article></section> Link1</li></ul></aside>
<footer><p>copyright</p></footer>

<section> : Used to group contents (articles). A section can have header and footer.
<header> : Contains header of the page.
<footer>: Contains footer of the page. You can use it for copyright.
<nav>: used for menus. It is often inside the header.
<article>: Used for main contents of the page.
<aside>: Used for sidebar contents of the page.

Doctype is shorten in HTML5
Doctype is an element which defines document type definitions for the html
document. Following is table for all valid doctypes with respective versions it
referring.

HTML5 <!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
XHTML 1.1
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
XHTML 1.1 Strict Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional
XHTML 1.1
Transitional
//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
XHTML 1.1
Frameset//EN"
Frameset
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.0 Strict Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0
Transitional//EN"
Transitional
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0
Frameset//EN"
Frameset
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
HTML 4.01 Strict
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
HTML 4.01
Transitional//EN"
Transitional
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01
Frameset//EN"
Frameset
"http://www.w3.org/TR/html4/frameset.dtd">
HTML 3.2
Final//EN">
HTML 2.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

Block Anchors
In HTML5 you can apply anchors to block-level elements as well, ie. <h1>, <article>,
etc

Previously in HTML 4.01 or in XHTML 1.0 we might write like
<h1><a href="http://www.somelink.com">Link me</a></h1>

But now in HTML5 we could write like
<a href="http://www.somelink.com"><h1>Link me</h1></a>

New Form Attributes
Required: <input type="text" required />
It will automatically give you message if you leave the textbox blank.

Email: <input type="email" required />

If you enter wrong email address it will give error. It validates email address
automatically.

Placeholder: <input type="url" placeholder="http://www.yourwebsite.com" />
It will show placeholder inside the textbox, when control goes inside the textbox
placeholder text disappears. So no need to write extra code for placeholder.

Pattern: <input type="phone" pattern="ddd-dddd" />
It applies RegEx pattern for validating phone number.

Audio
<audio src="some.mp3" controls></audio>

<audio controls autoplay loop preload="auto">
<source src="some.ogg" />
<source src="some.mp3" />
Your browser does not support audio.
</audio>

Video
<video controls src="some.mp4"></video>

<video controls autoplay loop muted>
<source src="some.webm" />
<source src="some.mp4" />
Your browser does not support video.
</video>

<video preload="none" poster="some.jpg">
</video>

Canvas
<canvas id="can" width="200" height="200">
Your browser does not support canvas.
</canvas>

//Javascript
var can=document.getElementById("can");
var context = can.getContext("2d");
context.fillStyle = "rgb(0,0,255)";
context.fillRect(10,10,180,180);

SVG (Scallable Vector Graphics)
<svg width="200" height="200">
<rect fill="rgb(0,0,255)" x="10" y="10" width="180" height="180" />
</svg>

Difference between Canvas and SVG
The main difference between Canvas and SVG is that in SVG every single object
can be identified in DOM, while in Canvas we need to redraw and redraw everything

just like in paintbrush. We cannot control objects in Canvas through DOM

For further reference
W3Schools
Microsoft Virtual Academy

Exam 70-480 HTML5 Notes at Jinal Desai .NET

Recomendados

Recomendados

Más contenido relacionado

Último

Último (20)

Destacado

Destacado (20)

Exam 70-480 HTML5 Notes at Jinal Desai .NET