HTML5 - getting started

HTML5 Getting started from Scratch Monday, September 27, 2010

What is HTML? • Easy to learn • Requires no special hardware • <p>Uses <em>tags</em> to tell the browser how to display text and other content</p> Monday, September 27, 2010

What is HTML5? • The latest version of HTML • The latest version of CSS • Native video, audio, form validation, caching, geolocation, • Allows you to build applications as well as pages Monday, September 27, 2010

This is HTML <h1 id="firstHeading" class="firstHeading">The Wizard of Oz (1939 film)</h1>  ! <div id="bodyContent"> !  ! <div id="siteSub">From Wikipedia, the free encyclopedia</div> !  <p>Twelve-year-old orphan Dorothy Gale (<a href="/wiki/Judy_Garland" title="Judy Garland">Judy Garland</a>) lives in rural Kansas with her Aunt Em (<a href="/wiki/Clara_Blandick" title="Clara Blandick">Clara Blandick</a>), Uncle Henry (<a href="/wiki/Charles_Grapewin" title="Charles Grapewin">Charles Grapewin</a>), and three farm hands, Hickory (<a href="/wiki/Jack_Haley" title="Jack Haley">Jack Haley</ a>), Hunk (<a href="/wiki/Ray_Bolger" title="Ray Bolger">Ray Bolger</ a>), and Zeke (<a href="/wiki/Bert_Lahr" title="Bert Lahr">Bert Lahr</ a>). </p> Monday, September 27, 2010

This is HTML5 <article> ! <header> <h1><a href="http://www.amazon.com/">The Wizard of Oz</a></h1> </header> ! <figure> <a href="http://www.amazon.com/"><img src="http://ecx.images- amazon.com/wiz.jpg" alt="The Wizard of Oz"></a> </figure> ! ! <details open=""> ! ! <ul> ! ! <li><summary>When it was released during Hollywood's golden year of 1939,The Wizard of Oz didn't start out as the perennial classic it has since become. The film did respectable business, but it wasn't until its debut on television that this family favorite saw its popularity soar. And while Oz's TV b…</summary></li> ! ! <li class="actors"><strong>Actors</strong>: Judy Garland, Frank Morgan, Ray Bolger, Bert Lahr, Jack Haley</li> <li><strong>$19.96</ strong> DVD Metro-Goldwyn-Mayer (MGM)</li> </ul> ! </details> </article> Monday, September 27, 2010

This is CSS2 Monday, September 27, 2010

This is CSS3 Monday, September 27, 2010

Let’s get down to the basics Monday, September 27, 2010

Structure • Give your content structure • Choose the most semantic container • Do you use a tupperware bowl to serve gravy? • Tags: ﬁgure, p, li, blockquote, cite, video, article, footer, navigation, header, section Monday, September 27, 2010

The holy trinity HTML + CSS + JS • HTML - content, structure • CSS - design, feedback • JS - interaction, movement, data transfer Monday, September 27, 2010

The new studs • Canvas - animation, charts, transformations • SVG - like canvas but more data oriented • Video, Audio - no plugins needed • Geo-Location - where are you sitting? • Web Workers, Web Sockets - data manipulation Monday, September 27, 2010

Before we code • relative url: <a href=”next.html”>next</a> • absolute url: <a href=”http://doglr.com>doglr</a> • meta tags: invisible information about the page for search engines and the browser • tag: <p>, <li>, <footer> • attribute: class=”mod”, id=”main”, src=”...” Monday, September 27, 2010

Before we code • Accessibility: everyone can use your page • S.E.O.: snake oil salesmen. Good content, good markup, inbound links • Validation: make sure your code is correct. Valid code is much easier to style and debug. • foo, bar, baz: standard geek placeholders Monday, September 27, 2010

HTML5 Tags Containers <header>, <footer>,<section>, <article>, <div>, <span> Monday, September 27, 2010

<header> & <footer> • <header> usually • <footer> usually contains the top contains the copyright, navigation, branding, icon secondary navigation, contact information, and • <header> can also be other details used within individual sections of a page Monday, September 27, 2010

<section> & <article> • <section> contains • <article> is a self- content that is related. contained chunk of information • <section> can be nested • an <article> could be • <section> may be the grabbed and placed in another page without main section of a page and the sub modules losing context. • <article> use: blog post, product detail, tweet Monday, September 27, 2010

<div> & <span> • <div> is a container with • <span> is a container no semantic value. with no semantic value • <div> can be nested • <span> is inline, it can • <div> can contain just only contain text and about anything other inline content • <div> is old HTML, use • use <span> when you <section> or <article> target text and don’t where appropriate want to add structure Monday, September 27, 2010

HTML5 Tags Lists <ul>, <ol>, <dl> Monday, September 27, 2010

<ul> & <ol> • <ul> is the most • <ol> is an ordered list. common • They are used for • unordered list, no instructions, outlines, hierarchy steps... • the bullets can be • the bullets can be changed or removed. numbers, letters, roman The list can be vertical numerals, or removed. on horizontal • <ol><li>foo</li><ol> • <ul><li>foo</li><ul> Monday, September 27, 2010

<dl> • <dl> is a definition list • contains terms and definitions • HTML5 allows more flexibility, ignore the old HTML dl haters :-) • great for glossaries, product specifications, personal information • <dl><dt>term</dt></dd>definition</dd></dl> • I loves my <dl>. I abuse my <dl>. Monday, September 27, 2010

HTML5 Tags Common stuff <p>, <a>, <strong>, <b>,<em>,<i> Monday, September 27, 2010

<p> • This is one of the most common tags. • <p>This is a paragraph</p> • You cannot nest <p> tags • A <p> can go inside a list item, but don’t put a list inside a <p> • You can place an image inside a <p> Monday, September 27, 2010

<a> • The <a> generates a link • While the <a> is normally inline, HTML5 allows us to wrap multiple elements in a single link. <a href=”/”><dl><dt>Mac Lipstick</dt><dd>Sassy Pink</dd><dd> $5.00</dd></dl></a> • Attributes: href, title, hreﬂang • Avoid these attributes: target, name Monday, September 27, 2010

<strong> & <b> • <strong> is semantic • <b> is simply presentational • <strong> is for bolding • <b> tells us to bold • <strong> tells the something, but the text has no importance at all. browser that this text is more important. • Avoid <b>. Use CSS to • Search engines like make something bold. Use <strong> to add <strong> text strength. • Think of it as ALLCAPS Monday, September 27, 2010

<em> & <i> • <em> adds emphasis • <i> is purely presentational • It normally italicizes text • It normally italicizes text • It’s similar to <strong> but not as powerful • It adds no semantic value to the text • Think of a voice changing but not getting • Use <em> instead louder. Monday, September 27, 2010

Homework • Use the sample ﬁles to begin writing pages.You can only learn HTML by practicing • Watch Douglas Crockford discuss coding history (episode 1). • Download and install Firefox, Safari, and Chrome (Google). Install the web developer toolbar and ﬁrebug for Firefox. • Dive into HTML5 (use Safari or Chrome) http:// diveintohtml5.org/ Monday, September 27, 2010

HTML5 - getting started

by Ted Drake

Accessibility

Categories

Upload Details

Usage Rights

Statistics

HTML5 - getting started Presentation Transcript