Tonight's Agenda: The Technical Stuff, Part 2
Web Standards Begin at the Beginning
Different strokes for different folks, er, browsers: it all begins with DOCTYPE.
Every browser has two basic modes of operation, two sets of rules it can apply to determine how to display any given markup file:
- Strict mode
- Quirks mode
Unless you specify otherwise, your markup will be treated to the quirks, whatever they happen to be, for the browser your user is using. Quirkiness means replicating the bad old days of yucky, non-standard HTML and DOMs. Ya don't want to go there, believe me.
To specify otherwise, you need to begin every document with a DTD (Document Type Declaration): aka DOCTYPE. There are three main DOCTYPES in use for Web pages:
- Strict: allows only well-formed XHTML elements
- Transitional: allows all XHTML elements and tolerates a few deprecated ones
- FrameSet: must be used if you are going to use frames
By declaring a doctype, you force a browser to go into strict mode, and the browser will parse your code the way it was intended. Otherwise, you get quirks mode.
Check out this chart by Eric Meyer for supported DOCTYPES and their results. He did the hard work so you don't have to.
Get Your Red-Hot DOCTYPE Here!
So, you mighe be wondering, what does one of these magical, DOCTYPE things look like and where can I get myself some.
Here's an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
And here's another:
<!DOCTYPE html PUBLIC "-//WC3//DTD HMTL 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Here's where you go to get fresh ones:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Structure, Structure, Structure
Basically, every page on the Web has the same structure or architecture. These elements form the foundation, to use a building metaphor just a bit longer.
They always come in the same order:
- DOCTYPE
- HTML
- HEAD
- TITLE
- - - the page title goes here - - - - (end) TITLE
- (end) HEAD
- BODY
Everything you want to display on the screen. - (end) BODY
- (end) HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<p> - - - Your HTML content here - - - </p>
</body>
</html>
Another Way to See the Structure
Here is a representation of key elements of the Document Object Model. Notice that the HEAD element contains information that generally does not get displayed. Note also that the elements contained inside the rectangle representing the BODY are all "descendents" of the BODY. They are also all elements (or objects) that are defined as "block elements." HTML also sports another type, "inline" elements.
Eleven Key HTML Elements
In addition to <html>, <head>, <title>, and <body>, the eleven most important elements for right now are the following:
- <h1>, <h2> etc.: marks the beginning and end of headings (there are six levels -- h1, h2, h3, h4, h5, and h6)
- <div>: marks the beginning and end of divisions (a division can include other block level elements)
- <p>: marks the beginnings and ends of paragraphs
- <ul>: marks the beginnings and ends of unordered (bullet) lists
- <ol>: marks the beginnings and ends of ordered (numbered) lists
- <li>: marks the beginnings and ends of items in unordered or ordered lists
- <dl>: marks the beginnings and ends of definition lists
- <dt> marks the beginnings and ends of definition terms (the items to be defined)
- <dd>: marks the beginnings and ends of the definition data (i.e., the definition) of the definition term
- <a>: marks the beginnings and ends of link anchors or cues (the text or image you see on the screen that provides a link to other pages)
- <img>: marks the insertion of a graphic element
Except for the <img> element, all of the above are written in pairs of tags with one tag signalling the beginning of the function and the other signalling the end. So a paragraph element looks like this:
The <img> element does not have two parts. But it does have additional information inside its one part. Here's an example:
Note that the <img> element signals its close at the end of all the information in the tag. Note also that the <img> element requires a source (src): that is, it requires a piece of code that tells the browser the location (address) of the file to be displayed. The piece of code is a URL, or Uniform Resource Locator. In the example above, the file I want to display is located on the same server as the Web page I am coding but it is inside another directory, called "images." The "images" directory is located inside of whatever directory houses the HTML page I am coding. It is, thus, a relative URL. We will begin working on the twin concepts of "relative" and "absolute" measures and URLs next week.
Questions and Discussion from the Reading
FTP practice, again
Using CoreFTP on your machine, download the file called index.html from your directory on the student-iat.ubalt.edu server.
Using TextPad, open the document and type the following code on a new line after the </p>:
<li>One thing about me here</li>
<li>Another thing about me here</li>
<li>A third thing about me here</li>
</ul>
When you have written three things about yourself, use CoreFTP to upload the revised version of index.html to your directory on the server.
Using a browser, go view your work. Now add a fourth item to the list. View again.
Finally, change the element surrounding your name to a level one heading. View again.
Ungraded Assignment for Next Week (In Other Words, Good Practice)
Using an FTP client and the assigned readings for next week, add a second level heading called "Assignments" to your index.html page on the iat.ubalt.edu server. Under that, add a new, ordered list. Use the list to show the assignments and due dates for this course. Later on we'll add links to these.
Finally, find or create an image of yourself: a photo, an avatar figure, a line drawing, or whatever you'd like. Write the code to add the image to your page underneath the heading displaying your name.