Introduction aux langages HTML et CSS – Jeux de caractères, symboles et
métadonnées TP/TD 3 : Jeux de caractères et symboles [email protected]
Introduction aux langages HTML et CSS 1
TRAVAUX PRATIQUES / DIRIGES N° 3
Excercice 1 : (Entités)
<!DOCTYPE>
<html>
<head>
</head>
<body>
<p style="font-size: 18px;font-weight: bold;margin-bottom: 10px;">List
des universités du Senegal</p>
<p>Certains caractéres sont reservés en Htlm. Il n'est pas possible
d'utiliser le sign inférieur
(<) ou supérieur (<) dans votre text, parce que le
navigateur les prendra pour des balises.
</p>
<p>Pour afficher réellement les caracteres reservés, nous devons
utiliser les entités de
caractéres dans le code source Html.
</p>
<p>Syntaxe d'une entité: &entity_name ou &#entity_number</p>
<p>Exemple pour afficher le sign inférieur (<), il faut écrire:
&lt ou &#60</p>
</body>
</html>
3. Exercice 2 : (Jeux de caractères et symboles)
2.
<!DOCTYPE>
<html>
<head>
</head>
<body>
<table>
<tr style="background-color: gray;">
<th>Pays/Regions</th>
<th>Devise</th>
<th>Symbole</th>
</tr>
<tr>
<td>Zone franc CFA</td>
<td>CFA</td>
<td>XOF</td>
</tr>
<tr style="background-color: rgb(225, 233, 235);">
<td>Royaume-Uni</td>
<td>Livre sterling</td>
<td>£ (livre)</td>
</tr>
<tr>
<td>Japon </td>
<td>Yen japonais</td>
<td>¥</td>
</tr>
<tr style="background-color: rgb(225, 233, 235);">
<td>Chine </td>
<td>Yuan chinois (renminbi)</td>
<td>¥</td>
</tr>
<tr>
<td>Zone euro </td>
<td>Euro</td>
<td>€ (Euro),, ¢ (centime d’euro)</td>
</tr>
<tr style="background-color: rgb(225, 233, 235);">
<td>États-Unis </td>
<td>Dollar</td>
<td>$</td>
</tr>
</table>
</body>
</html>
Exercice 3 : (Jeux de caractères et formules)
<!DOCTYPE>
<html>
<head>
</head>
<body>
<ol type="1">
<li>
<p>x = (-b+√(b²-4*a*c)) / (2*a)</p>
</li>
<li>
<p>a²+2ab+b² = (a+b)²</p>
</li>
<li>
<p>S1+...+Sn = ∑Si</p>
</li>
</ol>
</body>
</html>
5 ; Exercice 4 : (Les balises décrivant une métadonnée) On considère le code HTML ci-
dessous.
1.Les balises decrivant une métadonnée :
<meta charset= « UTF-8»>
3. 3. Modifier le code pour permettre à la page de pouvoir s’adapter aux dimensions de l’écran du
périphérique.
<!DOCTYPE>
<html>
<head>
</head>
<body style="width: 300px;height: 300px;">
<p>Titre du paragraphe</p>
<pre>
Université Cheikh Anta Diop de Dakar.
Université Gaston Berger de Saint-Louis.
Université de Matam.
</pre>
</body>
</html>
4. Exercice 5 : (Encodage d’URL)
1. http://www.uvs.sn/index.php?q=kébémer
<!DOCTYPE>
<html>
<head>
</head>
<body>
<p>
<a
href="http://www.uvs.sn/index.php?q=kébémer">http://www.uvs.sn/index.php?q=kéb
émer</a>
</p>
<p>
<a href="http://www.uvs.sn/fichier
12.html">http://www.uvs.sn/fichier 12.html</a>
</p>
</body>
</html>
