L'ordinateur et l'Internet en classe de langue : petits conseils pratiques - Deuxième partie
texte et images : Paola Musarra
au sommaire
Versione italiana: 
Le code HTML
Où en étions-nous ?
Ah, oui : on venait juste de cliquer sur Source ("HTML"), vous rappelez-vous ?
Une fenêtre s'était ouverte (le Bloc-notes de Windows), présentant le code utilisé pour créer la page Web que vous étiez en train de consulter.
Vous avez sans doute remarqué que le code du document HTML est composé de texte et de "balises" (ou "tags").
Les balises contiennent les instructions, qui sont encadrées par des "chevrons" (ou "crochets", vous les avez sur votre clavier) :
inférieur à (<) et supérieur à (>).
Ces instructions servent pour mettre en forme le texte : lors de l'exécution du fichier, votre navigateur (browser) les interprète, traduit le texte en clair et affiche le document sous la forme d'une page Web.
Qu'est-ce qui se passe ? Trop technique ? Allons, ne soyez pas timides, sortez de là !
D'ailleurs, je vais vous rassurer : il vous suffira d'apprendre une dizaine (j'ai bien dit "une dizaine") de ces instructions, pour créer une page Web simplette mais complète, avec une image (ou plusieurs) et un lien (ou plusieurs) vers une autre page (ou plusieurs)... juste une petite cellule, bien sûr, disons un embryon d'hypertexte, mais tout prêt à se lancer dans le cyberespace !
Vous ne me croyez pas ?
Suivez-moi !
Insérez une diskette vide et propre dans le lecteur a:.
Créez sur la diskette un répertoire que vous appellerez "atelier" :
En utilisant le Bloc-notes de Windows, vous sauvegarderez à l'intérieur du répertoire "atelier" une page vide, que vous enregistrerez sous le nom de "code.htm" (sans guillemets...).
Les pages Web ont en général l'extension ".htm" ou ".html" : choisissons ".htm", pour économiser une lettre !
Après avoir fait cette opération, la situation sur votre diskette sera la suivante :
Vous cliquerez sur le fichier "code" (pas maintenant, petits, plus tard ! Il faut toujours savoir où l'on est et ce que l'on fait... Pour le moment, contentez-vous de suivre et de comprendre). Une fenêtre du Bloc-notes s'ouvrira, dans laquelle vous copierez les instructions suivantes :
Examinons de près ces balises, qui constituent la structure de base, le "conteneur" (encore vide) de votre future page Web.
- <html> ... </html>
La balise <html>, c'est le début de la page Web, l'indispensable introduction, à laquelle correspond la balise de fermeture </html>, identique, mais avec une barre oblique après le signe "inférieur à".
Deux remarques importantes :
- toutes les instructions ne nécessitent pas de fermeture ;
- les instructions sont imbriquées, c'est-à-dire que la première qui sera ouverte sera fermée la dernière. Si ça vous intrigue, pensez aux parenthèses en maths, ou mieux, aux pétales d'une rose : le code HTML est comme une fleur...
Entre les deux instructions <html> et </html> sont contenues toutes les autres balises. Vous pouvez insérer autant d'instructions que vous le désirez, les multiplier, mais... attention aux imbrications !
- <head> (avec sa balise de fermeture </head>)
Après la balise d'introduction (<html>), vous avez une sorte d'en-tête (header), qui contient des informations générales sur le fichier (utiles pour activer les moteurs de recherche), dont
- <title> ... </title>
qui contient le "titre" de la page. Ce titre sera affiché sur la ligne bleue en haut (la barre de titre) de votre navigateur Internet Explorer, lorsque le fichier sera exécuté.
- <body ... > ... </body>
C'est la partie la plus importante de votre page Web. Entre ces deux balises sont contenues toutes les informations que votre navigateur affichera dans sa fenêtre : titres, textes, images, liens...
Avez-vous remarqué les points de suspension dans la balise d'ouverture ? Cela veut dire que ce tag peut être complété par d'autres paramètres, concernant les couleurs ou l'image de fond, la couleurs des liens... Par défaut (c'est-à-dire, si vous ne donnez aucune indication), le fond est blanc.
- <font ... > ... </font>
Cette balise définit la couleur, la taille et les polices des caractères du texte. Elle doit être complétée par d'autres attributs (color, size, face) qui devront à leur tour être définis. Par défaut, le texte est affiché en noir, Times New Roman.
- <h1> ... </h1>
Pour définir la taille des titres, vous pouvez utiliser ce tag: il y a six différentes tailles, de <h1> (la plus grande) à <h6> (la plus petite). Ça vous permettra de jouer avec les titres et les sous-titres des différents paragraphes...
- <p ...> ... </p>
Et à propos de paragraphes... Cette instruction marque le début et la fin d'un nouveau paragraphe, avec un retour à la ligne. Elle est très importante, car elle consent d'"aérer" la présentation d'un texte.
Allez souvent à la ligne, je vous en supplie, évitez autant que possible de nous refiler ces grands blocs de texte si difficiles à digérer...
La balise <p ...> peut être complétée par des instructions d'alignement du paragraphe (à droite, à gauche, au centre, justifié). Par défaut, les paragraphes sont alignés à gauche.
- <img src="..." .... >
Ce tag (qui n'a pas de fermeture) vous permet d'ajouter une image à votre fichier. Il doit être complété par le nom de l'image, avec son extension ; on peut aussi ajouter une série de paramètres concernant la taille de l'image, son alignement et sa distance par rapport au texte ou aux autres images qui l'entourent. Il y a aussi une autre possibilité, l'attribut "alt" qui permet d'insérer entre guillemets des informations supplémentaire sur l'image ou bien un commentaire ou une petite description de l'image pour ceux qui ne la voient pas.
Les deux formats d'images les plus utilisés sur le Web ont l'extension ".gif" ou ".jpg".
Le format GIF (Graphics Interchange Format), limité à 256 couleurs, peut être rendu en partie transparent et consent de créer de petites animations.
Le format JPEG (Joint Photographic Expert Group) peut représenter jusqu'à 16,7 millions de couleurs, mais il ne permet pas la création d'animations.
- <br>
Cette instruction (sans tag de fermeture) insère dans votre texte un retour à la ligne. Le navigateur ignore la touche Retour ("Invio"), n'oubliez donc pas d'utiliser <br> pour aller à la ligne quand vous tapez votre texte dans le Bloc-notes.
- <a href=" ... . ... "> ... </a>
C'est l'instruction de base de l'hypertexte : avec sa balise de fermeture, elle vous permet de créer un lien vers un autre fichier HTML ou vers une image, dont vous devrez indiquer le nom. Tout ce qui sera inséré entre les deux balises sera "cliquable" et activera le lien.
Vous pouvez aussi créer un lien vers une messagerie électronique : l'usager pourra envoyer directement un mél à l'adresse indiquée.
Voilà, c'est tout ! Je vous l'avais promis: rien qu'une dizaine d'instructions...
Vous sauvegarderez votre fichier "code.htm", qui pourra vous servir comme modèle.
Ce n'est qu'un conteneur vide, nous l'avons déjà souligné. Pour le compléter, vous pouvez utiliser, en guise d'exemple, le modèle suivant :
Quelques précisions :
- pour simplifier, les couleurs sont indiquées par leur nom en anglais. Elles peuvent aussi être désignées par six chiffres hexadécimaux, représentant les proportions des trois couleurs lumineuses de base (rouge, vert et bleu). Vous remarquerez que dans ce modèle le vert remplace le jaune des couleurs primaires (rouge, jaune et bleu) ;
- le lien "page suivante" est adressé vers un fichier "page2.htm" que vous pourrez créer plus tard ;
- l'image "chat.jpg"" est une aquarelle de Paola Rosati. Elle m'a aimablement permis de l'utiliser pour rendre plus gaie votre première page Web, votre "page d'accueil".
Vous enregistrerez cette page dans votre répertoire "atelier". Vous choisirez l'option Enregistrer sous... ("Salva con nome") à partir du menu Fichier ("File") et vous baptiserez votre fichier : "accueil.htm" (sans guillemets !!).
Avant de l'exécuter, il faudra se procurer le chat... le voici :
Vous utiliserez la touche droite de votre souris pour le capturer (une souris qui capture un chat...) et vous l'enfermerez dans votre répertoire "atelier".
Et ce sera tout !
En cliquant sur "accueil", si vous avez bien travaillé, vous obtiendrez l'image suivante :
A partir de là, ce sera à vous de jouer : visualisez le code, modifiez les titres, les couleurs, procurez-vous d'autres images, changez les paramètres, écrivez des textes, des poèmes... Je suis là pour vous conseiller, contactez-moi !
Quoi ? Qu'est-ce que vous dites ? Les contenus ???
Ça, c'est une autre histoire : nous en reparlerons...
Biblio
Un seul texte (et en italien), avec un CD qui crée une classe virtuelle:
Robert Fuller, Virtual Classroom. Impara il linguaggio HTML passo per passo, McGraw-Hill, Milano 2002, 30 euros. Un bon investissement.
