HTML Tutorial

1) Introduction

To create a web page, you first need to create a simple text file. Rename the text file and change the extension from txt to html (for instance, rename from XXX.txt to XXX.html). Opening the file with a text editor (like wordpad or emacs) will allow you to edit the source code defining how your web page should be built. Opening the file with a web browser (like Internet Explorer or Firefox) will allow you to see the actual web page resulting from the source code you are writting.

The HTML language is defined with some tags. Anything located in between the opening tag <TAG> and the closing tag </TAG> will be displayed with the properties of the tag.

	<TAG>My text</TAG>

Some tags also accept optional parameters which can be defined inside the body of the opening tag :

	<TAG PARAM1="param1Value" PARAM2="blabla" PARAM3="otherValue">My text</TAG>

Finally, some tags just have a local action and do not really activate a specific formatting for what follows. Those consequently do not explicitely need to be matched by their closing tag.

	Some text<TAG>Some more text

2) Basic Structure

The most basic squeleton defining the structure of a web page would read :

<HTML>
	<HEAD>
		<TITLE>
			Here is the title of the web page.
		</TITLE>
	</HEAD>
	<BODY>
		Here is the content of the web page.
	</BODY>
</HTML>

The tags <HTML> and </HTML> define the begining and the end of your source code which should obviously be placed in between them. The source code is then split in 2 parts :

<HEAD> </HEAD> : this defines the header of your page. In this section, you can for instance specify the title of the window using <TITLE> and </TITLE>.
<BODY> </BODY> : this defines the body of your page. In this section will be placed the content of your web page such as text, images, links...

If you type this basic squeleton in your source code, save it, and open your document with a web browser, you will see the corresponding web page being displayed. Hence, the previous section defines by itself a complete web page, quite boring and minimalist though, but complete.

Now try to replace <BODY> with <BODY BGCOLOR="blue" TEXT="red">, save your source code, and reload the page in your web browser. You can then see the effect of the additional parameters provided to the tag <BODY> which define the color of the background (BGCOLOR) and the color of the text (TEXT).

To get more familiar with the web page you've just created, you can try to :

change the title
modify the text of the body
change the background color (BGCOLOR="green" for instance)
change the text color (TEXT="yellow" for instance)

Note that you will need to save the source code and reload the web page in your browser to see the effect of the modifications you made to the source code.

Now let's study what you can put in between the <BODY> and </BODY> of your web page.

3) Text Formatting Tags

The way your source code is arranged doesn't really matter, leaving blank spaces and inserting empty lines will just make your source code easier to read and to understand for the programmer (that's you !), but won't change anything in the way your final web page will look like. For instance :

Source Code	Resulting Web Page
Here is a first line Here is not a second one because it is the same line	Here is a first line Here is not a second one because it is the same line

In order to make the text in the final web page start to a new line, you must consequently use the line breaker tag <BR>. This tag just breaks the current flow of the text and starts a new line where inserted in the source code, but doesn't actually define how the following text should be formatted. Consequently, this tag doesn't require to be matched by its corresponding closing tag </BR>. For instance :

Source Code	Resulting Web Page
Here is a first line<BR>Here is a second one<BR><BR>And a third...	Here is a first line Here is a second one And a third...

Now let's look at some tags that will activate a specific formatting which will be applied to the text following them. Since those tags "activate" a formatting, the opening tag needs to be matched by its corresponding closing tag in order to deactivate the formatting after being done using it. For instance, the tag <U> displays the text underlined.

Source Code	Resulting Web Page
not underlined <U> underlined </U> not underlined either	not underlined underlined not underlined either

Some other useful tags are :

<H?> </H?> : displays the text as a heading (title of a section for instance), where the ? stands for a number between 1 and 6 which defines the size of the heading (the number should be identical in both tags)
<B> </B> : displays the text in bold
<I> </I> : displays the text in italic
<U> </U> : displays the text underlined
<CENTER> </CENTER> : centers the text horizontaly in the page
<PRE> </PRE> : displays the text as is written in the source code including spaces and empty lines (hence preformatted)

Now, you can try combining some of those tags together in the body of your web page, for instance in bold and in italic :

Source Code	Resulting Web Page
<B><I>My text is both in bold and in italic</I></B>	*My text is both in bold and in italic*

You can also try to interleave them :

Source Code	Resulting Web Page
normal <B> bold <U> bold and underlined </B> underlined </U> normal	normal bold bold and underlined underlined normal

4) Hyperlink Tag

Creating a hyperlink (to another page for instance) is done by using the tag :

	<A HREF="targetOfTheLink">where to click to follow the link</A>

The link can be relative to the current directory, for instance pointing to a file in a subdirectory of where the page is located :

Source Code	Resulting Web Page
<A HREF="MyWebFolder/MyDocument.txt">Relative link to my document</A>	Relative link to my document

The link can also be absolute, meaning that it will contain the whole path, starting from the root directory :

Source Code	Resulting Web Page
<A HREF="C:/Public_html/MyWebFolder">Absolute link to my folder</A>	Absolute link to my folder

The link can also point to another web page, either local (proceed as for the first case, replacing "Data/document.txt" with "NameOfTheFolder/otherWebPage.html"), or on the web, as in the following example :

Source Code	Resulting Web Page
<A HREF="http://www.google.com/">Link to Google</A>	Link to Google

5) Other Useful Tags

To insert an image in your page, use :

Source Code	Resulting Web Page
<IMG SRC="MyWebFolder/MyImage.jpg">

You can also use an image as the link to follow a hyperlink :

Source Code	Resulting Web Page
<A HREF="http://www.google.com"> <IMG SRC="MyWebFolder/MyImage.jpg"> </A>

Unordered lists use the tags <UL> </UL> which delimit the list. Inside the list, each item is specified preceeded by the tag <LI> :

Source Code	Resulting Web Page
<UL> <LI> Item 1 <LI> Item 2 <LI> Item 3 </UL>	Item 1 Item 2 Item 3

Tables are defined by the tags <TABLE> </TABLE>. The tags <TR> </TR> define a new row (vertically) whithin the table, while the tags <TD> </TD> define a new cell (horizontally) whithin the row :

Source Code

Resulting Web Page

<TABLE BORDER=2>
	<TR>
		<TD>Row 1 Cell 1</TD>
		<TD>Row 1 Cell 2</TD>
	</TR>
	<TR>
		<TD>Row 2 Cell 1</TD>
		<TD>Row 2 Cell 2</TD>
	</TR>
	<TR>
		<TD>Row 3 Cell 1</TD>
		<TD>Row 3 Cell 2</TD>
	</TR>
</TABLE>

Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2
Row 3 Cell 1	Row 3 Cell 2

6) Other Resources

If you need a "more in depth" tutorial, I guess googling for it will probably lead you to what you are looking for. For someone slightly familiar with HTML, I would recommend The Bare Bones Guide to HTML (also available in other languages) which gives a clear and concise list of the different tags and their usage.

Happy coding !