How to write HTML code part 1
by Andrew Armstrong
HTML is the code which Web browsers use to display web pages. A simple web page consists of text placed in between what are called tags. The tags tell the browser what of the text is for, or how to render it. Here is an example of tags which tell the browser what the text is for.
<h1>This is an example of the most important heading</h1>
<p>This is an ordinary paragraph.</p>
If these formed part of an ordinary web page, the first line would normally be displayed in a large typeface and the second one in a normal typeface. Most browsers put a more space in between a heading and a paragraph than in between two paragraphs. However, the tags do not actually specify that that shall happen, they only specify that the first line is a heading and the second line is a paragraph. The way that this is rendered is determined by the user agent. The majority of user agents are visual browsers such as Internet Explorer or Netscape. However, there are other user agents such as screen readers for the blind. It is also possible for software to convert simply structured documents like this for display on other media such as telephones.
Notice here that the opening tag has a matching closing tag. There are a few tags which do not have matching closing tags, and most browsers will cope with not having a closing paragraph tag, although the way in which the text is rendered may be less predictable. In general, the formatting of the text which makes up the source code of the web page does not affect the way in which it is rendered on-screen. A single space is normally displayed between each word, and text is wrapped at the edge of the window. It doesn't matter how many carriage returns you enter into the source text, the only way to obtain a paragraph break is to use opening and closing paragraph tags.
Other types of tag control the rendering of the text, directly or indirectly. Here are two examples:
<p>Here is <em>emphasised</em> txt, which will normally be rendered in <i>italic</i></p>
The emphasis tag here normally results in the text being displayed in italic, and it looks on-screen exactly the same as the italic tag. The difference is that the italic tag only affects the on-screen rendering, while of the emphasis tag affects the rendering for other user agents. The emphasis tag is a structural tag in that it simply designates an area of text to be emphasised in some way, while the italic tag is only concerned with the actual visual display.
The types of tag which have both opening and closing varieties may be regarded as containers. That is to say that all the text contains between the opening and closing heading-one tag is the most important level of heading. Some types of tags can contain sets of other types of tags, as for example in the line of code above where the emphasised and italic tags are contained within the paragraph tags. It is not valid for a set of tags to be partly but not fully contained within another set, although many browsers will display something that looks sensible when fed code of this nature.
There are many types of tag to choose from, far too many to list here. I shall stick to listing a few of the most useful tags. These will permit you to build a simple web page that can look good, and once the use of these tags starts to make sense it will be easy to add a few more to your repertoire. First of all there are headings from level one to level 6. Heading tags contain the letter h and the appropriate number. There is also the paragraph tag, as illustrated above, and tags for adding extra line spaces and images to the document.
To add an extra line spaces, the break tag <br> can be used. The image tag is relatively complicated, and is discussed in detail later.
There are also tags for building up tables, which have been widely used to lay out contents of pages. More recently, the use of tables for this purpose is deprecated, but they still form a simple way to place things on a page where you want them to be. Tables can also be used for the originally intended function of listing information such as prices.
The tag which most defines hypertext documents is the anchor tag, which allows links to be made. Here is an example:
<p> To learn more, <a href="exhibition.html">view our online exhibition of Ted Nasmith's paintings.</a></p>
In most browsers, the default is that the text in between the anchor tags is shown in blue and underlined when it has not been visited, and if you have visited it then it is shown in purple and underlined. Modern web pages use images for links sometimes, or use other ways to indicate that the text is a link. However there is nothing wrong with using the default in simple situations, in order to avoid confusing people. Clicking on this link in the example above will take you to eight web page called exhibition.HTML. The text put inside the inverted commas defines where the link will lead.
There are also tags which you must have to make up the HTML document. The outer tags are the HTML tags, and within those there are header tags and body tags. Within the header tags it is customary to include at least a set of title tags. Here is an example of the framework of an HTML document.
<title>The text placed here appears in the title of the browser</title>
This is an example of a comment that does not display in the browser. All the content that you want to display on the page is contained within the body tags. The next tag ends the comment.
The code here would not display anything in the browser, because there is no content in the body section to display. If you want to do some experiments with HTML pages, it would be useful to type of the code above into Windows notepad, or any other plain text editor, and then save the file as ASCII text, with a file name ending in HTML. When you double-click on a file name ending in HTML or HTML in Windows, what normally happens is that a browser opens and the contents of the pages displayed. This page has no contents, and is a useful starting point to add content to a page, while avoiding the need to type in these tags which are always required.
It is possible to add arguments to the body tag, to set the background colour of the page, and the colours of links which are visited or not yet visited. Body tag colour is defined as two digits of hexadecimal for each of red, green, and blue. These are preceded by a hashmark. <body background="#FFFFFF"> would give a white background, while <body background="#000000"> would give a black background. A tasteful green colour results from the following tag: <body background="#CCFFCC"> (For those unfamiliar with hexadecimal, and the counting sequence runs 0 1 2 3 4 5 6 7 8 9 A B C D E F, where F is equivalent to 15. Thus the proportions of each colour can be varied in 256 steps. If a number of web pages are to be made to a similar colour scheme, the normal way to do this would be to build the framework or template of the page and then to reuse this for each actual page that is created. Most real templates are very complicated, but in order to demonstrate the principle let us use a simple template.
Here is the code to type into notepad to make a simple template to which you can add some content. To save you some typing, this code is available on the Web at www.aaelectron.co.uk/desig/
(As and aside, entering a URL in this fashion normally causes the server to search for a file called index.html in the directory specified. If it cannot find index.html it searches for index.htm, and if it cannot find that it gives a list of the files as are in the directory. The server could be setup to serve any page as default, though.)
<title>Page title goes here</title>
<body background="#000066" text="FFFFD8">
<h1> Page title goes here</h1>
<p>Then the rest of the content</p>
<p> With multiple paragraphs. </p>
Now that you have the template, we will make a sample web page.
Change the text in the title to: Here are some links to miscellaneous pages. Between the title and first paragraph what we will add an image. The only thing you absolutely must have in an image tag of the letters IMG to define that it is an image, then SRC= and the path and file name of the source of that image.
<img src="images/picture1.jpg" height="50" width="45" vspace="7 hspace="7" align="left" alt="Picture of my cat">
As you can see, several extra arguments can be added to this tag. Taking them in order, the height and width parameters are the number of pixels of height and width of the image file. If these parameters are not specified the image will render in whatever size it was created, but until it has rendered the browser will not know what size it is to be displayed, so will not wrap text around it correctly. When the image displays the text will jump around on the page. An easy way to find out what values you should put into the width and height is to create the image tag without height and width first of all, save the file, display the web page in a browser, right click on the image when it has displayed, selected properties from the submenu, then make a note of the height and width in the properties box.
The vspace and hspace based specifies the number of pixels of margin that there will be around the picture. This prevents text wrapping around the picture from being so close to it that he cannot be read easily. A figure of seven is normally the smallest that is suitable for easy readability.
The align parameter tells the browser to push the picture to the left (or right if right is specified), and also specified that text is allowed to wrap around the image. If this parameter is omitted, then text will not be wrapped around the image, and sometimes it is better to show an image without text around it.
Finally the alt text is what will be shown if image display is turned off in the browser, or if the cursor is placed over the image, and it is what will be read out by a screen reader.
Now, in order to demonstrate how this will look, take any text of your own that runs on for a reasonable number of lines, and place it in between the first paragraph tags. In order to make a link as an example, typing the following code for the next paragraph.
<p> Here is a link to <a href="http://www.tolkiensociety.org/">The Tolkien Society</a> for which the author of this article is the Webmaster.</p>
Web pages are peculiar in that it is necessary to use codes to display is certain well-known symbols. For example, quote marks should not be used in the content of the page. Instead the symbol " (note the final semicolon) should be used. Quote marks will normally display in most browsers set up for the English region, but different language sets may displayed weird and wonderful symbols instead. The British currency symbol should be displayed using £ and there are many other symbols for which a special code should be used in order to avoid the problem that some people may see something entirely different from what you intended.
The web page supporting this article has links to one or two sources of reference material for those wishing for a simple reference book, if you can obtain a copy, I recommend Instant HTML by Steve Wright published by WROX publishers. This actually covers a superseded version of HTML, HTML 3.2, but it serves as a useful reference for the standard tags, and for the codes for most symbols. It is also true that, although some techniques have changed and more complex things are possible, the way that the basic HTML coding is carried out in HTML 3.2, is mostly valid for subsequent issues. It has fallen out of print since this was written, but if you find a second hand copy it might be useful for anyone in the early stages of learning.