Table des matières

Les balises HTML

Les balises HTML

Dans le chapitre précédent, nous avons vu la balise  qui permet de créer un paragraphe. Il existe beaucoup d'autres balises HTML.

Dans ce chapitre, vous trouverez les balises les plus courantes dans une page HTML.

Pour découvrir d'autres balises, je vous recommande le site suivant : htmlreference

Comment créer un titre (h1 à h6) ?

En HTML, il existe six niveaux de titres différents.

Les balises <h1> à <h6> sont utilisées pour mettre en valeur les titres présents dans le document html. Ces balises véhiculent une notion hiérarchique sur les titres, h1 étant la notion la plus forte et h6 la plus faible.

A faire vous-même 1

Nom du fichier : index2-1.html

Reprendre le fichier index.html puis modifier le code entre les balises <body> et </body> :

<body>
    <h1>Un titre très important</h1>
    <p>Ceci est un paragraphe</p>
    <br/>    <!-- insertion d'un saut de ligne -->
    <h2>Un titre moins important</h2>
    <p>Un deuxième paragraphe</p>	
</body>

Enregistrer le fichier avec le nom index2-1.html. Observez les différences entre les balises h1 et h2.

A partir de maintenant tous les fichiers HTML seront enregistrés avec la convention suivante :

Le nom du fichier à utiliser est indiqué en haut à droite du cadre “A faire vous même”.

Comment créer une liste non ordonnée (ul et li) ?

Les listes permettent de mieux structurer le texte et d’ordonner les informations.

La balise <ul> est utilisée pour définir une liste non ordonnée, c'est à dire une liste d'éléments non numérotés précédés par une puce.

Chaque élément de la liste doit être déclaré à la suite de la balise <li>.

ul est l'abréviation de “unordered list”, c'est-à-dire “liste non ordonnée” en français.
li signifie “list item”, ou “élément de liste”.

A faire vous-même 2

Nom du fichier : index2-2.html

Reprendre le fichier index.html puis modifier le code entre les balises <body> et </body> :

<body>
        <h1>Liste de fleurs</h1>
 
        <ul>
            <li>Rose</li>
            <li>Iris</li>
            <li>Tulipe</li>
        </ul> 
 
</body>

Enregistrer le fichier avec le nom index2-2.html puis tester.

Comment créer une liste ordonnée (ol et li) ?

Une liste ordonnée fonctionne de la même façon, il faut remplacer <ul></ul> par <ol></ol>

A faire vous-même 3	Nom du fichier : index2-3.html
Reprendre le fichier index2-2.html puis remplacer <ul></ul> par <ol></ol>. Enregistrer le fichier avec le nom index2-3.html puis tester.

Comment créer un lien vers un autre site ?

Pour faire un lien, la balise à utiliser est : <a> (pour ancre ou anchor en anglais). Il faut lui ajouter un attribut, href (hypertext reference), pour indiquer vers quelle page le lien doit conduire.

A faire vous-même 4

Nom du fichier : index2-4.html

Reprendre le fichier index.html puis modifier le code entre les balises <body> et </body> :

<body>
    <p>Pour faire une recherche sur Google <a href="http://google.fr">cliquez ici</a>. <br/> Bonne recherche ! </p> 
</body>

Enregistrer le fichier avec le nom index2-4.html puis tester.

Pour ouvrir le lien dans une nouvelle fenêtre, il faut ajouter target = « _blank » à la balise <a> :

A faire vous-même 5

Nom du fichier : index2-5.html

Reprendre le fichier index2-4.html puis ajouter target = « _blank » à la balise <a> et tester.

<body>
    <p>Pour faire une recherche sur Google <a href="http://google.fr" target="_blank">cliquez ici</a>. <br/> Bonne recherche ! </p> 
</body>

Enregistrer le fichier avec le nom index2-5.html puis tester.

Comment créer un lien vers un autre site ?

Nous allons créer deux pages HTML avec un lien pour passer de l'une à l'autre.

Les fichiers HTML des deux pages seront enregistrées dans le même dossier.
Pour créer le lien, il suffit d’écrire comme cible du lien le nom du fichier vers lequel on veut aller.

Par exemple : <a> href= « page 2.html »>. On dit que c’est un lien relatif.

A faire vous-même 6

Nom du fichier : index2-6.html

Reprendre le fichier index.html puis modifier le code entre les balises <body> et </body> :

<body>
    <h1>Je suis sur la page 1.</h1>
    <p>Un lien pour aller sur la  <a href="index2-7.html">page 2</a>. </p>
</body>

Enregistrer le fichier avec le nom index2-6.html. Attention ne pas tester, le fichier index2-7.html, n'existe pas encore. Passer à l'étape suivante.

A faire vous-même 7

Nom du fichier : index2-7.html

Reprendre le fichier index.html puis modifier le code entre les balises <body> et </body> :

<body>
    <h1>Je suis sur la page 2.</h1>
    <p>Un lien pour aller sur la  <a href="index2-6.html">page 1</a>. </p>
</body>

Enregistrer le fichier avec le nom index2-7.html. Double cliquer sur index2-6.html.

Très important :

Si la page 2 est située dans un sous-dossier, le lien doit être rédigé comme ceci :

<a href="nom-du-sous-dossier/index2-7.html">page 2</a>

Si la page 2 est située dans un dossier parent, le lien doit être rédigé comme ceci :

<a href="../index2-7.html">page 2</a>

Comment insérer une image ?

Pour insérer une image, il faut utiliser la balise <img />. C’est une balise orpheline, il n'est pas nécessaire de délimiter le début et la fin de l'image.

La balise doit être accompagnée de deux attributs obligatoires :

scr (source) : il permet d'indiquer où se trouve l’image que l’on veut insérer.

Exemples :
src = «fleur.jpg » si l’image est dans le même dossier que la page ;
src = «images/fleur.jpg » si l’image est dans un sous dossier « images ».

Alt : cela signifie « texte alternatif ». On doit toujours indiquer un texte alternatif à l’image. Ce texte sera affiché à la place de l’image si celle-ci ne peut pas être téléchargée.

Exemple : alt = « une fleur ».

A faire vous-même 8

Nom du fichier : index2-8.html

Télécharger l'image “lotus.jpg” (clique droit sur l'image puis “Enregistrer l'image sous…”).

Mettre cette image dans votre dossier “images”.
Tester le code suivant :

<body>
   <p>  Voici une fleur de lotus : <br />
        <img src="images/lotus.jpg" alt="Fleur de lotus">
   </p>
</body>

Enregistrer le fichier avec le nom index2-8.html puis tester.

Comment ajouter une infobulle à une image ?

L’attribut permettant d’afficher une bulle d’aide est title. Cet attribut est facultatif.

A faire vous-même 9

Nom du fichier : index2-8.html

Après avoir copié l'image “lotus.jpg” du dossier partagé de la classe sur le réseau vers votre dossier “images”, tester le code suivant :

<body>
   <p>  Voici une fleur de lotus : <br />
        <img src="images/lotus.jpg" alt="Fleur de lotus" title="C'est une très belle fleur !">
   </p>
</body>

Enregistrer en conservant le même nom puis tester.

Comment rendre une image cliquable ?

Pour qu’une image renvoie vers une page, il suffit de l’entourer par une balise <a>.

A faire vous-même 10

Nom du fichier : index2-9.html

Reprendre le fichier index2-8.html puis modifier le code :

<body>
    <p>Clique sur l’image pour aller à la page 2 : <br />
        <a href="index2-7.html"><img src="lotus.jpg" alt="Fleur de lotus" title="C'est une très belle fleur !"></a>
    </p>
</body>

Comment mettre en forme le texte ?

La mise en forme du texte se fait principalement en CSS mais il existe quelques balises HTML pour le faire.

  mise en italique du texte ;
  mise en gras du texte ;
  mise en exposant du texte ;

  mise en indice du texte ;
  mise en valeur du texte (généralement mis en gras) ;
  souligne le texte.

A faire vous-même 11	Nom du fichier : index2-10.html
Afficher dans votre navigateur la phrase suivante en respectant la mise en forme : Cu²⁺est la formule chimique d'un ion, C₂H₅OH est la formule chimique d'une molécule.