Creating A Website, Part 3

Tips & Tricks

Published in SOS September 1999
Bookmark and Share

Technique : Multimedia

Having dealt with the basics of organising your site and displaying text and graphics, Mike Simmons introduces some techniques for controlling how it all looks. This is the third article in a six-part series. Read Part 1, Part 2, Part 4, Part 5 and Part 6.

So far in this series, we've looked at the very basics of HTML -- how to put text and graphics on to a page and how to create links. I've also suggested that unless you take a very purist approach to your coding, it's likely that sooner or later you'll find yourself investing in a piece of authoring software. No such software is foolproof, however. Things do go wrong and, when they do, an understanding of the code that's been generated can be invaluable. For this reason I shall continue to work from the assumption that you'll be doing all the coding yourself, even if you're not -- trust me, one day you'll be really grateful! This month I want to consider the ways in which you can make those components that we've already talked about look more attractive, and explore how you can exert some control over the way in which they are displayed on the screen.

You will have noticed by now that however many times you hit the space bar when you're entering text in an HTML page, those spaces don't seem to appear when you open up the page in a browser. The same is true of carriage returns: your document may appear to be neatly laid out into paragraphs when you look at it in your text editor or word processor, but when you view it in a web browser it just seems to be one huge mass of text. This would seem to have pretty severe implications but, luckily, help is at hand.

Have a look at Example 1 on page 46, and see how the HTML shown there appears when it's opened in a browser in Example 1a. So what's happening? The <P> and </P> tags identify each paragraph, and the <BR> tag (which doesn't need a closer) forces a new line without creating a paragraph. And that '&nbsp?' Each one of those indents the line from the left by one space. An alternative to '&nbsp' is the <blockquote> tag, which will indent a line, or an entire block of text, but needs a closing </blockquote> to end it. You can have several nested <blockquote> tags if you want to indent something even further, but you'll need an equal number of </blockquote> tags at the end of the text. Pretty nifty you may think, but there's more to come!

Colour

Let's think about adding a touch of colour to your site. Write yourself a tiny piece of HTML as shown in Example 2 on page 46, save it as a text file, and view it in your browser. Yes, that's about as dull as it can get. Now try replacing that middle section with this...

<p> <font color="#FF0000">Dull Text Page</font> </p>

  Example 1  
  <html>

<body> <p>first paragraph first paragraph first paragraph first paragraph first paragraph first paragraph first paragraph first paragraph</p>

<p>second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph second paragraph</p>

<p>here is a pair of lines<br>without a paragraph break between them</p>

<p>&nbsp &nbsp &nbsp &nbsp and here is some indented text</p> </body> </html>

Example 2

<html> <body> <p> Dull Text Page </p> </body> </html>

Example 3

<html>

<body bgcolor="#0000FF"> <p> <font color="#FF0000">Dull Text Page </font> </p> </body> </html>

 
     
...and, on re-saving in your word processor and re-loading or refreshing the page in your browser, you've got red text!

Now try this...

<p> <font color="#FF0000">Dull <font color="#00FF00">Text</font> <font color="#FF00FF">Page</font> </font> <font> </p>

...and you may wonder whether you're slipping back into the '60s. The point, though, is that any piece of text can be any colour you want it to be -- you just need to know the correct hex code to enter between the <font color> tags.

Now try entering the code in Example 3 (right), and you'll see that in the same way that you can control the colour of the text, you can also control the colour of the background. By the careful manipulation of text and page colours it's quite possible to ensure that absolutely nobody will be able to read your site at all, or at least not without suffering from extreme nausea! Those of us old enough to remember Oz magazine may experience some small twinges of nostalgia here but, if the purpose of your site is to communicate, then it's worth considering whether the colours you choose help or hinder this process. As I've said before, it's a good idea to visit other people's sites and see what works and what doesn't.

There is a huge number of potential colours that you can use, and I've made a note of just a few of them later in this article (see Colouring Box), but perhaps this is the point at which we should consider the whole issue of colour and the Internet. The majority of computers that are likely to gain access to your site are going to be either Apple Macs or PCs. I already indicated back in part one of this series that for the sake of faster downloads it's best to restrict the number of colours you use on your site to 256 -- but what I didn't tell you is that although both Macs and PCs both recognise 256 colours, they don't recognise the same 256 colours. There are, in fact, only 216 that are common to both palettes. Depending on the graphics package you use, you may find yourself being offered a 'web-safe' palette to work with -- if so, use it wherever possible. If you need to work with a colour that isn't one of the lucky 216, your site visitor's browser can either display the colour by 'dithering' (mixing two other colours together), or by substituting some other colour for the one you've chosen. The latter is obviously a fairly unattractive prospect, but dithering is not without its problems either -- what may look fine on your machine may look messy, and take a little longer to download on someone else's. This is not to suggest that you should consider yourself to be restricted to the 216 (somewhat lurid) 'web safe' colours, but that you should simply remain aware of the possible consequences or straying too far away from them. As always, take nothing for granted!

  Testing  
  As soon as you start to make the transition between learning HTML and actually creating your own site, I can't stress too strongly the importance of testing your work. At the very least, it is essential that you ensure that your site will work with both of the two most popular browsers, Microsoft's Internet Explorer and Netscape Navigator. This means having both applications on your machine and switching between them as you preview your site. Even this isn't always enough. I recently created a web site for a university department and, having installed it on the local server, walked from room to room viewing it on different people's machines. I wasn't expecting total uniformity, because I knew that various staff members had configured their preference pages to their own tastes, but what I hadn't bargained for was the way in which some machines would tolerate any anomalies in my coding while others wouldn't. An odd extra </tr> tag which had been ignored by my own machine and browser caused absolute havoc on someone else's. The obvious lesson is to be scrupulous in your coding -- and check that everything's OK on every machine you bump into.

When your site is up and running, you may get the odd email from someone having difficulty with some part of it. Don't ignore them just because everything looks perfectly fine on your own machine -- carefully read what they say and then go back to the HTML code to see if you can identify anything that would cause the fault they describe. If one person bothers to contact you it's fair to assume that there are many more who don't, and if you want to attract as many people as possible to your site it's unlikely that you're going to do it with dodgy HTML!

 

No Grouting Required

One technique that can help to add a professional and individual look to a site is something called 'tiling'. This is a process whereby a small image, either in GIF or JPEG format, is repeated again and again throughout a page to act as a background to the text. You can do this very easily, simply by replacing the <body> tag in your HTML document with <body background="filename">.

As always with generic web graphics, you have a choice between designing your own, or using ones that someone else has made. Vast quantities of ready-made files for background tiles, arrows, buttons, spacers, headers and the like are widely available for free download. I've included a list of web addresses where you can find ready-made files optimised for the web (see Background box) but, as long as you remember a few basic rules, it's an extraordinarily easy piece of work to do yourself -- if you follow a few basic rules.

* Firstly, remember that the browser will still have to download the file to display it, so (as always with web graphics) think in terms of small filesizes, perhaps optimised by using a small number of colours, small dimensions or a high degree of file compression.

* Secondly, you need to tell the browser where to find the file: giving the filename with no path name will only

  Example 4  
  <html>

<blockquote> <p><font size="5">Dear Father Christmas</font></p>

</blockquote> <p>Here is a list of things I would <b>really</b> like -</p>

<ul> <li>A new synth</li>

<li>A copy of Flash</li>

<li>A nice holiday</li> </ul>

<p>This is the order in which I'd like to have them -</p>

<ol> <li>A nice holiday</li>

<li>A copy of Flash</li>

<li>A new synth</li> </ol> </body> </html>

 

Unordered lists (right, top) appear with bullet points, while the items in ordered lists are automatically numbered.

 
work if the image file is in the same folder or directory as the page on which it was displayed. If the image was in a folder called 'graphics', for example, you'd need <body background="graphics/filename"> instead.

* Finally, make absolutely sure that the GIF or JPEG extender is on that filename. I've forgotten to do this several times, and while my browser seems quite happy to display the file straight from the hard drive, it's a very different story once the site is up on the server! In case you were wondering -- and I hope you were -- the closing tag for <body background> is simply </body>, as it is for the normal <body> tag.

Size

So far, all the text that has appeared in our examples has been the same size -- but this needn't be the case. Load up Example 2 again, but replace the third line with this:

<p> <font size="7">Dull Text Page</font> </p>

You'll see that the text gets bigger. Try replacing the "7" with "1", and all numbers in between, and you'll see the degree of control you have over how your text appears. The default size, by the way, is 3, so if that's the size you want then you don't need to bother specifying a size.

Given that you can now produce text large enough to make a heading, you may be wondering how you can coax it into sitting in the centre of a line rather than sticking to the left margin. The answer is to add a component to the <P> paragraph tag:

<p align="center">Dull Text Page</p>

I'll leave you to work out what the align="right" and align="left" tags do! In each of these examples I've tended to demonstrate one tag at a time, but this is only for the sake of clarity. It's perfectly possible, and usual, to combine as many tags as you need to get the desired result -- just make sure that you don't forget any of the closing tags while you're doing this. Before we go any further, see if you can work out what this would look like before viewing it in your browser:

<p align="center"><b><font size="6" color="#FF0000">Dull Text Page</font></b></p>

Yes, large red text, centred and emboldened. Did you get it right?

Just to confuse things a little, there is also a range of <H> tags, ranging from 1 (the largest) to 6 (the smallest) which are specifically designed for headings. The <H> tag works like the <P> tag, creating a break between the previous paragraph and the line on which your header is displayed: you can also use components such as 'align' in the same way. It's something of an anomaly that the smallest <H6> is a great deal smaller than the largest standard font size, but you may find it a useful refinement. Thus, the following would display a centred header on a new line, in the largest size of text:

<H1 align="center">Dull Text Page</H1>

Lists

Headers and paragraphs are all very well, but often we want to display information in a more structured fashion. Fortunately, the resources are available within HTML to do so. Have a look at the text in Example 4 on page 48, type it in and see how it looks in a browser. Some of the code will be fairly familiar by now, but some of it less so. You'll see I've used <blockquote> for the heading, and made it a little larger with the <font size="5"> tag. The next line is treated as a paragraph -- in that it's on a line on its own -- and I've used the <b> tag to embolden the word 'really'.

After this, you'll see the <ul> tag. What this does is tell the browser to expect an 'unordered list' -- a series of individual text items which the browser will display on separate lines, each preceded by a bullet point. Following the <ul> declaration, each item in the list is held between <li> and </li

  Example 5  
  <table> <tr> <td>text</td> <td>more text</td> <td>yet more</td> </tr> <tr> <td>even more</td> <td>much more</td> <td>no more</td> </tr> </table>  
> tags. The next list is almost exactly the same, except that it's an 'ordered' list, which is indicated by the <ol> tags. These work in exactly the same way, except that the browser automatically numbers each item rather than using bullet points. Would you like Roman Numerals instead of Arabic? No problem, just use <ol type="i"> instead of <ol>. For a lettered list, you could try <ol type="a">. You want different kinds of bullets? Try <ul type = "square"> or <ul type="circle"> -- it must be magic!

You may have seen bullets on other people's sites that were even more interesting -- shiny spheres, flashing lights, dancing ducks, and the like. You could have those too, if you want to, but you won't create them with HTML; these are simply small graphics called up with that <IMG SRC="filename"> tag. Sometimes this can be worth it for the effect, but just remember to keep those files as small as you possibly can. Of course, if you're using the same graphic as a bullet point in several places, you can simply refer to the same file each time -- there's nothing to stop you displaying one graphic more than once on a page.

  Example 6  
  <table width="75%" border="3" bgcolor="#CCCCFF" cellpadding="5" cellspacing="4" bordercolor="#0000FF">

<tr>

<td colspan="2" bgcolor="#FF0033"> <div align="center">text</div> </td> <td width="60%">more text</td> </tr>

<tr>

<td rowspan="2" width="15%" valign="top"><font color="#FF0033">

<img src="thelen.JPG" width="65" height="92"></font>

</td>

<td width="25%"> much more</td>

<td width="60%" bgcolor="#0000FF"><font color="#FFF423"> even more</font></td>

</tr>

<tr> <td width="25%" valign="top">yet more</td> <td width="60%" valign="bottom"> <div align="right">no more</div> </td>

</tr> </table>

 

To add a little variety to your page, type the <hr> tag after the first list (ie. after that </ul> tag) and, as if by magic, you'll see a horizontal line stretching across the page. Typing <hr width="75%"> would produce a line which would always be 75 percent of the width of the browser page, while <hr width="75"> would produce a line 75 pixels long regardless of the page width.

This actually introduces an important concept in HTML: the difference between relative sizes or dimensions and absolute ones. Relative sizes mean that whatever size you choose will always fit into the window in which a browser is displaying your page (since they are defined in terms of fractions of the size of that window). Specifying an absolute size, on the other hand, may mean that the browser can't display the whole line within the window (forcing the person viewing the page to either enlarge the window or scroll around the page), but allows for a greater degree of precision -- it's simply a matter of deciding which is most appropriate in each case. For one more trick with the <hr> tag, try this:

<hr width="50%" size="20">

There are a thousand variations on this theme! It may be worth mentioning that the HTML in my examples has been typed out on separate lines to make it easier for you to read (and for me to type) -- but as far as the browser is concerned, it makes no difference whether it's presented like that or as one dense block of text; carriage returns are ignored. As long as the tags are all in the right places it'll know what you want it to do.

Tables

It must be becoming clear by now that although HTML doesn't offer the same degree of control that a DTP program might provide (part of the point of a mark-up language, in fact, is that it allows each person reading a page to exert a degree of choice about how it should look, to suit their needs or preferences), there's still a lot that can be done. If you're prepared to get your hands really dirty, however, and are ready to explore the possibilities of using tables, then the potential for something like precise page design becomes rather more of a reality.

A table is essentially a rectangular matrix of cells which can be made to fill a page, or part of one -- or, indeed, to fill a cell in another table! What's more, all you actually need to do is specify the contents of each cell and the number of cells in each row o

  Colouring Box  
  As explained in the text, the colours in the HTML palette are cryptically referred to by hex numbers (though some browsers will actually recognise more friendly terminology such as <font color="red">). Here are a few of the most common:

#000000 = Black
#FFFFFF = White
#FF0000 = Red
#00FF00 = Green
#0000FF = Blue
#FF00FF = Magenta
#00FFFF = Cyan
#FFFF00 = Yellow

Those of you who remember your colour wheels from primary school may have spotted that each pair of two hex digits refers to the proportion of each of the primary colours (red, green and blue respectively) involved -- so, for instance, yellow contains the full amounts of red and green, but no blue. The lower the values, the darker the colour -- a value of 7F7F7F (hex FF is equal to decimal 255, and 7F to 127), for example, will display all three primaries at half strength, giving a mid grey.

 
f the table, and the browser will display it in such a way that every cell is the right size to fit its contents. If you want more control, however, you can determine the size of each cell, whether the cell borders are shown and how they should look, or make any individual cell span as many rows or columns as you wish. Given that you can put any graphic or piece of text within any cell, and that you can also determine the position of that text or graphic within the cell, then it becomes obvious that the table is a very powerful piece of HTML. The downside is that it's also quite a complex one, and requires a very clear head! To be honest I wouldn't to do very much work with tables without using an authoring package, but it can be done, and it's certainly worth looking at some of the basics.

Take a look at Example 5 on page 50, which is all the code you need to produce a basic HTML table. First we see the <table> tag which, fairly reasonably, informs the browser that what follows is a table. The <tr> tag announces the start of a row, and then the <td> tags indicate a piece of data to be inserted into a cell. Each pair of <td> and </td> tags announce the presence of another cell in that first row until the row is ended by a </tr> tag and another row is started with the next <tr> tag, and so it goes on. At it's most basic, that's all it takes to put together a table -- the browser will automatically decide how large each cell needs to be, and adjust it accordingly -- but if you have a look at the code in Example 6, and the page it produces in Example 6a, you'll see that it's possible to create something much more complex.

Let's see what's happening. First we have a declaration that the table will occupy 75 percent of the width of the browser page. The 'bgcolor' component determines the background colour of the entire table, and is followed by some information about padding and spacing which I shall come back to later, along with the information relating to that 'border' command. Finally we see that the entire table will have a coloured border "#CC0000" -- a shade of blue.

The <td> tag you'll be familiar with, but this time there's rather more information to digest. We see that the first cell will span two columns (colspan = "2"), that the background colour for that particular cell is #FF0033 -- a shade of red -- and that the text within that cell is centred.

It would be a waste of time and space going through this table cell-by-cell, because you already have the information you need to work it out for yourself. Just remember that every cell can be configured in any way that you want it to be. You can choose the background colour, the colour of the text, the alignment of the text, the size of the cell and its relationship with other cells. And, as you can see by that <img src="helen.JPG"> tag, you can include pictures in a cell too.

What all this means, of course, is that you can position text or graphics anywhere on the page with a degree of precision that would otherwise seem impossible. But at a price, you might say -- the price being that the whole thing needs to be included within a visible framework, which will inevitably introduce restrictions as far as the aesthetics of your design are concerned.

Not so. First of all, pay a visit to my own site on www.musicmtn.demon.co.uk/ and select any one of the albums there. All the details that you see displayed are, quite obviously, contained within a table (like the Standing Stone example, left). Now, go to the inestimable Sound On Sound site at www.soundonsound.com and steer your

  Backgrounds  
  If you don't fancy creating your own background tiles or other web graphics, there are thousands of sites where you can download ready-made ones. Here are just three:

www.best.com/~drzeus/Art/Textures/Textures.html
www.netscape.com/assist/net_sites/bg/backgrounds.html
www.netcreations.com/patternland/index.html

 
way to the on-line shopping area. Go to 'Paul White's Books' and select one of the titles there. You'll have to take my word for it, or look at the source code, but, once again, all the information you see displayed is actually set within a table. The difference in appearance between this site and mine all comes down to that <table border> tag which I mentioned just a few paragraphs ago. On Paul's page the table border tag has a value of 0, which makes the framework invisible, while on mine there's a value of 1, which makes it show up -- it's as easy as that. What happens if it has a value of 2? Or 20? Give it a try!

Further control comes from the padding and spacing parameters which we also saw within the table tags. The larger the value given to the spacing, the greater will be the space between the cells, while the padding component determines the space between the text and the walls of the cell. Again, play around with the numbers until you come up with an effect that you like the look of.

Next month we'll start looking at what's involved in getting sound onto your site. Until then, keep making the tables!

This is the third article in a six-part series. Read Part 1, Part 2, Part 4, Part 5 and Part 6.

DAW Tips from SOS

 

Home | Search | News | Current Issue | Tablet Mag | Articles | Forum | Subscribe | Shop | Readers Ads

Advertise | Information | Digital Editions | Privacy Policy | Support | Login Help

 

Email: Contact SOS

Telephone: +44 (0)1954 789888

Fax: +44 (0)1954 789895

Registered Office: Media House, Trafalgar Way, Bar Hill, Cambridge, CB23 8SQ, United Kingdom.

Sound On Sound Ltd is registered in England and Wales.

Company number: 3015516 VAT number: GB 638 5307 26

         

All contents copyright © SOS Publications Group and/or its licensors, 1985-2014. All rights reserved.
The contents of this article are subject to worldwide copyright protection and reproduction in whole or part, whether mechanical or electronic, is expressly forbidden without the prior written consent of the Publishers. Great care has been taken to ensure accuracy in the preparation of this article but neither Sound On Sound Limited nor the publishers can be held responsible for its contents. The views expressed are those of the contributors and not necessarily those of the publishers.

Web site designed & maintained by PB Associates | SOS | Relative Media