Trials of HTML upgrade to 4.01 in 2008

I'm only 8 or 9 years late in the task, but this spring (2008) my computer workstation croaked. It took with the HTML editor that I have used for a decade. This website was started as early as 1996 when HTML was barely around. The first pages of this site were written with notepad and some with Wordstar.

Ultimately, I looked for a low cost HTML editor, and my oldest daughter, a computer geek, suggested that I try Hotdog, produced in Australia by Sausage Software. I did and Until this spring I used it almost exclusively. Given that I learned to code long before the advent of cascading styles, I never learned how to use them. Hotdog was upgraded from version 1 that I started with to about version 6 or so. It did have a security feature in it that locked the software to your computer, so when my computer died so did Hotdog, and alas, Sausage Software doesn't seem to exist any more so getting a new installation permit wasn't in the cards. You could get the software mail order through Tucows, but I decided to look else where particularly since I was beginning to suspect that I was out of date on my technique anyway.

Over the years my website has grown to over 350 pages (as I write this in April of 2008). Consideration of a new editor caused me to study up on HTML a bit and figure out that I had been using mostly HTML 3, and never mind that HTML 4.01 has a been around since late 1999. What I had was a 350 page website with not a page in it conforming to standards that had been around since 1999. Now you won't find any 'updated' dates on any of my web pages earlier than 2/5/01 and there is a reason for that, as that is when I started using 'update' dates, and also the last time that I had been completely though every page of my web site. There was a reason then for the total review, and that was because my original ISP had gone out of business, and I had hardcoded a lot of links to that ISP name. In February of 2001, I got my own domain (Vannattabros.com) and migrated the website as it then existed to the new domain.

As I had a random selection of long and short links it was a bitch of a job, but what I did do then was to add a <base> statement to the <head> and uniformly converted all of my links to short links. I also attempted to put a <target> in the <base> statement as well but I never could make it work. I finally just in this rewrite figured out why. I had put an extra space in the thing like this: <"_top ">, and in that configuration it didn't work. I feel kind of dumb that for 7 years I couldn't figure out a simple programming error, but that is the sad truth.

I had, however, elegantly worked around the defective <target> so I had everything functional. I was an early adopter of <frames> as using them made perfect sense to me, and only recently have I fully appreciated just how unpopular they really are. I've used them because I haven't been clever enough to make a big we site with all the navigation without using them, but as I study things it appears that the features needed to do that really did not appear until HTML 4 and later were released, so I've simply been living in a time warp.

One of the big problems with my website after many years was its organization. I had added some new <framesets> or sections over time and had never gone through all my pages and put them in the "nav bar" at the bottom of the page. I only had added them to key pages, and when ever I had a reason to visit other pages. In addition I wanted to add the new sections called "Nifty Pictures, and Camera equipment as well as I wanted to split the 'Big iron section' as it had just too many things--the road equipment and the farm equipment got their own sections.

I studied for a while what was feasible with my code in terms of upgrades and decided that the best I could do with it was HTML 4.01 Transitional. Using "strict" was a mission impossible because it does not allow any <frames> related tags, I really needed some <target> statements to make my frames implementation work. My site had pretty simple formatting, but it still had problems as I had never run an HTML checker on it. My most common just plain error was that I had centered all the heading statements with <center> but often I had put them inside the <h2> container instead of outside. If you think about it they are logical nonsense inside the container, but they actually work there in the browsers. Oh yes, the other thing my my site was totally devoid of was a 'DOCTYPE' or character set declaration. I had a few broken ones for HTML 3.2 but mostly I had none. I added the necessary declarations on all my web pages the first time through.

Anyhow my first pass through all my pages was to implement some basic global styles, update my 'nav bar' on the bottom to include the new items, and I put it in a yellow box at the same time, and to blow out the attributes to the <body> statement, and make it all legal HTML 4.01 code. I got the job pretty well done, but I also encountered some issues in rendering.

The 'nav bar' on the bottom of each page was a <div> with a style. My photos are all in tables (now anyway after I went through the site--early ones were not) and the tables are 'floated'. The problem I found in rendering was that in some of my newer sections, particularly in the "Nifty Pictures" section, I have a lot of photos in a long table and not much text. The table floated over the top of the Nav bar. The text was smart enough to get out of the way but the box boarder was not. Worse, the "Nav Bar" had a different background color and it would shine through the cracks in the table.

This set me to looking for a way to resolve the rendering issues. I found that I could add a <clear> attribute and force the 'Nav Bar' to th bottom of the frame. This was satisfactory if the pictures didn't hang way down but alas where I have a string of 10 photos as some of my newer pages do, this made no sense either so I shopped for a better mouse trap.

The other issue that was bugging me was the content of the 'nav bar' itself. Rooting through 350 pages (a number that is still growing as I write on the website) and re-editing the 'Nav Bar' if I decide to reorganize things is a real pain. In looking for solutions I came across the <iframe>.

Using the <iframe>

After looking it over, I decided that the <iframe> was exactly what I needed. I found that tables didn't float over <iframe> holes in a document, and that I could size the <iframe> hole so that it would generally fit beside a photo. It took me some fiddling but I ended up with about 3 styles of <iframe> holes in my main documents, and this allowed me to put the text of my 'Nav bar' in a separate file. Actually I ended up with a couple files--one with a yellow background for the left hand index page and a white background one for the regular pages. While I was at it, I put the email button in an <iframe> as well. That way if I decide at a future time to implement the email contact option differently, it is one edit to make the change instead of 350 edits.

Meanwhile, back at the farm, I decided to splurge and get the registered version of 'Coffeecup' the new HTML editor that I settled on. I discovered that it had a few features not included in the 'free version' which included the TIDY code cleaner. My HTML code has always looked like a stumble fingered logger wrote it, because I did. I found that the code cleaner was pretty good at containerizing the <p> which is something that didn't exist on my site because containerized <p> was invented after many of my pages were written. It would also format the code in a consistent way. The bottom line is that I'm headed back trough all of my website to stick an <iframe> in the bottom of every page, as well as do some more clean up. The code cleaner also forces all the HTML code to lower case in the now 'proper' way of doing things.

I considered trying to upgrade the code to XHTML initially but concluded that the code was just too far away from the XHTML standard to have a chance of getting it done in a single pass without getting bogged down. The big deal for me was getting the cosmetics cleaned up and the "nav bar" up to date. Also I peeked ahead and looked at HTML 5 which seems pretty well along the way to being finished. It's going to bring the two specifications (HTML 4.01 an XHTML) back together. It appears that it will be <frame> friendly, and will carry the concept of using styles further than HTML 4.01 does. I believe by the time I go through my code a second time I'll have all the <p>'s containerized, all the code in lower case and will have removed all the deprecated code, and moved about as much to styles as the HTML 4.01 specification allows. As the HTML 5 specification calls for browsers to continue to work with 'old spec' pages, I figure if I have HTML 4.01 transitional code which for the most part will meet the 'strict' spec except for the <iframe> statement, I should be in good shape, either to leave the code alone, or to upgrade it to the HTML 5 specification. It's not too bad to make a pass through a page and change 2 or 3 things, but if you have a dozen that is a problem Coffeecup allows you to make 'Global Search and replaces' en masse applying them to all open files. What I've done is to open half a dozen files at a time and process them in batches.

The really good thing about my code is that it is all hand written with a text editor and doesn't have all the crap in it that the WYSIWYG editors toss in. I've made a point of keeping things fairly simple, and that does pay off when you need to upgrade the code base.

Future plans for the website

Don't know if the plans are very definite. Since 1995 or thereabouts when I started this website things have evolved a lot. When I did the first pages I was working off of a crappy dial up modem that wouldn't connect much faster than 9.6k due to line quality issues. My scanner was poor and my ability to edit photos worse. The hardware evolved first to a Starband satellite dish and finally in 2005 to DSL. That solved the band width issues. One of the crazy things before 2001 when I didn't have a domain, was that the space restrictions on ISP accounts was so strict that even with the small photos, I had pictures scattered around in 4 or 5 dial up accounts because of space restrictions. This is one of the reasons that the 2001 revision was so much work because not only did I have hard links, I had hard links to several places because I had no one place that I could put the whole site then even with the small photos, so I borrowed all the web space of the family members and a second account that I had so I could run the thing. Now I have nothing short of an amazing digital camera, so I can take a host of photos and post them all (or as many as make sense). Where the pictures will tell the story it just makes sense to put a list of them up instead of 1 small photo an a long story.

Embedded movie snippets would be kind of cool and it looks like they will be native to HTML 5. I've fiddled with them a little now but if I kludge them in, it will be one more thing to rewrite when HTML 5 comes out. I think over the near term, I will devote my time to preparing for the future by cleaning up the code, and adding new pages. There are a lot of plants and animals that haven't gotten a page yet, an of course, the base attraction--the heavy machinery is always changing.

Dateline 4/6/08

Revision notes: I have note completed the second revision of the 'Nifty Pictures' (pictures.html) section and "Camera Equipment" (photo.html) section. As is the case with most of my sections, the <frameset> will be in the "photo.html" file. The index page for the section will be known at "photo0.html", and the pages on the right which is known to the <target> as "rightwin" will contain the substantive pages numbered 1 to nn as in "photo1.html" etc. They may or may not be listed in the index in numeric order, as over time as I get more sometimes I regroup them or rearrange them for clarity.

Presently the 'Nifty Pictures' section is a placeholder as it has 3 subsections: for plants, animals, and places and I have a separate number sequence for each under those names. I am actively adding to this section and when it gets unwieldly, I'll split it into 3 sections.

Anyhow back to the point. As of tonight I have completed implementing <iframe> in the "Nifty pictures" and "Camera" section as well as the "logging tools" section numbered "saw31 through "saw52. There is no "saw49" or "saw50" as they were duplicates written but never linked of a couple of my "shop" pages.

When I create a new substantive paper, I should list it on an appropriate index page and also insert a link to it in the <noframes> portion of the <frameset> page so the robots can find it.

Besides replacing the buttons and navigation bar code on the bottom of each page with corresponding <iframe> other updates I am making include changing all the <p> to containers, eliminating all target statements from the right hand pages as they don't need them except in rare instances. The default <target> is clearly "_self" and all the expanding pictures go there, or if I have a link to another page. The sections that are being shown through the <iframe> are targeted to "_top" as they should be. Occasional external links are the only things that need targets, except on the index pages.

Newly added styles include a "brdr" style for all my expanding images to set the border to 5px so the thumbnails will be recognized as such, and today I added a "span.little" style for smaller print for miscellaneous for random things that need to be in small print. It complements a "span.bold" which does what you would expect.

Finally, I am carefully formatting the code with the Tidy utility which will hopefully make it easy pickings as HTML 5 comes out and many more of the attributes move to the styles. I chose these pages to upgrade first as they are primarily the ones that suffered from the rendering issue of having photos flop over th 'nav bar'. A high priority is to rework the front page or 'index.html' as presently it doesn't key into all of the new sections that I have added.

Dateline 4/07/08

I completed "saw1.html" to "saw16.html" (logging tools) today. In getting TIDY to fix the <p> container, I've figured out that it works better if I manually make sure their is a <p> after every table and header before I run TIDY. If there is, then it will usually get the containers right. It's easier to add them before you run TIDY the first time.

I did a little reading on the W3C site about XHTML, and they suggest making good HTML 4.01 before attempting XHTML, a plan that I agree with. One of the things that TIDY does without much argument is to add the proper number of quote marks around attribute parameters. This is crucial to XHTML. It forces all the tags to lower case and consistently spaces things as well which will resolve many problems in subsequent global search and replace sequences. With all the text containerized with <p> and all the quote marks fixed on the parameters, I should be very close to XHTML standards. What remains are the is tag closure on a few HTML tags that traditionally are not closed. The classic tags that have this issue are: <p>, <br>, <hr>,<img> and <meta>. With this pass through the code I have fixed as much as I can without violating the 4.01 rules. At least in 1999 a lot of browsers choked on attempts to close <br> tags. I have almost completely eliminated use of <br> and <hr> tags, and fixed the <p> really leaving for the most part just the <meta> and <img> tags for future modification. There are just a few pages that have <br> in them. However the number of people using browsers that can't handle XHTML is pretty low at the present time as XHTML 1.0 has been out since January of 2000.

04/08/08

Completed the logging tools section upgrade, and reviewed my work in ME 6.0. Discovered that the nav bar is a little wide for IE6 with the bookmarks down. You can't auto resize an <iframe> so you have to declare a size for it that will fit beside the photo or it won't go there. Fortunately IE7 is quickly displacing IE6 as the browser of choice. As of March of 2008 about 48% of the hits on my website are from IE7 with 25% IE6 along with 14% Firefox. This is quite a change from January of this year when IE6 was the a point or two above IE7. Windows Vista still hasn't caught on, with XP still making up 75% or so of the operating systems associated with computers visiting my website, (with Vista at 10%, but the IE 7 is clearly over the top.

04/10/08

You learn as you go along. As I looked over the files that were being loaded, I quickly found that the "nav bar" and button files that are loading in the <iframes> were getting loaded a lot and sometimes first. The "Nav Bar" has links but the button file just has 2 buttons on it, so I thought I ought to put a link on it so is a real person ended up on that page he could navigate back to the top of the site. Consequently I put a hidden link on it that should not display, but then, of course, the <iframe> wanted to enable scrolling so a user in the normal mode could scroll to the link. I fixed that by going back through all my files that I had converted and adding a <scrolling="no"> attribute to the <iframe> statement. Making the change using "Coffeecup" didn't take long. I could and did load 15 files at a time and made the change with a global search and replace of all open files. Revised are the pictures, Photo, Animals, Places, Plants, Saws and loaders.

Updated 04/15/2008

The 2008 release of CoffeeCup is upon us. It defaults to closing the shorttags (things like <br> are entered <br />. I have continued to work through my site with a second pass bringing it all to a consistent standard with both legal HTML code and also consistent formatting of the source code. Completed are the "loadernn" file sequence and the "dozernn" sequences. The newer version of CoffeeCup has fewer memory leaks and doesn't run out of memory like the free version does when you churn a lot of files so I can work the things 10 at a time though I haven't been pressing the issue of completion of the second pass as it is only housekeeping and makes no visual difference of significance. Also getting some attention are some troublesome files, and odd ones. Getting all the text in proper containers goes a long ways to adding structure. I suppose I've added the <iframe> technology to perhaps a 100 of my 350 web files now.

Need to learn how to use <select>

I've been thinking of adding some pull down menus to aid in navigation, but still haven't gotten there yet. I need to perfect the code writing associated with using it.

Updated 04/19/2008

It's snowing outside. Not a great accumulation but snowed enough to get the ground white last night and snowed off and on all day today, so I worked inside on code scrubbing just scrubbing the logging history section (histlog). I scrubbed the 'skidders' last night. The scrubbing is tedious, and more so on the really old pages which are common in this area. Many date back to 1997 or so, but now that I have been through them twice, I'm getting them pretty consistent. The release version of Coffeecup 2008 is out now. Sections that remain include Iron, computer history, Trucks, and shop.

Updated 04/20/2008

Internet Explorer 7 Bug IE7 with <iframe>

I've been frustrated with an <iframe> that didn't work right on a single file. Ultimately, I concluded that it worked the first time you loaded it but thereafter only every other time. Specifically, I set the size of the <iframe> window with a style, and on the alternate occasions, the <iframe> window would ignore the style and assume the default size. This became a big puzzle to me as I have over 300 of the things working reliably and 1 that didn't. I finally figured out what the issue was, at least when using IE 7 as the display mechanism. In this particular file I had a "DOCTYPE" declared, but I did not have a DTD file referenced in the declaration. Once I added the DTD file for 'HTML 4.01-Loose' then Internet Explorer 7 (IE7) was happy, and would render the <iframe> to the correct size all the time instead of just every other time. Go Figure!

I chugged forward on scrubbing my files today, and finished scrubbing the "cable" files and the long list of 'iron' files. I've tried to name the files to match the section they are in but then I've created a bunch of new sections, particularly to break up the 'iron' section that was too large, so there are 'iron' files scattered all over the website. I"ve got about a 100 files to go to get through my site with this latest scrub and upgrade. Maybe more. There are the History, Truck, Shop, and Geo files which need attention. I forgot about the Geo's when I listed the "to do's" yesterday.

Updated 04/26/2008

Over the last couple of days I have completed scrubbing the History files and the first 15 truck files. No special events. The (computer) history files have few photos, but have plenty of text that needed containers. There are quite a few photos within the truck pages and the early truck pages tend of have left overs from before I put photos into tables, and in some instances have had quite a few updates adding to their complexity. I am in the stretch now of completing the scrubbing of all the files on the website. Only the shop, Geo and the rest of the truck files remain. Ultimately I want to rework the main entry page, but haven't decided what to do with it.

Updated 04/27/2008

Got the shop files converted. There are 24 of them at the moment. Others on the shop page are IRON files classified under the shop category. I'm scrubbing the files 15 at a time. There are just over 30 geo files and a total of 55 truck files of which 30 have now been done. It takes about 45 minutes to scrub a batch of 15 files and make the conversions.

I added a new page for Oregon Oxalis in the pictures section which followed one for Skunk cabbage recently, and truck55.html for the M 6123 6x6 IH Truck which is a recent addition. Finally I added a Macro Photography page and a page for Oregon Grape.

Updated 04/28/2008

Managed to ID the Evergreen Violet and get a page started for it. It's a photo I took yesterday but didn't know what the plant was.

Updated 05/23/2008

Completed update on all the truck files, with only the Geo files not updated and scrubbed. Recently added pages for the the Western Sword Fern and the Douglas Fir as well as for our latest excavator, a Link-Belt LS-4300. Added a photo of the deck bottom to the TL6 page, and created a 1 log load page in the Logging History section.

Updated 06/24/2008

The total number of Plants in the Native plant guide has grown to 35 now and is still growing. Shortly it will get a section of its own.

Updated 07/20/2009

There are now about 53 plants documented, and they have been moved to a new section called the "Native Plant Guide". Occasional new pages have been inserted in other sections as well from time to time. I believe the entire website is now compliant with the standards of HTML 4.01 transitional. I believe this is a good place to be. Newer versions of HTML are coming but the ongoing spec calls for backwards compatibility with the 4.01 standard. The primary compatibility struggle is with my use of frames. As soon as I can round up the price of a new camera, I have a goal of beginning to had movie clips, but that is next years project. My planned equipment is a Pentax K7. It's a just released classic SLR but contains the stuff to do high resolution movie clips.

Updated 01/02/2011

Well, 2010 came and went and still no HTML 5 and for that matter still no hardware on my end for doing movie clips. The pentax K7 SLR has been surpassed by a significant upgrade, the Pentax K5 which seems to have significant improvements over the K5, particularly in dynamic range and noise management at high ISO. Presently HTML 5 is well supported at the competitive browsers, but not yet by IE. It appears that decent support for HTML 5 will appear in IE 9 which is now in public beta form by Microsoft. The I gottcha at the moment is that there is no industry consensus on what CODEC to use Google Chrome is gotten good market play, but as usual Microsoft is holding out to impose their choice of a file format for the video, and at the moment the HTML writers aren't assertive enough to dictate a file format with Apple and Microsoft batting heads over the issue.

I likely do need to get the little used <frameset> function out of my website which I use to display my lefthand menus. I've fiddled around with menus some but am currently thinking of resorting to an <iframe> peak through for the navigation menu.

- - Updated 12/16/2012
- - Updated 01/02/2011
- - Updated 07/20/2009
- - Updated 04/19/2008
- - Updated 04/15/2008
- - Updated 04/06/2008
- - created 04/05/2008
- - Updated 04/05/2008
Coffee cup
Created with the CoffeeCup HTML Editor