TGP Makeover
This exercise illustrates how to approach the job of converting a typical thumb-preview TGP page into table-less XHTML with all the styling being done in CSS. The original (this is just a sample including the main elements only once) is coded in HTML, uses tables and some CSS and this is the end product. Compare the source code from these two links, just note that to make this exercise easier to follow, the styles are included in the documents. In use they might be stored separately and referenced by <link rel=”stylesheet” href=”/path_to/style.css” type=”text/css” media=”screen” />.
The first step in a “makeover” like this should be to validate the document in its present form. This one had only a few errors:
- Two title tags.
- Character-set meta tag appears twice.
- The header image has no alt tag.
- In the full version of the original, a div id (largelinks) was used multiple times. ID’s must be unique: use “class” where a style is going to be repeated.
Although not directly related to this exercise, I changed the document’s character set to UTF-8 (Unicode). I don’t want to go off at a lengthy tangent (you can read more about Unicode here), enough to say that ASCII, Latin 1 (ISO 8859-1), etc., are deprecated these days. Use this instead (note the space and oblique used to close the tag):
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Another change I made not directly related to the main point of this exercise, was to remove the bookmark javascript script into its own file, because it is search engine friendly to keep your head section to a minimum. That is one reason for creating a separate stylesheet file, the other being that if it is read in separately, the file will be cached, which makes subsequent pages of multipage sites load faster.
The value of converting to XHTML as part of a makeover is debatable. XHTML fans argue that you are future-proofing your work and since CSS behaves slightly differently, why be forced to learn these differences later and perhaps have to change some of your code? My view is that several scripts these days (notably blogs) default to XHTML, thus whatever the future may hold, it is easier to tackle a single HTML/CSS combo for everything. Fortunately, very few coding changes are required for XHTML:
- Change your doctype and html tag to:
<!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">
Here is an in-depth discussion of doctypes. - All tags must be in lower case. I changed the case of the keyword and description metas and also applied the space+oblique to close the tags properly (compare the two source codes). I also had to convert the p (paragraph) tags to lower case.
- The target tag in the head must also be closed with space+oblique (be aware this tag works but is not part of the XHTML convention).
- Search and replace all <br> tags making them <br />.
- Change all image tags to end with that space+oblique.
- All dimensions and tag parameters must be enclosed in quotation marks.
- Although some HTML editors allow it, putting actual symbols (such as the copyright mark) into your code is a no-no because they may not display correctly (the copyright symbol of the original showed as a question mark in my browser). Use entities instead such as & for ampersand: this page at Pemberley includes an entity table.
Now the CSS. Here is the new file with comments:
/* 18sweeties */
/* There may be nothing in a style file to remind you to what it
belongs, so give it a title */
/* Some will tell you to lay out your CSS file strictly separating structure and fonts/colors. That can be very confusing for CSS novices, so here I have placed the page-wide parameters first and the rest in page order */
/* globals */
body {
/* for cross-browser compatibility always state the overall margin */
margin: 0;
/* include MAC fonts */
font: 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
background: #fffee8;
color: #000; /* set a font color to be safe */
}
img {
/* use this and you don't need border="0" in any of your image tags */
border: 0;
}
a {
font-weight: bold;
/* when colors are represented by 3 pairs, 0000ff, they can be shortened */
color: #00f;
text-decoration: underline;
}
a:hover {
/* it is not necessary to repeat parameters which will be inherited so only a color change is needed here*/
color: #5454ff;
}
/* I always include this fix for a problem Explorer has with short divs. It is sometimes necessary to name the div, but this avoids that a lot of the time and if it isn't needed, (usually) doesn't hurt */
* html div {
height: 1%;
}
/* in page order for ease */
/* div align=center was used in the original document but is not compliant with current standards so this div was used instead */
#header {
/* 17px represents top/bottom and auto left/right. There is no need to specify all four measurements when the pairs are the same */
margin: 17px auto;
text-align: center;
}
.wrapper {
width: 769px;
margin: 0 auto;
/* no need to specify left, top, etc borders when all are the same */
border: #c103ff 2px solid;
background: #f9e6ff;
}
/* check out the source code: all that was needed to replace the table holding the thumbs was a width-restricted container (wrapper, above) and a margin around the images */
.thumbtable img {
/* replaces the cell-padding used in the original file */
margin: 2px;
/* placing image dimensions here means no need to include them in HTML */
width: 120px;
height: 160px;
}
/* when different style class have the same parameters, save code by combining them in a comma-separated list */
a:link img, a:visited img {
border: #cc0033 2px solid;
}
a:hover img, a:active img {
border: #cc0033 2px dashed;
}
/* technically we could have given a class to the paragraph tag used originally but using a div here is more semantically correct */
.bookmark {
margin: 15px auto;
text-align: center;
}
.largelinks {
font: 16px Arial, Helverica, sans-serif;
font-weight: bold;
letter-spacing: -1px;
}
.largelinks a {
font-size: 24px;
color: #ed145b;
line-height: 28px;
}
.largelinks a:hover {
color: #00497e
}
/* lists such as trade links need not be displayed vertically and can be given specific widths */
ul.largelinks {
width: 769px;
margin: 15px auto;
padding: 0;
list-style: none;
}
ul.largelinks li {
float: left;
width: 33%;
margin: 0;
padding: 0;
text-align: center;
}
/* these next lines cleaned up a mix of paragraph tags and spaces */
/* after multiple columns, in this case the inline list displaying trade links you must tell browsers when you want to begin a new block or they will try to create an extra column */
#footer {
clear: both; /* that is what this line does */
text-align: center;
padding: 50px 0;
}
/* Mozilla browsers and Explorer do not handle "clear" the same way, so we end up with more space than we want in Explorer. The following instruction which can only be read by Explorer and is ignored by Firefox etc., corrects that */
*html #footer {
padding: 35px 0;
}
#footer img {
margin-top: 50px;
}
The result looks the same in both Explorer and Firefox and just as it did originally. The combined size of the HTML and (uncommented) CSS for the revised version is 5.01KB compared to 6.54KB for the same section in its original form. That is almost a 25% saving, providing obvious speed and bandwidth benefits. Perhaps more importantly, had this been a text-based site, the content to code ratio would have improved dramatically, giving a distinct edge with the search engines.
Leave a Comment