TP2: Introduction aux CSS

Objectifs : L'objectif de cette scéance de TP est d'expérimenter avec les notions de base du langage CSS (styles internes et externes, règles de style simples pour la mise en forme des éléments, les différents types de sélecteurs, les boites) vues en cours. Cette découverte se fera en deux temps:

Premièrement, vous vous familiariserez avec les sélecteurs CSS au travers de petits exercices simples dans les parties 1 et 2 du TP.
Ensuite, si il vous reste du temps et que vous avez envie d'aller plus loin, vous appliquerez vos connaissances au mini site créé lors du TP précédent afin d'améliorer son apparence visuelle. Si vous n'avez pas le temps d'aborder ce point en séance de TP encadrée, vous êtes fortement invité à le faire en libre service ou chez vous.

Vous pouvez travailler indifféremment sous n'importe quel environnement (Windows, Linux, Mac).

Pour comprendre l'utilisation des propriétés CSS utilisées dans ce TP, les liens étiquetés en vert vous renvoient vers la page correspondante dans le tutoriel du W3C consacré à CSS (https://www.w3schools.com/css).

Préparation du TP

Téléchargez le fichier TP02.zip et décompressez dans le répertoire TW créé lors du premier TP
Vérifiez que le contenu de votre répertoire TP02 est bien le suivant :

Figure1 : Contenu du répertoire TP02 après décompression de TP02_Partie1.zip

Pour chaque question des parties 1 et 2, essayez de trouver une solution par vous même. Mais si vous avez des difficultés et êtes un peu perdus (ce qui peut être tout à fait normal lorsque l'on débute avec les CSS !) vous avez à votre disposition deux boutons :

Un bouton qui vous donnera quelques pistes (hints) sur la manière de procéder,
Un bouton qui vous donnera une solution que vous pourrez comparer avec celle que vous aurez élaborée.
Ce bouton n'est à utiliser qu'en dernier recours (quand vous avez terminé avec votre propre solution pour la comparer avec celle que je propose ou bien si vous êtes bloqués) !

Partie 1: découverte des CSS

Le but de cette première partie est "d'habiller" progressivement un page HTLM avec des styles CSS pour passer étape par étape d'un affichage "brut" sans mise en forme autre que celle appliquée automatiquement par le navigateur, à un affichage "stylé" contrôlé par vos styles CSS.

Le fichier index.html contient du texte généré automatiquement sur le modèle du Lorem Ipsum, faux texte standard utilisé depuis les débuts de l'imprimerie dans les années 1500 pour tester la composition et la mise en page avant impression (pour en savoir plus https://fr.wikipedia.org/wiki/Lorem_ipsum et/ou http://fr.lipsum.com/).

TIP : Savez-vous qu'il est possible de générer facilement du texte Lorem Ipsum dans VSCode ? Pour en savoir plus consultez la rubrique correspondante dans la FAQ VS Code du cours TW du M2 CCI/M2 GEOMAS

De la même manière qu'existent des services de validation du code HTML, des services de validation du code CSS sont disponibles, comme par exemple le service du W3C http://jigsaw.w3.org/css-validator. Vous pouvez l'utiliser sur votre page HTML.

Le service de validation des CSS du W3C (http://jigsaw.w3.org/css-validator)

Exercice 1: styler tous les éléments d'un même type.

On veut "styler" la page afin d'obtenir les effets suivants (voir figure 2):

un fond simulant un effet parchemin,
tous les titres de niveau 1 (éléments h1) centrés sur la page,
tous les titres de niveau 2 (éléments h2)de couleur bleue sur fond doré (identifiant de couleur goldenrod),
le texte des tous les paragraphes (éléments p) justifié (aligné) à gauche et à droite, avec un retrait de 16 pixels au début de chaque paragraphe.

Résultat de la décompression du fichier tp02_CSS.zip — Figure 2 : application d'un première feuille de styles au fichier `index.html`

Dotez la page index.html de styles CSS afin d'obtenir un affichage identique à celui présenté sur la figure 2. Dans un premier temps vous utiliserez des styles internes à la page (définis dans un élement <style> dans l'en tête de la page).

Essayez de trouvez une solution par vous-mêmes. Sinon, si vous souhaitez être guidés sur une manière de procéder, cliquez sur le bouton Indications. Le bouton Correction vous donnera une solution à ne consulter qu'après avoir élaboré votre propre solution.

Pour définir une feuille de styles interne à la page voir le paragraphe Internal style sheet de la page CSS How To... du tutorial CSS de w3schools.com.

Pour appliquer un style à tous les éléments d'un même type dans une page on utilisera un sélecteur de balise (ou sélecteur d'élement). Voir la partie CSS Selectors du tutorial CSS de w3schools.com.

Pour définir une image ou couleur de fond : CSS Backgrounds du tutorial CSS de w3schools.com.

Il faut appliquer une image de fond à tout le document. On utilise le sélecteur body avec la propriété background-image.
Pour les titres de niveau 1 (h1) et 2 (h2) on utilise respectivement les propriétés:
- text-align pour centrer le texte des titres 1,
- color et background-colorpour définir la couleur du texte et la couleur du fond de titres 2.
Pour les paragraphes p on utilise les propriétés text-align pour la justification et text-indent pour le retrait.

Pour définir les styles, on choisi pour le moment d'utiliser une balise style dans l'en-tête de la page (dans l'élément <head>).


<head>
    ...
    <style>
        /*
         * sélecteurs d'éléments HTML. Les styles s'appliquent à tous les élements.
         */
        body {
            background-image: url("images/parchemin2.jpg");
        }
        h1 {
            text-align: center;
        }
        h2 {
            color: blue;
            background-color: goldenrod;
        }
        p {
            text-indent: 16px;
            text-align: justify;
        }                                    
    </style> 
</head>

Exercice 2: styler un ensemble d'élements

On souhaite mettre en évidence certains paragraphes du texte en les surlignant avec une couleur jaune comme le montre la figure 3.

surlignage de paragraphes — Figure 3 : application d'un style surlignant certains paragraphes.

Modifiez les styles de la page index.html afin d'obtenir cet effet.

Pour appliquer un style à un ensemble d'éléments, vous pouvez utiliser un sélecteur de classe (voir la partie CSS Selectors du tutorial CSS de w3schools.com).

On défini un style de nom .surligné que l'on applique avec l'attribut class aux paragraphes concernés.


/*
 * sélecteur de classe, les styles ne s'appliquent que aux éléments ayant la classe
 * de style comme attribut.
 */
.surligne {
    background-color: yellow;
}

Exercice 3: à propos des balises `<span>` et `<div>`

Question 1: Modifiez votre fichier index.html en encadrant la phrase "Ut cursus ut." du deuxième paragraphe à l'aide d'une balise <span>.

Rechargez la page index.html dans votre navigateur. Que constatez vous ?

A votre avis quelle peut être l'utilité cette balise ?

La balise span du tutorial HTML de w3schools.com.

Il n'y a aucune modification lors de l'affichage. La balise span sert à délémiter des éléments en ligne afin de pouvoir leur appliquer ensuite un style particulier.

A l'instar de ce qui a été effectué lors de l'exercice 2, on souhaite non seulement pouvoir surligner des paragraphes, mais également des portions de texte quelconques (phrases ou suites de mots), comme le montre la figure 4.

surlignage de portions de texte — Figure 4 : surlignage de portion de texte quelconques.

Question 2: Effectuez les modifications nécessaires afin d'obtenir cet effet.

Utilisez des balises <span> pour délimiter les portions de texte auxquelles vous appliquerez la classe de style définie à l'exercice 2.

il suffit de délimiter les portions de texte à surligner avec des balises span et de leur appliquer la classe de style surligne définie à l'exercice 2.


    <body>
        <h1>Lorem ipsum dolor</h1>
        <div id="cadre1">
            <p class="surligne">Ultricies est pellentesque integer a aliquam
                euismod varius tempor. Nunc a eget justo vestibulum curabitur ve
                l dolor molestie. Con elit ipsum. Pretium quis ultrices.
            </p>
            <p>Rhoncus cras sit tellus lacinia cursus. 
                <span class="surligne">Ut cursus ut</span>.
                Sit suscipit  a facilisi nullam praesent. Tellus dignissim nulla
                quis purus suspendisse.  
                Tristique mollis morbi sed massa <span class="surligne">nulla
                cras</span> ac egestas dolores donec erat.  Placerat sed mauris.
                A nihil mauris. Blandit nulla adipiscing. 
            </p>
            ...

Question 3: Faites en sorte que les deux premiers paragraphes de la dernière partie (Libero curabitur consectetuer...) du document soit eux aussi surlignés. Attention, on ne veut pas que le surlignage s'applique indépendamment à chacun des paragraphes comme sur la figure 5, mais à un bloc regroupant ceux-ci comme sur la figure 6.

Figure 5 : surlignage de deux paragraphes.

Figure 6 : surlignage d'un bloc regroupant deux paragraphes.

Utilisez une balise div pour encadrer les deux paragraphes et appliquez lui la classe de style que vous avez précédemment définie pour le surlignage.

De la même manière que l'on a utilisé des balises span pour délimiter les portions de texte en ligne à surligner à l'intérieur des paragraphes, on utilise un élement bloc de type div pour regrouper les deux paragraphes en un même bloc, bloc que l'on pourra styler en lui appliquant la classe surligne.


    <body>
        ...
        <h2>Libero curabitur consectetuer aliquam autem vestibulum</h2>
        <div class="surligne">
            <p>Sodales quisque ipsum vehicula ligula metus id enim cursus. 
                Lacus elit amet. Consectetuer sapien a eget non felis tortor tristique
                justo. Mi mi nulla. Maecenas in quisque.
                Tempor tempus lacus. 
            </p>
            <p>
                Nec rhoncus laoreet pellentesque eget vehicula nulla libero massa.
                Nec id accumsan. Id amet sagittis. Nec sit quam. Eleifend nibh magna.
            </p>
        </div>
        <p>
            Bibendum commodo dolor odio tristique justo lacus vestibulum turpis
            pretium proin vestibulum ut id sem. 
            Consequat gravida nulla velit tempor commodo cubilia blandit.
        </p>
    </body>

Exercice 4: styler un élément particulier

On souhaite modifier l'affichage de manière à ce que les deux premiers paragraphes soient (figure 7)

dans un cadre de fond gris dont le bord est un trait plein noir.
en italique avec une police deux fois plus petite que le texte normal

encadrement de portions de texte. — Figure 7 : particularisation des paragraphe de début du document.

Question 1: Effectuez les modifications nécessaires afin d'obtenir cet effet.

Utilisez une balise div pour encadrer les deux paragraphes, que vous doterez d'un identifiant (attribut id). Définissez ensuite un style pour cet identifiant (voir Sélecteurs de styles dans le cours css de w3schools).

Pour définir une bordure utiliser les propriétes borders.

Pour définir la taille et le style de la police de caractères, utilisez les propriétés font-style et font-size (voir le chapitre CSS fonts du tutorial w3schools.

On utilise un élement bloc de type div pour regrouper les deux paragraphes en un même bloc, élément auquel on associe un attribut id avec par exemple la valeur "cadre1". Pour styler ce bloc, on défini un style de nom #cadre1 avec les propriétés :

border-style pour définir la bordure du cadre.
background-color pour définir la couleur du fond du cadre.
font-style et font-size pour définir le style et la taille du texte.

Le style:

/*
 * sélecteur par identifiant
 */
#cadre1 {
                border-style: solid;
                font-style: italic;
                font-size: 0.5em;
                background-color: rgb(210,210,210);
}

Le code HTML


...
</head>
    <body>
        <h1>Lorem ipsum dolor</h1>
        <div id="cadre1">
            <p class="surligne">Ultricies est pellentesque integer a aliquam
                euismod varius tempor.  Nunc a eget justo vestibulum curabitur
                vel dolor molestie. Con elit ipsum.
                Pretium quis ultrices.
            </p>
            <p>Rhoncus cras sit tellus lacinia cursus. 
                <span class="surligne">Ut cursus ut</span>.Sit 
                suscipit a facilisi nullam praesent.
                Tellus dignissim nulla quis purus suspendisse.  
                Tristique mollis morbi sed massa nulla cras ac egestas dolores
                donec erat. Placerat sed mauris. A nihil mauris. 
                Blandit nulla adipiscing. 
            </p>
        </div>
        <h2>Sit amet nisl sed elit et</h2>
        ...

On souhaite maintenant modifier l'affichage de manière à placer le troisième et quatrième paragraphe ainsi que le deuxième titre de niveau 1 dans un cadre de fond bleu transparent (opacité = 0.15) et de bordure un trait pointillé comme le montre la figure 8.

Question 2: Effectuez les modifications nécessaires afin d'obtenir cet effet.

C'est la même chose que pour l'exercice précédent (un div avec un attribut id, et un style spécifique pour cet id).

Pour définir un couleur avec transparence voir le chapitre CSS colors du tutorial CSS du w3schools, et plus spécifiquement la définition de valeur de couleur avec rgba (a pour le canal alpha qui définit la transparence).

C'est la même chose que pour la question précédente. On utilise un élement div pour regrouper les deux paragraphes et le titre de niveau 1 dans en un même bloc, élément auquel on associe un attribut id avec par exemple la valeur "cadre2". Pour styler ce bloc, on définit un style de nom #cadre2 avec les propriétés :

border-style pour définir la bordure du cadre.
background-color pour définir la couleur du fond du cadre. Pour définir un fond bleu transperent on utlise la valeur rgba(0,0,255,0.15), les trois premières valeurs définissant respectivement les composantes Rouge, Verte (Green) et Bleue de la couleur, le quatrième paramètre définissant l'opacité (canal alpha, 1 = couleur opaque, 0 = couleur complètement transparente).

Le style:

#cadre2 {
    border-style:dashed;
    background-color: rgba(0, 0, 255, 0.15);
}

Le code HTML:

        ...
        <h2>Sit amet nisl sed elit et</h2>
        <div id="cadre2">
            <p>Justo felis a. Massa pretium vel. Sapien consectetuer 
                <span>nullam</span> blandit enim nec laoreet fringilla
                consectetuer. Dui ut a. Pulvinar hac suscipit praesent
                cursus et. 
            </p>
            <p class="surligne">Mauris integer tempor urna pellentesque 
                commodo sagittis libero maecenas. 
                Sed adipiscing suscipit felis ac scelerisque. Purus nec
                massa consequat aenean dolor. Eu velit a.
            </p>
            <h1>Nulla interdum nam</h1>
        </div>
        <h2>Scelerisque praesent</h2>
       ...

Exercice 5: styler un pseudo élément

On souhaite mettre en évidence la première lettre de chaque paragraphe, en utilisant des caractères gras de couleur rouge et de taille 1.8 fois plus grande que le texte normal comme le montre la figure 9.

Effectuez les modifications nécessaires afin d'obtenir cet effet.

Pour éviter de mettre une balise span autours de la première lettre de chaque paragraphe, il est beaucoup plus simple d'utiliser le pseudo-élément prévu à cet effet dans les CSS.

Pour styler les premières lettres de lettres de chaque paragraphe on utilise le pseudo élément first-letter pour définir un style p::first-letter. Les propriétés de ce style sont

font-weight et font-size pour définir le poids (ici bold) et la taille du texte.
color pour définir la couleur du texte.

/*
* sélecteur de pseudo élément
*/
p::first-letter {
    font-size: 1.8em;
    color: red;
    font-weight: bolder;
}

Exercice 6: appliquer un style selon l'état d'un élément

Il s'agit maintenant de faire en sorte que, lorsque le curseur de la souris est déplacé au dessus d'eux,les élements surlignés (voir exercice 2) apparaissent avec avec le texte en jaune sur fond vert et avec une police 2 fois plus grosse, . La vidéo ci-dessous vous montre l'effet attendu.,

Vidéo 1 : Affichage différencié des éléments surlignés selon que le curseur de la souris passe ou non au dessus d'eux

Effectuez les modifications de style nécessaires afin d'obtenir cet effet.

Ici il faut utiliser la pseudo-classe prévue à cet effet dans les CSS.

On utilisera le pseudo élément hover pour définir un style dont le sélecteur sera .surligne:hover. Les propriétés de ce style sont

color et background-color pour définir la couleur du texte et de son fond,
font-size pour définir la taille du texte.

/*
* sélecteur de pseudo class
*/
.surligne:hover {
    font-size: 2em;
    color: yellow;
    background-color: green;
}

Exercice 7: feuille de style externe

Le fichier page2.html contient lui aussi du code HTML "Lorem ipsum".

Question 1:

Sauvegardez le code source de cette page dans le répertoire tp02_CSS où se trouve le fichier index.html que vous avez mis en forme dans les exercices précédents.
Modifiez les pages index.html et page2.html pour que chacune contienne un lien hypertexte vers l'autre page.
Faites en sorte que page2.html s'affiche comme indiqué sur la figure 10 en adoptant les mêmes styles que la page index.html

Le mieux pour partager les styles entre les deux pages est d'utiliser un feuille de style externe (voir le chapitre CSS How to ... du tutorial de w3schools).

Pour que index.html et page2.html partagent les mêmes styles il faut "externaliser" les styles, précédemment définis dans l'en-tête de la page index.html, dans un fichier CSS (ici par exemple dans le fichier tp2.css situé dans le répertoire css du site.

Attention: le chemin pour définir l'image de fond du style body est un chemin relatif par rapport à l'endroit où se trouve la définition du style. Lorsque le style était défini dans la page index.html, ce chemin était ./images/parchemin2.jpg. Il faut ici le remplacer par ../images/parchemin2.jpg.

Le fichier tp2.css:

/* 
    Styles pour les pages du site du TP2
    Author     : Philippe Genoud
*/
body {
    background-image: url("../images/parchemin2.jpg");
}
h1 {
    text-align: center;
}
h2 {
    color: blue;
    background-color: goldenrod;
}
p {
    text-indent: 16px;
    text-align: justify;
}
/*
 * sélecteur de classe
 */
.surligne {
    background-color: yellow;
}

/*
* selecteurs par un identifiant d'élément
*/
#cadre1 {
    border-style: solid;
    font-style: italic;
    font-size: 0.5em;
    background-color: rgb(210,210,210);
}
#cadre2 {
    border-style:dashed;
    background-color: rgba(0, 0, 255, 0.15);
}

/*
* sélecteur de pseudo élément
*/
p::first-letter {
    font-size: 1.8em;
    color: red;
    font-weight: bolder;
}

Ensuite, il suffit de remplacer l'élément style qui se trouvait dans l'en-tête (balise head) de la page index.html par une balise link avec comme valeur de l'attribut href le chemin relatif depuis la page index.html vers le fichier tp2.css.

<!DOCTYPE html>
<html lang="la">
    <head>
        <title>Lorem Ipsum</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <link href="css/tp2.css" rel="stylesheet" type="text/css"/>
 </head>
    <body>
        <nav>
            <a href="page2.html">page 2</a>
        </nav>
        <h1>Lorem ipsum dolor</h1>
        <div id="cadre1">
        ...

On procède de même dans le fichier page2.html.

Exercice 8: Boites et marges

On voudrait que les titres de niveau h1 soient encadrés par une boite au fond rouge, avec comme bordure un trait plein noir,la boite étant centrée et occupant 75% de la largeur de la fenêtre, et avec une police un peu plus grosse (3.0em au lieu de 2.0em la valeur par défaut de h1 (figure 11)). De plus on veut que la marge inférieure de la boite (qui la sépare du bloc suivant) soit de 20 pixels.

Pour en savoir plus consultez la page CSS Box Model du tutoriel w3schools.

Modifiez vos styles de manière à obtenir l'affichage ci-dessus.

On rajoute au style h1 les propriétés ci-dessous:

h1 {
    text-align: center;  /* texte centré (dans la zone occupée par l'élément h1)*/
    border: solid; /* bordure solide : trait plein */
    font-size: 3.0em;  /* taille de police 3 fois plus grosse*/
    background: red;   /* couleur de fond rouge*/
    width: 75%;    /* largeur de l'élément h1 : 3/4 de l'élément englobant */
    margin: auto auto 20px auto;  /* marges dans l'ordre haut, droit, bas, gauche
           - les marges haut, droit et gauche sont automatiques afin que l'élément
             h1 soit centré dans la fenêtre,
           - la marge basse est de 20 pixels.
    */
}

Exercice 9: "combinateurs"

L'objectif de cet exercice est de vous faire manipuler les sélecteurs de style, en particulier les "combinateurs" qui utilisent les relations entre les éléments de l'arbre DOM pour sélectionner les éléments d'une page HTML.

Dans les questions qui suivent, pour obtenir les mise en forme demandées, vous devrez définir des styles CSS sans vous servir ni de sélecteurs de classe (.xxx) ni de sélecteurs d'identifiant (#yyy).

Pour en savoir plus consultez la page CSS Combinators du tutoriel w3schools.

Question 1: avant toute chose, intégrer à votre site la page page3.html à votre site. Elle contient les éléments HTML (en particulier les éléments <section>) nécessaires aux questions suivantes.

On souhaite tout d'abord faire une distinction entre les titres de niveau (h2) selon qu'ils se trouvent ou non dans une section (voir figure 12).

Figure 12 : mise en forme des titres de niveau h2 selon leur position dans le document (page3.html).

Si le titre n'est pas dans un section, il sera "stylé" de la manière suivante :
- bordure solide bleue
- marge supérieure (top) et inférieure (bottom) de 10px
- taille de police de 1.5em,
Si le titre est dans une section, il sera stylé de la manière suivante:
- pas de bordure,
- texte en italique,
- taille de police un peu plus petite que pour les titres hors section (1.25em au lieu de 1.5em),
- marges internes supérieure et inférieure plus petites (3 pixels au lieu de 10 pixels).

Question2: modifiez votre feuille de styles de manière à afficher les titres de niveau h2 comme indiqué ci-dessus.

Utilisez un sélecteur de style combiné qui permet de définir les propriétés à appliquer à tout élément h1 qui descend (directement ou indirectement) d'un élement section.

On utilise le sélecteur de style combiné section h2 qui permet de définir les propriétés à appliquer à tout élément h2 qui descend (directement ou indirectement) d'un élement section.

 h2 {
    color: blue;
    background-color: goldenrod;
    width: 90%;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.5em;
    border: solid;
}
                                    
section h2 {   /* sélecteur descendant: toute balise h2 qui descend de section */
    border: none;
    margin-top: 3px;
    margin-bottom: 3px;
    font-size: 1.25em;
    font-style: italic;
}

Attention: les propriétés définies précédemment pour les éléments h1 (voir exercice 7) sont héritées. Pour éviter qu'elle ne s'appliquent ici il faut les redéfinir avec la valeur appropriée. Par exemple border: none; est là pour éviter que les titres de niveau h1 situés dans une section aient une bordure solide.

On souhaite maintenant que les listes numérotées soient affichées comme suit (figure 13):

Figure 13 : mise en forme des listes numérotées (page3.html).

les chiffres de premier niveau sont des chiffres romains majuscules,
les chiffres de deuxième niveau sont des lettres,
les chiffres de troisième niveau sont des chiffres romains minuscules.

Question3: Modifiez vos styles de façon à ce que les listes numérotées soient affichées comme indiqué ci-dessus.

La propriété list-style-type permet de définir le type de marqueur utilisé pour les éléments d'une liste.

Un sélecteur de style combiné permet de définir les propriétés à appliquer à tout élément li qui descend directement (child) d'un élement ol.

Il faut définir ici trois styles de sélecteurs respectifs :

ol > li pour les chiffres de premier niveau
ol > li > ol > li pour les chiffres de deuxième niveau
ol > li > ol > li > ol > li pour les chiffres de troisième niveau

Ce qui donne:

/*
chiffres de premier niveau : chiffres romains majuscules.
Il s'agit des éléments <li> qui descendent directement (child) d'un élément
<ol>
*/
ol > li {  /* sélecteur de <li> descendant direct (child) de <ol> */
    list-style-type: upper-roman;
}
/* 
chiffres de deuxième niveau : lettres.
Il s'agit des éléments<li> qui descendent directement (child) d'un élément
<ol> qui lui même est enfant d'un élément <li> enfant d'un élément <ol>
*/
ol > li > ol > li {
    list-style-type: lower-alpha;
}
/* 
chiffres de troisième niveau : des chiffres romains minuscules.
encore un niveau*/
ol > li > ol > li > ol > li {
    list-style-type: lower-roman; 
}

Exercice 10: Sélecteurs d'attributs

Le site peut contenir des images (par exemple la page page3.html). Certaines images peuvent être des liens hypertextes, d'autres non. On souhaite les distinguer selon qu'elles supportent un lien ou non. Ainsi toutes les images auront une bordure de 10 pixels avec la couleur :

blanche pour les images ne supportant pas de lien,
bleu ciel d'épaisseur pour les images supportant un lien vers Wikipédia,
violette pour les images pour les images supportant un lien vers un site autre que Wikipédia,

types de bordure des images — Particularisation des images selon le lien qu'elles portent

Question3: Modifiez vos styles de façon à ce que image soient affichées comme indiqué ci-dessus.

" Utiliser un sélecteur d'attribut pour particulariser les liens vers Wikipédia.

On peut définir ici trois styles de sélecteurs respectifs :

img pour les images,
a > img pour les images qui supportent un lien,
a[href*="wikipedia"] pour les images qui supportent un lien vers Wikipédia.

Ce qui donne:

img {
    border-width: 10px;
    border-style: solid;
    border-color : white;
}



a > img {
    border-color: blueviolet;
}

a[href*="wikipedia"] > img {
    border-color: #b6dcf6;
}

Partie 2 : Generer du code HTML avec Emmet

L'objectif de cet exercice est de vous inciter à utiliser l'extension Emmet dans VSCode pour augmenter votre productivité en générant rapidement du code HTML. Emmet est une boîte à outils (toolbox) pour développeurs Web qui peut grandement améliorer votre flux de travail HTML et CSS. Emmet est intégré en standard dans l'éditeur de VSCode et vous permet de génerez rapidement du code HTML en utilisant des abréviations inspirées des expressions de type similaires au sélecteurs CSS. Ces abréviations sont analysées dynamiquement et produisent une sortie en fonction de ce que vous tapez, comme le montre l'exemple ci-dessous.

La documentation la FAQ VS Code de l'enseignement TW du M2 CCI/M2 GEOMAS présente rapidement une partie des abbréviations proposées par Emmet. Consultez la ainsi que la documentation de Emmet pour vous faire un idée de ce qu'il est possible de réaliser.

exercice 1 : Dans le repertoire TP02_PArtie2crééz un fichier index.html qui affichera sous la forme d'une liste numérotée (tag <ol> un certain d'images accompagnées de texte Lorem Ipsum généré autoamtiquement. Pour écrire le code HTML correspondant à cette liste donné dans l'image ci-dessous essayez de de trouver une abréviation emmet qui permet de le générer automatiquement :

Un début de solution

Il manque les images après le deuxième paragraphe de chaque liste item. A vous de jouer !

Un deuxième indice pour générer une balise img avec un attribut src

allez voir les opérateurs + et $ dans la doc de Emmmet

ol>(li>(p>lorem5)*2+img[src="images/image$.jpg"])*3

exercice 2 : Rajoutez au fichier index.html le HTML pour afficher une table à trois colonnes contenant 4 lignes, chacune contenant l'une des images située dans le repertoire images de TP02_Partie2 dans la première colonne et du Lorem ipsum (parapagraphe <p> avec 42 mots) dans les deux colonnes suivantes. Pour écrire le code de cette table trouvez une expression Emmet qui permet de le faire autormatiquement

image d'une table à générer avec Emmet — la table à générer avec Emmet

table[border="1"]>(thead>tr>th{titre$}*3)+tbody>(tr>(td>img[src="images/images$.jpg"]+(td>lorem42)*2))*4

exercice 3 :ajoutez à votre page une feuille de styles CSS qui permet de l'afficher afficher comme idniqué sur la figure ci-dessous.

Pour mettre en forme votre table vous pouvez vous référer au tutorial CSS styling Tables de w3schools.

        body {
            font-family: Arial, Helvetica, sans-serif;
        }
        table {
            border: solid 1px;
            border-collapse: collapse;
            background-color: white
        }

        td,
        th {
            border: solid 1px darkgray;
            padding: 10px;
        }

        thead {
            background-color: black;
            color: white;
        }
        tbody > tr:nth-child(odd){background-color: #f2f2f2;}

        tbody > tr:hover {background-color: #ddd;}

Partie 3: Mise en forme de votre mini-site (Facultatif)

Si vous n'avez pas fait le premier TP, ou si votre mini-site ne vous satisfait pas, vous disposez d'une correction sur la page des TD , que vous pouvez télécharger et utiliser comme base pour réaliser cette partie.

En utilisant les feuilles de style CSS, mettez en forme comme bon vous semble votre mini-site. Il est important de définir une "chartre graphique", qui définira une apparence uniforme pour toutes les pages de votre site. Par exemple, vous pouvez :

Définir un en tête et une barre de navigation communs à toutes les pages.

Figure 13 : en-tête et barre de navigation des différentes pages du mini-site.

Pour vous aidez, vous pouvez aller voir la rubrique CSS Navigation Bars dans la page d'exemples du tutorial CSS de w3Schools.

Figure 14 : Tutorial w3schools - création de barres de navigation avec les CSS.
Dans la page agenda, colorier les cases de votre planning en fonction de la matière concernée.

Figure 15 : exemple de mise en forme de la table planning.
...