Référence sur les polices HTML
Bonjour, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le merveilleux monde des polices HTML. En tant que votre enseignant de informatique bienveillant, je suis excité de vous guider dans cette aventure. Souvenez-vous, choisir la bonne police, c'est comme choisir le bon habillement pour une occasion spéciale, cela peut faire paraître votre page web incroyablement belle !
Syntaxe
Commençons par les bases. En HTML, nous utilisons la balise <font> pour spécifier la police, la taille et la couleur du texte. Cependant, il est important de noter que cette balise est obsolète en HTML5, ce qui signifie qu'elle n'est plus recommandée pour une utilisation. Mais ne vous inquiétez pas ! Nous allons apprendre cela pour des raisons historiques, puis explorer des alternatives modernes.
La syntaxe de base ressemble à ceci :
<font face="font_family" size="size" color="color">Texte ici</font>Balise HTML font
Maintenant, analysons les attributs de la balise <font> :
-
face: Cela spécifie la famille de la police. -
size: Cela définit la taille de la police. Elle peut varier de 1 (la plus petite) à 7 (la plus grande). -
color: Cela détermine la couleur du texte.
Voici un exemple :
<font face="Arial" size="5" color="blue">Bienvenue sur mon site web !</font>Cela affichera "Bienvenue sur mon site web !" en police Arial, taille 5 et couleur bleue.
Polices web sécurisées
Les polices web sécurisées sont des polices couramment disponibles sur différents systèmes d'exploitation. Utiliser ces polices garantit que votre texte apparaît comme prévu pour la plupart des utilisateurs. Voici un tableau de certaines polices web sécurisées populaires :
| Nom de la police | Exemple |
|---|---|
| Arial | Le renard brun saute par-dessus le chien paresseux |
| Verdana | Le renard brun saute par-dessus le chien paresseux |
| Helvetica | Le renard brun saute par-dessus le chien paresseux |
| Times New Roman | Le renard brun saute par-dessus le chien paresseux |
| Courier | Le renard brun saute par-dessus le chien paresseux |
Exemple de polices HTML
Mettons nos connaissances en pratique avec un exemple amusant :
<html>
<head>
<title Mes fruits préférés</title>
</head>
<body>
<h1><font face="Arial" color="red">Mes fruits préférés</font></h1>
<p><font face="Verdana" size="4" color="green">Les pommes sont délicieuses !</font></p>
<p><font face="Courier" size="3" color="orange">Les oranges sont juteuses !</font></p>
<p><font face="Times New Roman" size="5" color="violet">Les raisins sont sucrés !</font></p>
</body>
</html>Dans cet exemple, nous avons créé une page sur mes fruits préférés. Chaque fruit est décrit en utilisant une police, une taille et une couleur différentes. Cela montre comment vous pouvez utiliser des polices pour créer une hiérarchie visuelle et un accent sur vos pages web.
Polices pour les systèmes Microsoft
Les systèmes Microsoft sont livrés avec une variété de polices préinstallées. Voici quelques-unes des plus populaires :
- Arial
- Calibri
- Cambria
- Georgia
- Tahoma
- Times New Roman
Polices pour les systèmes Macintosh
Les systèmes Macintosh ont également leur propre ensemble de polices par défaut :
- Helvetica
- Arial
- Times New Roman
- Courier
- Verdana
- Georgia
Polices pour les systèmes Unix
Les systèmes Unix, y compris les distributions Linux, incluent souvent ces polices :
- DejaVu Sans
- Liberation Sans
- FreeSans
- Nimbus Sans L
Maintenant, je sais ce que vous pensez : "Mais enseignant, vous avez dit que la balise <font> est obsolète. Que devrions-nous utiliser à la place ?" Excellent question ! Dans le développement web moderne, nous utilisons le CSS (Cascading Style Sheets) pour styliser notre texte. Voici un exemple rapide :
<html>
<head>
<title>Stylisation moderne des polices</title>
<style>
h1 {
font-family: Arial, sans-serif;
color: red;
}
.green-text {
font-family: Verdana, sans-serif;
font-size: 18px;
color: green;
}
.orange-text {
font-family: 'Courier New', monospace;
font-size: 16px;
color: orange;
}
.purple-text {
font-family: 'Times New Roman', serif;
font-size: 20px;
color: purple;
}
</style>
</head>
<body>
<h1>Mes fruits préférés</h1>
<p class="green-text">Les pommes sont délicieuses !</p>
<p class="orange-text">Les oranges sont juteuses !</p>
<p class="purple-text">Les raisins sont sucrés !</p>
</body>
</html>Cela donne le même résultat que notre exemple précédent, mais utilise des techniques CSS modernes plutôt que la balise <font> obsolète.
Souvenez-vous, choisir la bonne police, c'est comme choisir l'épice parfaite pour votre plat - cela peut faire ressortir votre page web ! Mais toujours penser à la lisibilité en premier. Une police fantaisiste peut sembler cool, mais si vos utilisateurs ne peuvent pas la lire, elle ne fait pas son travail.
En conclusion, je veux partager une petite histoire. Quand j'ai commencé le développement web, j'étais tellement excité par les polices que j'utilisais une police différente pour chaque paragraphe de ma page. Ça ressemblait à un coupon de rançon ! Apprenez de mon erreur - la cohérence est la clé.
Continuez à pratiquer, restez curieux, et bon codage !
Credits: Image by storyset