TP n°4 en HTML et CSS :
Télécharger TP
Ajoutez à cette page HTML une Mise en forme (CSS) convenable :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Rappel HTML
Sommaire
Nous allons nous entraîner sur cette page pour apprendre à
changer l'affichage de certains éléments :
Un texte
Un tableau
Des liens
Le sélecteur de classe
Un texte
Un petit texte que l'on va tenter d'aérer un peu à l'aide des feuilles
de style. Il serait bon en effet que les différents paragraphes d'une
page ne soient pas collés contre les différentes bordures de la
fenêtre de votre navigateur et soient de plus un peu
décalés par rapport aux titres.
C'est ce que nous essaierons de faire à l'exercice 5.
Un tableau
Un tableau qui recense une liste de livre en mentionnant titre,
auteur, éditeur et année de parution :
<table>
<tbody><tr>
<td> La vie mode d'emploi</td>
<td> Georges Perec</td>
<td> Le Livre de Poche</td>
<td> 2002 (1978)</td>
</tr><tr>
<td> Le palace</td>
<td> Claude Simon</td>
<td> Les Éditions de Minuit</td>
<td> 2000 (1962)</td>
</tr><tr>
<td>La splendeur du Portugal</td>
<td> Antonio Lobo Antunes</td>
<td> Points Seuil</td>
<td> 2000 (1998)</td>
</tr>
</tbody></table>
Des liens
Nous allons jouer ici sur l'aspect que l'on peut donner aux
liens. Commençons par pointer quelques pages utiles pour l'édition des pages web : celle de
<a href="http://www.w3.org/">w3c</a>,
l'organisme de référence pour les différentes normes html et
<a href="http://www.w3schools.com/default.asp">w3c school</a>
qui contient quelques tutoriaux qui pourront vous être utiles et
surtout des listes de balises avec leurs attributs.
Le sélecteur de classe
Ici, nous allons apprendre à affecter un style à plusieurs balises
en même temps grace à l'attribut <tt>class</tt>. Ceci est en
particulier utile lorsque l'on veut attribuer des affichages
différents à une même balise. Par exemple, lorque l'exercice 8 aura
été fait, ce paragraphe restera semblable au paragraphe de la partie
<b>"Un texte"</b> alors que le paragraphe suivant sera écrit en rouge.
Ce paragraphe est encadré par les balises <tt><p></tt> et
<tt></p></tt>
comme le précédent mais on va y rajouter l'attribut
<tt>class="special"</tt>. Tant que les feuilles de
styles ne seront pas éditées, il n'y aura aucune différence, après
l'exercice 11, il y en aura une.
</body></html>
<html>
<head>
</head>
<body>
Rappel HTML
Sommaire
Nous allons nous entraîner sur cette page pour apprendre à
changer l'affichage de certains éléments :
Un texte
Un tableau
Des liens
Le sélecteur de classe
Un texte
Un petit texte que l'on va tenter d'aérer un peu à l'aide des feuilles
de style. Il serait bon en effet que les différents paragraphes d'une
page ne soient pas collés contre les différentes bordures de la
fenêtre de votre navigateur et soient de plus un peu
décalés par rapport aux titres.
C'est ce que nous essaierons de faire à l'exercice 5.
Un tableau
Un tableau qui recense une liste de livre en mentionnant titre,
auteur, éditeur et année de parution :
<table>
<tbody><tr>
<td> La vie mode d'emploi</td>
<td> Georges Perec</td>
<td> Le Livre de Poche</td>
<td> 2002 (1978)</td>
</tr><tr>
<td> Le palace</td>
<td> Claude Simon</td>
<td> Les Éditions de Minuit</td>
<td> 2000 (1962)</td>
</tr><tr>
<td>La splendeur du Portugal</td>
<td> Antonio Lobo Antunes</td>
<td> Points Seuil</td>
<td> 2000 (1998)</td>
</tr>
</tbody></table>
Des liens
Nous allons jouer ici sur l'aspect que l'on peut donner aux
liens. Commençons par pointer quelques pages utiles pour l'édition des pages web : celle de
<a href="http://www.w3.org/">w3c</a>,
l'organisme de référence pour les différentes normes html et
<a href="http://www.w3schools.com/default.asp">w3c school</a>
qui contient quelques tutoriaux qui pourront vous être utiles et
surtout des listes de balises avec leurs attributs.
Le sélecteur de classe
Ici, nous allons apprendre à affecter un style à plusieurs balises
en même temps grace à l'attribut <tt>class</tt>. Ceci est en
particulier utile lorsque l'on veut attribuer des affichages
différents à une même balise. Par exemple, lorque l'exercice 8 aura
été fait, ce paragraphe restera semblable au paragraphe de la partie
<b>"Un texte"</b> alors que le paragraphe suivant sera écrit en rouge.
Ce paragraphe est encadré par les balises <tt><p></tt> et
<tt></p></tt>
comme le précédent mais on va y rajouter l'attribut
<tt>class="special"</tt>. Tant que les feuilles de
styles ne seront pas éditées, il n'y aura aucune différence, après
l'exercice 11, il y en aura une.
</body></html>
Télécharger TP
0 commentaires
Enregistrer un commentaire