Workshops
Web 2 References
Document Tags
These tags need to be in every document you create.
<html> <head> <title>specific - more general - most general</title> </head> <body> … </body> </html>
There are more tags than can go in the head section, which I will cover in a later workshop.
All the content goes between the body tags. Never put content between the head tags.
Tables
Caption
Should go after the table tag but before either the thead or the first row of content.
Syntax: <caption>string of text</caption>
Usage: I use the caption for explanatory text. I use a heading tag if I want a title for the table. Example:
<h2>Department Financial Report</h2> <table summary="Shows the need for larger budget for interplanetary travel"> <caption>Fiscal Year 2081-2082</caption> ... </table>
Headers
Headers have a default style of centered and bold, but you can style this any way you like. The main point of headers is to serve as headings for columns, but they can serve for rows as well.
Syntax: <th>column heading text</th>
Examples
Table Sections
thead, tbody and tfoot. You can style each separately. The only current advantage of arranging this way is that anything in the thead section will print at the top of each printed page.
Syntax
<table summary="summary text"> <caption>optional caption text</caption> <thead> one or more th rows could go here </thead> <tbody> main data area </tbody> <tfoot> footer or footnote area </tfoot> </table>
You will often find you have nothing to put in the tfoot. If you have used a thead and tbody, you should put in an empty tfoot, for structural consistency.
Three Methods for Applying Styles
- External stylesheet (strongly recommended)
- Embedded (internal) styles
- Inline styles
Syntax
<link rel="stylesheet" type="text/css" href="path" media="screen" />
General syntax for statements within the stylesheet:
selector { element: style; element; style; ... }
Examples
p { font-style: bold; }
body {font-family: arial, helvetica, sans-serif; }
Tips
The closer the style is to the tag, the greater the precedence; a later style overrides an earlier style.
Font Family
Syntax
Font-family: font, font, generic font
Generic Fonts and Common Equivalents
| serif | times, roman, palatino, garamond, bookman, schoolbook, baskerville, bodoni, bell |
| sans-serif | arial, helvetica, verdana, tahoma |
| monospace | courier, monotype, typewriter |
| cursive | chancery, kunstler, calligraphic |
| fantasy | comic, broadway, poster |
Some Key Words
There are literally thousands of fonts. Anything with "roman" in it will be serif. Anything with "sans" in it will be sans-serif; also "modern" and "gothic". Anything with a goofy, fun name will likely be fantasy. Anything with "script" will be cursive.
Examples
Selector {font-family: arial, helvetica, sans-serif; }
Tips
Remember: you cannot know what font will be on the display device. So don't spend too much time selecting fonts. The more uncommon the font, the fewer machines are likely to have it.
Font Style and Weight
Use this instead of using the HTML <i> and <b> tags when you want to style an entire selector, such as a heading or a list item.
If you want to boldface or italicize (not emphasize!) a single word or phrase, then use <b> or <i>.
Syntax
selector { font-style: italic; }
selector { font-weight: bold; }
selector { font-variant: small-caps; }
Examples
li { font-weight: bold; }
h4 { font-style: italic; }
h5 {font-variant: small-caps; }
Font Size and Units of Measurement
Syntax
selector { font-size: 2em; }
Examples
See unitsofmeasurement.html
Units of Measurement
Always use units of measurement.
| Unit | When to use |
|---|---|
| % | Regions, such as body, margins, and tables |
| em | Text, horizontal measures |
| ex | Text, vertical measures |
| px | Images |
| in |
Units of measurement are used in many places, not just for fonts. Used for height and width on tables, divs, margins, borders, etc.
Text Alignment and Indent
Concept
Alignment applies to block-level elements.
Syntax
text-align: right | left | center | none
text-indent: nn
Examples
h5 { text-align: right; }
p {text-indent: 3em; }
Tips
Remember that the alignment applies to the entire block.
Indent applies only to the first line of the block.
Color
Concepts
Color is handled as RGB settings
Can be applied to almost any aspect of a web page
- color for foreground text
- background-color for background of any block-level object
- also used with borders around images and tables and other objects
Usual practice is to enter the codes in hex
Example
element.alert {
color: #cc0000;
}
Tips
All the same number is a shade of grey
ff=100%
bb=75%
88=50%
44=25%
00=0%
The important numbers are first, third and fifth. The second of the number pairs is fine-tuning and differences between monitors are going to overwhelm that. There are huge differences between CRT and LCD. So don't worry about subtle shading; don't twiddle.
It's allowed to use three instead of six digits. Example:
p { color: ff7; }
If you do, you are selecting the first, third and fifth; you're giving up the fine level of control. This is often done when specifying "simple" colors, such as black, gray, or white.
Online color charts
http://www.zspc.com/color/index-e.html
http://www.webmonkey.com/webmonkey/reference/color_codes/
http://www.pitt.edu/~nisg/cis/web/cgi/rgb.html
There are scads of them, but eventually you will get a feel for how to manipulate the numbers. E.g., #4b8 needs more red, so you try #8b8, but that's getting too bright, so you turn down the green a bit with #898, but now that's too gray, so you turn down the blue with #893. Close but too dark, so turn the brightness up without changing the shade by adding 4 to each digit, yielding #bc7. Perfect!
| #fff | #bbb | #888 | #000 |
| #fbb | #f88 | #f44 | #f00 |
| #bfb | #8f8 | #4f4 | #0f0 |
| #bbf | #88f | #44f | #00f |
| #ffb | #ff8 | #ff4 | #ff0 |
| #fbf | #f8f | #f4f | #f0f |
| #bff | #8ff | #4ff | #0ff |
| #b88 | #844 | #800 | #400 |
| #8b8 | #484 | #080 | #040 |
| #88b | #448 | #008 | #004 |
| #bb8 | #884 | #880 | #440 |
| #b8b | #848 | #808 | #404 |
| #8bb | #488 | #088 | #044 |