Médiaforma

All posts tagged html

Voici le squelette standard d’un document HTML5 dans lequel on utilise du code jQuery. C’est à partir de ce squelette que tous les exemples de cette formation seront construits. Ce squelette est à utiliser en phase de développement :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre du document</title>
    <link rel="stylesheet" type="text/css" href="feuille-de-styles.css">
  </head>
  <body>
    <!-- Une ou plusieurs balises HTML pour définir le contenu du document -->
    <script src="jquery.js"></script>
    <script src="mon-script.js"></script>
  </body>
</html>

Quelques remarques :

  • La balise <link> fait référence au fichier feuille-de-styles.css qui sera utilisé pour définir le style du document.
  • La première balise <script> fait référence à la bibliothèque jQuery.
  • La deuxième balise <script> fait référence au fichier mon-script.js. C’est dans ce fichier que vous placerez tout le code jQuery à utiliser. Vous pouvez également l’inclure directement dans le squelette HTML, entre les balises <script> et </script>.

Une fois le code entièrement débogué, vous utiliserez un squelette un peu différent, dans lequel, la référence à la bibliothèque jQuery se fait via un CDN et non localement :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre du document</title>
    <link rel="stylesheet" type="text/css" href="feuille-de-styles.css">
  </head>
  <body>
    <!-- Une ou plusieurs balises HTML pour définir le contenu du document -->
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="mon-script.js"></script>
  </body>
</html>

Cette rubrique va vous montrer comment modifier le pointeur de la souris dans un document. L’utilisateur choisit un pointeur en sélectionnant un bouton radio. Le pointeur change immédiatement de forme jusqu’à ce qu’il sélectionne un autre bouton radio.

Voici le code utilisé :

Le code HTML définit dix-huit boutons radio. Chacun d’entre eux a pour nom pointeur, mais les valeurs qui sont affectées à leur attribut value sont différentes. Lorsque l’utilisateur choisit un bouton radio en cliquant dessus, la fonction JavaScript change() est exécutée, en lui transmettant l’élément this.form.pointeur, c’est-à-dire l’ensemble des boutons radio.

Examinons le code JavaScript.

Lorsqu’un bouton radio est choisi, la fonction change() s’exécute. Les boutons radio this.form.pointeur qui lui sont transmis seront manipulés sous le nom radio dans la fonction.

Une boucle for passe en revue chacun des boutons radio. Le parcours se fait du premier bouton radio au dernier en utilisant les valeurs 0 et radio.length :

for (var i=0; i<radio.length;i++)

Si un des boutons radio est sélectionné :

if (radio[i].checked)

Sa valeur est stockée dans la variable p :

var p = radio[i].value;

Une fois la boucle terminée, la forme du pointeur est mise à jour en lui appliquant la valeur stockée dans la variable p :

document.body.style.cursor = p;


Dans la rubrique précédente, vous avez vu que les caractères “<” et “>” ne pouvaient pas être directement affichés en HTML et qu’il fallait les remplacer par des entités. Il existe deux types d’entités en HTML : alphabétiques et numériques. &lt; et &gt; sont des entités alphabétiques. Leurs équivalents numériques sont < et >.

Toutes les entités sont construites sur le même modèle. Voici les entités les plus fréquemment utilisées dans des pages Web :

Caractère Terme anglais correspondant Entité Entité numérique
non-breaking space &nbsp;  
< less than &lt; <
> greater than &gt; >
& ampersand &amp; &
¢ cent &cent; ¢
£ pound &pound; £
¥ yen &yen; ¥
euro &euro;
§ section &sect; §
© copyright &copy; ©
® registered trademark &reg; ®
trademark &trade;

Pour illustrer l’utilisation des entités, nous allons afficher ce tableau en HTML. Voici le résultat  :

entités HTMLEt voici le code utilisé :

entités HTMLComme vous pouvez le voir, le caractère “&” est systématiquement remplacé par l’entité alphabétique &amp; dans les troisième et quatrième colonnes. Au contraire, dans la première colonne, le signe & est conservé pour provoquer l’affichage des entités.


Il est peu fréquent d’attribuer plusieurs classes à un élément. C’est pourtant tout à fait possible, en séparant les noms des classes par un espace.

Lorsqu’un élément se voit affecter plusieurs classes, les propriétés de chacune des classes lui sont appliquées. Ici par exemple, nous avons défini quatre classes au nom évocateur :

  • rouge colore le texte en rouge ;
  • bleu colore le texte en bleu ;
  • gras affecte l’attribut gras au texte ;
  • italique affecte l’attribut italique au texte.

Deux classes sont affectées au premier paragraphe : rouge et gras.

Deux classes sont affectées au deuxième paragraphe : bleu et italique.

Enfin, trois classes sont affectées au troisième paragraphe : gras, rouge et italique.

Voici le résultat dans Internet Explorer. Comme vous pouvez le voir, chacun des paragraphes cumule les propriétés de toutes ses classes :


Pour alléger une page Web, il peut être utile de dissimuler certaines parties non essentielles tout en laissant le loisir aux internautes de révéler ces parties s’ils le souhaitent en cliquant sur un contrôle quelconque : un bouton ou un lien hypertexte par exemple. En mêlant quelques lignes de HTML, de CSS et de JavaScript, il est très simple de réaliser cet effet.

Le code HTML contient trois paragraphes délimités par les balises <p> et </p>. Le deuxième paragraphe est de classe cache et il est précédé d’un bouton d’identifiant bouton qui permettra de l’afficher ou de le dissimuler.

Le code CSS définit les caractéristiques de la balise d’identifiant cache. Par défaut, cette balise n’est pas affichée. Lorsqu’elle sera affichée, elle aura une bordure continue épaisse de 1 pixel et de couleur silver et une couleur d’arrière-plan jaune.

Lorsque le bouton est cliqué, la fonction JavaScript affiche() est exécutée. Examinons les instructions utilisées dans cette fonction. La première ligne s’intéresse au texte affiché dans le bouton. S’il est égal à “Montrer“, cela signifie que le paragraphe n’est pas affiché. Le texte du bouton se transforme en “Cacher” et la propriété display de la balise <p> est initialisée à block, ce qui a pour effet d’afficher le paragraphe.

Si le texte affiché dans le bouton n’est pas “Montrer“, cela signifie que le paragraphe est affiché. Dans ce cas, le texte du bouton se transforme en “Montrer” et la propriété display de la balise <p> est initialisée à none, ce qui a pour effet de dissimuler le paragraphe.

Voyons comment se comporte ce code dans un navigateur :


Si vous écrivez des pages Web de plus d’une centaine de lignes, il peut être intéressant d’insérer des commentaires dans le code afin de préciser la fonction de tel ou tel bloc d’instructions, la spécificité d’une instruction ou la légitimité de tel ou tel attribut.

Pour cela, vous utiliserez une balise un peu particulière, en la faisant commencer par <!—et finir par —>. Si nécessaire, cette balise peut occuper plusieurs lignes. Par exemple :

<!-- Une ou plusieurs
lignes de commentaires peuvent être insérées
n’importe où dans le code -->

Le code CSS peut également être commenté. Délimitez le commentaire par les caractères /* (au début) et */ (à la fin). Tout comme en HTML, le commentaire peut s’étirer sur plusieurs lignes. Par exemple :

/*Ce commentaire
occupe deux lignes */

Enfin, vous pouvez insérer des commentaires dans du code JavaScript. Si un commentaire tient sur une ligne, il suffit de le faire précéder par deux slash :

// Ceci est un commentaire sur une ligne

Si le commentaire occupe plusieurs lignes, délimitez-le par les caractères /* (au début) et */ (à la fin). Par exemple :

/*Ce commentaire JavaScript
occupe deux lignes */

Dans la rubrique précédente, vous avez appris à vous servir de la balise <pre> pour afficher du texte non proportionnel dans un document. J’ai précisé que cet artifice était souvent utilisé lorsqu’une page Web devait afficher du code informatique. Ceci est tout à fait exact, à une exception près : si la page doit afficher du code HTML, il sera interprété lors de l’affichage. Les balises ne seront donc pas affichées.

Examinez la ligne 7. Elle contient du code HTML, placé entre les balises <pre> (ligne 6) et </pre> (ligne 8).

Lorsque ce document est affiché dans le navigateur, les balises <u> et </u> sont interprétées et le texte est souligné :

Pour éviter ce problème, les signes “inférieur à” doivent être remplacés par &lt; et les signes “supérieur à” par &gt;.

Nous copions la ligne 7 dans le presse-papiers et nous l’insérons à la suite. Puis nous effectuons les remplacements.

Les balises de la ligne 8 ne sont plus interprétées.