–– workshop home ––

Workshops

Web 2

Document Tags

No exercise involved here

Concept

There are tags that the user doesn't see but that help define the document. There are also tags that modify how the document behaves.

Syntax

<html>
<head>
<title>descriptive text</title>
</head>
<body>

most of the document goes here — everything that is seen on screen

</body>

Lots of other information goes in the head section as well, including calling a stylesheet and meta tags.

Tips

This text is also what's used as a bookmark.

Best Practice: Go from specific to general. Use this:

Web Workshop 1 — University Web Services — Boise State University

rather than this:

Boise State University — University Web Services — Web Workshop 1

Create a template document that always has this code in it. HTML-Kit does this for you and even lets you customize it.

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>specific - general - most general</title>
<meta name="keywords" content="this, that, the other, more, as many words and
 phrases as you need" />
<meta name="description" content="This description should be in complete sentences.
 Both this and the keywords need to be specific to the page." />
<link rel="stylesheet" href="path/file.css" type="text/css" media="screen" />
</head>

<body>
your content here
</body>
</html>

<caption> for Tables

Concept

The caption is very much like a title for your table

The caption is optional

Caption appears in normal text, centered, above the table, but you can style this.

Example

captionedtable.html

Headers <th>

Concept

Headers are exactly like <td> except they have a special position

Default behavior is centered and bolded, but you can modify that with your stylesheet

Design

<th> in the first row produces column headers

<th> in the first position of each row produces row headers

<th> in both positions produces both row and column headers

Examples

Spanning Cells

Concept

Works like merge cell in a spreadsheet.

colspan spans across columns; rowspan spans across rows

Syntax

<td colspan="n">

Similar for rowspan. n = number of rows or columns to be spanned.

Examples

colspan example

rowspan example

When Things Go Wrong

Example 1: missing cell

A very common mistake.

This is different from a cell with null data

How this looks will differ depending on whether you have borders turned on or not.

It will also differ depending on the browser

missingcell.html
(notice the effect on borders)

nulldata1.html
"members unknown"

nulldata2.html
(notice the effect on borders)

Example 2: extra cell

Also common; usually you put the cell in the wrong row.

extracell.html
(just sticks out)

Example 3: forgot to close the table

Also common. Best way to avoid this is to close the table as soon as you open it. Ditto for rows, but with cells I usually will remember.

opentable.html
(table appears below all other elements)

Example 4: forgot to close the row or Cell

Nothing happens, but it's not marked up correctly and may throw errors later. It's up to the browser how to handle the error condition.

Exercise: Tables

Introduction to Stylesheets

Cascading Stylesheets (CSS)

This is hugely important. It's your main tool for design and layout.

Basic principle: separation of structure and appearance. HTML is concerned with structure. Styles are concerned with appearance. Content is your problem!

Three Methods for Applying Styles

  1. External stylesheet
  2. Embedded (internal) styles
  3. Inline styles (I recommend against this)

We're only going to do external because that's the best way to do it and we might as well start right. The others will be covered in a later workshop.

Your First Stylesheet

Make a new folder off your root, called styles

In HTML-Kit, make a new plain file and call it main.css

In HTML-Kit, open web2/ex2.html

A word about the head section

Just take all this new stuff on faith for now. In later workshops I'll explain and will show you how to set up your own default page with this stuff in it.

The key point is that this page and all subsequent pages we create conform to the XHTML spec. That's the current spec and is the one I want all page creators at Boise State to follow. Ever since IE6 and Firefox 1 there's been no reason to do anything other than XHTML.

In ex2.html make a link to the stylesheet.

Font Family

Concept

Defines the font—the typestyle.

This is not actually difficult in usage, but you won't like the news. Fonts depend on what's installed on the display device. You therefore cannot know what font will be used on your pages.

Font-family: serif, sans-serif, monospace, cursive, fancy

Cursive and fancy are pretty much a crap shoot

Monospace will normally be Courier in some flavor

Serif will normally be Times

Sans-serif will normally be Arial

Standard syntax is font-family: palatino, times, serif;

Always put serif or sans-serif last. Fonts will be resolved left to right

Multi-word fonts are tricky. If you don't quote, different browsers will interpret differently. If you do quote, the match has to be exact.

Font Style

Concept

Here is where you do italics and boldfacing, better than b or i.

Syntax

element { font-weight: bold | normal; }

element { font-variant: small-caps | none; }

element {font-style: italics | none; }

Examples

li { font-weight: bold; } h3 { font-variant: small-caps; }

Font Size and Units of Measurement

Concept

Font size is tricky because you don't know how big the font is in the user browser. That will depend on their screen resolution plus any settings they've changed within their browser.

There are several units of measurement allowed in CSS, including percentage, pixels, inches, and ems. I'll talk about this in a few minutes; for now, just accept the units I use.

Syntax

selector { font-size: 2em; }

Examples

See unitsofmeasurement.html

Units of Measurement

There are many, but here are the ones you will use most of the time:

The first three are relative, the last two are absolute.

Always use units of measurement.

You can go to .5, but there's no difference between .1 and .2 All examples in my workshops will be em/ex.

Text Alignment

Syntax

element { text-align: value; }

Values are

Examples

h1 { text-align: center; }
p {text-align: justify; }

Tips

Remember that the alignment applies to the entire block.

Important Concept: block-level and inline elements

Paragraphs and headings are block-level. Any style applied will apply to the entire block.

Inline elements are like letters and words. We'll return to this topic more than once in subsequent workshops.

Color

Color can be set on many elements including text, background, and borders (which you will learn about in Basics 3). Mostly you will set colors in your stylesheet so that elements across your site will have consistent coloring.

Colors are a little difficult to deal with at first, but there are lots of cheat sheets.

Color Coding

Color may defined by name, rgb code, or hex code.

By name is least useful because there are about 16 million colors and there aren't enough names for all of them. I recommend against using names.

RGB code might be a natural for those of you who learned in Photoshop and the print world. It's red/green/blue, with each being represented by a number from 0 to 255.

By far the most common way to represent color, though, is by hex code. This is the least immediately intuitive, but you'll get used to it. You'll have to, to understand how 90% of all the other web pages do it.

Colors in Hex

Key Concept

All color is defined in terms of red, green and blue.

Think of three dials.

and so on

Hexadecimal

Hex is base 16 numbering. Since we don't have a numeral for numbers beyond 9, we use letters, thus: 0 1 2 3 4 5 6 7 8 9 A B C D E F

You don't need to understand hexadecimal for the purpose of colors. Just think of them as dials that go from 0 to F, with 0 being off and F being brightest.

Colors are represented as pairs of hex numbers, thus:
nn nn nn
where the first pair controls red, the second pair controls green, and the third pair controls blue.

Within each pair, think of the first value as coarse control and the second value as fine control. That is, you have to run the second value from 0 through F in order to bump the first value up one number. Most people can't even see the difference in shade when you change the second number by one.

Examples

Note: all hex values must have # in front. If you leave it off, you won't get the color you want.

#000000 = black
#444444 = dark grey
#eeeeee = light grey
#b8b82c = a shade of brown
#540000 = dark red
#00cccc = cyan

Shortcut

Because the second number in each pair is fine control, it's permissible to omit it. If you do, it's the same as having the second number be 0. For example: #8ce is exactly the same as #80c0e0.

I tend to use the short form of the coding. It's not only shorter and quicker to type, it's more intuitive, since each numeral corresponds to the color: #nnn = rgb.

The references document has a color chart, but there are many such on the Net. Just search on hex color chart.

Best Practices

Guidelines for html, stylesheets, and a great deal more can be found at
http://boisestate.edu/webcenter/bestpractice/
including links to resources and references.