HTML

Using semantic markup

Transcript

1. HTML Using semantic markup
2. What are we here for?
3. User Interfaces Content Presentation Behavior
4. User Interfaces Content: HTML Presentation: CSS Behavior: Javascript
5. 1996 2002 2005 html css javascript
6. Why? Accessible Portable Maintainable
7. Why? Accessible: SEO Portable: Different Devices Maintainable: Client Edits
8. http://foodsense.is/ Example
9. HTML defines content & structure
10. HTML is not a programming language But it is a formatting language
11. Content informs the formatting. Based on meaning rather than look.
12. <em>text</em> vs <i>text</i> <strong>text</strong> vs <b>text</b>
13. Bad Tags b bold text big makes text slightly larger center centers text font specifies size, color, and typeface i italic text small makes text slightly smaller strike strike-through text u underline text
14. HTML first > Semantic markup CSS After > Presentation
15. HTML Boilerplate <!doctype html> <html> <head> <title>My Title</title> </head> <body> <!-- content here --> </body> </html>
16. <tagname attribute=“value”> content </tagname> <p class=“demotext”> I’m <em>really</em> sad </p> Content Tags
17. <tagname attribute=“value”> <img src=“smile.png”> Empty Content Tags
18. Tags Headings h1,h2,h3,h4,h5,h6 Paragraphs p Quotes blockquote Lists ol,ul,li,dl,dt,dd Tables table,tr,th,td Forms form,label,input,textarea,select Text em,strong Images img Links a
19. Special Characters & &amp; < &lt; > &gt; © &copy; ® &reg; ™ &trade; – &ndash; — &mdash; … &hellip; ‘ &lsquo; ’ &rsquo; “ &ldquo; ” &rdquo;
20. Demo http://github.com/krug/art304.demos