Some HTML information
HTML stands for HyperText Markup Language. But don't let that worry you! It's just a simple system for telling your browser (eg, Internet Explorer, Netscape or Opera) how you want your words and images to look.
Each HTML command is called a "tag". Each tag is enclosed by angle brackets (< & >).
And almost every tag is paired with a closing tag, telling the browser when to stop making the text bold, or italic, etc. The closing tag is the same as the opening tag, but starts with a slash (/).
So, the basic grammar is: <tag>Text to be changed</tag>.
Tags are not case sensitive. eg, <TaG>...</tAG> is perfectly valid. Hard to read, so not recommended, but valid.
Simple HTML formatting
Just a few pointers to gussy up your pages!
| Tag | Description | Example |
| <b>...</b> | Bolds the selected text | This is bold. This is <b>bold</b>. |
| <i>...</i> | Italicises the selected text | This is italic. This is <i>italic</i>. |
| <u>...</u> | Underlines the selected text | This is underlined. This is <u>underlined</u>. |
| <strike>...</strike> | Strikes through the selected text | This is This is <strike>struck through</strike>. |
And, of course, you can combine!
This is underlined and bold!
This is <u>underlined and <b>bold</b></u>!
Images
You can also add in images:
<img src="http://www.bookcrossing.com/images/RunningBook33.gif" height="33" width="33">
You will no doubt notice that the image tag is quite a different tag to those described above:
- There is no closing tag
- There are three extra bits of information within the tag
A closing tag is not needed on image tags, as they are self-contained.
The extra bits of information are called "attributes".
The first attribute (although the order is not fixed) is the src ("source") attribute. It tells the browser where to find the image.
The second and third attributes give the dimensions of the images (height and width). These help the browser to decide how much space to leave the image while rendering. While not essential, they can help the page to render faster, which is nice for the readers.
There are further attributes that can be given. The only essential one is the src attribute.
Links
Finally, you can add in links (also known as "hyperlinks") to other pages.
The Land of Laughs, Jonathan Carroll
<a href="http://www.bookcrossing.com/journal/1665160"><i>The Land of Laughs</i>, Jonathan Carroll</a>
The a tag is similar to the img tag in that it contains an attribute. This attribute (href) gives the location of the link.
Another useful attribute for the a tag is target. This allows the link to be opened in a new window.
eg, Books were meant to be free!
<a href="http://tqd.bookcrossing.com/" target="_blank">Books were meant to be free!</a>
And, finally, you can combine links with images (if you hover over the image below, you will get a hand cursor, indicating that the image is hyperlinked):
Books were meant to be free!
<a href="http://tqd.bookcrossing.com/"><img src="http://www.bookcrossing.com/images/RunningBook33.gif" height="33" width="33" border="0">Books were meant to be free!</a>
Note the use of the new attribute border in the img tag. That removes the unsightly border that will otherwise appear around hyperlinked images.