Les balises

Identification

Infoforall

1 - Premier contact avec les balises


Cette courte activité vous propose de créer un petit texte en HTML à l'aide d'un éditeur.

La notion fondamentale découverte ici est la balise qui est la brique fondamentale de ce type de langage.

Cette partie présente une introduction à l'HTML et présente surtout du vocabulaire qui pourra être utile par la suite.

internet

Logiciel nécessaire pour l'activité : Atom ou Notepad++ (Windows) ou Notepaddd (Linux)

1 - Navigateur et langages

Logos des navigateurs

Le navigateur reçoit des instructions (un code HTML, CSS …) et l’interprète en affichant (correctement ou non) du texte, des images, des vidéos …

Les navigateurs sont nombreux et possèdent tous des qualités et des défauts par rapport aux autres. Les plus connus actuellement sont certainement Firefox de Mozilla, Chrome de Google et Edge de Microsoft (le successeur d’Internet Explorer). Safari reste une référence sur les machines Apple.

La plupart des navigateurs mobiles sont des versions adaptées à ce support des logiciels précédents. On notera que la consultation du Web sur mobile est en train de dépasser celle sur ordinateur. Il va donc falloir s'adapter à ce support et vérifier que le site créé soit bien lisible sur ce format ou le format tablette.

On donnera un rapide aperçu de l’HTML et du CSS :

HTML ( pour HyperText Markup Language)

Il fait son apparition dès 1991 lors du lancement du Web, cet ensemble de pages reliées les unes aux autres via des hyperliens. Son rôle est de gérer et d’organiser le contenu de ce que l'on veut afficher : HTML sert à définir clairement le type de données que vous allez afficher à l’écran.

  • HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991.
  • HTML 2 : cette version du HTML apparaît en 1994 et cette fois les règles sont établies par l'organisation qui s'assure désormais de la stabilité du Web, le W3C .
  • HTML 3 : cette version date de 1996 et on y trouve plusieurs ajouts (les tableaux, les applets, les scripts,…)
  • HTML 4 : apparaît en 1998 et propose plusieurs améliorations (dont l'utilisation de frames, des pages dans les pages). Cette version permet surtout d’utiliser le CSS : la forme de la page n’a plus à être mélangée avec son contenu.
  • HTML 5 : La dernière version pour l’instant.
CSS (Cascading Style Sheets :

Style Sheets veut dire Feuilles de style.

CSS permet donc de gérer l’apparence des données précédentes : la couleur, la taille, le positionnement … Il est apparu en 1996.

  • CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de ce langage qui permet de présenter sa page web, comme les couleurs, les marges, les polices de caractères, etc.
  • CSS 2 : apparue en 1999, cette version rajoute de nombreuses options.
  • CSS 3 : la dernière version. Elle apporte des fonctionnalités comme les bordures arrondies, les dégradés, les ombres, flex etc.

On notera qu'à l'époque, on codait le fond et la forme dans le même fichier. On peut aujourd'hui clairement séparer les deux et continuer à mélanger les deux revient à mettre de côté tous les avantages offerts par le CSS. Par contre, de nombreux sites amateurs, conçus avant cette séparation continuent à exister sur le Web et restent compatibles avec les navigateurs actuels. C'est toute la force de ce langage.

2 - Logiciels à utiliser

Un code HTML n’est qu’une suite de données : une suite très codifiée et alphanumérique. L’ordinateur ne peut en aucun cas « comprendre » le code : il le déchiffre caractère par caractère contrairement à un humain. Par conséquent, la moindre erreur rend l’instruction incompréhensible pour lui..

Le code HTML n’est au final qu’un simple texte. Un simple éditeur de texte générique, nommé éditeur de texte sous Linux et bloc-note sous Windows, peut suffire pour créer ce code.

Mais nous allons utiliser un éditeur plus complet comme :

  • Atom (Linux et Windows)
  • Notepad++ (Windows) ou Notepadqq (Linux)

Une fois le code tapé, il faut en vérifier l’exécution à l’aide d’un navigateur. Attention cependant, un même code peut s’afficher différemment en fonction du navigateur.

Exemple avec la page d'accueil de l'ancienne partie ICN avec (dans l'ordre) Edge, Firefox et IE11 .

Edge :

Affichage Edge

Firefox :

Affichage Firefox

IE :

Affichage IE11

Comme on peut le voir, un même code n'est pas interprété de la même façon.

01° Ouvrir votre éditeur de choix. Choisir un encodage UTF-8 ainsi que HTML comme langage. Comment ?

  • Avec les Notepad : il suffit de chercher dans la barre des menus Encoding et Langage.
  • Avec Atom : il suffit de regarder en bas à droite : UTF-8 devrait être choisi par défaut. A sa droite se trouve le type de fichier. Vous devriez voir Plain Text pour l'instant. Il suffit de cliquer dessus et de le remplacer par HTML.

Atom a la particularité de cacher sa barre des menus par défaut. Pour la faire apparaitre, il suffit d'appuyer sur la touche  ALT . Vous pourrez alors créer un nouveau fichier (FILE - NEW FILE) si Atom s'ouvre sur ... rien ...

02° Notez sur plusieurs lignes le texte que vous voulez afficher  :

Phrase sur la première ligne. Phrase sur la deuxième ligne. Contenu permettant la mise en emphase. Ceci est une partie importante. Là, je veux vraiment que personne ne le manque.

03° Enregistrez le fichier sous format .html : donner lui un nom clair (comme premiertest.html) et surtout enregistrez le dans un dossier que vous pourrez retrouver facilement : par exemple dans un dossier html de votre répertoire personne de travail ou sur votre clé USB. Pour cela, vous pouvez utiliser

  • soit le menu FILE - SAVE FILE AS
  • soit utiliser  CTRL S  et exécutez le (soit en double cliquant sur votre fichier ou à travers le menu Exécution de Notepad++) pour voir le résultat.

04° Retrouver le fichier dans votre explorateur. Cliquer dessus pour le lancer : l'ordinateur devrait l'ouvrir avec son navigateur défaut. Si ce n'est pas le cas, faire un clic droit sur le fichier et choisir le programme pour l'ouvrir : Firefox par exemple. Constat ? Le navigateur parvient-il à afficher correctement votre texte ?

On constate que le HTML sait afficher du texte (quelle surprise !). Par contre, le navigateur n’a pas compris que vous vouliez partir à la ligne. Il affiche les phrases à la suite des autres :

Phrase sur la première ligne. Phrase sur la deuxième ligne. Contenu permettant la mise en emphase. Ceci est une partie importante. Là, je veux vraiment que personne ne le manque.

Votre fichier HTML n'est pour l’instant constitué que de texte, il manque les instructions d’affichage : le fait d’avoir fait des passages à la ligne dans le fichier HTML ne change rien à l’affaire : le navigateur ne les « voit » pas. Pour lui, c’est un peu comme si vous aviez tout tapé sur la même ligne.

3 - Les premières balises : les balises texte de base

Les balises et leurs chevrons < >, voilà ce qui va structurer le code et donner des informations à votre navigateur.

Balises

En HTML, les délimitations sont toujours définies par des balises.

Les balises vont souvent par paire :

  • la balise d'ouverture, la première, (par exemple <h1>) indique le type de contenu et à partir de où il commence et
  • la balise de fermeture, la seconde, (par exemple </h1>) signale la fin de contenu. La seconde contient d’ailleurs un slash ( / ) supplémentaire pour bien la distinguer de la première.

04° Modifiez la première ligne de votre code comme indiqué ci-dessous, sauvegardez et relancez pour voir ce que cela change.

<h1>Phrase sur la première ligne.</h1>

...CORRECTION...

Phrase sur la première ligne.

Phrase sur la deuxième ligne. Contenu permettant la mise en emphase. Ceci est une partie importante. Là, je veux vraiment que personne ne le manque.

Voilà quelques exemples de balises  :

  • <h1> fermée par </h1> : les balises de titre principal.
  • <p> fermée par </p> : les balises de paragraphes.
  • <em> fermée par </em> : les balises d’emphase (une mise en relief, une insistance)
  • <strong> fermée par </strong> : les balises de mise en exergue plus forte (renforcement)
  • <mark> fermée par </mark> : cette balise marque un passage spécifique, que l'on souhaite mettre en valeur d'une façon particulière, pour attirer l'attention.

Il existe beaucoup de balises (tags en anglais) différentes que nous allons utiliser. Chacune d’elle apporte au navigateur soit une information sur le contenu (texte, image, vidéos, fichiers, liens …), soit la nature du contenu (titre, liste d’éléments, paragraphe normal, élément important  …  ).

05° Utiliser les balises suivantes sur une ligne à la fois pour voir la différence de traitement. Remplir le tableau ci-dessous avec vos indications.

<h1>Phrase sur la première ligne.</h1> <p>Phrase sur la deuxième ligne.</p> <em>Contenu permettant la mise en emphase.</em> <strong>Ceci est une partie importante.</strong> <mark>Là, je veux vraiment que personne ne le manque.</mark>
<h1> <p> <em> <strong> <mark>

Il existe également de plus vielles balises (tags) pour mettre en gras ou en italique. C’est encore de l’anglais : les balises

  • <b> pour bold et
  • <i> pour italic.
Nous expliquerons la différence avec <strong> et <em> plus loin dans le chapitre.

4 - Les listes

Parfois, on désire afficher une liste. Nous disposons alors de deux types possibles de liste :

La liste ordonnée (avec des numéros), par exemple :

  1. Premier truc
  2. Deuxième truc

La liste normale (non ordonnée, sans numéro).

  • Un truc
  • Un autre truc
Liste ordonnée (balise <ol>)

Si la liste est ordonnée (comme les explications de montage d'un meuble), on la crée avec des balises <ol> et </ol>.

ol pour Ordered List.

Chaque ligne de la liste est spécifiée à l'aide d'un autre type de balise : les balises lignes <li> et </li>.

<ol> <li>Rentrer en classe</li> <li>Travailler</li> <li>Sortir de la classe</li> </ol>

On voit bien que la première ligne signale l’ouverture d’une nouvelle liste ordonnée.

Les trois lignes suivantes précises à chaque fois la nature des éléments de la liste.

La dernière ligne précise la fermeture de la liste ordonnée.

Le code de la liste produit cela :

  1. Rentrer en classe
  2. Travailler
  3. Sortir de la classe

06° Créer une liste ordonnée sur votre propre page HTML.

Indentez correctement à droite vos balises <li> par rapport à la balise-conteneur <ol>: cela indique qu'elles sont contenues dans la balise <ol>.

Pour cela, vous pouvez utiliser la touche  TAB  située à gauche de la touche  A . Autre méthode : appuyer par exemple 4 fois sur la touche  ESPACE . Mais c'est plus long.

D'ailleurs, vous devriez constater la présence d'une petite flèche derrière le numéro de la ligne : en cliquant dessus, vous pouvez cacher ce que contient la balise entre son ouverture et sa fermeture.

07° Cliquer sur la petite flèche pour visualiser qu'on peut dissimuler le contenu d'une balise.

Liste non ordonnée (balise <ul>)

Si la liste n’est pas ordonnée (comme une liste d'achats), on la crée avec des balises <ul> et </ul>.

ul pour Unordered List.

C'est la seule différence avec la liste précédente.

<ul> <li>Rentrer en classe</li> <li>Travailler</li> <li>Sortir de la classe</li> </ul>

Ce qui donne :

  • Rentrer en classe
  • Travailler
  • Sortir de la classe

08° Rajouter une liste non ordonnée sur votre page.

Avec la plupart des éditeurs de code, vous pouvez cliquer une balise et voir d'une façon où d'une autre où se trouve la balise de fermeture. Avec Atom par exemple, on voit les balises d'ouverture et de fermeture devenir soulignées. C’est pratique pour comprendre l’imbrication des balises si la personne ou le programme qui a codé la page n'a pas correctement tabulé les imbrications successives.

5 - Balises Block et balises Inline

Nous avons vu qu'on utilise une balise d'ouverture et une balise de fermeture pour délimiter le contenu proposé.

Nous allons maintenant voir qu'il existe deux catégories de balises.

Deux types de balises : block ou inline

Balises de type BLOCK : Ce sont les balises qui imposent à leur contenu d'être sur une ligne indépendante des autres contenus :

  • Les balises paragraphes <p>
  • Les balises titres <h1>
  • Les balises lignes <li>
  • et bien d'autres.

Balises de type INLINE : ce sont les balises qui ne créent pas de passage à la ligne.

  • Les balises <strong>
  • Les balises <em>
  • Les balises <mark>
  • et bien d'autres.

09° Rajouter des balises <mark> et </mark> autour de l’un de mots de votre page. Vous devriez constater qu'il va devenir surligné mais qu'il ne subira pas de passage à la ligne. Il reste en ligne par rapport au reste du texte.

...CORRECTION...

Normalement, vous devriez avoir un code du type :

<p>Je veux mettre un <mark>élément</mark> en balise mark</p>

Et qui devrait rendre quelque chose comme  :

Je veux mettre un élément en balise mark

On remarquera encore une fois (c'est important, j'insiste !) qu'on ne peut donc ouvrir et fermer les balises dans n’importe quel ordre  :

On commence par <p> donc il faut finir par </p>.

Ainsi <p><em></em></p> est une structure correcte : <p> englobe bien <em>.

Par contre, <p><em></p></em> n’est pas une structure correcte : <p> et <em> sont imbriquées l’une dans l’autre sans que l’une englobe l’autre.

6 - Commentaires

Il reste à voir comment insérer un commentaire qui sera présent dans le code mais qui ne sera pas affiché à l’écran.

<!-- Commentaires -->

Les commentaires dans un fichier HTML sont indiqués par des chevrons. Les voici  :

Le début du commentaire est codé par <!--.

La fin de la zone de commentaire est codée par -->.

Voici un exemple d'utilisation de commentaires sur une ligne puis sur plusieurs lignes :

<p>Je veux mettre un <mark>élément</mark> en balise mark</p> <!-- Ici je place un commentaire, une explication --> <p>Et ici, je reviens sur un contenu à afficher</p> <!-- Le plus beau, c'est qu'on peut faire des commentaires sur plusieurs lignes <p>Ah ah ah</p> Et que les balises contenues dans le commentaire n'auront aucun effet --> <p>C'est la fin, avec un nouvel affichage</p>

Ce code va provoquer l'affichage suivant :

Je veux mettre un élément en balise mark

Et ici, je reviens sur un contenu à afficher

C'est la fin, avec un nouvel affichage

10° Rajouter un commentaire signalant où se trouve le début de votre code et un autre pour signaler le début de votre liste. Le commentaire devrait apparaître dans une couleur différente du reste du texte sur votre éditeur.

Il reste beaucoup de choses à dire, vous vous en doutez bien. Mais vous avez maintenant compris le principe de base de la description par balise.

Les autres activités vont permettre d'appronfondir tout cela, mais on retrouvera toujours la notion de balises et des balises contenant d'autres balises.

Activité publiée le 28 08 2019
Dernière modification : 28 08 2019
Auteur : ows. h.