Tutorials, Study Guides & More
free guidance notes on writing skills and English Language, sample pages, How-to guides, and study resources
| Tag(s) | Function/Name |
|---|---|
| <P></P> | paragraph |
| <BR> | break [new line] |
| <B></B> | bold |
| <I></I> | italics |
| <H1></H1> | heading |
| <A HREF=”name.htm”></A> | hypertext link |
| <IMG SRC=”name.gif”> | link to image source |
| <HR SIZE=1> | horizontal rule |
| <CENTER></CENTER> | centre |
| <FONT></FONT> | font size/colour |
| <OL></OL> | ordered list |
| <UL></UL> | unordered list |
| <LI></LI> | list item |
| <TABLE></TABLE> | table |
| <TR></TR> | table row |
| <TD></TD> | table data |
© Roy Johnson 2002
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:
<B>Put this in bold<B>
This is because the tag has not been properly closed with </B>.
6. The same would happen if you were to miss one of the angled brackets – <B>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”>
<FONT SIZE =”5″>some text here</FONT>
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”>
<FONT SIZE=”5″>some text here</FONT>
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.
<FONT SIZE=5><B>big and bold</FONT></B>
This is the correct sequence:
<FONT SIZE=5><B>big and bold</B></FONT>
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:
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</FONT>
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.
© Roy Johnson 2002
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.
© Roy Johnson 2002
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:
10. Well-designed web sites are often based on one of the most memorable slogans to come from the design profession – “Less is more”.
© Roy Johnson 2002
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″>
© Roy Johnson 2002
1. You can add tables to your web pages. This is usually done for two quite different reasons:
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>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</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 <P> and <BR> 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. |
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.
© Roy Johnson 2002
Hyphens are short horizontal marks – (shorter than the dash).
Hyphens are used to show a link between words.
mother-in-law
re-enter
matter-of-fact
author-critic
president-elect
co-operation
Hyphens are used to join words when forming compounds.
They are also used after prefixes – especially where it is necessary to avoid an awkward or confusing sequence of letters (as in re-enter).
Notice the difference between a compound word and the same terms used separately:
a fifteenth-century manuscript
in the fifteenth century
NB! The hyphen is not the same thing as the longer dash ( — ) but this distinction is rarely made in the UK.
Hyphens should be used where it is necessary to avoid ambiguity:
two-year-old cats
two year-old cats
They should also be used to distinguish terms which are spelled identically, but which have different meanings:
reformation – change for the better
re-formation – to form againrecover – to regain control
re-cover – to cover againresign – to stand down
re-sign – to sign again
Hyphens are used when new terms are formed from compounds, but they are dropped when the compound is accepted into common usage. (This process is usually more rapid in the USA than in Europe.)
bath-tub -> bathtub
book-shelf -> bookshelf
club-house -> clubhouse
This phenomenon is currently visible in computer technology, where all three forms of a term may co-exist:
Word processor
Word-processor
Wordprocessor
Remember that the hyphen is not the same thing as the longer dash. A distinction between the two is commonly made in the US, but not in the UK.
Self-assessment quiz follows >>>
© Roy Johnson 2003
English Language 3.0 program
Books on language
More on grammar
1. Hyphens in essays are most commonly used to join words when forming compounds:
mother-in-law president-elect
matter-of-fact author-critic
2. They are also used after prefixes – especially where it is necessary to avoid an awkward or confusing sequence of letters:
re-enter co-operation pre-ignition
3. Notice the difference between a compound word and the same terms used separately:
a fifteenth-century manuscript in the fifteenth century
4. Hyphens should be used where it is necessary to avoid ambiguity:
two-year-old cats — two year-old cats
In the first case, all the cats are two years old. In the second case, two cats are each one year old.
5. Hyphens should also be used to distinguish terms which are spelled identically, but which have different meanings:
reformation re-formation
recover re-cover
resign re-sign
6. Hyphens are used when new terms are formed from compounds, but they are dropped when the compound is accepted into common usage. (This process is usually more rapid in the USA than in Europe.)
bathtub — was once bath-tub
bookshelf — was once book-shelf
clubhouse — was once club-house
7. This phenomenon is currently visible in computer technology,where all three forms of a term may co-exist:
Word processor — Word-processor — Wordprocessor
© Roy Johnson 2003
Buy Writing Essays — eBook in PDF format
Buy Writing Essays 3.0 — eBook in HTML format
Idioms are fixed phrases which are only meaningful as a whole.
All languages contain idiomatic phrases.
Native speakers learn them and remember them as a complete item, rather than a collection of separate words.
IDIOM MEANING a red herring a false trail raining cats and dogs raining very hard fly in the ointment spoiling the effect
Idioms often break semantic conventions and grammatical logic – as in I’ll eat my hat [I’ll be amazed if …].
The object of the verb ‘to eat’ is conventionally something edible, but as part of this idiom it is something definitely inedible.
Non-native speakers find the idiomatic side of any language difficult to grasp.
Native speakers of a language acquire idioms from a very early stage in their linguistic development.
NB! You’re getting this advice straight from the horse’s mouth.
Idioms are generally impossible to translate between languages, although some families of languages use idioms based on identical ideas.
In French, for example, the idiomatic phrase ‘mon vieux’ is parallel in its meaning with the English ‘old chap’.
Idioms very often contain a metaphor, but not always. For example, ‘How do you do’ is an idiomatic greeting but it is not a metaphor.
Idioms are not always used or recognised by the whole of the language community. Sub-groups of speakers employ idioms peculiar to themselves.
Teenagers, occupational groups, leisure groups, and gender groups all employ idioms or special phrases. These will mean something within the context of the group and its communication.
Medicine I went to the GP for a check-up Sport He was caught leg-before-wicket Gender She was at her sister’s hen-party
Idiom also determines the way that certain combinations of words make meaningful statements, but not others.
For instance, we are ‘in a quandry’ but ‘at a loss’; we are ‘out of sorts’ but ‘in low spirits’; whereas the expressions ‘at a quandry’ or ‘in sorts’ would have no meaning in English.
Self-assessment quiz follows >>>
© Roy Johnson 2003