How to make a personal website: some tips

, possibly earlier

There are several ways to build a personal website:

Using a WYSIWYG tool

(WYSIWYG = What you see is what you get).
One method of creating a web page is to use a program that shows the page as a web page, while you edit it at the same time, in that same screen. This seems easy at first, but when the site grows bigger, and gets frames, links, and HTML files in multiple sub-directories, it isn't really that easy any more, because the structure of the underlying HTML code, and how it's organised into files and directories, is not directly visible.

I purposely encouraged my children to try such tools, because I didn't want to put the burden of my stubborn habits as a C-programmer upon them. Yet two of my three children now use tools that enable them to see the HTML code, of their own free will.

Rumour has it that WYSIWYG tools sometimes generate browser-specific code, which for example only works well with Microsoft's Internet Explorer, and not with Netscape products or when using a computer with Linux or some other flavour of UNIX installed on it, and that they also write needlessly complicated code.

Some examples of such tools:

Using a syntax tool

These are text editors, but with built-in help facilities so HTML syntax appears on the screen automagically. You manipulate HTML code directly. But these tools also have a window in which you see the resulting page, as it appears in a browser. So what we have here is a combination of WYSIWYG and direct control over the code.
Many such programs exist:

Using an editor and a browser

With this method you directly write HTML code yourself, in a program that enables you to edit text files, and you view the result in a browser program. Of course you need some knowledge of HTML to be able to do this.

Some text editors to consider:

Some examples of browsers:

Unfortunately when working with two separate programs, a browser and an editor, you need to switch from one program to the other in order to see the result. With Windows, Word and one of Netscape's browsers this works as follows:

It is a bit cumbersome, but the bright side is that it encourages you to focus on either content or presentation (structure, links, pictures, formatting) at any given time.

HTML

HTML was invented around 1991 by Tim Berners-Lee, who then worked for CERN in Geneva (he's now somewhere in America). Internet, with email, FTP and newsgroups, was then already in operation for a long time, but the World Wide Web only became possible with HTML and browsers. Only then the general public got acquainted with the Internet.

There is now a dedicated organisation for maintaining the definitions of the HTML language (also the earlier and wider standard from which it was derived, SGML, and the newer XML):
The World Wide Web Consortium. You'll also find an HTML validator there. See also Dan's Web Tips: Validators about this.

HTML = Hyper Text Markup Language.
"Markup language" means it is a language in which you define text, but also how it's formatted, with pictures, and links. A link is a reference from one page to other some page, on the same or other site, anywhere in the world; hence WWW = World Wide Web: any document can refer to any other one (this a named spot in the same file), so everything gets connected to make one giant web.
Hyper Text: It's more than just text, because it includes links, to other texts and to pictures.

HTML is a relatively simple language. HTML is simply text, with some commands interspersed which are enclosed between < and >.

Example: text between <b> and </b> is "bold". This means <b> indicates where text in bold face begins, and the same command with an extra /, like </b>, marks the end of the part in bold face.

<i>This bit of text is italic, hence the letter i. The same command with the slash stops it again.</i>

<u>Underlined text.</u>

<p>The p command marks the beginning and end of a paragraph, corresponding to a hard return in a word processor.</p>

<P>Commands are not case-sensitive, so a P works just as well as a p. The same is true for all other HTML commands.</P> (with the exception of link names, files names and directory names).

<br> is a break: this means that text continues on a new line, but still as part of the same paragraph.

HTML may freely contain spaces, tab characters and newlines, without affecting the resulting layout. So  even   if you have some extra spaces
or
put
every
word
on a line of its own, the browser will turn it into running text, with a single space between words.

You can find tutorials on the web, that explain all this step by step. There used to be one written by Paul Russel, somewhere around here or here. But there's nothing there now.

A similar tutorial is "A Beginner's Guide to HyperText Markup Language", by Gregg Martin.

This is another one: Getting started with HTML by Dave Raggett. And this one is for advanced learners: Advanced HTML.

And this one is in Dutch.
I also recommend the book "Webdesign" by Peter Kentie (2003 or 2005). See also this explanatory note.

I learnt a lot by looking how others do it: when you see things on a site like what you want yourself, you can instruct your browser to display the source code, so you can see how the author achieved it.

The following links give you lists of links to info for beginners:
Princeton

When a site grows bigger it is a good idea to split the info into various files, and eventually also use different subdirectories to store them. It is an advantage if the starting point of the site is a file called index.htm or index.html. This is because most web servers (i.e. a program running on the ISP's computers which makes the requested data available to the browser) have been house-trained to look for files by those names when they get a URL (Universal Resource Locator, which is the web address) that only contains a domain name or a directory, and not a file name.
Example: I can specify my own site with the full address http://utopia.knoware.nl/~rharmsen/index.htm, but only http://utopia.knoware.nl/~rharmsen/ works just as well. (You can often even omit that last slash, but it's probably safer to include it).

If you make use of frames the index file will usually contain a FRAMESET command.

As long as you're still experimenting with an initial version of your site it is not yet necessary to make it accessible to the whole world, on the web. You view the result in the editing program, or you use a browser to open a local file, one that's still only on your own computer, instead of an HTML file on the web.

For publishing the site after a while you need to transfer the HTML files, and also any pictures (JPG or GIF etc.), to the computer of your ISP (Internet Service Provider). You must know where to store those files, ISP's can usually give you instructions about that.
Some browsers have their own facilities for transferring files, this is usually referred to as publishing. It is not clear to me if they use FTP for that, or how well this works when several files and directories are involved.

I use a separate FTP program for this myself (FTP = File Transfer Protocol): CuteFTP. It is a shareware program.

Before, I used to run WS_FTP version 2.0, which was freeware, to transfer files. That was a somewhat simpler program, but wasn't always very clear. There is a shareware version of WS_FTP nowadays, probably more powerful and better than the old one. A 30-day trial version available for download here.

Windows 95 (and higher?) has a program ftp.exe included. But it is command-based, so you'd have to learn these commands first. It may be convenient for those familiar with UNIX FTPs, because the original FTP was a UNIX program, and also command-based.

Frames

You can use frames to split the screen into horizontal and/or vertical parts. You can display different contents in each part of the screen, for example to keep a menu and the chosen subject visible at the same time.
An example of a FrameSet commando: 

  <FRAMESET cols="40%,60%" framespacing=0 frameborder=1 border=2>
      <FRAME NAME="left"
          SCROLLING="auto"
          SRC="leftpart.htm">
      <FRAME NAME="right"
          SCROLLING="auto"
          SRC="ritepart.htm">
  </FRAMESET>

This produces a somewhat smaller left part of the screen, and a right part which is a little wider. The HTML for each part is in separate files, in the example called leftpart.htm and ritepart.htm. The name (here "left" and "right") will be displayed by some text-oriented browsers as a menu for navigating to each part (that's how it works in Lynx, a non-graphical browser for UNIX systems), and you can include TAG=name in links elsewhere to instruct the browser which earlier information it should overlay with the new.

Instead of dividing the screen into two parts you can also use three or more. Where a FRAME command is expected you may also use a new FRAMESET, to subdivide a horizontal part of the screen into vertical parts, of the other way round, etc.

As always, you can learn much more about Frames by doing lots of experiments, and by looking how other people do things. You can use see World Wide Web also as a giant pile of learning material!

Copyright © 2000 by R. Harmsen.
Updates 3 March 2000; 20 January 2012 (removed donation link)