A web site is designed in the same way that you design any other document. Before starting any creating, you should decide what form the web site will take, what you want to say, what graphics you wish to use to illustrate it, what the links will be to other pages which you have written, or to any other pages on the WWWeb.It is probably a good idea to start of with the good old pencil and paper to sketch out roughly what you intend to do. After that you have to create the HTML document, the easy way or the slightly more difficult, but more satisfying, way.
1.The easy way. Use a WYSIWYG (pronounced wizzywig - What You See Is What You Get) editor. There are many on the market today and some can be found on the cover disks of some Computer magazines, in addition, there are free applications which can be downloaded from the web. Some require no knowledge of HTML coding at all, (HTML = HyperText Markup Language) but these can generate a lot of extraneous coding as all eventualities have to be covered and your web page can become quite cluttered up. A search on the web for "HTML" should find them for you.
The obvious advantage of this is that you can fairly quickly produce a finished result without having to learn a lot about the details of HTML.
2. The more difficult (slightly) but to my mind the better way is to use Wordpad or Notepad and save your work as filename.html. This will put it in the form of a web page. This method does require a basic knowledge of HTML which can be got from a good book. I use 'HTML in Easy Steps'. Read some of it to get the general idea of HTML and then use it as a reference book. (I refer to mine all the time).
Actually I find that a combination of both suit me best. It is all a matter of personal choice, but I would recommend learning a little about HTML (it is not difficult). I use the Web Editor Arachnophilia which can be downloaded from their web site, free, at : -
Using it, your web page can be started from scratch, it is not so complex as some of the modern editors and does allow you to do your own thing if you want to. A big advantage is that it saves a lot of typing by inserting HTML tags for you.
HTML is not a programming language, but it does use things called tags to tell the computer what to do with your text, pictures etc., which are what a web page consists of. The two tags which all web pages must have are <html> as the very first piece of information and </html> as the last. You will immediately recognise that a tag is an instruction bounded by < and >the closing tag always has a / before the instruction. Tags are not case dependent; they can be in capitals, lowercase or even a mixture of both. It is recommended using lower case to comply with the developments in HTML. Tags nearly always come in pairs, with very few exceptions. An example of an elementary web page is as follows: -
<html>
<head>
<! -- In here goes information about the web page. Its name, who created it etc., etc. -- >
<title>(file1.html) A simple web page</title>
</head>
<body>
<!-- This is where everything that is to appear on your page goes -->
<h1>A Simple Web Page</h1>
<h2>Basic Structure</h2>
<p> <i>This</i> page illustrates the <b>basic</b> structure of an HTML document.</p>
</body>
</html>
(The tags <!-- and --> enclose comments, which do not appear on the web page.)
Copy and Paste above into Notepad and Save As -- file1.html -- (Make sure the 'Save As Type' box shows All files (*.*)
Make sure you remember where you Saved file1. I would suggest that, for the purpose of this exercise, you create a special folder to contain all your experimental work.
If you are reading this from a printout you will require to type everything from <HTML> to </HTML> above, inclusive. Make sure there are no typos because the least little error will cause the thing to malfunction. I make no apologies for repeating Make Sure for the fourth time.
When you find file1, double click on it and your default browser, (Internet Explorer or Netscape), will open it and something like this will appear: -
Basic Structure
This page illustrates the basic structure of an HTML document.
Have a look at the tags, by clicking View -- Page Source; you will see how they are 'nested', and what they have done.
The information between the <head> and </head> tags are not seen. This part contains information about the web page, who made it, etc. and can contain keywords for the use of Search Engines.
The actual page is contained between the <body> and </body> tags.
A summary of the tags used in Part 1 above.
<html> </html> - are used to tell your web browser to treat the script as an HTML file. Most web browsers do this by default anyway, but it is a good idea to use them.
<head> </head> - Define the "head" section of the document, which contains hidden elements and the page title.
<title> </title> - Tell the browser that this is the title of your page.
<body> </body> - Define the 'body' section of the document, which contains the main content of the page.
<h1></h1> and <h2></h2> - tell the browser what size the text should be. The h tag ranges in value from 1 to 6. 1 being the largest and 6 the smallest.
<p> </p> - Tell the browser to finish the current piece of text and create a blank line before continuing, in fact, create a new paragraph. The <p> tag can be used on its own, but modern web page writing almost demands that a closing </p> tag should always be inserted.
<i> </i> - make text appear in italics.
Your first web page looks a bit boring, doesn't it? A white background with black lettering! You can ring the changes with the colour or even the 'texture' of the background and of course the colour and size of the text can be varied.
This can be done in the <body> tag, which normally follows the </head> tag.
When I say 'in the <body> tag', I mean just that. Some tags can contain some optional extras or attributes, which allow for setting up things which affect the whole page.
For example: -
<body bgcolor="blue" text="white" link="green">
(This is a <body> tag with attributes.)
bgcolor is an attribute and fills the background with the colour you define. Colours can be expressed in two ways, either by name, as above or by a hexadecimal number. (You can read up about that in your book).
NOTE: The American spelling of color in bgcolor.
text, of course, sets the colour of the text in all parts of the page. Be careful not to make the background and text colours too similar, otherwise the print will not be seen very well.
A reminder about tags at this point. Tags nearly always go in pairs known as containers, an opening tag <body> and a closing tag </body>. In the case of the closing </body> tag, it comes at the very end of the page, just before the </html> tag.
The size and colour of text can be varied throughout the page by overriding that contained in the <body> tag, using the <font> tag containing attributes concerning the size and colour and giving the text its position on the page. e.g.
<font size=+1 color="red"><center>This is a heading</center></font>
That piece of HTML would produce: -
This is a heading
The size is larger than the standard, coloured red and positioned in the centre of the page.
There are a further two tags I will mention here <br> and <p>(mentioned in Part 1). These two are exceptions to the rule, they don't need closing tags, but as previously mentioned, the p tag should always be closed
Usually, by default, a large piece of text will appear in lines of standard length, without any formatting. If a new line is especially wanted at the end of some sentence, insert the tag <br> after the full stop and that will force a new line, no matter the position on the line of the last word of the sentence. In the same way a <p> tag will start a new paragraph, with a space between the lines.
One more practical exercise to allow you to make a web page just slightly more interesting with a bit of colour in it. Do the same with it as you did for file1 and Save it as file2.
<html>
<head>
<title>(file2.html) A simple web page with colour</title>
</head>
<body bgcolor="blue" text="white" link="green" ALINK="lightgreen" vlink="darkgreen">
<h1>
<font color="red"><center>This is a heading. (coloured red, size h1 and centered)</center></font></h1>
This is the same in normal size and white in colour. This is not centered<br>
<center><h1>A Simple Web Page</h1> </center>
<center> <h2>Basic Structure</h2> </center>
<p><i >This</i> page illustrates the <b>basic</b> structure
of an HTML document.<br> I have forced a new line here, using the br tag.
</p>
The p tag starts a new paragraph, so there is a space between the last line and this one.
</body>
</html>
bgsound="URL" - the address this time should be that of a sound sample or midi file.
bgcolor="colourname" --- The "colourname", for the background should be the actual name of a colour, white, blue,red,etc.
text="colourname" - 16 different colour names can be used - see below.
link="colourname" - defines colour of hyperlinks.
alink="colourname" - defines colour of hyperlinks when they are being 'clicked'.
vlink="colourname" - defines colour of hyperlinks after they have been followed.
The 16 colours which can be named are: -
black- navy - blue - green - teal - lime - aqua - maroon - purple - olive - gray - silver - red - fuschia - yellow -white.
I feel that is sufficient information to get you started. You will learn far more by referring to a good HTML book or an Editor like Arachnophilia to help you build a wonderful web site!
Just one word of warning. Don't try to be too ambitious and include lots of graphics and a lot of fancy stuff. All that tends to slow down the downloading of a web page. You have probably experienced the impatience of waiting on a slow web page downloading.
A good idea is to look at the source coding of an existing web page and compare it with the actual page itself. You can find the source coding in your browser (Internet Explorer or Netscape) by opening the View menu and select Source. You can print this and you will be able to see how the HTML coding relates to the actual web page. Or you can use Arachnophilia to do this.
You may also get some ideas for your own web page by doing this.
Despite all the fancy 'whizzy' stuff you see on web pages nowadays, text is still the backbone of a page. A good page layout often depends on how the text is formatted and it is probably a good thing to spend a little time on how you layout yout text, concentrating on the ones that are most used..
The <font> </font> tags will apply to any piece of text in between them, and override any instruction or attribute contained in the <body> tag.
<font> by itself will do nothing, it requires attributes and they are: -
face="fontname, fontname2, fontname3" - used to define the typeface that the selected text appears in. You can specify multiple face names, separated by a comma.
e.g.face="Arial, tims new roman". Your browser will look for the first one, if not there, the next one and so on. If it doesn't find any it will revert to the default of your presets.
color="colourname or RGB value in hex" - used to define the colour of text. The actual name of the colour can be used (see Part 2) or the hex value.(see NOTE below)
size="1-7" - defines the size of the font (on a scale from 1 to 7) relative to the size defined in your browser. You should experiment with the numbers to see what they do.
In addition heading tags <H1> through to <H7> with the appropriate closing tags, can be used to define the size of a heading.
NOTE:- instead of using a colour name, the RGB (Red, Green, Blue) value can be used in the form - color="#ffffff". There will be a table in most manuals showing colours and their RGB value. There are 216 different values, from Black = 000000 to White = ffffff
In this section I have assumed that you have constructed your page to your satisfaction and now want to upload it for the whole wide world to see.
First of you have to find someone who will 'host' and support your web site for you.
Most ISPs allocate space for the web, and you should contact the webmaster@yourISP for information about the amount, in Megabytes, they will give you a host name a User ID, a password, an initial Remote Folder (directory) (probably www) and your initial Local Folder, which should be the folder on your HD containing all the files your web page uses.
For instance, my ISP, Zetnet Ltd. gave me 50 Mb of space and a name. Mine was:-
http://www.users.zetnet.co.uk/johnc/
The first bit, up to uk/ was a must, I chose the johnc , to make my address unique. By the way a web address is called a Universal Resource Locator or URL for short. You will also be required to have a password, an ID (a name to log in with) and the Host URL. All this is required to enable you to upload your page.
If you want a nice short URL (address), like http://www.mychoice.com then you should employ a professional who will host, support, give you space and a name of your choice -- all for a fee. You can find out about such people in any computer magazine.
Once you have all this information, you will need an FTP Client (File Transfer Protocol) which you use to upload your web page. A good one, which is free to non-commercial users, is WS_FTP LE. This can be downloaded from their web site at: -
Page top.
Home Page --
Fairlie--
St Monans--
My Story Chapter 1--
Links Page