Introduction à HTML

• 1. Objectifs
• 2. qu'est ce que HTML? à quoi sert-il
• 3. prérequis
• 4. des exemples

1.Objectifs

2. HTML: qu'est-ce, à quoi cela sert?

En résumé, créer une page HTML requiert l'utilisation de deux types de logiciels, un éditeur pour écrire les marqueurs HTML et un browser pour les interpréter. Les marqueurs HTML indiqueront au browser quelle sera la structure logique du texte, comme par exemple les titres et leur niveaux, quels éléments font parties d'une liste et lesquels d'un tableau, etc. Puis le browser interprétera ces marqueurs et s'occupera de la structure physique du document, de la mise en page correspondant aux titres, tableau, liste etc. Selon le type de browser utilisé le document n'apparaitra pas de la même manière. En effet à chaque client Web correspond une mise en physique propre.

Il existe à ce jour plusieurs versions différentes de ce language ayant toutes une même base commune. Selon la version que vous utiliserez les marqueurs (en anglais:tags) ne seront pas "lisibles" par le browser. Ainsi des tags de HTML 3 ne seront pas lu par la première version de Microsoft Explorer. La concurrence entre les différents browsers n'a pas encore permis un language unique et lisible par tous.

Principe de HTML
Comme nous l'avons mentionné précédemment, ce language se compose de marqueurs. Il existe deux types de marqueurs, les marqueurs conteneurs et les marqueurs vides.

• Les marqueurs conteneurs:
  Ces marqueurs entourent les éléments textuels qui feront l'objet d'une structure logique, comme par exemple un titre de niveau 1 (soit un titre de haute importance) ou encore les éléments d'une liste. Ces marqueurs conteneurs se caractérisent par un marqueur de début, puis viennent les éléments textuels à marquer et un marqueur de fermeture. Ainsi c'est par la présence de marqueur au début et à la fin de la partie à marquer qui permet au browser d'interpréter les éléments contextuels cibles.
  Voici un exemple d'un mot que l'on veut structurer en titre de niveau 2:
  <h2> Conclusion </h2>
  Le marqueur de fin débute toujours par un slash puis on trouve la même instruction que dans le marqueur du début.

• Les marqueurs vides:
  Les marqueurs vides diffèrent des précédents dans le fait qu'ils ne sont pas composés d'un marqueur de début et un de fin, il n'y a qu'un seul marqueur. Ces marqueurs correspondent à des instructions telles qu'un retour à la ligne, un élément dans une liste ou encore une ligne.
  Voici un exemple d'une liste, les marqueurs de la liste (<ul>) sont des conteneurs alors que ceux des éléments (<li>) sont vides:
  <ul>

       <li> trois chaises
       <li> un fauteuil
       <li> un canapé
  

  </ul>

En ce qui concerne les marqueurs conteneurs, il y a une certaine logique à respecter en ce qui concerne l'agencement, leur positionnement. Comme nous l'avons mentionné précédemment ils entourent le texte, il y a un marqueur de début et un de fin permettant ainsi de définir la partie qui sera "marquée". On peut emboiter des marqueurs les uns dans les autres à condition de respecter l'ordre de leur placement. C'est un peu comme si on mettait des choses dans des poupées russes, il faut que le tag d'ouverture correspondant à une poupée ait le tag de fermeture correspondant dans la même poupée. Dans cette comparaison il est important de comprendre que chacune des poupées constitue un élément marqué et c'est élément doit être complètement marqué, autrement le tag ne sera pas "lu" ni exécuté. Il est aussi tout à fait possible d'avoir plusieurs poupées, les unes à côté des autres et non dans les une dans les autres, dans une plus grande poupée.

Voici un exemple d'un titre ou un des mots est souligné:

<H2> L'habitat chez les <i> Mammifères </i> </H2> 
 |____________________________________________|
			 |_______________|										

ce qui une fois "browsé" (lu par le browser) donne ceci:

L'habitat chez les Mammifères

On peut voir dans cet exemple que le mot "Mammifères" est en italique tout en étant dans la phrase qui elle est un titre de niveau 2. Si les tags sont mal placés, voilà ce qui se passe:

<H2> L'habitat chez les <i> Mammifères  </H2> </i> 

ce qui une fois "browsé" (lu par le browser) donne par exemple ceci:

L'habitat chez les

Mammifères

La structure de base en HTML:
La structure de base de tout document HTML est simple. Le tout premier tag est <HTML> , tout le reste sera écrit entre ce tag-ci et celui le fermant à savoir </HTML>. A la suite de ce premier tag, on met une " tête" et un "corps", soit un tag <HEAD> dans lequel on pourra inscrire divers informations telles que le titre du document (il apparaitra tout en haut dans la partie bleue a coté de Netscape, par exemple), ainsi que d'autres informations qui pourront restées invisibles une fois le document browsé mais visible dans le document source (par exemple date de création ou modification, etc). Ces indications invisibles pour le browser s'inscrivent au moyen du marqueur de début <!-- et --> comme marqueur de fin. Il est utile de mettre un titre pertinent par rapport à la page, car c'est le nom qui sera lu pour être indexé par les "Robots Chercheurs" du Web. En général on utilise le même titre que celui qui sera en haut du document-même.
Puis on referme avec le tag </HEAD>, ensuite on ouvre avec le tag <BODY> qui va contenir le corps du document meme, du texte, des images, des tableaux ...Il est important de signer ses pages afin de pouvoir identifier leur auteur, pour cela il suffit de mettre le marqueur <ADDRESS> puis un lien sur ses home pages personnelles ou son adresse e-mail (voire l'exemple ci-dessous) et mettre le marqueur de fermeture. Il est aussi recommander de dater ses pages.
Pour en revenir à la structure du document HMTL, le tag </BODY> refermera cette partie puis sera suivie de celui de </HTML> marquant ainsi la fin du document HTML. Voici un exemple:

<HTML>
   <HEAD>

          <TITLE> Exemple de la structure de base (4 août 1997)
          </TITLE>
         <!-- Créé par Y.P.S, le 4 août 1997 -->
    
   </HEAD>

   <BODY>
         
            <H1> Exemple de la structure de base  </H1>
           bla bla bla
            <ADDRESS>   <A HREF="http://tecfa.unige.ch/~shubber">Y.P.S </a>
   </BODY>

 </HTML>

3. Prérequis

4. Les exemples

• des tableaux
• des images
• des liens
• des frames
• des listes, des titres, des soulignés, etc
• un questionnaire