HTML 101	<br />M+M Developer Week<br />August 23, 2011<br />Media + Marketing<br />
Table of Contents<br /><ul><li> History
 Conventions / Coding Standards / Definitions
 Hands On
 Create an HTML document
 Style a document with CSS
 The Promise of HTML5</li></li></ul><li>History<br />
http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html<br />
“…separating structure from presentation.”<br /><ul><li> HTML defines content
 CSS defines presentation</li></ul>http://www.webstandards.org/about/mission/<br />
Conventions / Coding Standards<br /><ul><li> Tags are containers and require an open and close
 Tags are in lower-case
 Tags are properly nested
 Attributes in quotes</li></ul><h1 class=“heading”> </h1><br /><ul id=“main-list”><br />	<li> </li><br />	<li> </li><br />...
Definitions<br /><ul><li> element : Inclusive of HTML start and end tag
 id : Unique indentifier for an HTML element
 class : Non-unique attribute used to target CSS</li></ul><h1 class=“heading”> </h1><br /><ul id=“main-list”><br />	<li> <...
Upcoming SlideShare
Loading in...5
×

HTML 101

8,431

Published on

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

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

No Downloads
Views
Total Views
8,431
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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 />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×