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>


This is CSS2


This is CSS3


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: ﬁgure, p, li, blockquote, cite, video,
article, footer, navigation, header, section


The holy trinity
HTML + 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=”...”

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 Tags
Containers
<header>, <footer>,<section>, <article>, <div>, <span>


<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


<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


<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


HTML5 Tags
Lists
<ul>, <ol>, <dl>


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


<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 Tags
Common 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, hreﬂang
• Avoid these attributes: target, name


<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


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


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/

HTML5 - getting started

More Related Content

Similar to HTML5 - getting started (20)

More from Ted Drake (20)

Recently uploaded (20)

HTML5 - getting started