Authors of web pages sometimes have a near-pathological aversion to working in the actual medium itself, when it comes to prototyping pages and sites. They will readily employ everything from Photoshop to PowerPoint to develop their pages (which are mockups of the design, not prototypes), only to have to recreate their work later in the process.
This guide is meant to help web authors prototype in HTML (and CSS) itself, and as a matter of course, gain familiarity with Web standards, particularly semantic HTML for structuring content, and CSS for providing a layout (and later, a fully-realized design). Even authors who believe that their final work will include some Flash or video elements would be wise to prototype in HTML, which can be indexed by search engines in ways that Flash cannot and provides a structured, accessible alternative to Flash content.
Working with your actual content is important because content, form, and function are intimately related, particularly in the rhetorical situation surrounding digital discourse on the Web (or what Kairos calls a "webtext").
Although it may be tempting to create a visual design with greeked text or markers ("Title Here"; "Navigation Here"), working with actual content allows for design and meaning to emerge together. Put another way, instead of preparing a mock-up that assumes one area of a page will contain lots and lots of text, a content-out prototype helps you see exactly how much content there is, and how much flexibility will be required in the overall layout of a page.
There's no magic to writing XHMTL, beyond using your powers of description. If what you're marking up is a heading, or serves a heading-like function, use a header tag. If it's a list, or an item in a list, same deal: use the list item and either an ordered (numbered) or unordered (bulleted) list. Paragraphs, and only paragraphs (not headers, not lists) get marked up as paragraphs.
Elements in an XHTML document emerge with familial relationships: parents, children, siblings. Parents are the immediate ancestors of children; children are the immediate descendants of parents. Beyond immediate parent-child relationships, one can simply describe relationships as ancestors or descendants.
Using basic tag groups elements of the same kind, and makes them distinct from one another: paragraphs are paragraphs, but they are also not headers or lists. Parent elements also perform grouping functions: an unordered list tag groups all of its child list-items (and their children).
For more custom groupings, one can simply add a class to an element that,
like tags, describes the page's structure. If your page has a number of asides
or comments, one might write <p class="aside"> for those particular paragraphs.
And again, parent-child relationships and their grouping functions matter: although one could add a class to each list-item in a list, it would be much easier and cleaner to add a class to the parent ordered or unordered list tag...unless the items are distinct from one another in some way.
Sometimes, it is useful to distinguish a unique element. A page's navigation
can often be marked up as an unordered list (structurally speaking, navigation
is nothing more than a list of links). To uniquely identify one's navigation,
assign it a unique, structural identifier (id): <ul id="navigation">.
But unlike classes, which can be used over and over again on a page, unique
ids can be used only once--regardless of what element (paragraphs, headings,
lists) the id is assigned to.
Again, HTML works best from the inside out: start with the smaller elements
(headings, paragraphs, lists). Then, it's time to build the larger areas of
the page, using the <div> (division) tag. Divs work best
when coupled with unique ids for describing different areas of the page (common
ones might be ids like "header," "footer," "main-content"). Again, call it
like you see it: if you have a glossary area on the page, go with <div
id="glossary"<; if, however, over multiple pages, you have a glossary,
commentary, or related links, and you plan to have them all in the same area
of the page in its actual design, <div id="supporting-content"> might
be a better choice.
Once you have a basic document structure in place, the visual side of prototyping can begin. Remember that by itself, CSS doesn't do anything; it's only when a Web browser applies CSS styles to a richly structured HTML document that CSS springs to life.
Each Web browser applies default CSS styles to HTML documents; when you see a "naked" HTML page, it's actually had some minor styling applied to it (e.g., the big ugly bold Roman text on the <h1> tag).
Using a reset CSS file, like Yahoo!'s, helps to ensure that all browsers display your prototype (and later, your whole design), in a more consistent manner
By default, Web browsers display HTML documents in one large column. Elements in the document appear top-to-bottom in the same order that they are written in the source code.
Generally speaking, positioning should only be done to the elements that you do not wish to appear in the main column flow. If, for example, you have a navigation area, and wish to place it in its own column apart from a header, footer, main content, etc., work your positioning magic on navigation.
The simplest form of positionig is absolute. An absolutely positioned element is removed from the document flow, meaning that all ellements below it in the source code will jump up to take its place (remember, content in a Web browser wants to move up and to the left).
To position an element absolutely, one writes the CSS property-value pair position: absolute;. The first time you do this may be a little disconcerting, as you'll suddenly see your page content mashed together
To correct this mish-mash, three things need to happen:
width: 200px;.left: 0px; on your element (you can always tweak is position later, of course).width: 200px; for your absolutely positioned element, you might move the main content over by 220px, giving the appearance of a "gutter" of 20px between the positioned element and the main content, e.g., margin-left: 220px;.Some terms, particularly as they are used in this guide. Google them for more information.
<acronym> tag, "acronym" is
the element. The acronym element can also be styled in CSS, e.g., to give
it a dotted underline: acronym { border-bottom: 1px dotted black; }id attribute;
ids may be used only once per page, regardless of the element they are assigned
to. In addition to giving additional styling capability in CSS (like classes),
ids can appear in the URL string for a page, causing a browser to "jump" to
the element on the page. E.g., if there is a page area <div id="footer">,
it can be jumped to directly via http://example.com/mypage.htm#footer.
The same syntax enables CSS styling: #footer { background-color: red;
} would make the element with id="footer" have a red
background.