Making a Basic Webpage.

You can make webpages in word but it is difficult to work with, the final code is overly complex and the files produced are 10x bigger than they need to be. You can pay serious money for a program like Dreamweaver but it uses a lot of memory and takes time to learn. It is probably the case that you can learn HTML (the base language of webpages) in the same time that it takes to learn to use Dreamweaver.
There are plenty of free text editing programmes on the web. I use a programme called CuteHTML which came free with a magazine disc.
A useful free editor is Notepad2. I will base this sheet around the use of Notepad2. It is very straightforward to download and use.

Open Notepad2 and type in the code in the window opposite. This will produce a very basic webpage.(
I have turned several of the options on. These all make your life easier, especially when you start programming in Java or JavaScript.
Now click on the file menu and save as basdemo.htm Make sure that the file type is set to "All files". After you have saved it the HTML tags (the writing in the <> braces) should be multi-coloured. This is a great help to programming.
Now click on your saved HTML file, basdemo.htm, and see what happens. You should get a blank webpage with the title "A Basic Webpage." This isn't surprising because you haven't added any content!
HTML recognises 6 basic heading sizes. These are contained between <> tags. Make sure that you have start and finish tags <h1> and a close tag </h1>
The results should look like this.
Use <p> and </p> tags to enclose a paragraph of writing. Use a <br> tag to insert a line break.
This is the code needed to make a very basic table with two rows and two columns. I've put writing into the boxes.
This is the code needed to insert a picture. The picture needs to be saved with exactly the filename that you have used and in the same directory as your webpage.

The final code should look like this:

The final web page should look like this:

This link takes you to a copy of the finished page.
Basic web page.

You can get at the source code of this and most other web pages by using the view/source menu. This is a useful trick for finding out how things are done on nice websites.

Last updated 6th March 2007