HTML, which stands for HyperText Markup Language, is the set of format instructions for the World Wide Web. Many people seem to think that it is complicated, something that needs one of those 1,000-page books to learn.
This article is hopefully going to show you how easy it is. Not only can you make your home page in ten minutes, but you will also not need any special tools. We are going to use Notepad. You cannot get much simpler than that.
There are lots of special editors for HTML, as well as an add-on for Microsoft Word, but my argument is that as this is only going to take ten minutes, you will have written your web page by the time you have installed those other systems, and by the time you have learnt how to use them and are just creating your first page, you will already have made a suite of pages, all inter-linked, telling the world about you, your philosophy and interesting anecdotes about your friends and family.
Also, more importantly, when you want to get clever and stretch the boundaries of HTML, then you will probably have to do it this way anyway.
There are some catches. To do this in ten minutes, you have to:
You will not need to be on the Internet while you develop your page. Learn offline, until NTT see the error of their ways, and provide the telephone service at sensible rates. See STEP NINE, and the information box on starting Netscape, for details.
STEP ONE: Start Windows then start File Manager, and make a new directory called HOMEPAGE in C:\. (Can be anywhere, can be called anything). TIME BUDGET: 60 seconds.
STEP TWO: Start Notepad (called ME-MO-SHI on Japanese systems). It is normally in the Accessories group in Program Manager. I always move it to the the Main group, as it so useful. TIME BUDGET: 20 seconds.
STEP THREE: Okay here is some theory. The layout information in HTML is done with "tags". These are command words that start with the < symbol and end with the > symbol. The <, > and everything between them will not appear on the web page.
Type the following text into Notepad. There are lots of tags here, and most of them are overhead - you will have to type this junk into every page you write:
<html>The tags can be lower-case, upper-case or a mixture. You can spread the lines out more, or squeeze it all on to one line — the browser will ignore blank lines and tabs. Spelling is important, as is the initial forward slash (/) character at the start of three of the tags.
More theory: Some tags comes in pairs, the first one is the command name, e.g.,. <title> while the end one has the same tag name but with that "/" character, e.g., </title>. What this means is that everything between the start and end tag is affected by that tag. In this case it means that MY FIRST HOME PAGE is the title of this web page. What that means is that when you load it into your browser, "MY FIRST HOME PAGE" will appear in the title bar. TIME BUDGET: 1 minute, 40 seconds.
STEP FOUR: We left a blank line between <body> and </body> and this is where your text goes. In other words the </body></html> line is always the last line in the file.
So, move the cursor to that blank line, and type in these lines:
<h1>MY TEN-MINUTE HOME PAGE!</h1>Hello my name is Darren. Thank you for coming to my page. Please note that it is still UNDER CONSTRUCTION. <br>I am going to tell you all about the meaning of life in a moment, but first I want to show you a picture:
Three new tags to learn: <h1> ... </h1>. This starts and stops a big heading (it is a ONE after the "h"). The browser will automatically start a new line after a heading. However, since normally the browser ignores your carriage returns, blank lines and tabs, we have to use a tag to tell it when we want it to start a new line. I use <br>. There is no closing tag to worry about. (The books may suggest you use <p> — in this case they both do the same thing). TIME BUDGET: 2 minutes.
STEP FIVE: We are halfway—five minutes down, five to go. If I am going too quickly for you, sorry, but this is as slow as I get. Just type for the moment, think later.
Now let's add a picture. First you need to put the GIF file in c:\HOMEPAGE (or whatever directory you created earlier). Use File Manager to do this.
For this example I am going to assume your GIF file is called "FACE.GIF". I am giving you a whole minute to find your GIF file, and put it in c:\homepage. Uncharacteristic generosity. TIME BUDGET: 60 seconds.
STEP SIX: Now directly under what we wrote in STEP FOUR, type this:
<img src="face.gif">
That is it! One line! I told you this was going to be easy. It is just one tag (when you play around later, try putting a <br> just before it, to get it on a line of its own). It starts "img" which stands for image. Then a space, then "src" (which stands for source) an equals sign, and then the filename in quotation marks. Finally the ">" to close the tag. HTML is easy-going on upper and lower case, carriage-returns, etc. but is very fussy about closing your tags. TIME BUDGET: 30 seconds.
STEP SEVEN: Almost forgot! We had better save our file! Go to FILE menu in Notepad, and click SAVE AS. Move into c:\HOMEPAGE, and then for the filename type this: HOME.HTM. Click OK to save it.
Important Tip: When you move it on to your Internet Provider, so that the world can see it, chances are that you will need to rename it to "HOME.HTML".
Those of you using Windows 95 or NT, can call it HOME.HTML right from the beginning of course. TIME BUDGET: 45 seconds.
STEP EIGHT: Now let's add a link! Type this text in:
<br>In the unlikely event that you want to provide a link to my home page you can type this in as it stands. Otherwise you will want to replace the http:// address.
We give <br> twice. This will leave an extra blank line after the image (Advanced Tip: this is why I prefer to use <br> instead of <p>, because however many <p>'s in a row you have, it will only give one blank line).
Next we have <a>Some text</a> (I split it over 3 lines above, to make it easier to read).
The <a> (it stands for anchor) starts the link, and the </a> closes the link. The text in the middle is what will appear on the home page, in blue (by default). When this blue text is clicked it will jump to another web page whether that page is another one you have written, or written by someone else and residing on a computer on the other side of the world (Cor... just like magic!).
We tell it where to go by putting some extra stuff inside the first <a> tag. It starts HREF= (just as <a> stands for "anchor", HREF stands for the equally intuitive "Hypertext Reference") and is then followed by the http:// address in quotation marks. And of course you must remember to put not only the closing quotation marks at the end, but then also the ">" to close the tag.
The other thing to be careful of is to give the HTTP address exactly. If it is wrong then your page will still look correct, but anyone clicking it will get that wonderfully techie message "URL NOT FOUND".
(Advanced Tip: If you are linking to another page that you have written, that is in the same directory, there is a very simple shortcut: you only need to give the filename,e.g.,. <a HREF="jhome.html">Japanese version here</a>). TIME BUDGET: 75 seconds.
STEP NINE: We have one and a half minutes left, and we are finished! Just time to test it! Save your file, and without closing down Notepad, start Netscape (or whatever browser you are using). See the information box on starting Netscape without the expense of going online.
In Netscape, go to FILE menu, and choose "Open File". It brings up the usual windows dialog box. Go to c:\HOMEPAGE directory, and you should see HOME.HTM listed. Double click it, and the page we just typed in should be there, with the image and the link.
The link will not work unless you are online of course (if you try it, it will think for a while and then say no DNS entry or some similar error).
Go back to Notepad. Type something new at the end. "This is a test" is always popular. Save the file again. Now go back to Netscape and click Reload. Hopefully, your new text will appear. This can give you a quick way of developing, as you can see your changes almost instantly.
To learn more HTML either buy one of those books, or whenever you visit someone's page, and you want to do what they do, most browsers will let you look at the source. Learn from them. The dishonest among you can simply cut the good bit from their page, paste it into your own page, and make a few cosmetic changes. TIME BUDGET: 90 seconds (not counting the time to set your browser up).
| <html> | First tag in file |
| </html> | Last tag in file |
| <head>...</head> | Enclose the head section |
| <title>...</title> | Enclose the title of the page |
| <body> | Starts the content of your page |
| </body< | Ends your page (just before </html>) |
| <h1>...</h1> | Enclose a large heading |
| <br> | Start a new line |
| <img src="xxx.gif"> | Show image xxx.gif |
| <a HREF="xxx.html">...</a> | A link to xxx.html in the same directory |
| <a HREF="http://server.name/directory/xxx.html">...</a> | A link to xxx.html on another computer |
Netscape (under Windows 3.X) wants to have Winsock running, which normally means you need to dial up to an Internet provider. While Winsock is dialing, simply hit <esc> to abort the logon, and Winsock and Netscape will continue to load, and will run offline with no trouble.
Algorithmica Japonica
March 1996
The Newsletter of the Tokyo PC Users Group
Submissions : Editor Mike Lloret