![]() | |
![]() |
Expertise in (X)HTML: a Non-Chess DigressionBy David Snitkof![]() The World Wide Web Consortium is responsible for the maintenance of web standards such as the XHTML 1.0 Specification. (link to source) When conducting research in the area of expertise, one thing quickly becomes apparent. Almost every experiment is in the domain of chess. While chess is probably better suited to this than is any other domain, the near-absence of other objects of study causes much of the discussion to be framed in terms of chess. This deficiency led me to wonder how one might discuss expertise effects in a completely unrelated domain. While working on this very project, the answer hit me. I was sitting with Victor and showing him that I would create a simple web page to redirect users from the WebCT Group Presentations area to the project’s location on my own server. While I was writing the code from scratch in WebCT’s online editor, Victor said, "Do you know how you can tell you’re becoming an expert?" I was confused at first, but looking at my code, I realized what he meant. Rather than coding sequentially, I created a template and then filled in the slots. I started by typing the code that must be included in all HTML pages:
<html> Once I had created the skeleton, I then filled in the code for the redirect, as well as to make some words appear on the screen. The final result was as follows:
<html> Fufilling the ConditionsI now realize that, in doing this, I was fulfilling several of the conditions for expertise.
I now knew theoretically what I knew practically all along. I was an XHTML expert! HTML Semantic StructureAs the entire class has now had the experience of creating a web site, I thought it would be interesting to discuss the semantic structure of HTML and explain an "expert’s approach" using template theory as a guide, since that concept seems most applicable here. All html documents must have-at a minimum-the first block of code written above. This provides the structure for the document, a head and a body. Within the head, there must be a title tag. Most designers include a DOCTYPE declaration even before the first <html> tag. This tells browsers what specific version of the language you are attempting to use. Here is an example of the XHTML 1.0 Transitional DOCTYPE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Apart from some fancy tricks and perhaps some JavaScript functions, the head of the document will only contain the title (which is required) and a link to a style sheet. This brings us to another point, that style should be separate from semantics. The <FONT> tag was officially abandoned in 1999 in favor of external style sheets. Template theory provides a core and slots, but it does not provide for information which is semantically unrelated to the variable in the slot. What matters is that your sentence is part of a paragraph under the second sub-heading and that it is a label for a text input box below, not that you decided to make it red, bold, and 22pt. The HTML Tag as a TemplateNow that we have that out of the way, we can get to the true, most basic template in a web page, the individual tag itself. A tag is composed of an element and several optional or required attributes. The element is analogous to the core of a template, and the attributes are like slots. The basic structure is: <element attribute="value" attribute2="value2">child node</element> Let’s analyze an example: <a href="http://google.com">click for google</a> In this case, the "a" is the element name an serves as a constant core for the template. "a" stands for "anchor" and is the element that creates hyperlinks. "href" is one attribute, the value of which specifies the destination location for the link. After the child node, the element must be closed with the </a> tag to indicate that the link is finished. This code, when processed by a browser, will display the words "click for google" which, when clicked, will transport the user to google.com. The template is extensible, and more slots can be filled. For instance, one can add a "target" attribute. If the value is "_blank", the link will open in a new window. <a href="http://google.com" target="_blank">click for google</a> Node-Based Representation and the Document Object ModelAs stated above, the "click for google" text is referred to as the "child node of the <a> tag". This node-based representation of a web page is known as the Document Object Model (DOM). Experts think of web pages in this way, giving a distinct semantic structure to the information. In some browsers, such as Mozilla, there is a tool for displaying and examing the DOM of any web site! In conclusion, as an individual progresses from novice to expert in HTML, he or she will begin to develop a template-based representation of web documents, formalized in the Document Object Model. |
![]() ![]() ![]() ![]() All Rights Reserved |