Séance 4
Objectifs
Utiliser les balises HTML de liste et tableau.
Utiliser les sélecteurs avancés.
Être capable de structurer une navigation et une liste de projets.
Méthode : Arborescence
Arborescence
En plus du fichier style.css commun, des feuilles de style spécifiques ont été ajoutées pour chaque page.
Méthode : index.html
1
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">
15
<a href="images/photo.jpg">Lien vers ma photo</a>
16
<h1>Portfolio de Vincent Vanneste</h1>
17
<nav>
18
<ul>
19
<li><a href="index.html">Accueil</a></li>
20
<li><a href="projets.html">Projets</a></li>
21
<li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
22
</ul>
23
</nav>
24
25
</header>
26
27
<main>
28
<nav>
29
<ul>
30
<li><a href="#about">À propos</a></li>
31
<li><a href="#competences">Compétences</a></li>
32
<li><a href="#experiences">Expériences</a></li>
33
<li><a href="#formations">Formations</a></li>
34
</ul>
35
</nav>
36
37
<!-- À propos -->38
<section id="about">
39
<h2>À propos</h2>
40
<p>Je suis directeur des études du DEUST WMI de Calais et j'enseigne les fondamentaux du développement web
41
(HTML, CSS, JavaScript, PHP). Passionné par la transmission des connaissances, j'accompagne mes
42
étudiants dans l'acquisition des compétences nécessaires pour réussir dans le secteur du numérique.</p>
43
<address>
44
<dl>
45
<dt>Localisation :</dt>
46
<dd>Calais, France</dd>
47
<dt>Site :</dt>
48
<dd><a href="https://vincent-vanneste.fr/" target="_blank">vincent-vanneste.fr</a></dd>
49
<dt>Email :</dt>
50
<dd><a href="mailto:vincent.vanneste@univ-littoral.fr">vincent.vanneste@univ-littoral.fr</a></dd>
51
</dl>
52
</address>
53
</section>
54
55
56
57
<!-- Compétences -->58
<section id="competences">
59
<h2>Compétences</h2>
60
<ul>
61
<li>HTML</li>
62
<li>CSS</li>
63
<li>Responsive</li>
64
<li>Accessibilité</li>
65
<li>JavaScript</li>
66
<li>PHP • Laravel 11</li>
67
<li>MySQL</li>
68
<li>Git & GitHub</li>
69
</ul>
70
</section>
71
72
73
74
<!-- Expériences -->75
<section id="experiences">
76
<h2>Expériences récentes</h2>
77
<ul>
78
<li>
79
<strong>Enseignant – Licence 1 Informatique</strong><br>
80
<time datetime="2025">2025</time> •
81
<address>
82
<a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a>
83
</address><br>
84
Introduction à HTML, CSS, JS
85
</li>
86
<li>
87
<strong>Directeur des études – DEUST WMI</strong><br>
88
Depuis <time datetime="2024">2024</time> •
89
<address>
90
<a href="https://www.univ-littoral.fr/" target="_blank">FCU ULCO</a>
91
</address>
92
</li>
93
</ul>
94
</section>
95
96
<!-- Formations -->97
<section id="formations">
98
<h2>Formations</h2>
99
<ul>
100
<li>
101
<strong>Doctorat productique, automatique et informatique industrielle</strong><br>
102
<time datetime="2000">2000</time> •
103
<address>
104
<a href="https://www.univ-lille.fr/" target="_blank">Université de Lille</a>
105
</address>
106
</li>
107
<li>
108
<strong>CAPET Technologie</strong><br>
109
<time datetime="1998">1998</time> •
110
<address>
111
<a href="https://www.iufm-douai.fr/" target="_blank">IUFM Douais</a>
112
</address>
113
</li>
114
</ul>
115
</section>
116
117
</main>
118
119
<footer>
120
121
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés. | <a href="#haut">Haut de page</a></p>
122
</footer>
123
124
</body>
125
126
</html>
<ul>+<li>→ listes non ordonnées (menus, inventaires).<ol>+<li>→ listes ordonnées (numérotées, étapes).<dl>+<dt>+<dd>→ listes de définitions (terme : valeur).Dans ce portfolio, on utilise :
une liste pour le menu de navigation,
une liste pour les compétences,
une liste pour les expériences et formations,
et une liste de définitions pour des infos contact.
Méthode : projets.html
1
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">
15
<a href="images/photo.jpg">Lien vers ma photo</a>
16
<h1>Portfolio de Vincent Vanneste</h1>
17
<nav>
18
<ul>
19
<li><a href="index.html">Accueil</a></li>
20
<li><a href="projets.html">Projets</a></li>
21
<li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
22
</ul>
23
</nav>
24
<hr>
25
</header>
26
27
<main>
28
<h1>Mes projets</h1>
29
30
<section>
31
<h2 id="liste-projets">Liste des projets</h2>
32
33
<div class="projets">
34
<article>
35
<h3><a href="projet1.html">Projet 1</a></h3>
36
<p>Un projet qui présente les bases du HTML et de la mise en page.</p>
37
</article>
38
39
<article>
40
<h3><a href="projet2.html">Projet 2</a></h3>
41
<p>Un site en CSS avec une mise en forme responsive adaptée aux mobiles.</p>
42
</article>
43
44
<article>
45
<h3><a href="projet3.html">Projet 3</a></h3>
46
<p>Un mini-site en JavaScript avec des interactions simples.</p>
47
</article>
48
49
<article>
50
<h3><a href="projet4.html">Projet 4</a></h3>
51
<p>Une application web utilisant PHP et MySQL pour gérer des données.</p>
52
</article>
53
54
<article>
55
<h3><a href="projet5.html">Projet 5</a></h3>
56
<p>Un projet complet combinant HTML, CSS, JS et base de données.</p>
57
</article>
58
</div>
59
</section>
60
</main>
61
62
63
<footer>
64
<hr>
65
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés. | <a href="#haut">Haut de page</a></p>
66
</footer>
67
68
</body>
69
70
</html>
Méthode : css/style.css
1
/* ==========================================================================2
CSS Général3
========================================================================== */4
5
/* --- Corps de la page --- */6
body {7
/***************/8
/* Typographie */9
/***************/10
font-family: Arial, sans-serif;
11
/* police principale du site */12
color: #333333;
13
/* couleur du texte principal (gris foncé) */14
15
/****************************/16
/* Couleurs & Arrière-plans */17
/****************************/18
background-color: #ffffff;
19
/* couleur de fond du site (blanc) */20
}
21
22
/* ==========================================================================23
En-tête (Header)24
========================================================================== */25
26
/* --- Conteneur principal du header --- */27
header {28
/***************/29
/* Typographie */30
/***************/31
text-align: center;
32
/* centre tout le contenu du header */33
34
/**********************/35
/* Boîte & Espacement */36
/**********************/37
padding: 20px;
38
/* ajoute de l’espace intérieur */39
40
/****************************/41
/* Couleurs & Arrière-plans */42
/****************************/43
background: #f0f0f0;
44
/* fond gris clair pour distinguer le header */45
46
/************/47
/* Bordures */48
/************/49
border-bottom: 2px solid #ddd;
50
/* ajoute une ligne en bas du header */51
}
52
53
/* --- Lien spécifique (photo) dans le header --- */54
header a[href*="photo"] {
55
/**********************/56
/* Boîte & Espacement */57
/**********************/58
display: block;
59
/* force le lien à prendre toute une ligne */60
margin-bottom: 10px;
61
/* espace sous le lien */62
63
/***************/64
/* Typographie */65
/***************/66
color: #0066cc;
67
/* couleur bleue pour le lien */68
text-decoration: none;
69
/* supprime le soulignement */70
font-style: italic;
71
/* style italique pour différencier ce lien */72
}
73
74
header a[href*="photo"]:hover {
75
/***************/76
/* Typographie */77
/***************/78
text-decoration: underline;
79
/* souligne quand on passe la souris */80
}
81
82
/* --- Titre principal (h1) du header --- */83
header h1 {
84
/**********************/85
/* Boîte & Espacement */86
/**********************/87
margin: 10px 0;
88
/* espace au-dessus et en dessous du titre */89
90
/***************/91
/* Typographie */92
/***************/93
font-size: 2rem;
94
/* grande taille de police */95
color: #333;
96
/* texte gris foncé */97
}
98
99
/* --- Conteneur navigation (nav) du header --- */100
header nav {
101
/**********************/102
/* Boîte & Espacement */103
/**********************/104
margin-top: 10px;
105
/* espace au-dessus du menu */106
}
107
108
/* --- Liste (ul) de navigation du header --- */109
header nav ul {
110
/**********************/111
/* Boîte & Espacement */112
/**********************/113
padding: 0;
114
/* supprime le retrait intérieur */115
margin: 0;
116
/* supprime le retrait extérieur */117
118
/******************/119
/* Style de liste */120
/******************/121
list-style: none;
122
/* supprime les puces de la liste */123
}
124
125
/* --- Éléments (li) de navigation du header --- */126
header nav li {
127
/**********************/128
/* Boîte & Espacement */129
/**********************/130
display: inline-block;
131
/* affiche les éléments du menu côte à côte */132
margin: 0 15px;
133
/* espace horizontal entre les liens */134
}
135
136
/* --- Liens (a) de navigation du header --- */137
header nav a {
138
/***************/139
/* Typographie */140
/***************/141
text-decoration: none;
142
/* supprime le soulignement */143
color: #0066cc;
144
/* bleu pour les liens du menu */145
font-weight: bold;
146
/* met les liens en gras */147
}
148
149
header nav a:hover {
150
/***************/151
/* Typographie */152
/***************/153
text-decoration: underline;
154
/* souligne au survol */155
}
156
157
/* --- Ligne de séparation (hr) du header --- */158
header hr {
159
/**********************/160
/* Boîte & Espacement */161
/**********************/162
margin-top: 20px;
163
/* espace au-dessus de la ligne */164
165
/************/166
/* Bordures */167
/************/168
border: 0;
169
/* supprime le style par défaut */170
border-top: 1px solid #ccc;
171
/* ajoute une ligne grise */172
}
173
174
/* ==========================================================================175
Contenu principal (Main & Section)176
========================================================================== */177
178
/* --- Survol des liens de navigation interne (main) --- */179
/* Note: Le style de base 'main nav a' n'est pas défini dans ce fichier */180
main nav a:hover {
181
/***************/182
/* Typographie */183
/***************/184
color: #0056b3;
185
/* couleur des liens internes au survol (bleu foncé) */186
}
187
188
/* --- Titres (h2) de section --- */189
section h2 {
190
/***************/191
/* Typographie */192
/***************/193
color: #1e3a5f;
194
/* couleur des titres principaux (bleu foncé) */195
font-size: 1.5em;
196
/* taille du titre de section */197
}
198
199
/* --- Sous-titres (h3) de section --- */200
section h3 {
201
/***************/202
/* Typographie */203
/***************/204
color: #004080;
205
/* couleur des sous-titres (bleu plus profond) */206
font-size: 1.2em;
207
/* taille des sous-titres */208
}
209
210
/* --- Paragraphes (p) de section --- */211
section p {
212
/***************/213
/* Typographie */214
/***************/215
color: #333333;
216
/* couleur du texte (gris foncé) */217
font-family: Georgia, serif;
218
/* police plus classique pour le texte */219
}
220
221
/* --- Liens (a) de section --- */222
section a {
223
/***************/224
/* Typographie */225
/***************/226
color: #1e90ff;
227
/* couleur des liens (bleu clair) */228
text-decoration: underline;
229
/* ajout d’un soulignement */230
}
231
232
section a:hover {
233
/***************/234
/* Typographie */235
/***************/236
color: #0056b3;
237
/* couleur des liens au survol (bleu foncé) */238
}
239
240
/* ==========================================================================241
Pied de page (Footer)242
========================================================================== */243
footer {244
/****************************/245
/* Couleurs & Arrière-plans */246
/****************************/247
background-color: #1e3a5f;
248
/* fond bleu foncé pour le footer */249
250
/***************/251
/* Typographie */252
/***************/253
color: #ffffff;
254
/* texte blanc dans le footer */255
}
256
257
/* --- Liens (a) du footer --- */258
footer a {
259
/***************/260
/* Typographie */261
/***************/262
color: #ff8c42;
263
/* liens du footer en orange doux */264
text-decoration: none;
265
/* suppression du soulignement */266
}
267
268
footer a:hover {
269
/***************/270
/* Typographie */271
/***************/272
color: #ffcc00;
273
/* couleur des liens au survol (jaune vif) */274
}
Méthode : css/accueil.css
1
/* ==========================================================================2
Contenu principal (Main)3
========================================================================== */4
main {5
/**********************/6
/* Boîte & Espacement */7
/**********************/8
max-width: 900px;
9
/* limite la largeur pour améliorer la lisibilité */10
margin: 0 auto;
11
/* centre le main sur la page */12
padding: 20px;
13
/* espace intérieur autour du contenu */14
15
/****************************/16
/* Couleurs & Arrière-plans */17
/****************************/18
background: #ffffff;
19
/* fond blanc (utile si la page a une couleur différente) */20
21
/***************/22
/* Typographie */23
/***************/24
color: #333;
25
/* couleur de texte gris foncé, plus doux que le noir pur */26
}
27
28
/* ==========================================================================29
Navigation Interne (dans Main)30
========================================================================== */31
32
/* --- Conteneur de la navigation (main nav) --- */33
main nav {
34
/***************/35
/* Typographie */36
/***************/37
text-align: center;
38
/* centre le menu de navigation */39
40
/**********************/41
/* Boîte & Espacement */42
/**********************/43
margin-bottom: 20px;
44
/* espace sous la barre de navigation */45
}
46
47
/* --- Liste de la navigation (ul) --- */48
main nav ul {
49
/**********************/50
/* Boîte & Espacement */51
/**********************/52
padding: 0;
53
/* supprime le retrait intérieur */54
margin: 0;
55
/* supprime le retrait extérieur */56
57
/******************/58
/* Style de liste */59
/******************/60
list-style: none;
61
/* supprime les puces de la liste */62
}
63
64
/* --- Éléments de la navigation (li) --- */65
main nav li {
66
/**********************/67
/* Boîte & Espacement */68
/**********************/69
display: inline-block;
70
/* affiche les éléments de menu côte à côte */71
margin: 0 10px;
72
/* espace horizontal entre les liens */73
}
74
75
/* --- Liens de la navigation (a) --- */76
main nav a {
77
/***************/78
/* Typographie */79
/***************/80
text-decoration: none;
81
/* supprime le soulignement par défaut */82
color: #0066cc;
83
/* couleur bleue pour les liens */84
font-weight: bold;
85
/* met les liens du menu en gras */86
}
87
88
main nav a:hover {
89
/***************/90
/* Typographie */91
/***************/92
text-decoration: underline;
93
/* souligne au survol pour l’accessibilité */94
}
95
96
/* ==========================================================================97
Contenu Typographique (Titres, Textes, Listes)98
========================================================================== */99
100
/* --- Titres des sections (main h2) --- */101
main h2 {
102
/***************/103
/* Typographie */104
/***************/105
font-size: 1.5rem;
106
/* taille de police intermédiaire */107
108
/**********************/109
/* Boîte & Espacement */110
/**********************/111
margin-top: 30px;
112
/* espace au-dessus des titres */113
margin-bottom: 10px;
114
/* espace sous le titre */115
padding-bottom: 5px;
116
/* espace entre le texte et la ligne */117
118
/************/119
/* Bordures */120
/************/121
border-bottom: 2px solid #ddd;
122
/* ligne grise sous le titre */123
}
124
125
/* --- Paragraphes (main p) --- */126
main p {
127
/***************/128
/* Typographie */129
/***************/130
line-height: 1.5;
131
/* augmente l’espacement entre les lignes */132
133
/**********************/134
/* Boîte & Espacement */135
/**********************/136
margin-bottom: 15px;
137
/* espace sous chaque paragraphe */138
}
139
140
/* --- Listes (ul) dans les sections --- */141
main section ul {
142
/**********************/143
/* Boîte & Espacement */144
/**********************/145
padding-left: 20px;
146
/* ajoute un retrait pour les listes */147
margin-bottom: 20px;
148
/* espace sous la liste */149
}
150
151
/* --- Éléments de liste (li) --- */152
main section li {
153
/**********************/154
/* Boîte & Espacement */155
/**********************/156
margin-bottom: 10px;
157
/* espace entre les éléments de liste */158
}
159
160
/* ==========================================================================161
Éléments Spécifiques (Adresse, Liens, Séparateurs)162
========================================================================== */163
164
/* --- Balise <address> --- */165
address {166
/***************/167
/* Typographie */168
/***************/169
font-style: normal;
170
/* supprime l’italique par défaut */171
172
/**********************/173
/* Boîte & Espacement */174
/**********************/175
display: inline;
176
/* reste sur la même ligne que le texte */177
}
178
179
/* --- Liens dans le contenu (main section a) --- */180
main section a {
181
/***************/182
/* Typographie */183
/***************/184
color: #0066cc;
185
/* même bleu que les liens du menu */186
text-decoration: none;
187
/* pas de soulignement par défaut */188
}
189
190
main section a:hover {
191
/***************/192
/* Typographie */193
/***************/194
text-decoration: underline;
195
/* souligne au survol */196
}
197
198
/* --- Séparateurs horizontaux (hr) --- */199
hr {200
/************/201
/* Bordures */202
/************/203
border: 0;
204
/* supprime la bordure par défaut */205
border-top: 1px solid #ddd;
206
/* ajoute une ligne fine grise */207
208
/**********************/209
/* Boîte & Espacement */210
/**********************/211
margin: 30px 0;
212
/* espace autour de la ligne */213
}
Méthode : css/projets.css
1
/* ==========================================================================2
Section des Projets (Conteneur)3
========================================================================== */4
.projets {5
/***************/6
/* Typographie */7
/***************/8
text-align: center;
9
/* centre les articles (qui sont inline-block) à l'intérieur */10
}
11
12
/* ==========================================================================13
Cartes de Projet (Article)14
========================================================================== */15
.projets article {
16
/**********************/17
/* Boîte & Espacement */18
/**********************/19
display: inline-block;
20
/* affiche les articles les uns à côté des autres (comme du texte) */21
vertical-align: top;
22
/* aligne le haut des articles entre eux */23
width: 220px;
24
/* largeur fixe pour chaque carte */25
margin: 10px;
26
/* espace extérieur autour de chaque carte */27
padding: 10px;
28
/* espace intérieur entre le bord et le contenu */29
30
/****************************/31
/* Couleurs & Arrière-plans */32
/****************************/33
background: #f9f9f9;
34
/* couleur de fond gris très clair */35
36
/************/37
/* Bordures */38
/************/39
border: 1px solid #ddd;
40
/* bordure fine et grise autour des cartes */41
border-radius: 8px;
42
/* arrondit légèrement les coins de la carte */43
44
/***************/45
/* Typographie */46
/***************/47
text-align: left;
48
/* le texte à l’intérieur est aligné à gauche */49
}
50
51
/* ==========================================================================52
Contenu des Cartes (Typographie & Liens)53
========================================================================== */54
55
/* --- Titres des projets (h3) --- */56
.projets h3 {
57
/**********************/58
/* Boîte & Espacement */59
/**********************/60
margin-top: 0;
61
/* supprime l’espace au-dessus du titre */62
63
/***************/64
/* Typographie */65
/***************/66
font-size: 1.1rem;
67
/* définit la taille du titre en unités relatives */68
}
69
70
/* --- Paragraphes des projets --- */71
.projets p {
72
/***************/73
/* Typographie */74
/***************/75
font-size: 0.9rem;
76
/* définit une taille de texte légèrement plus petite */77
color: #333;
78
/* applique une couleur gris foncé au texte */79
}
80
81
/* --- Liens des projets --- */82
.projets a {
83
/***************/84
/* Typographie */85
/***************/86
text-decoration: none;
87
/* enlève le soulignement par défaut des liens */88
color: #0066cc;
89
/* applique une couleur bleue au lien */90
font-weight: bold;
91
/* met le lien en gras */92
}
93
94
/* --- Survol des liens --- */95
.projets a:hover {
96
/***************/97
/* Typographie */98
/***************/99
text-decoration: underline;
100
/* remet le soulignement quand on survole le lien */101
}
Exemple :
See the Pen Séance 4-accueil by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 4 - Accueil
Exemple :
See the Pen Séance 4-projets by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 4 - projets