Basic HTML and CSS

Satyajit Phanse

CARC, MUSC

• If you don't understand me, let me know
• Too fast? Tell me
• Too slow? Tell me
• Too soft? Tell me

Outline

• Introduction
• Basic HTML
• Basic CSS
• Web sites at MUSC
• Accessibility/508
• Questions and experiments

Introduction

• HTML Hyper Text Markup Language is semantic markup (see standards versus semantics)
• CSS Cascading Style Sheets are for display; colors, fonts, positioning.

Editing HTML files

• File editors: vim, emacs, nano, notepad, notetab, on the Mac?
• Locally, open notepad: Start, Run, notepad
• Turn CAPS LOCK off!
• File, Save As, save to desktop

HTML Document

• What is a document
• File extensions: html, htm, shtml, cfm, cgi, pl, gif, jpg, png
• What are tags? (opening and closing, self-closing)
• Escaping
• High-level structure: html, head, body
• Comments
• example, bad example

Some basic semantic tags

• h: headers
• div: sections
• p: paragraphs
• Example

More basic semantic tags

• emphasis and strong
• Example
• a: Links
• Example

Lists

• Types:
  • Ordered
  • Un-ordered
  • Definition lists
• Nested lists
• Examples

Tables and images

• Tables for tabular data
  • Captions
  • Headers
  • Rows
  • Table Data (cells)
• Images
  • For content — use alt attributes
  • For decoration — use alt=""
• Examples

CSS

• Relation between HTML and CSS (HTML: semantic markup, CSS: pretty)
• Where to put it (example)
• Cascading (example)
• Addressing and names
• style, class and id
• span

CSS Examples

• Example
  • borders
  • colors
  • fonts
  • text alignment
  • comments

Web sites at MUSC

• people.musc.edu / atrium.musc.edu
• The MUSC bar/hat
• Example: Provost web site

Accessibility

• Section 508
• alt attributes
• Labels on forms
• Semantic mark-up
• Turn off CSS, Javascript, images
• Firefox and the web developer toolbar

This presentation

• This presentation was made using the S5 presentation templates.
• Google for S5
• No Powerpoint
• HTML CSS and Javascript
• View the source!

References and further reading

• W3 validators: http://www.w3.org/QA/Tools/#validators
• Section 508 validators (508 at MUSC):
  • http://dev.wave.webaim.org/
  • http://www.contentquality.com
• Reference site: http://www.w3schools.com/
• Semantics: http://brainstormsandraves.com/articles/semantics/structure/
• Standards versus semantics: http://www.kottke.org/03/08/standards-semantically-correct

Questions, comments, etc.

Floor is open