![Table of Contents ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (19)
Similar to HTML 101
Similar to HTML 101 (20)
Recently uploaded
Recently uploaded (20)
HTML 101
- 1. HTML 101 M+M Developer Week August 23, 2011 Media + Marketing
- 3. Conventions / Coding Standards / Definitions
- 4. Hands On
- 5. Create an HTML document
- 6. Style a document with CSS
- 10. CSS defines presentationhttp://www.webstandards.org/about/mission/
- 13. Tags are in lower-case
- 14. Tags are properly nested
- 15. Attributes in quotes<h1 class=“heading”> </h1> <ul id=“main-list”> <li> </li> <li> </li> </ul>
- 17. id : Unique indentifier for an HTML element
- 18. class : Non-unique attribute used to target CSS<h1 class=“heading”> </h1> <ul id=“main-list”> <li> </li> <li> </li> </ul>
- 19. Choose a Doctype The doctype declaration is required to begin an HTML document and tells the browser in what version of HTML the page is written. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html>
- 20. <head> Element <head> </head> is the container for the page’s definition elements. <head> <title>HTML 101</title> <meta name=“description” value=“My first HTML page.” /> <meta name=“keywords” value=“html, html5, developer week” /> </head>
- 21. <body> Element <body> </body> is the container for the page’s content. <body> <h1>HTML 101</h1> <p>This is my first web page.</p> </body> html101a.html
- 22. Common Elements Containers, Headers, Paragraph, Lists, Images <div> </div> : container <a> </a> : anchor/link <h1> </h1>, <h2> </h2>… <h6> </h6> : headings <p> </p> : paragraph <img /> : image <ul> </ul> : unordered list <ol> </ol> : ordered list <li> </li> : list item html101b.html
- 23. Hands-On Open notepad.exe or your text editor of choice. Create a file “html101.html” and save it to your C:// drive, or location of your choice. 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.
- 24. Style Cascading Style Sheets (CSS) define the page’s look and feel. <style type="text/css"> body {text-align:center; font-family:Verdana;} .bounding-box {width:990px; text-align:left; margin:0 auto;} h1, h2, h3 {font-family:Arial;} a.lede {text-align:center; display:block;} a.lede img {padding:2px; border:2px solid #ccc;} #example {float:left; width:48%;} #color {float:right; width:48%;} #colors {color:yellow;} ol li {padding:0 0 5px;} .red {color:red;} .blue {color:blue;} .yellow {background-color:#666;} .float {float:left; width:48%;} .right {float:right;} </style> html101c.html
- 26. Hands-On Change the font family, size, and weight of your text. Center the globe image Change the page’s background color and text color.
- 28. Offline caching, local storage & databaseshtml101-form.html
- 29. Questions?