HTML: Éléments, balises et attributs en HTML
Introduction
HTML est l’abréviation de HyperText Markup Language, soit en français « langage hypertexte de balisage ». Ce langage a été créé en 1991 et a pour fonction de structurer et de donner du sens à du contenu.
CSS signifie Cascading StyleSheets, soit « feuilles de style en cascade ». Il a été créé en 1996 et a pour rôle de mettre en forme du contenu en lui appliquant ce qu’on appelle des styles.
Il ne faut JAMAIS utiliser le HTML pour faire le travail du CSS :
HTML est utilisé pour baliser un contenu, c’est à dire pour le structurer et lui donner du sens. Le HTML sert, entre autres choses, à indiquer aux navigateurs quel texte doit être considéré comme un paragraphe, quel texte doit être considéré comme un titre, que tel contenu est une image ou une vidéo.
CSS est utilisé pour appliquer des styles à un contenu, c’est-à-dire à le mettre en forme. Ainsi, avec le CSS, on pourra changer la couleur ou la taille d’un texte, positionner tel contenu à tel endroit de notre page web ou ajouter des bordures ou des ombres autour d’un contenu
Les versions actuelles du HTML et du CSS sont HTML5 et CSS3. Il faut savoir que, contrairement aux idées reçues, ce sont encore des versions non finalisées. Cela signifie que ces versions sont toujours en développement et qu’elles sont toujours en théorie sujettes à changements et à bugs.
La version 5 d’HTML, tout comme la version 3 de CSS introduisent de nombreuses nouvelles fonctionnalités longtemps attendues par les développeurs et il serait donc dommage de s’en priver.
Parmi celles-ci, l’insertion simplifiée de vidéos et de contenus audio et de nouvelles balises améliorant la sémantique (on va y revenir, pas d’inquiétude !) pour mieux structurer nos pages en HTML ou encore la possibilité de créer des bordures arrondies en CSS.
Pour coder en HTML et en CSS, nous n’avons besoin que d’un éditeur de text :
➤ NotePad++, sous Windows;
➤ Komodo, pour Mac ou Linux;
➤ TextWrangler, pour Linux.
Les Éléments, balises et attributs en HTML
Il y a trois termes dont vous devez absolument comprendre le sens en HTML. Ce sont les termes élément, balise et attribut.
Les éléments, tout d’abord, vont nous servir à définir des objets dans notre page. Grâce aux éléments, nous allons pouvoir définir un paragraphe (élément p), des titres d’importances diverses (éléments h1, h2, h3, h4, h5 et h6) ou un lien (élément a).
Les éléments sont constitués de balises. Dans la majorité des cas, un élément est constitué d’une paire de balises : une balise ouvrante et une balise fermante.
Les balises reprennent le nom de l’élément et sont entourées de chevrons. La balise fermante possède en plus un slash qui précède le nom de l’élément.
Cependant, certains éléments ne sont constitués que d’une balise qu’on appelle alors balise orpheline. C’est par exemple le cas de l’élément br qui va nous servir à créer un retour à la ligne.
Notez que, dans le cas des balises orphelines, le slash se situe après le nom de l’élément. Notez également que ce slash n’est pas obligatoire et que certains développeurs l’omettent volontairement.
Je vous conseille cependant, pour des raisons de propreté de code et de compréhension, de mettre le slash dans un premier temps.
Les attributs, enfin, vont venir compléter les éléments en leur donnant des indications ou des instructions supplémentaires.
Par exemple, dans le cas d’un lien, on va se servir d’un attribut pour indiquer la cible du lien, c’est à dire vers quel site le lien doit mener.
Notez que les attributs se placent toujours à l’intérieur de la balise ouvrante d’un élément (ou de la balise orpheline le cas échéant).
Dans l’exemple ci-dessus, on discerne l’élément a composé :
➤ d’une balise ouvrante elle-même composée d’un attribut href ;
➤ d’une ancre textuelle ;
➤ d’une balise fermante.
L’attribut href (initiales de « Hypertexte Reference ») sert à indiquer la cible de notre lien, en l’occurrence le site Wikipédia.
L’ancre textuelle correspond au texte entre les balises. Ce sera le texte sur lequel vos visiteurs devront cliquer pour se rendre sur Wikipédia et également l’unique partie visible pour eux.
Voici ce que les visiteurs de votre site verront :
Si vous vous sentez un peu perdu pour le moment, ne vous inquiétez pas, c’est tout-à-fait normal ! Continuez le cours, vous allez voir : avec un peu de pratique, tout cela va très vite se décanter et vous aurez tout compris avant même de vous en rendre compte !
إرسال تعليق