Feuille de Style <- Changez ça, pour voir...

HTML pour les nuls, les nases, et tous les autres

Hyper Text Markup Language

Qu'est ce qu'il y a dans une page?
Structure de base
Une première page
Un peu plus complexe...
Quelques conseils

Ce document est une introduction au langage HTML. Son objectif est de permettre a ceux qui n'y connaissent rien de pouvoir démarrer, et d'être capable de publier des documents sur internet, et de devenir rapidement autonome dans ce domaine...
On ne parlera ici que de documents statiques. Si vous ne savez pas ce que c'est qu'un document statique, ce qu'il a de plus ou de différent d'un document dynamique, c'est pas grave.

Qu'est-ce qu'il y a dans une page ? Haut de la page

HTML est un langage de markup (par opposition a un langage de programmation), invente il y a quelques decades afin de pouvoir produire et acceder a des documents sur internet. Sa specification appartient maintenant au W3C. Pour etre vu, le code d'une page html doit etre interprete par un navigateur (browser) HTML (comme MS Internet Explorer, Netscape, Firefox, etc).

L'objectif de ce premier paragraphe est d'exposer le minimum de concepts qu'on doit comprendre pour aller plus loin. On mettra les mains dans le camboui des le prochain paragraphe.

En gros, le plus petit object qu'un navigateur HTML puisse interpreter s'appelle une page. Une page html peut etre contenue - stockee - dans un fichier de type texte, et c'est ce qu'on va considerer pour le reste du present document, qui est donc lui aussi une page html. Les directives du langage HTML (comme ecrire en gras, faire un titre de niveau 1, ecrire en italique, changer de police de caracteres., etc) sont donnees - comme dans tous les langages de markup (XML, SGML, etc) - par des tags, qu'on appelle aussi elements. (En français, on appelle aussi ca des balises, des labels, et diverses conneries du meme tonneau)
Un element peut etre ouvert ou ferme. Un element commence toujours par "<" et se termine toujours par le caractere ">". En regle generale, un element ou tag que vous ouvrez doit etre ferme ensuite. Pour fermer un element, on doit prefixer son nom par le caractere "/".
Par exemple, l'element racine - de plus haut niveau, celui par lequel on commence une page - est :


  <html>

et en tant qu'element html, il doit etre ferme. Ainsi, le dernier element d'une page html doit etre


  </html>

Entre les deux, on fait ce qu'on veut, c'est le contenu de la page.
En HTML, le nom des tags n'est pas sensible a la case - a l'inverse du XML - ce qui signifie que <HTML> est equivalent a <html>.

En plus de la notion de tag ou d'element, on doit aussi presenter la notion d'attribut. On peut concevoir cette notion d'attribut comme le parametre d'un element. Un attribut a un nom et une valeur. Theoriquement, sa valeur doit figurer entre guillemets.


  <img src="picture.gif" alt="Ceci est une image">

Dans l'exemple ci-dessus,

img est le nom de l'element
src et alt sont des attributs de l'element img
picture.gif et Ceci est une image sont les valeurs des attributs.

Les elements peuvent etre imbriques, il ne doivent jamais etre superposes. Ca signifie que:


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

est un document valide. Alors qu'un document comme:


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

est invalide - elementTwo est ouvert a l'interieur de elementOne, mais ferme a l'exterieur, et on ne peut pas presumer du resultat...

Rappelez-vous :

Tout ce qui est dans un tag ou un attribut sera d'une maniere ou d'une autre affiche dans le browser

Tags et attributs - le langage HTML en somme - sont en fait utilises par le browser pour savoir COMMENT afficher le contenu de votre page

Le present document est lui-meme code en HTML... Vous pouvez avoir une premiere idee de sa structure en utilisant le "View Source" de votre browser. Ca doit etre "Afficher Source" en français... Allez-y !

Structure de base Haut de la page

Ce qu'on veut afficher doit etre declare dans l'element body de l'element html. Ca signifie que la structure minimum d'une page HTML sera quelque chose comme :


 <html>
   <body>

   </body>
 </html>

Par exemple :

Un code comme	Produira une page comme	Si vous ne me croyez pas...
<html> <body> Ceci est un exemple </body> </html>	Ceci est un exemple	Cliquez ici.

<html> et <body> sont des elements du langage html. <body> peut avoir plusieurs attributs, comme bgcolor, text, link, alink, vlink, ...

Pour structurer votre document html, vous pouvez utiliser des paragraphes. Le tag a utiliser est <p>.

Des tags d'en-tete sont aussi disponibles. Ces elements fonctionnent comme suit :

Un code comme Produira une page comme Si vous ne me croyez pas...

<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
Cliquez ici.

Rappelez-vous :

Une page html commence par <html> et se termine par </html>

Ce qu'on veut voir affiche dans la page html doit figurer dans l'element <body>, sous-element de <html>

Une premiere page Haut de la page

Dans le premier exercice, vous allez pouvoir manipuler les concepts de base evoques precedement. Vous allez creer differents types de pages elementaires, changer les couleurs et les polices de caracteres, ainsi que les fonds de page.

Exercice 1: votre premier document HTML

Dans ce premier exercice, vous allez creer un document html, et l'afficher dans un browser. Vous allez:

Creer un repertoire de travail sur votre disque dur
Y creer un nouveau document
En modifier son extension
L'editer avec le bloc-notes (ou un autre editeur, si vous preferez)
Le construire, comme requis
Le sauvegarder
L'afficher dans votre browser

Cliquez ici pour voir ca...

Ce qu'il faut faire

Une fois crees votre repertoire de travail et le nouveau fichier, comme explique dans la viewlet, vous devez ajouter dans le fichier le contenu suivant :


  <html>
    <body>
      Ceci est mon premier exemple
    </body>
  </html>

... et vous devriez obtenir ceci en double-cliquant sur le fichier que vous avez cree.

Maintenenant, modifiez le contenu precedent en re-editant le fichier :


  <html>
    <head>
      <title>Exo 1</title>
    </head>
    <body>
      Ceci est mon premier exemple
    </body>
  </html>

... et vous devriez obtenir quelque chose comme ça. Vous avez vu ou est la difference ?

Voyons voir ce que donnent les tags Headers, et quelques modifications de couleur. Essayez ca :


  <html>
    <head>
      <title>Exo 1</title>
    </head>
    <body>
      <h1>Ceci est mon premier exemple</h1>
    </body>
  </html>

... et ca :


  <html>
    <head>
      <title>Exo 1</title>
    </head>
    <body text="yellow" bgcolor="black">
      <h1>Ceci est mon premier exemple</h1>
    </body>
  </html>

Le resultat final devrait ressembler a ceci.

Une fois que vous avez termine avec les exemples ci-dessus, essayez le code suivant :


<html>
  <head>
    <title>Exo 1</title>
  </head>
  <body text="yellow" bgcolor="black">
    <h1>Ceci est mon premier exemple</h1>
    Voila un peu de texte,
    ecrit sur deux lignes dans le code.
    <br>
    Apres le break.
    <p>
      Dans un nouveau paragraphe
    </p>
    <p>
      Quelques exemples : <b>gras</b>, <i>italique</i>, <u>souligne</u>, <b><i><u>tous ensemble</u></i></b>.
    </p>
    <hr>
    <address>&copy; 2001, Oliv Soft</address>
  </body>
</html>

Ca devrait pour finir ressembler a ce document.

Un peu plus complexe... Haut de la page

Images
Listes
Tables
Hyperliens and Ancres
Frames
Caracteres speciaux
Styles and feuilles de style
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

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.