HTML coding


Neil Jones-Rodway concludes this series by building a website from the ground up...


[Screenshot]


Time to put into practice everything we've learnt in the previous instalments. In general the techniques I've used here are relevant to many sites - I just happen to have an older brother to annoy!

First you have to decide how to structure your site. Most (if not all) sites have an obvious front page, which provides a jumping off point to navigate the rest of the site. It makes sense to use this page to introduce the site then link to as many sub-pages needed from there. I've set up some broad classifications of ways to annoy older brothers, with each subpage representing one of these classifications.

Front pages are typically named index.html. When you request a URL which points to a directory instead of a specific file, the web server software automatically looks for index.html (and depending on your ISP other variants such as index.htm, welcome.html may also be recognised) which makes URLs somewhat easier to remember. For example, when you access... http://www.flinny.demon.co.uk/
...you actually get the file:
http://www.flinny.demon.co.uk/index.html

Front Page

Start with the empty document template, and insert the title for the page. The <BODY...> tag needs to include the background image (see the boxout for tips on making background images) we'll be using, and specify colours for the text and the links. That sets up the empty page ready to fill in.

The layout for this page is quite straightforward. A title graphic at the top and some introductory text underneath. Beneath that we can add some columns representing the classifications, and finally a contact address at the bottom. I've enclosed all this in a <CENTER>...</CENTER> tags so everything is horizontally centred on the screen.

Let's start with the image - a title graphic created and saved as a transparent GIF. Some people prefer to store all the files in the same directory, others prefer to use sub-directories. Using subdirectories is neater but requires an understanding of unix relative path handling and can be more awkward to update online depending on the software used. For example an image called "title.gif" in a subdirectory called "images" is accessed using the relative path "images/title.gif". Note a forward slash is used instead of the standard Atari file system backslash. If this all sounds too complicated simply store everything in a single folder and forget I mentioned it!
As the image is also the title graphic we can specify the title of the page as a text alternative for anyone reading the pages in text only mode.

The next task is to set up the columns. HTML doesn't support DTP style multi-column layouts and instead emulates these using the flexible <TABLE>...</TABLE> tag. This works well but does require planning because text cannot flow automatically between columns and everything has to be defined manually.
We need three columns, so we need to create a table with five cells (three for the data and two empty "gutters" to separate the columns). The widths of the cells and the gutters are specified using the WIDTH attribute of the <TD...> tag, and it's also sensible to specify the overall WIDTH for the table - which is simply the total of the individual cell widths. In our example the table is set 600 pixels wide, made up of cells 195-10-190-10-195 wide respectively.
The contents for each text cell is straightforward. An image at the top denoting the classification, followed by a short description. Each image is a link to the subpage of that classification, which is achieved by nesting the <IMG...> tag inside the opening and closing link tags. I've aligned and centred all the cells in the table to the top of each cell using ALIGN=CENTER VALIGN=TOP inside the table row <TR>...</TR> tag.
If you don't feel able to create your own tables manually there are various "wizards" starting to appear which can create these for you interactively.

The final item to add to the index page is a contact address for people to send comments to - a simple "mailto" link is all that's needed here.

Subpages

The subpages for this site are all identical in layout just differing in content. The basic page includes a header, three main sections which utilise different techniques, tips, and stories.

Each header contains a small title graphic followed by an introduction. following the introduction will be bookmark links to the different sections, which are useful when creating lengthy pages as they help minimise manual scrolling.
The header is created using a small table, with the title graphic in the first cell, and the text in the second. The title graphic is made up from two separate graphics, a reduced version of the main title graphic with the classification graphic underneath, both recycled from the front page. Re-using graphics makes sense because they'll already be in the readers local cache, saving download time and speeding up page display.

Each section has a heading, followed by an unordered list containing the individual topics relating to the site. Each topic can be entered as a separate list item, which offers a clear layout and is easy to maintain. The heading is enclosed in a bookmark anchor, which is referenced by the links at the top of the page.
Each section is separated by a horizontal ruler and finally, at the bottom of the page, I've added another email link for people to send in contributions.

This completes the site framework. All that's left to do add in the stories, and upload the pages to a web server. The pages can be updated from time to time to include other peoples stories and tips added onto the end of the appropriate lists. If you'd like to view the final pages they're on the Reader Disk/CD-ROM and online at URL:

http://www.users.zetnet.co.uk/arnel/lbh/


[Screenshot]
Imagecopy is ideal for finding the dimensions of an image


[Screenshot]


CREATING TILEABLE IMAGES


Tileable images are commonly used as background images and there are various techniques to make sure the image tiles seamlessly. The simplest technique works well for most images:
  • Create your image (say 50x50 pixels)
  • Paste a copy of this image adjacent to the original
  • Rework the join so it blends seamlessly
  • Create a second 50x50 pixel image which includes the seamless join
  • Repeat this procedure vertically to create the final seamless image




[Home] [Info] [Back] [Next] [On Disk/CD-ROM] Little Brother's example webpages