Archives for 2009

HTML Tutorial 05 – common problems

November 22, 2009 by Roy Johnson

1. Everybody runs into technical problems when they first create Web pages. Don’t feel bad about it. Just learn from your mistakes.

2. The most common problems are caused by small details and the need for complete accuracy.

3. Filenames must be spelled accurately. They should not contain any spaces, and some keyboard characters – such as /, &, and @ – are not allowed. [These are reserved for transmitting data over the Web.]

4. It is safest to use all lower-case letters. Some computers will treat filename.htm and Filename.htm as different files.

5. Tags must be opened and closed rigorously. If you type the following, it will not work:

Put this in bold

This is because the tag has not been properly closed with .

6. The same would happen if you were to miss one of the angled brackets – Put this in bold /B>.

7. HTML code must be completely accurate. The following examples all contain mistakes:

<A HREF=”filename.htm>filename</A>

<BODY BGCOLOUR=”AQUA”>

some text here

8. In the first example, one double quote mark is missing; in the second the spelling is incorrect; and in the third, there is a space. The correct codes are:

<A HREF=”filename.htm”>filename</A>

<BODY BGCOLOR=”AQUA”>

some text here

9. Missing items. It is very easy to omit a small element of code – especially if you are keying it in manually. For instance if you typed –

<A HREF=”filename.htm”filename</A>

– this would not show up on the screen. In fact nothing you typed after it would appear. That’s because the angled bracket is missing after the file name.

10. Bad syntax. Tags must be opened and closed in the correct sequence. The following is an example of incorrect ‘nesting’ of tags.

big and bold

This is the correct sequence:

big and bold

HTML Tutorial 06 – adding colour

November 22, 2009 by Roy Johnson

1. The default background colour of a web page is grey – which is not very exciting.

2. That is, grey is the colour which will show in a browser window unless you tell it to do otherwise. Web design guru David Siegel says that web pages such as this are – “like slide presentations shown on a cement wall”.

3. There are three easy ways to add colour to your pages:

use FONT COLOR for text
use BACKGROUND COLOR for the page
use a graphic for a ‘background wallpaper’ effect

4. Let’s look at each of these options in turn.

The font colour tag

5. When you specify the FACE or SIZE of your FONT, you can also say what COLOR you want it to be.

<FONT=”Arial COLOR=”RED”>my web pages

This would produce the following effect.

The words ‘my web pages‘ are coloured red.

6. Other common colours are as follows.

Aqua – Fuchsia – Olive – Green – Lime
Blue – Maroon – Teal – Navy – Purple

Background colour

7. Background colour can be used to give colour to a page.

8. The code is inserted into the <BODY> tag at the top of your page. Notice that the term ‘background’ is abbreviated to BG.

<BODY BGCOLOR=”AQUA”>

9. The problem with most of the standard colours is that they are rather strong. They are too demanding, not quiet enough.

10. It is better to choose something more quiet and restrained.

BGCOLOR=”WHITE” is always safe.

BGCOLOR=”#FFFFEF” is more subtle.

[Don’t ask! Just use “#FFFFEF”.]

11. Note that the tag must be given its American spelling of COLOR. This is a very common technical problem.

Tiled graphic file

12. You can also create a coloured background for your page by using a graphic image. This will be ’tiled’ [repeated to fill the space] by
your web browser.

14. The code goes into the BODY tag at the head of your page. Notice that in this case the full term BACKGROUND is used.

<BODY BACKGROUND=”stripe.gif”>

15. You would save the graphic file ‘stripe.gif’ in the same folder as your .htm page.

16. But a tiled graphic makes reading more difficult. It almost always results in a visually disruptive page.

17. It’s usually much better to use a single colour – one which is muted and subtle. Choose something against which black text will stand out clearly.

18. Here are a good example and a ridiculously bad example.

HTML Tutorial 07 – page anatomy

November 23, 2009 by Roy Johnson

1. Let’s look at each section of a typical HTML page. We’ll see what the code means and what it does.

2. Much of this might seem pretty boring at first – but you will realise later why it can be important.

3. First of all, here is the absolute basic minimum HTML page.

<HTML>

<HEAD>

<TITLE>

Page title

</TITLE>

</HEAD>

<BODY>

Here is the page content

</BODY>

</HTML>

4. You can see that the structure of the page is a HEAD section, which contains the TITLE, and a BODY section, which contains the contents of what will appear on the page.

5. The first item is actually the <HTML>. This tells the browser “What follows is going to be an HTML page”. Like all the other tags, it is enclosed in angled brackets.

6. The next item is the <HEAD>. This section of the page can contain all sorts of technical data – which we’ll come to in a moment. For now, we’ll notice that it contains the TITLE of the page.

7. The <TITLE> does not appear on the page – so don’t look for it there. It appears at the top of your browser window – saying something like “Page title – Mozilla Firefox” or “Page title – Windows Internet Explorer”.

8. Next comes the <BODY> section. This contains the information you wish to appear in your page. It could be text, graphics, audio files, or even movie clips.

9. Note that each one of these tags must be opened – then closed. Otherwise, the page will not show up in your browser.

10. And that’s it! Those are the basic elements of a web page. But now let’s look at some of the additional features which might appear. For this we go back to the top of the page.

11. The other item which commonly appears in the HEAD section of the page is META data. That is, information about the content of the page. This is usually a DESCRIPTION of the page, and KEYWORDS which summarise its most important topics.

12. This information does not appear in your browser window. It is intended for search engines. They visit your pages [maybe] and want to know how to categorise them and what they contain.

13. Another thing you might see at any point in a web page is COMMENTS.

<!– these are comments –>

14. Anything which appears between <! and > will not show up when you view the page in a browser.

15. What use are these? Many designers use comments to mark special sections of their pages – as in the following example. They make editing easier at a later date.

<!– ######## START OF MAIN TOPIC ######## –>

16. There are many other elements you might find in a typical HTML page – but these are the most basic. Just remember that unless you open and close all your tags correctly, the page may not show up in your browser.

See the page of common problems for examples.

HTML Tutorial 08 – questions of taste

November 23, 2009 by Roy Johnson

1. Too much text
Some people put far too much text into their pages, and often don’t have margins or breaks between paragraphs. The result is a screen full of text – which is difficult to read. Use plenty of space around your text. It will look more attractive and be easier on the eye.

2. Bad colours
Combining coloured backgrounds with coloured text is dangerous. It can work if it is done with restraint – but many people are attracted to colours which clash and vibrate. For good results – ‘less is more’ is often the case so far as color is concerned.

3. Tiled backgrounds
Background graphics can often make text difficult to read. When a .gif file is tiled across a page, the resulting pattern often creates an effect which is visually disruptive. Use only very pale graphics.

4. Large graphics
These take up a lot of space, and can take a long time to download. People viewing your pages will switch off and go elsewhere. Shrink your pictures in a graphics editing package.

5. Long pages
Most people dislike scrolling through very long pages. They will often not read beyond 2-3 screens of text. The solution is to create separate pages, and put links between them.

6. Hit counters
These make any web site look very amateurish. If your web site is a hobby, you don’t need them. If it is commercial, you will not want to reveal this information. If you are determined to have one, it’s possible to make it invisible. You can record the ‘hits’ – but other people don’t see the results.

7. Animated graphics
These usually distract attention from what you have to say, and they generally look tacky. Unless they are very small, very subtle, and in non-conspicuous positions – leave them off your pages.

8. Garish colours
Your site will look cheap, amateurish, and vulgar if you use too many bright colours. The same is true of bad clip art and animated graphics. Yellow and blue starbursts against a speckly purple background will look naff. Leave those for the funfair.

9. To see a very funny and truly awful collection of bad taste designs, visit the following web site:

Budugllydesign.com

10. Well-designed web sites are often based on one of the most memorable slogans to come from the design profession – “Less is more”.

HTML Tutorial 09 – text and graphics

November 23, 2009 by Roy Johnson

1. Once you have managed to produce a web page full of text, the next thing you usually want to do is add some graphics.

2. You add the graphics using the simple tag –

<IMG SRC=”filename.gif”>

This is inserted into the page at the place where you want the graphic to appear. And the graphic file would need to be saved into the same folder as your filename.htm page.

3. But the graphic will simply appear on the page with text before it and after it. You would probably prefer the text to wrap round the graphic, in the same way that the text is doing here – wouldn’t you? This makes for a neater and more interesting page. Incidentally, your graphic can also be a link. If you click the book cover here, you will be taken to Amazon, where you can order the book. Here’s how to wrap the text around the graphic.

4. Add the following INSIDE the tag

align=”left” [or right]

hspace=”x” [where x=number of pixels]

vspace=”x” [where x=number of pixels]

So the tag should look like this:

<IMG SRC=”filename.gif”align=”left” hspace=”10″ vspace=”5″>

5. This creates a 10 and 5 pixel gap around the side and the bottom of the graphic – to stop your text bumping into the picture.

6. Experiment with the x=number to see the effect.

7. If you want to add another refinement, you can add a border.

border=”x” [where x=number of pixels]

8. And you should set x=0 for no border.

9. You can also add a title:

alt=”Picture courtesy of Media-Pics plc”

10. This will show up on screen when you move your cursor over the graphic. It is NOT a caption to the picture.

11. And you might wish to add the size of your graphic file.

width=”x” [where x=number of pixels]

height=”x” [where x=number of pixels]

12. You find these dimensions by opening the graphic file in your graphics editor and looking at the size or dimensions.

13. Adding the dimensions will help your page download faster – because the browser knows how big a space to leave for the picture before it starts loading.

14. So – here’s an example of all these features in one tag. The items are on separate lines to make them easier to read.

<IMG SRC=”../graphics/hafner.gif”

align=”left” hspace=”7″ vspace=”5″ border=”0″

alt=”The Origins of the Internet”

width=”90″ height=”140″>

HTML Tutorial 10 – adding tables

November 23, 2009 by Roy Johnson

1. You can add tables to your web pages. This is usually done for two quite different reasons:

to put data in columns and rows
to control layout on the page

2. This is a simple table containing data:

Size Description

1 Red, size – large, fully boxed

2 Blue, size – medium, unboxed

3. The table borders can be removed to use the same coding for controlling graphics, by setting border=”0″. Here is the same table with its borders removed – actually, hidden.

Size Description

1 Red, size – large, fully boxed

2 Blue, size – medium, unboxed

4. What follows is the basic code for a simple table. COPY this code into one of your template pages. You can then experiment by changing the size of the table and the alignment of data in it.

5. Your data goes inside the table data tags:

<TD>your data goes here</TD>

<TABLE>

<TR>

</TR>

<TR>

</TR>

</TABLE>

6. The width of each table data cell can be controlled by adding WIDTH=”X”, where X is the number of pixels:

<TD WIDTH=”150″></TD>

7. The position of data within each cell can be set at LEFT, RIGHT, or CENTER

<TD ALIGN=CENTER></TD>

8. You can use the and tags within the table data, as you would in a normal page. I have added some colour to the top row, which is technically known as a table header <TH>

Size	Description
1	Red, size – large, fully boxed and inflatable. This product comes with a full set of attachments. Free delivery.
2	Blue, size – medium, unboxed, and non-inflatable. This model is only suitable for use indoors. Not available in UK.

Size

Description

Red, size – large, fully boxed and inflatable.
This product comes with a full set of attachments.
Free delivery.

Blue, size – medium, unboxed, and non-inflatable.
This model is only suitable for use indoors.
Not available in UK.

9. In order to control the vertical position of data within the cell, you need to add the VALIGN coding – which can be TOP, MIDDLE, or BOTTOM. [Note – this is ‘Middle’, not ‘Center’.]

10. The coding for the cells containing numbers in the example above is as follows:

<TD ALIGN=”center” VALIGN=”top”>2</TD>

11. The structure and the appearance of tables can become a much more complex issue. You can add colour to the cells, shading to the borders, and put tables within tables.

12. Many web designers arrange the text on their pages by placing it inside tables – and lots of fancy effects are possible. But these and many other design tricks are gradually being replaced by the use of style sheets.

HTML with CSS and XHTML

June 19, 2009 by Roy Johnson

web design using style sheets and the latest standards

This is an unusual guide to HTML and web design, because it teaches via chat and fun, not boring routines. It’s aimed at beginners who want to get web pages up on to a site, but who don’t want to be bored rigid with long lists of ‘elements’, ‘attributes’, and ‘selectors’. The authors use instead just about every printable device for getting their lessons across: explanations, diagrams, screenshots, cartoons, bulleted lists, quizzes, dialogues, crosswords, tests, and downloadable templates. They also teach predominantly via pictures, which is one reason the book is so long (658 pages). The other reason is that it’s so comprehensive.

They cover basic HTML, then XHTML, interactivity, and style sheets. In fact they take the unusual step of introducing style sheets right at the start. This approach of multiple instruction produces quite a lot of repetition and redundancy – but I’ve no quibble with that. It’s based on the sound pedagogic principle the when you are learning, several approaches are better than one.

Geared towards both Mac and Windows users, they show you how to design pages, how to insert graphics, how to validate your pages to check for problems and make the pages compliant with W3C standards.

I still find the language of stylesheets over-abstract and hard to grasp, but they explain it all very carefully, and most importantly they show you both what to type into your text editor and how it will look in a browser.

There are a couple of easier chapters on styling with fonts and colours, then it’s back to the harder stuff with CSS elements and the box mode – which is similar to HTML tables. Here there are some very useful detail on how browsers deal with the information coded into your pages, some of which explains why you can’t always get things to appear on screen how you want them to look.

They end with chapters on tables and forms – still urging readers not to fall back on old HTML 4.0 tricks for layout and appearance, but to stick with style sheets all the way.

So – truth be told, it’s a book which starts off quite easily, but then gradually becomes more advanced. But if you do all the exercises and tests along the way, this gradual acceleration should be hardly noticeable.

Buy the book at Amazon UK

Buy the book at Amazon US

Elisabeth Freeman and Eric Freeman, Head First: HTML with CSS and XHTML, Sebastopol: CA, 2005, pp.658, ISBN 059610197X

More on technology
More on digital media
More on web design
More on computers

HTML: The Definitive Guide

July 11, 2009 by Roy Johnson

the encyclopaedia of HTML coding and web design

Most people in the academic and business world are still using HTML Standard 2.0 browsers – partly because of corporate lethargy and partly because upgrading is so costly and disruptive in big organisations. At least these people have had the good fortune to miss out the Standard 3.0 phase, which was something of a dog’s breakfast. Designers however (the people who actually create the Web pages for our consumption) are always keen to make the screen more attractive and escape the confine of earlier standards. In fact they have a doubly difficult job. They might wish to adopt the latest features, but if their sites are to be viewable by people still lumbered with older browsers, they are also under constraint to make their pages ‘backwardly compatible’. This is no easy task.

The first edition of Musciano and Kennedy’s book on HTML was rather boldly entitled The Definitive Guide. However, many of the predictions they made then have been substantiated by subsequent meetings of the W3C committee, which decides on these standards. [It’s recently been rumoured that both Microsoft and Netscape try to pack this committee with their appointees.]

The third edition of their reference manual offers an update which includes the latest additions to Standard 4.0 of the official HTML code. They claim that this is a ‘clearer and cleaner standard’ than any previous, but they also admit that Netscape and Microsoft incorporate features not included in the present standard. Fortunately, they take a realistic view of this browser war and make clear which standards are adopted (or not) by the Big Two. So what’s really new here?

The answer is ‘Quite a lot’. The Forms, Tables, and Frames chapters have all become bigger, and JavaScript and DHTML make an appearance. They also cover Layers, Multiple Columns, and creating white space. The big new item of course is a whole chapter on Cascading Style Sheets – a development which has come about precisely because of the shortcomings in standards 1.0, 2.0, and 3.0 – and they recognise in this respect that print publications just can’t keep up with Web developments (which is a brave and honest admission for authors of computer manuals). A section on image formats (.gif and .jpg) is also new – but beware! there are Netscapisms at every turn.

I still find it difficult to remember what is an attribute, a physical style, and why some tags are ‘deprecated’. They even include some which are now obsolete (for historical reasons) which just goes to illustrate their thoroughness. However, you still have to be prepared for a rather abstract manner of expression:

like most other tagged segments of content, user-related events can happen in and around the BLOCK QUOTE tag

But having used the first edition regularly over the last year or two, I can confirm that their manner of writing is amply compensated by the reliability of the advice they offer.

Obviously you should buy this latest edition, but it’s reassuring to know that Musciano and Kennedy continue to offer a guide which stays within the limits of the latest HTML standard, whilst recognising that you will want to go beyond it. In this regard the publisher generously offers an online update.

The usual high quality O’Reilly production values obtain: good quality paper, clear print, consistent layout, and their elegant house font of ITC Garamond. Multiple indexes include HTML grammar, quick tag reference, CSS quick reference, the HTML 4.0 document type definition, character entities, and colour names and values. To a newcomer these might seem like boring technical catalogues – until you see the horror of your Web pages in a browser you don’t normally use. Then you’ll be glad of the reassurance of safe colours and the correct ASCII number for that ampersand or angled bracket.

Buy the book at Amazon UK

Buy the book at Amazon US

Chuck Musciano & Bill Kennedy, HTML: The Definitive Guide (sixth edition) Sebastopol: O’Reilly, 2006, pp.678, ISBN 0596527322

More on technology
More on digital media
More on web design
More on computers

Hyde Park Gate News

July 25, 2009 by Roy Johnson

Bloomsbury juvenillia and journalism

This gem of Bloomsbury juvenilia was hidden for years in the British Library’s Department of Manuscripts. It comes to us now in a beautiful paperback edition with full scholarly notes and some contemporary photographs. Hyde Park Gate News is a compilation of family ‘newspapers’ written by Virginia Woolf (then Virginia Stephen) with her sister Vanessa and brother Thoby. What makes it of interest for Woolf scholars and readers is that it deals with the small events of domestic life out of which she was later to make so much imaginative use.

It’s a mixture of letters, stories, advice columns, answers to questions, and reports on family events – all retailed in a satirical and parodic fashion. The style is modelled on Tit Bits, which had been launched in 1881 and established a weekly circulation of around 500,000. The children satirise their parents, each other, and the visitors they received at the gloomy Victorian house at Hyde Park Gate. The entries reveal an amazingly precocious appreciation of literary genre, writing tone, rhetorical figures, and language in general. They are particularly good at ironic understatement and anti-climax:

Mr. Gerald Duckworth took a small walk this morning in Kensington Gardens. His young sisters and brothers accompanied him. He returned we hope without any fatigue.

It is interesting to note the seeds of material such as this from Vol II, No.35, Monday 12 September, 1892, reporting on their holiday in Cornwall, which would become a central feature in Woolf’s novel three decades later:

On Saturday morning Master Hilary Hunt and Master Basil Smith came up to Talland House and asked Master Thoby and Miss Virginia Stephen to accompany them to the lighthouse as Freeman the boatman said there was a perfect tide and wind for going there. Master Adrian Stephen was much disappointed at not being allowed to go.

The issues of the newspaper are charmingly reproduced in their original double-column format, complete with their original mis-spellings and hand-drawn illustrations. The whole collection is also supplemented by some facsimile reproductions of the originals, a collection of early family photographs, and explanatory biographies on the people mentioned.

Following a three year gap, the issues for 1895 take a more serious and accomplished tone (though Virginia was then still only thirteen years old). There is a satire (‘Miss Smith’) of a women’s movement figure; and the sort of philosophic meditations for which Woolf became famous in her later works:

I dreampt one night that I was God…I created several worlds in order to see which one was best…The people lived as one great family. But were they real? And what was I? Why did I exist? Who made me and who made my maker? Was everything a dream, but who were the dreamers?

And the last entry in the final issue of April 1895 is almost a pre-echo of the experimental fictions she was to produce many years later – and an amazingly composed piece of writing in its own right. We get an impression not only of perceptive self-portraiture but of an artistic bird which is poised, about to take flight:

Scene – a bare room, and on a black box sits a lank female, her fingers clutch her pen, which she dips from time to time in her ink pot and then absently rubs upon her dress. She is looking out of the open window. A church rears itself in the distance, a gaunt poplar waves its arms in the evening breeze. The horizon at the west is composed of a flat – on the south a ledge of chimney pots from which wreaths of smoke rise monotonously, on the north the gloomy outlines of bleak Park trees rise.

This is an elegantly produced volume from newcomers Hesperus Press which any fan of Woolf or Bloomsbury will be glad to add to their collection.

Buy the book at Amazon UK

Buy the book at Amazon US

Virginia Woolf, Vanessa Bell, Thoby Stephen (eds), Hyde Park Gate News, London: Hesperus Press, 2005, pp.240, ISBN: 1843911418

More on Virginia Woolf
Virginia Woolf – web links
Virginia Woolf – greatest works
Virginia Woolf – criticism
More on the Bloomsbury Group

Hyper/Text/Theory

July 2, 2009 by Roy Johnson

essays on literature and literary theory in the digital age

George Landow was amongst the early few to spot the similarities between modern literary theory and the technological possibilities of hypertext programmes. This is the third of his publications which explore connexions between them. The general argument he makes is that the digitization of text coupled with the associative links of hypertext represents a development of revolutionary potential.

It makes new literary forms available, blurs distinctions between existing genres [‘boundary erasure’] and makes possible anything from multimedia compilations started by authors but completed by their readers, to texts which are ‘unreproducible’ because of their size and their constant revision.

His introductory essay is an invigorating mixture of reports on hypertext projects and visionary ideas of the kind promoted by Jay Bolter and Nicholas Negroponte. Unfortunately, his fellow contributors fail to match his standard. The other essays deal with non-linearity as one of the essential features of hypertext, the politics of this branch of IT, and what promotes itself as new writing – ‘hypertext fiction’, a somewhat dubious notion over which there is still much debate.

They range enthusiastically over topics as diverse as Wittgenstein’s notebooks, films and narratology, and forms of classical rhetoric. But much of their exposition is clogged with silly jargon [‘texton’, ‘scripton’, ‘screener’] which is depressingly rife amidst professionals in the field of cultural studies.

At their worst the essays deal in speculation rather than reporting
on practical experiences or successful projects. Mireille Rosello for instance at one point drops to the level of conceptual art when she spends two or three pages describing what an imaginary hypertext programme could be like. Since there are unsung technical writers out there in the field constructing hypertext programmes for real right now, this is a feeble and self-indulgent substitute. There are just too many questions raised, not enough empirical data or answers.

One further dispiriting feature is the tendency of the authors to draw on the same material, and even worse to quote each other. It is one thing for them to [quite understandably] cite Ted Nelson as a hypertext visionary, but when yet another reference to Thomas Pynchon occurs in the fourth or fifth essay, one wonders if these aren’t the papers of some post-graduate club. This suspicion is reinforced by the tendency for them all to quote from the same fashionable cultural theorists – Deleuze, Guattari, Baudrillard, and Lyotard. The collection ends with a piece of post-Modernist tosh by Gregory L Ulmar which weaves a tissue of non-sequiturs around a contrived verbal connection between Wittgenstein [again] and Carmen Miranda.

In Landow’s own survey of current programmes and projects [written, one supposes, circa 1993/94] it is interesting to note how often he describes the hypertext systems available by using the telling metaphor of a ‘web’ of connexions. The World Wide Web which was under development at that very time now makes available many of the linkages dreamed of from Vannevar Bush onwards. And most importantly, they are available not merely for some technological elite as in the past, but for whoever wishes to use them. This is a democratizing influence which will have a profound effect upon the construction, assembly, and cross-linking of information – and Landow knows it. One of the driving forces behind this collection of essays is to make these possibilities known. I imagine that a further post-WWW volume is on its way right now – but I hope he writes the book himself.

Buy the book at Amazon UK

Buy the book at Amazon US

George P. Landow, (ed) Hyper/Text/Theory, Baltimore and London: Johns Hopkins University Press, 1994, pp.379, ISBN: 0801848385

More on literature
More on the novella
More on literary studies
More on short stories

Archives for 2009

web design using style sheets and the latest standards

the encyclopaedia of HTML coding and web design

Bloomsbury juvenillia and journalism

essays on literature and literary theory in the digital age

Get in touch