HTML en 5 leçons

Leçon 1 Leçon 2 Leçon 3 Leçon 4 Leçon 5

Eric@netline.be

Historique

Tout a commencé au CERN de Genève, le fameux laboratoire de recherche nucléaire. Tim Berners-Lee y introduit en mars 1989 un projet de système hypertexte qui permettrait à la communauté des physiciens de s'échanger aisément des informations. La première version du World Wide Web ne fit son apparition au CERN qu'en mai 1991 tandis qu'il fallut attendre janvier 1992 pour une version destinée au grand public.

Le projet n'obtint pas directement du succès car ces premiers outils étaient difficiles à installer et configurer, la documentation étant elle-même publiée au format HTML.

Le premier client Web en mode texte apparut en 1992 à l'Université du Kansas. Il s'agit de Lynx, toujours aussi populaire.

Tout démarra vraiment en février 1993 quand Marc Andreessen, un étudiant du National Center for Supercomputing Applications (NCSA) de l'Université d'Illinois annonca Mosaic, un navigateur Web sous X Window. Mosaic attira tout de suite l'attention de la communauté Internet car il était simple à utiliser et supportait d'autres protocoles comme Gopher et FTP. La consécration date de fin 1993 quand apparurent des versions Macintosh et Windows. Mosaic est vite devenu synonyme de Web de la même manière qu'on parle de bic pour un stylo-bille ou de kleenex pour des mouchoirs en papier.

En 1993, apparurent aussi Cello, un autre navigateur Web réalisé à l'Université Cornell, httpd, le serveur Web du NCSA ainsi que les premiers serveurs pour Windows NT et Macintosh.

Une partie de l'équipe de développement originale du NCSA Mosaic a fondé une société commerciale articulée autour des logiciels clients et serveurs World Wide Web. Marc Andreesen, concepteur original, s'est associé à Jim Clark, transfuge de Silicon Graphics, pour fonder Mosaic Communications rebaptisée ensuite Netscape.

 

HTML

HTML signifie Hyper Text Markup Language. Le terme markup se réfère aux marques, aux annotations manuscrites placées par l'auteur sur un document pour préciser à l'imprimeur comment il doit être présenté. Avec l'apparition des ordinateurs et des photos-composeuses, ces marques ont été intégrées dans le texte mais chaque matériel de photocomposition réclamait son propre langage "markup". Au début des années 80, le CGA (Graphics Communications Association) a mis au point le premier langage markup généralisé baptié GenCode. Au même moment, un comité de normalisation ANSI publiait le standard Generalized Markup Language (GML). En décembre 1986, les deux comités ont unis leurs efforts pour définir le standard SGML (Standard Generalized Markup Language) accepté par l'ISO (International Standard Organization) sous le numéro 8879.

Le SGML est un standard ouvert qui n'est lié ni à une plate-forme, ni à un constructeur. Les fichiers SGML sont stockés sous forme de simples textes ASCII et peuvent donc être utilisés par n'importe quelle machine.

Le langage SGML est extrêmement pratique pour réaliser des publications à la demande. Le but est de pouvoir, à partir d'un document de base unique, publier différentes versions s'adressant à des publics différents.

SGML est un langage de description de données qui divise un document en deux parties : le DTD (Data Type Definition) et les données elles-mêmes. Le DTD est une sorte de dictionnaire qui décrit les différents "tags" acceptés dans le document et les relations qui les unissent. Le corps du document contient les données délimitées par les "tags" définis dans le DTD.

Le langage HTML n'est qu'une instance du langage SGML définie par un DTD spécifique. Un document HTML est un simple fichier texte ASCII qui contient des "tags" HTML. Sur un serveur Unix, un document HTML porte généralement l'extension .html tandis que sur les PC, limités à des noms de fichiers de type 8.3, l'extension est .htm.

La notion essentielle à bien comprendre avant de se lancer dans la création de pages HTML est que comme tous les langages "markup", HTML ne se soucie pas de l’apparence d’un document mais bien de sa structure. Chaque navigateur World Wide Web représentera différemment des objets HTML comme la ligne horizontale ou le titre. L’HTML n’imposera jamais une police de caractères, une taille de police ou une largeur d’écran. C’est au navigateur de choisir en fonction de la station d’accueil, de la résolution d’écran, des polices disponibles. Il faudra donc toujours veiller à essayer les pages HTML nouvellement réalisées avec plusieurs navigateurs.

Une autre notion à garder en tête est que le langage HTML est en constante évolution, chaque navigateur s’adaptant plus ou moins apidement à cette évolution.

Chaque commande du langage HTML débute par un "<" et se termine par un ">". Les commandes peuvent s’écrire en minuscules ou majuscules bien qu’on utilise généralement les caractères majuscules par souci de lisibilité.

Notre première page HTML

Nous n'avons besoin d'aucun logiciel spécialisé pour créer notre première page HTML. Un simple éditeur texte comme Notepad peut faire l'affaire.

Créons par exemple une page très simple contenant le minimum d'informations autorisé et qui nous servira de canevas pour la suite. Encodons ceci

<HTML>

    <HEAD>

        <TITLE>

            My title

        </TITLE>

    </HEAD>

    <BODY>

        The body of my document

    </BODY>

</HTML>

Le contenu des balises peut être tapé en minuscules ou en majuscules sans importance. Le texte peut être tapé au kilomètre sans mise en page particulière. Si nous avons opté pour une mise en page avec indentation, c'est pour mieux visualiser les balises imbriquées et pour localiser plus aisément les balises de début et de fin . Une balise manquante est de la sorte plus rapidement détectée. La plupart des éditeurs HTML vous offriront une vision du code en plusieurs couleurs, le bleu étant ici réservé aux balises et le noir au texte proprement dit.

Sauvons ce document avec l'extension .htm ou .html mais surtout pas .txt. Ouvrons un navigateur tel Internet Explorer ou Netscape et chargeons le document que nous venons de réaliser.

Le résultat donne ceci

Vous voyez que le contenu de la balise <Title> est reprise dans la barre de titre du navigateur tandis que le contenu de <body> apparaît dans le corps du document. Rétrécissons la largeur de notre navigateur jusqu'à ce qu'elle soit inférieure à la taille de notre phrase "the body of my document". Vous voyez que le navigateur se charge automatiquement de la mise en page du texte en fonction de la largeur disponible.

Passons maintenant en revue les balises découvertes grâce à ce premier exercice

HTML

Chaque document HTML devrait débuter en s’identifiant comme tel, le tag <HTML> tout au début du texte et la commande </HTML> à la fin

En-tête

L’en-tête du document est réservée aux meta-informations (les informations relatives au document) comme son titre. Ces meta-informations doivent être placées entre les tags <HEAD> de début et </HEAD> de fin. Même si l’en-tête est optionelle, il est important de l’inclure dans un document pour éviter que le logiciel serveur n’ait à balayer tout le document pour y retrouver l’information recherchée.

Dans l’en-tête, on trouvera les commandes suivantes

  1. TITLE (la seule véritablement essentielle)
  2. ISINDEX
  3. BASE : pointe sur un répertoire de référence exemple <base href="http://WWW.BEST.BE">
  4. LINK
  5. NEXTID
  6. META

Titre

<TITLE> Mon titre </TITLE>

Chaque document HTML, pour être correct, doit disposer d'un titre. Le titre apparaît le plus souvent dans la barre de titre du navigateur Web. Son but est de pouvoir identifier le document dans un ensemble plus large comme un index WAIS par exemple. Le titre d’un document HTML sert aussi lorsqu’un navigateur World Wide Web dispose d’une fonction "hotlist" ou "bookmark" pour fournir un accès rapide à vos documents favoris.

Le titre est limité à 64 caractères y compris les espaces et ne doit normalement contenir que les 128 premiers caractères ASCII (pas de caractères accentués)

Corps du document

Le corps du document, ce qui sera effectivement affiché par le navigateur Web, est balisé par les commandes <BODY> et </BODY>. Voici donc à quoi ressemblera un document minimal :

Voici encore quelques balises de base que nous pouvons introduire dans notre exemple pour l'améliorer

<!doctype html public "-//IETF//DTD HTML//EN">

<HTML>

    <HEAD>

        <TITLE>

            My title

        </TITLE>

    </HEAD>

    <!--- comment separator -->

    <BODY>

    The body of my document<BR>

    Here I use BR for a carriage return<P>

    Here I use P for a new parahgraph

    <H1>title level 1</H1>

    <H2>title level 2</H2>

    <H3>title level 3</H3>

    <H4>tille level 4 </H4>

    <H5>title level 5 </H5>

    <H6>title level 6 </H6>

    </BODY>

</HTML>

Nous obtenons le résultat suivant

Commentaires

Les commentaires peuvent être placés n’importe où dans un document HTML à condition de ne pas être imbriqués. Ils sont placés entre les chaînes de caractère <!--- et -->.

Exemple <!--- this is a comment -->

DocType

DocType est une directive SGML permettant d’identifier un document comme étant de type HTML Cette commande est facultative. La plupart des navigateurs n’en ont pas besoin même s’il est de bon ton pour un éditeur HTML de placer en tête de document une commande de type :

<!doctype html public "-//IETF//DTD HTML//EN">

<Hx> Headings </Hx>

Le langage HTML reconnaît six niveaux de headings : titres hiérarchiques numérotés de 1 à 6. Le niveau le plus élevé est le 1, le plus petit est le 6.

 

Séparateurs

Contrairement à tous les autres systèmes de traitement de texte, le retour de charriot n'a aucune valeur en HTML. C'est le navigateur Web lui même qui définira le passage à la ligne en fonction de facteurs comme la taille des polices de caractères, la largeur de la fenêtre de visualisation etc. De même, plusieurs espaces dans un document HTML seront ramenés à un seul. La seule façon de forcer le passage à la ligne et de commencer un nouveau paragraphe est d'utiliser le tag <P>

Pour un simple passage à la ligne, utiliser la commande <BR> pour line break.

Pour une ligne horizontale de séparation, utiliser la commande <HR>

Depuis la vesrsion 3.0 du HTML, pour faire varier la largeur de la ligne, on utilise le code suivant: <HR WIDTH=75%> .

Cela donne une ligne de 75% de la largeur de l'écran (selon la largeur de la fenêtre choisie par l'usager).

Pour faire varier l'épaisseur de la ligne: <HR SIZE="5"> donne une ligne d'épaisseur 5:

Pour générer plusieurs espaces entre des mots, il faut utiliser un code spécial &nbsp;

Le & désigne le début d'un caractère spécial "numbering space" se terminant par un point-virgule.

 

Pointeurs vers autres documents.

Grâce au langage HTML, vous pouvez créer un hyperlien vers un document local, un document distant ou un signet dans ces deux types de documents.

Anchor

L'hyperlien est créé par l'utilisation du tag <A> pour "anchor" ou ancre.

La syntaxe complète est <A HREF="document">text</A>

où document désigne le document vers lequel on pointe et text représente le texte qui sera affiché pour représenter le lien hypertexte. Le mot "text" apparaîtra souligné en bleu et le curseur se changera en une petite main lorsqu'on passera au-dessus du mot avec la souris.

<A HREF="#bookmark"> crée un lien vers un signet dans le meme document.

<A NAME="bookmark"> crée un signet

Listes

Listes numérotées ou Ordered (numbered) lists

<OL>

  <LI> oranges

  <LI> prunes

  <LI> cerises

</OL>

Listes non numérotées ou Unordered lists

 <UL>

  <LI> pommes

  <LI> poires

  </UL>

Images

<IMG ATTRIBUTES>
ATTRIBUTES :
ALIGN=alignement top, middle, ou bottom.
ALT="text" texte alternatif si le navigateur ne supporte pas les images
WIDTH="x"
HEIGTH="y"
ISMAP
SRC="URL"

La commande <IMG> va nous permettre de placer des images de type GIF ou JPEG dans notre document HTML. C'est une des rares balises HTML à ne pas être associée à une balise de fin. </IMG> n'existe donc pas.

Pour spécifier où se trouve l'image à inclure nous devons utiliser l'attribut SRC="" pointant vers l'URL de l'image comme suit

<IMG SRC=http://www.best.be/inside/nl/gif/inside20/insidenl.gif width=50" height="50" >

Si nous voulons modifier la taille originale de l'image il suffit de spécifier sa largeur et/ou sa hauteur avec les attributs "width" et "height". Il est toujours important d'utiliser l'attribut Alt="text" pour donner une représentation en mode texte de l'image le temps qu'elle soit chargée. Le texte inclus dans Alt apparaîtra sous forme d'infos bulles lorsque vous passerez sur l'image avec la souris.

STYLE

Logique

Physique

Reprenons toutes ces nouvelles balises dans un exemple

<HTML>

    <HEAD>

        <TITLE>My title</TITLE>

    </HEAD>

    <BODY>

    <IMG SRC=http://www.best.be/inside/nl/gif/inside20/insidenl.gif width="100" height="150" alt="logo best">

    <BR>preformated text

<PRE>

*

***

*****

*******

*

CITATIONS</PRE>

<BLOCKQUOTE>

"quotation"

</BLOCKQUOTE>

ADRESSE

<ADDRESS> email </ADDRESS><br>

STYLE<br>

Logical

· Emphase: <EM>Emphase</EM> <br>

· Citations: <CITE>Citations</CITE> <br>

· Variable name: <VAR>Variable name </VAR><br>

· strong Emphase: <STRONG>strong emphase</STRONG><br>

· Source code : <CODE>Source code</CODE><br>

· litteral caracters <SAMP>litteral caracters </SAMP><br>

· keyboard input: <KBD>keyboard input</KBD><br>

· Definitions: <DFN>Definitions</DFN><br>

· strike: <STRIKE>strike</STRIKE><p>

Physical <br>

· Italic: <I>Italic</I><br>

· Bold: <B>Bold</B><br>

· TeleType: <TT>Fixed font typewriter style</TT><br>

. Underline: <U>Underline</U>

</BODY>

</HTML>

qui donnera ceci

 

Caractères spéciaux

Le gros problème du langage HTML est de ne pas supporter les caractères ASCII au delà de 128. Cela veut dire que je ne peux pas taper directement un é accent dans le code de ma page HTML maisque je dois remplacer cette lettre par un code spécial constitué comme suit:

Un é deviendra donc &eacute;

Le texte à encoder devient vite illisible puisque la phrase ci dessus devient

Le gros probl&egrave;me du langage HTML est de ne pas supporter les caract&egrave;res ASCII au del&agrave; de 128

Heureusement Netscape et Internet Explorer acceptent les accents dans le texte mais il est toujours préférable d'encoder proprement vos accents comme le recommande le standard HTML

Puisque les &, les <, les >, les " sont utilisés par le langage HTML, il faudra aussi les remplacer par des caractères spéciaux respectivement &amp; (ampersand) &lt; (less than) &gt; (greater than) &quot; (quote)

Eléments de style pour la publication électronique

Taille

Gardez vos documents les plus petits possibles. Pensez au temps de chargement pour les modems les plus lents.

Consistance

Gardez une certaine consistance entre toutes les pages d’un site WWW en adoptant un fichier modèle de base qui sera utilisé pour toutes les pages HTML

Indépendance par rapport au navigateur

Les documents HTML ne contiennent aucune information relative aux polices et espacement ce qui lui permettra d’être correctement rendu quelle que soit la plate-forme, même un simple terminal.

Utilisez les listes et les headers tels qu’ils ont été pensés.

Utilisez les headers dans l’ordre sans sauter de numéro même si un numéro précis ne vous plait pas.

Ne bourrez pas votre texte de caractères blancs

Ne placez pas de phrase du type "cliquez ici" puisque l’utilisateur n’a pas nécessairement une souris

Il est important que votre document soit bien rendu quelque soit le programme client.

 

Lisibilité

Pour l’utilisateur

Les consignes d’application pour tout média, phrases concises, orthographe sont bien entendu d’application sur le net.

Evitez les termes vagues du style "ici" pour définir un lien.

Essayez que les hyperliens fassent partie d’une phrase complète de manière à ce que l’utilisateur comprenne bien le sens de ce lien.

Même si vos pages ont été créées dans un certain ordre, il faut toujours se rappeler que les utilisateurs les liront dans n’importe quel ordre. Evitez donc au début d’une page, toute référence à d’autres pages du style "donc", "point suivant" etc.

Pour les créateurs

Le code de vos documents HTML doit être lisible pour ceux qui en assurent la maintenance. Indentez le code pour en augmenter la lisibilité. N’hésitez pas à utiliser les commentaires pour scinder des blocs d’information ou pour rappeler en en-tête du document les coordonnées du créateur, la date de création etc.

Relocation

Evitez de déplacer une page une fois qu’elle a été publiée électroniquement car beaucoup d’utilisateurs l’auront déjà consignée dans leur "hot list"

Date et Signature

Toute page HTML doit comporter une signature de façon à ce qu’on puisse contacter son auteur. Une date est également recommandée pour pouvoir juger de la fraîcheur de l’information.

A part le tag <ADDRESS>, une convention est de créer un lien de type "made" dans le header du document.

Les fichiers images

GIF

GIF signifie General Interchange Format, un standard de fichier image imaginé par Compuserve.

Il en existe des variantes 87 et 89. Le format 87 est plus répandu et préférable. Les images GIF sont limitées à 256 couleurs et sont comprimées ce qui les rend idéales pour des transmissions modem ou réseau.

Les images GIF sont sauvées normalement ou de manière entrelacée, des lignes séparées de manière équidistante sont stockées ensemble La majorité des navigateurs reconnaissent ces deux formats.

Le navigateur Netsacpe qui décode les images incrémentalement pendant le chargement du texte est capable d’exploiter avantageusement les images entrelacées en procurant un effet de fondu, de volet vénitien qui laisse apparaître progressivement la totalité de l’image au lieu de n’en dévoiler que les premières lignes.

JPEG

Pour des images de qualité photographique, le format JPEG a de nombreux avantages sur le format GIF. JPEG désigne le format Joint Photographic Expert Group. Il supporte 16 millions de couleur et supporte un taux de compression variable qui permet de doser proprement le quotient qualité d’image/temps de chargement. GIF fait une compression de type "losless" sans perte d’informations alors que JPEG recourt à la compression "lossy" où vous pouvez perdre une partie de l’information de l’image au moment de sa compression. Même un taux de compression de 130:1 donne encore des images d’excellente qualité.

Il est très courant de trouver une petite image GIF qui sert d’hyperlien vers une image JPEG de grande taille et de meilleure qualité pour un téléchargement ultérieur.

Taille d’image

Pour le confort des utilisateurs Netscape, il est intéressant de profiter d’une extension à la commande IMG

de type <IMG SRC="foo.gif" WIDTH=xxx HEIGHT=yyy>

Cela permet au navigateur de connaître à l’avance la taille de l’image à télécharger, de créer un espace réservé à cette image et de continuer l’affichage simultané du texte venant après l’image.

Erreurs classiques

Liens inutiles

Evitez les liens trop nombreux ou illogiques. Un être humain moyen s’égare dans le cyberspace après avoir surfé sur plus de sept hyperliens.

 

Style Physique et Logique

Imposer des styles gras, italique ou souligné, c’est imposer de la part d’un auteur HTML sa conception du document final. Si un navigateur ne sait pas rendre les caractères italiques, il pourra par contre rendre à sa manière des styles logiques comme l’emphase, la citation,

Ecrivez <EM> ou <CITE> au lieu de <I>

et <STRONG> plutôt que <B>

 

Caractères accentués

Code ASCII Code HTML Caractère

34 quot "
38 amp &
60 lt <
62 gt >
128 Ccedil Ç
129 uuml ü
130 Eacute é
131 acirc â
132 auml ä
133 agrave à
134 aring å
135 ccedil ç
136 ecirc ê
137 euml ë
138 egrave è
139 iuml ï
140 icirc î
141 igrave ì
142 Auml Ä
143 Aring Å
144 Eacute É
146 AElig Æ
147 ocirc ô
148 ouml ö
149 ograve ò
150 ucirc û
151 ugrave ù
152 yuml ÿ
153 Ouml Ö
154 Uuml Ü
155 oslash ø
157 Oslash Ø
160 aacute á
161 iacute í
162 oacute ó
163 uacute ú
164 ntilde ñ
165 Ntilde Ñ
181 Aacute Á
182 Acirc Â
183 Agrave À
198 atilde ã
199 Atilde Ã
208 eth ð
209 ETH Ð
210 Ecirc Ê
211 Euml Ë
212 Egrave È
214 Iacute Í
215 Icirc Î
216 Iuml Ï
224 Oacute Ó
225 szlig ß
226 Ocirc Ô
227 Ograve Ò
228 otilde õ
229 Otilde Õ
231 thorn þ
232 THORN Þ
233 Uacute Ú
234 Ucirc Û
235 Ugrave Ù
236 yacute ý
237 Yacute Ý