3.0 Shaping the Pieces
3.1.0 Hypertext Markup Language (HTML)
3.1.1 Zen and the Art of HTML:
Rein in your desire to control every detail of the layout, and trust the browsers to present your content in a readable format, or resign yourself to a lot of frustration, because a markup language by definition marks categories of material--not their precise position, color, or size.
3.2.0 Page Anatomy and HTML Command Tags
All HTML commands appear within tags that look like this:
<tag> [content/object of command] </tag>
For an overview of tag placement, visit our quick reference guide to HTML tags.
Balanced and Empty Tags
Almost always, these tags come in pairs, like bookends, and usually the closing tag will begin with a slash. These pairs of tags should be balanced; that is, they need to be nested within each other, and not overlapping, to work.
Yes! <tag1> content... <tag2>special content</tag2>...</tag1>
No:[x] <tag1>....<tag2>...</tag1>....</tag2>
Some tags are empty, not balanced, because they signify a single interruption rather than the start and end of a particular type of content.
Comment Tags
Comment tags allow you to insert comments within the text of your document that browsers will ignore. These tags look like this:
<!-- [your comment here]-- >
Tag Attributes
Many commands can be modified with an attribute indicating its object's size, alignment, or other features. Attributes are included within the opening tag, as follows:
<tag attribute="value"> ... </tag>
Document Boundaries
To create a Web page, first you'll need to tell your machine when to start and stop reading HTML, by tagging the opening and closing of your page:
Type these two lines, and presto!--you have a blank page to work with. Two parallel organs sustain the page: a "body" of material that will appear in browser windows, and a "head" of information that tells machines global information or "metacontent" about the document itself. Create these organs by tagging their boundaries:
<html>
<head>
</head>
<body>
</body>
</html>
|
3.2.1 Head
The most common command in the head of an HTML document is the title.
To assign a name (other than the default title, which is the filename) that will appear in the title bar of browser windows, frame it with title tags inside the head of your document:
<head> <title>[Page Name Here]</title> </head>
We'll discuss other less widely-used metacontent later.
3.2.2 Body
The body of your document produces everything in the visitor's browser window. All your content will go in between <body> and </body>. The bgcolor="#hexadecimal color code" and background="image file" attributes to the <body> tag allow you to choose a background color or a "wallpaper" image for your site. Victor Engel's Non-Dithering Color page is an excellent interactive color selection tool.
You can also designate a default font size for the entire page with the <basefont size="[number]"> Netscape extension (font sizes go from 0 to 7, with 3 as the default).
3.2.2a Text
Forgotten Space
Before we review more commands, you should know that blank space you type into the body of your page disappears in the browser window. You can type five carriage-returns and it won't make a difference: the next characters will appear right after the last one you typed.
To save your viewers from eyestrain, you'll need to employ
| | for a single non-breaking space |
| <p> | for paragraph breaks; |
| <br> | for line breaks; |
<blockquote>
...</blockquote> | to set off block quotations; and |
| <hr> | to divide sections with a horizontal rule line. (the WIDTH=, SIZE=, and NOSHADE Netscape extensions can be used to tweak the appearance of the line.) |
Preserving the spacing of your text is possible; just surround the space-sensitive text with <pre>...</pre> tags.
Logical Style
Remember the trust the browser koan? Well, logical style tags tell the browser something about the content (e.g., that it should be emphasized), but they don't demand that the browser display the content a certain way. Logical style tags include:
<cite>...</cite> distinguishes a bibliographic citation
<code>...</code> and <samp>...</samp> indicate samples of coding.
<kbd>...</kbd> shows sample text to be typed by the reader
<em>...</em> places special emphasis on the text
<strong>...</strong> places even stronger emphasis on the text
<var>...</var> distinguishes a placeholder for a variable value, like Your Ad Here!!!.
Forced Style
Forced style tags force browsers to show the enclosed characters in a particular way. You may flaunt your wanton disregard for HTML dharma with the following codes:
- <b>...</b> for boldfaced text
- <i>...</i> for italics (warning: because browsers will ignore your spacing, italicized text tends to nudge into the following text)
- <tt>...</tt> for typewriter text
- <pre>...</pre> for preformatted text (with original spacing preserved)
Our Maximizing Meaning page offers some advice on composing and editing text.
3.2.2b Anchors and URLs
Anchors, marked with the <a>...</a> tags and (usually) the href= attribute, create the links within and between HTML documents. Each anchor refers either to the Uniform Resource Locator (URL) of another document, to a file on the same server as your document, or to a specific place within your document.
| protocol | host name[:port] | directory/filename | [subsection of the document] |
|---|
Sample
URLs | http:// | www.transaction.net | /web/tutor/tutor3.html | #anchors |
| ftp:// | ftp.amug.org | /pub/mirrors/info-mac/vir/disinfectant-36.hqx | |
| gopher:// | gopher.almamater.edu | | |
| mailto: | address@domain.com | | |
news:
news: | name.of.group
messageid | | |
- To link to another document on your server, refer to the relative path to that document:
<a href="../../subdirectory/file.name">File in a Subdirectory of the "Grandparent" Directory</a>
<a href="../file.name">File in the Parent Directory</a>
<a href="file.name">File in this Directory</a>
<a href="subdirectory/file.name">File in a Subdirectory of Current Directory</a>
<a href="subdirectory/subsubdirectory/file.name">File in a Subdirectory of a Subdirectory of Current Directory</a>
Be careful when you upload your documents to your server that you preserve the same hierarchy of directories, or your links won't work.
- To link to a section of the current document, you'll need
- a
name link in the destination section:
<a name="section">Section Title</a>
- a link from your current position to that
name reference point:
<a href="#section">Go to Section Title</a>
Remember when you're organizing your document and placing your links to provide some navigation tools at the beginning and ending of every document, and not to bewilder your guests with unnecessary--or inoperative--links.
3.2.2c Images
Images can appear in your documents in a number of ways:
- inline images (for example, this lovely San Francisco landscape) show up in browser windows right away--or as soon as they're done loading--along with the rest of your content, and are formed with the
<img src="????.gif"> tag;
buttons are small inline images that serve as links, formed by replacing the text of an anchor with the <img src="????.gif"> tag; while thumbnails are small inline images that are linked in the same way, but to larger versions of the same image rather than another HTML document; and
- imagemaps are inline images with distinct sections linking to different documents.
- Animated gifs don't require a Java-capable browser or any special client-side software--and they're easy to make!
- Some attributes allow you to control how your images are displayed:
ALT="alternate text" to be shown in graphics-impaired browsers - The
ALIGN= Netscape extension lets you choose how the image lines up with the text surrounding it. possible values are "texttop" (aligned with the uppermost character of the surrounding text), "top" (aligned with the very top of any surrounding content), "absmiddle", "baseline", "bottom", and "absbottom"
LOWSRC= lets you supplement src= with an alternate, low-resolution or otherwise easier-to-load image to load first, along with the rest of the document, so the slower graphic can fill in gradually without hindering the visitor's progress. WIDTH= and HEIGHT= are Netscape extensions that allow you to fix the scale of your image. Even if you want the image to load at its regular size, it's a good idea to use these features, because they allow the browser to save a space for your image before it loads completely and move on to the rest of your document. ISMAP indicates an imagemap, an image with several linked regions. BORDER=, HSPACE=, and VSPACE= allow you to control the width (in pixels) of the border and the blank space around an image.
3.2.2d Lists
Lists allow you to underscore parallel or sequential relationships between bits of content by showing those relationships visually.
- unordered lists are bounded by
<ul>...</ul> tags and mark list items (<li>) with
- ordered lists are bounded by
<ol>...</ol> tags and mark list items with sequential numbers or letters.
- definition lists (
<dl>...</dl>) consist of - "terms" (
<dt>...</dt>) - and indented "definitions".(
<dd>...</dd>).
- menus and directory lists are being phased out of the HTML 3.0 standards.
- Some Netscape extensions allow you to control some cosmetic features of your lists:
- The
type= extension, - when inserted as an attribute to the
<li> tag, sets the type of number or bullet (1, A, a, i, disc, circle, square) marking each list item; - The
value="(number or letter)" - extension determines the number or letter to start with in an ordered list.
3.2.2e Tables
Sometimes a list isn't good enough. For example, what if you want to post seven employees' monthly work schedules to your site? If you were to present all that information in a series of lists, your online guests would have to scroll through lots of irrelevant material to find the pieces of information they were looking for.
When you need to show gradual changes in, or several parallel relationships between, your content--be it text, images, anchors, forms, or horizontal rule lines--spread it across the page in a table.
- First, make a space for your table with
<table>...</table> tags. You may also consider using one of these attributes to the table tag:
border= allows you to select the width (in pixels) of your border.
<table border=basic>...</table> will draw the default-sized border around the table and all its cells;
<table border=frame>...</table> will frame the outside of the table but not each cell.
cellpadding= lets you choose how much space will surround the contents of each cell.
cellspacing= sets the size of the lines between each cell.
width= allows you to control the width of your table (measured in pixels or in a [quoted] percentage of the page width).
- Then, if you'd like to label your table with a caption above or below your data, deploy the optional
<caption>...</caption> tags, with the align= attribute indicating whether to put the caption at the "top" or "bottom" of your table.
- How many horizontal rows of data and/or headings will you want to include? Mark the beginning and ending of each row with
<tr>...</tr>.
- Each row will contain a certain number of data cells or heading cells, bounded by
<td>...</td> or <th>...</th>, respectively. These attributes allow you to adjust how the table is displayed:
align= "left", "center", or "right" (horizontal position of cell data)
colspan= and rowspan= distinguish cells or headings that span more than one column or row.
nowrap (halts automatic wrapping of cell contents)
- Netscape recognizes
width= (width in pixels or a "#%" of the screen) and valign= "top", "middle", "bottom", or "baseline" (the vertical alignment of cell data)
Sometimes you'll find it useful to include empty cells, marked with tags with no data inside.
Tables work very well as navigation menus, because they present your links in a minimum of vertical space, minimizing scrolling.
For more complex effects, tables can be nested inside table data cells; as long as all the coding is correct, it'll display properly.
When you're typing table tags into your document, the forgotten space principle works to your advantage: you can separate your rows with blank lines to make sure you're including a consistent number of cells in each one.
http://www.transaction.net/web/tutor/tutor3.html
zisk@well.com