Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Html5 final

•
•
S
saransh_kataria

This document provides an introduction to HTML5, including: - A brief review of common HTML4 tags and their functions. - An explanation of what HTML5 is and why the shift to HTML5 from previous standards. - An overview of new features in HTML5 like new media elements for embedding video and audio, canvas element for graphics, and forms. - Details on getting started with HTML5, including using the simplified DOCTYPE declaration and common tags in the head section. - Examples of using new HTML5 features like inserting audio and video, and demonstrations of HTML5 forms and browser support. The document concludes with previews of topics to be covered in future sessions, including

1 of 32
Html5 final
Introduction To HTML5SARANSH KATARIAAKSHAY KATYAL26/Aug/2011
Topics to be discussed Brief review of tags What Is HTML5? Why The Shift? Getting Started New Features New Additions The Forms Media Elements Flash or HTML5
HTML4 Tags Revisited<!--...--> A comment<!DOCTYPE> The document type (only one in HTML5)<a> Hyperlink to a page or page area<abbr> An abbreviation<address> Container for an address<b> Bold text<base> A base URL for all the links in a page<blockquote> A block of text<body> Beginning a body element<br> A single line break<button> A clickable button
<div> Demarcation of division in a document<em> Emphasized text<form> Container for a form typically with input elements<h1> to <h6> Text header 1 to header 6<head> Container for the first code to be interpreted by browser<hr> Horizontal rule (line)<html> Container for an HTML document<i> Italic text<colgroup> Container for groups of table columns
<iframe> Frame an inline sub window<img> Image container<input> User-input field within a form container<label> Representation of a caption in a user interface<li> List item indicator<link> A resource reference (for example, CSS)<col> Defines attributes for table columns<cite> Container for a citation<caption> A table caption
<mark> Text in one context marked for text in different context<menu> Container for a list of commands<meta> Container for meta information<ol> A numbered (ordered) list<optgroup> An option grouping header in an options list<option> Container for individual options in a drop-down list<p> A paragraph block<pre> Preformatted text format
<tr> Demarcation of a table row<q> Enclosed text with quotation marks<script> Container for script for CSS, JavaScript, or another recognized script<select> A selectable list<small> Small text<span> Inline section in a document<strong> Strong text that looks like bold<style> Container for a style definition<var> Variable style in formula<ul> An unordered list (a bullet list)
<sub> Subscripted text<sup> Superscripted text<table> A table definition<tbody> Demarcation for a block of rows for a table’s body<td> A table cell<textarea> A text area container<tfoot> Representation for a block of rows of column summaries for a table<th> Table header format<thead> Representation of a block of rows of column summaries for a table header<title> The document title
What Is HTML5?
Why HTML5?Reduces the use of JavaScriptGood replacement for adobe appsNo extra plug-in’s requiredRedundant tags removedExciting new media elementsEmploys a lot of HTML4 elements
Getting startedThe doctypeXHTML 1.0 Transitional<!DOCTYPE html PUBLIC “-//w3c//DTD XHTML 1.0 Transitional // EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>HTML5<!DOCTYPE html>
The Head Section<title><title>Title goes here</title><meta><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”><meta name=”keywords” content=”kennels, dog fences, pet containment”><meta http-equiv=”Refresh” content=”30”>Example
Structural Tags
The Latest Additions
Web Forms Demo
Inserting Audio<audio src=”jazz.mp3”></audio><audio src=“x.mp3” autoplay controls></audio>
Inserting Videos<video src=”mbAux1small.mp4” controls preload=”auto”></video>
Browser Support
Flash Vs HTML5
Html5 final
New Features
Professional HTML5 in use
Tags used in HTML5<article> Self-contained composition in document<aside> Content tangentially related to content of the article<audio> Sound content container<canvas> Graphic development container<command> A command that the user can invoke<datalist> List generator when used with the <input> element and its new list attribute<details> Discloses details of an element<embed> External interactive plug-in or content<figcaption> Caption tag for the figure element<figure> Contains a group of media content and their caption
<footer> Container for a footer for a section or page<header> Container for header for a section or page<hgroup> A heading of a section with multiple h1 to h6 elements in a document<mark> A string of text in one document, marked or highlighted for reference in another document<meter> Container for a known range of values (for example, disk use)<nav> Representation of a section of a document intended for navigation<output> Defines the progress of a task of any kind
<progress> Representation of the progress made in a task (such as percentage complete in a download operation)<section> Theme identifier for content grouping<source> Container for multiple specification of media resources<summary> Information on a <details> element<time> Container for a date/time<video> Element for linking to a video file<keygen> The key pair generator control representation.
Discontinued Tags<acronym> Replaced by <abbr><applet> Replaced by <object><basefont> Better handled by CSS<bgsound> Replaced by <audio><big> Better handled by CSS<dir> Replaced by <ul><font> Removed in HTML5<frame> Removed in HTML5<frameset> Removed in HTML5<isindex> Replaced by explicit <form>
<multicol> Removed in HTML5<nobr> Removed in HTML5<noframes> Removed in HTML5<noscript> Only conforming to HTML syntax<strike> Better handled by CSS<u> Better handled by CSS<marquee> Removed in HTML5<blink> Removed in HTML5<center> Better handled by CSS
A Brief Glimpse Of The Next Session
SVG
CANVAS
Q & AAny questions? Any questions?

More Related Content

Html5 final

  • 2. Introduction To HTML5SARANSH KATARIAAKSHAY KATYAL26/Aug/2011
  • 3. Topics to be discussed Brief review of tags What Is HTML5? Why The Shift? Getting Started New Features New Additions The Forms Media Elements Flash or HTML5
  • 4. HTML4 Tags Revisited<!--...--> A comment<!DOCTYPE> The document type (only one in HTML5)<a> Hyperlink to a page or page area<abbr> An abbreviation<address> Container for an address<b> Bold text<base> A base URL for all the links in a page<blockquote> A block of text<body> Beginning a body element<br> A single line break<button> A clickable button
  • 5. <div> Demarcation of division in a document<em> Emphasized text<form> Container for a form typically with input elements<h1> to <h6> Text header 1 to header 6<head> Container for the first code to be interpreted by browser<hr> Horizontal rule (line)<html> Container for an HTML document<i> Italic text<colgroup> Container for groups of table columns
  • 6. <iframe> Frame an inline sub window<img> Image container<input> User-input field within a form container<label> Representation of a caption in a user interface<li> List item indicator<link> A resource reference (for example, CSS)<col> Defines attributes for table columns<cite> Container for a citation<caption> A table caption
  • 7. <mark> Text in one context marked for text in different context<menu> Container for a list of commands<meta> Container for meta information<ol> A numbered (ordered) list<optgroup> An option grouping header in an options list<option> Container for individual options in a drop-down list<p> A paragraph block<pre> Preformatted text format
  • 8. <tr> Demarcation of a table row<q> Enclosed text with quotation marks<script> Container for script for CSS, JavaScript, or another recognized script<select> A selectable list<small> Small text<span> Inline section in a document<strong> Strong text that looks like bold<style> Container for a style definition<var> Variable style in formula<ul> An unordered list (a bullet list)
  • 9. <sub> Subscripted text<sup> Superscripted text<table> A table definition<tbody> Demarcation for a block of rows for a table’s body<td> A table cell<textarea> A text area container<tfoot> Representation for a block of rows of column summaries for a table<th> Table header format<thead> Representation of a block of rows of column summaries for a table header<title> The document title
  • 11. Why HTML5?Reduces the use of JavaScriptGood replacement for adobe appsNo extra plug-in’s requiredRedundant tags removedExciting new media elementsEmploys a lot of HTML4 elements
  • 12. Getting startedThe doctypeXHTML 1.0 Transitional<!DOCTYPE html PUBLIC “-//w3c//DTD XHTML 1.0 Transitional // EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>HTML5<!DOCTYPE html>
  • 13. The Head Section<title><title>Title goes here</title><meta><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”><meta name=”keywords” content=”kennels, dog fences, pet containment”><meta http-equiv=”Refresh” content=”30”>Example
  • 17. Inserting Audio<audio src=”jazz.mp3”></audio><audio src=“x.mp3” autoplay controls></audio>
  • 18. Inserting Videos<video src=”mbAux1small.mp4” controls preload=”auto”></video>
  • 24. Tags used in HTML5<article> Self-contained composition in document<aside> Content tangentially related to content of the article<audio> Sound content container<canvas> Graphic development container<command> A command that the user can invoke<datalist> List generator when used with the <input> element and its new list attribute<details> Discloses details of an element<embed> External interactive plug-in or content<figcaption> Caption tag for the figure element<figure> Contains a group of media content and their caption
  • 25. <footer> Container for a footer for a section or page<header> Container for header for a section or page<hgroup> A heading of a section with multiple h1 to h6 elements in a document<mark> A string of text in one document, marked or highlighted for reference in another document<meter> Container for a known range of values (for example, disk use)<nav> Representation of a section of a document intended for navigation<output> Defines the progress of a task of any kind
  • 26. <progress> Representation of the progress made in a task (such as percentage complete in a download operation)<section> Theme identifier for content grouping<source> Container for multiple specification of media resources<summary> Information on a <details> element<time> Container for a date/time<video> Element for linking to a video file<keygen> The key pair generator control representation.
  • 27. Discontinued Tags<acronym> Replaced by <abbr><applet> Replaced by <object><basefont> Better handled by CSS<bgsound> Replaced by <audio><big> Better handled by CSS<dir> Replaced by <ul><font> Removed in HTML5<frame> Removed in HTML5<frameset> Removed in HTML5<isindex> Replaced by explicit <form>
  • 28. <multicol> Removed in HTML5<nobr> Removed in HTML5<noframes> Removed in HTML5<noscript> Only conforming to HTML syntax<strike> Better handled by CSS<u> Better handled by CSS<marquee> Removed in HTML5<blink> Removed in HTML5<center> Better handled by CSS
  • 29. A Brief Glimpse Of The Next Session
  • 30. SVG
  • 32. Q & AAny questions? Any questions?