HTML5
                             Getting started from Scratch




Monday, September 27, 2010
What is HTML?

                   • Easy to learn
                   • Requires no special hardware
                   • <...
What is HTML5?
                   • The latest version of HTML
                   • The latest version of CSS
            ...
This is HTML
       <h1 id="firstHeading" class="firstHeading">The Wizard of Oz (1939
       film)</h1>

       <!-- bodyC...
This is HTML5
       <article>
       ! <header>
            <h1><a href="http://www.amazon.com/">The Wizard of Oz</a></h1...
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
       ...
The holy trinity
                             HTML + CSS + JS

                   • HTML - content, structure
            ...
The new studs
                   • Canvas - animation, charts, transformations
                   • SVG - like canvas but ...
Before we code
             • relative url:
                    <a href=”next.html”>next</a>
             • absolute url:
...
Before we code
                   • Accessibility: everyone can use your page
                   • S.E.O.: snake oil sales...
HTML5 Tags
                                   Containers
               <header>, <footer>,<section>, <article>, <div>, <s...
<header> & <footer>
                   •         <header> usually             •   <footer> usually
                       ...
<section> & <article>
                   •         <section> contains         •   <article> is a self-
                   ...
<div> & <span>
                   •         <div> is a container with   •   <span> is a container
                        ...
HTML5 Tags
                                     Lists
                               <ul>, <ol>, <dl>




Monday, Septembe...
<ul> & <ol>
                   •         <ul> is the most           •   <ol> is an ordered list.
                         ...
<dl>
           • <dl> is a definition list
           • contains terms and definitions
           • HTML5 allows more flexib...
HTML5 Tags
                                       Common stuff
                             <p>, <a>, <strong>, <b>,<em>,<...
<p>
                   • This is one of the most common tags.
                   • <p>This is a paragraph</p>
            ...
<a>
                   • The <a> generates a link
                   • While the <a> is normally inline, HTML5
           ...
<strong> & <b>
                   •         <strong> is semantic        •   <b> is simply
                                ...
<em> & <i>
                   •         <em> adds emphasis            •   <i> is purely
                                  ...
Homework
        • Use the sample files to begin writing pages.You can
               only learn HTML by practicing
       ...
Upcoming SlideShare
Loading in …5
×

HTML5 - getting started

1,754 views

Published on

I'm teaching a small group of friends how to become web devs. They're starting from scratch and we're jumping right into semantic markup and how to use HTML5.

This presentation assumes the user has little to no experience with HTML. We followed it the next week with hands-on coding.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,754
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 - getting started

  1. 1. HTML5 Getting started from Scratch Monday, September 27, 2010
  2. 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. 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. 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. 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. 6. This is CSS2 Monday, September 27, 2010
  7. 7. This is CSS3 Monday, September 27, 2010
  8. 8. Let’s get down to the basics Monday, September 27, 2010
  9. 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. 10. The holy trinity HTML + CSS + JS • HTML - content, structure • CSS - design, feedback • JS - interaction, movement, data transfer Monday, September 27, 2010
  11. 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. 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. 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. 14. HTML5 Tags Containers <header>, <footer>,<section>, <article>, <div>, <span> Monday, September 27, 2010
  15. 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. 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. 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. 18. HTML5 Tags Lists <ul>, <ol>, <dl> Monday, September 27, 2010
  19. 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. 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. 21. HTML5 Tags Common stuff <p>, <a>, <strong>, <b>,<em>,<i> Monday, September 27, 2010
  22. 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. 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. 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. 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. 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

×