Copyright 2006 www.iswebdesign.co.uk
This can seem a bit daunting if you are not used to HTML, but really it is not hard. The code is clearly annotated to make it clear where you need to edit. Even if you do not intend to edit the code yourself, you may find the next section useful.
To get you started we have created four pages for you. The front page for your site should be called "index.html", and must be included, but you can choose whether to use the others, or create new pages.
To create a new page, first, make a copy of the template page (to be found in the templates folder), and save it to the folder called site and rename it to your new page name. This should include only letters and/or numbers, and no spaces. It should have the file extension ".html", but unfortunately windows does not normally make file extensions visible. However if windows recognises it as an HTML document then you are OK.
Alternatively you can make file extensions visible by going into your windows control panel, clicking folder options, then deselecting the option hide extensions for known file types.
You will need to use a text editor to edit the page, such as notepad, which comes free with Windows. Don't use a word-processor, as it will add a lot of invisible formatting which will cause problems with viewing the document as a web page.
A more detailed discussion of HTML tags is given below.
Edit the parts of the page that you want to appear on every page, for example the title, contact information and menu. For the menu you will need to edit the link text, and the href attribute. Keep the attribute class="menulink" - this will ensure that your menu keeps the correct style. For example if you have three pages called home, about us, contact us, your links should look like so:
You can now save this page as a new template in the templates folder if you wish, and use this to create further pages.
A web page consists of plain text, plus various tags that tell your web browser how to display the page. For example, to format some text as a paragraph you enclose it in the tags <p> and </p>, like so:-
<p>This is a (rather short) paragraph.</p>
Headings come in six flavours: <h1>,<h2>,<h3>,<h4>,<h5> to <h6>, ranging in size from large (<h1>) to small (<h6>). For example:-
<h3>I am a medium heading</h3>
This displays like so:-
Notice that these HTML examples all contain both an opening (eg <p>) and a closing eg (</p>) tag. This is normal, however some elements, such as the line break or the image element are empty, because they don't contain text. In this case they are opened and closed in the same take. For example a line break is written as follows:-
<br />
The image element more complex, an example is:-
<img src="images/mypic.jpg" alt="A picture of me" />
Notice that the image element has two attributes. The src attribute specifies where the image is to be found, it can be either relative to the current document, or a complete web URL eg
<img src="http://www.mywebsite.co.uk/images/mypic.jpg" alt="A picture of me" />
A relative path such as images/mypic.jpg means that the picture will be found in the folder images, which is itselfcontained in the folder in which the page resides. Images should be in the .jpg (jpeg), .png or .gif format or they wil not display correctly.
The alt attribute specifies the alternate text that will be displayed in non-graphical browsers. Notice that the attributes are enclosed in quotation marks.
The only other tag that you really need to know about is the <a> (for anchor) tag, which is used to create links to other pages. For example:-
<a href="contact.html" class="menulink">Contact Us</a>
This example has two attributes. The href attribute specifies where the linked page is, it can be either relative to the current document, or a complete web URL eg
<a href="http://www.mywebsite.co.uk/contact.html" class="menulink">Contact Us</a>
This will display like so:-
The class attribute specifies a style class for the element, using Cascading Style Sheets (CSS). This is too big a subject to go into here, so I will just mention that in this case this class is used to specify that the link will be displayed in the style of a menu link. This styling is specified in the style sheet "css/default.css" that is attached to the document. If you wish to add a page to the menu you will need to remember to add this class attribute.
Notice that some text is enclosed between the <a> and </a> tags - this is the text that will appear as the link on the page.
Comments can be added to a web page using the comment tags <!-- and -->, for example
<!-- this is a comment -->
These are not displayed as part of the page, but are extremely useful for explaining what parts of the HTML code are for. The template includes a number of comments that indicate where to add your own text and images.
This is a very brief crash course on editing HTML. There are many introductory books available which go further into the subject than is possible here.
It is a good idea to read the section of this guide on editing the HTML, it will give you some more of an idea about what is actually going on, and contains some important information.
I will describe the process using Dreamweaver, but it is very similar for any HTML editor, such as Front Page, Net Objects.
Open the template page template.html found in the templates folder using your editor.
Edit the parts of the page that you will want to appear on every page, for example the website title, the contact information and the menu. Your HTML editor's help should contain instructions on how to do this. Save the page, preferably under a new name, so that you still have the old version as a back-up, in case things go wrong. This edited page will be your design template.
When you are done, click on the File menu, and choose Save As Template. It may warn you that the template contains no editable regions: ignore the warning and save it.
Then choose a region of the page that you will want to edit to create the other pages. Click Insert->Template Objects->Editable Region. Repeat for other regions. Save your template.
Now you can create new pages from your template - you just need to add the content for your site. Remember to call your front page index.html. Your other pages can be called anything you like, as long as they have the extension .html. Your site pages should be saved to the folder called site. To get you started we have already created four pages for you. You can use these if you wish, or delete them and create new ones.
In order to publish your pages to the internet you will obviously have to have hosting somewhere, and you will need an ftp connection to your site - this is a method for transferring files over the internet.
To transfer your pages you will need to have ftp client software. Some HTML editors such as Dreamweaver will manage the details of transferring pages for you.
If you don't have one of these you can set up an ftp connection yourself very easily using Windows. The process using Windows XP is as follows.
Click your start button, and select My Network Places, the select Add a Network Place. A wizard will start, which will guide you through the process. You will need to give the ftp address of your site, which will be something like ftp://ftp.mysite.co.uk, plus a username and password, with which your hosting provider should have supplied you.
Once your network place has been set up you can easily access your site and copy files and folders back and forth much the same as you do on your own computer. Remember to keep the same structure for your site when you copy files across. The main pages of your site should be put in the root folder of your internet site. Images should be put into a sub-folder also called images - the easiest way to ensure this is to copy the entire images folder to the root folder. You will also need to copy the folder css to your internet site, and any other subfolders that are contained within your site folder.