Exam 70-480 HTML5 Notes at Jinal Desai .NET
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Exam 70-480 HTML5 Notes at Jinal Desai .NET

on

  • 1,646 views

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>) ...

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>. This article is short summary of HTML5 features.

Statistics

Views

Total Views
1,646
Views on SlideShare
1,645
Embed Views
1

Actions

Likes
0
Downloads
28
Comments
0

1 Embed 1

http://www.verious.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Exam 70-480 HTML5 Notes at Jinal Desai .NET Document Transcript

  • 1. Articles from Jinal Desai .NETExam 70-480 HTML5 Notes2012-12-28 00:12:11 Jinal DesaiHTML5 introduces elements and attributes that reflect typical usage on modernwebsites. Some of them are semantic replacements for common uses of genericblock (<div>) and inline (<span>) elements, for example <nav> (website navigationblock), <footer> (usually referring to bottom of web page or to last lines of HTMLcode), or <audio> and <video> instead of <object>.Considering Microsoft Certification Exam 70-480: Programming in HTML5 withJavaScript and CSS3This 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 HTML5Doctype is an element which defines document type definitions for the htmldocument. Following is table for all valid doctypes with respective versions itreferring.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.1XHTML 1.1 Strict Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
  • 2. TransitionalXHTML 1.1Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1XHTML 1.1 Frameset//EN"Frameset "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0XHTML 1.0 Strict Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0XHTML 1.0 Transitional//EN"Transitional "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0XHTML 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.01HTML 4.01 Transitional//EN"Transitional "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01HTML 4.01 Frameset//EN"Frameset "http://www.w3.org/TR/html4/frameset.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2HTML 3.2 Final//EN">HTML 2.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">Block AnchorsIn HTML5 you can apply anchors to block-level elements as well, ie. <h1>, <article>,etcPreviously 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 AttributesRequired: <input type="text" required />It will automatically give you message if you leave the textbox blank.Email: <input type="email" required />
  • 3. If you enter wrong email address it will give error. It validates email addressautomatically.Placeholder: <input type="url" placeholder="http://www.yourwebsite.com" />It will show placeholder inside the textbox, when control goes inside the textboxplaceholder 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>//Javascriptvar 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 SVGThe main difference between Canvas and SVG is that in SVG every single objectcan be identified in DOM, while in Canvas we need to redraw and redraw everything
  • 4. just like in paintbrush. We cannot control objects in Canvas through DOMFor further referenceW3SchoolsMicrosoft Virtual Academy