Page suivante Page précédente Table des matières

6. Les balises avancées

Les balises avancées sont celles qui ont, au moins, un paramètre obligatoire ou qui ont une structure plus complexe.

6.1 Les liens hypertextes

Les liens hypertextes permettent de relier une partie du texte à un autre endroit du Web. Cela peut être un autre endroit sur cette même page, un autre endroit sur le même site, ou bien un autre endroit sur un autre site. On fait référence à cet autre endroit grâce à une adresse Web (URL, Uniform Resource Locators).

Un lien hypertexte se présente ainsi : <A href="URL">Un texte</A>

Le A fait référence à Anchor (ancre).

Les URL

Les URL sont de la forme :


service://serveur/chemin/fichier

Les services proposés :

Le nom du serveur :

Le nom du serveur est composé de plusieurs parties. Généralement, la première partie identifie le service qu'il rend (www ou ftp). Puis, vient une localisation plus précise du serveur (nom d'université, nom d'entreprise, etc). Enfin, vient un identificateur qui permet de savoir à quel type d'organisme on a affaire et/ou dans quel pays il se trouve :

Chemin et nom du fichier :

Le chemin donne la position exacte du fichier dans l'arborescence de fichiers de la machine qui contient le site Web et le nom du fichier qui va être lu.

Un exemple :

Prenons : http://www.w3.org/TR/REC-html40/about.html

On voit que le service sera un serveur Web (http), qui se nomme www.w3.org et que le chemin jusqu'au fichier about.html est /TR/REC-html40/.

L'adresse d'un autre site

Pour pointer vers un autre site que le siens, il suffit placer son URL dans la balise.

Par exemple :


<A href="http://www.w3.org/">W3C</A>

Donne : W3C

Les adresses de fichiers

On peut aussi pointer sur un fichier qui est présent sur l'ordinateur qui accueille le site (cela sert à relier les pages du site entre-elles).

L'une des solutions est de faire systématiquement une référence à l'adresse complète du site, mais cela devient vite pénible. L'autre solution, est de donner le chemin vers le fichier par rapport à la position du fichier actuellement lu.

Par exemple, si vous êtes en train de consulterle fichier /music/toc.html et que vous voulez faire un lien vers /music/tchaikovsky/biography.html, il suffit de faire appel à tchaikovsky/biography.html.

Une adresse dans la page

On peut aussi faire référence à un point précis dans la page, par exemple dans une table des matière ou pour revenir en haut d'une page très longue. Pour cela, il faut avoir définit des points d'ancrage sur la page.

Un point d'ancrage se définit ainsi : <A NAME="label">Point d'ancrage</A>

Et la référence à ce point d'ancrage ainsi : <A HREF="#label">Référence à mon point d'ancrage</A>

Par exemple :


<H1 align=center>Alice's Adventures under Ground</H1>
<H4 align=center>By Lewis Caroll</H4>
  <P><A href="#chapter1">Chapter 1</A><BR>
  <A href="#chapter2">Chapter 2</A><BR>
  <A href="#chapter3">Chapter 3</A><BR>
  ...
  <H2><A name="chapter1">Chapter 1</A></H2>
  Alice was beginning to get very tired of sitting ...
  <H2><A name="chapter2">Chapter2</A></H2>
  They were indeed a curious looking party that assembled ...
  <H2><A name="section2.1">Chapter 3</A></H2>
  "The first thing I've got to do," said Alice to herself, ...

6.2 Les images

On peut inclure facilement une image dans un document HTML grâce à la balise IMG. On l'utilise ainsi : <IMG SRC="nom du fichier">.

Les paramètres que l'on peut modifier sont :

Par exemple :


<IMG src="Botticelli12.png" alt="Venus sortant des eaux" align=left border="0">

6.3 Les listes

Il existe trois types de listes en HTML, les listes ordonnées (OL, Ordered List), les listes non ordonnées (UL, Unordered List) et les listes de définitions (DL, Definition List).

En HTML, une liste est composée d'une balise qui indique que l'on est dans un environnement liste et d'une balise ponctuelle qui marque le début de chaque item.

Par exemple :


<OL>
  <ITEM>Premier item de la liste.
  <ITEM>Deuxième item de la liste.
    <UL>
       <ITEM>Premier item de la liste du deuxième item!
    </UL>
</OL>

Donne :

  1. Premier item de la liste.
  2. Deuxième item de la liste.

Les listes simples

On la marque avec la balise <UL> (Unordered List). Les items sont marqués par la balise ponctuelle <LI>. Les paramètres sont :

Les listes ordonnées

On la marque avec la balise <OL> (Ordered List). Les items sont marqués par la balise ponctuelle <LI>. Les paramètres sont :

Par exemple :


    <OL type=1 compact>  
        <LI> texte 1  
        <LI> texte 2  
    </OL>

Donne :

  1. texte 1
  2. texte 2

Les listes de définitions

On la marque avec la balise <DL> (Definition List). Il y a deux items possibles, le terme à définir : <DT> et la définition en elle-même : <DD>.

Par exemple :


    <DL>  
        <DT> Terme 1 à définir  
            <DD> Définition du terme 1  
        <DT> Terme 2 à définir  
            <DD> Définition du terme 2  
    </DL>

Donne :

Terme 1 à définir

Définition du terme 1

Terme 2 à définir

Définition du terme 2

6.4 Les tableaux

Les tableaux sont des structures importantes en HTML. Elles servent non seulement à faire des tableaux comme on a l'habitude d'en voir, mais aussi à gérer la mise des documents.

Vous voulez mettre une marge à votre document? Vous voulez un agencement particulier de différentes images? Utilisez les tableaux!

Les différentes balises qui permettent de construire un tableau sont :

Certains navigateurs laxistes permettent l'omission des balises de fin de <TR>, <TD> et <TH>, mais c'est souvent une source d'erreurs et/ou d'ambiguités. Il vaut donc mieux refermer ces balises.

Par exemple :


<TABLE border="1">
<CAPTION>Ceci est un exemple</CAPTION>
    <TR>
        <TD align=center>Première case</TD>
        <TD align=center>Deuxième case</TD>
    </TR>
    <TR>
        <TD align=center>Troisième case</TD>
        <TD align=center>Quatrième case</TD>
    </TR>
</TABLE>

Donne :


          Ceci est un exemple
  ------------------------------------
  | Première case  |  Deuxième case  |
  ------------------------------------
  | Troisième case |  Quatrième case |
  ------------------------------------

Les détails de quelques paramètres :

Un exemple plus compliqué :


<TABLE border="1"
          summary="This table gives some statistics about fruit
       flies: average height and weight, and percentage
       with red eyes (for both males and females).">
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2">Average
    <TH rowspan="2">Red<BR>eyes
<TR><TH>height<TH>weight
<TR><TH>Males<TD>1.9<TD>0.003<TD>40%
<TR><TH>Females<TD>1.7<TD>0.002<TD>43%
</TABLE>

Donne :


          A test table with merged cells
    |-----------------------------------------|
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    |-----------------------------------------|


Page suivante Page précédente Table des matières