Conception & Réalisation de sites Web

Quelques balises pour débuter

Balises élémentaires de mise en page

Notez que la syntaxe présentées ici est la syntaxe XHTML.

Balise Indication donnée au navigateur
<p> Début d'un paragraphe.
</p> Fin d'un paragraphe.
<br /> Ajout d'un saut de ligne. Un saut de ligne ne peut avoir de contenu, on considère donc que cette balise est à la fois ouvrante et fermante. Cela se traduit par l'ajout d'un «/» (slash) la fin de la balise.
<hr /> Ajout d'une ligne horizontale de séparation comme suit :
Cette balise ne peut avoir de contenu, on considère donc que cette balise est à la fois ouvrante et fermante. Cela se traduit par l'ajout d'un «/» (slash) la fin de la balise.

Style du texte

Balise Indication donnée au navigateur
<strong> Début d'un texte en gras. La balise <b> donne le même résultat mais elle a été dépréciée, c'est à dire que son utilisation est déconseillée.
</strong> Fin d'un texte en gras.
<em> Début d'un texte en italique. La balise <i> donne le même résultat mais elle a été dépréciée, c'est à dire que son utilisation est déconseillée.
</em> Fin d'un texte en italique.
<u> Début d'un texte souligné.
</u> Fin d'un texte souligné.

Exemple, si vous saisissez ceci dans votre editeur de texte :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Titre de la page</title>
   </head>
   <body>
      <p>Essai de mise en forme HTML avec des paragraphes.</p>
      <p>Je peux mettre des <strong>mots en gras</strong> ou <u>les souligner</u> ou les mettre <em>en italique</em>.
      Je peux imbriquer des balises pour mettre des mots à la fois <strong><em>en gras et en italique</em></strong>.</p>
      <p>
      Je peux sauter des lignes dans un paragraphe comme ici :
         <br />- 1ere ligne
         <br />- 2e ligne
      </p>
      <p>
      Si je n'utilise pas de la balise "br", les sauts de ligne que je mets dans l'editeur de texte ne seront pas visibles dans le navigateur. Exemple :
         - 1ere ligne
         - 2e ligne
      </p>
      
   </body>
</html>

... vous aurez le résultat suivant dans votre navigateur Web :

Essai de mise en forme HTML avec des paragraphes.

Je peux mettre des mots en gras ou les souligner ou les mettre en italique. Je peux imbriquer des balises pour mettre des mots à la fois en gras et en italique.

Je peux sauter des lignes dans un paragraphe comme ici :
- 1ere ligne
- 2e ligne

Si je n'utilise pas de la balise "br", les sauts de ligne que je mets dans l'editeur de texte ne seront pas visibles dans le navigateur. Exemple : - 1ere ligne - 2e ligne

Plus de possibiliés avec les attributs

Des indications complémentaires sur les balises

Un attribut permet de donner des précisions sur un balise.

Si les balises ou tags disent au navigateur quelle action effectuer, les attributs lui disent comment l'effectuer.

Une balise peut avoir un ou plusieurs attributs.

Un attribut se compose le plus souvent d'un mot-clé auquel on donne une valeur. Pour cela on utilise le caractère « = » et on met la valeur entre 2 guillemets (« " »).

Exemple :

<ma_balise nom_de_l_attribut="valeur_de_l_attribut"> contenu </ma_balise>

Un exemple concret avec <hr />

La balise hr (qui trace une ligne horizontale de séparation) a plusieurs attributs. Avec l'attribut size, on peut préciser la taille de la ligne.

Exemple :

<hr size="8" />

Ce qui donne dans le navigateur, un gros trait magnifique :


Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!