Les balises génériques (ou universelles) sont des balises qui n'ont pas une réelle signification, elles ne servent qu'à contenir quelque chose (du texte, une image, une vidéo, etc ...). Elles sont au nombre de 2 seulement: une balise dite de type block, <div> et une balise dite de type inline, <span> et leurs versions fermantes </div> et </span>.
Les balises de type block sont des contenants (des blocs) qui créent un retour à la ligne lors de leur insertion et qui peuvent contenir autant de lignes que l'on désire, une image, etc ... Les balises de type block créent des contenants qui se répandent sur toute la largeur de la page web. On peut définir, à l'aide du langage CSS (styles), leur taille (largeur, hauteur), leur position dans la page (à gauche, à droite), les marges autour du bloc, les marges à l'intérieur du bloc, la position du contenu (à gauche, à droite, en haut, en bas ), la couleur du fond, la taille et la couleur du texte contenu par le bloc, etc, etc ... Elles possèdent à ce titre un attribut style.
Les balises de type inline créent une forme de blocs particuliers qui ont pour limites la balise ouvrante et la balise fermante. Elles servent essentiellement à mettre en évidence un mot ou une portion de texte présents dans un contenant de type block. Elles ne créent pas de renvoi à la ligne. Elles permettent également de styliser le texte qu'elles encadrent grâce au langage CSS. Elles possèdent à ce titre un attribut style.
Attention: les balises de type inline peuvent être insérées à l'intérieur des blocs, par contre les balises de type block ne peuvent pas être insérés dans les balises inline.
L'une et l'autre (<div> et <span>) possèdent, outre l'attribut style, 2 autres attributs:
- un attribut id:
cet attribut, très utilisé dans les <div> et très peu dans les <span>, affecte un nom d'identification unique dans la page donné au bloc, par exemple: id="introduction" ou id="12". L'ID peut être utilisée:- pour styliser ce bloc d'une façon propre et particulière et aucun autre bloc dans la page,
- ou servir, à l'aide du langage javascript, à afficher ou masquer ce bloc, ou à y effectuer des transformations (changer la taille, la couleur du texte, changer l'image affichée par une autre, changer la couleur du fond, etc, etc ...)
- un attribut class:
cet attribut est le nom donné à une classe implémentée dans l'en-tête de la page ou dans une feuille de styles externe contenant un style prédéfini, par exemple class="texte_en_bleu" ou class="fond_vert", etc ...
Un premier exemple en tapant directement une phrase dans le corps de la page:
et le rendu de la page à l'écran:
Vous constatez que la phrase est placée en haut à gauche de la page, c'est la position par défaut. Vous avez dû remarquer dans le code situé dans l'en-tête de page, qu'entre les balises "style", j'ai inséré un élément "p" qui est une balise (que nous verrons plus loin) en lui affectant un style qui donnera au texte inséré entre les balises <p> et </p> une taille de 20 pixels, comme ci-dessous:
Je vais maintenant déplacer mon texte vers le bas et vers la droite, je vais réduire le bloc d'un quart et lui affecter un fond vert clair, mettre une partie du texte en rouge, encadrer "HTML" avec une bordure vert foncé, mettre "BONJOUR" en caractères gras et lui assigner la couleur bleue. (Ne cherchez pas à retenir le langage CSS nous verrons tout ça en temps voulu).
Bon,c'est d'un goût moyen, me direz-vous ! J'ai juste voulu vous montrer ce que le CSS apporte au HTML et l'importance des balises pour structurer à volonté un document.
Aucun commentaire :
Enregistrer un commentaire