Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML 101

8,929 views

Published on

Jeremy Spitzberg, Web UI Development Manager at The Active Network, walks us through HTML and HTML 5 fundamentals.

Published in: Technology
  • Be the first to comment

HTML 101

  1. 1. HTML 101 <br />M+M Developer Week<br />August 23, 2011<br />Media + Marketing<br />
  2. 2. Table of Contents<br /><ul><li> History
  3. 3. Conventions / Coding Standards / Definitions
  4. 4. Hands On
  5. 5. Create an HTML document
  6. 6. Style a document with CSS
  7. 7. The Promise of HTML5</li></li></ul><li>History<br />
  8. 8. http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html<br />
  9. 9. “…separating structure from presentation.”<br /><ul><li> HTML defines content
  10. 10. CSS defines presentation</li></ul>http://www.webstandards.org/about/mission/<br />
  11. 11.
  12. 12. Conventions / Coding Standards<br /><ul><li> Tags are containers and require an open and close
  13. 13. Tags are in lower-case
  14. 14. Tags are properly nested
  15. 15. Attributes in quotes</li></ul><h1 class=“heading”> </h1><br /><ul id=“main-list”><br /> <li> </li><br /> <li> </li><br /></ul><br />
  16. 16. Definitions<br /><ul><li> element : Inclusive of HTML start and end tag
  17. 17. id : Unique indentifier for an HTML element
  18. 18. class : Non-unique attribute used to target CSS</li></ul><h1 class=“heading”> </h1><br /><ul id=“main-list”><br /> <li> </li><br /> <li> </li><br /></ul><br />
  19. 19. Choose a Doctype<br />The doctype declaration is required to begin an HTML document and tells the browser in what version of HTML the page is written. <br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <br /> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /> <!DOCTYPE html><br />
  20. 20. <head> Element<br /><head> </head> is the container for the page’s definition elements.<br /><head><br /> <title>HTML 101</title><br /> <meta name=“description” value=“My first HTML page.” /><br /> <meta name=“keywords” value=“html, html5, developer week” /><br /></head><br />
  21. 21. <body> Element<br /><body> </body> is the container for the page’s content.<br /><body><br /> <h1>HTML 101</h1><br /> <p>This is my first web page.</p><br /></body><br />html101a.html<br />
  22. 22. Common Elements<br />Containers, Headers, Paragraph, Lists, Images<br /><div> </div> : container<br /><a> </a> : anchor/link<br /><h1> </h1>, <h2> </h2>… <h6> </h6> : headings<br /><p> </p> : paragraph<br /><img /> : image<br /><ul> </ul> : unordered list<br /><ol> </ol> : ordered list<br /><li> </li> : list item<br />html101b.html<br />
  23. 23. Hands-On<br />Open notepad.exe or your text editor of choice.<br /> Create a file “html101.html” and save it to your C:// drive, or location of your choice.<br />Display http://www.activenetwork.com/Assets/ActiveNetwork.com/media/active-com.jpg and the text, “Hello, world.”, on a page. Link the image and text to Active.com.<br />
  24. 24. Style<br />Cascading Style Sheets (CSS) define the page’s look and feel.<br /><style type="text/css"><br /> body {text-align:center; font-family:Verdana;}<br /> .bounding-box {width:990px; text-align:left; margin:0 auto;}<br /> h1, h2, h3 {font-family:Arial;}<br /> a.lede {text-align:center; display:block;}<br /> a.lede img {padding:2px; border:2px solid #ccc;}<br /> #example {float:left; width:48%;}<br /> #color {float:right; width:48%;}<br /> #colors {color:yellow;}<br /> ol li {padding:0 0 5px;}<br /> .red {color:red;}<br /> .blue {color:blue;}<br /> .yellow {background-color:#666;}<br /> .float {float:left; width:48%;}<br /> .right {float:right;}<br /></style><br />html101c.html<br />
  25. 25. http://csszengarden.com<br />
  26. 26. Hands-On<br />Change the font family, size, and weight of your text.<br />Center the globe image<br />Change the page’s background color and text color.<br />
  27. 27. The Promise of HTML5<br /><ul><li> Semantic containers</li></ul>nav, header, footer, section , article<br /><ul><li> Form fields</li></ul>email, url, date, placeholder, range <br /><ul><li> Geolocation</li></ul>http://html5demos.com/geo<br /><ul><li>Native <video> and <audio> elements
  28. 28. Offline caching, local storage & databases</li></ul>html101-form.html<br />
  29. 29. Questions?<br />

×