Home        About Us        Support        Products         Templates       Contact       Faq        Free        Links        Partners
website design article

 

 

Designing and building your website -

 

 

 


 

 

Ok, so now you have your own domain name and a hosting package.

This means it's time to build your website and upload it to your host's server.

Moving your files onto your hosts' server.

You can transfer your web site to your host's server using an FTP program.

An FTP program is a type of software that is used to move files from one computer to another over the Internet. FTP stands for : File Transfer Protocol ; this just means that this is a 'way' of moving files.

There are several free FTP programs you can use to move your files and many HTML editors and web design programs like Dreamweaver and Microsoft's Frontpage have FTP capabilities in-built.

Building a Web Page

There are 3 main ways of writing a web page -

1. Use a pre-made template

What is a template ? Web site design templates are pre-made web designs, which can be customised to reflect your own or your company's branding. These can be purchased or even downloaded free from many websites.

Website design templates can be found in various formats like Photoshop and HTML. Often these templates are compatible with HTML editors like Frontpage and Dreamweaver.

Web site templates can be very useful - they can be used by experienced web designers to 'jump-start' the creation of a new project. Also, they are a way for people to put out great looking web sites quickly with little or no knowledge of HTML and web design.

2. Use an HTML editor like FrontPage or Dreamweaver.

HTML editors make building web pages feel like creating a document in Microsoft Word, to a degree... it's made pretty simple. However, the downside is that you loose a certain amount of control over what you are doing and in some cases you can become too dependent upon the program.

3. Hand-code your HTML in a text editor like Notepad.

That means you type in the HTML code yourself. This is the approach we are going to use here, because it's the quickest way to learn how to build web pages, and it is arguably the best way because you have the most control over what you're doing.

What are HTML tags ?

HTML tags are a type of specially formatted text that creates 'markers' for web browser to read and interpret. These 'markers' tell the web browser what you want to display on the web page and how to do it. Tags are placed in and around text and images that you want to display on your web pages.

HTML has a large number of tags that a web designer can use to build web pages. As mentioned above, tags have a specific structure so that when the browser is reading an HTML page, it can distinguish the tags from the normal text.

Tags are typically words or abbreviations of words placed between angled brackets. So, for example - to make text bold, HTML has the 'bold' tag that looks like this:

<b> This text will be bolded </b>

Another commonly used tag is the paragraph tag:

<p>

This is a paragraph of text .

</p>

An HTML page is divided into two major sections:

1. The body

The body (<body>) section - this section contains all the information that appears on the actual web page when someone views it with their web browser. We are talking about the actual text , images, flash movies and so on that people will see. That of course means the tags used to format all this stuff is in there too ...

2. The head

The head (<head>) section which contains underlying information about the page that does not get displayed in the web page (except for the title of the page). It does however have an affect on how the web page is displayed.

You will notice that both the head and the body sections of a web site are marked in the HTML page with their respective tags: (<head> </head>) and (<body> </body>).

If the body tag creates the body of an HTML page, and the head tag creates the head of an HTML page, how do you create an HTML page itself? You guessed it, use the HTML tags:

<html> </html>

The 'mother of all tags' is the HTML (<html>) tag, and like all tags it must have a start tag (<html>) and an end tag (</html>). The difference between the start and end tags is the forward slash (/), but you already knew that .

Every web page MUST begin and end with the HTML tag, otherwise the web browser (programs like Internet Explorer) will not be able to display the page. You also have to have the head tags and the body tags. All the other tags are optional.

So the minimum tags an HTML page must have are, in order, as follows -

<html>

<head>

<title>Title of your page</title>

</head>

<body>

</body>

</html>

Writing a basic HTML page

Firstly, open up a text editor such as notepad, and then type in the following -

<html>

<head>

<title>My first ever page written in HTML !</title>

</head>

<body>

<h2>Entering HTML code is very easy to do </h2>

<p>

And it looks good .

</p>

</body>

</html>

Saving the file as an HTML document

Save the above document using Notepad's 'save as' function and name the file Mypage.html.

You can choose any name you like as long as you follow these 3 rules -

Web page names cannot have spaces in them - My page.html will NOT work.

The name has to end with (ie. have a file extension of) either .html or .htm. This tells your computer that this is a web page and that it should use a web browser to view it.

Don't use symbols like" $, %, ^, &" in your page names. Stick to standard letters and numbers.

Viewing your page

You should be able to now just double click on the page you have created or you can open it up with your web browser by going to its "File" menu, then select "Open file" and select your page.

You should now be able to see the page you just created !

Now that you have built your first web page, you can now move on to building your first web site.