HTML est l'abréviation de HyperText Markup Language. Crée par le CERN au début des années 90, c'est un langage de balisage qui permet une présentation agréable des textes et la navigation dans le texte et en dehors du texte par des liens (hyperliens ou liens hypertexte).
Il est inutile de savoir comment fonctionne le HTML pour consulter Internet. Sa maîtrise est utile pour écrire ses proprès pages, mais comme pour les traitements de texte modernes, les progrès des logiciels d'édition HTML permettent maintenant d'écrire des pages sans avoir a manipuler des balises. Le principe initial est le suivant : une page HTML est une suite de caractères (lettres ou chiffres) généralement sans accents pour garantir son caractère international. Les accents sont alors obtenus par des mots spéciaux intégrés dans le texte ; par exemple le e s'écrit " è " le c " ç ". Les enrichissement (gras, couleur…) sont matérialises par des balises : toto est lu par le navigateur comme : " début du texte en gras (B comme Bold = gras en anglais) " toto " fin du texte a mettre en gras (/ signifie qu'il s'agit d'une balise de fin) ".
D'autres balises définissent une variable. Voila qui rappellera des souvenir a ceux d'entre vous qui ont utilise les versions DOS des traitements de texte. Il existe de nombreuses balises dont la syntaxe est décrite par exemple sur ce site. Exemple de fragment de code HTML décrire l'apparence, je peux mettre ce mot en gras ou en italique de manière à le mettre en évidence visuellement.
D'autres balises définissent une variable. Voila qui rappellera des souvenir a ceux d'entre vous qui ont utilise les versions DOS des traitements de texte. Il existe de nombreuses balises dont la syntaxe est décrite par exemple sur ce site. Exemple de fragment de code HTML décrire l'apparence, je peux mettre ce mot en gras ou en italique de manière à le mettre en évidence visuellement.
Ce genre de charabia peut apparaître accidentellement lors de la lecture d'une page mal balisée ou lors de l'accès a un message électronique écrit en HTML et lu par un logiciel qui ne sait pas le décoder. Lors de la consultation d'une page sur le Web, le menu "Affichage/source" ou équivalent du navigateur permet de voir le code HTML de la page affichée. La création de pages html La création de pages html (hyper text markup language) est à la portée de tous. Il suffit d'écrire n'importe quoi dans Word et de le sauver au format html pour qu'on puisse le consulter sur le réseau. Cependant, si l'on veut écrire des pages s'intégrant dans un site et modifiables aisément par d'autres, rien ne remplace le travail "cousu main" qui produit du code "propre".
Il y a actuellement trois systèmes d'exploitation dans notre petit monde, Windows, Mac OS et Unix. Il y a deux navigateurs, celui de Netscape et celui de Microsoft. L'un des mérites du code propre est de s'accommoder sans problème de tout.
Un mot sur les noms de fichier. Ne pas utiliser de lettres accentuées ou d'espaces. Faire attention aux miniscules/majuscules. Windows et MacOS sont tolérants mais pas Unix. Utiliser des noms comme Notes_Concours.htm ou NotesConcours.htm par exemple.
Ouvrons Netscape Navigator ou Internet Explorer ou encore les deux. L'un et l'autre nous permettent de lire des pages sans aller sur le réseau. On peut modifier le code d'un fichier source dans un petit éditeur quelconque et regarder le résultat en demandant la mise à jour dans le navigateur.
Commençons par réaliser une page minimale, à savoir Mini. Elle est comprise dans les parenthèses... qui contiennent elles-mêmes les parenthèses... délimitant le corps. Ce qu'on écrit dans le corps apparaît dans la page. Noter la syntaxe des balises, l'utilisation des <...> et l'oblique dans la balise de fin . Majuscules ou minuscules, dans les balises peu importe.
Avec Mini2 on va un peu plus loin. On a ajouté un titre entre les basiles ... situées dans l'en-tête ... qui précède le corps. Le titre n'apparaît pas dans la page, mais le navigateur l'indique dans sa fenêtre. On a défini un paragraphe entre les balises... et appliqué un saut de ligne avec (break) à l'intérieur du paragraphe. On a aussi ajouté des corrections typographiques locales: ... pour encadrer du gras (bold), ... pour encadrer de l'italique.
Enfin on a mis des signes diacritiques, surtout des accents; noter la syntaxe de é comprenant & au début et ; à la fin. C'est là que le bât blesse. Ecrire ces codes est fastidieux. Donc ou bien on utilise un éditeur qui les génère à volonté, comme Clarisworks sur un Mac. Ou alors on complète et on frappe les lettres accentuées, ce que fait Word XP. Voir Mini2bis par exemple. Malheureusement on perd alors la compatibilité avec Mac OS et Unix. Noter que le code pour un espace insécable (non breakable space) est généré par Word aussi.
En résumé, il est important de connaître quelques balises, soit pour écrire soi-même le code, soit pour le nettoyer s'il a été généré automatiquement. Regarder par curiosité le code source des fichiers html écrits avec Word et sauvés en mode Web (WordWeb.htm) ou en mode Web filtré (WordWebF.htm). Ils ne contiennent qu'une petite ligne de texte! Mais que de commentaires superflus (entre).
Dans Mini3 on trouve un lien "suite" avec du texte sur lequel cliquer entre les balises ... qui définissent une ancre (anchor). Dans la première la référence href (h pour hyper) indique où mène le lien.
Ici c'est un fichier du même dossier. Pour descendre la hiérarchie on place des / . Pour remonter la hiérarchie ou utilise ../ simplement.
Si le lien est externe on écrira par exemple
href="http://www.iecn.u-nancy.fr">
Dans Mini4 on trouve une couleur de fond (background) où la couleur est codée en composantes RGB (red, green, blue) et en hexadécimal: ff=15x16+15=255 est le plus fort; cc=12x16+12=204 est moins fort, 00 est le plus faible; #ffffff est blanc et #000000 est noir. Cela dit on peut écrire white, black, red, green, blue, yellow, brown ... plus simplement.
Dans Mini4 on a imposé des styles aux paragraphes, comme avec si on ne le fait pas, il est possible de régler taille, police... dans le navigateur; c'est bien mais gare à la mise en pages, surtout s'il y a des images ! Pour éviter l'accumulation des codes, considérer que tout passage de style uniforme est un paragraphe. "Mettre" pour sauter une ligne sans changer de paragraphe.
Dans Mini5 on a inséré une image par [Image] au format GIF ici, en précisant la source; les formats GIF et JPEG sont lus par tous les navigateurs. Jeter un coup d'oeil à Mini6 qui contient un script; c'est juste pour savoir que cela existe.
Dans Mini7, on trouve une table entre les balises... On a fixé une largeur de 600 points, une bordure de 3 points, un fond blanc. Les lignes (rows) sont entourées par les balises... Les cellules indiquent la largeur (width) en pourcentage...ou en points. Une cellule peut déborder avec un code tel que... Enfin on peut préciser l'alignement à l'intérieur avec align=center
par exemple.
Dans Mini8 on a disposé des cadres (frames) et découpé la fenêtre en deux, verticalement ici. L'une (limitée à 90 points) est une table des matières. L'autre prend ce qui reste (*). Chaque cadre doit avoir un nom (name) et une source (src) qui est un autre fichier. Le fichier bar.htm contient la table. Les ancres précisent le cadre concerné par target="section" ici. Reste l'épineux problème des mathématiques. Le plus simple est de composer sa page dans son logiciel préféré et de l'imprimer au format PDF avec Adobe Acrobat (la version complète). Un lien vers le fichier PDF ouvrira Acrobat Reader (gratuit). Voir sur le site IREM, dans les nouveautés, le séminaire virtuel par exemple.
