 | Home | |
|
| Members Only | |
|
| Newsletter | |
|
| Newsgroups | |
|
| Become a Member | |
|
| Meeting Info & Map | |
|
| Officers | |
|
| Members | |
|
| Corporate Members | |
|
| Photos | |
|
| Workshops & Training | |
|
| Other Clubs | |
|
| Job Hunting? | |
|
| Constitution |
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 basic HomePage.
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.
HomePage Skeleton
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:
<HTML>
<HEAD>
<TITLE>Your Page's Title</TITLE>
</HEAD>
<BODY>
Whatever you want to have included
in your HomePage
</BODY>
</HTML>
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 change something.
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 later?
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:
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 breaks.)
<P>...</P> paragraph
-
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 <H2>...</H2> <H3>...</H3> <H4>...</H4> <H5>...</H5> <H6>...</H6>
-
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 our page.
A thing I also usually do, is to center the visible titles.
<CENTER>...</CENTER> center
-
Everything that is enclosed by <CENTER> and </CENTER> will be centered automatically by the webbrowser, rather than left aligned, which is the default.
<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> tags for.
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:
<DFN>...</DFN> definition
-
for a term being defined
typically displayed in italics <EM>...</EM> emphasis
-
emphasized text
typically displayed in italics <CITE>...</CITE> quotation
-
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
<VAR>...</VAR> variables
-
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>
Links
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:
<A HREF="http://www.pinboard.com/">PINBOARD</A> 1123----34-----45---------------5678------89--9This 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 message.
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 Netscape Navigator 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 little.
A sample of what your first basic HomePage could look like can be found at http://www.pinboard.com/html/aj690_0.html. 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?"