THL Toolbox > Developers' Zone > Guidelines And Templates For Making THL Web Pages
Guidelines And Templates For Making THL Web Pages
(PLEASE NOTE: This material is incredibly out of date, and does not apply at all to the new production model on quandu, i.e. "THL 1.0".)
Contributor(s): Travis McCauley
A THL web page has three distinct parts:
- a top section which includes a banner and menubar
- a main section which can have a single-column, two-column, or three-column layout
- a set of CSS stylesheets which control the layout and formatting of all pages. View the stylesheet documentation here
The Main Section
The simplest way to get started making THL web pages is to make a copy of the single-column template. Replace the content inside of the <div id="main"> tag with your own xhtml markup. To learn more about the features of this template view an annotated example. View the source to read descriptions of the elements of the template.
If you're creating a portal page, use the three-column layout. Replace the content inside of the tags <div id="columnCenter">, <div id="columnLeft">, <div id="columnRight"> with your own xhtml markup. Or download this easy-to-use template.
If you're creating pages below the portal and you want to keep a sidebar on the left, use the two-column layout. Replace the content inside of the tags <div id="columnLeft">, <div id="columnMain"> with your own xhtml markup. Or download this easy-to-use template.
The Top Section
The header, not to be confused with the html document <head> element, contains the logo, top-level page header, breadcrumbs and menubar. The Banner
The banner is contained in the <div id="banner"> element. It contains the logo, the top-level page header, and the breadcrumbs. The only bits you should change in here are the top-level page header text in the <h1> tag and the breadcrumbs text and links in the <div id="breadcrumbs"> tag.
The Menus
The menus use three separate files, a menu engine file, a menu configuration file, and a menu variables file. In the templates, these are respectively:
/tibet/scripts/new/menu9_com.js
/tibet/scripts/new/thdl-menu-config.js
/tibet/scripts/new/menu_community.js
When making new pages, be sure to follow the templates and use the new menu engine at /tibet/scripts/new/menu9_com.js. Since the THL uses so many different menus in its various pages, we have separated the menu configuration variables and the universal THL menu into the file /tibet/scripts/new/thdl-menu-config.js. Do not modify this file.
So the only file you will change is the menu variables file. This file is where you configure the names and URLs for your menu options. When creating new menu variables files, use the /tibet/scripts/new/menu_community.js file as a template. The key to understanding the parameters in each new menu item Array is written in comments at the top of the file. Remember Menu1 is already declared in /tibet/scripts/new/thdl-menu-config.js so do not declare it in your new file.
The menus are contained within the <div id="menubar">. The only thing to change inside this div is the value of the src attribute in the tag: <script type='text/javascript' src='…menu_community.js'></script>. This should be changed from menu_community.js to menu_YOUR-DOMAIN.js. Currently, top-level menu variable files that work with the new engine (version 9.1) are available for all five THL domains in the /tibet/scripts/new/ directory.
The menu code is currently at version 9.10 and is made freely available by the author Ger Versluis.
Markup Guidelines
Semantic Markup
To ensure accessibilty to the widest range of browsers (not just visual web browsers), stick to simple W3C-compliant semantic markup and use CSS for text formatting and page layout. This is called separation of structure and presentation. Here are some simple guidelines:
- use <strong> and <em> tags instead of <b> and <i> tags for bold and italics respectively.
- use h2, h3, h4, h5 and h6 headers to create hierarchical divisions in your document. The h1 header is reserved for the THL Header in the banner.
- use style attributes very sparingly and only when absolutely necessary to override the default style specified in thdl-styles.css
Never use the <font face> tag. All font-family, color, decoration, etc. can be done more easily using CSS
- use css instead of tables for your layout. use tables only to represent tabular data.
Use lists, <ul>,<ol> and <dl> to represent lists of things like navigation links, outlines, and term/definition pairs, etc.
When creating classes of elements use names that describe the content not the desired look of the content. For example, use <span class="imageCaption"> instead of <span class="grayItalics">
Markup for Audio-Video Database Search Boxes
The steps necessary on any of the THL pages to get this working are:
- Change the method="post" to method="get" in the search form tag.
- Change the <input name="title"…> to <input name="searchTerms"…>
- Add <input type="hidden" name="searchType" value="title"> after the input tag specified above.
If you really want the search to search title, caption, description, workflow notes, keywords, credits, and situation background then change the value of searchType in your forms to "keywords".
XHTML
THL pages should be marked up in valid Xhtml. To be valid means that your markup uses all tags correctly as defined in the W3C's DTD for Xhtml. To check your document's validity, paste the URL into the W3C markup validator form field. If you have also added any CSS rules, validate your CSS too.
Here are some simple rules to follow to ensure valid xhtml markup:
- All tags and attributes must be lowercase
All tags must have close tags. If you are writing an empty tag like <br>, you can shorten it to <br/>
- All attributes must be in quotes, either double or single quotes are ok, but they must match.
Shorthand attributes are not allowed. So use <option selected="selected"> instead of <option selected>
All tags must be properly nested with no overlapping. Don't do this: <form><p></form></p>
You must include the xhtml doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
All <img> tags must have an alt attribute describing the image to non-visual browsers
To use an ampersand, as in "Tibetan & Himalayan…", you must use the html entity, & or the page will not validate. To see other examples of html entities such as em dashes (-), follow this link Coding by Hand
Hand-coding your html documents with a simple text-editor is the best way to produce clean, readable markup that validates. Sticking to simple structural markup makes it easy to hand-code because you won't have confusing nested tables, and bloated presentation code inside your tags. Another advantage of hand-coding is easier management of nested elements.
HTML Editors
If you prefer to use a WYSIWIG html editor like Dreamweaver, use the most recent version (as of 4-22-03 Dreamweaver MX is the current version ) since it has the most support for W3C Standards-compliant code. Many of the older versions of editors could not output xhtml, external stylesheets, or even well-formed html. Here are some editors which exist in free versions that you may wish to consider:
- jEdit (Java-based, cross platform, HTML & XML, THL Unicode keyboard works in it)
- UniRed (Windows only, HTML & XML, THL Unicode keyboard works in it)
- NoteTab (Windows only, HTML only)
- BBEdit (Mac only)
Naming Conventions
THL web pages will always have multiple authors, so following our naming conventions will make it much easier for others to find what they are looking for when they need to edit. So here are some proposed naming-guidelines.
File Names
Name your html files with full words that are descriptive of the page. File names should be lowercase and words separated with hyphens. Adhering to this standard will make filenames more readable and easier to identify in a long directory list. This will also reduce broken link mistakes in your code's href and src attributes since people can more easily remember and sight read full words.
HTML and XHTML files should always end with a ".html" extension. We must avoid codenames and abbreviations that only make sense to the original author. While we're talking about files, please be mindful to keep directories tidy and free of clutter. Keep old versions and test versions of pages out of the main directory. Stick these files in a directory named "old" if you feel they must be kept for an important reason.
Links: Techniques & Propaganda
Westciv Self-paced courses and learning resources
Westciv provides excellent self-paced courses that teach the appropriate use html markup and how to style it using CSS. They always have one free teaser course running at a gradual weekly pace.
ALA: A List Apart
This is one of the better sites for practical articles discussing web standards and how to use them.
Street Level: Editors vs. Authoring Tools
Anyone who has taught HTML and web development has heard the question: "Why bother learning all these tags and attributes if you can use a WYSIWYG editor?" It's a fair question, so we asked some web developers who hand-code HTML why they do it.
Chunky Soup
This is a nice blog/web-design repository.
MACCAWS: Making A Commercial Case for Adopting Web Standards
MACCAWS' mission is to provide Web authors with the resources necessary to promote Web standards as a commercially desirable choice for clients.
Blue Robot
This is another great repository for CSS layout tips and techniques
Hex Color Chart
This is a local copy of the Visibone Color Popup Chart. Just a handy color picker.
HTML Tidy
When editing HTML it's easy to make mistakes. Wouldn't it be nice if there was a simple way to fix these mistakes automatically and tidy up sloppy editing into nicely layed out markup? Well now there is! Dave Raggett's HTML TIDY is a free utility for doing just that. It also works great on the atrociously hard to read markup generated by specialized HTML editors and conversion tools, and can help you identify where you need to pay further attention on making your pages more accessible to people with disabilities.
XHTML/HTML Compatibility Guide
This W3C page discusses techniques for creating xhtml pages that are backwards compatible with HTML4 browsers.
CSS accessibility problems: is markup dead?
This article talks about the use and misuse of CSS as it pertains to accessibility
Accessibility Features of CSS
CSS benefits accessibility primarily by separating document structure from presentation. Style sheets were designed to allow precise control - outside of markup - of character spacing, text alignment, object position on the page, audio and speech output, font characteristics, etc. By separating style from markup, authors can simplify and clean up the HTML in their documents, making the documents more accessible at the same time.
CSS Layout Techniques: for Fun and Profit
If you are looking for help making the transition to CSS layout (that's Cascading Style Sheets), you've come to the right place. I am cataloging here as many useful cross-browser CSS layout techniques as I can find....
Give Me Pixels or Give Me Death
Here is a nice piece of persuasive literature promoting the use of pixels over anything else (ems, percentages, points ) for text sizing in CSS. THL currently uses ems for text sizing
Book: Cascading Style Sheets: Separating Content from Presentation
Suitable for Web designers and developers alike, Cascading Style Sheets: Separating Content from Presentation provides an extremely approachable guide to some of the latest thinking on cascading style sheets for separating out content from presentation.
