HOME >> HELPFUL HINTS MENU     Delicious Bookmark this on Delicious   Recommend to StumbleUpon

Your First Webpage

You can create a simple web page! You don't even need access to the internet! (Although once you have created your page you will need access to the web, to make it available to, almost literally, the rest of the world.) You don't need any geek tendencies. Doing it is simple and inexpensive. The following certainly isn't the only way to do it, and the following covers a fraction of what you could do... but this one page covers how to publish your first page on the net.

If you have already got past publishing your first page, you may not need what is on this first page... but...

What follows on this page is about making your own HTML and publishing it via a URL under your full control. There are other ways to put things on the web...

... and I have pages about those alternatives, discussing both making your own, and using existing ones.

A quick aside: Speaking of wikis, please take a look at my personal "ICE" (In Case of Emergency) page.... It is my instance of something that many people might want to create. The next 9/11 could involve you, or your loved ones, and an ICE page gives you a great way to quickly, easily tell everyone "I'm okay", or "Help needed. I'm at...". I've already used mine to reassure and inform friends when I was stranded within the air transport system by a blizzard.

So... turning back to making and publishing "real" webpages....

You need a way to create a simple text file. I used Windows Notepad. (It is usually found under Programs|Accessories|Notepad). NB: Open Office, Microsoft Write, MS Word, or any other beyond- bare- bones word processors will NOT be satisfactory. (Yes, they can be used, but this is a beginner's guide, and doing it with Notepad is simple to do and to explain.)

As I said, Notepad (which comes with Windows) will do, but I now use a program called Textpad, which I like very much for a variety of tasks. I probably use it more than any other single application apart from my browser and email program. You can download a trial copy from www.textpad.com It offers syntax highlighting (varying rules, depending on file extension. Can handle html, Pascal, Delphi, C, etc, etc). It offers spell checking. I've written more about it elsewhere.)



You need someone to 'host' your web pages. Almost all internet service providers (ISPs) will host pages for their customers, usually for free. (Your ISP is the organization which has given you a way to connect to the internet.) Check out your ISP's site. It is also, I think, possible to have pages hosted for you by general internet resources like Yahoo and Google. Check their sites if your ISP doesn't offer the service. And, of course, there are many organizations which will host your site in return for a fee. For many of my web pages I use 1&1 (US site... click on the link to the US site, and I score points with 1&1... thank you!), because that way the site can have a name of my choosing, not the name assigned to me by my ISP. (1&1 has operations in several countries, including the US and UK, at least.)

You need to know how to get the simple text file from your computer to the host's computer. The procedure is usually simple, but varies from ISP to ISP, so again: look on their site. For my needs, an FTP program called Terrapin has worked so well that I don't even mind the small fee I had to pay after I had used it on a free trial. (Details below.)

So... to work...

Use Notepad to create a little file as follows...

<html>

<head>
<title>My Site</title>
</head>

<body>
This is a simple demo.
<br><br>
This is a second paragraph.
</body>

</html>
Save the file. Call it index.htm. Don't close Notepad.

Start up your web browser. It is not necessary for it to dial up your ISP; you can do what follows offline. Under the browser's menu item 'File', you'll find a way to open a file. (Firefox calls it "Open file...", Opera and MS's browser call it "Open"). You'll get the usual dialog box, and you'll have to move to the folder where you saved "index.htm". This will be just like opening things with almost any Windows application.

Arrange your screen so that both the browser window and the Notepad window can be seen. They can overlap one another so that both can be large, but be sure you can see the browser's "Reload", or "Refresh" button even when the Notepad window is on top. Click Notepad's Edit menu item and turn Word Wrap on.

If you don't see something sensible in the browser window, don't worry. Look at what you have in the Notepad window. Fix any typos, etc, that you can see. Click File|Save to re-save the new version. Click on the browser's "Reload" or "Refresh" shortcut (or use View|Reload or View|Refresh). Your typo fixing should made what you see in the browser better! You will do the following over and over in working on web pages:

Work on "the stuff" in Notepad.
Save what you have.
Switch over to the browser.
Click Reload (or "Refresh".. whatever your browser calls it).
Look at how your page appears now.
Go back to Notepad, make more changes to "the stuff".
.... Save what you have.... (and so on, around and around this loop).

What is going on? You are creating "the stuff" that the browser reads to determine what to display to people viewing your page. (In a moment, I will talk more about what to put in that "stuff".) When you fetch something from the internet, you fetch "stuff" like that which you've typed into Notepad. Fancy things, like tables and frames and graphics entail slightly more complicated "stuff", but the basic principles don't change. Once the browser fetches the "stuff", it turns it into what you are used to seeing when you visit internet pages. Remember that the people fetching things from the internet do not all use the same program, or even the same type of computer. Hence the need for the "complicated" system of "stuff", with the things like <head> <title>My Site</title> </head>.

Going back to "the stuff"....

It starts with <html>, and ends with </html>

All through your work writing "stuff" you're going to find things in pairs. In fact, misplacing or failing to provide one member of a pair is the main cause of problems for beginners. N.B. Only the second member of the pair has the "/". (I think of it as standing for "end...")

Inside the <html> </html> pair, you'll have <head> and </head> and after that you'll have <body> and </body>.

You don't need much inside the <head> </head> pair, but you want at least to put <title> and </title> there, with a title for your web page between them, as in the example above. (As you learn more about publishing on the web, you'll learn about putting other things in this section.

By now you've probably guessed one of the rules of writing web pages: The <thingie></thingie> pairs are always nested. In other words, you might get...
<outer><inner> blah </inner></outer>
but you won't get...
<outer><inner> blah </outer></inner>
It pays to type both halves of a pair, and then do the bit in between. E.g., to add the "title" line, first I typed

<title></title>

... then I used the arrow keys to move to the point between them and then I typed in the title I wanted. Another example: The word "then" in the previous sentence is in italics because first I typed <i></i>. Only when the pair was present did I type the "then" (without the quotes) between them. (Textpad also gives me an easier way: I write the word(s). I select them. Then I double click on an entry in a list of possible formats, and Textpad puts the <b></b> around the selected text.)

Whew! Maybe I'm showering you with a lot to grasp, but it isn't really very hard. You could soon be writing HTML (right name for "the stuff") with little effort. (HTML stands for HyperText Markup Language.)

An incidental point: You can press the "enter" key almost anywhere you want to. Use new lines and vertical gaps to make "the stuff" easier to read while you are working on it in Notepad. Break things into logical sections. It won't cause what your reader sees to have breaks in it, though. How to make those breaks is explained in a moment.

Another incidental point: Once upon a time, web stuff written ALL IN CAPITAL LETTERS was far too common. It is a Bad Idea, and, I believe, "officially" disparaged. Learn how to put things in italic, or bold, for emphasis... and use it sparingly.

What about the stuff you wanted to share with the world??? That goes between <body> and </body>. Don't try to force the lines to end at particular places.... you don't know what size screen your reader will be using. Do, however, make paragraphs. You can do that by putting <br><br> at the end of each paragraph. (After you are done "crawling", and you are ready to "walk", it is better to put each paragraph within a <p>....</p> pair... but somehow that was hard for me at first, and for now you can cheat, as I did for many years, if you like! Most of my pages still use the double <br> method of separating paragraphs.)

So! We are nearly there!

Just before turning to the next part of the problem, a few 'advanced' things you can do in your html (HyperText Markup Language):

If you add a line that says....

<a href="other.htm">Click here to go to the site's other page</a>

...then users will see just the "Click here to go to the site's other page" part, but when they (or you, using your browser as you have been doing already) click on the "Click here..", the system will load a different page of html (which you should have written and stored in the same folder (directory) as "index.htm", with the name "other.htm") The browser's "back" button is the best way to go back to "index.htm" after using the link. Note that you will have to send both index.htm and other.htm to whomever hosts your page. You can have many more files, and you can choose your own names... but the name should end ".htm". It is usual to call your main page "index.htm". It is frowned upon to include the words "Click here..." on your page. They can usually be avoided, especially as there are now many people using the web who understand hyperlinks.

There are two other sorts of line you might want to add; examples follow. The second one assumes that your eddress is MyEmail@gmail.com....

<a href="http://www.google.com/">Click here to go to Google</a>

<a href="mailto:MyEmail@gmail.com">Click here</a> to email this page's editor.

NB: >>>

  1) You cannot test this sort of line without being online.
  2) You may attract spam if you publish your eddress this way. Put it on your page in an image.... readers won't be able to simply click on it, but computers won't be able to pass it on to spam senders, either. Making readers type your eddress by hand will slow down the people who are a bit quick to ask you for help.

However, if you want to make things easy for your readers, if you are ready for it, the following is an alternative way of fooling the spam engines, while leaving things easy for your readers....

Put the following in the <head> / </head> section of your page...

<script  language="javascript"type="text/javascript">
    Function mailto(domain,user){
       document.location.href = "mailto:" + user + "@" + domain;
    }
</script>
...and then you can use...
<a  href="javascript:mailto('gmail.com',
     'MyAddress');">Mail Me Here</a>
... anywhere you want to create a link which will pop up a started email to you if the user clicks on the link you've made for them. (My thanks to a kind reader from http://www.gibnet.com/ who sent that javascript answer in to me. His page is an unofficial guide to the Rock of Gibralter.)


One last bit of html you might like in your "first steps" toolkit: <hr>. This is unusual in that it is used on it's own, not as the first of a matched pair. It puts a horizontal line ("rule") across your page. <br>, which you have already seen, is another tag (that's the name for all of the things inside <>s) with no </br> partner.

A final detail: For now, stick to letters, digits, and basic punctuation marks, e.g. . , ? ! ( ). Some punctuation marks (e.g. the < you see all over the place in this page, and the ampersand (&) require minor trickery if you want them to appear in your webpages. Rocket Science? No. But you have enough to learn, already! (As you may have guessed, I have published something about some of those other symbols for you, when you are ready for it.)

Now then....

You've created your page(s), and they display beautifully on your machine using your browser to look at them locally. How do you share them with the world... literally? As I said earlier, I can't tell you exactly, because what you do varies from ISP to ISP. Sometimes you send your pages to the ISP as attachments to emails. Be careful with the file names..... sometimes (I think.. and it doesn't hurt to be careful!) the case matters, i.e. INDEX.htm will be treated by the ISP as something different from index.htm or Index.htm. A 'good' name starts with a letter, and consists of up to seven more letters or digits, followed by ".htm" e.g. hh1a.htm, ele1a.htm, ele1app2.htm, etc. You'll also see pages with names ending html. This is just an alternate for the same thing, but the system will care which you use. If you use thingie.htm, you won't be able to fetch the page if you call for thingie.html

Other ISPs (e.g. Compuserve, once upon a time... and maybe even today) ask you to download a little program which you then run to send your web pages to the ISP for hosting. The program acts like an install program, i.e. it takes you gently by the hand, asks you questions, organizes the process... and overcomplicates what can be a simple process not unlike using Windows (not Internet) Explorer.

Other ISPs ask you to use FTP to do the job. This is a bit like a cross between surfing the net and using email. Not hard when you get the hang of it, but you need the software for the job. I heard something the other day that makes me think it may be built into modern browsers. I use a shareware product called "Terrapin", which cost me not very much ($35), works well, and I was allowed to try it before having to pay anything. (I.e. it is shareware.)

You will choose the names of your pages, but your ISP will tell you where the world can find them. For example, I chose to call this page "hh5.htm" (page 5 of "Helpful Hints"), but it is at www.arunet.co.uk/tkboyd/hh5.htm because that's what the interNET service provider near the ARUn river gave me. It is not hard to have a site with a name of your choice. I like the services from 1&1 (US site... click on the link to the US site, and I score points with 1&1... thank you!). (They also have a UK site.). I used to use Yahoo for my domain registration, but later decided that 1&1 do it better, more transparently, and for less. ("Domain registration" is the part of the process in which you reserve your URL, the www thingie. 1&1 can host your site, even if you register the domain with someone else. Hosting is having a computer with the right htm files on it connected to the internet.) If you have arranged your own access to the web, you probably can already post web pages. Posting them with a URL of your choice is only a little more work. Try posting the pages the easy way first. You can move on to getting your own URL later, if you want to. Beware... Some of the really inexpensive "services" have a little catch: you don't gain ownership of "your" URL. This locks you in: If you want to change host, you either pay a transfer fee, or you change your URL. (1&1 don't play this trick on you.)


Good luck! Enjoy!

Click here to go to the site's main page


Looking for email, domain registration, or web site hosting? If you visit 1&1's site from here, it helps me. They host my website, and I wouldn't put this link up for them if I wasn't happy with their service. They offer things for the beginner and the corporation.


Ad from page's editor: Yes.. I do enjoy compiling these things for you. I hope they are helpful. However... this doesn't pay my bills!!! Sheepdog Software (tm) is supposed to help do that, so if you found this stuff useful, (and you run a Windows or MS-DOS PC) please visit my freeware and shareware page, download something, and circulate it for me? Links on your page to this page would also be appreciated!
Click here to visit editor's freeware, shareware page.

How to email or write this page's editor, Tom Boyd


Valid HTML 4.01 Transitional Page tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org


Why does this page cause a script to run? Because of the Google panels, and the code for the search button. Also, I have my web-traffic monitored for me by eXTReMe tracker. They offer a free tracker. If you want to try one, check out their site. Why do I mention the script? Be sure you know all you need to about spyware.

....... P a g e . . . E n d s .....