Le code

Les marqueurs HTML

[Menu]

[Accueil] [le language HTML] [Les programmes utiles] [Finition ]

[Envoyer des mails anonymes] [Ecrire dans le LIVRE D'OR]

HTML

L'HTML n'est pas à proprement parlé un langage de programmation, en effet il ne permet pas, contrairement au C/C++ ou au java par exemple, de créer des logiciels. Par contre, il est un langage très puissant de description de documents, simple d'utilisation et multi-plateforme. Ce langage apparut en 1990 sur les ordinateurs du Centre Européen de la Recherche Nucléaire est depuis le début maintenu par la World Wide Web Organisation. Depuis 1991, l'HTML est Le Langage du WEB, et même si à l'heure actuelle d'autres langages tels que le Java, le JavaScript ou le VRML font une poussée importante, la suprématie de l'HTML est encore pour un certain temps assurée. Les raisons essentielles sont propablement la simplicité d'apprentissage de ce langage écrit en texte ASCII, son évolution relativement rapide avec prise en compte d'effets intéressants tels que le GIF animé, les sons, l'intégration facile d'applets Java et son indépendance réelle vis à vis de la plateforme et enfin la petite taille des documents décrits en HTML. L'HTML étant exclusivement écrit en texte, tout document peut être composé à partir d'un simple éditeur de texte tel que Wordpad, Word ou du bloc-notes.

Les marqueurs HTML de base

Un fichier HTML se distingue d'un fichier texte par la présence de marqueurs HTML ou tags. Ces marqueurs sont insérés dans le corps du document et contrôlent le formatage et la présentation finale du document. Ils spécifient également les hyperliens.

Un document HTML est composé de deux parties:

Les navigateurs ont besoin de ces deux parties pour pouvoir interpréter le document. L'en-tête contient des informations générales sur le document. Elle renseigne sur le contenu du document et contient le titre général du document. Elle précède toujours le corps du document qui lui correspond au contenu proprement dit.

Quatre marqueurs de base doivent toujours figurer dans un document HTML. Un marqueur est encadré par les caractères <>. De manière générale, un marqueur HTML indique le début d'une partie du document que l'on veut par exemple présenter d'une certaine façon. Il est donc toujours accompagné de son marqueur de fin qui est reperé par le caractère / et qui indique au browser l'endroit du document où il faut arrêter l'application de ce marqueur.

Le marqueur <HTML> doit être le premier "mot" de votre document. Il indiquera au browser qu'il a à faire à un document HTML et qu'il doit donc interpréter ce document. La fin de votre document doit être identifiée par le marqueur </HTML>.

Les marqueurs <HEAD> et </HEAD> délimitent la section d'en-tête du document, qui ne sera pas affiché dans le document.

Les marqueurs <BODY> et </BODY> délimitent le corps du document.

Les marqueurs <TITLE> et </TITLE> figurent dans l'en-tête du document. Le texte encadré par ces deux marqueurs correspond au titre du document qui sera en général affiché dans la barre de titre de la fenêtre. Il n'a rien à voir avec le nom du fichier contenant votre document. Il n'y a pas de limite de longueur pour le texte mais si on veut avoir son titre correctement affiché, il faut rester dans des limites raisonnables et ne pas excéder 60 caractères.

Les commandes HTML peuvent être imbriquées, mais les tags de fermeture doivent suivre l'ordre inverse des tags d'ouverture.

Il est possible d'introduire des commentaire dans une page, commentaires qui ne seront pas affichés mais qui peuvent être grandement utiles lors de l'élaboration de la page ou pour des modification ultérieures.

<!--Ceci est un commentaire qui n'apparait pas à l'écran-->

Structure d'un document simple:
Elle commence par un tag facultatif car l'extention HTML d'un fichier suffit, cependant l'attribution DTD doit être correcte selon les recommandation de la W3O .

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Tutorial HTML</TITLE>
</HEAD>
<BODY>

Ce document contiendra une initiation au langage HTML

</BODY>
</HTML>

Mise en page des documents

Quelques exemples de marqueurs pour la mise en page des documents sont donnés ci-dessous.

Paragraphe

Pour que votre texte soit lisible, il faut le découper en paragraphe. Pour que le browser rende correctement votre présentation, il faut encadrer votre texte avec les marqueurs de début <P> et de fin </P> de paragraphe. Si vous voulez aller à la ligne dans votre paragraphe, l'introduction d'un retour chariot n'est pas suffisante car le retour chariot est traduit en espace par le browser. Il faut donc forcer le passage à la ligne en insérant le marqueur <BR>.

exemple:

Titres et intertitres

Six formats différents sont à votre disposition pour créer vos titres. Ces formats sont spécifiés par les marqueurs suivants:

<H1> Titre de Niveau 1 <H1> qui traduit par votre browser aura l'apparence suivante:

Titre de Niveau 1

<H2> Titre de Niveau 2<H2> qui traduit par votre browser aura l'apparence suivante:

Titre de Niveau 2

<H3> Titre de Niveau 3<H3> qui traduit par votre browser aura l'apparence suivante:

Titre de Niveau 3

<H4> Titre de Niveau 4<H4> qui traduit par votre browser aura l'apparence suivante:

Titre de Niveau 4

<H5> Titre de Niveau 5<H5> qui traduit par votre browser aura l'apparence suivante:
Titre de Niveau 5
<H6> Titre de Niveau 6<H6> qui traduit par votre browser aura l'apparence suivante:
Titre de Niveau 6
On remarquera que plus la taille est petite, plus le numéro de l'en-tête (heading en anglais) est élevé. L'effet produit n'est pas prévisible car suivant le browser utilisé, on pourra avoir des choix de polices de caractères différents. Hormi la taille du titre que l'on peut choisir, on peut également décider de centrer le titre. Si vous utilisez le browser Netscape la syntaxe sera la suivante:

Titre de niveau 3

Par contre, dans le cas de l'utilisation d'un autre browser la commande serra:

Typographie et style

Bien que l'on ait en général aucun contrôle sur les polices de caractères, on peut choisir la typographie du document (mise en caractère gras, italique...). Le codage peut se faire de deux façons différentes, logique ou physique. Comme précédemment, ces marqueurs nécessitent des marqueurs de fermeture à la fin du texte (ex: <B>texte</B>). Le marqueur logique indique l'intention de l'auteur, <EM> indique que l'on veut renforcer une partie de texte (elle sera généralement affichée en italique), <STRONG> indique que l'on veut insister fortement sur un mot (il sera retranscrit en gras) (plus fort que <EM>). Pour le moment les browsers retranscrivent ces intentions en utilisant le gras et l'italique mais on peut supposer que de futurs browsers pourront interpréter ces intentions en terme de couleur par exemple. Les marqueurs physiques eux indiquent réellement le style choisi.
 
Marqueurs typographiques
Signification Marqueur logique Marqueur physique
Gras <STRONG> <B>
Italique <EM> <I>
Espacement fixe <CODE> <TT>
Exemple d'une typographie à pas fixe:

Dans ce texte <TT> cette partie est en pas fixe </TT>. Votre document apparaîtra dans votre browser comme suit:

Taille des caractères

Avec Netscape on peut aussi dans une certaine mesure contrôler la taille des caractères. On utilise la commande:

Création de listes

Ils existent 3 types de listes: Le langage HTML prévoit 3 marqueurs différents pour ces types de listes. Cependant deux marqueurs peuvent être utilisés pour chaque type de liste:
Listes à puces:
Pour créer une liste à puces on utilise le marqueur <UL> associé au marqueur générique <LI> qui est utilisé dans tous les types de listes. Pour obtenir la liste ci-dessus, le code suivant est utilisé: Par défaut le type de la puce est en général un cercle, on peut le changer en carré en ajoutant l'attribut TYPE <UL TYPE=square>.
Listes numérotées:
Le marqueur HTLM de listes numérotées est <OL>. Les éléments de la liste sont numérotés automatiquement et séquentiellement. Par défaut les listes sont numérotées avec des chiffres arabes. On a cependant le choix parmi quatre autres numérotations en utilisant l'attribut TYPE.
 
Différents types de numérotation
Type
Signification
1 
Chiffres arabes 
a 
Lettres minuscules 
A 
Lettres majuscules 
i 
Petits chiffres romains 
I 
Grands chiffres romains 
De plus l'attribut START nous permet de préciser le numéro de départ de la liste numérotée si on ne veut pas commencer à 1. Par exemple, on écrira <OL START=5> pour commencer une numérotation à 5.

Exemples:

sera interprété par votre browser de la façon suivante:
sera interprété par votre browser de la façon suivante:
Listes imbriquées:
On peut imbriquer des listes numérotés (ou à puces) pour créer des documents très structurés. Tapez l'exemple suivant et regardez le document obtenu sous le browser.

<HTML><HEAD><TITLE>Exemple</TITLE></HEAD><BODY>

</BODY></HTML>.

Les Tableaux

Un tableau HTML est constitué comme tous les tableaux de lignes et de colonnes. Les cases du tableau sont appelées des cellules.

Pour définir un tableau on utilise le marqueur <TABLE>. Pour encadrer le tableau d'une bordure on ajoute l'attribut BORDER au marqueur <TABLE>. Le marqueur <CAPTION> permet d'accompagner le tableau d'une légende.

Un tableau HTML met en oeuvre 3 marqueurs:

On peut formater les données dans les cellules. Par défaut, le contenu des titres est centré. Les deux marqueurs <TH> et <TD> supporte l'attribut ALIGN qui permet de préciser l'alignement désiré. Pour le formattage des données dans les cellules, on remplacera le marqueur <TH> par le marqueur <TD>.

On peut également dimenssioner les lignes et les colonnes. De nouveau, les deux marqueurs <TH> et <TD> supportent deux attributs ROWSPAN et COLSPAN qui définissent respectivement la hauteur des lignes et la largeur des colonnes. Par exemple, <TH ROWSPAN=2> définit un titre de colonnes qui sera haut de 2 lignes; <TD COLSPAN = 3> crée une cellule de 3 colonnes de large.

Exemple: Tapez cet exemple et voyez le résultat

<H3>Exemple de tableau</H3>

<TABLE BORDER>

<CAPTION>Marqueurs de tableau HTML</CAPTION>

<TR><TH ALIGN="LEFT">Marqueurs</TH>

<TH>Attributs</TH>

<TH COLSPAN=30 ALIGN="RIGHT">Signification</TH></TR>

<TR><TD ALIGN="LEFT">TABLE</TD>

<TD>None</TD>

<TD COLSPAN=30 ALIGN="RIGHT">Définit un tableau</TD></TR>

<TR><TD ALIGN="LEFT">TR</TD>

<TD>None</TD>

<TD COLSPAN=30 ALIGN="RIGHT">Fin de ligne de tableau</TD></TR>

<TR><TD ALIGN="LEFT">CAPTION</TD>

<TD>None</TD>

<TD COLSPAN=30 ALIGN="RIGHT">permet d'écrire une Légende de tableau</TD></TR>

<TR><TD ROWSPAN=3 ALIGN="left"> TH</TD>

<TD>COLSPAN</TD>

<TD COLSPAN=30 ALIGN="RIGHT">Largeur de colonne</TD></TR>

<TR><TD>ROWSPAN</TD> <TD COLSPAN=30 ALIGN="RIGHT">Hauteur de ligne</TD></TR>

<TR><TD>ALIGN</TD> <TD COLSPAN=30 ALIGN="RIGHT">Justification (à gauche, au centre, à droite)</TD></TR>

<TR><TD ROWSPAN=3 ALIGN="left"> TD</TD>

<TD> COLSPAN</TD>

<TD COLSPAN=30 ALIGN="RIGHT">Largeur de colonne</TD></TR>

<TR><TD>ROWSPAN</TD> <TD COLSPAN=30 ALIGN="RIGHT">Hauteur de ligne</TD></TR>

<TR><TD>ALIGN</TD>

<TD COLSPAN=30 ALIGN="RIGHT">Justification (à gauche, au centre, à droite)</TD></TR>

</TABLE>

Création d'hyperliens

L'avantage du langage HTML est de pouvoir créer des liens soit à l'intérieur d'un document, soit avec un document présent dans un autre fichier mais sur le même ordinateur, soit avec d'autres URL donc avec des documents situés sur un autre ordinateur. Les hyperliens HTML s'appuient sur le marqueur d'ancrage dont la syntaxe nous permet de définir la cible, c'est à dire l'endroit où l'on veut pointer et le texte qui nous permmettra en cliquant dessus d'établir le lien.

Liens vers une autre URL

Syntaxe:

<A HREF= "adresse de l'URL"> texte qui sera souligné </A>. Noter la présence du marqueur de fermeture </A>.

Par exemple la commande suivante:

<A HREF="http://www-biol.univ-mrs.fr"> Atelier Bioinformatique de Marseille </A>

à l'affichage du document HTML va faire apparaître le texte Atelier Bioinformatque de Marseille en bleu et souligné (si on a pas changé les préférences). En cliquant sur ce texte, je vais me connecter sur le serveur correspondant à l'URL http://www-biol.univ-mrs.fr et charger ainsi sa page d'accueuil.

Liens vers un autre endroit du même document

La création d'un tel lien nécessite deux commandes. La première commande pointe sur l'emplacement désiré. La deuxième commande définit dans le document l'emplacement où l'on veut faire pointer l'hyperlien.

Syntaxe:

<A HREF="#cible">texte qui sera souligné</A> commande pointant sur l'emplacement désiré.

<A NAME="cible"></A> est localisé dans le document à l'endroit où on veut que le lien pointe.

Vous avez un exemple d'hyperlien dans un même document avec le Sommaire qui vous est proposé ici. La construction du premier est faite de la façon suivante:

<A HREF="#marqueurs HTML">Les marqueurs HTML de base</A>. Cette commande permet de définir la cible qui sera repérée dans le texte par les termes et le texte Les marqueurs HTML de base apparaîtra souligné.

Dans le texte à l'endroit du titre Les marqueurs HTML de base, nous allons inséré la commande suivante:

<A NAME="marqueurs HTML"> </A>. Nous avons ainsi créé un lien entre la ligne du sommaire et la partie du texte correspondante. En cliquant sur cette ligne, on se retrouve directement au début du paragraphe traitant des marqueurs HTML de base. Pour voir comment les autres liens ont été établis, vous pouvez consulter le document source correspondant au document HTML.

Liens vers un autre document local

Vous pouvez également établir un hyperlien vers un autre document stocké sur le même ordinateur mais dans un autre fichier. Il faut alors spécifié dans votre document courant le texte sur lequel vous allez cliquer pour établir un lien avec l'autre document.

syntaxe:

<A HREF="doc2.html"> Lien vers le fichier de nom doc2.html</A>

Dans votre document courant le titre Lien vers le fichier de nom doc2.html apparaîtra souligné et si vous cliquez dessus vous ouvrirez le document contenu dans le fichier doc2.html. Ceci sous-entend que votre fichier est dans le même répertoire que votre document courant. Sinon il faut préciser le chemin complet pour atteindre le document (ex: <A HREF="sousrepertoire1/doc2.html">). On peut aussi utiliser un chemin complet comme C:/monrepertoire/sousrep1/doc2.html.

Le lien que l'on vient d'établir va nous positionner au début du document stocké dans le fichier doc2.html. Si on veut créer un lien sur un endroit précis du deuxième document, il faut préciser la cible. On revient sur les mêmes commandes que celles décrites pour la création de liens dans un même document, mais ici on spécifie à quel document appartient la cible.

syntaxe:

<A HREF="doc2.html#cible">Lien sur le document contenu dans doc2.html à l'endroit marqué par cible</A>.

Dans le document contenu par doc2.html, à l'endroit où l'on veut établir le lien on ajoute:

<A NAME="cible"></A>

Supposons que ce document soit constitué d'une façon différente, à savoir que chacun des chapitres abordés soit stocké dans des fichiers différents. On aurait par exemple un fichier contenant les informations relatives à la mise en page nommé misepage.html. Le document courant serait constitué d'un sommaire contenant les liens vers les autres documents. Si dans ce sommaire je veux établir un lien sur le chapitre Création de listes contenu dans le fichier misepage.html, il va falloir que j'écrive les deux commandes suivantes:

Dans mon document courant (le sommaire) <A HREF="misepage.html#listes">Création de listes</A>

Dans mon document misepage.html, avant le chapitre sur la création de listes <A NAME="listes"></A>

Insertion d'images

On peut agrémenter ces documents en y insérant des images. Ils existent deux sortes d'images dans les documents HTML: des images locales localisées sur le même serveur et des images externes situées sur un autre serveur.

Images locales

La plupart des navigateurs ne gèrent que quelques types d'images locales: Les navigateurs traitent les types d'images qu'ils ne supportent pas directement comme des images externes. Ils les visualisent à l'aide d'applications assistantes ou de modules externes incorporés.

Pour insérer une image locale dans un document on utilise le marqueur <IMG> accompagné de l'attribut SRC qui spécifie le nom du fichier image.

La commande la plus simple pour insérer une image dans un document est:

Les fichiers image suivant sont disponibles sur le serveur et vous permettront d'aller faire un petit tour en Bretagne. essayez la commande précédente en remplaçant "nomfichierimage" par "torch.jpg" (image en format JPEG) ou par "arree.gif" (image en format GIF).

D'autres attributs optionnels existent pour le marqueur <IMG>:

Vous pouvez voir les effets des attributs décrits ci-dessus (sauf ISMAP) en tappant dans un document des commandes différentes jouant avec ces attributs comme par exemple:

<IMG HEIGHT=50 WIDTH=50 ALIGN="TOP" SRC="torch.jpg">

Images externes

On peut insérer dans un texte une image qui est sur un autre serveur en créant un hyperlien sur l'image

Syntaxe:

<A HREF="chemin complet du fichier image" >texte</A>.

exemple:

<A HREF="http://ir2lcb.cnrs-mrs.fr/Lcbpage/yves/ali2.gif">cliquez ici pour voir l'image</A>

Les frames

Les frames sont des régions définies dans la fenêtre du browser et qui servent à diviser la fenêtre en différentes zones autonomes. Les frames organisent non seulement les informations présentées mais aussi l'espace d'affichage de la fenêtre du browser. Chacune des zones ainsi définies contient son propre fichier HTML, ce qui lui confère une complète autonomie par rapport aux autres frames.

Les frames sont contenues dans une structure appelée FRAMESET qui remplace l'habituel conteneur BODY. Un document HTML contenant des frames ne peut pas avoir de section BODY et inversement. Le conteneur FRAMESET contient la définition des frames. Il a deux attributs: ROWS et COLS qui vont permettre de définir le nombre de frames qui va être cré dans la fenêtre du browser et leur dimension. En utilisant l'attribut ROWS, vous découpez la fenêtre horizontalement. En utilisant l'attribut COLS vous découpez la fenêtre verticalement.

Le conteneur FRAMESET se présente de la façon suivante:

<FRAMESET ROWS="liste de valeurs" COLS="liste de valeurs">

"liste de valeurs" est une suite de valeurs séparées par des virgules qui peuvent être exprimées en pixels, en pourcentage ou en échelle de valeurs relatives. Le nombre de lignes et de colonnes qui déterminera le nombre de frames de votre fenêtre est déterminé par le nombre d'éléments de la liste, et la taille de chaque frame sera définie par la valeur. Par exemple:

<HTML><HEAD></HEAD>

<FRAMESET ROWS="25%,50%,25%">

....

</FRAMESET></HTML>

divisera votre fenêtre en 3 parties horizontales, dont la première et la dernière auront une hauteur égale au quart de celle de la fenêtre du browser et celle du milieu, une hauteur égale à la moitié.

On peut également utiliser des valeurs proportionnelles de ce type:

<FRAMESET COLS="*,2*,3*">

* définit ici une division proportionnelle de l'espace disponible. Pour connaître le nombre de divisions de votre espace il faut sommer les valeurs placées devant les *. Dans l'exemple, cette somme est 1+2+3=6, donc l'* représentera 1/6 de la fenêtre. Avec cette commande, vous avez donc défini 3 zones de votre fenêtre. La première rangée occupera 1/6 de la largeur de la fenêtre de votre browser, la deuxième rangée 2/6 et la troisième 1/3.

Il est conseillé de donner la taille des différents frames en pourcentages ou en valeurs relatives plutôt qu'en valeurs absolues (taille en pixels) car si l'utilisateur modifie les dimensions de sa fenêtre, une ou plusieurs frames peuvent disparaître.

Le marqueur FRAME

Le marqueur FRAME définit une frame et doit être situé dans un conteneur FRAMESET. FRAME n'étant pas un conteneur, il n'est pas accompagné d'un marqueur de fin. Ce marqueur possède 6 attributs:

<FRAME SRC="adresse du fichier" ,NAME="nom_de_la_fenêtre" ,SCROLLING="yes|no|auto" ,MARGINWIDTH="valeur" ,MARGINHEIGHT="valeur" NORESIZE">

Le plus important de ces attributs et qui peut en fait être le seul spécifié est SRC. Il définit le nom du fichier HTML contenant ce qui sera affiché dans la frame. Dans l'exemple, la première frame affichera le contenu d'un fichier local appelé exemple.html et la deuxième frame affichera le contenu d'un fichier qui se trouve sur un autre serveur.

<HTML><HEAD></HEAD>

<FRAMESET COLS="50%,50%">

<FRAME SRC="exemple.html">

<FRAME="http://www.ir2lcb.cnrs-mrs.fr/Deug2.html">

</FRAMESET></HTML>

Si le fichier est introuvable, le cadre restera vide et un message d'erreur appaîtra (message d'erreur 404).

L'attribut NAME assigne un nom à la frame. Ce nom doit commencer par une lettre et il peut être utilisé pour établir un lien vers la frame, en général à partir d'autres frames de la fenêtre. Par exemple, si vous avez une frame contenant un sommaire, vous pouvez désirer conserver cette frame intacte et voir afficher dans une autre frame le texte se rapportant au lien qui aura été activé dans le sommaire (syntaxe <FRAME SRC="topo.html" NAME="principal">).

L'attribut SCROLLING. Par défaut, la valeur de cet attribut est auto, ce qui signifie que les barres de défilement sont automatiquement créées pour chaque frame si la longueur de son contenu le nécessite. La présence de ces barres peut être cependant contrôlée par l'attribut SCROLLING (valeur no, pas de barre de défilement, valeur yes une barre de défilement).

Les attributs MARGINWIDTH et MARGINHEIGHT permettent de définir les marges de la frame (exemple <FRAME MARGINWIDTH="20" MARGINHEIGHT="15" > ménagent une marge de 20 pixels en largeur et de 15 pixels en hauteur). Ces valeurs doivent toujours être exprimées en pixels.

L'utilisateur peut faire changer la taille des frames en plaçant son pointeur sur la barre de séparation de 2 frames. Il se transforme alors en pointeur de redimensionnement et en le faisant glisser on peut changer la taille de la frame. Ceci peut avoir comme conséquence de modifier complétement l'apparence de votre page. Pour éviter cela, vous pouvez utiliser l'attribut NORESIZE.

L'attribut TARGET

Si vous voulez que s'affiche dans une autre frame, le contenu de votre document HTML se référant au lien que vous avez activé par exemple, il faut spécifier le nom de la frame avec l'attribut TARGET.

Exemple vous avez un sommaire dans une frame et vous voulez en activant les liens que l'information soit affichée dans une autre frame:

Fichier dans lequel vous déclarez vos frames

<HTML> <HEAD> <TITLE> Document avec frames </TITLE></HEAD>

<FRAMESET COLS= "30%,70%">

<FRAME SRC="Sommaire.html">

<FRAME SRC="topo.html" NAME="principal">

</FRAMETSET> </HTML>

Déclaration de deux frames, l'une contenant le sommaire et l'autre le texte se rapportant à ce sommaire.

Fichier contenant le sommaire:

<HTML><HEAD></HEAD>

<BODY>

<H2>Sommaire</H2>

<UL>

<LI> <A HREF="topo.html#marqueur" TARGET="principal"> marqueurs HTML de base </A></LI>

<LI> <A HREF="topo.html#pagination" TARGET="principal"> mise en page </A> </LI>

</UL>

</BODY></HTML>

Quand on activera un lien du sommaire, l'information correspondante s'affichera dans l'autre frame. Le fichier topo.html devra contenir la définition des emplacements vers lesquels les liens du sommaire pointent. La syntaxe utilisée est celle de la création de lien:

<A NAME="marqueurs"></A>

<A NAME="pagination"></A>  
Retour au sommaire



Home ?