4umi.com/web/html/basics

Mark up your language

4umi web

The days that only monks would write are over. Today building webpages is being taught in grammar school. And why not? The fundamentals of rerouting, pinging and caching are not necessary knowledge, but neither did every monk know how his ink was made. Besides, lacking the most elementary design skills or even a basic spelling discipline has not stopped many thouands from putting their outbursts of creativity online.

Hypertext

Webpages are essentially text documents. The computer language in which they are written is HTML, an abbreviation of HyperText Markup Language, and therefore hardly a computer language if at all. Once you get the idea, marking up a link tag is as simple as dragging your mouse across it.

Hyper is text which may contain links to other texts when viewed with the right equipment. The first real “browser” program was written in 1990 by engineer Tim Berners-Lee, who is also credited with inventing browsing and hypertext itself. The idea may have been older, but the implementation was his. Still is. Currently he is directing the W3C or World Wide Web Consortium, a collection of about 400 companies and public interest groups, whose sole raison d' être is to try and maintain some unity in the countless initiatives. The power of the digital technology combined with human imagination is becoming better known day by day. Microsoft's browser is automatically installed with any Microsoft product, and since 90% of the world's computers run Microsofts products, Internet Explorer is now the most used browser, but it adheres to standards set by the W3C, so that webpages may be written without dependance on Microsoft.

Mark up

A markup language is a way of embedding information about a text into that text. Depending on the markup language used (the current standard, HTML 4.0 allows more than HTML 2.0), a text may also contain images and other objects, such as forms and scripts, to the point where the reader becomes the writer.

These items are represented in the text by “tags”. Tags are the words in which the markup language is written. A text is marked up by wrapping tags around it, that is inserting some code just before and just after the text: an opening and an end tag. A tag begins with a < or less-than character, and ends with >, the greater-than character. An end tag has a / or slash preceding the tag name.

At its simplest, an opening tag looks like this:

If it contains extra information, it will take this form:

The corresponding closing tag has a slash:

Some tags are wrapped around parts of the text to mark it up, other tags stand on their own. They have no end tag. The opening tag may—and in some cases must—contain extra information following the tag word. For example, a link without an url to link to, is no link.

Common tags

For more detail, see a list of all tags in the HTML4 standard.

DisplayCode
The bold tag The <b>bold</b> tag
The underline tag The <u>underline</u> tag
A link A <a href="http://yahoo.com/">link</a>
alternative text <img src="http://4umi.com/image/icon/ext/img.gif" width="15" alt="alternative text">
The break tag
creates a new line.
The break tag<br>creates a new line.
A new line does not. A new line
does not.
Some very small text Some <small><small>very</small> small</small> text

Nesting

Like the last example shows, tags may be nested in one another, like matreshka, the Russian doll that contains another doll that contains... In fact, every proper webpage is one big <html> tag which contains a <head> and a <body> tag. The head is for meta-information such as the document's title, styles, scripts and indeed <meta> tags. The body contains the actual content. This paragraph is a <p> tag embedded in the <body> tag embedded in a <html> tag.

 Nested tags.

Errors

Errors occur when tags are not properly nested. Browsers should then "guess" the author's intention, and may produce unpredictable results, such as text in the wrong place or the wrong style.

The paragraph tag and the bold tag in the following example are mixed up:

Correctly nested, this would be:

Other errors come from impossible nests. Following their nature, some tags cannot be contained within others. For example, a <tr> tag, a table row, may only contain <td> tags, table cells.