, possibly earlier
There are several ways to build a personal website:
(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:
Microsoft Publisher. This program is included with some varieties of MS Office. I never worked with it myself, but according to my children (born 1984, 1985, 1988) it isn't a comfortable program to work with in the long run.
Microsoft Word. From Word 97 onwards it is possible to save files
in HTML format.
The saved files are then directly suitable to be viewed in a
youngest daughter took
her first steps on the web using Word.
When I viewed the resulting HTML code (which she herself never even looked at) I noticed that the font size and colour was repeated every time again. I thought that this was due to inefficiency on Microsoft's part, but on second thought the problem is in the semantics of these HTML language elements:
If for example you change the font size, you must also re-specify colour and font face, or else they revert to default values. I should think it would have been easier to have a rule that anything left unspecified remains unchanged, until explicitly changed.
You can avoid this problem by not specified fonts, and by setting font size in different ways.
In order to use Word for creating HTML you must have the filters for this file type installed. During the installation process a selection has been made as to which components are to be included, so it is possible that reading and writing in HTML format is currently not enabled. In that case it is necessary to add these conversion filters from the installation CD-ROM.
MS FrontPage. I never worked with it myself. I heard rumours that is makes considerable changes to existing HTML code, and uses MS-specific language enhancements.
Netscape Composer. Newer Netscape browsers, like Netscape
Communicator version 4.5, come with a component called
Composer. This enables you to view and edit pages.
I never worked with it myself, but did hear rumours about "messy" code.
Later on I tried Composer 4.5 on one of my own files. It changed the code completely, and even turned relative link paths to other files, which were intended to create portable code that works both locally and on the public internet, regardless of domain, into absolute links involving a C: drive!
<A TARGET=_top HREF="../../index.htm">Top menu</A> became: <a href="../../../../c%7C/internet/homepage/index.htm" TARGET="top">Top menu</a>
Totally unacceptable behaviour.
In addition, Composer moved comments, which I had put there to find my way around, to a totally different location in the file.
Not recommended, to say the least.
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:
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:
Is included with Windows. Fast, simple, small. Disadvantage: it can only handle rather small files. On the other hand, when an HTML file is big, you easily lose track of what you're doing, and it takes more time to download it, so then it's probably time to consider splitting the file anyway.
Even the Edit program, which all MSDOS versions except the very old have, is suitable for this purposes.
Included in Windows 95 and 98. Can handle even big files. It features simple text formatting, but in this case we don't need that, because all formatting is done in HTML.
Word (versions 2, 6, 95, 97, 2000 for Windows;
lots of versions exist for MacIntosh).
Note that you must save HTML "as text", and not as a Word file or in any order special file format. The current file format is indicated in the lower left corner of the save dialog. The first time you save you must change the format to text format, or else the browser won't be able to interpret the file as HTML.
Note that Word is usually set to open a file using the file format that it derives from the file name extension (i.e. the last part of the file name, after the last dot). With the HTML filter installed, a file with a name that ends in ".htm" or ".html" will then be interpreted as HTML, and the HTML code itself will not be displayed. To stop this from happening you should check an option called "Confirm Conversions" or something similar. This option is in the File Open dialog in Word 6, and under Options/General in Word 97. This causes Word to ask you whether the file format it thinks the file is in is OK. In case of an HTML file Word will propose the HTML conversion if the appropriate conversion filter was installed. But for the direct method we're dealing with here we change that to "Text Only", so the underlying HTML code will be displayed.
You can probably use other word processors such as WordPerfect just as well. Here too (like when using Word, but also WordPad) it is important to save the document in text-only format!
Various other text editors are suitable for this, such as those included with Pascal, Delphi or C compilers. You may also use text editors on other platforms (UNIX, Linux, MacIntosh) because all the time we're dealing with simple text files only. This means you can start in one editor, and continue with the same file in some other editor later.
Some examples of browsers:
Netscape Navigator. Up until release 3.0 this was the name of this well-known browser.
Internet Explorer. Is included with (or built into / integrated with, some say) Windows from release 95 onwards.
Mozilla. Kind of a modernised version of what used to be Netscape Navigator.
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 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.
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>
<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
on a line of its own, the browser will turn it into running text, with a single space between words.
A similar tutorial is "A Beginner's Guide to HyperText Markup Language", by Gregg Martin.
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:
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.
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!