This document provides an introduction to HTML and HTML5. It discusses what HTML is, the basic tags used in HTML like <p> and <a>, and newer tags introduced in HTML5 like <header>, <footer>, <video>, and <canvas>. It also covers CSS, JavaScript, and how the three languages work together. The document gives examples of HTML, HTML5, and CSS code. It provides guidance on structure, semantics, accessibility and gives homework on practicing HTML.

1. HTML5
Getting started from Scratch
Monday, September 27, 2010

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

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

4. This is HTML
<h1 id="firstHeading" class="firstHeading">The Wizard of Oz (1939
film)</h1>
<!-- bodyContent -->
! <div id="bodyContent">
! <!-- tagline -->
! <div id="siteSub">From Wikipedia, the free encyclopedia</div>
! <!-- /tagline -->
<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

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

6. This is CSS2
Monday, September 27, 2010

7. This is CSS3
Monday, September 27, 2010

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

9. 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
Monday, September 27, 2010

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

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

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

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

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

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

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

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

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

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

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

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

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

23. <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
Monday, September 27, 2010

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

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

26. 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/
Monday, September 27, 2010