TP 2 : BALISES DE TEXTE
Objectifs
Utiliser les balises mises en forme texte, de liste pour enrichir une
page web
Introduction
La première é tape pour remplir un site consiste à y ajouter du texte.
Nous allons voir qu'écrire du texte est très simple, mais il faut séparer les
différents types de texte.
En effet, nous allons voir successivement dans cette leçon ou ce TP :
Comment rédiger des paragraphes
La façon dont fonctionnent les titres
Comment donner de l'importance à certains mots de son texte
1) Les paragraphes
Les paragraphes sont insérés dans un document html à l’aide des balises
<p> </p> on peut insérer autant de paragraphes que l’on souhaite
dans un même document html.
2) Balise pour un saut de ligne
Dans la rédaction d’un texte, il peut arriver que l’on souhaite passer à
la ligne ceci se réalise à l’aide de la balise <br>. il est souhaitable de
placer cette balise entre les paragraphes
3) Les balises de titre
On distingue au total 6 niveaux de titre et elles sont toutes différentes par
leur taille les titres sont reconnus par les balise suivantes
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
4) Mettre le texte en valeur
Si, à l'intérieur de vos paragraphes, il y a plusieurs mots que vous aimeriez
mettre en valeur, html dispose de deux balises l’une met le texte en
italique c’est la balise <em> </em> et l’autre met votre texte en gras
c’est la balise <strong> </strong>.
Ces deux balises s’itulisent de la même manière il suffit d’entourer le ou
les mots à mettre en valeur par ces balises.
5) Mettre le texte en indice ou en exposant
Pour mettre en exposant certains mots ou caractères, on utilise la balise
<sup>. Les mots seront alors affichés en hauteur.
Pour mettre en indice (c'est-à-dire pour écrire le texte en bas de la ligne
en petit), on utilise cette fois la balise <sub>.
Exemple
<html >
<head>
<title> Un peu d'histoire...</title>
</head>
<body>
<h1>Un peu d'histoire...</h1>
<p>
<em> Le saviez-vous ? </em> <br />
Le langage XHTML est le langage qui nous permet de créer des
sites web en ce début de XXI <sup> ème </sup> siècle. <br />
Avant, vers la fin du XX <sup> ème </sup>, on utilisait le langage
HTML, qui disparaît aujourd'hui peu à peu au profit de XHTML
</p>
<p>
X <sub> n </sub> = x <sub> n – 1 </sub> - 2 x <sub> n-2 </sub>
</p>
</body>
</html>
6) Les balises de listes
Il existe trois types de liste : les listes numérotées, les listes non
numérotées et les listes descriptives ou liste de définition.
Pour la liste à puces non numérotée on utilise la balise <ul> </ul>,
Vous devez mettre un <li> </li> par élément de la liste. Exemple :
<ul>
<li> voiture </li>
<li> avion </li>
</ul>
Pour la liste à puces numérotée on utilise la balise <ol> </ol> Vous
devez mettre un <li> </li> par élément de la liste. Exemple :
ol>
<li> voiture</li>
<li> avion</li>
</ol>
Pour la liste de définitions, on utilise la balise <dl>. Vous devez alterner
chaque terme <dt> par sa définition <dd>. Exemple :
<dl>
<dt>Informatique</dt>
<dd>science du traitement automatique et rationnel de l’information à
l’aide d’un ordinateur</dd>
<dt>zoologie</dt>
<dd>science qui étudie les animaux</dd>
</dl>
Exercice TP
Ouvrir son éditeur de texte Notepad++ et saisir le code suivant :
