friends of dufferin grove park
Website - Technical - Web Page Creation Overview

On this page:


HTML (.html - web page) files are pure text files that contain a mixture of textual content and hypertext markup language elements.

HTML (Hypertext Markup Language) is organized into elements (we use just over 30 for day to day use) that instruct the browser how to render the web page. These elements are delimited by left and right angle brackets, and are organized into pairs called tagsets (consisting of an opening and closing tag) that enclose the subject of the markup. The closing tag is identified by the forward slash following the left angle bracket. The opening tag can contain attributes (modifiers) for the tag that give the browser more information about what to do. Tagsets can contain other tagsets (within limits) so long as both the opening and closing tags of the enclosed tagsets are within the opening and closing tags of the enclosing tagset. For example:

<p class="compact">This is a <i>paragraph</i>.</p>

This HTML markup tells the browser to treat the text "This is a paragraph" as a block of text (starting on a new line, formatted as a paragraph since the paragraph element "p" is used), to leave off the bottom margin (class="compact": class is a common attribute of HTML elements; "compact" is our own style rule listed in our common cascading style sheet), and to italicize the word "paragraph".

The job of the custodian is to add markup tags to web page content so that browsers will render the content in a prescribed, consistent and appealing manner. The learning curve involves becoming familiar with the HTML elements commonly used, the element attributes used, the attribute values used, and the HTML patterns used to combine all these to achieve desired effects.

If you want to refer to an HTML book for a quick review, here are the elements we most commonly use for rendering content:

  • headings: h1, h2, h3, h4, h5, h6
  • block level elements: p, blockquote
  • list elements: ul, ol, li, dl, dt, dd
  • generic block level element: div
  • horizontal rule and line break: hr, br
  • anchor/link, and image: a, img
  • text decoration: b, i, u, s
  • phrase elements: big, small, sub, sup, acronym, cite, em, strong
  • generic inline element: span
  • comment: <!-- -->

Most of the phrase elements are rarely used, and the use of u and s (underscore and strikeout) is discouraged, as they have been deprecated by hr, br and img are exceptions: they do not have closing tags. We use lower case for all tags in anticipation of the XHTML standard.

The only attributes a custodian would commonly use are class for headings, p, blockquote, list, div, img, and span elements; src and alt for img; and href and name for a.

Details are found in the remaining Web page creation pages.

Web page structure

We use two page structures that we call "standard" and "infopage" pages. The only important difference is that standard pages have the left menu column, and infopages do not. All standard pages have been established: use infopages for new pages.

Here are the main structural components of the infopage:

Infopage structure

The administrator sets up a new page from a template (see Creating a new page from a template). He or she specifies the departmental graphic and graphic title in the header ("Bake Ovens & Food" beside the image of the bake oven in this case); specifies a <title> in the <head> section of the HTML code (which appears in the title bar of the browser); sets the information for the context navigation bar; and sets a heading for the page ("Food in the Park" in this case). The remaining header and footer components require no maintenance, but come with the template.

All sections (header, content, footer) are liquid: they adjust their layout to the size of the browser window.

The custodian adds the content between the header and the footer.

Getting started

Custodial text block: Where the content goes

To get started, load the web page file that you're working on into an HTML editor (see Software). Within the text page, find the comment <!-- ----[Custodian]---- page content begins here -->. Your content is marked-up text placed between that comment and the end-comment <!-- ----[Custodian]---- end of page content -->.

A typical process would be to:

  • Copy raw text from an email or word processing document into the text file.
  • Delimit the blocks of text, typically with <p></p> tagsets.
  • Add image boxes, and occasionally sidebars and crossbars.
  • Add headings, and table of contents (eg. "On this page:")
  • Add text decoration (such as bolding).
  • Add navigation aids (anchors for same-page; links for other-page)
  • Review the page for clarity, conformity with guidelines, and appeal.

We have generally found that once the technical aspects have been masterd, the greatest amount of time is taken up in making layout decisions, copy writing and editing (titling images, creating headings and such), and fiddling with images and their placement on the page.