1. UPLOAD / DOWNLOAD april.6.2011

2.  HTML5 is just the next iteration of HTML  Previous version was technically HTML 4.01, which incorporated XHTML 1.0  HTML version 4.01 was completed in 1999  W3C (World Wide Web Consortium) set HTML5 as the new standard of HTML for next 10 years  HTML5 doesn’t drop previous HTML language you might have known  Adds much JavaScript support

3.  Hypertext Markup Language  Tim Berners-Lee developed HTML in 1989  Berners-Lee also invented HTTP (Hypertext Transfer Protocol)  EVERY page on the web is HTML. Every single one  1990s, HTML huge (eg. Before Flash)  HTML dominated by Microsoft’s Internet Explorer browser from 1997-2007

4.  Microsoft dominated the web from 1997-2007  HTML 4.01 and its addition of XHTML as we know it today became the standard in 1994  In 2007 the Web Standards Project was launched to standardize the web and the expectations of browsers  There was a need to update the Internet due to changing landscape (broadband, wireless, GIS, video, multimedia, portable devices)

5.  W3C halted work on creating XHTML 2.0 as a standard under construction in 2007  Smartphones clinched HTML5 as the next generation of the web  iPhone supported HTML5 in 2007!  First browsers to pledge support  Mozilla Firefox  Safari  Google Chrome (once it came out)

6.  It is easy  Tag language  Tags start and end sections  Example: This is cool.  It isn’t going away  Flash vs. Apple battle

7.  All of the major browsers have signed on to support HTML5 (including IE9!)

8.  Scripting intensive  Work-in-progress (browsers will treat it differently)  Canvas  Dragging and dropping  Web forms  Video and audio  More interactive web pages

9.  Traditionally was done in complex tables (see Adobe Dreamweaver)  Or DIV (division) elements  In HTML5 there are new elements:  HEADER  SECTION  ARTICLE  ASIDE  FOOTER  NAV

10.  Field formats to check browser history  Field formats that enable a calendar for user to pick a date  Email and telephone numbers in fields  Forms are functionality of the browser and the language; there is no need for Ajax (JavaScript+XML) or Adobe Flash to create functionality

11.  Canvas  Very similar to Flash  Has a drawing tool built in  Can build geometric shapes  Embedding text fonts  Finally more than the 11-13 fonts that were standard  Need to embed the font styles as we do in Flash

12.  Is still under development as well  Was proposed in 1998 – that’s right, 1998!  Built to be standard across all browsers  Supports HTML5  Cascading Style Sheets  A list of rules for the web page to follow  The rules are weighted and certain ones take precedence, so they “cascade” down to the one that carries the most weight

13.  http://forabeautifulweb.com/ http://forabeautifulweb.com/  http://www.iandevlin.com/ http://www.iandevlin.com/  http://eyestylesllc.com/ http://eyestylesllc.com/  http://vaullt.com/ http://vaullt.com/  http://studio.html5rocks.com/ http://studio.html5rocks.com/  http://www.20thingsilearned.com/home http://www.20thingsilearned.com/home  http://ryanmerrill.net/ http://ryanmerrill.net/

14.  Open a text editor  The doctype is that simple  Save document in parent as test1.html  Congratulations: you have a webpage. You are now an HTML5 designer/developer

15.  In a text editor open a new document  At the top start styling something  Let’s try the basics first. This is a rule code for header style #1: h1 { text-align:center; font-style: bold; font-family: arial; color: #999933 }

16.  Save this file as master.css  You now have a css3 file!  In your html file add this line of code in your stellar html page: Hello world!

17.  Save your html file again  You have told the html to look in the parent directory for the css called master.css  The html file now will apply the h1 [heading style number 1] to the text you signified in the css  CONGRATULATIONS! You are now an HTML5/CSS3 designer/developer. Begin charging excessively for interactive designs …

18.  In the html page, let’s add the blocking elements: Hello world!

19.  Find an.mp4 or.ogg video on your computer  Copy it to your parent directory  In the article section of your html page, put this code:

20. Your browser does not support the video tag.

21.  Notice that the video won’t run in certain browsers.  Style sheets aren’t defaulted the same way  Browsers treat differently  May need to put in default or fall-back options for the browser to read

22.  It is a very small amount, yet look at how much more interactivity this provides for the future  We can create a full HTML/HTML5/CSS website  Begin by creating containers to hold all your elements and have at it!