Ryan Sandor Richards - OMG HTML

Ryan Sandor Richards - OMG HTML

Ryan's Bomb Dot Com slides explaining HTML in purpose and practice.

See also CSS WOW http://speakerdeck.com/u/nuclearsandwich/p/ryan-sandor-richards-css-wow

4698d387cdde58a95c8dc7f8d198cb48?s=128

Steven! Ragnarök

February 25, 2012
Tweet

Transcript

  1. HTML Hypertext Markup Language Friday, February 24, 2012

  2. What is HTML? • HTML is • A Human Readable

    way to • Define the Structure of Documents for • The web Friday, February 24, 2012
  3. HTML != PRETTY Friday, February 24, 2012

  4. Document Structure • Web pages are documents • They are

    nested (stuff goes inside stuff) • Collections of elements • Defined by tags Friday, February 24, 2012
  5. Elements & Tags • An HTML document has many elements

    • You create elements using tags • Tags look like this: <h1>A document major header</h1> <p>This is a paragraph tag</p> <a href=”http://google.com”>Google.com</a> Friday, February 24, 2012
  6. Many Different Tags • <h1></h1> - Document Header • <p></p>

    - Paragraphs • <a href=””></a> - Anchors (Links) • <ul></ul> - Unordered lists • <ol></ol> - Ordered Lists Friday, February 24, 2012
  7. Tag Anatomy <h2 id=”projects”>My Projects</h2> Open Attributes Content Close Friday,

    February 24, 2012
  8. Attributes • Help identify particular elements • Define parameters for

    elements • Denote elements for styling Friday, February 24, 2012
  9. Attribute Examples • <p id=”my_idenifier”>...</p> • <div class=”bold important”>...</div> •

    <option selected=”selected”>...</option> • <textarea rows=”10” cols=”20”> ... </textarea> Friday, February 24, 2012
  10. Important Attributes • id=”...” - Unique identifier • class=”...” -

    Allows you to “classify” elements with “class names” • Important! Elements can have many class names but only one id, and the one id must be unique Friday, February 24, 2012
  11. NESTING TAGS Tags (inside of tags (inside of tags (inside

    of tags (inside of tags (inside of tags ...))))) Friday, February 24, 2012
  12. Nesting Tags <p> You <em>must</em> ensure that your tags are

    properly closed when <strong>nesting</strong> within other tags! </p> <p> <em> <strong> (nesting action) (html awesomeness) Friday, February 24, 2012
  13. Full Page Example 01 <!DOCTYPE html> 02 <html> 03 <head>

    04 <title>My Page</title> 05 </head> 06 <body> 07 <h1>The Title of My Page</h1> 08 <p>Welcome to my page, I hope you enjoy it!</p> 09 <p class=”email”> 10 You can reach me via email here: 11 <a href=”mailto:email@example.com”> 12 email@example.com 13 </a> 14 </p> 15 </body> 16 </html> Friday, February 24, 2012
  14. BEHOLD Friday, February 24, 2012

  15. <!DOCTYPE html> • Tells the browser that this is html

    • There used to be all kinds of these • There can be only one Friday, February 24, 2012
  16. Important Tags • <html> - There can be only one

    • <head> - Information about the document • <body> - The document’s content Friday, February 24, 2012
  17. Tag Zoology Friday, February 24, 2012

  18. Headings • <h1> - Document title (site name, etc.) •

    <h2> - Section • <h3> - Sub-section • <h4> to <h6> - Sub-sub-sections... Friday, February 24, 2012
  19. Paragraphs • <p> - Used to construct paragraphs • <em>

    - For emphasizing • <strong> - Highlights importance Friday, February 24, 2012
  20. Unordered Lists • One little, • Two little, • Three

    little web designers <ul> <li>One little,</li> <li>Two little,</li> <li> Three little web designers </li> </ul> Friday, February 24, 2012
  21. Ordered Lists 1. little, 2. little, 3. little web designers

    <ol> <li>little,</li> <li>little,</li> <li> little web designers </li> </ol> Friday, February 24, 2012
  22. Anchors • <a href=”#”>My Link</a> • These are why the

    web works so well • href = hyper-reference = anywhere • In your page (with ids) • In your site • To any old random website/page/thing Friday, February 24, 2012
  23. Anchor Examples <a href=”#my_identifier”>IN PAGE</a> <a href=”/awesome.html”>IN SITE</a> <a href=”http://google.com”>WEB</a>

    <a href=”mailto:ryan@fastly.com”> Friday, February 24, 2012
  24. OMG ANCHORS WOW Friday, February 24, 2012

  25. Images • <img src=”tyler_hair.jpg”> • Images are fun and informative

    • DO NOT WANT: <img></img> Friday, February 24, 2012
  26. SO MUCH MOAR • There are a lot of tags

    • These tags will suffice • Learn more in the further reading • Resistance is futile Friday, February 24, 2012
  27. Conclusion • HTML is for making documents • HTML is

    not pretty • HTML is nested (tags within tags) • Anchors totally rule Friday, February 24, 2012