UPLOAD / DOWNLOAD april.6.2011. HTML5 is just the next iteration of HTML Previous version was technically HTML 4.01, which incorporated XHTML 1.0

HTML5/CSS3 PRIMERJIM HATTEN

UPLOAD/DOWNLOAD april.6.2011

WHAT IS HTML5?

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

HTML HISTORY

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

MORE HTML HISTORY 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)

CONTINUED SEA OF TEXT ON HTML

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)

ABOUT HTML AS A “CODE”

It is easy Tag language

Tags start and end sections Example: <body>This is cool.</body>

It isn’t going away Flash vs. Apple battle

A LITTLE BROWSER TALK

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

WHAT’S NEW IN HTML5?

Scripting intensive Work-in-progress (browsers will treat it

differently) Canvas Dragging and dropping Web forms Video and audio More interactive web pages

BLOCKING OF CONTENT ELEMENT

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

FORM ELEMENT

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

OTHER COOL STUFF

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

CSS3

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

LET’S SEE WHAT HTML5 CAN DO

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

http://forabeautifulweb.com/

http://www.iandevlin.com/

http://eyestylesllc.com/

http://vaullt.com/

http://studio.html5rocks.com/

http://www.20thingsilearned.com/home

http://ryanmerrill.net/

CREATE A SIMPLE HTML5 PAGE

Open a text editor<!DOCTYPE html><html></html>

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

GET IT TO TALK TO CSS

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

}

CREATE THE CSS FILE

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:

<!DOCTYPE html><html><link rel="stylesheet" href=“master.css"><h1>Hello world!</h1></html>

WHAT DID I DO?

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 …

LET’S SPRUCE THIS UP A BIT In the html page, let’s add the blocking elements:<!DOCTYPE html><html>

<link rel="stylesheet" href=“master.css"><header></header><section><h1>Hello world!</h1></section><article></article><footer></footer><nav></nav></html>

ADD SOME VIDEO

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:

VIDEO CODING

<article><video width="640" height="480"

controls="controls"> <source src="attempt1.mp4" type="video/mp4" />

<source src="attempt1.ogg" type="video/ogg" /> <source src="attempt1.webm"

type="video/webm" />Your browser does not support the video tag.</video></article>

CHECK IT IN SEVERAL BROWSERS

Notice that the video won’t run in certain browsers.

Style sheets aren’t defaulted the same way

Browsers treat <!DOCTYPE html> differently

May need to put in default or fall-back options for the browser to read

NOW YOU HAVE SEEN A LITTLE HTML5 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!

Documents

UPLOAD / DOWNLOAD april.6.2011. HTML5 is just the next iteration of HTML Previous version was technically HTML 4.01, which incorporated XHTML 1.0