Les balises de corps de page, entre les balises body
Les balises de corps de page, entre <body> et </body>
Tout ce qui se trouve entre les balises <body> et </body> est destiné à être montré à l'internaute. C'est la partie « visible » de la page.
Il existe 2 grandes familles de balises : les block et les inline. Après une balise de type block, le texte qui suit est automatiquement renvoyé à la ligne, tandis qu’après une balise inline, le texte qui suit est ajouté normalement à la suite de la ligne. Le type des balises présentées dans ce cours est précisé entre parenthèses, dans le titre du paragraphe.
Créer des titres : balises <h1> à <h6> (type block)
Pour intégrer un titre à vos pages, utilisez les balises <h1> à <h6>. Plus le chiffre après le « h » est grand, plus le titre sera écrit petit :
<h1>Grand titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Sous-titre de niveau 3</h3>
<h4>Sous-titre de niveau 4</h4>
<h5>Sous-titre de niveau 5</h5>
<h6>Sous-titre de niveau 6</h6>
Bilan : pour le titre principal de la page, utilisez <h1>. Ensuite, vous pouvez allez jusqu'à <h3>, voire <h4>...
Mais souvenez vous qu'une page internet n'est pas une thèse... L'internaute qui visite votre site veut trouver les informations rapidement et facilement.
Délimiter des paragraphes : balise <p> (type block)
Pour délimiter un paragraphe, utilisez la balise de type block <p>.
<p>Texte du paragraphe...</p>
Essayons maintenant de définir 2 paragraphes successivement (le premier paragraphe doit absolument être fermé par la balise </p> avant de commencer le second) :
<p>Voici le texte d'un paragraphe.</p><p>La balise de retour ligne va imposer une coupure dans le paragraphe, mais sans provoquer de saut de ligne.</p>
A l'écran, on obtient :
Voici le texte d'un paragraphe.
La balise de retour ligne va imposer une coupure dans le paragraphe, mais sans provoquer de saut de ligne.
On constate que, même si dans le code source les 2 paragraphes sont écrits sur le même ligne, bout à bout, on obtient un saut de ligne à l'écran.
Ceci est dû au fait que la balise <p> est une balise de type « block ». La fermeture de ce type de balises ajoute implicitement un saut de ligne à l'écran.
Mise en évidence d'un ou plusieurs mots dans le texte
A l’intérieur d’un paragraphe ou d'un titre, de nombreuses balises de type « inline » permettent de modifier l’allure d'un bout de texte. Voici les plus courantes.
Retour à la ligne : balise <br />
Placée dans un paragraphe, la balise <br /> permet d'imposer un retour à la ligne, sans saut de ligne :
<p>Voici le texte d'un paragraphe.<br />La balise de retour ligne va imposer un coupure dans le paragraphe, mais sans provoquer de saut de ligne.</p>
Résultat à l'écran :
Voici le texte d'un paragraphe.
La balise de retour ligne va imposer un coupure dans le paragraphe, mais sans provoquer de saut de ligne.
Le résultat est à comparer au résultat que l'on avait obtenu en définissant 2 paragraphes. Ici, il n'y a pas de saut de ligne, mais simplement un retour à la ligne.
Souligner du texte, le mettre en gras ou en italique
A l'intérieur d'un paragraphe ou d'un titre, il est possible d'appliquer une mise en gras ou en italique à un mot ou une expression :
<p>Ce <b>texte</b> apparaît en gras.<br />
Ce <i>texte</i> apparaît en italique.<br />
Ce <u>texte</u> sera souligné.</p>
A l'écran, on obtient :
Ce texte apparaît en gras.
Ce texte apparaît en italique.
Ce texte sera souligné.
La lettre utilisée pour chacune des balises vient de l'anglais « bold » pour gras, « italic » pour italique et « underline » pour le soulignement.
Il est possible de cumuler ces mises en forme en imbriquant les balises. Une seule règle à retenir : les balises doivent être refermées dans l'ordre inverse de leur ouverture. Par exemple :
<p><b><i><u>Cette expression est notée en gras, italique et souligné.</u></i> Maintenant, il ne reste que la mise en gras qui s'applique à la fin de la phrase.</b> Le reste du paragraphe s'affiche normalement.</p>
Résultat obtenu :
Cette expression est notée en gras, italique et souligné. Maintenant, il ne reste que la mise en gras qui s'applique à la fin de la phrase. Le reste du paragraphe s'affiche normalement.
Autres balises, moins courantes
|
Mise en oeuvre |
Description |
|---|---|
|
<em>texte</em> |
texte mis en valeur (en gras) |
|
<strong>texte</strong> |
autre type de mise en valeur |
|
<sub>texte</sub> |
indice |
|
<sup>texte</sup> |
exposant |
|
<acronym title= ”Union Européenne ”>UE</acronym> |
l’explication apparaît au survol de la souris |
|
<del>texte</del> |
texte barré |
Que sont le XHTML et le CSS ?Structure d'une page HTMLLes balises d?entête, head, title, meta...Les balises de corps de page, entre les balises bodyAjouter une image dans la page : balise img (type inline ou block) Insérer des liens : balise a (type inline)Afficher une listeConstruire des tableaux - balise tableCréer des formulaires Les balises universelles : div et spanOù placer le code CSS ?Comment modifier une balise en particulier ?Modifier l'aspect du texteGestion de l'arrière-plan (coloré ou avec des images)Mise en forme du texte : word-spacing , letter-spacing, vertical-align, text-alignMise en forme des balises de type blockLes borduresMise en forme des listesPositionner des blocs HTML à l'écranDébordement d'un bloc HTML : overflowChanger l'aspect de la souris : cursorCas pratique : mise en page à 2 ou 3 colonnesLargeur de site fixe ou variable ?Insertion d'une animation flashInsertion d'une vidéoInsérer un fichier audio
Pour plus d'informations, vous pouvez nous contacter par mail.
Tutos et cours en ligne
