Production de documents WWW - Université de Genève, CUI ©

Groupe VP-GL=>Cours en-ligne=>Production de documents WWW=>Plan du cours=>Le langage HTML=>Principes de base...

Document inspiré d'un cours du CNAM sur HTML

Principes de base de HTML (version 2.0)

Concepts

HTML est un langage de "marquage", c'est-à-dire qu'il consiste à ajouter des "marques" (en anglais tags), parfois appelées "balises", à du texte ASCII (texte simple, sans mise en page). La plupart des marques vont par paires:

<html> . . . </html>
indique le début et la fin d'un document HTML
<head> . . . </head>
indique la section des informations non-affichables
<title> . . . </title>
indique le titre (non-affichable) du document
<body> . . . </body>
indique la section des informations affichables

D'une manière générale, une marque (ou balise) comporte obligatoirement un nom, éventuellement suivi d'une série d'attributs avec, pour certains attributs, une valeur associée:

<NomBalise NomAttribut1="ValeurAttribut1" NomAttribut2="ValeurAttribut2" NomAttribut3>

Par exemple, pour <img src="URL_de_l'image">, le nom de la balise est img et l'attribut a pour nom src et pour valeur une URL désignant l'emplacement du fichier contenant l'image. Autre exemple, pour <dl compact>...</dl>, le nom de la balise est dl et l'attribut a pour nom compact, lequel n'a pas de valeur associée, car sa présence, à elle seule, suffit à indiquer que la liste de définition doit être affichée de manière compacte.

La spécification officielle de la syntaxe HTML stipule, pour chaque balise, quels attributs sont autorisés et quelles valeurs ces attributs peuvent prendre. Pour les balises allant par paire, la fermeture ne mentionne que le nom de la balise (</NomBalise>), sans aucune mention d'attribut.

Les documents HTML sont des documents structurés et l'imbrication des marques a son importance et ses contraintes:

L'exemple minimal de document HTML est: 

  <html>
  <head>
  <TITLE>Un exemple minimal</TITLE>
  </head>
  <body>
  Ceci est le texte de mon document
  </body>
  </html>

Un document est toutefois souvent divisé en sections et chaque section a un en-tête (exemple):

<h1> . . . </h1>
indique un en-tête (Header) de niveau 1 (le plus important)
<h2> . . . </h2>
indique un en-tête (Header) de niveau 2
<h3> . . . </h3>
indique un en-tête (Header) de niveau 3
etc. jusqu'au niveau 6. (le moins important)

Ces marques délimitent des paragraphes complets et ne peuvent donc pas être imbriquées entre elles.

Un certain nombre d'autres marques vont aussi par pair, c'est-à-dire qu'une marque de début et une marque de fin entourent un morceau de texte dont elles modifient l'apparence:

<blockquote> . . . </blockquote>
démarque un paragraphe qui sera indenté comme l'est souvent une citation.
<i> . . . </i>
indique une portion de texte en italique
<b> . . . </b>
indique une portion de texte en caractères gras
<em> . . . </em>
indique une portion de texte mise en évidence (EMphasis, en anglais). C'est souvent équivalent à de l'italique
<strong> . . . </strong>
indique une portion de texte fortement mise en évidence

La définition initiale de HTML n'était pas suffisamment détaillée pour indiquer l'apparence d'une portion de texte se trouvant dans le chevauchement de deux zones imbriquées. Par exemple, avec <b>x<i>Y</i>z</b>, la lettre Y devrait-elle être uniquement en italique, ou bien en italique et en gras? De nos jours, de plus en plus de programmes de visualisation adoptent pour le cumul des caractéristiques. La norme HTML 3 stipule d'ailleurs explicitement que les caractéristiques portant sur l'apparence des caractères devraient, dans la mesure du possible, s'additionner. Si vous voulez voir ce que donne votre programme de visualisation, voici l'exemple en question:

xYz

Les énumérations (listes):

<ul> . . . </ul> indique une liste non numérotée (Unnumbered List)
<ol> . . . </ol> indique une liste numérotée (Ordered List)

Chaque élément d'une énumération est précédé de la marque <li>. Exemple:

<ul>
<li>un élément de liste
<li>un deuxième élément.
</ul>

qui aura l'apparence suivante:

En utilisant "ol" au lieu de "ul" sur ce même exemple on obtient:

  1. un élément de liste
  2. un deuxième élément.

Les listes de définition:

<dl>
<dt>un terme à définir
<dd>la définition
<dt>un autre terme à définir
<dd>la définition correspondante
</dl>

qui aura l'apparence suivante:

un terme à définir
la définition
un autre terme à définir
la définition correspondante

Remarques:

Marques solitaires

Certaines marques se suffisent à elles-mêmes. Elles indiquent, par exemple, une séparation dans le texte:

<p> saut de paragraphe (retour à la ligne + saut de ligne)
<br> retour à la ligne (line BReak)
<hr> trait horizontal (Horizontal Ruler)

Les fichiers HTML doivent être en ASCII, les lettres accentuées et certains caractères spéciaux font donc l'objet d'un marquage spécial:

&lt; pour <
&gt; pour >
&amp; pour &
&quot; pour "

Remarques:

D'une manière générale, tous les caractères ISO Latin 1 peuvent être représentés sous la forme &#n; (où n est un nombre décimal compris entre 32 et 255). Par exemple, &#169; correspond à ©

Premiers pas

N'hésitez pas à utiliser l'option "View Source" du programme de visualisation de documents pour voir la syntaxe HTML correspondante.

Mettre des images dans le texte

Les images peuvent être insérées dans le texte à l'aide de la marque <img src="URL_de_l'image" align=alignement alt="Description_textuelle">, où alignement est top, middle ou bottom (valeur par défaut). La description textuelle sert de remplacement pour le cas ou le programme de visualisation n'a pas la capacité d'afficher des images. Exemple:

<img src="VP-SE.gif" align="top" alt="[VP-SE]">[VP-SE] avec du texte à la suite qui continue éventuellement sur la ligne suivante.
<img src="VP-SE.gif" align="middle" alt="[VP-SE]">[VP-SE] avec du texte à la suite qui continue éventuellement sur la ligne suivante.
<img src="VP-SE.gif" align="bottom" alt="[VP-SE]">[VP-SE] avec du texte à la suite qui continue éventuellement sur la ligne suivante.
Les formats les plus universellement acceptés sont le GIF et le X bitmap. Mais le format JPEG est devenu assez communément accepté et un nouveau format est apparu pour remplacer le GIF: le format PNG (Portable Network Graphics) (voir aussi la PNG Home Page)

Un exemple plus compliqué

avec des effets de présentation, des listes et surtout des liens : 

  <html>
  <head>
  <TITLE>Un exemple plus long</TITLE>
  </head>
  <body>
  <H1>Ceci est l'exemple plus long</H1>

  Voici le premier paragraphe de ce document HTML. <P>

  Dans le second paragraphe, il y a des effets de pr&eacute;sentation.  
  De l'<I>italique</I>.  Ici du <B>gras</B>.
  Du <em>renforcement</em>.
  
  Une image ins&eacute;r&eacute;e (Mosaic n'accepte que le GIF et le X bitmap) : 
  <IMG SRC="VP-SE.gif"> <p>

  Dans le troisi&egrave;me paragraphe, on passe aux liens.  Le premier lien
   <A HREF="subdir/myfile.html">bidon</A>
  va en "subdir/myfile.html". <P>  (Il faut donc que ce document
  existe.)
  
  <H2>Un titre de deuxi&egrave;me niveau</H2>

  Du texte pr&eacute;-format&eacute;, typiquement affich&eacute; avec une police de
  taille fixe: <P>

  <PRE>
  begin
    while i &gt; 0 do begin
      if (i mod 2) = 1 then
        SommeImpairs := SommeImpairs + i;
      else SommePairs := SommePairs + i;
      i := i-1;
      end; { while }
  end;
  </PRE>

  Une liste &agrave; trois &eacute;l&eacute;ments : <P>

  <UL>
  <LI> pain
  <LI> moutarde
  <LI> confiture
  </UL>

  Et c'est la fin! <P>
  
  <address>Moi (moi@mycomputer.univ.ch)</address>
  </body>
  </html>

Le résultat est bien entendu plus "esthétique".

Pièges classiques de HTML :

Toujours regarder ce qu'ont fait les autres

N'oubliez pas la commande "View source".

Navigation hypermédia

On peut "ancrer" un hyper-lien sur un sous-ensemble du document que l'on prépare. Ce sous-ensemble peut se limiter à une seule lettre, mais peut tout aussi bien inclure un mot, une phrase, tout un paragraphe, une image, etc. La syntaxe de l'hyper-lien est typiquement du genre:

<a href="URL_Du_Document_Vers_Lequel_Se_Diriger">texte devant "porter" l'hyper-lien</a>
l'hyper-lien vers le début d'un autre document porte sur un morceau de texte. Le morceau de texte apparait généralement souligné

<a href="URL_Du_Document_Vers_Lequel_Se_Diriger"><img src="URL_D_Une_Image" alt="Description_Textuelle"></a>
l'hyper-lien vers le début d'un autre document porte sur une image. L'image apparait avec un cadre.

combinaison de texte et d'image(s) entre la marque d'ancrage et la marque de fin d'ancrage
Le texte est souligné et l'image est encadrée.

<a href= "URL_Du_Document_Vers_Lequel_Se_Diriger#Point_De_Repere"> ...texte et/ou image</a>
l'hyper-lien est dirigé vers un point précis d'un autre document.

<a href="#Point_De_Repere_Au_Sein_Du_Document_Courant">...texte et/ou image</a>
l'hyper-lien est dirigé vers un point précis du document courant.

Un point de repère se met dans un document à l'aide d'une marque d'ancrage spécifiant un nom:

<a name="Point_De_Repere">...</a>

Ce mécanisme peut servir à se diriger vers un point précis d'un document (ou du document courant).

Documents de référence

Voir aussi HTML Quick Reference

Bertrand Ibrahim

Dernière modification: 3.12.99

Site Hosting: Bronco