Learning objectives

When you have completed this session, you should be able to

list the most important elements of an HTML document
create your first simple webpage.

HTML history

html In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in the last part of 1990. In that year, Berners-Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request for funding, but the project was not formally adopted by CERN. In his personal notes from 1990 he lists "some of the many areas in which hypertext is used" and puts an encyclopedia first.

An HTML document, HTML elements

An HTML element is an individual component of an HTML document. HTML documents are composed of a tree of HTML elements and other nodes, such as text nodes. Each element can have attributes specified. Elements can also have content, including other elements and text. HTML elements represent semantics, or meaning. For example, the title element represents the title of the document.

In the HTML syntax, most elements are written with a start tag and an end tag, with the content in between. Tags are composed of the name of the element, surrounded by angle brackets. An end tag also has a slash after the opening angle bracket, to distinguish it from the start tag. For example, a paragraph, which is represented by the p element, would be written as

<p>In the HTML syntax, most elements are written ...</p>

However, not all of these elements require the end tag, or even the start tag, to be present. Some elements, the so-called void elements don't have an end tag. A typical example is the br element, which represents a significant line break, such as in a poem or an address. For example, the address of the dentist in Finding Nemo would be written as

<p>P. Sherman<br>42 Wallaby Way<br>Sydney</p>

Attributes are specified on the start tag. For example, the abbr element, which represents an abbreviation, expects a title attribute with its expansion. This would be written as

<abbr title="Hyper Text Markup Language">HTML</abbr>

This is a simple html code:

<HTML>
<HEAD>
<TITLE> ”Hello world!” HTML document </TITLE>
</HEAD>
<BODY>
<P>Hello world!</p>
</BODY>
</HTML>

Let's try it: enter the text above in the left side into an ASCII word processor, like Notepad and save it as first.htm (it is important, that the extension should be htm !). After that open this file in a web-browser and chech the result!

We have used five tags in this sample: HTML, HEAD, TITLE, P, BODY.

The HTML tag closes the whole document. HEAD contains the head of the page, BODY is the real content, the text that appears. Inside the heading there is the TITLE and its text appears in the titlebar of the browser application.

Elements (tags) consist of two parts which close the text that appears on the webpage like parentheses (brackets).

Rules

There are multiple kinds of HTML elements: void elements, raw text elements, and normal elements.

Void elements only have a start tag, which contains any attributes. One example is the link element, for which the syntax is

<link rel=stylesheet href=fancy.css type="text/css">

This link element points the browser at a stylesheet to use when presenting the HTML document to the user. Note that in the HTML syntax, attributes don't have to be quoted. When using the XML syntax (XHTML), on the other hand, all attributes must be quoted, and a trailing slash is required before the last angle bracket:

<link rel="stylesheet" href="fancy.css" type="text/css" />

Raw text elements are constructed with:

* a start tag (<tag>) marking the beginning of an element, which may incorporate any number of attributes;
* some amount of text content, but no elements (all tags, apart from the applicable end tag, will be interpreted as content);
* an end tag, in which the element name is prepended with a forward slash: </tag>. In some versions of HTML, the end tag is optional for some elements. The end tag is required in XHTML.

Normal elements usually have both a start tag and an end tag, although for some elements the end tag, or both tags, can be omitted. It is constructed in a similar way:

* a start tag (<tag>) marking the beginning of an element, which may incorporate any number of attributes;
* some amount of content, including text and other elements;
* an end tag, in which the element name is prepended with a forward slash: </tag>.

Attributes define desired behavior or indicate additional element properties. Most attributes require a value. In HTML, the value can be left unquoted if it doesn't include spaces (name=value), or it can be quoted with single or double quotes (name='value' or name="value"). In XML, those quotes are required. Boolean attributes, on the other hand, don't require a value to be specified. An example is the checked for checkboxes:

<input type=checkbox checked>

In the XML syntax, though, the name should be repeated as the value:

<input type="checkbox" checked="checked"/>

Informally, HTML elements are sometimes referred to as "tags" (an example of synecdoche), though many prefer the term tag strictly in reference to the markup delimiting the start and end of an element.

Element (and attribute) names may be written in any combination of upper or lower case in HTML, but must be in lower case in XHTML. The canonical form was upper-case until HTML 4, and was used in HTML specifications, but in recent years, lower-case has become more common.

You will find practical information about editing a webpage in Moodle in the book TC03 - Website editing !

References:

[1] Bócz Péter: A világháló lehetőségei, ComputerBooks, Budapest, 2001.

[2] Paczona Zoltán: HTML technikák a gyakorlatban, Computer Panoráma, 2001. => http://franka-egom.ofm.hu/segedanyagok/html_konyv.pdf (TÖRÖLT LINK!!!)

[3] Wikipedia