MONCOM.net Contents...
An easy way to begin
The basic layout
The title and background
Text styles
Adding images
Uploading the webpage
Updating the webpage
Money from the webpage

Fundamentals of webpage design


An easy way to begin

Whether you are about to put together your first webpage or you are a professional web designer, the quickest and easiest way to begin a webpage is to start with the basic elements of a webpage that you cut and pasted from elsewhere. Most people who regularly build webpages have their own basic template to be used whenever they begin building a webpage. It shortcuts the time involved, allowing us to get straight down to putting content on our webpage. You can get Frontpage Express to create a basic webpage document for you.

[Note : You do not need to be connected to the Internet to build and test a webpage.]

Starting the Frontpage Express software, that can be found in the Internet Explorer directory situated in the Start/Progams menu, will automatically generate a blank webpage that is ready for you to add content. Below is a basic webpage that Frontpage Express creates when you start a new document. You can view this code in Frontpage Express by clicking 'HTML...' in the 'View' menu.

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>Untitled Normal Page</title>
</head>
<body bgcolor="#FFFFFF">
</body>
</html>


The basic layout

The first and last lines are required for a webpage. The <html> and </html> tags tell the browser (Internet Explorer, Netscape Navigator etc) that it is a webpage. The second and seventh lines are <head> and </head>. These are required also. This lines in between these tags describe overall formatting for the document, such as the title of the webpage, which is placed between the <title> and </title> tags. Any title you place here for your webpage will be displayed at the very top of the browser (eg. the blue titlebar) when people are viewing it.

The line <meta name="GENERATOR" content="Microsoft Frontpage Express 2.0"> can be removed, as Frontpage places this line there simply to show which software was used to produce the webpage. You'll be creating the page in Notepad anyway, so get rid of this line if you like.

Between the <body bgcolor="#FFFFFF"> and the </body> is where we add our webpage content such as pictures and text.

A quick and easy way to begin adding content to your page is to use Notepad. You may use Frontpage Express to completely create your webpage, but it will leave you with little understanding of the code behind the webpage. This can make changes to the webpage difficult in the future and adding content to you webpage, that Frontpage doesn't allow, would be very difficult. Building your page in Notepad gives you a 'feel' for what your webpage is really doing. Also, making a very minor change to your webpage is quicker using Notepad than Frontpage, and Frontpage may change your websites layout if you use it to edit a site that was made using different software.

[Note : Another reason you need to have an understanding of the source code that makes up your webpage is so that you can find things you like in other webpages on the Internet. For example, if you like the way some pages have coloured scollbars, you can go to one of those webpages and view the source (click 'Source..' in the view menu of your browser. If you know how the code works it will be easy to find the part that produces the coloured scrollbars and use the code to do the same in your own webpage. Learning from other people's code that is already on the web is a much faster way of learning that working through manuals.]

You can start Notepad by choosing it from the Accessories menu in the Start/Programs menu. Or, you can simply right-click your mouse on the desktop and choose 'New' and click on 'Text Document'. If you'd rather start your webpage in a folder of your choice, simply open it and right-click on a blank space within the folder and do the same as above.

Now you can copy the basic webpage code from Frontpage Express and paste it in Notepad. You can close Frontpage Express for now if you like. In Notepad, choose 'Save as...' in the 'File' menu. Make sure it is going to save the new document in a folder of your choice and then enter a filename for your new webpage. Do this in lowercase and without spaces, which will ensure there will be no problems when it is ready for use on the web when finished. At the end of the filename type .htm (eg. a file called firstwebpage should be entered as firstwebpage.htm). This will tell the browser etc that it is a webpage and not a simple text document. If the folder where you saved your webpage isn't already open, then open it now. You'll see you newly created webpage there as a HTML Document.

Double click your new file and it should start in your browser (Internet Explorer or Netscape Navigator). There should be a blank white page open in front of you now. This is a basic webpage. You can minimise this page to get it out of your way once you have seen that it is working OK. It's good to keep the blank webpage open in your tray at the bottom of the screen for use later. As you add content to the page in Notepad, you can check to see if it works at any time by click 'Save' in the 'File' menu to save any changes you have made and then opening your HTML document that is open in your browser again and clicking 'Refresh'. More about that in a moment.

You should now be ready to add your text, links to other webpages, and pictures to your webpage. Keeping your Notepad file and your webpage (in your browser) open together at the same time makes it easy for you to check if any changes you make to the Notepad file actually work in a webpage. Once you've added something new, simply save the Notepad file and then just go to the browser where your new webpage is open and click refresh to see what your changes have done. You can do this as often as you like while building your webpage. Remember, Notepad to enter the code for your webpage, and Internet Explorer (or Navigator) to view the fnal result of the code you've added or changed.

You are now ready to add content to the webpage.


The title and background

If you haven't added a title to the webpage you can do that now. Place a title for your page between the <title> and </title> tags. Remember, if you want to see how it changed your webpage, save your Notepad file and then go back to the browser window that your blank webpage is in and click 'Refresh'.

As we mentioned earlier, in the <head> and </head> is where information about the overall webpage is placed. Between the <body> and </body> tags is where we place out text and links to pictures etc. In the </body> tag you can also see another instruction that Frontpage Express placed there. The 'bgcolor="#FFFFFF"' command instructs the browser displaying your webpage to set the background to white. If you changed the line to 'bgcolor="#000000"' the background color would be black.

If you want a certain colour but you don't know which number to use, you can easily find a table listing on the Internet. Alternatively, you can use Frontpage Express again. Just as you used it to create the basic template for your webpage, use it now to give you the color number. Just click 'Background' in the 'Format' menu and set the colour to one you like. When done, choose the 'View' menu and click on HTML. You'll see the code it produced, and the number for your background colour in the '<body bgcolor="#number here">' line. Put the same number into your webpage source code in Notepad, and your background colour will be set to the one you wanted. Remember, just save the Notepad file and then click 'Refresh' in your browsers window to see your changes take effect.

Want an image for your background instead of a plain colour? Place the image you want to set as your background in the same folder as your webpage, change the <body ...> line to read <body background="filenameoftheimage">. For example, if the image you want to put as your webpage background is called 'myphoto.jpg' then the <body...> line should be <body background="myphoto.jpg">.


Text styles

You probably want a heading for your webpage that stands out.

Put a few blank lines between the <body...> and </body> tags by pressing the 'enter' key a couple of times with the cursor between them. This is where you'll put your webpage content.

[Remember : All the things you want displayed on your webpage should be placed between the <body ...> and the </body> tags.]

Type something like the following in the space you have made: <h1>Your Webpages Heading</h1>

Save the file, and then you can view the result by opening the browser (Internet Explorer or Netscape) window showing your webpage and clicking 'Refresh'.

[Note : If you can't see your heading, the text colour is probably set to the same color as your background, so you'll need to change either the background colour or the colour of the text.]

The background colour should be the colour you chose and your heading should be written at the top of the webpage in large text. Your webpage source back in Notepad should look something like this:

<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Your page title</title>
</head>

<body bgcolor="#FFFFFF">

<h1>Heading of your webpage</h1>

</body>
</html>

This code will give you a webpage with a white background and a default text colour, usually black.

Now type some content for your webpage underneath the <h1>heading</h1> tag. This can be a short message or a typed document thousands of lines long.

You might need to highlight some of your text in some way, such as make it bold or italic. On either side of the text you want to change use the following tags:

<b>this text will be bold</b>
<i>this text will be italic</i>
<u>and this will be underlined</u>

When you save the altered Notepad file and gone to have a look at it in your browser (clicking 'Refresh' to update the display of the webpage) the resulting line should be something like this:

this text will be bold this text will be italic and this will be underlined

Notice how all your text is crammed together without spaces? When you hit enter in Notepad, the resulting blank line/s are ignored by the browser. To force the browser to go to a new line you need to use the <br> (short for 'break') tag.

Changing the above lines to read like this...

<br>
<b>this text will be bold</b><br>
<i>this text will be italic</i><br>
<u>and this will be underlined</u>

Will give the following result :

this text will be bold
this text will be italic

and this will be underlined

The colour of your text can be changed using tags too. For example, adding the <font colour="#FF80FF"> and </font> tags on each end of one of the above lines, as shown below, would result in a changed text colour for the line.

<font color="#FF80FF"><b>this text will be bold and now purple</b></font><br>
<i>this text will be italic</i><br>
<u>and this will be underlined</u>

Would result in the line becoming purple like below:

this text will be bold and now purple
this text will be italic
and this will be underlined

There are many more tags that change text styles and format your documents in different ways. The quickest and easiest way to work out how you can use them yourself is too look at the code in other peoples webpages on the Internet. As mentioned earlier, while you have the webpage that uses the effect you would like to use yourself open in your browser, clicking on 'Source' in the 'View' menu will show you the code that makes up the webpage. Just look through and duplicate the code that does what you want in your own webpage. Simply cutting the code from the webpage and pasting it on your own is easiest.


Adding images

Time to put some colour into your webpage by adding a picture of some sort.

In any graphics software of your choice, create a picture of some kind. Save it as a .gif or a .jpg file in the same folder that holds your webpage.

Back in Notepad, where the source code for your webpage is, add the following line :

<img src="yourpicturesfilename">

You can place a few <br> tags before this line to put some space between your text and the picture if you like. You can centre the picture on the webpage too, by putting the <center> tag before the above line and </center> after it. The <center> and </center> tags will also centre text that is placed between them.

[Note : all tags and commands when you build a webpage use American spelling.]


Uploading the webpage

With what you have learned from this tutorial you should now be able to create a basic webpage on any topic you choose. When they are complete you need to upload them to your website so everyone can see them.

If you haven't already got some website space you need to get some. There are numerous free websites that will host your website. Sign up for one of these and you are ready to upload your page to the web. If you have any trouble finding one of these free hosting companies (do a search for 'free website hosting' in a search engine like Google) you can use www.brinkster.com, which is a very good site where you can host a personal website for free.

There are two ways you can upload your webpage and the images it uses. The first is using a webpage-based upload, such as the one used by brinkster.com. These are very easy to use, and you can upload your webpage and any files your webpage uses by clicking a few buttons. The method used to upload files will be explained at each web-hosting companies site.

The other method is to use an FTP (File Transfer Protocol) client such as CuteFTP. You need the name of the directory that you are putting your site in on the server, along with your sites username and password. The FTP software uses these to connect to the computer that you are putting your webpage on and upload the files. It's then a simple matter of using the FTP software (which you can find for free on the Internet) to select the files you want to upload.

After uploading your webpage (and the image files etc that you use in the page) you can check to see that it works by entering the address of your website in Internet Explorer or Netscape Navigator and see if it displays properly. If the page cannot be found it probably means you have entered the wrong Internet address for your site. You can get the address of your website from the company that hosts your site. It should be on your accounts screen somewhere. Also ensure your files were put in the right folder on the computer that is hosting your website if you have problems getting to the site with your browser.

Once the site is working on the Internet all you need do now is submit the address to search engines so that everyone can find your webpage. You can do this for free with many different webpage submission services on the Internet. A search using google.com for 'free submit' will give a list of plenty of these free services.


Updating the webpage

At a later date you will probably want to change your webpage or add to it in some way. A quick and easy way to do this is to open the webpage in your browser (by double-clicking the webpage file on your computer). Then just click 'Source' in the 'View' menu. The source code of your webpage will open in Notepad where you can edit and add to it. Any changes you make here will be added to your website as soon as you save the source code you have opened in Notepad. You can click 'Refresh' in your browser after you have saved the changes to view the result.


Making money from the webpage

Once your website has been built and is available online you may want to quickly attract some visitors. To do this very quickly, you could sign up for a merchant account with Clixgalore.

To learn more about Clixgalore and to sign up, click here.

And if you would like to earn money with your website you should click here. Click on the Affiliates/Publishers menu when you get there and once you've signed up you'll be able to put their banners on your site and earn money when people click on them to go to a merchants website. You'll sometimes be paid just for the click or with other banners you'll earn a percentage of the money the visitor spends on that website.





The information above will give you a basic understanding of the underlying code behind a basic webpage. If you want to learn more there are more tutorials and heaps of reference material at
www.w3schools.com.





Sign up for PayPal and start accepting credit card payments instantly.