home     contact      
[This article first appeared on MWEB iTutor]

DIY HTML - Part 2
Page 3, Your browser, and everyone else's too

I remember it well. Rather sheepishly, I looked up to my friend and said, "I'm not sure if I'm doing this right". Needless to say, I knew as much as you do now. Needless to say, that wasn't the last time I said it.

If things aren't working the way you want them to, it could be that you've made a mistake with your coding or it could just be the browser.

Most people don't understand the inner workings of browsers. That goes for designers too. At best we know what works and what doesn't when it comes to trying to make a page look the way we want it to.

I've written up a list of hints and tips below to help you with your code but the next problem is the browsers. You see, different browsers display information, well, differently. And there's more than just one browser out there.

Firstly, different manufacturers of browsers (namely Netscape Navigator and Internet Explorer) have built their browsers to interpret HTML and display it in their own ways. There are no standards. So what you design in Internet Explorer will look different in Netscape Navigator (and vice versa).

Secondly, there are different versions of the respective browsers. These also have different capabilities. At the moment Netscape is in it's version 4. browsers and Explorer is at the 5. browser level.

Great web designers fight to have their pages looking good on all the major browsers being used by people. Professional designers also have about four different browsers on their computers to check how their pages may be looking.

Using different font faces will be the first in many lessons in designing for multiple browsers. Certain browsers and certain browser versions will be able to represent your font and others not.

So here's a tip: when you choose a font face give a second and third option in case the person who's viewing your page doesn't have your first choice. You'll write it like this:

<font face="verdana,arial,times new roman">

The browsers aren't going to change overnight so we can expect this sort of thing for a while. A good place to start is writing neat code and knowing a few insider secrets to cross browser compatability (like the font trick above).

Here are some hints and tips to keep you on the straight and narrow:
  • Make sure you're experimenting between the <body> tags. Everything between the body tags will be shown in the browser window (except what you write between tags <>).
  • If parts of your tags are showing, make sure you've written them properly. Also make sure you close them, </
  • As a rule, all tags that are opened must be closed. There are exceptions, like the <br> tag, but generally tags need to be closed.
  • Spacing inside tags is important. Your flags <> should hug the text inside without spaces:<center>
  • When you're using switches leave one character space between the different words (like: <font face...) and no spaces after the "=" sign (eg, size="+1">). You'll also notice sites that don't use the quotation marks, trust me, use them. They'll help you when new browsers start coming out.
  • Whatever you write in your tags, write in the lower case.
  • Watch out for American spellings. So far the only tag which you should be weary of is the <center> tag. In future watch out for the word "color" too.
  • When using combinations of tags they should be in the mirror image. For instance: <i><b><tt>italics and bold </tt></b></i>
That's it for this tut, go knock 'em dead.


| 1 | 2 | 3 |

Enough talking, 3. Living with your favourite browser
  1. Itching to learn more?
  2. Many ways to say the same thing
  3. Living with your favourite browser
 






  home     contact