Prog Web & MM Maroua BAKRI
Langage HTML
Correction du TD N°1 :
Texte, Titres, Commentaires, Listes & Images
Exercice 1 :
<html>
<head>
<title> Ma Premiere Page Web </title>
</head>
<body>
<!-- Utilité de la balise PRE -->
<PRE>
Phrase 1 Phrase 1 Phrase 1 Phrase 1,
Phrase 2 Phrase 2,
Phrase 3 Phrase 3 Phrase 3 Phrase 3 Phrase 3 Phrase 3.
</PRE>
</body>
</html>
Exercice 2 :
<html>
<head>
<title> Ma Premiere Page Web </title>
</head>
<body>
<!-- Utilité de la balise PRE -->
<PRE>
Phrase 1 Phrase 1 Phrase 1 Phrase 1,
Phrase 2 Phrase 2,
Phrase 3 Phrase 3 Phrase 3 Phrase 3 Phrase 3 Phrase 3.
</PRE>
< !-- Suite : exercice 2 -->
<p>Paragraphe 1 aligné à gauche. Première phrase du premier paragraphe.<br/>Deuxième
phrase du premier paragraphe.</p>
<p align=right>Paragraphe 2 aligné à droite. Première phrase du deuxième
paragraphe.<br/>Deuxième phrase du deuxième paragraphe.</p>
<p align=center>paragraphe 3 centré. Première phrase du troisième paragraphe.<br/>Deuxième
phrase du troisième paragraphe.</p>
1
Prog Web & MM Maroua BAKRI
<p align=justify>Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4
justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.
Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié. Paragraphe 4 justifié.</p>
</body>
</html>
Exercice 3 :
<html>
<head>
<title> Jules Ducommun </title>
</head>
<body>
<h1 align=center> Jules Ducommun </h1>
<hr size=6 width=95% align=center />
<h2>Mes coordonnées</h2>
<font size=4 face=candara>Jules Ducommun <br/>SI-DGR<br/>EPFL<br/>CH - 1015
Lausanne</font>
<hr size=4 width=65% align=center />
<h2>Mon Curriculum Vitae </h2>
<font size=4 face=candara>J’ai fréquenté l’école primaire de <font color=blue>Xxxxx</font>,
puis le collège de <font color=blue>Yyyyy </font>où j’ai obtenu mon diplôme d’études
secondaires en <b><i>198x</i></b>. <br/>J’ai suivi ensuite …</font>
<hr size=4 width=65% align=center />
<h2>Mes hobbies </h2>
À remplir…
<hr size=4 width=95% align=center />
<i>Jules Ducommun / révision 2.5.99</i>
</body>
</html>
Exercice 4 :
<ul type=disc>Liste à puces
<li>adresse
<li>Tél
<li>Fax
<li>E-mail
</ul>
2
Prog Web & MM Maroua BAKRI
<ul style= ’’list-style-image :URL([Link])’’>Liste dont les puces …
<li>blabla
<li>blabla
</ul>
<ol type=1>Combinaison de listes…
<li>École primaire
<ul type=disc>
<li>1ère
<li>2ème
</ul>
<li> École secondaire
<ul type=circle>
<li>1ère
<li>2ème
</ul>
<li>Gymnase
<ul type=square>
<li>1ère
</ul>
<li>Université
<ul type=square>
<li>1ère
</ul>
</ol>
<DL>Liste descriptive
<DT><b>1990</b>
<DD>Certificat
<DT><b>1993</b>
<DD>Maturité
</DL>
Exercice 5 :
<html>
<head>
<title> Ma Premiere Page Web </title>
</head>
<body background=[Link]>
<img src=[Link] width=30% height=40%/>
</body>
</html>