Heads Up: The First 9 Lines of Pika Code
From PikaDocs
By Brian Lawlor & Mark Sawyer
Legal Services of Northern California (http://www.lsnc.net/)
| Table of contents |
Ground Zero
Okay, so you're really motivated to pop your head under the hood and dig into all those Pika templates. You decide to head to ground zero and fearlessly pop open the default.html template. First thing you see are nine lines of the geekiest HTML code you've ever seen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <meta http-equiv="MSTHEMECOMPATIBLE" content="no"/> <title>Pika: %%[page_title]%%</title> <link href="%%[base_url]%%/css/danio.css" rel="stylesheet" type="text/css"/> </head>
"What is all this stuff?" you ask. These nine lines are actually about accomplishing several initial and essential document tasks to assure the web page functions and displays as intended. Let's break it down.
DOCTYPE Declaration
The first two lines comprise the DOCTYPE (http://en.wikipedia.org/wiki/DOCTYPE) or document type declaration that simply declares or defines the Document Type Definition (http://en.wikipedia.org/wiki/Document_Type_Definition) (DTD):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The DOCTYPE tells your browser what the ground rules are for proper rendering of the web page, i.e., what document structural elements, attributes and related values work or won't work as intended with the declared DTD. (At the risk of bringing back bad memories, think of it as akin to grammatical syntax. You know, all those grammar rules you studied so diligently for the SAT, that have proved so much more useful in life than, say, what you learned in third-period trigonometry? But we digress.) Also, if you're running validation on your web pages, this is the code that tells the validator which set of rules to use to determine whether the page is "well formed (http://www.w3.org/TR/xhtml1/#diffs)."
Although not universally embraced (http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=107#4), the prevailing view is that XHTML 1.0 Transitional (http://www.w3.org/TR/xhtml1/) is the way to go at this juncture in the world of web design. Hence, the first line states "XHTML 1.0 Transitional" as the DOCTYPE and the second line states its related DTD.
For more about, and a contrarian view of, this subject, we recommend HTML Dog's Declarations: How to Define a Valid XHTML Document (http://htmldog.com/guides/htmladvanced/declarations/).
XML Namespace Declaration
The second tag, in line three ...
<html xmlns="http://www.w3.org/1999/xhtml">
... is the XML namespace (http://en.wikipedia.org/wiki/XML_namespace) declaration. The reason this is stated is because your new best friend, the XHTML specification stated in the DOCTYPE above, is a type of structural markup language that is actually something of a shotgun marriage ... uh, "bridge" between old-school HTML and emerging XML (http://en.wikipedia.org/wiki/Xml)-based technologies. The XML namespace declaration is actually not needed for many web pages because more often than not such pages are "served" as text/html, so the XML declaration is superfluous. But Pika in contrast has, and will increasingly have, functionality that purposefully relies on XML for its handling of data.
Head tag
At lines 4-9, the head tag (http://www.htmldog.com/reference/htmltags/head/) is a standard HTML structural element that contains core information about the web document, including the meta, title and link tags:
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <meta http-equiv="MSTHEMECOMPATIBLE" content="no"/> <title>Pika: %%[page_title]%%</title> <link href="%%[base_url]%%/css/danio.css" rel="stylesheet" type="text/css"/> </head>
Meta tags
Meta tags (http://www.htmldog.com/reference/htmltags/meta/) are simply "data" about "other data." The analogy here is that the information within a meta tag clues in the "user" (e.g., the browser, a search robot, whatever) about what to expect in the other data (e.g., the contents of the web page).
There are two meta tags here: one stating the charset paramenter (http://www.w3.org/International/O-HTTP-charset) which specifies the character encoding (http://www.w3.org/International/O-charset.html) enabling the web page to display a predictable character set. As a practical matter, XHTML-based designs will invariably rely on iso-8859-1 (http://www.ascii.cl/htmlcodes.htm), which is a Latin-based character set familiar to Western European-derivative lanagues; or UTF-8 (http://www.ietf.org/rfc/rfc3629.txt), which is larger, more comprehensive character set that encompasses most of the world's written languages:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
... and the other, a more arcane reference to a proprietary IE meta tag that prevents the default Windows XP "theme" interface design from displaying whenever viewing Pika pages within IE (hence, the "no" value):
<meta http-equiv="MSTHEMECOMPATIBLE" content="no"/>
The remaining tags within the head are familiar to most folks: the title tag (http://www.htmldog.com/reference/htmltags/title/) which defines the page title displayed on the top bar of the browser window; and the link tag (http://www.htmldog.com/reference/htmltags/link/) which in this instance tells the browser where to look to find the danio.css file, i.e., the CSS (http://en.wikipedia.org/wiki/Cascading_Style_Sheets) (cascading style sheet) that controls presentational or "style" characteristics throughout the Pika CMS:
<title>Pika: %%[page_title]%%</title> <link href="%%[base_url]%%/css/danio.css" rel="stylesheet" type="text/css"/>
All the above XHTML structural elements are essential to proper functioning of the Pika CMS. As part of the Claire redesign these elements will remain intact, except possibly for one: the declaration about the character set.
Related articles:
