This page has been written to help people publishing "raw HTML" 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 (it has spell check, 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.
The material on this page was hived off from an overfull page of assorted material. The material on special characters for HTML, which was here has been given its own page, if that's what you were looking for.
Colors
Click here for a good chart of "web safe" colors. Some say that the whole issue of using "web safe" colors is moot today, but there's no harm in using them!
A little trick using colors... hide spoilers, quiz answers...
Not something you will be using every day, but suppose you want to hide a "spoiler", or the answer to a quiz question, so that a reader won't see it inadvertently, before they want to?
Nothing simpler! Try this little demo...
What is 8 times 6?
Highlight from here....
The answer to 8 times 6 is 48.
6 x 8 = 48
... to here to make answer appear!
(Thank you, Sparkfun.com... that was where I learned this easy trick)
The HTML code to make that happen is...
<p><i>What is 8 times 6?</i></p>
<p>Highlight from here....</p>
<p><font color="white">
The answer to 8 times 6 is 48.
</font></p>
<p><font color="white">
6 x 8 = 48
</font></p>
<p>... to here to make answer appear!</p>
Meta Tags
The following illustrates some 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.
The "http-equiv" line is connected to the doctype tag which we will discuss in a moment.
<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">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</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.
Minimal legal webpage...
<html>
<head>
<title>Simple Web Page.</title>
</head>
<body>
Hello World
<body>
</html>
While the above is "legal" it will probably 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 tag.... but what I've shown above works for me.
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.
For DocType to be most useful, you also need to put the following in your <title></title> block:
Once you have the !doctype line at the start of your page, and the http-equiv line in your <title></title> block, 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.
To get the best results from the Validator, spellcheck your page before you submit it.
Speaking of putting DocType at the top of your pages, I've written another page for you. It discusses what I put in my standard <title></title> block.
When I'm trying to understand what is wrong with the way I've used a tag, I used go to the "Encyclopedia of HTML" at http://www.redbrick.dcu.ie. That seems to have died a while back.
I also like the reference pages at http://www.w3schools.com/. They seem to take care to alert you to things which have been deprecated. (Deprecated: Declared "old fashioned/ "Bad Ideas". No, I'm not playing the political correctness game. I'm talking about weeding out from the web traditional "tricks" which turned out not to be good ideas.... like writing tags ALL IN CAPS.... always a bad thing.)
(Oh dear... one of my digressions: Look at "a11 in caps", compared to the alternative. Notice the "shape" of the phrase, consciously. You already noticed it unconsciously. The shape... absent in the all in caps version... helps you read it. Did you notice the spelling mistake? The 1's in "all" were the right shape, so your gray cells for reading just took the word as "all". Admittedly, I cheated slightly. Put "THIS IS WRITTEN ALL IN CAPS" and "This is written all im caps" on the opposite sides of a card. Ask people to read the caps version, and then the lower case version. See how many notice the "m". (To be really scientific, see what happens with different people with "THIS IS WRITTEN ALL IM CAPS" and "This is written all in caps". One further idea before I get back to work: I bet "... all it caps" gets caught more often than "...all im caps." It should, if I'm right, because the shape of "it" is strongly different from both "in" and "im". Oops... one more: Put...
...on a card and ask people to read it. Is it funny? If not, read it again! give up? Look at the page's source. (FireFox: Right-click somewhere on the page, elect "View Page Source")
Getting started with Cascading Style Sheets (CSS) (And using the "pre" tag)
CSS help you get work done without lots of typing. You can do highly complex things with CSS, but for now a small, simple example to get you started....
For 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. The <pre> block is used to display a section as is was typed, with spaces and linefeeds preserved, and, unless you change things, using a mono-spaced font. Note that characters which are special to HTML, in particular the ampersand (&), less-than sign (<) and greater-than sign (>) all have to be done the hard way in the underlying HTML, or the browser will still try to treat them as special, even inside a <pre> block.
This is simple text. It appears
more or less as I typed it, because
I've use the <pre> tags.
Note the mono-spaced font, which you
may want for some things, e.g.
tables of numbers.
(There are other ways to get a
mono-spaced font, but this is an
easy way, and not too kludgy.)
You may get away with just inserting html tags inside a block of <pre> text to change the color of the text. I'm told that the way different browsers display <pre> text is quite variably, though. And your page will also fail the excellentW3 HTML validity checker's tests. (Cut yourself some slack... but your pages should fail on very few items.) The tag is interpreted, even though the block is supposed to display things "as entered". The tag is NOT rendered literally. (I "did things" to make the <pre> after "I've used the" appear that way, instead of being interpreted. Note also in the following the use of the <i>, for italic, tag...)
This is more pre-formatted stuff.
It is green, even though this part of my
page now fails the W3 HTML validity checker,
because I put <font color="#009900">
at the start of the block, and </font> at the
end of it. There are better, legal 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". (Look at the page source for more details.
That "works", the text shows green, at least in Firefox... but fails the HTML validation tests I give my pages. Sigh.
(By the way, before we continue this discussion, you can, legally, use things like <font color="#009900"> inside <h3> or <p> blocks,
Like this..
... or this
Anyway! 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:
This defines a class of "pre", "DemoStyle". Now I can create things like...
This text is enclosed in
<pre class=DemoStyle> (before it)
and </pre> (after it). With the
right stuff in the page's header, I
can have multiple blocks of text
formatted according to one global rule.
Because of the class definition in the page's header, and because I said <pre class=DemoStyle>, the text appears in green, in Courier. The class inherits the fact that spaces and linefeeds are preserved.
Not only does this "work", but it also passes the W3 HTML validation tests. (^_^). (That's the "new" :-) by the way.)
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 rule... 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.
I am grateful for the information published by w3.org which helped me get started with CSS's when I could resist the urge no longer. They also provide a free, online CSS validator for us.
Sidebar Starts===========
While you don't NEED it right now, it isn't actually very hard to go just one step further, if you wish to.
If you want to put the CSS code into a sheet of its own, it isn't hard.
Using the same CSS code as we used above, just create a little text document like this...
/*My First CSS stylesheet
version: 17 Sep 2011
Anything between the slash-asterisk and the asterisk-slash
is ignored.
*/
pre.DemoStyle {color:#33CC00; font-weight:bold;
font-family:"courier new",monospace;}
(Note that the "<style type="text/css">... </style>" we needed when this was in the page's header is absent.)
Save that on your server (where your .htm file which will use the CSS resides; put it in the same folder) as something ending in .css, e.g. MyDemoStyleDef.css. (Your "server" can be your own PC, for testing purposes.... the page just won't be available to "the world", unless your PC is set up with Apache or similar!)
(One .css file can have multiple definitions in it, when you are ready to fly!)
Remove the....
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. (Not to mention the information in the DocType section above!! I'll try to give this page a further edit one day!!)
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 will check that your html has no faults, check the links on your page(s).
Before I talk about the search engine provider I use for my site, I should mention that Google does a good job of something similar, which I've used in a few places on my sites, including one that will search across all my different pages. (It is at the top of my Sensing and Control page. However, I am mostly remaining loyal to the service that has taken good care of me for years. (The Google search tool is part of their AdSense service.)
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?
Site Map
What's NewSearch
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?"
For several years at March 2006, my web-traffic had been monitored for me by eXTReMe Tracker. I'm still using them... paying them!... as of September 2011, when I edited this page. 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.)
eXTReMe Tracker overhauled their service a while ago. The code you put on a page is the same for every page. The code passes the W3 validator without tweaking. And, most dramatically, now you get a map of where recent visitors to your pages were from. Here is 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.
If you don't like eXTReMe, you might want to search with Google for "free hit counter", and many, many services crop up. Be a little careful, though. I once put a script in one of my pages, and it lead any visitor to my site being whisked away to a different site almost instantly.
So why don't I have many hit counters on my pages, apart from that?
a) Lack of time to do the quite simple work.
b) I'm happy with the information I get from eXTReMe Tracker, Google 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!
The "online services for webmasters" items above are the remains of some work I did before creating a more comprehensive list on one of my other pages.
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!
Page tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org It almost passes! There are two "problems" which I have reasons for overlooking... but usually problems can (and should) be solved!
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.
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!
Page tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org It almost passes! There are two "problems" which I have reasons for overlooking... but usually problems can (and should) be solved!