An ambitious Web project involves teaching language students some technical details of Web page authoring beyond the basic page components, allowing them to understand the process more thoroughly, take more control over their Web development, and eventually venture beyond using free consumer-level WYSIWYG HTML editors to professional-grade programs.
Pedagogical rationale
Having a deeper understanding of Web page structure and components and a basic familiarity with major elements of HTML code does not imply that hand writing of HTML code should be taught in a language class. Even as part of language-through-content instruction, HTML code may have little to offer the language student compared to other content. That is, it might teach some language but not be the most effective way of gaining communicative competency in the given time frame. Rather, this activity explores properties of Web page components but still within a visual environment (i.e., using a WYSIWYG editor). Students moving beyond class assignments later with advanced Web projects will need to learn some fairly simple rules of HTML code.
As students gain more experience with more complicated Web projects they can begin to more liberally interpret-or even exercise poetic license to flaunt-Web page design rules, such as those laid out in Clear and Simple Web Authoring. But just as novice writers should heed rules of grammar, so too should those new to HTML observe the basic design guidelines.
The Web page authoring Elements below can be applied to a new Web project or form the requirements for a second version of one already completed. The features discussed below assume familiarity with basic page building skills.
Features to add to a previous or new Web project
1. Use a color scheme beyond the Web palette. In the early days of the Web, when the typical computer user's monitor was less capable than today's, they supported fewer colors ("8-bit" color offered 256 colors). Web pages reflected an even narrower palette known as the "Web safe" or HTML colors, 216 out of the 256 available colors that displayed the same on different computer platforms. Most monitors now support a lifelike palette of thousands or millions of colors (24- or 32-bit color, respectively). Text, background colors, and images on a Web page now typically take on this full palette.
Any color can be defined most accurately by its "hexadecimal value," a six-figure alphanumeric code using numbers and letters:
white=#FFFFFF
black=#000000
medium blue=#3333FF
Access the "RGB" color selectors in advanced HTML editors or graphics editors (example above from Macromedia Dreamweaver). Make note of the values of the colors chosen for your page design scheme. Defining a color with this numeric value is the only way to ensure a precise color consistency on a page. Blend an image seamlessly into the page background by using the same color value for the image background as the page background.
2. Use table colors to organize content. Select and apply a color to an entire table background or particular rows, columns, or individual cells with the Web-safe color selector built into the HTML editor or by designating a hexadecimal value, as above, in the table properties. Make complex table data, such as a schedule, easier to read by using alternating row or column colors, just as you might in a table in a word processing document. Note that cells selected in one step must be contiguous, meaning touching each other, which is how an entire row, column, or table can be selected and colored at once. Some browsers will not display the color of an empty cell, so fill these with a carriage return or transparent GIF.
3. Make external links open in a new browser window. Force links to open in a new window, instead of replacing the page in the current window, by selecting a "target" window in the link properties:
<a href="http://www.bu.edu/celop/mll/ "target="_blank">
Having external links (to pages outside of your site) open in a new window keeps your page open underneath in the original window.
4. Create an E-mail link.
Select a graphic or text and type into the link properties field
mailto:name@school.edu (mailto: + e-mail address)
To use that link, a visitor must have E-mail configured on the computer she's using.
To have the subject line of the visitor's mail message automatically fill in with text you choose, which helps the recipient identify and sort the message, append the mail link as follows:
mailto:name@school.edu?subject=Your subject text
5. Horizontally align content. A Web page can automatically adjust to the browser window by using relative table or column widths. Relative dimensions are expressed as a percentage, while absolute dimensions are expressed in pixels. Use absolute dimensions for greater control over spacing, especially useful for text, which is harder to read in a wide column.
Example page set up with tight horizontal spacing control
- Open a new page and insert a table with several rows and columns, 720 pixels wide, and an invisible border (border=0). This width will fill a monitor set at a resolution of 800 x 600 (a safe assumption for a minimum monitor capability).
- Use an extra blank row at the bottom of the table to insert transparent GIFs and set their widths to the desired column widths.
- Select each column and set the same width in the table properties as the width of the inserted transparent GIF.
- The table can be forced to the left of the page (left aligned) or float in the center (center aligned) for wider or higher resolution monitors. Use either by clicking in the space to the right of the table and selecting the desired alignment from the text alignment toolbar or properties box, noting that your background graphic might be more suitable for one or the other.
Also see TechNote: Saving Web Images
