Able-Towers Support - Webpage Creation

Basic Coding Sound Tables Web Counters Passwords CGI & Perl

Able-Towers provide their clients with 10-15 Megabytes of space (depending on the type of shell account they have). Not forgetting that this space includes FTP, eggdrop and e-mail, there is still more than plenty of space to build your own website. If you need help uploading your webpages to Able-Towers, visit the File Transfer Support.

First off, we recommend you download a program called Arachnophilia. Many people prefer to use Windows Notepad or Wordpad to code their HTML pages, but Arachnophilia has many advantages over both of these applications.

Colour coding for all HTML elements and attributes
Pop down menus to help organise your file
Help sections on almost every HTML element
Quick, easy reference to those commands you always forget
Multiple files open in one program
Advanced search and replace

Basic Coding...

HTML is a coding language that is very easy to learn and almost anybody can do it. There are certain document structure elements that must be included in an HTML file. These elements are required within an HTML document for it to conform to HTML standards. They represent the only HTML elements which are explicitly required for a document to conform to the standard. The essential document structure elements are:

<HTML> ... </HTML>
<HEAD> ... </HEAD>
<BODY> ... </BODY>

The <HTML> element identifies the document as containing HTML elements. It serves to surround all of the remaining text, including all other elements. That is, the document should be constructed thus:

<HTML>
Here is all the rest of the document, including any elements.
</HTML>

The <HTML> element is not visible upon HTML user agent rendering and can contain only the <HEAD> and <BODY> elements.

The head of an HTML document is an unordered collection of information about the document. It requires the <TITLE> element between <HEAD> and </HEAD> elements:

<HEAD>
<TITLE>Title of Webpage Here</TITLE>
</HEAD>

The <HEAD> and </HEAD> elements do not directly affect the look of the document when rendered. The following elements are related to the head element. They can be used to provide important information to the browser.

<BASE> - Allows base address of HTML document to be specified
<ISINDEX> - Allows keyword searching of the document
<LINK> - Indicate relationships between documents
<NEXTID> - Creates unique document identifiers
<TITLE> - Specifies the title of the document
<META> - Specifies document information useable by server/clients.
<STYLE> - For the inclusion of Style Sheet information.

The body of a HTML document contains all the text and images that make up the page, together with all the HTML elements that provide the control/formatting of the page (unless the document uses a style sheet to control presentation). The format is:

<BODY>
The document included here
</BODY>

It is possible to control the document colour scheme and background by specifying certain attributes in the <BODY ...> declaration. However, it should be noted that most browsers provide the user with a means to over-ride colour schemes and prevent images from loading.

The fastest way to learn webpage design is to look at the coding for other webpages. When you visit a website you like, click on the view menu of your web browser, and select "Source" or "Document Source". If you are a beginner, or still haven't come to grips with all the commands, then a great way to learn HTML coding is to read the HTML Library help file. This will tell you everything that we have just explained, but in greater detail, and you will learn more about inserting attributes into HTML elements.

Sound...

One way to play a background sound file in your file is to insert the BGSOUND attribute in the BODY element. Example:

<BODY BGSOUND="path/to/sound/file.mid">

Or you can make use of the <BGSOUND> element, e.g:

<BGSOUND SRC="path/to/sound/file.mid>

However, the BGSOUND element/attribute is only a feature of Internet Explorer, and will not work with Netscape Navigator or some other web browsers. A better way is to use the <EMBED> element to insert your sound file into the document. This will work if the user has a plugin for midi or wav files. This is how it works:

<EMBED SRC="path/to/sound/file.mid" AUTOSTART="true" LOOP="false">

You can also add a little control on the webpage. Use the HEIGHT="your value" and WIDTH="your value" attributes to alter the size of the controls, and set the volume by using the VOLUME="your value" attribute. You can also set the control bar to a mini-console with the CONTROLS="smallconsole" attribute. If you want the controls to be hidden, use HIDDEN="true".

Tables...

Tables are a great way of arranging text and images on webpages. Tables are also good for presentation of statistics and information. Most tables are invisible on webpages, so you cannot see that a table has been used unless you view the document source. The BORDER attribute determines whether a table can be seen or not. BORDER="0" will make the table invisible, and values onwards make the border thicker.

The TR attribute represents a table row, and the TD attribute represents a table column. So the code for a simple table would be something like:

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1">
<TR>
<TD>HEADER 1</TD>
<TD>HEADER 2</TD>
</TR>
<TR>
<TD>TEXT 1</TD>
<TD>TEXT 2</TD>
</TR>
<TABLE>

You can also create effective tables such as timetables:

	Monday	Tuesday	Wednesday	Thursday	Friday
09:30	Maths	French	Science	Geography	German
11:00	English	History	German	Spanish	CDT
13:00	French	CDT	Cookery	Child Development	Information Technology
14:20	History	Geography	Games	Business Studies	Games

You can even use the COLSPAN attribute to make a row span over more than one column, and the ROWSPAN attribute to make a column span over more than one row. For example:

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1">
<TR>
<TD>HEADER 1</TD>
<TD>HEADER 2</TD>
<TD ROWSPAN="2">CONNECTED CELLS</TD>
</TR>
<TR>
<TD>TEXT</TD>
</TR>
<TABLE>

Or take a look at that timetable again. Say there are some double periods, the rows need to be merged:

	Monday	Tuesday	Wednesday	Thursday	Friday
9:30	Maths	French	Science	Geography	German
11:00	English	History	German	Geography	CDT
13:00	French	CDT	Cookery	Child Development	Games
14:20	History	Geography	Cookery	Business Studies	Games

Web Counters...

You can find various sites on the web offering free web counters (these are little graphics that tell you how many people have visited the site). However, Able-Towers offer their own hit counter service for all their users. Here is the code that you must put on your webpage:

<IMG SRC="http://www.Able-Towers.com/cgi-bin/Count.cgi?df=userid.dat&dd=C&negate=Y&ft=0&md=5">

Copy & paste this, then replace 'userid.dat' for your userid, and your counter will be displayed. Note this will only work if you have an account with Able-Towers because the CGI script will not allow any other host to access the counter.

Passwords...

Restricting access to files and folders is easy on a UNIX based operating system. But you can also require a password login to a certain directory on your shell account. For example, say you were building a website for your company and you wanted certain sections of the site to only be accessed by company members. All you have to do is follow these simple instructions.

Change to your WWW dir (cd www), and create the directory which you would like to require a password, then change to this new dir.

Type 'pico .htaccess' and press return. This will open up the UNIX text editor, and create a file called .htaccess if it doesn't already exist.

Type in the following information:

AuthUserFile /home/userid/www/login-required-dir/passwd
AuthName Password Required
AuthType Basic
<LIMIT GET POST>
Require valid-user
</LIMIT>

Your home directory might me /home/1/userid if you are on a different machine. To find out the path to your home directory, type '$HOME' in your shell.

Replace 'userid' with your Able-Towers userid, 'login-required-dir' with the directory that you have created, and 'Password Required' with the message that you want displayed when the web browser asks for a password. For example:

AuthUserFile /home/smith/www/admin/passwd
AuthName Admin Login
AuthType Basic
<LIMIT GET POST>
Require valid-user
</LIMIT>

Finally you have to add the usernames and passwords to a file called passwd. In the directory that you created, type the following:

htpasswd -c passwd username

Replace 'username' with the username you want to add, and it will prompt for you to type in a password for that user. That should be it.

If you want to add another username and password, just type the same as above, but remove the -c option (which is used in the first place to create the password file).

CGI & Perl...

There are many CGI & Perl script archives on the web that you can use to download your own scripts, but be warned, they're very tricky to set up. Here is a list of various sites that we recommend:

Matt's Script Archive

Never edit a perl or CGI script on your windows based PC because linux will not be able to understand the linefeeding properly. Always use a UNIX based editor like pico. If you plan to use CGI or Perl scripts, it is also useful to know about creating forms in your HTML document.