HOME >> HELPFUL HINTS MENU

Hints for people publishing on the internet



This page is less polished than many on my site. I hope you'll agree that there is useful stuff here... but you'll find other pages of my site better organized!

Note that this page is for people publishing on the net. For help with other internet topics, go back to the main "helpful hints" menu and choose again.

Some of the following will be easiest if you edit your pages "by hand", i.e. by working directly with the html that you put on your website host. For example, writing your html using Notepad (or, better (spellcheck, automatic text and syntax highlighting) Textpad) will facilitate applying the hints below. If you use some of the "do it for you" WYSIWYG html editors, it may be difficult or impossible to achieve the fine control needed for some of the following.


Special characters

If you want to put letters or digits into a web page, you just type them normally, as you would for a word processor. Some special characters and punctuation marks require a different approach. Most immediately obvious are the < and > symbols. You can't type them normally and expect the html browser rendering your page to realize that you don't want them to signify an html tag.

If you use your browser's "View page source" tool, you can see how I make the < and > symbols appear in this text. All I've done is type an ampersand (&), a short code, "lt" or "gt" ("Less Than" and "Greater Than") in these cases, and a semicolon (;).

You can sometimes get away with typing something directly, but you will improve the chances that your readers will see what you intended, in spite of their browser, in spite of settings in their machine, if you use the following.

I would like to thank Chris Bates for his Web Programming, by ISBN 0-470-84371-3, for the following, which is a mere selection of the special characters listed in his book....

Sample // Description // What goes inside the & and the ;

£ Currency: British pound sign pound
Currency: Euro euro
¢ Currency: cent cent
© Copyright copy
® Registered trademark reg
± Plus-or-minus plusmn
° Degree sign deg
² Superscript two sup2
³ Superscript three sup3
µ Micro- micro
π Pi pi
Left arrow larr
Right arrow rarr
Double left arrow*NO lArr
Double right arrow*NO rArr
Up arrow uarr
Down arrow darr
Tilde*NO sim
˜ Small tilde tilde
& ampersand amp
Does not equal ne
Less than or equal le
Greater than or equal to ge
< Less than lt
> Greater than gt
XX XX Non- breaking space. The "X"s are there to show you the ends of the space. (Multiple ordinary spaces tend to be rendered as one space.) nbsp
XX XX En space (A space the width of an "n")NO ensp
XX XX Em space (A space the width of an "m")NO emsp
XX–XX En-dash ndash
XX—XX Em-dash mdash

(Those marked * didn't work on my machine with IE 5.0 or IE 6. They work with Firefox and most work with Opera.)
(Those marked NO didn't work on my machine with Opera 8.51. They produced little boxes.)
(ensp and emsp didn't work on my machine with Firefox 1.0.7. They produced nothing, not even space.)
The failures of ensp and emsp are particularly annoying. I've checked, and initial indications are that they "should" work. Oh well, at least nbsp comes close to doing what I'd hoped the others would do.


Colors

Click here for a good chart of "web safe" colors.

Meta Tags

The following illustrates three things you may want to put right at the start of your page. It also shows where the meta tags go... in the "head" section, before the page "body". They affect the way search engines report your site.

You would change what is between quote marks after each of the three instances of 'content='.

The valid entries for the rating meta tag are: general, mature, restricted, and 14 yrs.
<html>
<head>
<title>Hints for people publishing on the internet.</title>
<meta name="keywords" content="internet, publishing, search engines">
<meta name="description" content="Help with publishing on the net.">
<meta name="rating" content="general">
</head>
<body>

DOCTYPE specification

The following is a legal web page, if rather lacking in content. You will always have everything you see below, except:
   the "Hello World" line,
   the title line... although you'll usually have one of those, and
   your webpages may lack the html line, but only if it is replaced by a !DOCTYPE line, in the manner I'm about to explain.
<html>
<head>
<title>Simple Web Page.</title>
</head>
<body>
Hello World
<body>
</html>
It may pay you to replace the first line ("<html>") with....
<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
I am no expert on choosing the "best" "stuff" to put after the !DOCTYPE type tag.... what I've shown above works for me. Unlike most HTML tags, !DOCTYPEmust be written in upper case ("capital") letters.(Most tags should be written in lower case letters.)

Starting your page with a DocType declaration helps browsers configure themselves to display your page as faithfully as possible, and it helps search engines analyze your site.

Once you have the !DOCTYPE line at the start of your page, you can submit the page to validator.w3.org. It will tell you of any syntax errors in your html. Don't be dismayed by the number of "faults" in your page! Often, fixing a few faults in early sections of the page makes other "faults" go away.

The nice people at validator.w3.org also have a service which will check all of the links on your page to see that they are valid.

When I'm trying to understand what is wrong with the way I've used a tag, I go to the "Encyclopedia of HTML" at redbrick.dcu.ie... which, gasp... was not working right when I was working on this page in May 07, doing an update. Sigh. It was good. I hope it comes back online!


Getting started with Cascading Style Sheets (CSS)

CSS help you get work done without lots of typing. You can do highly complex things with CSS, but for now just a small, simple example.

On my pages about programming with Delphi, I frequently want to display some text in a distinctive style, so that readers will understand that the text is what they should type into the Delphi compiler. The <pre> tag is pretty good for this sort of thing....
This is a list.
It appears mostly as I typed it,
because I've use the <pre> tag.

For a while, I used to insert html tags either side of each block of such text to change the color of the text.

This is more preformatted stuff.
It is green,
because I set the font color="#33CC00"..
before the block, and put <\font>
after this block. The W3C validator doesn't
like this, but it seems to work. (Wrong attitude!!)
There are better ways, as we will see.
I also put <font color="#000000"></font>
after the above, in case some browsers do not
automatically revert to black "ink".

Even with a good text editor, with a powerful search and replace feature, keeping all of the special stuff consistent throughout a single document is a pain, and keeping it consistent across several documents is a real pain. Cascading style sheets (CSS) makes keeping something consistent easy. They make it easy to revise what you have chosen for the style of the relevant parts of your webpages. They open up ways to affect more than simple tags let you play with.

This page, just before the </head> tag near the start, has the following:
<style type="text/css">
  DemoStyle {color:#33CC00; font-weight:bold; font-family:"courier new",monospace;}
</style>
This defines a new tag, "DemoStyle".

This text is enclosed in <DemoStyle> and </DemoStyle>

... and that is why it appears in Courier, in green. If instead of calling my style "DemoStyle" I had called it "Pre", the new style would have been based on the built in "Pre" format, modified as I saw fit.

Now I can get any block to appear in a standard "different" way. It requires less typing for me, and if I want the text to be, say, blue, instead of green, I make one change in the CSS definition... I no longer have to go through the document making changes in front of each block of specially formatted text.

I have put the CSS definition inside the document. If you had a number of pages which you wanted to share a single CSS defined style, there are ways to have the definition in a single separate file on your server, and to tell your documents where to find the definition when it is needed. When you have things set up like that, you can change the style definition for multiple documents just by changing the one file holding the definition.

The example shown is a very, very simple use of cascading style sheets. They allow you to do much more subtle things, relatively simply.

The W3C HTML validator flags "DemoStyle" as an undefined element, but the W3C CSS validator says that the CSS is okay, and it seems to work. There are three ways to deal with for the problem.... may be a way to tell W3C to recognize

I am grateful for the information published by w3.org which helped me get started with CSSs when I could resist the urge no longer. They also provide a free, online CSS validator for us.


Services for site editors


Services that check: HTML syntax, links and CSS syntax

You run a spellchecker over your masterpieces, don't you? There are free services that will run similar checks on your webpages. One checks that your HTML is "legal", one checks that all of the links on your page are okay, and one checks any CSS on your page, or in it's own page.

A word about "legal" HTML: By "legal", I mean that it follows the rules. Browsers are quite forgiving, and will still display a page even if it is quite badly written. But different browsers cope with your mistakes in different.... not always satisfactory.... ways. Why not follow the rules, and increase the chance that people will see what you want them to?

I'm going to talk a bit about the HTML checker, but the other two work the same way.

You don't have to do anything clever. Just go to the W3C validator, type in the URL of your page, and you will have a report on your screen shortly thereafter. Don't be dismayed! It will probably report scores of "errors", but fixing them may not be the nightmare you at first fear. And along the way, you'll learn to write better HTML!

I've written a separate page about using the W3C HTML validator for you.

Click here to access HTML validator
Click here to access link checker
Click here to access CSS validator

Freebies from NetMechanic

Even though I've not used these people myself, I'll pass on a recommendation I saw. I have examined the site!

You can have a 'free taste' of the services on offer. You can see a sample of the sort of report they generate, even without accepting the free trial. The services are modestly priced. There's nothing to download... the people at the site go to your site and check it out remotely.

The following are separate services... use as many or as few as you wish: They can check that your html has no faults, check the links on your page(s). They can try to access your site repeatedly over a period of time and report to you how reliably your server is... serving.

The services on offer seem likely to be useful, and the site is delightfully clear.

Click here to visit NetMechanic

Search Engine for your site

Before I talk about the search engine provider I use for my site, I should mention that Google does something similar, I'm pretty sure. I'm remaining loyal to the service that has taken good care of me for years, but if I were starting from scratch, I'd investigate the Google service, which is part of AdSense, and that is explained further down this page.

I visited the following after seeing a recommendation, and incorporated the service that day (28 September 1999). It is minimally invasive of your site, and easy to set up. You get weekly reports on searches made. As I edit this in March 2006, I am still using FreeFind on my pages. 'Nuff said?
   Search this site                 powered by FreeFind
 
Site Map    What's New    Search
N.B.: The search engine just looks through the web site for the words you enter. It cannot answer things like "Which program is fastest?"

Click here to visit FreeFind

Hit Counters

For several years now (March 2006), my web-traffic has been monitored for me by eXTReMe Tracker. They offer a free tracker. If you want to try one, check out their site. Using their tracker does require that you put a small graphic on your page. One that is invisible satisfies the needs of the hit counter, but I also sometimes put a larger one, just to be "open" with my readers. I usually also explain why the page has an invisible graphic (This page isn't tracked that way. Go to my homepage for an example on one of my pages, if you like.)

eXTReEe Tracker have recently overhauled their service. Now the code you put on a page is the same for every page. Now the code passes the W3 validator without tweaking. And, most dramatically, now you get a map of where the most recent 150 visitor from your site were from. I've posted a copy of the map for my eXTReMe-tracked pages on 12 June 06. With the real thing, if you hover your mouse over one of the visitor icons, you get information about the visitor and his/ her system. If you set up some eXTReMe tracking of your site, you might be surprised at how spooky and cool it is to look at a real time snapshot of your site's "connections" to the world!

Of course, many modern hosting services also give you access to traffic statistics. I happen to use 1&1 (they also operate in the UK), which gives good reports, but they are far from the only hosting service to do so. The reports can include not just how many times a given page was visited, but also information on where the visitor came from, and it that happens to be Google, what search the visitor made.

The following is old, but if you don't like eXTReMe, you might want to give it a try...

Again, after a recommendation, I visited HitBox. It appeared to be a well organized 'counts the visits to your site' service. (Access monitoring.) It is also free, if you display a button giving them publicity... not an unreasonable condition! They seem to offer quite sophisticated information for you.

So why haven't I signed up?
   a) Lack of time to do the quite simple work.
   b) I'm happy with the information I get from eXTReMe Tracker and 1&1, for the moment.
   c) I didn't want to inflict the overhead on the visitors to my site. (Any such service, unless provided by your ISP, entails an extra communication across the internet so that someone's access to your site can be tallied.)


Get cash and other benefits from your site's traffic...

I've saved the best for last, as a reward to you for working through all of the above! Visit Google's page about their AdSense service. I won't say much more here, other than: I found it very easy to sign up with Google, and easy to insert the necessary HTML into my web pages. (The same HTML can be used in multiple pages.) My pages are about as simple as pages can be. I can't imagine anyone on the web who will be prevented from signing up to participate on technical grounds. Do be careful to check, understand, and play by the rules, though. Google is not interested in having ads from their clients on some sorts of page, and will black-list you if you misbehave.

One clever thing I will talk about: When you first sign up, Google asks for the URL of your site. Once you are a participant in the service, you can use the same code on multiple pages, across multiple domains. Suppose you have www.cats.com and www.cameras.com. If a page is about flea management, the Google ads will be relevant. Even with the same Google code on a different page, say one about choosing lenses, again, the Google ads appearing on that page will be relevant to that page's content. Pretty cool. And you get paid!
Looking for email, domain registration, or web site hosting? If you visit 1&1's site from here, it helps me. They host my website, and I wouldn't put this link up for them if I wasn't happy with their service. They offer things for the beginner and the corporation.



Click here to go to the site's MAIN index... Helpful Hints is just one corner of the site.




Looking for email, domain registration, or web site hosting? If you visit 1&1's site from here, it helps me. They host my website, and I wouldn't put this link up for them if I wasn't happy with their service. They offer things for the beginner and the corporation.


Ad from page's editor: Yes.. I do enjoy compiling these things for you. I hope they are helpful. However... this doesn't pay my bills!!! Sheepdog Software (tm) is supposed to help do that, so if you found this stuff useful, (and you run a Windows or MS-DOS PC) please visit my freeware and shareware page, download something, and circulate it for me? Links on your page to this page would also be appreciated!
Click here to visit editor's freeware, shareware page.

How to email or write this page's editor, Tom Boyd


Why does this page cause a script to run? Because of the Google panels, and the code for the search button. Also, I have my web-traffic monitored for me by eXTReMe tracker. They offer a free tracker. If you want to try one, check out their site. Why do I mention the script? Be sure you know all you need to about spyware.

....... P a g e . . . E n d s .....