My HomePage. My HomePage? My HomePage!
by Kurt Keller
Everybody is talking about the internet, it looks like. (Ok, everybody
except my wife.) And 80 % of these 'everybodys' mean The Web if they say
'internet'. You've heard about the World Wide Web (WWW), HomePages,
maybe even know that http stands for HyperText Transport Protocol. And I
know that you've even considered building your own HomePage. Don't lie
to me, you have thought about it, I know.
"I'm not a programmer, I can't do that." you said, but for creating your
own HomePage you don't need to be a programmer, it really IS easy.
(Unless you want your HomePage to be an interface for your company's
database or stuff like this, of course.) I'll show you how to set up a
All you need is a Text Editor or a Word Processor which can save files
as 'Plain Text' or 'ASCII'. The Semware Editor (formerly QEdit) or EDIT
included with DOS 5 (IBM DOS/V 6 calls it E) or NotePad in Windows
(called Memo-cho in Japanese Windows) are all text editors that save
files as plain text (ASCII) by default. I personally use
TSE (The Semware Editor), but almost
anything will do.
A HomePage is nothing more than a plain vanilla text file with the
information you want to be displayed and some formatting commands. The
skeleton looks like this:
<TITLE>Your Page's Title</TITLE>
Whatever you want to have included
in your HomePage
Yes, this is all the basics. Actually, above could be displayed by your
webbrowser. As you can see, all the commands are enclosed in two signs:
'<' and '>' and all of the commands (almost all) have a 'BEGIN THIS
COMMAND' and a 'END THIS COMMAND' part. A command begins with <COMMAND>
and ends with </COMMAND> and acts on everything in between.
By the way, the commands can be in either upper case or lower case or
even mixed, it does not matter. I use upper case for all commands to
make finding commands easier. With a big, complicated HomePage, it can
be difficult to find the commands in all the text when you want to
Also the indenting I use, is optional. Why I'm so crazy as to type so
many unnecessary spaces? See for yourself; here is the exactly same
HomePage as above, formatted differently:
<HTML><HEAD><TITLE>Your Page's Title</TITLE></HEAD><BODY>Whatever you want
to have included in your HomePage</BODY></HTML>
When displayed with your webbrowser, there won't be any difference
between the two versions, but which one does look easier to maintain
The Bones of the Skeleton
Now, let's have a look at the individual bones of this bare-bone page:
<HTML>...</HTML> HyperText MarkupLanguage (HTML) file
Everything in between these two delimiters is considered to be a file
that should be displayed by a webbrowser. Every individual page of a
HomePage starts with <HTML> and ends with </HTML>.
<HEAD>...</HEAD> heading section
What's in the heading section, is not displayed by your webbrowser. This
is additional information such as the title of your page.
<TITLE>...</TITLE> title of your page
The <TITLE>...</TITLE> command appears in the heading section of your
page and defines your page's title. This title is not being displayed by
the webbrowser, but for example, if you add the page to your bookmark
file, this is the name that will appear in your bookmark file.
You should try to give each of your pages a different title and the more
descriptive you are, the better. Entries in the bookmark file like 'My
HomePage 2', 'My HomePage 3' don't tell you at all what's on the page,
something like 'Kurt Keller - Holiday 2010 on Mars',
'Kurt Keller - Kamakura Beach Festival 1996' are much better.
<BODY>...</BODY> body section
This is the main section of your HomePage. What's enclosed in the
<BODY>...</BODY> tags (as we call the commands) will be displayed by
your webbrowser. Here you enter all the information you want to offer.
There is no need to take care of line breaks or line lengths, unless
special formatting commands are used. The webbrowser autowraps all the
text to fit the current window size.
But of course, a page with nothing but continuous text is boring and
hard to read. So let us look at a few formatting commands:
<BR> line break
As you can see, this command does not have a 'END OF COMMAND' part. At
the very place you put <BR>, a line break will be inserted. A line
break, not an empty line! (An empty line would be two consecutive line
Usually it is better to group related information in paragraphs, rather
than use line breaks. I use line breaks mainly when I want to have a
line break at a specific place within a paragraph, whereas for
formatting related info, I use the paragraph tag.
You might often see that only <P> is used, rather than the pair
<P>...</P>. The old HTML standard only used <P> at the beginning of a
new paragraph. However, I do recommend using the new standard, because
this allows for some further formatting options like aligning a whole
paragraph etc. (which I hope to discuss in a future article).
<HR> horizontal ruler
Completely unrelated information, I usually divide with a horizontal
line, also called a horizontal ruler. A simple <HR> in your html file
will cause your browser to display such a ruler on the next line. I
usually use horizontal rulers between the visible title of the page
and the actual information.
<H1>...</H1> visible titles / headings
Didn't I just say, that the title of a page is not displayed by the
browser? Yes I did. But in the body section of our HomePage, we can
make text appear bigger by using these <Hx>..</Hx> tags, where x is a
number in the range 1-6. <H1>...</H1> is displayed in very big
letters, <H2>...</H2> in quite big letters, <H3>...</H3> in big
ones and so on. So this gives us a way to have headings (or titles) in
A thing I also usually do, is to center the visible titles.
Everything that is enclosed by <CENTER> and </CENTER> will be centered
automatically by the webbrowser, rather than left aligned, which is
<I>...</I> italic text
<B>...</B> bold text
<TT>...</TT> typewriter text (fixed width)
Sometimes you would like a word or phrase to be displayed in italic or
bold letters, or in a fixed-width font, to make it stand out from the
rest. This is what we use the <I>...</I>, <B>...</B>, <TT>...</TT>
These three are physical styles, as they define the physical
formatting for the enclosed text, such as italic, bold, fixed width.
Apart from physical styles, there are also logical styles. With
logical styles, it depends on your browser or your browser's settings,
how the enclosed text will be displayed. For example, while one
browser might display emphasized text in italics, another browser
maybe displays it in bold. Here is a list of logical styles:
for a term being defined
typically displayed in italics
typically displayed in italics
for titles of books, films, songs etc.
typically displayed in italics
<CODE>...</CODE> computer code
for program listings or code snippets
usually displayed fixed width
<KBD>...</KBD> sample keyboard entry
for samples of what the user is expected
to enter on his/her keyboard
usually displayed fixed width
<SAMP>...</SAMP> sample text
for displaying sample screen output
usually displayed fixed with
<STRONG>...</STRONG> strong emphasis
usually displayed bold
for displaying variable names
usually displayed in italics
Officially, it is recommended, that logical styles be used, rather
than physical ones. However, as one can not say for sure, how logical
styles are being displayed at the users end, physical styles are
encountered more often.
Please note, that you can not mix styles. For example you might expect
that <B><I>some text</I></B> would display 'some text' in bold
italics. While some browsers might actually do so, this is an
undefined case. You'll also have to take care not to mix up the start
and the end of commands. For example:
<CENTER><B>This text is centered and bold</CENTER></B>
is not legal and some browsers could have difficulties. Tags are like
cartoon boxes: the tag you 'opened' last, must be closed again first.
If you close the outer box before having closed the inner one, you
can't close the inner one any more. So above example should correctly
look like this:
<CENTER><B>This text is centered and bold</B></CENTER>
What makes the Web so powerful are Links, also called Hyper-Links. If
you include a link in your HTML file, you can jump to a different
place on the web merely with a mouse click. To include a link, you
must know the URL (Universal Resource Locator) for the page you want
to link to.
The syntax for links is as follows:
<A HREF="URL">...</A> link / anchor
To explain it, we'll need a specific example:
This will make the word 'PINBOARD'(8) clickable and if you click on
it, your browser will jump to http://www.pinboard.com/ (4&5).
The whole construct is called an anchor, which is what the <A...></A>
stands for. After the '<A'(1), a space (2) follows, and then a
parameter(3-6). The parameter HREF="http://www.pinboard.com/" itself
consists of several parts again: the HREF="" part (3&6) which probably
stands for Hyperlink Reference and the address of the file you want to
link to (4&5), also called the URL of the file. In this case you're
linking via the 'HTTP' protocol (4) to 'www.pinboard.com/' (5), which
is a file on the server 'www.pinboard.com' in the root directory and
called 'index.html' or 'index.htm'. So then we have to close the first
part of the anchor command again with the > sign (7). The text that
follows after the anchor (8) will be clickable. Finally we close the
anchor tag with </A> (9).
Looks and sounds complicated? This is the look and sound only. An URL
is the address that you can enter in your browsers 'Location:' field
to jump to some page. If you only specify a hostname or a hostname and
directory, such as in above example, the browser will return the
default file, which is index.html or index.htm. (What the default file
is called, depends on the server setup, but usually it is index.html
as the first choice and index.htm as the second.) If this file does
not exist, the browser will return a listing of all available files in
the specified directory.
If you specify a file directly like
<A HREF="http://www.pinboard.com/html/aj690_0.html">1st HTML demo</A>
the browser will display that file, or, if it does not exist, an error
When having a look at the source code of some pages with links, you'll
probably quickly get the hang for it.
Oh sorry, sure, you can see the source code of all displayed pages.
For example, in
click on 'View' and then on
'Source' and you'll see the plain text file used to create the page
currently displayed. This is actually a very good way to learn how to
use new or unknown features. I use it often. Don't worry if at first
you can only understand a small part of what is in the source file.
The world also was not created in one day, neither will you learn all
the HTML features in one day.
Comments & unsupported Features
Something I recommend to do, is to include a comment in your HTML
files that states when you have created and last updated the file. A
comment has the following syntax:
<!-- ... --> comment
where you can replace ... with your comment. A comment will not be
displayed by the browser. I usually include a comment before or in the
heading section, stating when the file was originally created and when
I last updated it. Also if I'm doing something uncommon in an HTML
file, I put a comment there, explaining what is being done, so I can
remember what the following code does, once I need to update the file.
You might see many different ways, comments are inserted in pages. The
correct way is the one shown above. Some people make use of the fact,
that a webbrowser will ignore all tags it does not know about, that
is, everything between < and > which the browser does not know about.
So you could include a comment by using
<! I like this way of comment better >
but if in a later standard of HTML <!...> is assigned a meaning, then
you'll have to update all your pages. So rather get used to doing it
the proper way from the beginning.
Your first HomePage
We've been talking a lot about HTML tags now. Sure, there is more,
pictures, parameters in the various tags, more tags etc. We'll cover
that later. You now know the basics and it's about high time to practice
A sample of what your first basic HomePage could look like can be
You remember how to see the source code, don't you? (View -> Source)
If you don't have a place to practice, you might be interested in
PINBOARD's HomePage Hosting Service. Even SSI is supported and some CGI
scripts are readily available, a service many providers don't offer.
Of course, for simple HomePages your Global Online account or so is
sufficient. But as mentioned, some of the 'cool' stuff is not supported
by many providers. And of course it is also possible to save your
HomePage to your own harddisk and have a look at it with your browsers
View -> File command, but that way you can't play cool and tell your
friends: "By the way, did you already have a look at my HomePage?"