HTML Concepts
The purpose of this presentation of HTML language is to describe the basic concepts of HTML (HyperText Markup Language). This is obviously not an exhaustive description of HTML, but it may be useful in better understanding of the code defining the generated site.
For a more detailed description of HTML, there are many references offering every level of detail, and there are many sites accessible online. The site
http://www.W3.org/, of the World Wide Web Consortium, provides access to HTML specifications and offers numerous links to sites that discuss HTML and related subjects.
Presentation
Use
The initial purpose of HTML was to distribute information on the Internet, but the technique is now widely used within companies in their Intranets.
HTML is used to describe documents that may contain text, images, and links to other pages called hyperlinks. The information contained in the document is used by a browser, such as Firefox or Microsoft Internet Explorer, to display the document contents in a possibly complex format.
Hyperlinks provide access to other documents. When the user clicks on a hyperlink, the document it points to is displayed in a new window, or in a frame if the window is divided into frames.
Tags
The basic principle of HTML is the use of tags, ranging from simple to complex. An example of a simple tag is the use of <B> to display text in bold:
<B>This text is displayed in bold</B>
which gives the following result:
This text is displayed in bold
With standard 4.0 compatible navigator versions, the use of formatting tags such as <font> is not recommended. This standard provides for use of styles, either internal to the page or applied in the header (see below). However, these tags are still recognized and enable rapid application of a format when required.
The current recommendation is to replace these tags with <SPAN style :bold> tags combined with </SPAN> tags. However, the evolution of recommended standards, the fact that HTML codes vary as a function of the navigator and the compatibility with previous versions that is required mean that Web site creators have a wide choice for their HTML processing.
Tags are placed between < and >, most often in pairs, as was seen in the above example. The end tag is identical to the start tag, but is preceded by a slash. For certain tags, only the start tag is required, but an unnecessary end tag generally does not cause problems.
Tags can be nested:
<B>This text is in bold, <I>now in bold italic,</B> now not in bold but still italic, </I> now normal.
which gives the following result:
This text is in bold, now in bold italic, now not in bold but still italic, now normal.
Structure of HTML Documents
The basic structure of HTML documents is as follows:
<HTML>
<HEAD>
<TITLE>Simple HTML Document</TITLE>
</HEAD>
<BODY>
<P>This is a very simple document.
</BODY>
</HTML>
• The tag <HTML>, which begins all HTML documents, indicates to the browser that there are HTML tags to be interpreted. The end tag </HTML> indicates the end of the document.
• The tag <HEAD> defines the header of the document, which contains:
• Between the <META> tags, keywords used by search engines or for other purposes.
• The title (<TITLE> tags), which will be displayed as the title of the browser window.
• The style sheet (<SHEET> tags), a quick way to define a format for displaying various elements in the page.
• Next, the <BODY> tag indicates the start of the body of the document, composed of text, images, and multimedia objects.
• The <P> tag, which indicates a new paragraph, is frequently used in the body of a document.
Hyperlinks
Hyperlinks to other locations are indicated by the <A HREF> tags, which contain the address of the text, image or other referenced object. When the user clicks on the hyperlink, its content is then displayed, either by replacing the contents of the browser window or inside a frame in the main window. The referenced element can also be another part of the same document. Hyperlinks are generally displayed in a different color than ordinary text. In addition, when the pointer is on a hyperlink, its shape changes.
A hyperlink is defined as follows:
Click <A HREF="//www.mega.com/">here</A> to visit our site.
In this example, “here” is underlined to show that it is a link, but the way links are actually displayed depends on browser configuration.
The address appears inside quotation marks. These can be omitted if the address contains no spaces.
Special characters such as quotation marks are coded so that the browser does not interpret them as separators. For example, “"” replaces quotation marks, “<” replaces “<”, “>” replaces “>” (the semicolon is part of the code). Letters with accents are theoretically coded, but most newer browsers recognize them as is.
It is possible to create several addresses in the same document, to allow jumping to a specific point in a document.
When the location indicated for the jump already appears on the screen, it might be wrongly assumed that the jump has not operated.
The tag for defining an address is:
<A NAME="Complinfor">
A jump to this address would be indicated as follows:
For more information see <A HREF="Info.htm#Complinfor">Other Information</A>
It is also possible to indicate a relative path (../xxx.htm). (This is a normal slash and not the usual backslash.)
The name of the page can be omitted if the link refers to another point in the same document.
For example: HREF="#Complinfor".
Other HTML Tags
There are several tags for defining the color of the element concerned. This color can be indicated by using colors predefined in HTML (black, purple) or by their Red/Green/Blue hexadecimal value (#FF0000=red, #00FF00=blue, #0000FF=green, #000000=black; the # can be omitted with certain browsers).
Other tags are used to define text formatting, create lists, tables, etc., as well as to define a document structure using different levels of sub-headers (<H1>, <H2>, …).