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>


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


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>

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>


http://www.amazon.com/exec/obidos/ASIN/B00000JS62/ref=nosim/fyvrnet-20




http://ecx.images-amazon.com/images/I/51zyJrjPvlL._SL75_.jpg




This is CSS2


This is CSS3


http://catcubed.com/



Let’s get down to the basics


Structure

• Give your content structure

• Choose the most semantic container

• Do you use a tupperware bowl to serve gravy?

• Tags: figure, p, li, blockquote, cite, video, article, footer, navigation, header, section


The holy trinityHTML + CSS + JS

• HTML - content, structure

• CSS - design, feedback

• JS - interaction, movement, data transfer


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


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=”...”


http://fyvr.net

http://fyvr.net

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


HTML5 TagsContainers

<header>, <footer>,<section>, <article>, <div>, <span>


<header> & <footer>• <header> usually

contains the top navigation, branding, icon

• <header> can also be used within individual sections of a page

• <footer> usually contains the copyright, secondary navigation, contact information, and other details


<section> & <article>• <section> contains

content that is related.

• <section> can be nested

• <section> may be the main section of a page and the sub modules

• <article> is a self-contained chunk of information

• an <article> could be grabbed and placed in another page without losing context.

• <article> use: blog post, product detail, tweet


<div> & <span>• <div> is a container with

no semantic value.

• <div> can be nested

• <div> can contain just about anything

• <div> is old HTML, use <section> or <article> where appropriate

• <span> is a container with no semantic value

• <span> is inline, it can only contain text and other inline content

• use <span> when you target text and don’t want to add structure


HTML5 TagsLists

<ul>, <ol>, <dl>


<ul> & <ol>• <ul> is the most

common

• unordered list, no hierarchy

• the bullets can be changed or removed. The list can be vertical on horizontal

• <ul><li>foo</li><ul>

• <ol> is an ordered list.

• They are used for instructions, outlines, steps...

• the bullets can be numbers, letters, roman numerals, or removed.

• <ol><li>foo</li><ol>


<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>.


HTML5 TagsCommon stuff

<p>, <a>, <strong>, <b>,<em>,<i>


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


<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, hreflang

• Avoid these attributes: target, name


<strong> & <b>• <strong> is semantic

• <strong> is for bolding

• <strong> tells the browser that this text is more important.

• Search engines like <strong> text

• Think of it as ALLCAPS

• <b> is simply presentational

• <b> tells us to bold something, but the text has no importance at all.

• Avoid <b>. Use CSS to make something bold. Use <strong> to add strength.


<em> & <i>• <em> adds emphasis

• It normally italicizes text

• It’s similar to <strong> but not as powerful

• Think of a voice changing but not getting louder.

• <i> is purely presentational

• It normally italicizes text

• It adds no semantic value to the text

• Use <em> instead


Homework• Use the sample files 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 firebug for Firefox.

• Dive into HTML5 (use Safari or Chrome) http://diveintohtml5.org/


http://yuiblog.com/crockford/

http://yuiblog.com/crockford/

http://diveintohtml5.org




HTML5 - getting started

Technology

Transcript of HTML5 - getting started