Vous savez maintenant intégrer du texte
dans vos pages HTML en lui appliquant des graisses ou styles différents.
Par contre vous ne savez pas sauter de lignes :) et nous allons
remédier à cela !
Sauts de lignes :
Vous avez peut être remarqué que le fait d'appuyer sur "Entrée" pour
passer à la ligne dans votre bloc-notes n'avait aucun effet dans votre
page HTML...
C'est tout a fait normal... Pour l'ordinateur le saut de ligne dans le bloc notes
ne représente rien, je vous ai expliqué que seuls les ordres entre < et > sont
pris en compte... Les sauts de lignes dans votre bloc-notes ne vous permettront
donc que d'organiser et d'aérer votre code source.
Pour passer à la ligne il faut insérer une
balise <BR> (BREAK en anglais)... Si vous mettez à la
suite deux balises <BR> je vous laisse deviner ce qui
se passera ! Eh oui ! Vous passerez deux fois à la ligne
ce qui, en clair, revient à sauter une ligne, la
balise <BR> cumule ses effets (ainsi si vous mettez
20 fois <BR> vous sauterez 19 lignes) !
Mais il y a plus simple pour sauter une ligne : vous pouvez utiliser la balise <P> (Paragraphe).
Mais attention : si vous utilisez deux balises <P> l'une après l'autre
le résultat ne sera qu'un seul et unique saut de ligne, la balise <P> ne
cumule pas ses effets ! Je vous conseille donc de privilégier les
balises <BR> dans votre code...
Tiens des balises qui ne se ferment
pas ?
Si vous êtes attentifs (et vous l'êtes) vous avez peut être
constaté que les balises <BR> et <P> n'ont pas de fermeture...
Pour <BR> c'est vrai à 100% et jamais vous ne trouverez de </BR> !
Par contre pour <P> c'est plus complexe vous pouvez l'utilisez seul ou
avec une balise de fermeture </P> mais je vous en parlerais plus bas...
Pour le moment utilisez donc <BR> et <P> seul !
Passons à la pratique !
1. Reprenez votre fichier "cv.html" et cette fois faites un saut
de ligne avec la balise <P> après votre prénom et nom
de famille.
2. Faites également un passage à la ligne entre votre rue
et votre code postal...
3. Supprimez les balises "italique" et ne conservez que votre
prénom et nom en gras !
4. Enfin profitez en pour aérer un peu votre code source en sautant
des lignes (si ce n'était pas déjà fait).
Ci-dessous le code source et le résultat que vous devez obtenir :
<HTML>
<HEAD>
<TITLE>Mon C.V.</TITLE>
</HEAD>
<BODY>
<H2>C.V. Interactif</H2>
<B>Pierre Durand</B><P>
15, rue Manin,<BR>
75019 Paris.
</BODY>
</HTML>
Voici le résultat que vous devez obtenir à l'écran
:
Jouons maintenant un peu avec les alignements ! Pour cela la première
balise à connaitre est <CENTER> qui permettra de centrer par la
suite quasiment tout ce que vous voudrez (textes, images, tableau...).
Donc pour centrer un titre dans la page il vous suffira d'indiquer <CENTER>Votre
titre</CENTER> puis logiquement vous ferez un saut de ligne..... <P> !!!
On vous l'a dit y a 5 secondes :).
Une autre façon de régler les alignements (vraiment plus subtil)
est d'utiliser la balise <P> et sa petite soeur </P> ! Oui, nous
vous en parlions plus haut.
En effet, <P> désigne le début d'un paragraphe et </P> la
fin. Vous pouvez appliquer à ce paragraphe un alignement de votre choix
grâce à la commande "align".
Pour un alignement à gauche (l'alignement par défaut) vous ferez
donc <P ALIGN="LEFT">voici le texte de mon paragraphe</P>.
Pour un alignement à droite <P ALIGN="RIGHT">voici le
texte de mon paragraphe</P>.
Pour un alignement centré <P ALIGN="CENTER">voici le texte
de mon paragraphe</P>.
Ne refaites pas l'exemple suivant mais observez le bien :
<HTML>
<HEAD>
<TITLE>Test de la balise P align</TITLE>
</HEAD>
Comme ce cours n'est pas extrèmement compliqué je me permettrais
de rajouter une nouvelle notion. Une balise qui vous servira à séparer
les parties de votre C.V. par exemple : la balise <HR> (pour Horizontal
Rule en anglais).
Peu utilisée sur Internet cette balise peut tout de même rendre
de précieux service quand on en connait toutes les options...
La balise <HR> ne fait rien d'autre que créer une ligne à l'endroit
où vous la placer. Par défaut la ligne prend toute la largeur
de la page et possède une petite épaisseur...
Pour la rêgler plus finement il existe quelques codes :
Vous pouvez rêgler la taille de la barre en pourcentage par rapport à la
fenêtre ou en pixel (unité de mesure de l'écran).
Par exemple, si vous voulez une barre de séparation prenant 25% de la
fenêtre vous ferez <HR WIDTH=25%>. WIDTH signifiant largeur en
anglais !
Le résultat sera le suivant :
Alors que la balise <HR WIDTH=25> signifiera que vous souhaitez une barre
de 25 pixels !
Ce qui donnera ceci :
Vous pouvez également choisir son épaisseur en ajoutant à la
balise <HR SIZE="25"> par exemple.
Cela aura pour résultat ceci :
Voici une occasion de vous montrer que le "align" ne servira pas
que pour les paragraphes ! Puisque vous pouvez l'ajouter également à la
balise <HR> !
Nous allons le montrer en cumulant les options (on fait moins les malins !)
avec la balise : <HR SIZE="10" WIDTH=50% ALIGN=RIGHT> qui donne
ce résultat :
Une barre de hauteur 10 pixels, de largeur 50% et alignée à droite
!
Vous ne ferez rien sur votre cv.html avec la balise
P align... Par contre, vous allez :
1. Ajouter une balise <CENTER> sur le titre et une barre de 25% de largeur
en dessous...
Vous remarquerez que pour centrer le titre et la barre nous avons choisi de faire
une balise <CENTER> qui encadre le titre et la barre... Preuve que vous
pouvez fermer une balise quand vous voulez... Tant que vous ne la fermez pas
le navigateur applique l'ordre "centrer" !
A partir du prochain cours nous passerons à la
vitesse supérieur (intégration d'images, liens...)
il est donc indispensable que vous ayez assimilé les cours
précédents ! N'hésitez pas à vous faire
d'autres pages que cv.html... C'est en forgeant... etc...etc...
:)
<BR> : passer à la ligne (effet
cumulable : deux <BR> saute une ligne)
<P> : sauter une ligne (effet non cumulable)
<CENTER>texte</CENTER> : pour centre un
texte dans la page (très utile !)
<P ALIGN="LEFT ou RIGHT ou CENTER">texte à aligner</P> :
pour aligner votre texte
<HR SIZE="épaisseur en pixels" WIDTH="sa
largeur" ALIGN="son alignement"> : créé une
barre, peu utilisée mais utile parfois...
