TP 2 : Texte en HTML5
Problème : Créer en html5 un texte comme présenté ci-dessous :
Solution :
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> TP2 : organiser un texte </title>
</head>
<body>
<h1> HTML5 </h1>
<p> <strong>HTML5</strong> <mark>(HyperText Markup Language 5) </mark>est la dernière révision
majeure du HTML <br>(format de données conçu pour représenter les pages web).</p>
<p>Cette version a été finalisée le <em>28 octobre 2014.</em></p>
<h3> Évolution du langage : </h3>
<ol type="1">
<li> 1989-1992 : Origine </li>
<li> 1993 : HTML 1.0 </li>
<li> 1995-1996 : HTML 2.0 </li>
<li> 1997 : HTML 3.2. et 4.0 </li>
<li> 2000 : XHTML </li>
<li> De 2007 à nos jours : HTML 5 et abandon du XHTML 2 </li>
</ol>
<dl>
<dt> HTML </dt>
<dd> Hyper Text Markup Language </dd>
<dt> XHTML </dt>
<dd> Extensible Hyper Text Markup Language </dd>
Aymen Gharbi
</dl>
</body></html>
I) Balises de structuration du texte
Balise Résultat
<p> paragraphe 1 </p> paragraphe 1
<p> paragraphe 2 </p> paragraphe 1
<p> Ligne 1 <br /> Ligne 2 </p> Ligne 1
Ligne2
<strong> Mise en valeur forte </strong> Mise en valeur forte
<em> Mise en valeur normale </em> Mise en valeur normale
<mark>Mise en valeur visuelle </mark> Mise en valeur visuelle
<p> paragraphe 1 </p> paragraphe 1
<hr />
<p> paragraphe 2 </p> paragraphe 1
<h1> Titre niveau 1</h1>
Titre de niveau 1
<h2> Titre niveau 2</h2> Titre de niveau 2
<h3> Titre niveau 3 </h3> Titre de niveau 3
<h4> Titre niveau 4</h4> Titre de niveau 4
<h5> Titre niveau 5 </h5> Titre de niveau 5
<h6> Titre niveau 6 </h6> Titre de niveau 6
II) Balises de listes
1) Liste ordonnée
Balise Résultat
<ol>
<li>Liste n°1</li> 1. Liste n°1
<li>Liste n°2</li> 2. Liste n°2
<li>Liste n°3</li> 3. Liste n°3
</ol>
2) Liste non ordonnée
Balise Résultat
<ul>
<li>Liste n°1</li> • Liste n°1
<li>Liste n°2</li> • Liste n°2
<li>Liste n°3</li> • Liste n°3
</ul>
Aymen Gharbi
3) Une liste de description, avec des termes et des descriptions :
Balise Résultat
<dl>
<dt> HTML </dt>
<dd> Hyper Text Markup Language </dd>
<dt> XHTML </dt>
<dd> Extensible Hyper Text Markup </dd>
</dl>
Aymen Gharbi
Application : Créer en html5 un texte comme présenté ci-dessous :
¤ Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie « fort », ou «
important » si vous préférez. La balise <strong> ne signifie pas « mettre en gras » mais «
important ». On pourra décider plus tard, en CSS, d'afficher les mots « importants » d'une
autre façon que le gras si on le souhaite.
¤ Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>
¤ Par défaut, <mark> a pour effet de surligner une portion de texte. L'extrait n'est pas
forcément considéré comme important mais on veut qu'il se distingue bien du reste du texte
¤ La balise <dl> définit une liste de description. La balise <dl> est utilisée conjointement
avec <dt> (définit les termes/noms) et <dd> (décrit chaque terme/nom).
Aymen Gharbi
