It's a fair question, but one I am always reluctant to answer. The old way was bad, very bad. Let's just leave it at that. But that's always like when the little kids start asking about where babies come from. Anyone with enough curiosity to ask is going to be able to pursue the story, so we might as well get our side out there at the same time, so they can see the benefit of doing it right.
I hope.
So, if we set the WayBack Machine to 1997 what would we find that we don't approve of, today? Things stand out immediately. First, there was widespread use of spacer .gif files to get things to line up, visually. When we wanted to change anything about the type on a page, we used the <font> tag. And when we wanted to restrict the layout of page, we used tables. This was new in the new version of HTML, v3.2.
HTML was evolving at a rapid pace back then. The original specification, HTML, only lasted a year or so before HTML v2 was born. From there, HTML v3 struggled to keep up with the competing titans of Netscape and Microsoft, who were releasing new versions of their browsers twice a year, often with support for proprietary tags, which gave rise to another annoying trend of the day, the dreaded "Best Viewed In…" badges. Whatever Web page you wanted, you would think you would have a 50:50 chance of having the right browser open at the time, but it never quite worked out that way.
Spacer .gif files were small, at least. Typically only a single pixel, colored as transparency. These 1×1 image files were then presented with height and width attributes as necessary to fill out some area of a page that would normally be given over to what we now know as block-level tags. In the days before we realized that paragraph text online looks better without indentation, people would use:
<p><img src="images/spacer.gif" height="10" width="25">Here the paragraph begins…
This would have the effect of scooching over the starting text by twenty-five pixels. Other more elaborate effects could be generated, but they all worked basically the same way—the transparent image took up space on the page and caused other elements to flow around it. It wasn't optimal, but it was all we had at the time.
The <font> tag was the driver for anything having to do with type on the page. If you wanted to make your text larger or change the font (which you did often, to prove you could and show off how cool you were), you did that with the <font> tag.
<font face=Verdana size=+1 color=blue>
This would, even without double-quoting the attributes, set the text on your page to appear in the Verdana font, just a little bigger than surrounding text, and color it all blue. When you were done, you issued a </font> and the text reverted to the last size and color and so on. This could get very confusing, very quickly, especially as you adjusted only the size or only the color or only the font face, leaving the other attributes as changed. And this of course is what made it all such a bear to edit and maintain.
And lastly, we used the <table> tag whenever we wanted to restrict a layout. We took the tool designed only to present tabular data and turned it into a framework for our pages, with <td>'s for navigation, headers, footers and even columns in our main content areas.
We didn't do all of these things because we were jerks. We did them because these were the only tools we had at the time. Today's CSS gives you much more control over margins, paddings, borders and colors than we ever had, using tables. And today we gain the benefit of smaller, faster-loading pages that are much, much easier to maintain. It's a good life. We've come a long way and I'm going to trust you now. Kids, don't try these things at home. I'm a trained professional and you could hurt someone you love if you adopt techniques like these.
No comments:
Post a Comment