HTML 4.0 requires that form be separated from page content. This is meant to make webpages more user-friendly. I write about this here with a demonstration of what this means practically, through a styleswitching script, the same one that I have at LoggedNotes. This demonstration styleswitching is meant to show how current browsers can now manipulate the way a user browses a page. The example I give in the article is Opera (the most recent version). I don’t know whether people realize this, but Opera actually allows one to view a page in different ways. I was even surprised to find out that it can include in its “View” toolbar even the stylesheets I had embedded in the tutorial page mentioned above. In any case, HTML 4.0 is the standard and so newbies at web design should learn it and stop using WYSIWYGs that are still at HTML 3.2 (and there are many available!)

This program will convert BBCode (Bulletin Board Code) to HTML. It’s useful if you work on forums which support either BBCode or HTML and need to convert your “canned speeches” or if you have written something in bbcode that you would like to put on your website. You could also use it to preview your posts on boards that don’t have that feature built in.

For me, its use to convert my bloggable forum postings into articles for this weblog.

The author also mentions that he made the program for PHPBB users. I created this post originally in AHK BBCodeWriter and pasted it onto our SMF forum and it worked well. My only frustration is that the HTML to BBCode Converter here works only one way. That however is a minor setback since there is a BBCode to HTML converter online tool

The page is presented well by FireFox and IE, so what was the matter with Opera? I went through the sparse CSS specifications in my stylesheet to see what was bugging the Norwegian browser. It took me quite some time, with a lot of trial and error editing until I changed the SPAN specifications to DIVs. It was then that the page came out well in Opera.

I don’t know much about DIVs and SPANs and why different browsers present them differently. All I know is that DIVs create invisible boxes that contain HTML elements but SPANs don’t. So I guess given this fact about DIVs, the Opera browser was just doing its job when it skewed the demo I made. The CSS was alright; the way I called the specifications into the BODY of the webpage was what created the problem. FireFox and IE in this sense are the browsers that spoil the inattentive web designer.

I have corrected the page and am showing it separately from the original: a memorial — for me — of a blunder in web design. It is found here. I have also come up with a clothed version — one with backgrounds, colors and images — of that particular page here.

About the demo page not being tested in Opera… Well some guys at the 110MB forum answered to my call for help. They have posted screenshots of the demo page. One can find them here. Looks like Opera renders the CSS well too

New Tutorial

The new tutorial on CSS builds up on the previous one. The tutorial shows how one can forget about tables when designing a web page layout. The design works in both IE and FireFox. It has not been tested in Opera.

One of the difficulties I had with the design was to get the exact measurement for certain elements in the webpage. I started using percent values since the webpage had to be fluid in its structure, i.e. it is narrow or wide depending on the browser resolution. But when it came to images — especially spacer.gif — I had to specify both width and height. I did the measurements by trial and error. I don’t have a measuring tool for my screen. The demo page for this tutorial is found here. Images were used so as to expand elements to their proper width (in percent!).

Updated “Pages” HomePage

I also did a few changes on the homepage for the new tutorials. Since the list of articles is already growing I split the original index page into two and added a javascript navigation bar to link the two pages. The script for the navigation bar was taken from a free image depot I used to visit some years back. It was so special because the pages in the select area of the form kept rotating. I decided to use it here for some laughts.

Since this site is javascript-powered, I hope that FireFox users would remember to deactive their NoScript plugin if they have it. Otherwise they won’t see the new changes effected on this site today.