TLTC
Teaching and Learning With Technology Center
 
of the
Center for Teaching and Learning
Georgia State University
ITC
Instructional Technology Center		 Library
GSU libraries		 UETS
University Educational Technology Services
GSU Senate:
IS&T: Information Systems & Technology Committee		 TLTS
IS&T Teaching and Learning with Technology Subcommittee
 
October 23, 2003
Doing enough HTML to tame Web pages
1 Getting ready to do HTML coding
1 What is HTML?

HTML is Hypertext Markup Language, a coding convention for telling Web browsers how to present the text and graphics on Web pages. The coding consists of pairs of tags, one tag to mark the beginning and one tag to mark the end of a segment of text or graphics. For example, the bold formatting of this is bold is coded as:

<b>this is bold</b>

The text and tags on a Web page are visible when one views the HTML source code of the page. For example, to view the HTML source of this page in a browser, select View|Source (IE) or select View|Page Source (Netscape).
2 Why use HTML pages on Web sites?

Compared to other file formats, HTML pages:

  1. Are smaller, which means that browsers display them faster
  2. Do not require other programs to be launched for viewing, which increases display speed
  3. Permit reuse and repurposing more readily because the text is accessible to viewers
  4. Present the fewest obstacles to viewing and printing Web pages
3 What programs will let me edit HTML tags?

HTML source code can be edited with any editor, e.g., Word, but the more Web pages one creates, the more useful an HTML editor becomes. Word creates an HTML page with "Save as Web page" in the File menu .

HTML editors

  1. Macromedia Dreamweaver comes with site management functions such as FTP capability to move files to/from Web sites. Dreamweaver is available from USG MSD for a license fee and from the GSU Bookstore at an educational rate.
  2. Microsoft FrontPage is licensed to GSU, available from IS&T UCCS, but its server extensions (including FTP) are not supported on centrally-supported GSU servers. For these sites, FrontPage users also need an FTP program such as WS_FTP or RapidFiler. Some units at GSU make the extensions available on their own servers for use within the units.
2 Editing HTML tags: Links
1 How do I create and edit links?

In an HTML editor: Highlight the text to be the hot spot (what the viewer clicks) for the link, open the link dialog box, e.g., with [Ctrl]l, and complete or edit the link.

In Word: Highlight the text to be the hot spot for the link, select (from the Word menu bar) Insert|Hyperlink, and indicate (by clicking or typing) the file being linked to. To see what the HTML tags for the link look like:

  1. Save the page as a Web page, which generates an *.html file
  2. Select View|HTML source
  3. Search ([Ctrl]f) for the characters in the hot spot

Anatomy of a link: For example, the HTML coding for a link to how to put stuff on the Web is:

<a href="stuffonweb-howto.htm">how to put stuff on the Web</a>

The parts of the link are:

  Part Function
  <a href=" Begin the link.
  "> Finish the address of the link.
  how to put stuff on the Web Specify the text in the hot spot.
  </a> Close the link.

In the HTML coding scheme, "<...>" denotes an HTML tag sequence, "a" is short for anchor, "href" is short for Hypertext REFerence, "<" opens a tagged element, and "</...>" closes a tagged element. The possible forms for links, where URL (Uniform Resource Locator) is the Web address, are:

  1. Hyperlink: <a href="URL">text of hot spot</a>
  2. Hyperlink for interior page location: <a href="URL#anchoronpage">text of hot spot</a>
  3. Hyperlink for moving within a page: <a href="#anchoronpage">text of hot spot</a>
  4. Tag for marking a page location: <a name ="anchoronpage"></a>
  5. Mailto link: <a href="mailto:emailaddress">name of recipient</a>

If the link refers to your hard disk and you want it to be a Web location, edit the link to make it point to the right place. This is one of the ways that Word is ill-behaved as an HTML editor--it assumes an absolute location for a file that includes a full path, which points to the local hard disk, rather than a relative address within a Web site.

Word also insists on including Microsoft-specific coding in the HTML source, some of which can be eliminated by saving the file with "Save as Web page, filtered." To compare pristine HTML with Microsoft-"enhanced" HTML, view the HTML source for this page and the HTML source for this page saved in Word side by side. The pristine HTML file is 25K while the Word HTML file is 35K.

 
2 How do I get "Save as Web page, filtered" on my machine? The filtered option is available as a Microsoft download for Office 2000. It is a standard feature in Office XP.
3 How do I choose between absolute and relative links? An absolute link bears the complete Web address, e.g., for this page, the absolute link is http://www.gsu.edu/~wwwltc/howto/html-howto.htm. A relative link, from a page in the same folder, is just html-howto.htm. Browsers interpret relative links to mean that the address is relative to the location of the calling page. Because relative links minimize browser overhead, using them speeds up page loading.
4 How do I minimize editing mistakes in links? To minimize editing mistakes in links, load the target page in a browser, copy ([Ctrl]c) the address of the page, and paste ([Ctrl]v) it into the link field. If a link should be to a location on the page other than the beginning of the page, add the appropriate anchor location. If a relative link is needed, delete the portion of the link that makes it an absolute link.
3 Mastering formatting nuances
1 Why do I need to use tables? Table formatting is the usual way of arranging multi-column material. Tables are helpful because browsers treat sequences of spaces and tabs as a single space, which destroys the space between spaced/tabbed columns. To maintain the visual appearance of spaces/tabs, Word inserts hard spaces, which complicates the HTML coding. For example, this text is formatted in a table. Formatted with spaces and tabs, the Word document looks fine, but its HTML rendition is really tough to edit, especially with its embedded paragraph marks.
2 What might prompt me to replace Word as my HTML editor?

Impatience with Word as an HTML editor seems to ensue with one or more of the following circumstances:

  1. Compared to others' Web pages, your pages seem to take forever to load
  2. Your pages have so many HTML-related codes that you have trouble finding the HTML tags you want to change and when you find them you can't figure out how to change them to your satisfaction.
  3. You can't make your pages behave like you want them to because of the complexity of the automatically-generated codes.

 
4 Developing more savvy for living on the Web
1 Where can I find the other HTML tags and what they do?

Here are pages showing HTML tags and their definitions: www.webmonkey.com, CNET.com. For gentle introductions to HTML aspects, examine these page sets: www.webmonkey.com, CNET.com. For e-learning about using an HTML editor, check out GSU's eTraining courses (search the catalog for "html" or the name of an HTML editor).
2 I don't intend to become a webmonkey, but where could I find out about good Web design painlessly?

To absorb good page design painlessly, inspect pages at Web sites that seem invitingly usable, e.g., Sun Microsystems, Amazon, and Wall Street Journal. Then, view the source code (in the browser or downloaded into your editor) to see how the effects were achieved. Appropriate the salient aspects of the designs for your pages.

For page design principles, consult Jakob Nielsen's site useit.com or his book Designing Web Usability: The Practice of Simplicity.

 
Copyright © 2003 Center for Teaching and Learning with Technology (TLTC), Georgia State University, Atlanta, Georgia, USA. All rights reserved.