Your SlideShare is downloading. ×
0
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
HTML5 - getting started
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 - getting started

1,470

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

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,470
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×