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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Exam 70-480 HTML5 Notes at Jinal Desai .NET

1,652

Published on

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&gt;) and inline (<span&gt;) …

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&gt;) and inline (<span&gt;) elements, for example <nav&gt; (website navigation block), <footer&gt; (usually referring to bottom of web page or to last lines of HTML code), or <audio&gt; and <video&gt; instead of <object&gt;. This article is short summary of HTML5 features.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,652
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
37
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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 (&lt;div&gt;) and inline (&lt;span&gt;) elements, for example &lt;nav&gt; (website navigationblock), &lt;footer&gt; (usually referring to bottom of web page or to last lines of HTMLcode), or &lt;audio&gt; and &lt;video&gt; instead of &lt;object&gt;.Considering Microsoft Certification Exam 70-480: Programming in HTML5 withJavaScript and CSS3This article is short summary of HTML5 features.New Semantic Tags&lt;header&gt;&lt;h1&gt;Header&lt;/h1&gt;&lt;/header&gt;&lt;nav&gt;&lt;ul&gt;&lt;li&gt;News&lt;/li&gt;&lt;li&gt;About&lt;/li&gt;&lt;/ul&gt;&lt;/header&gt;&lt;section&gt;&lt;article&gt;&lt;h2&gt;welcome&gt;&lt;/h2&gt; &lt;aside&gt;&lt;h2&gt;Links&lt;/h2&gt;&lt;ul&gt;&lt;li&gt;&lt;p&gt;content&lt;/p&gt;&lt;/article&gt;&lt;/section&gt; Link1&lt;/li&gt;&lt;/ul&gt;&lt;/aside&gt;&lt;footer&gt;&lt;p&gt;copyright&lt;/p&gt;&lt;/footer&gt;&lt;section&gt; : Used to group contents (articles). A section can have header and footer.&lt;header&gt; : Contains header of the page.&lt;footer&gt;: Contains footer of the page. You can use it for copyright.&lt;nav&gt;: used for menus. It is often inside the header.&lt;article&gt;: Used for main contents of the page.&lt;aside&gt;: 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 &lt;!DOCTYPE html&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"XHTML 1.1 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1XHTML 1.1 Strict Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
  • 2. TransitionalXHTML 1.1Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1XHTML 1.1 Frameset//EN"Frameset "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0XHTML 1.0 Strict Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0XHTML 1.0 Transitional//EN"Transitional "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0XHTML 1.0 Frameset//EN"Frameset "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"HTML 4.01 Strict "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01HTML 4.01 Transitional//EN"Transitional "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01HTML 4.01 Frameset//EN"Frameset "http://www.w3.org/TR/html4/frameset.dtd"&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2HTML 3.2 Final//EN"&gt;HTML 2.0 &lt;!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"&gt;Block AnchorsIn HTML5 you can apply anchors to block-level elements as well, ie. &lt;h1&gt;, &lt;article&gt;,etcPreviously in HTML 4.01 or in XHTML 1.0 we might write like&lt;h1&gt;&lt;a href="http://www.somelink.com"&gt;Link me&lt;/a&gt;&lt;/h1&gt;But now in HTML5 we could write like&lt;a href="http://www.somelink.com"&gt;&lt;h1&gt;Link me&lt;/h1&gt;&lt;/a&gt;New Form AttributesRequired: &lt;input type="text" required /&gt;It will automatically give you message if you leave the textbox blank.Email: &lt;input type="email" required /&gt;
  • 3. If you enter wrong email address it will give error. It validates email addressautomatically.Placeholder: &lt;input type="url" placeholder="http://www.yourwebsite.com" /&gt;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: &lt;input type="phone" pattern="ddd-dddd" /&gt;It applies RegEx pattern for validating phone number.Audio&lt;audio src="some.mp3" controls&gt;&lt;/audio&gt;&lt;audio controls autoplay loop preload="auto"&gt;&lt;source src="some.ogg" /&gt;&lt;source src="some.mp3" /&gt;Your browser does not support audio.&lt;/audio&gt;Video&lt;video controls src="some.mp4"&gt;&lt;/video&gt;&lt;video controls autoplay loop muted&gt;&lt;source src="some.webm" /&gt;&lt;source src="some.mp4" /&gt;Your browser does not support video.&lt;/video&gt;&lt;video preload="none" poster="some.jpg"&gt;&lt;/video&gt;Canvas&lt;canvas id="can" width="200" height="200"&gt;Your browser does not support canvas.&lt;/canvas&gt;//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)&lt;svg width="200" height="200"&gt;&lt;rect fill="rgb(0,0,255)" x="10" y="10" width="180" height="180" /&gt;&lt;/svg&gt;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

×