Style Sheet

HTML Tutorial

Hyper Text Markup Language

What's in a page?
Basic Structure
A First Page
More complex...
Some advices

This document will give an overview of the HTML Language. It's targeted to be a jumpstart, for the users to get up to speed with this way of publishing content, and be able to do it by themselves after that...
We will talk here only about static documents. If you don't know what static means in this context, never mind.

What's in a page Top of Page

HTML is a markup language (as opposed to a programming language), invented a couple of decades ago to provide and access content over the internet. Its specification now belongs to the W3C. To be visualized, the code of an html page has to be rendered by an HTML Browser (ie MS Internet Explorer, Netscape, etc).

The smallest HTML object than can be rendered is called a page. A page can be held in a text file, that's what we will take for granted in the remaining of this document. The HTML Directives are given - just like in any other markup languages - using tags, also called elements. An element can be opened or closed. It always begins with the character "<" and ends with the character ">". Generally, any element or tag you open has to be closed. To close an element, you need to prefix its name with the character "/". The top element of an HTML page is :


  <html>

and as this html element has to be closed, the last element of an html page will have to be


  </html>

In HTML, the tag's names is not case sensitive - like in XML - that means that <HTML> is equivalent to <html>.

In addition to the tag or element notion, we need to present the notion of attribute. The attribute can be seen as a parameter of an element. It has a name and a value. Theorically, its value must be given between double quotes.


  <img src="picture.gif" alt="This is an image">

In the previous sample code,

img is the element
src and alt are attributes of the img element
picture.gif and This is an image are the values of the attributes

Elements can be nested, they cannot overlap. That means that:


          <elementOne>
            <elementTwo>
              CeciCela
            </elementTwo>
          </elementOne>

is a valid document. But a document like:


          <elementOne>
            <elementTwo>
              CeciCela
          </elementOne>
            </elementTwo>

is invalid, and will produce unpredictable rendering.

Remember :

All what is not a tag or an attribute will be somehow displayed by the browser

Tags and attributes are actually used by the browser to know HOW to display the content

The present document is built using HTML... You can view its structure using the "View Source" feature of your browser.

Basic Structure Top of Page

What you want to display will be declared in the body element of the html element. That means that the minimum structure of an HTML Page will have to be :


 <html>
   <body>

   </body>
 </html>

For example :

A code like	Will produce a page looking like	If you don't believe me...
<html> <body> This is an example </body> </html>	This is an example	Click here.

<html> and <body> are part of the html language. <body> can have several attributes, like bgcolor, text, link, alink, vlink, ...

To structure your html document, you can use paragraphs. The paragraph tag is <p>.

Header tags are also available. This tag works like this :

A code like Will produce a page looking like If you don't believe me...

<html> <body> <h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <h4>Header 4</h4> </body> </html>

Header 1

Header 2

Header 3

Header 4
Click here.

A First Page Top of Page

This first lab will make you manipulate the basic concepts we just mentioned above. You will produce different basic pages, changing the colors and fonts of the characters and backgrounds.

Lab 1: your first HTML Document

In this first lab, you will write an HTML Page and display it in a browser. You will:

Create a working directory on the disc
Create an empty document
Change its extension
Edit it with the notepad (or any editor you'd prefer)
Build it as requested
Save it
Display it in your browser

Click here to see how it goes...

What to do

Once you've created a directory and a file as explained in the viewlet, you should enter the following content in your html file :


  <html>
    <body>
      This is my first example
    </body>
  </html>

... and you should obtain what you see if you click here.

Then modify the previous content to have it look like :


  <html>
    <head>
      <title>Lab One</title>
    </head>
    <body>
      This is my first example
    </body>
  </html>

... that should display something like this. Have you noticed where the difference is?

The let's use the Headers tag, plus some color features. Try this :


  <html>
    <head>
      <title>Lab One</title>
    </head>
    <body>
      <h1>This is my first example</h1>
    </body>
  </html>

... and that :


  <html>
    <head>
      <title>Lab One</title>
    </head>
    <body text="yellow" bgcolor="black">
      <h1>This is my first example</h1>
    </body>
  </html>

The final result should be this.

When you're done with the samples written above, try the following code :


<html>
  <head>
    <title>Lab One</title>
  </head>
  <body text="yellow" bgcolor="black">
    <h1>This is my first example</h1>
    Here is some content,
    written in two lines in the document.
    <br>
    Now after the break.
    <p>
      Into a new paragraph
    </p>
    <p>
      Some samples : <b>bold</b>, <i>italic</i>, <u>underlined</u>, <b><i><u>all together</u></i></b>.
    </p>
    <hr>
    <address>&copy; 2001, Oliv Soft</address>
  </body>
</html>

This should be rendered as in this document.

More Complex... Top of Page

Images
Lists
Tables
HyperLinks and Anchors
Frames
Special Characters
Styles and Stylesheets
JavaScript

Images Top of Section

Images are to be considered as documents included in your page. Images will be accessed through their URL, just like an HTML page. The basic tag to access an image is <img>.
The IMG tag has two main attributes, src and alt.


  <img src="image.gif" alt="Alternate text">

Notice that the IMG tag doesn't need to be closed.

Assuming that a file named atwork.gif exists in the directory where the present document is,

A code like Will produce a page looking like If you don't believe me...

<html> <body> <p align="center"> <img src="atwork.gif" alt="Work in progress"> </p> </body> </html>

Click here.

Lab 2: Show an image

Use the previous pages developed during the labs, and display an image in it. Click this to see what to finally obtain.

Remark: Several image formats are available, like jpeg, bmp, jpn, gif... Only gif files are possibly animated.

Lists Top of Section

Lists are a specific way to present some structured content. They are mainly made out of two elements:

The type of list
The list item

The list item is a direct descendant of the list. Typically, a list would look like:


  <ul>             <!-- List type -->
    <li>One</li>   <!-- List item -->
    <li>Two</li>
    <li>Three</li>
  </ul>

One
Two
Three

The type of list can basically be:

Unnumbered List <ul>
Ordered List <ol>

The items are always list items <li>, but they have a type attribute. This type can be, for the unnumbered lists:

Circle <li type="circle">
Disc <li type="disc">
Square <li type="square">

and for the ordered lists:

A <li type="A">
a <li type="a">
1 <li type="1">
I <li type="I">
i <li type="i">

Notice that this attribute is not mandatory, it can be omited.
You can have lists within lists.

This is a first inner list
1. Capital letter
2. Lowercase letter
3. lowercase roman
4. uppercase roman
5. default
Circle
Square

Nested lists have a default behavior:

<ul> <li>One</li> <li> Two <ul> <li>Two-One</li> <li>Two-Two</li> <li> Two-Three <ul> <li>Two-Three-One</li> <li>Two-Three-Two</li> <li>Two-Three-Three</li> </ul> </li> </ul> </li> <li>Three</li> </ul>

One

Two

Two-One

Two-Two

Two-Three

Two-Three-One

Two-Three-Two

Two-Three-Three

Three

The bullet used by default can be overwritten using the type attribute of the <li> element.

Tables Top of Section

Tables are a very big topic. Basically, the table involves three elements:

<table>, to open or close a table
<tr>, that stands for table row
<td>, that stands for table data

Let's start with a simple table:

 <table>
   <tr>
     <td>
       Akeu
     </td>
     <td>
       Coucou
     </td>
     <td>
       Larigou
     </td>
   </tr>
   <tr>
     <td>
       Coucou
     </td>
     <td>
       Larigou
     </td>
     <td>
       Z&eacute;bulon
     </td>
   </tr>
 </table>

Akeu	Coucou	Larigou
Coucou	Larigou	Zébulon

If you don' believe me, click this.

Notice in the example above, that the start of each column is aligned.

The <table> element has several attributes, like

border
width

The previous sample with <table width="98%" border="1"> renders this:

Akeu Coucou Larigou

Coucou Larigou Zébulon

To have a column taking the room of two (or several), use the colspan attribute at the <td> level:

<table width="98%" border="1"> <tr> <td colspan="2"> Akeu </td> <td> Coucou </td> </tr> <tr> <td> Coucou </td> <td> Larigou </td> <td> Zébulon </td> </tr> </table>

Akeu Coucou

Coucou Larigou Zébulon

Same for the rows, use the rowspan attribute at the <td> level:

<table width="98%" border="1"> <tr> <td rowspan="2"> Akeu </td> <td> Coucou </td> <td> Coucou </td> </tr> <tr> <td> Larigou </td> <td> Zébulon </td> </tr> </table>

Akeu Coucou Coucou

Larigou Zébulon

Tables can be nested, table data can contain anything supported by an HTML document...

HyperLinks and Anchors Top of Section

Hyperlinks provide the possibility to

navigate from document to document
navigate within the same document
download non-html components

Anchors

An Anchor provides two distincts kinds of features:

The possibility to go FROM it
The possibility to go TO it

Those two features can be combined.
The tag for an anchor is <a>
This element can have several attributes. The attribute to set where to go is href, that means "Hyperlink Reference"; the attribute to set where to come is name. Extra attributes like target can be used to open the link in another frame or window.

For example, if from some link you want to go to http://www.yahoo.com, you have to type a statement like this :

Do you <a href="http://www.yahoo.com">Yahoo</a> ?
Do you Yahoo ?

This is the way to navigate from document to document.

Now, to navigate within the same document, or to a specific part of an external document, you have to use the name attribute of the anchor element, and the # sign in your URL. The document you are reading now is using such a feature to bring you back to the Top of the Page, or to the Top of the Section.
To name an anchor, use the following syntax:


 <a name="MyAnchorName">Come here</a>

To go to this anchor, use:


 <a href="#MyAnchorName">Go there</a>

One last thing before moving forward, the target attribute. It can be used in conjunction with the <a> element to open the link into another window. For example, you can write

<a href="http://www.yahoo.com" target="Yahoo">Yahoo!</a>
Yahoo!

as opposed to

<a href="http://www.yahoo.com">Yahoo!</a>
Yahoo!

Just click the links to see the difference...
The target attribute references a window (or a frame as we'll see later); if the window doesn't exist yet, it is created, if it exists, it is reused. That means that its previous content will be replaced by a new one.

Image Maps

This will be the way to have active images. An active image is an image acting like a link, embedded in an <a> tag, like in

<a href="http://www.yahoo.com" target="Yahoo"> <img src="yahoo.gif" alt="Do you Yahoo?"> </a>
<a href="http://www.yahoo.com" target="Yahoo"> <img src="yahoo.gif" border="0" alt="Do you Yahoo?"> </a> Notice the border attribute.

Now, that is just an active image. Now you can have several links on the same image. And depending on the location you click on the image, it will lead you to different places...

This feature involves several elements.

<img>, we've seen it already
<map>, we're going to see in now

Let us consider the following image:

Four Camels

Depending on the camel we click, we want to obtain different behaviors...
Using any drawing software, you can see that this image is 190x42 pixels big. We are going to build a map to split it in four:


                <img src="4Camels.jpg" usemap="#CamelMap" alt="Four camels" border="0">
                <map name="CamelMap">
                  <area shape="rect"
                        coords="0,0,42,42"
                        href="http://www.yahoo.com"
                        target="Yahoo"
                        alt="Yahoo">
                  <area shape="rect"
                        coords="43,0,95,42"
                        nohref
                        alt="Second Camel"
                        onClick="alert('No link on this one');">
                  <area shape="rect"
                        coords="96,0,138,42"
                        href="http://www.google.com"
                        target="Google"
                        alt="Google">
                  <area shape="rect"
                        coords="139,0,190,42"
                        href="http://www.mapquest.com"
                        target="Mapquest"
                        alt="Mapquest">
                </map>

and as a result, we obtain:

Four camels

Notice the area elements, having different coords attributes. href and nohref can be used as well as you can see. The links activated from an image are exactly the same as the others. They can be used to navigate to other documents, on in the same page, just like we did before.

Frames Top of Section

Using frames is the way to display several documents in the same window. Each frame will be embedded in the same window, but will actually act just like a genuine window.

You will need :

A top document describing and shaping all the frames
A document for each frame

The top document will look like this:

                    
  <html>
    <head>
      <title>The top document</title>
    </head>
    <frameset rows="25%,*" cols="100%">
      <frame src="TopDocument.html" name="TopDoc">
      <frameset cols="30%,*">
        <frame src="LeftDocument.html" name="LeftDoc">
        <frame src="RightDocument.html" name="RightDoc">
      </frameset>
    </frameset>
  </html>

Click Here.

You can hide the frame borders using the frameborder attribute of the frameset element:

                    
  <html>
    <head>
      <title>The top document</title>
    </head>
    <frameset rows="25%,*" cols="100%" frameborder="no">
      <frame src="TopDocument.html" name="TopDoc">
      <frameset cols="30%,*" frameborder="no">
        <frame src="LeftDocument.html" name="LeftDoc">
        <frame src="RightDocument.html" name="RightDoc">
      </frameset>
    </frameset>
  </html>

Click Here.

The name attribute of the <frame> element can be used in conjunction with the target attribute of the <a> element, to click a link in one frame, and open the corresponding document in another frame.
Let's take an example. Let's write the LeftDocument.html mentionned above like this:

<html> <head> <title>Left Frame</title> </head> <body> <h1>This is the left frame</h1> <a href="http://www.yahoo.com" target="RightDoc"> Yahoo! </a> </body> </html>
Click Here.

Some target window or frame names are reserved, like:

_blank
_parent
_self
_top

As an example, let's modify the LeftDocument.html like this:

                    
  <html>
    <head>
      <title>Left Frame</title>
    </head>
    <body>
      <h1>This is the left frame</h1>
      <a href="http://www.yahoo.com" target="_parent">
        Yahoo!
      </a>
    </body>
  </html>

Click Here.

Lab 3: Building a frameset

This lab will put together several of the features we've seen so far. We want to have a three-frame document, with a title on top - feel free to play with colors - three active images on the left pane to display Yahoo!, Google and Mapquest in the right pane.

We want the result to look like this.

Do it the way you like!

Special Characters Top of Section

Characters like ©, ®, ° can be displayed using special characters. It should be used as well to display accented characters, like é, à, ñ or ö. This feature can be pretty powerful, and used to display formulas, like in :

                
                  
                    
                      f(t) =
                    
                    
                      
                        n
                        S
                        i=0
                      
                    
                    
                      
                        n!
                        
                        i!(n-i)!
                      
                    
                    
                      tⁱ(1-t)^n-i P_i

                
                  
                    
                      ¶S
                      

                      --- =
                      

                      ¶a
                    
                    
  2aSx⁴ + 2bSx³ + 2cSx² - Syx² = 0

Styles and Stylesheets Top of Section

For advanced users...

JavaScript Top of Section

A Object Oriented Programming Language for a static document... Wow ! A document like this :


  <html>
    <body bgcolor="#9BC9FB" text="navy">
      <font face="Helvetica">
        <script language="JavaScript">
        <!--
        document.writeln('<font face="courier">');
        document.writeln('<ul>');
        for (i=32; i<=255; i++)
          document.writeln("<li>Character #" + i + "=[&#" + i + ";]</li>");
        document.writeln('</ul>');
        document.writeln("Character ETH=[&ETH;]");
        document.writeln("Character eth=[&eth;]");
        document.writeln('</font>');
        // -->
        </script>
        <hr>
        <address>&copy; 2001 and beyond, Oliv Cool Stuff Soft</address>
      </font>
    </body>
  </html>

would display... this.

Some advices Top of Page

Keep your document easy and pleasant to read
When appropriate, keep it easy to print
Keep it fast to load, even on a slow network. If it is too big, split it in several parts
Provide easy navigation within the document
Be inventive!
Be very careful with the "Christmas Tree Syndrom"!
When you see some good website, use the View Source feature of your browser...

Send comments, questions or ideas to the webmaster