HTML - Balises obsolètes
Bonjour, futurs développeurs web ! Aujourd'hui, nous allons plonger dans un aspect fascinant du HTML : les balises et attributs obsolètes. En tant que votre enseignant de quartier bienveillant en informatique, je suis excité de vous guider dans cette aventure. Alors, prenez une tasse de café (ou votre boisson favorite), et explorons le monde des éléments HTML qui sont tombés en désuétude.
Qu'est-ce que les balises obsolètes ?
Avant de rentrer dans les détails, comprenons ce que signifie "obsolète" dans le contexte du HTML. Pensez-y comme la manière dont le web dit : "Merci pour tes services, mais il est temps de prendre ta retraite." Les balises obsolètes sont des éléments HTML qui étaient autrefois couramment utilisés mais qui sont maintenant déconseillés ou plus supportés dans les nouvelles versions du HTML.
Pourquoi cela arrive-t-il, demandez-vous ? Eh bien, à mesure que le web évolue, nous trouvons de meilleures et plus efficaces façons de structurer et de styler notre contenu. C'est comme passer d'un téléphone à clapet à un smartphone - l'ancien fonctionne toujours, mais le nouveau fait tellement plus !
Balises obsolètes du HTML
Jetons un coup d'œil à quelques-unes des balises les plus courantes. Je vous montrerais des exemples de leur utilisation et ce que nous utilisons à la place maintenant.
La balise <center>
autrefois, si vous vouliez centrer votre texte, vous utiliseriez la balise <center>. Cela ressemblait à quelque chose comme ça :
<center>Ce texte est centré</center>Mais aujourd'hui, nous obtenons le même résultat avec CSS :
<p style="text-align: center;">Ce texte est centré</p>Ou encore mieux, dans un fichier CSS séparé :
.center-text {
text-align: center;
}<p class="center-text">Ce texte est centré</p>La balise <font>
Souvenez-vous du temps où nous changeions les styles de police directement dans le HTML ? La balise <font> était notre solution habituelle :
<font face="Arial" color="bleu" size="3">Ce texte est en bleu et en Arial</font>Maintenant, nous utilisons le CSS pour tous nos besoins de style :
<p style="font-family: Arial; color: blue; font-size: 16px;">Ce texte est en bleu et en Arial</p>Les balises <big> et <small>
Ces balises étaient utilisées pour changer la taille du texte :
<big>Ce texte est plus grand</big>
<small>Ce texte est plus petit</small>Dans le HTML moderne et le CSS :
<span style="font-size: 1.2em;">Ce texte est plus grand</span>
<span style="font-size: 0.8em;">Ce texte est plus petit</span>Attributs obsolètes du HTML
Ce ne sont pas seulement les balises qui deviennent obsolètes ; les attributs aussi ! Jetons un coup d'œil à quelques exemples.
L'attribut align
Nous alignions autrefois les images comme ceci :
<img src="chat.jpg" align="droite" alt="Un chat mignon">Maintenant, nous utilisons le CSS :
<img src="chat.jpg" style="float: right;" alt="Un chat mignon">L'attribut bgcolor
Souvenez-vous de la mise en place des couleurs d'arrière-plan comme ceci ?
<body bgcolor="lightblue">
Bienvenue sur mon site web !
</body>Aujourd'hui, tout est question de CSS :
<body style="background-color: lightblue;">
Bienvenue sur mon site web !
</body>Pourquoi devrions-nous éviter les balises et attributs obsolètes ?
- Compatibilité avec les navigateurs : Les navigateurs plus récents peuvent ne pas supporter ces vieilles balises et attributs.
- Séparation des préoccupations : Il est préférable de maintenir une séparation entre la structure (HTML) et le style (CSS).
- Accessibilité : De nombreux éléments obsolètes ne sont pas conviviaux pour les lecteurs d'écran.
- Maintenabilité : Utiliser les normes actuelles rend votre code plus facile à mettre à jour et à entretenir.
Un voyage dans le temps : une page web HTML obsolète
Faisons un voyage nostalgique et créons une page web utilisant des balises et attributs obsolètes. Ensuite, nous verrons comment la moderniser.
L'ancienne méthode
<html>
<head>
<title>Mon super site des années 90</title>
</head>
<body bgcolor="cyan">
<center>
<font face="Comic Sans MS" size="6" color="purple">
Bienvenue sur mon incroyable site web !
</font>
</center>
<hr width="50%" color="rouge">
<p><b>Voici mes choses favorites :</b></p>
<ul>
<li><font color="vert">Jouer aux jeux vidéo</font></li>
<li><font color="bleu">Manger de la pizza</font></li>
<li><font color="rouge">Regarder des films</font></li>
</ul>
<p align="droite"><i>Gracias por la visita !</i></p>
</body>
</html>La méthode moderne
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon super site moderne</title>
<style>
body {
background-color: cyan;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
color: purple;
}
hr {
width: 50%;
background-color: red;
height: 2px;
border: none;
}
.green { color: green; }
.blue { color: blue; }
.red { color: red; }
.right-align { text-align: right; }
</style>
</head>
<body>
<h1>Bienvenue sur mon incroyable site web !</h1>
<hr>
<p><strong>Voici mes choses favorites :</strong></p>
<ul>
<li class="green">Jouer aux jeux vidéo</li>
<li class="blue">Manger de la pizza</li>
<li class="red">Regarder des films</li>
</ul>
<p class="right-align"><em>Gracias por la visita !</em></p>
</body>
</html>Conclusion
Et voilà, les amis ! Nous avons voyagé à travers le temps, du Far West du HTML à la web élégante et moderne que nous connaissons aujourd'hui. Souvenez-vous, bien que ce soit amusant de regarder ces vieilles balises et attributs, il est crucial de rester à jour avec les normes actuelles.
En conclusion, voici un tableau pratique résumant les balises et attributs obsolètes que nous avons discutés :
| Balise/Attribut obsolète | Alternative moderne |
|---|---|
<center> |
text-align: center; (CSS) |
<font> |
Propriétés CSS (font-family, color, font-size) |
<big>, <small>
|
font-size (CSS) |
Attribut align
|
Positionnement CSS (text-align, float) |
Attribut bgcolor
|
background-color (CSS) |
Souvenez-vous, apprendre le HTML est comme apprendre une nouvelle langue. Cela prend du temps, de la pratique et de la patience. N'ayez pas peur d'expérimenter et de faire des erreurs - c'est ainsi que nous apprenons tous ! Continuez à coder, continuez à créer, et surtout, amusez-vous avec ça !
Credits: Image by storyset