Info
Nous allons à présent voir comment introduire du texte dans notre page HTML et observer comment il réagit.Voici du texte.Faites un copier-coller du texte ci-joint entre
<BODY> et
</BODY>.
Cliquez sur le bouton "VOIR" du générateur.Vous venez de faire votre première page XHTML.
Cependant, la norme XHTML 1 veut que le texte contenu dans la balise BODY soit contenu dans une balise de type block ou inline (p, div, span, table, a, ...).Mais par exemple les balises B, I n'en font pas parties.
Je commence à intégrer cette notion dans le glossaire.
Réduisez et augmentez la fenêtre, et observer le texte.Le
texte se reformate suivant la taille de la fenêtre, c'est un élément à retenir lors de la conception de votre page.
Pour ne plus avoir ce problème, il faut insérer votre texte dans un tableau ou spécifier une taille à votre balise via les css:
Exemple de code :
<div style="width:400px">Le texte</div>
ou
<table width="140">
<tr>
<td>Le texte</td>
</tr>
</table> Les paragraphes
Nous allons maintenant structurer le texte en créant des paragraphes.Voici du texte.Le paragraphe se détermine grâce à la balise
<P> </P>.
Mettez après la balise
<BODY> la balise
<p>, copiez/collez le texte ci-joint et mettez à la fin du texte
</p>.
Recommencez la manoeuvre à la suite.
Cliquez sur le bouton "VOIR" du générateur.Vous avez maintenant deux paragraphes.
La balise <P
> génère un saut de ligne qui peut varier suivant le navigateur, c'est son inconvénient.
Il est tout à fait
possible de justifier le texte d'un paragraphe grâce à la feuille de style
text-align
( pour plus d'information voir le glossaire ).
Exemple de code :
<p style="text-align:right">Le text</p> Allez à la ligne
Pour éviter les sauts de ligne, la balise <BR
/> qui ne possède pas de balise de fin, est très utilisée.
Effacez le texte.
Copier-coller le texte et mettez à la fin <br /> et coller le texte une seconde fois.
Cliquez sur le bouton VOIR du générateur.
Vous pouvez très bien insérer entre <P> et </P> une balise <BR />.
Info
Maintenant que vous savez créer des paragraphes, il nous reste à leur donner un titre.
C'est la balise <H
n> </Hn> qui le permet. Le "n" est un chiffre comprit entre 1 et 6 qui détermine la taille du titre. 1 est la plus grosse taille.
Exercice
Première étape :Ouvrez le générateur de code HTML (Voir menu à droite de la page).
Seconde étape :Tapez :
Exemple de code :
<H1> votre titre </H1>Copiez, collez du texte à la suite.
Voici du texte.Puis à la suite recommencez la manipulation en remplaçant
<H1> par
<H6>.
Vous observez que
<Hn> génère un saut de ligne important. Vous pouvez diminuer cet espace grâce au feuille de style :
-
margin
,
padding
.
Filet horizontal
Je parle dans ce chapitre du filet horizontal (<HR
/>), car il est très pratique pour séparer de chapitre, cela donne plus de clarté au document HTML.
Il est très utilisé aussi pour marquer la fin du document. Dans ce cas, on trouve en général des informations sur le copyright.
Exercice
Première étape :Ouvrez le générateur de code HTML (Voir menu en haut de la page).
Seconde étape :Copiez, collez du texte et taper <hr />.
Voici du texte. Info
Sachez que l'on peut définir la longueur, l'alignement de la balise <HR
>.
Pour plus d'information sur les attributs de la balise <HR /> consultez le Glossaire HTML.
Info
Vous pouvez lui donner toutes les couleurs que vous désirez.
Pour cela, il faut introduire la feuille de style
COLOR dans la balise
<BODY>.
Ce qui nous donne pour une couleur de texte blanc
<BODY style="color:#FFFFFF"> ou
<BODY style="color:White">.
La balise A n'hérite pas de la couleur.Je mets à votre disposition les couleurs dites web qui sont des couleurs reconnues par Netscape et Explorer (
couleur).
Lisez bien la page des couleurs et testez ensuite.
Exercice
Ce petit exercice va vous familiariser avec les feuilles de style.
Je désire un fond bleu et une couleur de texte rouge. Nous allons donc écrire :
- pour le font bleu <BODY style="background-color:#0000FF">
- pour le texte rouge nous allons rajouter la feuille de style COLOR. Ce qui nous donne <BODY style="background-color:#0000FF;color#FF0000">.
Chaque propriétés de feuilles de style sont séparées par un ";"
Ouvrez le générateur et écrivez ce qui vous passe par la tête et visualisez.