Website Making Tutorial

Ten Easy Steps to Making a Website

Here you will see how to make a website in 10 simple steps using free software and tools! We will be using a free web Page editor and using free website templates  to make our website . If you want to know more about the different templates then see the making a website using templates article.

Tools Required to make your mini website

All that we require is a web page editor - Trellian WebPage and a free Template - if this link fails then the template is under 'Simple' section of this site www.MyFreeTemplates.com.

1. Download the software and template. Install the software and unzip the template files.

2. Create new directory for the files e.g, c:\myweb

3. Copy the images folder and template file jd_s034.html to the myweb directory. The directory should look like this

4. Open Trellian WebPage  and close the readme file (click file>close ) and close the bottom pane (click black cross in top left corner of the bottom pane. Click file>open and open the template file jd_s034.html.

5. Delete all text in both panes by highlighting and hitting the delete key.

Delete the copyright notice at the bottom by highlighting and hitting the delete key.

Delete the menu items at the top that we are not using leaving only the home and contact items.

6. Change the menu items so that they link correctly by right clicking the menu item and selecting edit link. They should be changed as shown below:

Home

Note: I am using relative links so we can test them on our local computer.

contact

Note: I have used a fictitious email address

7. Save the file as Index.htm . Then save the file again as page1.htm, page2.htm, page3.htm, page4.htm. Your directory should now look like this:

8. Click window and select index.htm from the list. If it is not open then click file>open and open index.htm. The file should open in the editor window if not click the editor tab to go to the editor window.

Select heading2 and center (see screenshot below ) and type in the following as the headline.

My Mini Web Site

Select bullet points:

and type in the following text:

• Making a free Mini website page 1
• Making a free Mini website page 2
• Making a free Mini website page 3
• Making a free Mini website page 4

Your page should now look like this

9. Highlight the page1 text and click the chain icon (next to the anchor) and fill out the hyperlink information:

Repeat for the page2,3,4 text.

Your page should now look like this with the links shown underlined:

Save the file.

10. To test go to the c:\mywebs folder and double click index.htm it should open in internet explorer. Click the page links and test that they all work.

Finished ! You have just created your first very own mini website-well done!

Notes:

1. If you have any problems with the links just go to each page and check the syntax is the same as that shown in the screenshots above.
2. I have used relative links in the example as it allows us to test on the local computer. I could have used absolute links like http://www.build-your-website.com/index.htm but that would have meant that I could only test it if it was placed on the Internet server. If you are unsure as to what relative and absolute links are see "Understanding URL's" paragraph.

Understanding URL's

A URL (Uniform resource locator) is another name for an address. It is used to identify a resource (usually web page) on the Internet. It is split into 3 main parts

protocol + Domain Name + Path to file

e.g.

URL=http://build-your-Website.com/courses/publishing.htm

here:

protocol = http:

domain name=build-your-Website.com

path to file =/courses/publishing.htm

T he above URL is an absolute URL in that all parts are specified. The domain name is in effect the name of the Web site or web server and is discussed in more detail in this domain name article. The protocol in this case http is the hypertext transfer protocol is the one seen here and the most common one used and is used for reading web pages on the internet. Other protocols you may see here are:

ftp: --used to copy files on the Internet

mailto: --Used to send mail on the Internet.

news:  -- used to access newsgroups.

file: ---used to access a file on you local hard drive.

Absolute versus relative URL's

Absolute URL's which specify the resource exactly as in the example above are used to access resources that are not on your Web site. If the resource is on your Web site then a relative URL is used which tells the browser the resources position relative to the current web page. If we look at the file layout as shown below.

If you are currently reading the web page create-webpage.htm and want to access the page publishing.htm then the relative path is simply--- publishing.htm -- as both files are in the same directory. In order to access the file index.htm then the pathname is -- ..index.htm . in this case the two dots .. take the browser up a directory. and to access the file image1 in the images directory then the pathname would be ../images/image1. When accessing files on your own Web site you can use relative or absolute pathnames. When accessing web pages on other site you must always use the full pathname or absolute url.

Links to Bookmarks or Named anchors

In order to link to a particular part of a web page then a bookmark or name anchor needs to be created in the web page. Using the above example above and assuming a book make has already been created on the publishing.htm web page called middle then the absolute url to  link to this is :

URL=http://build-your-Website.com/courses/publishing.htm#middle.

Where the bookmark is designated by #middle

to link to this from within the publishing.htm page then the link is:

#middle.

The ability to link to a specific location within a web page is particularly useful when dealing with large web pages.

Copyrighting Resources

Resources For Graphical Design And Web Graphics