Lessons and tips in making web pages

This page is not meant to tell you everything you need to know about web page construction. It is merely to share some lessons I have learned in the past 3 years and to point you to some excellent resources that can benefit you.

I wrote this article for folks who are reasonably computer literate. By "literate" I don't just mean knowing how to do basic tasks like email, word processing and Internet browsing, but having a knowledge of more fundamental things like file extensions, file size and its relationship to download time, paths and directories. If you don't know what a "path" is, this article is probably not for you.

My introduction to the Internet

I first heard about the Internet in 1995 when living in St. Petersburg, Russia. When living there a friend tried to encourage me to build a home page for him. But I didn't have a clue what he was talking about. I never even seen a web page yet! And it was pretty difficult for us to access the Internet at that time. Telephone lines were poor in Russia back in 1995 and our modem was only 2400 BPS. Our computer was a 486 CPU 40 MHz with only 4 megabytes of RAM. It's not too easy trying to access the Net with a machine like that!

But after a period of time when modems became faster and faster and memory got cheaper and cheaper, and after much encouragement from friends, I finally got the vision to learn web site building. I learned that one of the easiest and cheapest ways to share what I wanted to say to the world is to post it on the Internet. I can promise you that somebody who lives very very far away from you and who you will probably never meet in this life will read what you have to say sooner or later if you post it on a web page!

But I didn't have the slightest idea how to get started. It wasn't until January 2001 when I met Kengo Tahara who offered me free web hosting on his site and showed me how to upload a file to it, that I realized how simple it really is.

Some lessons I learned

I started out making web pages with MS FrontPage. I thought this was a good application to start out with because it is an easy to use WYSIWYG (what you see is what you get) web page editor. But after a period of time of editing over and over the same page, I found I couldn't change certain things and fonts no matter how hard I tried! I came to realize the reason for this is because FrontPage was inserting conflicting HTML code, in other words, junk code, into the file, and the best way to get rid of the junk code is to learn HTML code and edit it out manually! I thought this would be a gruesome task but it's really not! It was quite satisfying to purge out about 50K of totally useless junk font code from a 80K file and leaving it looking better than when I started! And it sure loads a lot quicker than it did before!

Another thing about FrontPage I didn't like was that after making many changes on a page the program would suddenly crash on me and I would lose all my work because I wasn't saving the file after every change. Unlike Word, Frontpage didn't seem to have a recovery document option. Working with an HTML editor forces me to save very single change I make in order to see what the change looks like when I view it with my browser.

My aim is to write page pages that are easy to read, fast to load, and conform to the standard laid out by the World Wide Web Consortium w3.org.This is the one of the best resources I can give you as it has many links to tips and pointers on web page construction, and can even validate the code on your web page and show you what is wrong with it! Click here to go to the web page validation site. Keeping the standard means my pages will work on most browsers both now and in the future.

I bought myself a very good book to learn HTML, "Sam's Teach Yourself HTML and XHTML in 24 Hours." I highly recommend this book if you are serious about learning to make web pages! It not only teaches the code, but it tells you everything you need to know about web design so you don't have to learn the hard way and will learn to make streamline pages that people will want to visit more than once. Here is a good link to an excellent page with links of HTML learning resources that the author of that book recommends: www.24hourhtmlcafe.com/hotsites.htm

Working with HTML code in a text editor may seem awkward at first, but after a while you get used to it. I have come to the point where I can write a page of code and know what it will look like in a web browser before hand. But of course I always test it in at least two different web browsers, IE and Firefox. I figure if the page looks OK in both of them, it will probably look good in most of the other browsers as well.

Designing web sites is not merely having technical knowledge. It is a discipline like learning how to cook or to sow. Unless you develop good working habits, you won't get very far in my opinion.

After building my own site, I've become more aware of the differences in web pages and how fast they load. It's a common mistake of beginners to put too many or too large graphics on a single page, or to use complex tables loaded with graphics. This really slows down loading time. I found that taking time to study principles of web design from experienced people can save much time in the future and attract more visitors to my site.

Here's a humorous site I really like on how to make annoying web pages! It's full of information on what irks people about web pages and what to avoid.

About HTML editors

As I stated above, I wanted to wean myself away from using MS Frontpage. The book "Learn HTML in 24 hours" recommended I use Notepad to learn HTML so that I could concentrate on learning the code without having to learn a new program at the same time, and so I did that. Notepad is good as it has word-wrap and is very simple to use. Check out an amusing web page all about the glories of Notepad: www.notepad.org The page sounds as if it were written to be a joke, but all the statements about Notepad are perfectly true!

But because Notepad doesn't offer any tips or helps on writing HTML, I thought to start to use a more powerful HTML editor program than Notepad. I found 2 freeware programs I like very much - HTML-KIT and Ace HTML 5 Freeware.

HTML Kit by Chinami is the best and most powerful of the two! It is highly supported with many plug-ins (like a good spell checker as you type) and regular updates. I am using HTML Kit to write this very page.

HTML Kit is so cool! I just validated this page with it and was pointed out that something was wrong with the title tag. It turned out that some meta tags were inserted before the Head tag. So I fixed it in a second, re-ran the validate code option, and it gave me a clean bill of health! So I would think that the World Wide Web Consortium www3.org would do so also.

One thing that HTML Kit does not support yet, is double byte characters that Asian fonts need. I need to have Japanese support from time to time. I hope eventually the code will be changed so that it can support Japanese and Asian characters.

In my search for an HTML editor that does support Asian characters, I found on Feb. 18, 2003 "AceHTML 5 Freeware". It is pretty easy to learn but doesn't have nearly as many options and support at HTML-Kit but nevertheless is the best free software that I use to edit and create web pages in Japanese web pages that is freeware. You can get it at: http://freeware.acehtml.com/ There is a professional version of this program you can buy.

March 21, 2005 update: Since I first wrote this page I've switched over from Windows to the Linux operating system. This means that I can't use the HTML editors I previously used in Windows, but I found the ones that came with my Linux distribution to be quite satisfactory. The one I like the best so far is called "Bluefish". It is fast, quite user friendly, and with it I can even work with Japanese characters with no problem! I'm using Bluefish right now to update this page with this paragraph.

About Cascading Style Sheets

If you are going to write good web pages that are easy to maintain, it is very important that you learn and use Cascading Style Sheet code (CSS) in your pages! I can't emphasis enough how much CSS as helped make writing new pages and maintaining old ones much easier!

The main purpose of CSS is to separate formating code from HTML code. This cuts down the amount of code on a web page enabling a browser to load it faster! Search engines like it too. Search engines apparently will rate your pages higher if they have less junk code and more real content -- a good amount of text. This has been my experience anyway.

A common mistake of beginners is to try to format their web pages like they would using a word processor by adding extra spaces or using extra line returns. CSS will give you the power to control the appearance and format of your web page using very little code. Another cool thing is that you can separate the CSS code into a seperate file and then link all the pages on you web site to that file. By doing that, if you want to change the color of the text, the font size, line height, paragraph indents, margins, and many other format related items just by making tiny changes in the single CSS file. All pages on your web site are instantly changed accordingly! This will save you hours and hours of time in the future and makes your web pages much easier to edit using simple text editors like Notepad!

A very good and free program to use for this is: TopStyle Lite.

CSS code is much more powerful than HTML. Though it is simple to use, there is much more to learn and understand to use it best. At the time of this post, there is still much more I would like to learn. I probably should buy a good book on it. The more I learn and apply, the better my pages look. It seems there is no end in learning CSS. But you don't need to know very much to use it. In the beginning I just copied CSS code from other people's pages. ;-) Now I try to design my own. It's so much fun to experiment with! Even while writing this page I tweaked my style sheet further and learned yet more cool effects.

The title at the top of this page is a good example of the power of CSS. It looks like a graphic button, doesn't it? If you resize your browser window and make it narrower, you will notice that the text in the title will wrap to a new line showing that it is not a graphic button!

The HTML code for this title is simply:

<h1>Lessons and tips in making web pages</h1>

The CSS code is:
h1  {
	color: White;
	background-image: url(images/sakuradark.jpg);
	text-align: center;
	font-style: normal;
	font-size: 150%;
	line-height: 1.3em;
	padding:4px;
	margin: 7px;
	font-family: cursive;
	BORDER-bottom: 7px outset;
	BORDER-right: 7px inset
}

This means on all pages that are linked to my style sheet, every h1 tag will obtain the special attibutes I assigned to it. If I change the image file to something else, all pages that use the h1 tag will change accordingly. The background comes from an image file. Using CSS makes it so simple to maintain a web site! Many thanks to the w3.org people who invented it!

HTML tags I use

If you use CSS, you don't have to know much HTML code to make a good web page. The HTML tags I use 90% of the time more than any other are:

<p></p> The paragraph tag
<br /> The line break
<h1></h1> The header tag. I normally only use the first 3 levels of the header tag
<a href=""></a> The anchor tag for links
<img /> The image tag
<hr /> The line tag to make a horizontal line
<ul><li></li></ul>These are tags to make lists
http://yourfavorite.com/free/promofaq.htm
<tr>
<td></td>
</tr>
</table> These are all the tags you need to make a simple table. I used to use the table for formating, but I learned that CSS positioning is much better.
<div> A tag used for formating. I use this far more than the <span> tag which is similar.

Not so many to learn, right? Of course along with these taps, there are some attributes that go with the tags that are good to learn, but you don't even have to use many of those attributes if use CSS.

About Meta tags

Meta tags are tags between the <head> </head> tags of your web page. They are useful to help search engines index and rate your web site!

The most important meta tag is the <title> </title>. It is very important to have a descriptive title of your web site between the title tags. The title can have up to 70 characters and should contain key words of your web site. Some pages have only Page1 for their title. That just doesn't cut the mustard if you want a good rating in search engines!

Here is a good page about the title tag for your reference: Tips and information from META

Another good tag to use is the description tag. This tag can be longer than your title tag and should have the same key words in it as the title tag.

This page has the description tag of:
<meta name="description" content= "Tips on how to write web pages and recommended HTML editors">

You can also have a keywords tag but I hear it is not so important to most search engines anymore.

If your web page contains non-Latin characters, it is very important to have the charset tag that contains the character set code of your web page. The character set of this page is:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

For my Japanese pages it is:
<meta http-equiv="Content-Type" content="text/html; charset=charset=shift_jis">

Further web resources that have benefited me:

I hope to continually update this page and add new tips and material, so please come back again!

Copyright © 2005 by James Arendt
Valid HTML 4.01! handcode (2K) w3ccss (1K) Standard of excellence