Médiaforma

All posts tagged html

Les listes numérotées sont une variante des listes à puces. Pour les mettre en œuvre, il suffit de remplacer la balise <ul></ul> par une balise <ol></ol>.

Pour suivre cette formation, vous avez besoin :
<ol>
<li>d’un ordinateur ;</li>
<li>d’une connexion Internet ;</li>
<li>d’un navigateur Web ;</li>
<li>de une à deux minutes par jour.</li>
</ol>

Voici le résultat dans Internet Explorer :

Tout comme pour les listes à puces, il est possible d’utiliser un attribut type dans la balise <ol> pour modifier le type de la liste numérotée :

  • A affiche une numérotation en lettres capitales ;
  • a affiche une numérotation en lettres minuscules ;
  • I affiche une numérotation en chiffres romains ;
  • i affiche une numérotation en chiffres romains minuscules.

Pour mettre en évidence ces quatre numérotations alternatives, nous effectuons quatre copies du code compris entre les lignes 10 et 16, puis nous ajoutons un attribut type dans la balise <ol> de chaque bloc dupliqué.

Voici le résultat dans Internet Explorer :


Rien de tel qu’une liste à puces pour afficher une énumération.

En HTML, vous devez utiliser deux balises pour créer une liste à puces :

  • <ul> et </ul> pour délimiter le début et la fin de la liste ;
  • <li> et </li> pour délimiter chacune des lignes de la liste.

Ici par exemple, la liste contient quatre éléments facilement repérables par les balises <li> et </li>. Les éléments de la liste ont été décalés vers la droite pour rendre le code plus facile à comprendre.

Ce décalage n’a aucune incidence sur le rendu dans le navigateur : les éléments de la liste sont automatiquement indentés dans le navigateur, qu’ils le soient ou non dans le code.

Pour suivre cette formation, vous avez besoin :
<ul>
<li>d’un ordinateur ;</li>
<li>d’une connexion Internet ;</li>
<li>d’un navigateur Web ;</li>
<li>de une à deux minutes par jour.</li>
</ul>

Après avoir sauvegardé le document, nous l’affichons dans Internet Explorer. Voici le résultat :

Par défaut, les éléments d’une liste à puces sont précédés d’un point épais. En utilisant l’attribut type dans la balise <ul>, vous pouvez choisir deux autres types de puces :

  • type=”square” affiche un carré plein ;
  • type=”circle” affiche un rond vide.

Pour mettre en évidence les trois types de listes à puces, nous effectuons deux copies du code compris entre les lignes 10 et 16. Puis nous insérons un attribut dans le premier bloc dupliqué et un attribut type=”circle” dans le deuxième.

Après avoir sauvegardé ce code, nous l’affichons dans Internet Explorer. Voici le résultat :


Il est parfois nécessaire de mettre des éléments textuels en indice ou en exposant. Les balises <sub></sub> et <sup></sup> sont là pour cela.

Entourez le texte à mettre en indice par les balises <sub> et </sub> et le texte à mettre en exposant par les balises <sup> et </sup>. Voici un exemple de fonction que les lycéens doivent bien connaître :

F<sub>(x)</sub> = a x <sup>2</sup> + b x + c

Pour que le texte (x) apparaisse en indice, il est placé entre les balises <sub> et </sub>.

De même, pour que le chiffre 2 apparaisse en exposant, il est placé entre les balises <sup> et </sup>.

Après sauvegarde, ce document est affiché dans Internet Explorer. Voici le résultat :


Pour définir une couleur, il est également possible de préciser ses composantes rouge, verte et bleue. Chacune de ces composantes est comprise entre 0 et 255. Plus le nombre est élevé, plus la quantité de rouge, vert ou bleu est importante. Par convention, ces trois valeurs sont codées en hexadécimal. Elles sont donc comprises entre #00 (l’équivalent du nombre décimal 0) et #FF (l’équivalent du nombre décimal 255). En accolant les trois composantes, on obtient un nombre compris entre #000000 et #FFFFFF. La valeur #000000 correspond à la couleur noire (pas de rouge, pas de vert, pas de bleu). La valeur #FFFFFF correspond à la couleur blanche (rouge, vert et bleu à 100%).

Pour trouver facilement la couleur de vos rêves, le plus simple consiste à utiliser un nuancier. Par exemple, celui proposé sur la page http://www.code-couleur.com/. Déplacez le curseur vertical pour choisir une couleur dominante puis le sélecteur pour ajuster les quantités de blanc et de noir. Vous obtenez immédiatement la couleur hexadécimale correspondante :

Il ne vous reste plus qu’à insérer ce code dans l’attribut color d’une balise <font> :

<font color=”#CB87CD” size=”6″>Ce texte a pour couleur #CB87CD</font>

Voici le résultat :


Il existe un grand nombre d’autres noms de couleurs utilisables en HTML. Pour faciliter leur identification, je les ai regroupées sur la page https://www.mediaforma.com/couleurs-html-etendues/.

Pour utiliser une de ces couleurs, il suffit de préciser son nom dans l’attribut color d’une balise <font>. Par exemple :

<font color=”DodgerBlue” size=”6″>Ce texte a pour couleur DodgerBlue</font>

Voici le résultat :


La couleur des caractères est définie en insérant un attribut color dans la balise font. Voici la syntaxe à utiliser :

<font color=”couleur”>texte concerné</font>

couleur représente la couleur à utiliser.

La couleur peut être spécifiée par son nom ou par un code hexadécimal. Les seize couleurs de base sont les suivantes : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.

Pour bien visualiser ces couleurs, nous allons les affecter tour à tour à seize lignes de texte :

Le document est sauvegardé avec le raccourci clavier Ctrl+S et affiché dans Internet Explorer avec le raccourci clavier Alt+Ctrl+Maj+I. Voici le résultat :


Dans une rubrique précédente, vous avez appris à utiliser des styles de titre <h1> à <h6>. Ces styles permettent d’afficher des textes en gras et de taille différente de la police utilisée par défaut. Dans cette rubrique, je vais vous montrer comment utiliser la balise <font> pour choisir la taille des caractères. La syntaxe à utiliser est la suivante :

<font size="taille">texte concerné</font>

Où taille est un entier compris entre 1 et 7. La taille des caractères par défaut (c’est-à-dire lorsque l’attribut size n’est pas spécifié) est égale à 3.

Pour bien visualiser les différentes tailles possibles, nous allons définir sept lignes de texte et leur affecter les tailles 1 à 7 :

Voici le résultat :