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
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
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
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
Questions, comments, etc.
Floor is open