As a 'newbie' it can be frustrating writing a HTML (Version 4.01) document for the first time. There are wonderful resources for how to work with HTML, but you just want to write a document without having to become a web designer first. You need something that is just a simple starting point that can answer questions such as, how do I write a link? how do I make text bold?
This basic document contains answers to the first questions I asked when I had to do something with HTML. Please remember that this document is not intended as a HTML tutorial, it is a selection of 'get you started hints'. There are websites, such as www.w3.org, that have great online tutorials that will cover all aspects of HTML and the correct usage of elements.
The HTML document or page should start with the following lines;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">. This is the HTML version information.
<html>. Start of HTML content.
<head>
<title>Basic HTML stuff</title>. The title that will be declared on the browser window.
<meta name="Author" content="Gary Hollands">.
<meta name="Description" content="Basic HTML how to">. Optional, these meta tags can be useful for search engines.
<meta name="Keywords" content="solriche,html,tables,tags,links,lists,images,elements">.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">. Character encoding supporting most Western European languages.
</head>
<body>
Document content, include text, headers, images etc.
</body>. End of body content.
</html>. End of HTML content.
Please note that many tags require an end tag, for example, the paragraph tag <p> is ended with </p>
The layout of text in a HTML document should follow the convention of a title heading, <h1> as shown by the large font 'HTML Basics' title above, followed by text. Sub headings of descending sizes from <h2>to <h6> can then be used as appropriate throughout the remainder of the document. The closing tag is </h1> or the size number used.
The tag <strong> provides a bold font effect. This is bold effect text. Close with the </strong> tag
The <em> tag gives emphasised text. Close with the </em> tag
The <i> tag gives italic text. Close with the </i> tag
The code <cite> is citation, for example, the title of a document or book. It looks very similar to italics. Close with the </cite> tag
Underlined text is given by the <u>tag. Close with the </u> tag
This code <font color="#800080">will give dark purple text. This effect is ended with the </font> tag
Different fonts and sizes can be achieved with the tag <font face="verdana,helvetica,courier,arial" size=4>. This example allows a choice of four fonts starting with verdana in size four. Font sizes start with 3 as the normal size, 1 and 2 are smaller sizes, 4, 5, 6 and 7 are the larger sizes.The problem lies with the assumption that these fonts are available on the end user's computer. The behaviour of the browser if these fonts are not installed, should be to display the text in the browsers default font. This, however, can be a misguided assumption. It is safer and better practice to allow the user's browser to use its defaults as much as possible. If bugs or differences in page rendering are exposed in browsers, you will be held responsible, not the browser. After all, you know what you're doing .....don't you?
Below are examples of aligned text. Caution, aligned text may not display properly in some browsers. Strict HTML standards discourage the use of the 'align' attribute. If there is the nuisense of text that aligns with tables and other objects when viewed in a browser but falls apart on print out, use the <br> attribute to force a line break in the text at the points required. This is more time consuming but safer.
Justified aligned text in here. This is an exerpt from Alice in Wonderland, using the <p align="justify"> tag. "Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled 'ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it."
<p align="center"> parameter.The <blockquote> tag is used to indent quoted text and is closed by the </blockquote>. It is good practise to surround the text within the blockquote tag with paragraph tags, for example;
<blockquote>
<p>
"Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next."
</p>
</blockquote>"Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next."
Link to other sites; <a href="http://www.solriche.co.uk">www.solriche.co.uk</a>, gives www.solriche.co.uk.
If the above link is clicked, the link is opened in the existing page, to return to the original page click on the browsers 'back' button.
Linking to another part of the current page; There are two elements to linking within a page. First, a destination for the link has to be given, eg, <a href="#go_somewhere_else"> go somewhere else in this page</a>. This will show in the browser like this, go somewhere else on in this page.
The target for the link is defined by; <a name="go_somewhere_else"> somewhere else on the page.</a>. Note that the # tells the tag to look for a target in a page rather than go to another URL.
A basic table is made up from four basic criteria, defining the scope of table itself, the rows and the columns. The overall appearance is governed by size of the table and the width and height of cells and the borders. Colour can be used to make the table look more visually attractive, care should be taken though, because not all browsers support colour within tables.
There are several elements that make up a table in HTML, below are a selection that are used in this document.
<table>. Sets the start of the table. The table size, border and cell layout is set here. The table is ended with the </table> tag.<caption>. Can be used to compensate for the poor support for the summary element. Ended with the </caption> tag.<th>. Table header, default shows as a bold font with centred alignment. This is helpful for speach synthesisers to adapt presentation to a user's needs.<scope="row/column">. Used with the <th> tag to inform speach tools if the heading applies to a row or a column.<tr>. Row element, data elements such as cell widths are contained within <tr>and</tr><td>. Table data, contains the text and or numerical data in an individual or spanned cells. Ended with the </td> tag.rowspan="*". This merges cells horizontally, a decimal number sets how many cells are merged. The number can not be greater than the total number of cells.colspan="*". This merges cells vertically, a decimal number sets how many cells are merged.<td> tag will be or should be missing from the following row(s) as these are now controlled from within the row that the merged cells began.align="*". For horizontal text alignment within the cell. The options are center and right, left is default.valign="*". For vertical text alignment within the cell. The options are top, bottom and baseline, middle is the default.<table summary="This is an example of a table, use the summary element to aid visually impaired users. This is poorly supported in most browsers so use the caption element as well" width="80%" border="1" cellspacing="0" cellpadding="0"><caption align="bottom"><b>Table 1. An example of a table</b></caption><tr bgcolor="#FFFFCC"> Begins the first row. Also sets the colour of the row.<th scope="col" width="26%">File</th><th scope="col" width="55%">Description</th><th scope="col" width="11%">Size</th><th scope="col" width="8%">Type</th> The size is set for all columns in the table.</tr> Ends the row.<tr> Begins the next row.<td>Row Two</td><td>no colour row</td><td>0kb</td><td>Colour</td></tr> Ends the row.</table> Ends the table.The table below is sized so that it will print ok on A4 paper, set the browser to print background
colour and images if full colour is required.
| Column One | Description | Size | Type |
|---|---|---|---|
| Row Two | no colour row | 0kb | Colour |
| Row Three | bgcolor="#FFCC66 = orange. | 0kb | Colour |
| Row Four | no colour row | 0kb | Colour |
| Row Five | Orange row | 0kb | Colour |
| Row Six | No colour row | 0kb | Colour |
| bgcolor="#FFFFCC" = Yellow |
| First row | table header | Three rows spanned <td rowspan="3" valign="top"> | |
|---|---|---|---|
| Two middle columns spanned | |||
| Three left cells spanned <td colspan="3"> | |||
| Three right cells spanned | |||
| Column one | Column two | Column three | Column four <th>Column four</th> |
| Two left cells spanned | |||
| Two rows spanned <td rowspan="2"> | Two right columns spanned, <td colspan="2" align="center"> | ||
| Spanned cells creating one row | |||
| valign="baseline" | valign="bottom" | ||
| Last row, four columns spanned <td colspan="4" align="center"> | |||
Some notes on the use of tables. Do not be tempted to use tables as a substitute for page layout. The page sizing and loading can cause problems for users especially those who are visually impaired. The use of colour in tables can provoke unpredictable results in different browsers, to be safe it is better to avoid colour. Check the tables in different browsers and use the print preview as well.
<hr> tag, they don't require an end tag. The following attributes govern the appearance of horizontal lines.
<HR>. The tag to create a horizontal line.Below are three different horizontal lines using the HR attribute.
This one uses only uses the<HR> tag, which gives a default horizontal line.
<hr noshade size="20" width="50%"> tag and attributes.
<HR> tag can be played with to make shapes. Experiment with the size and width ratios.
<HR noshade size="20" width="1%" align="left">.
<ol>. This tag starts the ordered list.<ol> tag are type="i,I.a,A." these are lower and upper case roman numurals and the letters of the alphabet. The default is decimal numbers.<ol type="i">, this uses lower case roman numerals for the list items.start="number" tag can be used with default numeral list to start the sequence at a higher number.<ol start="4"> will start the list at the number four.</ol>. This tag ends the unordered list.type="circle" or type="square". Disc is default.<ul type="circle">. Without the type="circle" parameter, the bullet style would be the default disc.<li>. This starts the list item, each individual item should start with this tag, it is not nessesary to close this with the </li> tag.</ul>. This tag ends the unordered list.<p> and <br> tags can be also be used to alter the appearance of the list.Ordered list
This uses the<ol> tag, which gives the list in the default decimal numbers.
<ol type="i"> parameter to give the list with roman numerals.
<ol start="4"> to restart the sequence at four.
Unordered or bulletted list
This uses the<ul type="square"> parameters to set the bullet points as squares.
A full discussion of how to manipulate text and images is beyond the scope of this document. However, here is a short list of the elements that can be used to place images and also influence text placement around them.
<img src="image.gif"><img align="right" alt="image title for speach software" src="image.gif" width="150" height="100"><br clear="left/right"> can be used to refine how text flows around an image.<img align="right" alt="image title for speach software" src="image.gif" width="150" height="100">. Notice that there is no paragraph elements with the image.Text before the image line.
Text after the image line. Start of extract from 'Alice in Wonderland'. The judge, by the way, was the King; and as he wore his crown over the wig, (look at the frontispiece if you want to see how he did it,) he did not look at all comfortable, and it was certainly not becoming. 'And that's the jury-box,' thought Alice, 'and those twelve creatures,' (she was obliged to say 'creatures,' you see, because some of them were animals, and some were birds,) 'I suppose they are the jurors.' She said this last word two or three times over to herself, being rather proud of it: for she thought, and rightly too, that very few little girls of her age knew the meaning of it at all. However, 'jury-men' would have done just as well. Alice could see, as well as if she were looking over their shoulders, that all the jurors were writing down 'stupid things!' on their slates, and she could even make out that one of them didn't know how to spell 'stupid,' and that he had to ask his neighbour to tell him. 'A nice muddle their slates'll be in before the trial's over!' thought Alice. One of the jurors had a pencil that squeaked. This of course, Alice could not stand, and she went round the court and got behind him, and very soon found an opportunity of taking it away. She did it so quickly that the poor little juror (it was Bill, the Lizard) could not make out at all what had become of it; so, after hunting all about for it, he was obliged to write with one finger for the rest of the day; and this was of very little use, as it left no mark on the slate. Text before the second image.
Text after the second image. If no break or paragraph attributes are set for the following text and images then they will all combine and flow around each other as well, like this. Just at this moment Alice felt a very curious sensation, which puzzled her a good deal until she made out what it was: she was beginning to grow larger again, and she thought at first she would get up and leave the court; but on second thoughts she decided to remain where she was as long as there was room for her. All this time the Queen had never left off staring at the Hatter, and, just as the Dormouse crossed the court, she said to one of the officers of the court, 'Bring me the list of the singers in the last concert!' on which the wretched Hatter trembled so, that he shook both his shoes off. 'I'm glad I've seen that done,' thought Alice. 'I've so often read in the newspapers, at the end of trials, "There was some attempts at applause, which was immediately suppressed by the officers of the court," and I never understood what it meant till now.'
The preceeding text and images have very little lay out attributes making it hard to read with ease. The following image and text example demonstrates how with the use of some simple tags and attributes, layout can be dramatically improved.
This line is above the image
The proceeding text line has the <br> instruction so that this line flows against the image's right margin.<br clear="left"> is now used to instruct the following text to start clear of the image and align at the left margin.Hello, this is somewhere else on the page. Go back to links.
Gary Hollands December 2004. Revised December 2007.