Making your first web page


Intro

So - where to begin? Well, first of all I'll explain that by "content" I mean everything that you might put on your site. Words, graphics, photos, streaming audio, whatever. Content is a useful word to describe the lot. You knew that. So you're sat there and you want to write some stuff and you want to make it available on the web to all and sundry. You have web access via an Internet Service Provider (ISP), obviously, and you should therefore have some web space as part of the deal. Your web space is simply a directory on a server at your ISP (in my case it's Pipex). It's your personal directory. Subject to a size limit, and the usage policy of the ISP concerned, you can put what you like there. You are able to alter the contents of this directory, but the public cannot. That's a site - a collection of linked files of various types in a directory on a server connected to the web.


Get your details

So, your first port of call should be the website of your ISP (i.e. AOL, BT, Pipex or whoever). Somewhere on their site you'll be able to find details of the size and terms of use of your web space. They should also tell you how to send your pages to it. You'll be using FTP (file transfer protocol) for this. You'll need the access details for your web space; this is how the FTP software will know where to send your files to, and also how you'll log in to that space. So fetch this information from your ISP and make a careful note of it. What you want is your username, password and the host address (a directory name) of your space.


Your ISP may recommend a piece of FTP software, or you may need to choose it yourself. To follow this tutorial, you'll need to get a copy of FileZilla. It's as good as any, and better than many.


So what makes a site a site?

In my experience, it's this matter of what your web space is and how it can be made into a site that causes the most confusion to the naive user. You upload your stuff to a directory on the ISPs server, pretty much as you might copy it to another directory on your own computer - only it's now publicly accessible all of the time. And anyone who looks at the address of your web space (directory) with their browser will see it PROVIDED THAT it is written in HTML (I ignore more advanced web languages for this introductory tutorial). Browsers all assume, unless told otherwise, that they are looking for a file called index.htm when they go to a web address such as http://www.jimissuchanaltruisticchap.co.uk. So to create your first simple site you will need to create a file called index.htm, put some information in it in HTML format and send it to your web space.


What software do I need?

I'm going to teach you a little about using two free software packages in this guide. There is more web content writing software out there than anyone has time to enumerate or use, but I'm going to teach you to create a simple site using simple tools. It works for me. If you want a large, bells-and-whistles site then you may get some bells-and-whistles software like Microsoft FrontPage or NetObjects Fusion or something and get started on its tutorials. But software is expensive and large, and although it makes it fairly simple to create a complex site it does not necessarily follow that it is a simple way to create a simple site. And you won't learn any HTML in the process, which is a shame; you'll be at the mercy of whatever methods the package employs, which may or may not suit you. Remember that the content is the meat and potatoes of the web, and that design should be the servant of content! Design is not an end in itself. Legibility is paramount. And huge graphics eat away at your quota of space and annoy people waiting for them to load, so if you're going for a lot of graphics experiment with size versus quality in the JPG image format. You'll need an image editor for this obviously, discussion of which I may add here when I have time!


So to recap, I'm going to look at using NoteTab Light to write a page, and FileZilla (an FTP package) to upload it. Go and get your copies of these two now, and install them. Neither monkeys around with the innards of Windows and causes future instability, so they're excellent choices. NoteTab is the best editor I've seen, and will stand you in good stead for any text editing task you may want to perform. It has the handy ability to simplify HTML writing for the beginner without hiding the whole process from you so that you do not learn what is being done. I make no apologies for the fact that you will be learning to write some basic HTML, and that you will need to configure both NoteTab and FileZilla initially. This may seem a little daunting. If you have any interest in publishing anything via the web you'd be best advised to acquire these skills now though, as then you will know what you are doing.


Set up your software

Do not initially worry about or alter anything which you do not understand. I'm fully aware that there will seem to be a hell of a lot of options, many of which will be gobbledygook to you. Both pieces of software have capabilities far beyond what we need to complete the task at hand, but you can leave all that until later. Keep in mind what we're doing; stay focussed on the task at hand, and it'll all be fine! By the time you've finished this article you'll have a simple website of your own which you can take as far as you like in the future.


What I want you to do next is to create a directory on your computer; which I suggest be called C:\Web Site although you can call it what you like. This is where we'll keep all your pages (initially just index.htm) and any images and other stuff you'll be putting on your site. Having it all in one directory is the best approach for the time being, as there will not be much of it. You'll load and save your stuff from here, both to edit it and to send it to the web. Therefore in FileZilla's Site Manager, which is where you create the connection (really just like a favourite in Internet Explorer but with a few more settings) to your web space, C:\Web Site will need to be entered as your default local directory, so FileZilla will default to sending from this location. Username, password and host you will have obtained from your ISP. With these four things entered in the Site Manager you should now have the means to upload to your site.


Stick an arbitrary small file in C:\Web Site, connect FileZilla, and try uploading it. It should appear in the remote directory listing - which is just the contents of your space. Use FileZilla's help and the information or support from your ISP to get this working if it initially fails. I'm afraid that there's enough variation between ISPs to make it impossible for me to be more specific. Once you've got the uploading to your space in FileZilla working, breathe a sigh of relief and make yourself a big mug of Earl Gray tea.


Now start up NoteTab. Go to the "view" menu in NoteTab, and select "options". Yes, there are loads. As you use it more you'll come to appreciate them, because this is powerful software :-) Go to the "files" section, and set your default open and save directories to "C:\Web Site". Now you know where your site file(s) will be put when you've created them. Take a look around at all the options in this section, and spend a little time here learning what the choices are and maybe setting up the editor the way you'd like it as you would with any new application. Along the bottom of the main NoteTab screen you will see some buttons, and if you press the one marked HTML you'll see that a list of commands becomes available in a pane to the left of the editing area. These are going to enable you to learn some basic HTML as painlessly as possible, so be nice to them.


Making a main page for your site

In NoteTab do "file" - "template" - "open". Select HTML, as we're making an index.htm page. Fill in the info you are prompted for in the boxes, but I wouldn't put your main email address in as the web is rife with software spiders trawling for spam targets. Use either nothing or a "sacrificial" account for this unless you don't mind the spam. Also, be aware that the keywords you enter here are what search engines will use to index your site; choose them relevantly and wisely, grasshopper.


Type the content, which can be whatever text you like, where you are told to. For now I'd suggest something really simple. The do a "Save As" and call the file index.htm. You should see that the file will be saved in C:\Web Site. If you go to the "tools" menu in NoteTab you'll see a really useful "view in browser" option. Use this periodically to see what difference your editing has made to what will be seen when the page is viewed on the web. Great, eh? You'll need to use refresh/reload in the browser to pick up any new changes.


When you're happy with what you've done, you can fire up FileZilla. Connect to your web space, and send the index.htm to it. Fire up your browser and go to your web space, and you'll see your page. Excellent. If for some reason this has not worked, re-read my advice here and make sure that you have configured the packages correctly.


So now you have a simple one-page site! Better still, you've painlessly (these things are relative) done it in a way that enables you to clearly see how the rudiments of HTML work. Using time-honoured methods of fiddle/preview/fiddle you should be able to quickly grasp the basis of a knowledge of HTML that will stand you in good stead in future. There really is no substitute for constant experimentation, so play with the HTML commands that NoteTab gives you and see what they do.


After you've got this basic page working you can play with creating other pages and linking to them, inserting images and sounds, and a whole load of other stuff. I'm not going to go into a great deal of detail about all this here, but there are a couple of things you'll want to bear in mind. First, you may want to get a free counter so that you know if you're getting any visitors. Click on mine to see what's involved in setting one up. And secondly, you'll want an email link on your page (subject to what I said earlier about spam) in order to receive feedback. These can be your next mission...


Closing note

My site is made with Blog (permanent link in the box on the right hand side of my main page), which is weblog creating software. Not exclusively, but it does the lion's share of the work. In future I will be writing a piece on how to use this. Bear in mind that although it is a very good way of creating content quickly, the content is in journal form and therefore may not be entirely suitable for all purposes. That's why I haven't used Blog as the basis for this tutorial.


Take me back to the main blog!


Created on September 04, 2003. Article version 1.1