Scribd Logo
Upload

Welcome to Scribd!

  • Exam 70-480 HTML5 Notes at Jinal Desai

    Uploaded by

    techdigest
    452 views4 pages
    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.

    Original Title

    Exam 70-480 HTML5 Notes at Jinal Desai .NET

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    452 views4 pages

    Exam 70-480 HTML5 Notes at Jinal Desai

    Uploaded by

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

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    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> <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 XHTML 1.1 XHTML 1.1 Strict <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Link1</li></ul></aside>

    XHTML 1.1 Transitional

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

    XHTML 1.1 Frameset XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset HTML 3.2 HTML 2.0

    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="\d\d\d\-\d\d\d\d" /> 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

    You might also like