By Alexander Thomas
E-mail: see the "Contact" section
Website: https://www.dr-lex.be/
TagWriter-site: http://go.to/tagwriter
A 'webpage' which is only displayed well in some specific browser (did someone say IE?) and not in others, is not a webpage. Please make real webpages. Stick to the standards. A label "best viewed with ..." is not a quality label, on the contrary. If you really want to use some fancy feature which is browser-specific, it should be something cosmetic which will not prevent people with an other browser from viewing the essential content of your site. Why would you want to create webpages which can't be viewed by a lot of people anyway? If that's your goal, then you'd be better off making no webpage at all. You should make webpages that conform to the W3C standards. Use the W3C Markup Validator to ensure that your pages conform to a standard like HTML 4.01 Strict.
In the good ol' times, one could simply use <A href="#top"> instead of making a named object "Top" at the start of a document. When clicking this link, the browser returned to the top of the page. Unfortunately this doesn't seem to work anymore in most newer browsers, so I recommend to always create a named object.
Always make sure to specify your images' width and height (these are inserted automatically if you insert an image with the "Image" button), it will speed up the displaying of your page in browsers and maintain lay-out if the image can't be loaded.
You can use an animated GIF as background, but it will only be displayed in newer browsers (i.e. almost all current browsers, at the time of writing this). In older browsers, it won't be displayed at all. (You can use a JavaScript which chooses between an animated background and a still image according to the type of browser).
With the availability of CSS, frames should be avoided. Nevertheless, if for some reason you must use frames (e.g. in an old site which isn't worth a complete re-write), and a page within a frameset contains a lot of links to external pages (other sites) which must replace the entire frameset, it's easier and more efficient to use a <BASE target="_top"> tag in the file's header than target="_top" in each link. Of course, you need to use target="_self" for all the local links if you do this, or they'll replace the frames as well!
In sites with frames, make sure to provide links to the most important pages (like the navigation menu) in the NOFRAMES section of the frameset. Otherwise search engines may not crawl your site, and people with frame-incapable browsers won't be able to browse your site. If you think there are almost no such people anymore today, read the section about accessibility.
When you have inserted an aligned image (e.g. with attribute align="left"), and you want to start a new line below this image, include the attribute clear="left" in the br-tag. This will start a new line below the image, even if there is still room for text next to it. Use clear="right" for right-aligned images, and clear="all" for both. Or use the CSS equivalents.
Be very careful with displaying your e-mail address on your pages. One of the most irritating things on the Internet today, is so-called "spam", which stands for unsolicited publicitary e-mail. There actually are people who do nothing else than searching the Internet for e-mail addresses to add to their lists. Once you're on such a list, you're bound to receive massive amounts of crap in your mailbox every day. There are even automatic programs which "crawl" through webpages to find e-mail addresses. A way to prevent your address from being found by such people or such robots, is to only provide http forms on your pages, and no direct mailto: links. If you can use a cgi script (like cgiemail) to send the form to your address without having to type it in the webpage itself, you're 100% safe. Otherwise you can still hide your address by coding it with a JavaScript which decodes it at the moment of sending the form.
If you do receive spam, I can simply tell you that your address is doomed. There is no way to stop it once it has started, except by discarding the e-mail account. Read my anti-spam page for more tips on preventing and fighting spam.
When the value of an attribute is not a number, put it between quotes, otherwise don't. As soon as it contains a non-numeric character, like "%" or "#", it's not a number.
Example: <IMG src="example.gif" width=100 height=60>
This doesn't only look better, it avoids problems with certain applications too.
Never insert a "hard return" in the middle of a tag, unless you really need to.
In some browsers, a return in your source file counts as a space in the HTML file. In others, it is ignored. So if you need to have two images next to each other with absolutely no space between them, you must put the two IMG tags right next to each other with nothing between them.
Make sure that every HTML document starts with "<HTML>" and ends with "</HTML>". If it doesn't, it simply is not a HTML document. Don't put anything before the <HTML> tag, except an optional !DOCTYPE tag. Also, a decent HTML document should always contain a header with a title in it, and a body.
Never use the characters ">" or "<" directly in your text if they are not used as start or end of a tag. Always convert them to ">" and "<" respectively!
Never use any non-standard ASCII characters, like ü, é, ..., in object names, style definitions, JavaScript function names, ...
Keep in mind that most server systems are case sensitive for URLs. However, you must never give two files names which only differ in the case of certain characters. Luckily, in Mac OS and Windows this is impossible anyway.
Use "Web-safe" colors as much as possible. These are colors with only 00,33,66,99,CC,FF in their color code, and are the only colors which are displayed correctly when the viewer's monitor is set to 256 colors.
Although it is not required by HTML standards, always use ending tags in tables for TR, TD and TH elements! This avoids problems in certain browsers.
When designing your page, don't rely on fixed values for table and frame dimensions only. When your lay-out is ready, resize the browser window to all possible sizes to see if the page's lay-out doesn't get screwed up!
You can combine a link with a named object in one tag, like "<A name="section3" href="#top">"... However, for reasons of efficiency, HTML TagWriter will not recognize a named object if there is something between "<A " and "name=...", e.g. if you swap the "name" and "href" attributes in the previous example.
Try to separate content from appearance as much as possible. This means avoiding the use of FONT (or even SPAN) tags, and only using standard tags like P, DIV, H1, ... Assign meaningful class and id names to your elements, and use a style sheet to control the appearance of these classes and IDs. This makes your lay-out much more consistent, portable and easier to maintain.
Make sure that links can be easily discerned from normal text! If you really don't want the links to have a color different from the text, then you should at least stick to the long respected convention that links should be underlined (hence you should also not use the underlined style for anything else than links). There is really no point in making links look exactly like normal text. The excuse that it's more 'cosmetic', comes at the cost of people getting frustrated because they either have to guess which words are clickable, or have to scan the entire text with their mouse in order to find the links. Most people won't even realize that there actually are links and will leave your site right away.
Never use similar colors for the background and text of your documents, like yellow text on a white background (do you see what I mean?). This makes your pages a pain to read or even unreadable. There are other color combinations, like green on red, that are both problematic for people with color blindness and painful to look at for everyone.
Make sure that the background color of your pages are the same as the dominant color in the background image. Otherwise you risk that the text becomes unreadable when the image can't be loaded (e.g. white text on a white background which would normally be a dark image, you get the point...)
When using the font "Courier", be sure to specify "Courier New,Courier" as font face and not "Courier" or "Courier,Courier New" because otherwise those poor Windows users will get a disgusting bitmap font on their screen. Besides, it's better and shorter to use the <TT> tag for this ("Monospaced" from the Logical Styles popUp).
Be careful when using the font "Symbol"! For starters, this is not a standard font on many systems. Worse is that this font, exceptionally, has the same character set in Macintosh and Windows, which is a really major mistake of the designers, or maybe this is just logical but the programmers of browsers don't know about this. At any rate, the consequence of it, is that, when you use characters above ASCII 127, they'll look different on different platforms because the character sets are always converted while for Symbol, they shouldn't. E.g. in Mac OS, this: "•" may show up as "infinity", while in Windows, this: "¥" may show up as "infinity"!
The proper way to include Greek or mathematical symbols, is to use the UTF-8 character set. Unfortunately HTML TagWriter's UTF-8 support is limited to those characters that are available in the Macintosh character set, so you'll either need to add these characters through an external program, or use a workaround like images or a JavaScript which inserts the right character depending on the OS.
Global style sheet definitions must be placed in the header of your file and should look like this:
<STYLE><!--
SPAN.bigTitle {font-size: 20pt; font-family: Helvetica,Arial,Swiss; font-weight: bold}
SPAN.smallTitle {font-size: 14pt; font-family: Helvetica,Arial,Swiss; text-decoration: underline}
--></STYLE>
The style definition itself should be entered between "<!-- " and " -->" (as a comment). If you'd omit the comment notation, older browsers will treat and display it as plain text and some new browsers won't even recognize the style definition. If you use the Style Sheet Editor (correctly), this is all done for you.
When using a linked stylesheet, don't put any HTML tags in the stylesheet file, just enter what would be between the comment tags in a style definition. This is contrary to what I recommended in previous versions of this file. The cause for this confusion was of course yet another bug in Internet Explorer.
When your page consists of a strictly unscaleable lay-out (where text must fit within certain images), use pixels (px) as size dimensions, because they cannot be scaled. In all other cases, use a user-scaleable unit like the "Em". 1 em = the size that the user has set in the browser's preferences. E.g. if the user has set this to 12pt, and you use a font size of 1.5 em, the user sees a size of 18pt. You can also use this unit to specify other dimensions like margins or indent, so your entire lay-out will be scaled together with the font.
Be careful with the units points, inches and centimeters: while they are not scaleable, they are different between operating systems, or even between different versions of the same OS. For instance in Windows, the screen resolution is normally 96 dpi while in Mac OS it has traditionally been 72 dpi. To be really correct, the resolution should match the physical resolution of the monitor, but certainly do not count on this because it will rarely be the case!
When designing your site, you should be aware that not every person will be physically able to use a mouse to browse it, or even see what's on your pages. There are special browsers for disabled people, which try to convert webpages into spoken text or other media like braille pages. Other browsers allow to navigate webpages by using only a few keys. To improve the readability of your site for those people, there are a few things you should be aware of:
Always provide a short description in the "alt" attribute of IMG and AREA tags. When creating such tags, TagWriter will always ask for a description to remind you of this. Of course you should not provide a description for irrelevant images like pure decorational artefacts.
A similar thing counts for tables: you should use the "summary" attribute of the TABLE tag to provide information about a table's contents, unless the table does not contain any relevant data or the data has its own description.
Split up large forms into fieldsets with the FIELDSET element, and provide a LEGEND element in each of them. This also makes the form more surveyable in visual browsers.
Connect INPUT text fields and checkboxes and TEXTAREA objects with their textual label in the HTML file by using the LABEL element. The safest way is to assign an "id" attribute to each input element, and then put the describing text inside a LABEL element with a for-attribute which points to the object's ID. If the input element follows directly after the label, you can also simply put both inside a LABEL element, like in this example:
<LABEL>Enter your name: <INPUT type="text" name="Name"></LABEL>
By providing an accesskey attribute for links, image map areas and form input elements, the user can access these objects by pressing a single key. Of course you need to mention somewhere which keys correspond to which objects.
Using style sheets instead of "classic" page layout techniques in order to improve the distinction between document structure and presentation, does not only ease your work, but also allows easier interpreting of your documents.
As said in the general tips section: when using frames, make sure to provide a NOFRAMES part in a frameset page with links to the most important pages in your site.
Back to top
HTML TagWriter 3.8