Parties

  1. Table des matières
  2. Recapitulatif
    2. revision balise - h1
    3. revision balise - paragraphe
    4. revision balise - img
    5. revision balise - ul
    6. revision balise - li
    7. revision balise - table
    8. revision balise - tr
    9. revision balise - td
    10. revision balise - a
    11. revision balise - html
    12. revision balise - body
    13. revision balise - head
    14. revision balise - title
    15. revision attribut - href
    16. revision attribut - src
    17. revision proprietés - color
    18. revision proprietés - border
  3. Firebug
    2. activation de firebug
    3. presentation de firebug
    4. firebug - fichier simple
    5. inspect yoyodesign
    6. inspection firebug - h2
    7. inspection firebug - font-size
    8. inspection firebug - color
    9. inspection firebug - class
  4. CSS en pratique
    2. boites CSS
    3. correction : boites
    4. bouton css
    5. correction : bouton css
    6. tableaux
    7. correction: tableau
    8. tableau : css : bordure
    9. border-collapse
    10. mise en page
    11. correction -css-table
    12. table - entete
    13. correction - th
  5. CSS: images de fond
    2. arrière-plans
    3. boutons
    4. correction : boutons
    5. boite degradé - débit
    6. degradés
    7. Exemple 2
    8. correction

1. Table des matières

1.1 Table des matières

Bienvenue au TP-2.


Pour votre progression, c'est très important de finir le TP précédent avant de commencer celui-ci.

Cliquez sur "début du TP" pour commencer.

Il est vivement recommandé de faire ce TP en ayant le cours sous les yeux. Si vous n'avez pas la version papier, vous pouvez ouvrir la version PDF dans une autre fenêtre (ou onglet) de votre navigateur.

2. Recapitulatif

2.1 Recapitulatif

Dans les questions suivantes nous allons réviser certains éléments vu précédemment. Il est important que vous répondiez sans faute.

Dans une première série de questions nous vous demandons de donner les noms (et uniquement les noms) de certains élément html. Il faudra donc répondre "toto" et non pas "<toto>"

2.2 revision balise - h1

Un titre très important affiché dans la page

2.3 revision balise - paragraphe

Un paragraphe

2.4 revision balise - img

Une image

2.5 revision balise - ul

le bloc contenant une liste (liste non ordonnée)

2.6 revision balise - li

un élément d'une liste

2.7 revision balise - table

Un tableau

2.8 revision balise - tr

Une ligne dans un tableau

2.9 revision balise - td

Une case dans un tableau

2.10 revision balise - a

un lien vers une autre page

2.11 revision balise - html

Racine d'un document (tout en haut de l'arbre)

2.12 revision balise - body

Racine de l'information affichable d'un document

2.13 revision balise - head

Racine de l'entête contenant des informations non affichés (liens vers des feuilles de style, titre ...) d'un document.

2.14 revision balise - title

Le titre, généralement affiché dans la barre en haut de la fenêtre (mais pas dans l'affichage principal):
x

2.15 revision attribut - href

Dans un lien (hypertexte) vers une autre page web, quel est le nom (et uniquement le nom) de l'attribut permettant de spécifier la cible (url) du lien.

2.16 revision attribut - src

Dans une image, quel est le nom (et uniquement le nom) de l'attribut permettant de spécifier l'adresse (url) de l'image?

2.17 revision proprietés - color

feuilles de style (CSS)


Quel est le nom (juste le nom) de la propriété permettant de changer la couleur du texte comme ici ?

2.18 revision proprietés - border

Quel est le nom (juste le nom) de la propriété permettant d'encadrer un élément?

3. Firebug

3.1 Firebug

Dans les exercices suivants nous allons apprendre à utiliser une extension de firefox appelé firebug.
Celle-ci est très pratique pour le développement de pages web.

3.2 activation de firebug

L'extension firebug est dejà installé sur votre firefox. Mais, pour l'utiliser, vous devez l'activer. Cliquez sur le petit insecte gris ("bug") en bas à droite de votre navigateur.

z

3.3 presentation de firebug

Présentation de firebug

Pour découvrir et inspecter le contenu d'une page html, cliquez sur "inspecter" (1).
Lorsque vous déplacez la souris sur la page affichée (2), vous verrez apparaître les éléments html correspondants dans la fenêtre de gauche (3) et leur style dans la fenêtre de droite (4).

Vous pouvez sélectionner un élément html (3) en cliquant dessus, pour pouvoir ensuite regarder plus en détails ses caractéristiques. Quand un élément est sélectionné, vous pouvez voir tous ses styles associés.

Remarque: Un élément peut avoir plusieurs blocks de style associés, avec des sélecteurs différents. Par exemple, pour le paragraphe
<p id="para1"> gdsfg sdfg </p>
On pourrait avoir
p {color: red;}
mais on pourrait avoir (en même temps)
#para1 {background-color: green;}
(nous verrons ça avec plus de détails plus tard)

z

3.4 firebug - fichier simple

Firebug : fichier simple

  1. Créez un fichier appelé essai-firebug.html contenant le html suivant ci-dessous.
  2. Lisez attentivement. C'est un fichier html simple avec un peu de CSS simple. Vous devriez tout comprendre facilement.
  3. Affichez ce fichier dans votre navigateur.
  4. Activez firebug.
  5. A l'aide du bouton "inspecter" de firebug (flèche bleue + rectangle, à gauche) retrouvez les différentes parties du document html. Par exemple cliquez sur le bouton "inspecter" puis cliquez sur "Un titre". Vous devriez voir s'afficher le html correspondant.
  6. Cliquez sur le bouton "inspecter" puis cliquez sur "Un peu de texte". Vous devriez voir s'afficher le html correspondant dans (3), mais aussi, à droite (4) le CSS qui correspond au paragraphe jaune.
(Remarque: vous pouvez aussi utiliser le bouton droit->menu->inspecter un élément)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Un essai</title>
<style type="text/css">
.essai1
{
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<h1>Un titre</h1>
<p class="essai1">Un peu de texte.</p>
<p class="essai2">Un autre texte.</p>
</body>
</html>
z

3.5 inspect yoyodesign

Firebug : analyser une page web

Quand on fait du développement web on a besoin en permanence d'analyser des pages web existantes: soit des pages faites par d'autres, pour comprendre et s'inspirer de leurs techniques, soit ses propres pages, pour identifier et comprendre les problèmes d'affichage (débugger).

Dans les exercices suivants nous allons visiter une page web existante pour essayer de comprendre quelques aspects simples de sa mise en page.

Visitez la page web suivante : http://www.yoyodesign.org/doc/w3c/css2/cover.html
et prenez le temps d'inspecter son contenu avec firebug.


3.6 inspection firebug - h2

Firebug : inspecter

Dans la page http://www.yoyodesign.org/doc/w3c/css2/cover.html
A l'aide de firebug (inspecter) déterminez le nom de l'élément contenant le texte "Recommandation du W3C du 12 mai 1998"? (ce texte se trouve au début de la page).

3.7 inspection firebug - font-size

Lorsque vous inspectez un élément, son style (CSS) est affiché par firebug dans la case en bas à droite.
Regardez le style définissant la mise en page du titre précédent ("Recommandation du W3C du 12 mai 1998").
Vous y trouverez de nombreux propriétés / valeur.
Quelle est la valeur (pas le nom) de la propriété définissant la taille de la police de caractères pour ce titre?
(indiquez la valeur avec l'unité)

3.8 inspection firebug - color

Quelle est la couleur du texte de ce titre?
(les déclarations de style sont nombreuses, vous aurez probablement besoin de descendre dans cette fenêtre de droite)

3.9 inspection firebug - class

Dans le sommaire général (même page, mais un peu plus bas) apparaît la 5ème section:
"5 Les sélecteurs"
En utilisant firebug (inspect), quel est le nom de la classe à laquelle appartient le lien (l'élément "a" qui contient le texte "5 Les sélecteurs") ?

4. CSS en pratique

4.1 CSS en pratique

Dans les exercices suivants vous allez écrire du CSS pour obtenir une mise en page à partir d'un fichier html donné.

Rappels:

x
r
r

4.2 boites CSS

Exercice: boites CSS

Créez un fichier html boites.html complet (avec toutes les entêtes) et un fichier CSS. Ajoutez le html qui se trouve ci-dessous.

Ensuite, modifiez le fichier CSS (et uniquement ce fichier), sans toucher au html, pour obtenir le rendu suivant:
---
r
---

Pensez aux points suivants:

<h2 id="titre1">Premiere partie</h2>
<p class="encadre">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
<h2>Deuxième partie</h2>
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
<h2>Troisième partie</h2>
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>

4.3 correction : boites

Correction : boites

#titre1
{
margin-bottom: 0;
}

p
{
width: 400px;
margin-left: 2em;
}

.encadre
{
border: 1px solid red;
padding-left: 2em;
padding-top: 2em;
margin-top: 0;
}


4.4 bouton css

Exercice: bouton CSS

Pour faire cet exercice, utilisez votre cours (cm-1) et cherchez sur le web la documentation nécessaire.

Créez un fichier html bouton.html complet (avec toutes les entêtes) et un fichier CSS.

Dans le fichier html ajoutez ceci:

<p>ceci est: <a href="test.html" class="bouton">mon boutton</a></p>

Ensuite, modifiez le fichier CSS (et uniquement ce fichier), sans toucher au html, pour obtenir le rendu suivant:
x

Pensez aux points suivants:
N'oubliez pas de systématiquement valider votre CSS, ça vous aidera à trouver des erreurs!
Vous pouvez aussi vous aider de firebug.

4.5 correction : bouton css

Correction : bouton css


.bouton
{
background-color: #aaa;
color: white;
text-decoration: none;
border: 1px solid #999;
border-bottom: 2px solid #555;
border-right: 2px solid #555;
padding: .3em;
font-weight: bold;
font-family: sans-serif;
}

4.6 tableaux

Tableau

Créez un fichier html (avec les entetes et un lien vers un fichier CSS).
Ajoutez un tableau html avec quatre lignes et quatre colonnes.
Rentrez ce que vous voulez dans chaque case.

4.7 correction: tableau

Correction: tableau

<table>
<tr><td>1,a</td><td>1,b</td><td>1,c</td><td>1,d</td></tr>
<tr><td>2,a</td><td>2,b</td><td>2,c</td><td>2,d</td></tr>
<tr><td>3,a</td><td>3,b</td><td>3,c</td><td>3,d</td></tr>
<tr><td>4,a</td><td>4,b</td><td>4,c</td><td>4,d</td></tr>
</table>

4.8 tableau : css : bordure

Ce tableau n'est pas très joli.
Dans le fichier CSS attribuez une bordure (border) noire à chaque case (td).

4.9 border-collapse

Correction :

td
{
border: 1px solid black;
}

affichage:
r

Dans l'affichage précédent, on remarque que la bordure se dessine autour de chaque case, mais que chaque case est séparée par un petit espace.
Pour éviter ca, on peut utiliser la propriété "border-collapse" pour le tableau:
Ajoutez:
table
{
border-collapse: collapse;
}

4.10 mise en page

Nous voulons afficher des lignes de couleur alternées. Ajoutez les classes nécessaires et le CSS nécessaire pour obtenir l'affichage ci-dessous.

Vous remarquerez qu'il faut aussi régler l'espacement.

r

4.11 correction -css-table

Correction

<table>
<tr class="pair" ><td>1,a</td><td>1,b</td><td>1,c</td><td>1,d</td></tr>
<tr class="impair"><td>2,a</td><td>2,b</td><td>2,c</td><td>2,d</td></tr>
<tr class="pair" ><td>3,a</td><td>3,b</td><td>3,c</td><td>3,d</td></tr>
<tr class="impair"><td>4,a</td><td>4,b</td><td>4,c</td><td>4,d</td></tr>
</table>
table
{
border-collapse: collapse;
}
td
{
border: 1px solid black;
padding: 1em;
}
.pair
{
background-color: #aaf;
}
.impair
{
background-color: #afa;
}

4.12 table - entete

Entêtes pour chaque colonne
Pour chaque case on a utilisé la balise <td>.
Quelle balise faut-il utiliser pour les cases qui sont des entêtes de colonnes ?

En vous inspirant de la question précédente réalisez le tableau suivant:

r

4.13 correction - th

Correction

<table>
<tr><th>pseudo</th><th>score</th><th>durée</th><th>équipe</th></tr>
<tr class="pair" ><td>Toto</td><td>1643</td><td>3</td><td>villetaneuse</td></tr>
<tr class="impair"><td>Marc</td><td>734</td><td>1</td><td>villetaneuse</td></tr>
<tr class="pair" ><td>Tom </td><td>75</td><td>6</td><td>epinay</td></tr>
<tr class="impair"><td>Titi</td><td>12</td><td>4</td><td>villetaneuse</td></tr>
<tr class="pair" ><td>Joe </td><td>2</td><td>2</td><td>epinay</td></tr>
<tr class="impair"><td>Ben </td><td>0</td><td>20</td><td>epinay</td></tr>
</table>
table
{
border-collapse: collapse;
}
td
{
border: 1px solid black;
padding: 1em;
}
.pair
{
background-color: #aaf;
}
.impair
{
background-color: #afa;
}
th
{
background-color: #ccc;
border: 1px solid black;
padding: .5em;
}

5. CSS: images de fond

5.1 CSS: images de fond

Dans ces exercices nous allons apprendre à utiliser de images de fond en CSS.

5.2 arrière-plans


Nous allons voir plus en détail les arrières plans , décrits dans la spécification ici
http://www.yoyodesign.org/doc/w3c/css2/colors.html#q2

Nous allons utiliser les 3 propriétés CSS suivantes:
  1. background-image
  2. background-repeat
  3. background-position
Remarque pour les exercices suivants: en CSS2 on ne peut pas utiliser plusieurs images de fond en même temps pour un même élément.

Ex.1

Les images de fond peuvent être attribuées à n'importe quel élément.
Par exemple, on peut spécifier une image de fond à l'élément body.

Cherchez sur le web une image de fond (pas trop grande) pour votre page.

Et utilisez:
body { background-image: url("monimage.png"); }

Vérifiez que l'image s'affiche bien.

Ex.2

Par défaut, l'image se répète horizontalement et verticalement.
Maintenant nous voulons qu'elle ne se répète que horizontalement (et pas verticalement).
En regardant la doc de background-repeat (ici), que faut-il écrire à la place du "?"
body
{
background-image: url("monimage.png");
?
}

(vérifiez que ça marche dans votre navigateur avant de répondre.)

5.3 boutons

Boutons

Créez le CSS nécessaire pour obtenir exactement l'affichage suivant:

r
En utilisant l'image de fond ci-dessous:
r

et en utilisant le html suivant:

<ul>
<li>accueil</li>
<li>joueurs</li>
<li>connexion</li>
<li>contact</li>
</ul>


Conseils:
Pour enlever les puces de chaque ligne de la liste à puces, vous pouvez utiliser:
list-style:none;
Sinon, vous avez déjà vu toutes les propriétés nécessaires.


5.4 correction : boutons

correction : boutons

li
{
background-image: url(bg-boutton.png);
width: 185px;
height: 28px;
text-align: center;
list-style:none;
margin: .5em;
}


5.5 boite degradé - débit

Boite avec fond en dégradé

Dans les exercices suivants nous aurons besoin d'un fichier HTML et d'un fichier CSS.

Créez le fichier essai-image.html suivant et prenez le temps de le comprendre.
Créez aussi un fichier vide appelé essai-image.css
Vérifiez que tout marche bien dans le navigateur et que vous pouvez changer la couleur de certains éléments.

essai-image.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Essai CSS</title>
<link rel="stylesheet" type="text/css" href="essai-image.css" />
</head>
<body>
<h1>Un essai</h1>
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br/>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
</body>
</html>

5.6 degradés

Dégradés

Les images de fond sont souvent utilisés pour faire des dégradés.
Nous voudrions utiliser une image avec un degradé pour le fond du paragraphe. Nous allons donc en créer une avec Gimp.

Lancez Gimp et créez une nouvelle image. Ensuite créez un dégradé vertical à l'aide de l'outil suivant:
gimp

Comme nous allons utiliser la répétition horizontale, nous n'avons pas besoin d'une grande image. Il vaut mieux économiser de la place: redimensionnez votre image (menu: image->scale image) pour obtenir une image de 1 pixel de large et de 100 pixels de haut (appuyer sur la petite chaine pour dissocier hauteur et largeur).

Enregistrez cette image (degrade.png)

Dans l'exercice précèdent nous avons ajouté une image de fond à l'élément body.
Maintenant ajoutez dans votre CSS, cette image de fond (degrade.png) à vos paragraphes.

Vérifiez que tous les paragraphes s'affichent bien avec un dégradé.


5.7 Exemple 2

Nous allons essayer d'obtenir un résultat comme ci-dessous, en modifiant le fichier essai-image.css et surtout sans toucher au fichier essai-image.html.
resultat
Vous pouvez utiliser les deux images de fond suivantes:
1. titre.png:
title

2. degrade.png: (elle est bien là, mais ne fait qu'un pixel de largeur!) (suiviez ce lien)
degrade

Reprenez l'exemple précédent. Utilisez l'image titre.png comme image de fond du h1 et degrade.png comme image de fond du paragraphe.

Ajustez les margin, padding, width, height, color, background-color, font-size, text-align ... des éléments pour obtenir le résultat souhaité.
(text-align peut être utilisé pour centrer le titre)

Réfléchissez bien aux dimensions de chaque boite... certaines dimensions sont imposées par la taille de titre.png

N'hésitez pas à utiliser firebug pour comprendre les problèmes de margin, padding ...

Nous voulons que cette boite se redimensionne correctement lorsqu'on ajoute ou qu'on enlève de nombreuses lignes de texte. Faites quelques essais pour voir ce qui arrive dans ces cas.

Ajustez le CSS pour obtenir le résultat voulu.

Quelques conseils:





5.8 correction

Correction:

h1
{
width: 300px; /* on n'a pas le choix titre.png fait 300px */
height: 20px; /* on n'a pas le choix titre.png fait 20px */
margin: 0px;
margin-left: 30px; /* pour que la boite la boite ne colle pas à gauche */
color: white;
text-align: center;
background-image: url("titre.png");
background-repeat: no-repeat;
font-size: 14px;
}
p
{
width: 280px; /* 300px - 10px padding de chaque coté */
margin: 0px;
margin-left: 30px; /* pour que la boite la boite ne colle pas à gauche */
padding: 10px; /* un peu de place entre le texte et la boite */
background-color: #ccb9d4; /* si la boite est + grande que l'image du degrade */
background-image: url("degrade.png");
background-repeat: repeat-x;
background-position: bottom;
}