– Mise en page –

 

Je le répète encore une fois, le langage HTML est très spécifique!

Les retours à la ligne, les tabulations, et la succession de plusieurs espaces ne sont pas pris en compte par les navigateurs. C’est-à-dire que si vous faites 10 fois espaces dans votre code, alors le navigateur comptera un espace. De la même manière, si vous sautez 10 lignes, dans le navigateur ça ne changera rien.

Donc techniquement, pas besoin d’indenter son code. Bon quand même, pour une meilleure lisibilité du code, pensez à bien le faire!

Une meilleure lisibilité permet une meilleure mise à jour de votre travail

Un exemple:

<HTML><HEAD><TITLE>Titre</TITLE></HEAD><BODY>Texte</BODY></HTML>

Bien crade comme code, mais juste…

<HTML>
        <HEAD>
                <TITLE>Titre</TITLE>
        </HEAD>
        <BODY>
                Texte
        </BODY>
</HTML>

Tout aussi juste, mais propre!

– Balises de mise en page –

 

<div> …</div>: division du texte sur votre page, comme un bloc

<nav>…</nav>: barre de navigation

<center> … </center>: centrer votre contenu

<p…> … </p>: paragraphe

<p> seul marque une fin de paragraphe et donc un retour à la ligne avec alinéa

<br> ou <br />: saut de ligne

<hr …>: trace une ligne horizontale sur la page

 

– Le paragraphe BODY –

Ce paragraphe contient ce qui sera effectivement affiché dans votre navigateur. Il regroupe les balises de définition des textes, images, liens, formulaires… formant le corps du  document. Chaque bloc contenu dans la balise BODY peut accepter un ensemble de paramètres. La balise BODY elle-même accepte plusieurs paramètres définissant les attributs de présentation de toute la page.

Il faut imaginer une page internet comme une poupée russe. On empile les éléments les uns dans les autres, et chaque élément aura la priorité sur son élément père.

Par exemple: un élément body peut avoir une couleur de fond bleue. Si je mets dans body une balise div ayant un fond rouge, alors tout ce qui est compris dans ce div aura un fond rouge. Si dans ce div je mets un autre div ayant une couleur pourpre, alors ce qui est compris dans cette div aura une couleur de fond pourpre.

Dans l’exemple ci-contre, on a une balise body qui correspond à notre page.

Celle-ci contient plusieurs éléments que nous détaillerons plus tard:

  • un titre avec la balise H1
  • un lien avec la balise A
  • une ligne vide avec la balise BR
  • une image avec la balise IMG

– Mise en forme des caractères –

 

Le texte peut être mis en forme de deux façons, soit en rajoutant des balises spécifiques, soit en utilisant une balise générale texte et en lui attribuant des paramètres.

Voici la liste des principales balises utilisées pour mettre en forme du texte:

  • <BIG>gros</BIG>
  • <SMALL>petit</SMALL>
  • <B>gras</B>
  • <I>italique</I>
  • <U>Souligné</U>
  • <SUP>mise en exposant</SUP>
  • <SUB>mis en indice</SUB>
  • <PRE>texte pré formaté</PRE>
  • titre de niveau 1 (<h1>…</h1>)

  • titre de niveau 2 (<h2>…</h2>)

  • titre de niveau 3 (<h3>…</h3>)

  • titre de niveau 4 (<h4>…</h4>)

  • titre de niveau 5 (<h5>…</h5>)
  • titre de niveau 6 (<h6>…</h6>)

Chaque balise peut accueillir des paramètres, et être mixés. Par exemple ce texte sera écrit en HTML ainsi:

<b><i><u>ce texte</u></i></b>

 

Il est possible de rajouter plusieurs paramètres à l’intérieur d’une seule et même balise, la balise FONT, et de lui assigner des paramètres.

Exemple, le texte précédent sera écrit:  ce texte

<font style= »font-weight:bold;text-decoration:underline;font-style: italic; »>ce texte</font>