Slide 1
Slide 1 text
HTML
Using semantic markup
Slide 2
Slide 2 text
What are we here for?
Slide 3
Slide 3 text
User Interfaces
Content
Presentation
Behavior
Slide 4
Slide 4 text
User Interfaces
Content: HTML
Presentation: CSS
Behavior: Javascript
Slide 5
Slide 5 text
1996 2002 2005
html
css
javascript
Slide 6
Slide 6 text
Why?
Accessible
Portable
Maintainable
Slide 7
Slide 7 text
Why?
Accessible: SEO
Portable: Different Devices
Maintainable: Client Edits
Slide 8
Slide 8 text
http://foodsense.is/
Example
Slide 9
Slide 9 text
HTML defines content & structure
Slide 10
Slide 10 text
HTML is not a programming language
But it is a formatting language
Slide 11
Slide 11 text
Content informs the formatting.
Based on meaning rather than look.
Slide 12
Slide 12 text
text
vs
text
text
vs
text
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
HTML first > Semantic markup
CSS After > Presentation
Slide 15
Slide 15 text
HTML Boilerplate
My Title
Slide 16
Slide 16 text
content
I’m really sad
Content TagsSlide 17
Slide 17 text
Empty Content Tags
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
Special Characters
& &
< <
> >
© ©
® ®
™ ™
– –
— —
… …
‘ ‘
’ ’
“ “
” ”
Slide 20
Slide 20 text
Demo
http://github.com/krug/art304.demos