UPLOAD / DOWNLOAD april

 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

 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

 Microsoft dominated the web from  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)

 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)

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

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

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

 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

 Field formats to check browser history  Field formats that enable a calendar for user to pick a date  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

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

 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

      

 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

 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: # }

 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!

 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 …

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

 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:

Your browser does not support the video tag.

 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

 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!