Introduction à HTML

• 1. Introduction
  • Objectif:
  • a quoi ca sert d'apprendre cela
  • prérequis
• 2. HTML
  • Définition
  • Principe
  • Exemple
  • Structure de base
• 3. Conclusion

1. Introduction

Objectifs

A quoi cela sert?

Prérequis

2. HTML:

Définition:

Créer une page HTML requiert l'utilisation de deux types de logiciels, un éditeur pour écrire les marqueurs HTML (Bloc-note, Emacs, logiciel spécialisé dans la création de document HTML) et un client Web (logiciel permettant d'accéder aux fichiers se trouvant sur le World Wide Web, comme par exemple Netscape, Internet Explorer (Microsoft), Mosaïc, Lynx, etc. )ou browser pour les interpréter. Les marqueurs HTML indiqueront au browser les caractéristique de la mise reflétant la structure logique du texte conçue par le rédacteur, 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 (qu'il est aussi possible de configurer).

Il existe à ce jour plusieurs versions différentes de ce language ayant toutes une même base commune, il y a HTML 2.0, HTML 3.0, etc. Selon la version que vous utiliserez les marqueurs (en anglais:tags) ne seront pas "lisibles" par le browser, certains marqueurs ont été conçu par et pour des browsers spécifiques. Ainsi des tags de HTML 3 de Netscape 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.

Tout fichier HTML prend comme extension soit .htm soit .html, tout dépend du type d'ordinateur que vous utilisez ( PC, Mac, etc), du système d'exploitation que vous utilisez (Windows 3.11, Windows 95, OS.2, Unix, etc) et aussi du type de logiciel pour créer des documents HTML, certains sauvergardent le nom du fichier par défaut sous l'extension .htm. A vous de vérifier et si jamais indiquer l'extension que vous préferez.

Principe de HTML

• 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 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 cibles dans le texte.
  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 fin. 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é.

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:

<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>

Exemples

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

3. Conclusion