Les Balises et l’Accentuation

Première Leçon – Les balises et l’accentuation :

 

Nous avons défini le langage HTML (HyperText Markup Language) comme un langage permettant de décrire la structure d’un document Web. Pour ce faire, il faut encadrer chacune des différentes structures du texte par une paire de Balises, une au début (<>) et une autre à la fin </>.

Ces Balises seront bien sûr invisibles au moment de l’affichage du document du site Web.

Dans un Traitement de texte, lorsque l’on veut mettre un mot en gras, on sélectionne les caractères, puis on clique généralement sur une petite icône qui a pour effet de les faire passer dans la graisse choisie. De façon interne et sans que cela apparaisse à l’écran, le traitement de texte inscrit dans le fichier un code indiquant qu’une zone en caractères gras commence, puis viennent ensuite les caractères en question ; enfin, un nouveau code indique le retour aux caractères standard.

Ce sont ces codes que l’on appelle des balises. Dans le langage HTML, la gestion des balises est à la charge de l’auteur.

Les balises sont délimitées par les signes < (inférieur à) et > (supérieur à).

EXEMPLE :

Monsieur Pierre part en vacances <balise> et il reviendra dans une semaine </balise> pour reprendre son travail.

Remarquez le caractère / en couleur bleue, dans la balise de fin.

Voici un exemple de saisie pour passer un groupe de caractères en gras dans le langage HTML (utilisation de la balise <B> pourBold ou gras) :

Reprenons notre exemple ci-dessus :

Monsieur Pierre part en vacances <b> et il reviendra dans une semaine </b> pour reprendre son travail.

Voici un aperçu, en cliquant ici. (Exemple 1)

Nous allons faire volontairement une faute de syntaxe, en oubliant de mettre, par exemple, la balise de fin comme ci-après : </b>

Reprenons notre exemple : Monsieur Pierre part en vacances <b> et il reviendra dans une semaine pour reprendre son travail.

Nous voyons bien, en oubliant la balise de fin de caractères gras (</b>) concernant notre exemple, ce qui donne ceci :

Monsieur Pierre part en vacances et il reviendra dans une semaine pour reprendre son travail.

Ou encore pour aller se promener.

Vous pouvez voir l’aperçu dans votre Navigateur ou Browser, en cliquant ici. (Exemple 2)

Nous savons dorénavant que le paragraphe ci-dessus est en caractères graisse choisie et que, nous voyons bien également que certains mots sont largement en gras, or que, on voulait mettre uniquement la phrase en graisse choisie : « et il reviendra dans une semaine pour reprendre son travail. » Tout simplement, nous avions oublié de mettre la balise de fin </b>.

C’est pourquoi qu’il ne faille pas oublier certaines balises de fin (</>).

Si l’on veut utiliser les deux caractères <> dans le texte courant, il faudra trouver un artifice afin que le Browser ou Navigateur ne tente pas de les interpréter comme balises. On les remplacera par leurs entités HTML équivalentes :

 

  • Le caractère > sera remplacé par gt;, n’oublions pas de mettre un & commercial devant la lettre g et à la fin de la lettre t, le point virgule.
  • Le caractère < sera remplacé par lt;, n’oublions pas de mettre un & commercial devant la lettre l et à la fin de la lettre t, le point virgule.

 

Ceci produira dans la fenêtre du browser :

Les signes < et > délimitent les balises HTML. Pour regarder l’aperçu, cliquez ici (Exemple 3)

A noter : Le texte à l’intérieur des balises peut être indifférent, en majuscule ou en minuscule :

<b> ou <B> sont strictement équivalents.

N.B. : Pour que vous puissiez voir le code HTML dans votre navigateur pour visualiser, il suffira de cliquer avec le bouton droit de votre souris, afin d’ouvrir le menu contextuel, puis de pointer sur « Afficher le code source de la page ».

 

L’accentuation :

 

L’enregistrement des fichiers contenant les documents HTML est effectué sur la machine serveur en code ASCII 7 bits, ce qui ne permet pas d’accentuer directement le texte. On utilisera donc des mots-clés pour tous les caractères accentués et autres symboles, de façon identique au traitement des caractères < > décrits au paragraphe ci-dessus.

(Le Code ASCII 7 bits définit sur les 7 bits de poids le plus faible d’un octet un jeu de 128 caractères incluant les chiffres, les minuscules, les majuscules, un certain nombre de signes ainsi que des caractères de contrôle non imprimables. Le huitième bit sert au contrôle de parité pour valider l’exactitude de la transmission. Il ne reste pas assez de place dans ce code pour représenter les caractères accentués).

C’est pourquoi que nous allons vous présenter certains Caractères accentués, symboles, afin d’obtenir certains codes des mots-clés pour l’alphabet ISO Latin 1 que nous expliquerons cela ultérieurement dans un paragraphe ou dans une leçon consacrée à cet effet.

 

Caractères accentués, Symboles :
Caractère Syntaxe Syntaxe (ASCII) Description
Á &Aacute; &#193; A capitale, accent aigu
À &Agrave; &#192; A capitale, accent grave
 &Acirc; &#194; A capitale, accent circonflexe
à &Atilde; &#195; A capitale, tilde
Å &Aring; &#197; A capitale
Ä &Auml; &#196; A capitale, tréma
Æ &AElig; &#198; Æ capitale
Ç &Ccedil; &#199; C capitale, cédille
É &Eacute; &#201; E capitale, accent aigu
È &Egrave; &#200; E capitale, accent grave
Ê &Ecirc; &#202; E capitale, accent circonflexe
Ë &Euml; &#203; E capitale, tréma
Í &Iacute; &#205; I capitale, accent aigu
Ì &Igrave; &#204; I capitale, accent grave
Î &Icirc; &#206; I capitale, accent circonflexe
Ï &Iuml; &#207; I capitale, tréma
Ñ &Ntilde; &#209; N capitale, tilde
Ó &Oacute; &#211; O capitale, accent aigu
Ò &Ograve; &#210; O capitale, accent grave
Ô &Ocirc; &#212; O capitale, accent circonflexe
Õ &Otilde; &#213; O capitale, tilde
Ö &Ouml; &#214; O capitale, tréma
Ø &Oslash; &#216; O capitale, barré
Ú &Uacute; &#218; U capitale, accent aigu
Ù &Ugrave; &#217; U capitale, accent grave
Û &Ucirc; &#219; U capitale, accent circonflexe
Ü &Uuml; &#220; U capitale, tréma
Ý &Yacute; &#218; Y capitale, accent aigu
á &aacute; &#225; a minuscule, accent aigu
à &agrave; &#224; a minuscule, accent grave
â &acirc; &#226; a minuscule, accent circonflexe
ã &atilde; &#227; a minuscule, tilde
å &aring; &#229; a minuscule, rond
ä &auml; &#228; a minuscule, tréma
æ &aelig; &#230; æ minuscule
ç &ccdil; &#231; c minuscule, cédille
é &eacute; &#233; e minuscule, accent aigu
è &egrave; &#232; e minuscule, accent grave
ê &ecirc; &#234; e minuscule, accent circonflexe
ë &euml; &#235; e minuscule, tréma
í &iacute; &#237; i minuscule, accent aigu
ì &igrave; &#236; i minuscule, accent grave
î &icirc; &#238; i minuscule, accent circonflexe
ï &iuml; &#239; i minuscule, tréma
ñ &ntilde; &#241; n minuscule, tilde

 

 

 

 

Caractères accentués, Symboles :
Caractère Syntaxe Syntaxe (ASCII) Description
ó &oacute; &#243; o minuscule, accent aigu
ò &ograve; &#242; o minuscule, accent grave
ô &ocirc; &#244; o minuscule, accent circonflexe
õ &otilde; &#245; o minuscule, tilde
ö &ouml; &#246; o minuscule, tréma
ø &oslash; &#248; o minuscule, barré
ú &uacute; &#250; u minuscule, accent aigu
ù &ugrave; &#249; u minuscule, accent grave
û &ucirc; &#251; u minuscule, accent circonflexe
ü &uuml; &#252; u minuscule, tréma
ý &yacute; &#253; y minuscule, accent aigu
ÿ &yuml; &#255; y minuscule, tréma

 

Vous pouvez voir l’aperçu dans votre Navigateur ou Browser, en cliquant ici. (Exemple 4)

Fin de cette première leçon, la prochaine sera consacrée à la Structure du document HTML.

 

À propos de Daniel ROBERT

Docteur en électronique
Ce contenu a été publié dans INFORMATIQUE UNIQUEMENT HTML POUR DÉBUTANTS. Vous pouvez le mettre en favoris avec ce permalien.

Laisser un commentaire

This site uses Akismet to reduce spam. Learn how your comment data is processed.