HTML

1
HTML CSS an introduction

• Section led by Ivan Lee

Reachable at ivan period lee at cs period
stanford period edu
2
HTML/CSS Editors

• Mac
• TextEdit
• DashCode
• Komodo Edit
• TextMate
• Coda (editor FTP Terminal CSS editor)
• Windows
• Notepad
• Notepad (!!)
• Adobe Dreamweaver
• Microsoft Expression Web
• Note do NOT be using WYSIWYG functionality we
  can tell!
• Many of the above editors are good for
  auto-complete though

3
HTML/CSS Resources

• w3schools.com 
• Firebug
• PixelPerfect
• Misc
• kuler.adobe.com

4
Anatomy of an HTML Document

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  xmllang"en" lang"en"gt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetutf-8" /gt
• lttitlegtUnicornslttitlegt
• ltlink type"text/css" rel"stylesheet"
  href"prettycolors.css"/gt
• lt/headgt
• ltbodygt
• lth1gtwooooootlt/h1gt
• lt/bodygt
• lt/htmlgt

5
Validation

• http//validator.w3.org/

6
Margins vs. Paddings vs. Borders
Source http//www.iis.sinica.edu.tw/trc/public/c
ourses/Spring2007/week6/boxdim.png
7
Tables

• lttablegt
• lttrgt
• lttdgt
• lt/tdgt
• lttdgt
• lt/tdgt
• lt/trgt
• lt/tablegt

• Table
• Must have row to have a col
• Can have multiple cols/row
• Content generally goes in cols
• But every tag can have a class
• Remember to close tags

8
Tables (cont.) because theyre tricky

• Important attributes to remember
• border-spacing
• width (remember the different units)
• Pay attention to the border, padding, and margin
  for the table, tr, and td
• Note tr border, padding, margin does not work
  td margin does not work

9
Example
10
Pseudo-classes

• alink
• avisited
• ahover
• aactive
• afocus
• cursor default auto crosshair text help

11
div vs. span

• div
• Logical divisions within your web page
• Can divide it up into sections with their own
  attributes
• Can have own class
• Covers entire horizontal width of parent, with
  line break before and after
• span
• Just like a div, but without the line break
• Doesnt do any formatting on its own
• Formatting applies within the line

12
display vs. visibility

• displaynone as if the object were not there at
  all, not merely invisible
• displayblock the element will be displayed as
  a block-level element, with a line break before
  and after the element
• displayinline the element will be displayed as
  an inline element, with no line break before or
  after the element
• visibilitynone object just becomes invisible

13
Example
14
Shorthand properties

• padding-top 10px
• padding-right 12px
• padding-bottom 5px
• padding-left 100px
• padding 10px 12px 5px 100px

15
Hints for Project 1 part 2

• Table method
• px
• em
• ex
• in
• cm
• mm
• pt
• pc

• UL method
• Relative vs. absolute positioning

16
Assignment 1 pointers

• Part 1
• Figure out whats required by HTML in both
• Then work on CSS and hiding whats superfluous in
  each
• Part 2
• Introduction to images on web pages
• (hint use background images)
• Part 3
• No need to validate
• Easy Peasy

17
Steps in reconstructing an HTML Document

• 1.. Create content first - HTML
• 2.. Begin styling - CSS
• 3.. Test - Firebug/PixelPerfect
• 4.. Repeat
• ...
• 5.. Validate
• 6.. Success!

18
ltQuestions? /gt