Writing text in HTML for beginners

© Paul Cooijmans - certified computer programmer, certified web designer, CCNA

Introduction

HTML - HyperText Markup Language - is the computer language in which web pages are written. An HTML file can be viewed in any browser and is therefore platform independent, contrary to a word processor file. An HTML file is also very much lighter in size than a word processor file, so that it can be sent via e-mail quicker and takes up less disk space.

Below is explained how a text can be put in HTML in a simple way. Only the most elementary aspects of HTML are considered. For further study one may consult a book or web tutorial. For writing text with simple layout in HTML though these elementary matters suffice.

The template

First, make a template for all future documents. Start a text editor, like Notepad. Type (or copy and paste) the following:

<html>
<head>
<title></title>
</head>

<body>



</body>
</html>

End with an empty line (Enter), invisible here of course. Save the file under the name template.html . Also allowed is template.htm ; in the past extensions were only permitted to consist of three letters, hence the habit of using .htm instead of .html.

Note that when saving, in the box "Save as type:" one must choose the option "all files", otherwise the extension .txt will be added (by Notepad).

A first text

Write a text in your regular word processor. This has the advantages of automatic spell checking and word completion. Keep the following in mind:

1 Everything you write is either a "heading" or a paragraph.

2 Paragraphs are separated by whitespace.

3 A paragraph consists either of normal text or of a vertical list, like:

John
Pete
Jack
Etc.

4 If a paragraph consists of normal text, do not manually start a new line within the paragraph; this is useless because when viewing the eventual file there will always be automatic word wrap at the end of each line. And the exact wrapping positions are unpredictable, as they depend on the screen resolution and browser settings of the reader, and on the way in which the text will be placed between the navigation elements on the eventual web page by the web master. When a wrapping position accidentally coincides with a manual new line, no one will see the difference.

When the text is ready, select it (e.g. with Ctrl-a or with the mouse) and copy it with Ctrl-c.

Open the file template.html in the text editor (Notepad) and save it right away under a different name, e.g. text1.html. Do not use spaces in file names.

Paste the text between the <body> en </body> tags with Ctrl-v. Everything between those tags forms the visible content of the page. Now you have something like:

<html>
<head>
<title></title>
</head>

<body>

My parakeet

I have a parakeet named Pietje. He can fly and play well. In the daytime he is allowed out of his cage. He eats and drinks in his cage. He has many toys:

Pietje's toys

A mirror
A bell
Another mirror
Another bell
And much much more

This concludes the article about Pietje the parakeet.

</body>
</html>

Copy the title, here "My parakeet", and paste it between the <title> en </title> tags. What is between those is not visible on the page, but displayed on top of the browser window. Also, search engines use this title for indexing the page.

Save the file. Find it and open it by double-clicking; it is opened in the standard browser. It will show all off the text crammed together. Some more HTML code is needed to shape the page.

Put the title (the one between the body tags) between <h1> en </h1>, so like this (the h is for heading, headline):

<h1>My parakeet</h1>

The browser will now display it big, bold and surrounded by whitespace. A secondary heading can be made with <h2> en </h2>:

<h2>Pietje's toys</h2>

For yet smaller headings <h3> to <h5> are available.

A paragraph is made with <p> and </p>:

<p>I have a parakeet named Pietje. He can fly and play well. In the daytime he is allowed out of his cage. He eats and drinks in his cage. He has many toys:</p>

The browser will take care of surrounding whitespace and word wrap.

The vertical list may be done as follows:

<p>A mirror<br>
A bell<br>
Another mirror<br>
Another bell<br>
And much much more</p>

The <br> tag starts a new line. To save time you can type it once, and then copy and paste where needed. Just pushing Enter does not produce a new line in HTML.

Altogether we now have:

<html>
<head>
<title>My parakeet</title>
</head>

<body>

<h1>My parakeet</h1>

<p>I have a parakeet named Pietje. He can fly and play well. In the daytime he is allowed out of his cage. He eats and drinks in his cage. He has many toys:</p>

<h2>Pietje's toys</h2>

<p>A mirror<br>
A bell<br>
Another bell<br>
Another mirror<br>
And much much more</p>

<p>This concludes the article about Pietje the parakeet.</p>

</body>
</html>

Save and view the page in a browser. The text will look normal now.

Bold, italic and hyperlinks

To make a piece of text bold there are the <b> en </b> tags:

<b>This is displayed bold</b>

Italic requires <i> en </i>:

<i>And this italic</i>

A hyperlink is made wih <a href=" "> and </a> (a for anchor, href for hyper reference), where the target of the link is placed between the quotation marks:

<a href="http://www.paulcooijmans.com/">To the web page of Paul Cooijmans</a>

If the target is a file in the same folder as the page itself, only the file name needs needs to be between the quotation marks:

<a href="animals.html">Read about my other pets</a>

A hyperlink is by default displayed blue and underlined.

Special characters

Because the characters < and > are interpreted (so not displayed) by the browser, special codes are needed in the event one wishes to use them in the text itself, to wit &lt; and &gt; (less than and greater than).

And since the character & therefore is interpreted as well, that too, to be displayed, requires a code, to wit &amp; (for ampersand).

Also it is good to know that consecutive spaces are ignored in HTML, and shown as one space. To align things with spaces therefore is not possible. However, there is a code that allows one to display multiple spaces still, to wit &nbsp; (no-break space). For example:

&nbsp; &nbsp; &nbsp; &nbsp;

This yields seven spaces, three of which are ordinary spaces included between the no-break spaces. (The no-break space may also serve to prevent word wrap between two words that surround it.)

Conclusion

If one is interested in further study of HTML, a good tutorial is on http://www.w3schools.com/. Good books on HTML and other computer languages are available from the publisher O'Reilly.

As one advances one may feel the need to have a program that quickens the writing of HTML tags. A good free one, 1stPage 2000, can be downloaded for free from Evrsoft. With a program like that it is no longer needed to type all of the tags manually; one can make them appear by clicking on buttons then. The use of the program of course takes some practice.