Your SlideShare is downloading. ×
0
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
HTML 101
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

HTML 101

8,392

Published on

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

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,392
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
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. HTML 101 <br />M+M Developer Week<br />August 23, 2011<br />Media + Marketing<br />
  2. Table of Contents<br /><ul><li> History
  3. Conventions / Coding Standards / Definitions
  4. Hands On
  5. Create an HTML document
  6. Style a document with CSS
  7. The Promise of HTML5</li></li></ul><li>History<br />
  8. http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html<br />
  9. “…separating structure from presentation.”<br /><ul><li> HTML defines content
  10. CSS defines presentation</li></ul>http://www.webstandards.org/about/mission/<br />
  11. Conventions / Coding Standards<br /><ul><li> Tags are containers and require an open and close
  12. Tags are in lower-case
  13. Tags are properly nested
  14. Attributes in quotes</li></ul><h1 class=“heading”> </h1><br /><ul id=“main-list”><br /> <li> </li><br /> <li> </li><br /></ul><br />
  15. Definitions<br /><ul><li> element : Inclusive of HTML start and end tag
  16. id : Unique indentifier for an HTML element
  17. 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 />
  18. 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 />
  19. <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 />
  20. <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 />
  21. 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 />
  22. 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 />
  23. 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 />
  24. http://csszengarden.com<br />
  25. 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 />
  26. 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
  27. Offline caching, local storage & databases</li></ul>html101-form.html<br />
  28. Questions?<br />

×