logiqueabdo: HTML

HTML est le langage universel utilisé pour communiquer sur le Web. Votre information sera ainsi transportée sur cette gigantesque toile de réseaux interconnectés qu'est Internet, pour aboutir sur l'ordinateur de votre lecteur grâce à un programme appelé navigateur ou browser.
Le logiciel que l'on appelle un browser vous permet de surfer sur le Net et d'afficher sur votre écran les "pages" qu'il a interceptées. Il y a, hélas, beaucoup de marques et de types de browsers différents. Des simples, des archaïques ou des sophistiqués... Les plus connus sont Netscape Navigator et Internet Explorer de Microsoft mais il en existe beaucoup d'autres. Chaque browser a sa propre façon de travailler.

A la différence de votre traitement de texte qui restitue exactement votre document sur une feuille de papier avec votre police de caractères et votre mise en page, vous ne saurez jamais exactement ce que le browser de votre lecteur du bout du monde affichera sur l'écran de celui-ci.

En HTML, vous n'avez pas la maîtrise totale de votre document.

Pour transiter le plus rapidement possible sur les lignes téléphoniques, on a adopté un format de texte très compact mais aussi peu sophistiqué. Ce format ASCII a été amputé d'un bit (7 bits au lieu de 8) . Vous serez donc privé de certains caractères spéciaux comme le é pour lesquels il faudra passer par des codes particuliers.

Mais, récompense suprême... HTML est un langage universel qui s'adapte à toutes les plate-formes que ce soit Windows, Macintoch, Unix, OS/2...
En plus du texte adressé à votre lecteur, il vous faudra inclure des instructions pour le browser de celui-ci. Ces instructions seront différenciées de votre texte par les signes < et > par exemple <HTML>.
Ces "instructions" s'appellent des tags ou des balises.

Quand vous écrirez les balises de votre page HTML, il faudra garder à l'esprit :

- qu'une balise marque une action pour le browser (ce qu'il doit faire...).
- que les attributs précisent les modalités de cette action (comment il doit le faire...).

La déclaration de la version supportée avec la balise <doctype> : Cette dernière doit se situer au début de votre document.

<doctype html public "-//w3c//dtd html 4.0//en" "http://www.w3c.org/TR/REC-html40/strict.dtd">

il s'agit de la version 4, sans support des éléments des versions précédentes

<doctype html public "-//w3c//dtd html 4.0 transitional//en" "http://www.w3c.org/TR/REC-html40/loose.dtd"> :

il s'agit de la version 4 avec support des anciennes versions de html

<doctype html public "-//w3c//dtd html 4.0 frameset//en" "http://www.w3c.org/TR/REC-html40/frameset.dtd"> :

s'applique aux fichiers gérant le multifenêtrage N.B. : le "en" signifie que le html est en anglais

Le document HTML minimum

Nous avons vu qu'une page HTML était en fait un fichier texte, enrichi d'un certain nombre de codes ou commandes, appelés balises.
Ces balises sont toujours exprimées sous la forme d'un mot clé, encadré par les caractères "<" et ">". Exemple : <BALISE>.
Pour la plupart des balises, il existe une balise de fermeture associée, reprenant le même nom, mais précédée du caractère "/". Exemple : </BALISE>. La commande spécifiée s'applique donc uniquement au texte situé entre le couple de balises ainsi formé. Exemple:

<HTML>
...
</HTML>Notons que :

une balise peut indifféremment être indiquée en minuscules ou en majuscules,
le formattage "manuel" du document (espaces, sauts de lignes,...) est toujours ignoré.
Par exemple : <HTML>...</HTML> est interprété de la même façon par le navigateur web que la syntaxe sur plusieurs lignes indiquée ci-dessus.

Nous venons de découvrir, sans le savoir, un des éléments de la structure d'une page HTML : toute page doit en effet débuter par la balise <HTML> et se finir par </HTML>.
Entre ces deux balises, on définit deux zones : l'en-tête, spécifié par les commandes <HEAD> et </HEAD>, ainsi que le corps, délimité par: <BODY> et </BODY>. Ce qui donne, comme structure de base :

Dans l'en-tête, on ne met généralement qu'une seule information, le Titre du document qui sera affiché en haut de la fenêtre du navigateur et qui apparaît dans les bookmarks (listes d'URL gérées par un navigateur, une sorte d'annuaire).
Ce Titre est indiqué entre les balises <TITLE> et </TITLE>. Exemple:

<TITLE>Ceci est le Titre</TITLE>.Dans le corps, on met en fait tout le document à afficher (texte, définition des images etc.). Signalons l'existence d'une balise de commentaires, qui peut être utilisée partout dans les documents HTML, définie comme suit :

<!-- Ceci est un commentaire --!>.NB : Les commentaires ne sont jamais affichés à l'écran du navigateur. En résumé, la structure générale d'une page HTML est la suivante :

<HTML>
<HEAD>
<TITLE>Titre du document</TITLE>
</HEAD>
<BODY>
...
...
</BODY>
</HTML>è Notez que l'indentation facilite la lecture du code mais n'est pas reproduite par le browser. Récapitulatif :

<HTML>	Ceci est le début d'un document de type HTML.
</HTML>	Ceci est la fin d'un document de type HTML.
<HEAD>	Ceci est le début de la zone d'en-tête (prologue au document proprement dit contenant des informations destinées au browser).
</HEAD>	Ceci est la fin de la zone d'en-tête.
<TITLE>	Ceci est le début du Titre de la page.
</TITLE>	Ceci est la fin du Titre de la page.
<BODY>	Ceci est le début du document proprement dit.
</ BODY>	Ceci est la fin du document proprement dit.

Vous aurez remarqué qu'à chaque balise de début d'une action, soit <...>, correspond (en toute logique) une balise de fin d'une action </...>.
Vous noterez aussi que les balises ne sont pas "case sensitive". Il est donc équivalent d'écrire <HTML>, <html>, <HTml>, etc.

Tout document HTML contiendra en majorité du texte. Voyons comment l'agrémenter par quelques balises élémentaires.

Gras	[Bold]	<B>...</B>	Début et fin de zone en gras
Italique	[Italic]	<I>...</I>	Début et fin de zone en italique
Taille de caractère	[Font size]	<FONT SIZE=?>...</FONT>	Début et fin de zone avec cette taille
Couleur de caractère	[Font color]	<FONT COLOR="#$$$$$$"></FONT>	Début et fin de zone en couleur
A la ligne	[Line break]	<BR>	Aller à la ligne
Commentaires	[Comments]	<!-- *** -->	Ne pas afficher
Paragraphe	[Paragraph]	<P>	Début d'un nouveau paragraphe
Centrage	[Center]	<CENTER></CENTER>	Centrer

Exemple :

<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>texte simple 
texte en gras 
texte en gras 
texte en italique 
texte en italique 
texte en gras et en italique 
texte
en bleu

</BODY>
</HTML>Quelques commentaires s'imposent

Le texte tout simple s'écrit sans balises. Il sera repris par le browser avec la police et taille de caractères choisies dans sa configuration par défaut.
Le browser affiche le texte qu'on lui "dicte" en passant à la ligne lorsque celui-ci atteint le bord de la fenêtre. Pour le forcer à passer outre à cette règle de conduite et à faire un saut à la ligne comme vous le souhaitez, il faut une instruction particulière. C'est la balise  . Celle-ci représente une action ponctuelle et n'a donc pas besoin de balise de fin.
Le même browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui

<FONT SIZE=5>texte</FONT> <FONT COLOR="#0000FF">en bleu</FONT>est équivalent à <FONT SIZE=5>texte</FONT><FONT COLOR="#0000FF">en bleu</FONT>

Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien les imbriquer. Ainsi ... est correct et ... risque de vous créer des ennuis.
La taille dans  peut être indiquée de deux façons :

avec un nombre de 1 à 7. La valeur par défaut étant 3.
de façon relative par rapport à la valeur par défaut (ici 0). Soit -3 -2 -1 0 +1 +2 +3.

Le principe des couleurs en HTML

Les modèles de couleurs

Le modèle RVB : Couleurs additivesUne grande partie du spectre visible peut être représentée par trois composantes dans des proportions et des intensités variables. Ces composantes portent le nom de couleurs primaires : rouge, vert et bleu (RVB). Lorsqu’elles se chevauchent, elles donnent les couleurs secondaires : cyan, magenta et jaune.
Les trois couleurs primaires combinées donnent du blanc (lumière réfléchie vers l’œil). Elles sont dites également couleurs additives et sont utilisées pour l’éclairage, la vidéo, les caméras et les moniteurs.

Le modèle CMJN : Couleurs SoustractivesAlors que, dans le modèle RVB, il faut une source lumineuse pour créer les couleurs, le modèle CMJN est fondé sur la qualité d’absorption des couleurs de l’encre sur le papier. Lorsque de la lumière blanche traverse des encres translucides, une partie du spectre est absorbée. L’autre partie est réfléchie vers l’œil de l’observateur.
En théorie, la combinaison de pigments purs cyan (C), magenta (M) et jaune (J) absorbe toutes les couleurs du spectre et donne du noir. Ce sont les couleurs primaires dites soustractives. En réalité, du fait que toutes les encres d’imprimerie contiennent des impuretés, la couleur obtenue est un brun sale et il est nécessaire d’ajouter un peu d’encre noire (N) pour obtenir un noir véritable. La reproduction de couleurs par la combinaison de ces encres relève de l’impression quadrichromique.
Les couleurs primaires et secondaires sont des couleurs complémentaires. Chaque paire de couleurs secondaires crée une couleur primaire.

Pour spécifier les couleurs en HTML nous utiliserons donc un modèle RVB (écran).
Avant d'aller au-delà nous devons comprendre le codage en informatique. Le codage en informatique A l'origine, notre système de calcul se base sur le chiffre 10 (nombre de doigts de la main). Cependant, de nombreuses civilisations antérieures possédaient un système de calcul basé sur un autre nombre. Ainsi, les babyloniens basaient leur calcul sur 60 (De nos jour, on a hérité de cela pour la division du cercle)
Ce mode de calcul est pratique car le chiffre 60 est divisible par : 2, 3, 4, 5, 6, 12, 15 Exemple de codage avec la base 10 :
Nous pouvons décomposer le nombre 21 534 en les éléments suivants :

4 = 4 x 10⁰
3 = 3 x 10 = 3 x 10¹
5 = 5 x 100= 5 x 10²
1 = 1 x 1000 = 1 x 10³
2 = 2 x 10 000=2 x10⁴

Le codage sur une base 2En informatique, les informations sont basées sur un système binaire.
Ceci s'explique par deux états de l'information :

Pour un transistor : courant / pas courant
Pour un CD ROM : trou / pas trou
Pour des Cartes perforées : trou / pas trou
Pour un Disque dur : orientation des particule pôle nord / pôle sud

Ces états physiques sont représentés par 0/1 (un bit)
En informatique, l'unité de mesure est l'octet (8 bits donc huit informations pouvant prendre les valeurs 0 ou 1)

Une codification sur 8 bits permet un codage sur 2⁸, soit 256 éléments d'information.
Une codification sur 16 bits permet 65 536 éléments d'information.
Une codification sur 32 bits permet 4 294 967 296 éléments d'information.

Pour un octet, nous pouvons représenter les possibilités comme suit :

2⁷

2⁶

2⁵

2⁴

2³

2²

2¹

2⁰

Le codage sur une base 16Le codage sur une base 16 ou codage hexadécimal est fortement utilisé en informatique pour sa facilité de conversion avec le langage binaire. Reprenons notre illustration de l'octet :

2⁷=128

2⁶= 64

2⁵=32

2⁴=16

2³= 8

2²= 4

2¹=2

2⁰=1

Pour une codification en 4 bits, il est très facile de passer de l'hexadécimal au binaire

Décimal	Binaire	Hexadécimal
1	0001	1
10	1010	A
15	1111	F

Ainsi, pour une codification en hexadécimal deux unités suffisent :

Binaire	Hexadécimal
00000001	01
10101010	AA
11111111	FF

Le codage des couleurs en HTML

Chaque élément de couleur (Rouge, Vert ou Bleu) est codé en HTML sur 8 bit en hexadécimal soit de 00 à FF (de 0 à 255)
Ainsi FF de rouge, FF de Vert et FF de Bleu, donne du Blanc Voici les codes de quelques couleurs basiques :

Bleu	#0000FF	Vert	#00FF00
Blanc	#FFFFFF	Violet	#8000FF
Rouge	#FF0000	Jaune	#FFFF00
Gris clair	#C0C0C0	Noir	#000000

Quelques balises plus complexes

Selon les versions du HTML, et l'apparition des éditeurs HTML évolués, certains tags sont moins utilisés. D'autres aussi sont tout bonnement d'un emploi rare ou pour le moins particulier. En voici quelques-uns qui complèteront votre panoplie actuelle :

<NOBR> Empêche un changement de ligne.
<BLOCKQUOTE> introduit une citation.
<PRE> affiche un texte dit pré formaté. (Machine à écrire degueu).
<XMP> Le browser prend ainsi en compte tous les espaces et sauts de ligne définis à l'écran.
<ADDRESS> pour indiquer une adresse (généralement en fin de document).
souligne le texte. Comme, par convention, les éléments servant d'hyperlien sont soulignés (c'est le même que dans les fichiers d'aide), on évitera de souligner des éléments de texte pour leur donner de l'importance. On préfèrera les mettre en gras ou dans un format ou une couleur de police différent. Il ne faut donc pas en abuser.
<SUB> place le texte en indice.
<SUP> place le texte en exposant.
<INS> marque les sections ajoutées depuis la mise à jour.
<DEL> marquent ceux qui ont été supprimés ou périmés.
accentuation.
<ABBR> abréviation.
<CODE> : code programmation.
<VAR> : variable de programme.
<STRONG> : accent plus fort.
<KBD> : texte à saisir.
<DFN>: définition.
<SAMP> : exemple.
<ACRONYM> : acronyme.
<DIV align=left>...<DIV align=center>…<DIV align=right> permettent d'aligner différents éléments à gauche, au centre et à droite.
<DIV STYLE="text-align:justify;"> permet une justification du texte.

Les Titres

Tout document d'une certaine consistance se doit de présenter, par exemple dans la table des matières, les différents niveaux de son exposé. HTML a disposé dès son origine d'outils spécialement conçus à cet effet.
Pour ce faire, on utilise la balise <Hn>...</Hn> où n peut prendre une valeur entière comprise entre 1 et 6 (dans l'ordre décroissant de taille).

En-têtes

[Heading]

<Hn></Hn> avec n=1 à 6

Afficher un en-tête de niveau n et sauter une ligne

Exemple :

<H1>Les mois du printemps</H1> mars, avril, mai <H3>Les mois d'automne</H3>septembre, octobre, novembre

Les caractères spéciaux

Les navigateurs ne reconnaissent pas les caractères spéciaux. Heureusement chaque caractère possède une abréviation (ENTITY) permettant de le coder.

Exemple :

Espace
©	©
<	<
>	>
E	é
E	è

Le langage HTML permet de définir deux styles de listes : les listes numérotées et les listes non numérotées.

Les listes numérotées

Une liste numérotée est délimitée par les balises <OL> et </OL> entre lesquelles chaque élément de la liste est précédé de la balise <LI>.
Exemple :

<OL>
<LI>élément 1,
<LI>élément 2,
<LI>élément 3.
</OL>

Ce qui donne à l'écran :

élément 1,
élément 2,
élément 3.

Les listes à puces

Une liste non numérotée est définie de la même façon, sauf qu'elle est encadrée par les balises <UL> et </UL>.
Exemple :

<UL>
<LI>élément 1,
<LI>élément 2,
<LI>élément 3.
</UL>

On obtient cette fois :

élément 1,
élément 2,
élément 3.

Notez qu'il est possible d'imbriquer des listes du même type ou de types différents.
Exemple :

<UL>
<LI>élément 1 :
    <OL>
    <LI>sous-élément A,
    <LI>sous-élément B.
    </OL>
<LI>élément 2,
<LI>élément 3.
</UL>

On obtient alors :

élément 1,

sous-élément A,
sous-élément B.

élément 2,
élément 3.

Liste de tabulations

Enfin, il est possible de définir des listes spéciales, permettant de faire des glossaires, en utilisant les balises <DL> et </DL> pour encadrer la liste, <DT> pour spécifier un élément et <DD> pour indiquer sa définition.
Exemple :

<DL>
<DT>HTML<DD>HyperText Markup Language
<DT>HTTP<DD>HyperText Transfert Protocol
</DL>

Donne :

HTML: HyperText Markup Language
HTTP: HyperText Transfert Protocol

Les attributs

Type="type"	UL & OL	(déprécié en faveur des css) : spécifie l'aspect des marqueurs des éléments
Start="nombre"	OL	commence la numérotation à la valeur spécifiée.
Value="nombre"	LI	spécifie le nombre de l'élément.
Compact	OL & UL	rendu plus compact de la liste

Le type des listes :

<UL type="disc ">	Puces rondes pleine
<UL type="circle">	Puces rondes creuses
<UL type="square">	Puces carrées
<OL type=1>	(1,2,3)
<OL type=a>	(a,b,c)
<OL type=A>	(A,B,C)
<OL type=i>	(i,ii,iii)
<OL type=I>	(I,II,III)

HTML (Hyper Text Markup Language) est un langage hypertexte (et hypergraphique) qui vous permet en cliquant sur un mot généralement souligné (ou une image) de vous transporter :

vers un autre endroit du document.
vers un autre fichier HTML situé sur votre ordinateur.
vers un autre ordinateur situé sur le Web.

Ce système d'hypertexte vous est familier car il est également utilisé par les fichiers d'aide de Windows. Ce sont ces liens qui vous permettent de surfer de page en page et qui constituent l'essence des documents HTML.

Les Liens

La syntaxe de ces liens entre plusieurs pages est simple mais entraînera de nombreux commentaires :

<A HREF="URL ou adresse">...</A>

1. Lien externe

Tout ordinateur situé sur le réseau Internet possède une adresse ou une URL (UNIVERSAL Ressource Locator). HTML permet d'accéder à toutes les machines et toutes les ressources du Net. Pour peu qu'Internet vous soit un peu familier, ce sont les adresses du type :

http://serveur/chemin.../fichier
ftp://serveur/chemin.../fichier
mailto:utilisateur@hôte

2. Lien local

L'organisation classique, et plus que conseillée, d'un site Web consiste à regrouper l'ensemble des éléments de celui-ci (fichiers htm, images, ...) dans un même répertoire. Vous pourrez ainsi "transporter" aisément votre site pour le présenter sur un autre ordinateur et ,but ultime, le charger sur un serveur. Cette façon de procéder est la plus aisée et vous évitera pas mal de problèmes. L'adresse du lien sera alors tout simplement : fichier.htm

Exemple :

- Dans l'éditeur de texte,
nous allons créer deux fichiers HTML.

le fichier 1.htm:
<A HREF="2.HTM">Aller vers le document 2</A>
le fichier 2.htm:
<A HREF="1.HTM">Retour au document 1</A>

Les ancres

Des liens peuvent aussi pointer vers un endroit précis du même document ou d'un autre fichier. C'est ce qu'on appelle les ancres, ancrages ou pointeurs [Anchor].

Point d'ancrage

<A NAME="***">...</A>
On nomme la cible ***

Lien vers une ancre dans la même page

<A HREF="#***">...</A>
Lien vers la cible *** lorsque celle-ci se trouve dans la même page

Lien vers une ancre dans une autre page

<A HREF="URL#***">...</A>
Lien vers la cible *** lorsque celle-ci se trouve dans une autre page

Plusieurs liens à l'intérieur d'un même document supposent que ce document présente une certaine longueur sinon une longueur certaine (et donc un temps de chargement assez long). Ainsi, on préférera généralement à cette technique le découpage d'une longue page en un ensemble de plusieurs pages de dimensions plus réduites.

Attributs de <A>

name="texte"	nomme le lien. Ce nom est unique dans le document.
href="adresse"	spécifie l'emplacement des ressources visées.
hreflang="fr/en/en-us/..."	spécifie la langue des ressources visées.
rel="type de relation"	relation avec d'autres documents
rev="type de relation"	suivi de la liste d'adresse de ressources considérées comme précédentes.
charset="charset"	spécifie l'encodage des caractères des ressources visées.
accesskey, shape, coords, tabindex	sont abordés plus en détails plus loin.

Les balises <LINK> et <BASE>

1.<Link>

Elle apparaît dans <HEAD> et permet de spécifier les documents liés à celui en cours de consultation. Ces informations sont aussi utilisées par les navigateurs utilisant les tooltips, navigateurs oraux, ...

<LINK> sert principalement à spécifier et donner l'adresse - via les attributsTYPE="TEXT/CSS" et MEDIA="screen" - des feuilles de style s'appliquant au document (Nous le verrons plus loin)

Cet élément est en outre utilisé par les moteurs de recherche en vue de répertorier le site

<LINK TITLE="Manuel en Francais" TYPE="TEXT/HTML" REL="alternate" HREFLANG="FR" HREF="adresse">

2.<BASE>

Apparait dans <HEAD>, juste après <TITLE>, et avant tout autre élément.

Il permet de stipuler l'adresse absolue du document, ce qui permet de résoudre les éventuels conflits d'adresse relatives (href="../fichier.gif").

Attributs :

href="adresse"

target="frame" : fenêtre visée pour le chargement.