HTML pages are processed and displayed by a browser that you must use. The most widely known browsers are the Internet Explorer which equip all Windows systems and the Netscape navigator that you can download for free from the internet.
1. A simple HTML page
1.1 The source document
In its simple form, an HTML page is simple enough. This is a sample HTML page that presents a text with the minimum of code needed to make it reasonably readable:
<HTML><HEAD><TITLE>WALDEN POND</TITLE></HEAD>
<BODY>
Walden Pond
<p>
Walden is blue at one time and green at another, even from the same point of view. Viewed from a hill-top it reflects the color of the sky, but near at hand it is of a yellowish tint next the shore where you can see the sand, then a light green, which gradually deepens to a uniform dark green in the body of the pond...
<p>
The water is so transparent that the bottom can easily be discerned at the depth of twenty-five or thirty feet. Paddling over it, you may see many feet beneath the surface the schools of perch and shiners, perhaps only an inch long, yet the former easily distinguished by their transverse bars, and you think that they must be ascetic fish that find a subsistence there...
<p>
Henry D. Thoreau<br>
Walden or life in the woods
</BODY>
</HTML>
1.2 HTML markups
In the example, the blue color is used to highlight the codes that are part of the HTML language. The color is not part of the language, you can write the page all in black.The few codes used in the page are:
| <HTML> | starts the HTML page |
| <HEAD> | starts a header to the page - in this example it contains a title as described in the following |
| <TITLE> | marks the beginning of a title that will be displayed on the title bar of your browser - the title used in this page is "WALDEN POND" |
| </TITLE> | marks the end of the title |
| </HEAD> | marks the end of the header |
| <BODY> | marks the start of the body of the page text |
| <br> | commands a line break |
| <p> | commands a line break and the skipping of one line |
| </BODY> | marks the end of the body of the page text |
| </HTML> | marks the end of the HTML page |
These codes are words enclosed within the < and > signs. They are some of the markups that compose the HTML language.
The HTML language is case insensitive, i.e. you can code the words within the < and > brackets indifferently in upper or lower case. For instance, you can write <html> instead of <HTML>, or <P> instead of <p>.
1.3 Tags, contents and elements
As you may have noticed, most of the markups go by pair of the same name, one at the start, one at the end of some part of the page. These are :| - | the <HTML> - </HTML> pair that encloses the whole of the page |
| - | the <HEAD> - </HEAD> pair that encloses the page header |
| - | the <TITLE> - </TITLE> pair that encloses the page title |
| - | the <BODY> - </BODY> pair that encloses the body of the page text |
The first part of the pair is called a start tag ; the second part of the pair an end tag.
The start tag and the end tag along with the characters contained in between them make up an element. The characters comprised between the tags compose the content of the element.
You do not see an end tag for the <p> markup. It is optional. The <p> tag marks the start of a paragraph. You may use a </p> tag to mark the end of it ; but there is no need for it, as the subsequent <p> that marks the start of the next paragraph also marks the end of the preceding one.
1.4 HTML files
You save this document under a name having the suffix '.html', for instance 'Walden.html'. HTML files usually have this suffix.1.5 Displaying the document
You display the document using a browser such as Internet Explorer, or Netscape. When you open the file, the document will be displayed like this :
To open the file, you can also double-click on it. The browser that will be called to display the page will be the default browser of your system (if you or someone defined one).
The next thing you would like to do may be to link to another document, since the main interest of HTML pages is to allow navigation among pages.2.1 A sample code
To link to another page you use the <A href> markup.You can add the following to your 'Walden.html' page, just before the </BODY> tag :
<P>
To see more on Walden Pond, <A href="WaldenPond.html">click here...</A>.
Your page will be displayed as something like this, with the new line you added to its bottom.:
2.2 Following the link
Before clicking on these words read this first: clicking on these word will make you leave the present page; to get back, click on the left arrow that will be somewhere at the top of the document where the clicking will get you.Now click on the words 'click here...' to switch to the document contained in the'WaldenPond.html' file.
<A href="WaldenPond.html">
is an instance of the 'A' markup.
href is an attribute whose value is the URI of the document to be linked to. In the present instance, the URI is the name of the file that contains the document ; the URI is as simple as that when the document to be linked to is in the same directory as the document from which the link is used. For more details on URI's click on this link
The text between the start tag <A href=...> and the end tag </A> is generally enhanced in some way so that you know that it is a link. This is most usually by displaying it in blue, with an underline. Usually also the color changes after you clicked on the link (the link is said to be visited).
When you click on the link, the document identified by its URI as coded in the value of the href attribute will be displayed in place of the document where the link was clicked. That is if a document matching the URI exists; if not, a message may be displayed, or it may be a blank page, or nothing happens, depending on the browser you use.
In the above example, a link was created to a document. Clicking on the link gets you to the beginning of the document. It is possible to create a link to a precise location within a document. A more detailed treatment of link is presented in the chapter HTMLHyperLink.html
In the above, the document was displayed as plain uniform text. Even in an introductory reading you may want to know some more. Some possibilities of highlighting text are discussed here. Please refer to the Table of contents for more.3.1 Character shapes and colors
Here is the sample page as modified by some additional markups to enhance the text presentation.
<HTML><HEAD><TITLE></font>WALDEN POND</TITLE><HEAD><br>
<BODY>
<span style="color:red; font-size : 110%; font-weight: bold;">Walden Pond</span>
<p>
Walden is blue at one time and green at another, even from the same point of view. Viewed from a hill-top it reflects the color of the sky, but near at hand it is of a yellowish tint next the shore where you can see the sand, then a light green, which gradually deepens to a uniform dark green in the body of the pond...
<p>
The water is so transparent that the bottom can easily be discerned at the depth of twenty-five or thirty feet. Paddling over it, you may see many feet beneath the surface the schools of perch and shiners, perhaps only an inch long, yet the former easily distinguished by their transverse bars, and you think that they must be ascetic fish that find a subsistence there...
<p>
<b>Henry D. Thoreau</b><br>
<i>Walden or life in the woods</i>
<p>
To see more on <span style="color :blue">Walden Pond</span>, <A href="WaldenPond.html">click here...</A>
</BODY>
</HTML>
In the modified page the newly added markups are made to standout in red. They are the following:
| <span> | delimits (between its start and its end tag) a sequence of text to be given a presentation style. This is achieved by means of the style attribute which specifies a number of style properties for the delimited text sequence -- the properties defined in the first occurrence of the span element are:
| |||||||||
| <b> | indicates that the characters comprised between the start and the end tags are to be bold-faced | |||||||||
| <i> | indicated that the characters comprised between the start and the end tags are to be in italics |
The page will be presented as follows :
Suppose your document has many headings like "Walden Pond" which you want to display in red and enlarged bold characters. Instead of repeating the markup <span ...> with all its attributes time and again, you can use a markup with a single attribute stating its class, and define all the attributes of the class in the style sheet, like this :
<p class="boldred">Walden Pond</p>
The 'p' markup used here is stated to be of the 'boldred' class, whose particulars are to be defined in the style sheet.
The style sheet can be coded in a "STYLE" element to be set in the content of the "HEAD" element like this:
<HTML>
<HEAD>
<TITLE>WALDEN POND</TITLE>
<STYLE>
p.boldred {font-size: 110%; font-weight: bold; color: red;}
</STYLE>
</HEAD>
...
The signification of the code in the 'STYLE' element is this:
| p.boldred | stands for 'p' markup of the class 'boldred' -- this is a selector that says that what follows within the curly braces are properties pertaining to 'p' markups of the designated class |
| font-size | is a property that defines the character size; the value of 110% says that the characters are to be 10% larger that the general size |
| font-weight | defines the character face, which is 'bold' here |
| color | defines the color of the characters contained in the element, which is assigned the value 'red' |
The style sheet can be coded on a separate page linked to by a <LINK> markup. More on it in the HTMLStyle.html document.
4. Inserting an image
One last thing that you may wish to see in this introductory chapter is how images are to be displayed.An image may be displayed using the <IMG> markup.
Here is the whole page again:
<HTML>
<HEAD>
<TITLE>WALDEN POND</TITLE>
<STYLE>
p.boldred {font-size: 120%; font-weight: bold; color: red; }
img.pond {float: left; margin: 0.3em;}
</STYLE>
</HEAD>
<BODY>
<p class="boldred">Walden Pond</p>
Walden is blue at one time and green at another, even from the same point of view. Viewed from a hill-top it reflects the color of the sky, but near at hand it is of a yellowish tint next the shore where you can see the sand, <IMG class="pond" src="pond.jpg" width="210" height="150"> then a light green, which gradually deepens to a uniform dark green in the body of the pond...
<p>
The water is so transparent that the bottom can easily be discerned at the depth of twenty-five or thirty feet. Paddling over it, you may see many feet beneath the surface the schools of perch and shiners, perhaps only an inch long, yet the former easily distinguished by their transverse bars, and you think that they must be ascetic fish that find a subsistence there...
<p>
<b>Henry D. Thoreau</b><br>
<i>Walden or life in the woods</i>
<p>
To see more on <font color="blue">Walden Pond</font>, <A href="WaldenPond.html">click here...</A>
</BODY>
</HTML>
The IMG markup identifies the image to insert in the page:
| class | the class attribute specifies the class to which this IMG markup is assigned -- this class is called "pond" |
| src | the src attribute locates the image by its URI -- as the image file is in the same directory as the present document, here, its URI is simply its file name |
| width | the width attribute defines the image width, in number of pixels |
| height | the height attribute defines the image height, in number of pixels |
The particulars of IMG markups of the "pond" class are defined in the style sheet, under the heading of "img.pond":
| float | this property which is assigned the value of 'left' states that the image is to float to the left, i.e. it is to be moved to the left edge of the page, from where the <img> markup is inserted, and the surrounding text is to flow on its right side -- without the float property, the image would occupy the entire page width, with text running above and below it. |
| margin | this property defines the white margin to surround the image. 'em' is a length unit that is equal to the height of a line. |
The page will be displayed like:
then a light green, which gradually deepens to a uniform dark green in the body of the pond...
