• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 - Just the basics
 

HTML5 - Just the basics

on

  • 7,863 views

This is a presentation I put together for our web team to discuss the basics of HTML5.

This is a presentation I put together for our web team to discuss the basics of HTML5.

Statistics

Views

Total Views
7,863
Views on SlideShare
7,722
Embed Views
141

Actions

Likes
10
Downloads
211
Comments
1

8 Embeds 141

http://www.jamesvandyke.com 84
http://power.arc.losrios.edu 22
http://www.slideshare.net 14
http://cis.arc.losrios.edu 9
http://www.justcarl.me 7
http://localhost 3
http://bishopamatmoodle.org 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • tnx
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

HTML5 - Just the basics HTML5 - Just the basics Presentation Transcript

  • HTML5 Just the basics please.
  • You not too late
  • Replacement for HTML4 and XHTML
  • Bickering Browser Support 2004 2005 2006 2007 2008 2009 2010 2011 Cooperation IE9
  • Philosophy
  • • Based on usage • Cooperation with browser makers • Remove presentation elements • Build in scripting elements
  • Creating an HTML5 Page
  • Sample.html <!DOCTYPE html>
  • Sample.html <!DOCTYPE html> HTML 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
  • Sample.html <!DOCTYPE html>
  • Sample.html <!DOCTYPE html> <html lang="en">
  • Sample.html <!DOCTYPE html> HTML 4 <html lang="en"> <html lang="en" xml:lang="en" xmlns="http:// www.w3.org/1999/xhtml">
  • Sample.html <!DOCTYPE html> <html lang="en">
  • Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
  • Sample.html <!DOCTYPE html> <html lang="en"> HTML 4 <head> <meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> <meta charset="utf-8" />
  • Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
  • Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Sample Page</title> <link rel=”stylesheet” href=”style-original.css” />
  • Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Sample Page</title> <link rel=”stylesheet” href=”style-original.css” /> HTML 4 <link href=”/style/structure.css” rel=”stylesheet” type=”text/css” />
  • Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Sample Page</title> <link rel=”stylesheet” href=”style-original.css” />
  • Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Sample Page</title> <link rel=”stylesheet” href=”style-original.css” /> </head>
  • New Elements
  • <section> a thematic grouping of content, typically with a heading
  • <nav> Contains core navigation items for a site or page
  • <article> A self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable
  • <aside> Content that is related to but not essential to it’s parent content
  • <hgroup> Grouping of h1 - h6 elements  
  • <header> Contains content at the top of a section, typically a heading tag
  • <footer> Take a wild guess  
  • <time> Indicates a date/time in the content
  • <header>
  • <article>
  • <nav>
  • <footer>
  • <header> <nav> <section> <article>
  • <footer> <nav>
  • Forms
  • Placeholder Autofocus Email Web address Number
  • Range Date, Month, Week, datetime Search Color picker
  • Specialized Elements
  • Canvas Video Location Offline