Séance 5

Objectifs

  • Être capable d’intégrer et de décrire des images correctement.

  • Être capable d’intégrer l’accessibilité dans le code.

  • Savoir insérer des icônes pour enrichir une interface.

MéthodeArborescence

Arborescence

Des images ainsi que leurs versions miniatures ont été ajoutées.

Méthodeindex.html

1
<!DOCTYPE html>
2
<html lang="fr">
3
4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Portfolio de Vincent Vanneste</title>
8
    <link rel="stylesheet" href="css/style.css">
9
    <link rel="stylesheet" href="css/accueil.css">
10
</head>
11
12
<body>
13
14
    <header id="haut" role="banner" aria-label="En-tête du site">
15
        <figure role="img" aria-labelledby="figcaption-vv">
16
            <img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
17
            <figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
18
        </figure>
19
20
        <h1>Portfolio de Vincent Vanneste</h1>
21
        <nav role="navigation" aria-label="Navigation principale">
22
            <ul>
23
                <li><a href="index.html">Accueil</a></li>
24
                <li><a href="projets.html">Projets</a></li>
25
                <li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
26
            </ul>
27
        </nav>
28
29
    </header>
30
31
    <main role="main">
32
        <nav role="navigation" aria-label="Navigation interne à la page">
33
            <ul>
34
                <li><a href="#about">À propos</a></li>
35
                <li><a href="#competences">Compétences</a></li>
36
                <li><a href="#experiences">Expériences</a></li>
37
                <li><a href="#formations">Formations</a></li>
38
            </ul>
39
        </nav>
40
41
        <!-- À propos -->
42
        <section id="about" role="region" aria-labelledby="titre-about">
43
            <h2 class="icon-about" id="titre-about">À propos</h2>
44
            <p>Je suis directeur des études du DEUST WMI de Calais et j'enseigne les fondamentaux du développement web
45
                (HTML, CSS, JavaScript, PHP). Passionné par la transmission des connaissances, j'accompagne mes
46
                étudiants dans l'acquisition des compétences nécessaires pour réussir dans le secteur du numérique.</p>
47
            <address role="contentinfo" aria-label="Coordonnées">
48
                <dl>
49
                    <dt>Localisation :</dt>
50
                    <dd>Calais, France</dd>
51
                    <dt>Site :</dt>
52
                    <dd><a href="https://vincent-vanneste.fr/" target="_blank">vincent-vanneste.fr</a></dd>
53
                    <dt>Email :</dt>
54
                    <dd><a href="mailto:vincent.vanneste@univ-littoral.fr">vincent.vanneste@univ-littoral.fr</a></dd>
55
                </dl>
56
            </address>
57
        </section>
58
59
60
61
        <!-- Compétences -->
62
        <section id="competences" role="region" aria-labelledby="titre-competences">
63
            <h2 class="icon-competences" id="titre-competences">Compétences</h2>
64
            <ul>
65
                <li>HTML</li>
66
                <li>CSS</li>
67
                <li>Responsive</li>
68
                <li>Accessibilité</li>
69
                <li>JavaScript</li>
70
                <li>PHP • Laravel 11</li>
71
                <li>MySQL</li>
72
                <li>Git & GitHub</li>
73
            </ul>
74
        </section>
75
76
77
78
        <!-- Expériences -->
79
        <section id="experiences" role="region" aria-labelledby="titre-experiences">
80
            <h2 class="icon-experiences" id="titre-experiences">Expériences récentes</h2>
81
            <ul>
82
                <li>
83
                    <strong>Enseignant – Licence 1 Informatique</strong><br>
84
                    <time datetime="2025">2025</time> •
85
                    <address>
86
                        <a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a>
87
                    </address><br>
88
                    Introduction à HTML, CSS, JS
89
                </li>
90
                <li>
91
                    <strong>Directeur des études – DEUST WMI</strong><br>
92
                    <time datetime="2024-2025">2024 → 2025</time> •
93
                    <address>
94
                        <a href="https://www.univ-littoral.fr/" target="_blank">FCU ULCO</a>
95
                    </address>
96
                </li>
97
            </ul>
98
        </section>
99
100
        <!-- Formations -->
101
        <section id="formations" role="region" aria-labelledby="titre-formations">
102
            <h2 class="icon-formations" id="titre-formations">Formations</h2>
103
            <ul>
104
                <li>
105
                    <strong>Doctorat productique, automatique et informatique industrielle</strong><br>
106
                    <time datetime="2000">2000</time> •
107
                    <address>
108
                        <a href="https://www.univ-lille.fr/" target="_blank">Université de Lille</a>
109
                    </address>
110
                </li>
111
                <li>
112
                    <strong>CAPET Technologie</strong><br>
113
                    <time datetime="1998">1998</time> •
114
                    <address>
115
                        <a href="https://www.iufm-douai.fr/" target="_blank">IUFM Douais</a>
116
                    </address>
117
                </li>
118
            </ul>
119
        </section>
120
121
    </main>
122
123
    <footer role="contentinfo" aria-label="Pied de page">
124
125
        <p>&copy; 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés. | <a href="#haut">Haut de page</a></p>
126
127
    </footer>
128
129
</body>
130
131
</html>
Rôle des attributs role
L’attribut role indique la fonction ou le rôle sémantique d’un élément pour les technologies d’assistance (lecteurs d’écran, etc.). Il permet à l’utilisateur d’identifier rapidement la structure et la fonction de chaque section du site, même si la balise HTML ne donne pas cette information.
Dans ton document :
  • role="banner" sur <header> :
    Indique que l’en-tête contient des informations importantes comme le logo ou le titre du site. Il s’agit généralement de la zone introductive du site.
  • role="img" sur <figure> :
    Indique que l’élément est une image (ou un ensemble image + description) à des fins d’accessibilité, même si la balise <img> est déjà présente.
  • role="navigation" sur <nav> :
    Signale que le bloc est un menu de navigation. Les lecteurs d’écran peuvent ainsi proposer aux utilisateurs de sauter directement à la navigation.
  • role="main" sur <main> :
    Définit la zone principale du document, distincte des en-têtes, menus et pieds de page.
  • role="region" sur <section> :
    Délimite une section du contenu que l’utilisateur peut atteindre rapidement avec des aides à la navigation.
  • role="contentinfo" sur <footer> et <address> :
    Indique que cet élément contient des informations sur le site ou le contact, généralement situées en pied de page.
Rôle des attributs ARIA (aria-*)
Les attributs ARIA (Accessible Rich Internet Applications) fournissent des informations supplémentaires aux technologies d’assistance sur la structure ou le contenu d’un élément.
Dans ton document :
  • aria-label :
    Sert à donner un nom ou une description explicite à un élément lorsque son rôle ou son contenu n’est pas suffisamment clair.
    Exemples :
    • <header aria-label="En-tête du site"> → décrit le contenu de l’en-tête.
    • <nav aria-label="Navigation principale"> → précise que ce menu est le menu principal du site.
    • <footer aria-label="Pied de page"> → décrit la fonction du pied de page.
  • aria-labelledby :
    Permet de lier un élément à un autre élément qui le décrit. L’élément lié fournit la description ou le titre qui sera lu par les lecteurs d’écran.
    Exemple :
    <figure role="img" aria-labelledby="figcaption-vv"> <img src="images/photo.jpg" alt="Photo de Vincent Vanneste"> <figcaption id="figcaption-vv">Vincent Vanneste</figcaption> </figure>
    Ici, l’image a pour description le contenu du <figcaption> identifié par figcaption-vv.
Résumé pratique
  • role → dit quoi est l’élément (en-tête, navigation, image, section, etc.).
  • aria-* → fournit des détails supplémentaires pour les lecteurs d’écran (nom, description, lien avec un autre élément).
En combinant ces deux attributs, ton site devient beaucoup plus accessible, surtout pour les personnes utilisant des technologies d’assistance.
Méthodeprojets.html
1
<!DOCTYPE html>
2
<html lang="fr">
3
4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Portfolio - Projets</title>
8
    <link rel="stylesheet" href="css/style.css">
9
    <link rel="stylesheet" href="css/projets.css">
10
</head>
11
12
<body>
13
14
    <header id="haut" role="banner" aria-label="En-tête du site">
15
        <figure role="img" aria-labelledby="figcaption-vv">
16
            <img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
17
            <figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
18
        </figure>
19
20
        <h1>Portfolio de Vincent Vanneste</h1>
21
        <nav role="navigation" aria-label="Navigation principale">
22
            <ul>
23
                <li><a href="index.html">Accueil</a></li>
24
                <li><a href="projets.html">Projets</a></li>
25
                <li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
26
            </ul>
27
        </nav>
28
29
    </header>
30
31
    <main role="main">
32
        <h1>Mes projets</h1>
33
34
        <section role="region" aria-labelledby="liste-projets">
35
            <h2 id="liste-projets">Liste des projets</h2>
36
37
            <div class="projets">
38
                <article role="article" aria-labelledby="titre-projet1">
39
                    <h3 id="titre-projet1"><a href="projet1.html">Projet 1</a></h3>
40
                    <figure role="img" aria-labelledby="fig-projet1">
41
                        <img src="images/vignettes/projet1.jpg" alt="Aperçu du Projet 1">
42
                        <figcaption id="fig-projet1">Aperçu du Projet 1</figcaption>
43
                    </figure>
44
                    <p>Un projet qui présente les bases du HTML et de la mise en page.</p>
45
                </article>
46
47
                <article role="article" aria-labelledby="titre-projet2">
48
                    <h3 id="titre-projet2"><a href="projet2.html">Projet 2</a></h3>
49
                    <figure role="img" aria-labelledby="fig-projet2">
50
                        <img src="images/vignettes/projet2.jpg" alt="Aperçu du Projet 2">
51
                        <figcaption id="fig-projet2">Aperçu du Projet 2</figcaption>
52
                    </figure>
53
                    <p>Un site en CSS avec une mise en forme responsive adaptée aux mobiles.</p>
54
                </article>
55
56
                <article role="article" aria-labelledby="titre-projet3">
57
                    <h3 id="titre-projet3"><a href="projet3.html">Projet 3</a></h3>
58
                    <figure role="img" aria-labelledby="fig-projet3">
59
                        <img src="images/vignettes/projet3.jpg" alt="Aperçu du Projet 3">
60
                        <figcaption id="fig-projet3">Aperçu du Projet 3</figcaption>
61
                    </figure>
62
                    <p>Un mini-site en JavaScript avec des interactions simples.</p>
63
                </article>
64
65
                <article role="article" aria-labelledby="titre-projet4">
66
                    <h3 id="titre-projet4"><a href="projet4.html">Projet 4</a></h3>
67
                    <figure role="img" aria-labelledby="fig-projet4">
68
                        <img src="images/vignettes/projet4.jpg" alt="Aperçu du Projet 4">
69
                        <figcaption id="fig-projet4">Aperçu du Projet 4</figcaption>
70
                    </figure>
71
                    <p>Une application web utilisant PHP et MySQL pour gérer des données.</p>
72
                </article>
73
74
                <article role="article" aria-labelledby="titre-projet5">
75
                    <h3 id="titre-projet5"><a href="projet5.html">Projet 5</a></h3>
76
                    <figure role="img" aria-labelledby="fig-projet5">
77
                        <img src="images/vignettes/projet5.jpg" alt="Aperçu du Projet 5">
78
                        <figcaption id="fig-projet5">Aperçu du Projet 5</figcaption>
79
                    </figure>
80
                    <p>Un projet complet combinant HTML, CSS, JS et base de données.</p>
81
                </article>
82
            </div>
83
        </section>
84
    </main>
85
86
87
    <footer role="contentinfo" aria-label="Pied de page">
88
        <p>&copy; 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
89
    </footer>
90
91
</body>
92
93
</html>
Intérêt principal de <figure>
  1. Sémantique claire :
    • <figure> signale que l’image a une valeur informative ou illustrative, et que son contenu est autonome par rapport au reste du texte.
    • Les moteurs de recherche et les technologies d’assistance comprennent mieux le rôle de l’image.
  2. Accessibilité améliorée :
    • Associé à <figcaption> ou aria-labelledby, un lecteur d’écran peut annoncer la légende de l’image, ce qui aide les utilisateurs malvoyants à comprendre le contenu visuel.
  3. Organisation du contenu :
    • <figure> permet de regrouper l’image et sa légende dans un seul bloc, pratique pour le style et la mise en page.
    • Le navigateur sait que l’image et sa légende sont liées et peuvent être déplacées ensemble avec CSS si nécessaire.
  4. Indépendance du contenu :
    • Le contenu d’un <figure> peut être référencé indépendamment dans le texte, par exemple avec <a href="#id-figure">…</a>.
    • Cela montre que l’image et sa légende ont un sens complet même hors du contexte immédiat.
3. Bonnes pratiques
  • Toujours fournir un alt descriptif sur l’image pour l’accessibilité.
  • Utiliser <figcaption> pour décrire l’image ou donner un titre explicatif.
  • Éviter <figure> pour des images purement décoratives (dans ce cas, <img> avec alt="" suffit).
Résumé :
Utiliser <figure> avec <figcaption> rend ton contenu plus structuré, sémantique et accessible, et permet aux utilisateurs et moteurs de recherche de comprendre le rôle et le sens de l’image.
Méthodecss/style.css
1
/* --- Styles généraux --- */
2
body {
3
    font-family: Arial, sans-serif;
4
    /* Définit la police principale du texte */
5
    color: #333;
6
    /* Couleur du texte (gris foncé) */
7
    background: #fff;
8
    /* Couleur d’arrière-plan blanche */
9
    margin: 0;
10
    /* Supprime la marge par défaut du navigateur autour du body */
11
}
12
13
/* --- Header --- */
14
header {
15
    text-align: center;
16
    /* Centre le contenu du header horizontalement */
17
    padding: 20px;
18
    /* Ajoute de l’espace intérieur (haut/bas/gauche/droite) */
19
    background: #f0f0f0;
20
    /* Couleur de fond gris clair */
21
    border-bottom: 2px solid #ddd;
22
    /* Ligne grise en bas du header */
23
}
24
25
/* Figure contenant la photo et le nom */
26
header figure {
27
    margin: 0;
28
    /* Supprime la marge par défaut de la balise figure */
29
    display: inline-block;
30
    /* Permet de garder la figure à côté d’autres éléments */
31
    text-align: center;
32
    /* Centre le contenu de la figure (image + légende) */
33
}
34
35
header figure img {
36
    width: 150px;
37
    /* Largeur fixe de l’image */
38
    height: auto;
39
    /* Hauteur automatique (conserve les proportions) */
40
    border-radius: 50%;
41
    /* Rend l’image parfaitement ronde */
42
    border: 3px solid #0066cc;
43
    /* Bordure bleue autour de la photo */
44
}
45
46
header figure figcaption {
47
    margin-top: 8px;
48
    /* Espace au-dessus de la légende */
49
    font-size: 1rem;
50
    /* Taille du texte normale */
51
    color: #333;
52
    /* Couleur du texte */
53
}
54
55
/* Titre principal du site */
56
header h1 {
57
    margin: 10px 0;
58
    /* Espace vertical autour du titre */
59
    font-size: 2rem;
60
    /* Taille du texte plus grande */
61
    color: #333;
62
    /* Couleur du texte */
63
}
64
65
/* Liste de navigation principale */
66
header nav ul {
67
    list-style: none;
68
    /* Supprime les puces de la liste */
69
    padding: 0;
70
    /* Supprime le retrait interne */
71
    margin: 10px 0 0;
72
    /* Marge au-dessus de la navigation */
73
}
74
75
header nav li {
76
    display: inline-block;
77
    /* Affiche les éléments de la liste sur une même ligne */
78
    margin: 0 15px;
79
    /* Espace horizontal entre les liens */
80
}
81
82
header nav a {
83
    text-decoration: none;
84
    /* Supprime le soulignement des liens */
85
    color: #0066cc;
86
    /* Couleur bleue pour les liens */
87
    font-weight: bold;
88
    /* Met le texte en gras */
89
}
90
91
header nav a:hover {
92
    text-decoration: underline;
93
    /* Soulignement au survol */
94
}
95
96
/* --- Main --- */
97
main>h1 {
98
    text-align: center;
99
    /* Centre le titre principal du main */
100
    color: #1e3a5f;
101
    /* Couleur bleu foncé */
102
    font-size: 2rem;
103
    /* Taille du texte plus grande */
104
    margin: 20px 0;
105
    /* Espace vertical autour du titre */
106
}
107
108
main>section {
109
    max-width: 900px;
110
    /* Largeur maximale du contenu */
111
    margin: 0 auto 40px;
112
    /* Centre horizontalement + marge basse */
113
    padding: 0 15px;
114
    /* Espace intérieur à gauche et à droite */
115
}
116
117
main>section h2 {
118
    color: #1e3a5f;
119
    /* Couleur du titre (bleu foncé) */
120
    font-size: 1.5em;
121
    /* Taille du texte 1,5 fois la taille normale */
122
}
123
124
/* --- Footer --- */
125
footer {
126
    background: #1e3a5f;
127
    /* Fond bleu foncé */
128
    color: #fff;
129
    /* Texte blanc */
130
    text-align: center;
131
    /* Centre le texte horizontalement */
132
    padding: 20px;
133
    /* Espace intérieur autour du contenu */
134
}
135
136
footer a {
137
    color: #ff8c42;
138
    /* Liens orange */
139
    text-decoration: none;
140
    /* Pas de soulignement */
141
}
142
143
footer a:hover {
144
    color: #ffcc00;
145
    /* Jaune vif au survol */
146
}
Méthodecss/accueil.css
1
/* --- Navigation interne dans <main> --- */
2
main nav ul {
3
    list-style: none;
4
    /* Supprime les puces */
5
    padding: 0;
6
    /* Supprime le retrait interne */
7
    margin: 0 0 20px;
8
    /* Espace en dessous de la liste */
9
    text-align: center;
10
    /* Centre les éléments horizontalement */
11
}
12
13
main nav li {
14
    display: inline-block;
15
    /* Place les éléments sur une seule ligne */
16
    margin: 0 10px;
17
    /* Espace horizontal entre les liens */
18
}
19
20
main nav a {
21
    text-decoration: none;
22
    /* Supprime le soulignement */
23
    color: #1e90ff;
24
    /* Couleur bleue claire */
25
    font-weight: bold;
26
    /* Met le texte en gras */
27
}
28
29
main nav a:hover {
30
    color: #0056b3;
31
    /* Change la couleur au survol (bleu plus foncé) */
32
}
33
34
/* --- Sections principales dans <main> --- */
35
36
main>section p {
37
    color: #333;
38
    /* Couleur du texte */
39
    font-family: Georgia, serif;
40
    /* Police à empattements (meilleure lisibilité pour le corps du texte) */
41
}
42
43
main>section a {
44
    color: #1e90ff;
45
    /* Couleur des liens */
46
    text-decoration: underline;
47
    /* Soulignement visible par défaut */
48
}
49
50
main>section a:hover {
51
    color: #0056b3;
52
    /* Change la couleur au survol */
53
}
Méthodecss/projets.css
1
/* --- Projets --- */
2
.projets {
3
    text-align: center;
4
    /* centre les articles à l'intérieur du conteneur */
5
}
6
7
.projets article {
8
    display: inline-block;
9
    /* affiche les articles les uns à côté des autres (comme du texte) */
10
    vertical-align: top;
11
    /* aligne le haut des articles entre eux */
12
    width: 220px;
13
    /* largeur fixe pour chaque carte */
14
    margin: 10px;
15
    /* espace extérieur autour de chaque carte */
16
    padding: 10px;
17
    /* espace intérieur entre le bord et le contenu */
18
    background: #f9f9f9;
19
    /* couleur de fond gris très clair */
20
    border: 1px solid #ddd;
21
    /* bordure fine et grise autour des cartes */
22
    border-radius: 8px;
23
    /* arrondit légèrement les coins de la carte */
24
    text-align: left;
25
    /* le texte à l’intérieur est aligné à gauche */
26
}
27
28
.projets h3 {
29
    margin-top: 0;
30
    /* supprime l’espace au-dessus du titre */
31
    font-size: 1.1rem;
32
    /* définit la taille du titre en unités relatives */
33
}
34
35
.projets a {
36
    text-decoration: none;
37
    /* enlève le soulignement par défaut des liens */
38
    color: #0066cc;
39
    /* applique une couleur bleue au lien */
40
    font-weight: bold;
41
    /* met le lien en gras */
42
}
43
44
.projets a:hover {
45
    text-decoration: underline;
46
    /* remet le soulignement quand on survole le lien */
47
}
48
49
.projets p {
50
    font-size: 0.9rem;
51
    /* définit une taille de texte légèrement plus petite */
52
    color: #333;
53
    /* applique une couleur gris foncé au texte */
54
}
55
56
.projets figure {
57
    margin: 0;
58
    /* supprime les marges par défaut autour de la figure */
59
    padding: 0;
60
    /* supprime le padding par défaut */
61
}
62
63
.projets figure img {
64
    width: 100%;
65
    /* l'image prend toute la largeur de la carte */
66
    height: auto;
67
    /* la hauteur s'ajuste automatiquement pour garder les proportions */
68
    border-radius: 4px;
69
    /* arrondit légèrement les coins de l'image */
70
    border: 1px solid #ccc;
71
    /* ajoute une bordure grise claire autour de l'image */
72
73
    margin-bottom: 8px;
74
    /* espace entre l'image et la légende */
75
}
76
77
.projets figure figcaption {
78
    font-size: 0.85rem;
79
    /* taille de la police de la légende */
80
    color: #666;
81
    /* couleur gris moyen pour la légende */
82
    text-align: center;
83
    /* centre le texte de la légende */
84
}
Exemple

  See the Pen 
  Séance 5-index by Vincent-Vanneste (@vincent-vanneste)
  on CodePen.




Séance 5- Accueil
Exemple

  See the Pen 
  Séance 5-projets by Vincent-Vanneste (@vincent-vanneste)
  on CodePen.




Séance 5- Projets