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
<hr>
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
<hr>
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
<hr>
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
<time datetime="2024-2025">2024 → 2025</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
<hr>
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
/* Corps de la page */2
body {3
font-family: Arial, sans-serif;
4
/* police principale du site */5
color: #333333;
6
/* couleur du texte principal (gris foncé) */7
background-color: #ffffff;
8
/* couleur de fond du site (blanc) */9
}
10
11
/* Conteneur principal du header */12
header {13
text-align: center;
14
/* centre tout le contenu du header */15
padding: 20px;
16
/* ajoute de l’espace intérieur */17
background: #f0f0f0;
18
/* fond gris clair pour distinguer le header */19
border-bottom: 2px solid #ddd;
20
/* ajoute une ligne en bas du header */21
}
22
23
/* Lien vers la photo */24
header a[href*="photo"] {
25
display: block;
26
/* force le lien à prendre toute une ligne */27
margin-bottom: 10px;
28
/* espace sous le lien */29
color: #0066cc;
30
/* couleur bleue pour le lien */31
text-decoration: none;
32
/* supprime le soulignement */33
font-style: italic;
34
/* style italique pour différencier ce lien */35
}
36
37
header a[href*="photo"]:hover {
38
text-decoration: underline;
39
/* souligne quand on passe la souris */40
}
41
42
/* Titre principal */43
header h1 {
44
margin: 10px 0;
45
/* espace au-dessus et en dessous du titre */46
font-size: 2rem;
47
/* grande taille de police */48
color: #333;
49
/* texte gris foncé */50
}
51
52
/* Navigation */53
header nav {
54
margin-top: 10px;
55
/* espace au-dessus du menu */56
}
57
58
header nav ul {
59
list-style: none;
60
/* supprime les puces de la liste */61
padding: 0;
62
/* supprime le retrait intérieur */63
margin: 0;
64
/* supprime le retrait extérieur */65
}
66
67
header nav li {
68
display: inline-block;
69
/* affiche les éléments du menu côte à côte */70
margin: 0 15px;
71
/* espace horizontal entre les liens */72
}
73
74
header nav a {
75
text-decoration: none;
76
/* supprime le soulignement */77
color: #0066cc;
78
/* bleu pour les liens du menu */79
font-weight: bold;
80
/* met les liens en gras */81
}
82
83
header nav a:hover {
84
text-decoration: underline;
85
/* souligne au survol */86
}
87
88
/* Ligne de séparation */89
header hr {
90
border: 0;
91
/* supprime le style par défaut */92
border-top: 1px solid #ccc;
93
/* ajoute une ligne grise */94
margin-top: 20px;
95
/* espace au-dessus de la ligne */96
}
97
98
main nav a:hover {
99
color: #0056b3;
100
/* couleur des liens internes au survol (bleu foncé) */101
}
102
103
/* Titres des sections */104
section h2 {
105
color: #1e3a5f;
106
/* couleur des titres principaux des sections (bleu foncé) */107
font-size: 1.5em;
108
/* taille du titre de section */109
}
110
111
section h3 {
112
color: #004080;
113
/* couleur des sous-titres (bleu plus profond) */114
font-size: 1.2em;
115
/* taille des sous-titres */116
}
117
118
/* Paragraphes dans les sections */119
section p {
120
color: #333333;
121
/* couleur du texte des paragraphes (gris foncé) */122
font-family: Georgia, serif;
123
/* police plus classique pour le texte des sections */124
}
125
126
/* Liens dans les sections */127
section a {
128
color: #1e90ff;
129
/* couleur des liens dans le contenu (bleu clair) */130
text-decoration: underline;
131
/* ajout d’un soulignement pour distinguer les liens */132
}
133
134
section a:hover {
135
color: #0056b3;
136
/* couleur des liens au survol (bleu foncé) pour contraste */137
}
138
139
/* Footer */140
footer {141
background-color: #1e3a5f;
142
/* fond bleu foncé pour le footer */143
color: #ffffff;
144
/* texte blanc dans le footer */145
}
146
147
footer a {
148
color: #ff8c42;
149
/* liens du footer en orange doux */150
text-decoration: none;
151
/* suppression du soulignement des liens */152
}
153
154
footer a:hover {
155
color: #ffcc00;
156
/* couleur des liens au survol (jaune vif) */157
}
Méthode : css/accueil.css
1
/* Mise en forme générale du contenu principal */2
main {3
max-width: 900px;
4
/* limite la largeur pour améliorer la lisibilité */5
margin: 0 auto;
6
/* centre le main sur la page */7
padding: 20px;
8
/* espace intérieur autour du contenu */9
background: #ffffff;
10
/* fond blanc (utile si la page a une couleur différente) */11
color: #333;
12
/* couleur de texte gris foncé, plus doux que le noir pur */13
}
14
15
/* Navigation interne */16
main nav {
17
text-align: center;
18
/* centre le menu de navigation */19
margin-bottom: 20px;
20
/* espace sous la barre de navigation */21
}
22
23
main nav ul {
24
list-style: none;
25
/* supprime les puces de la liste */26
padding: 0;
27
/* supprime le retrait intérieur */28
margin: 0;
29
/* supprime le retrait extérieur */30
}
31
32
main nav li {
33
display: inline-block;
34
/* affiche les éléments de menu côte à côte */35
margin: 0 10px;
36
/* espace horizontal entre les liens */37
}
38
39
main nav a {
40
text-decoration: none;
41
/* supprime le soulignement par défaut */42
color: #0066cc;
43
/* couleur bleue pour les liens */44
font-weight: bold;
45
/* met les liens du menu en gras */46
}
47
48
main nav a:hover {
49
text-decoration: underline;
50
/* souligne au survol pour l’accessibilité */51
}
52
53
/* Titres des sections */54
main h2 {
55
font-size: 1.5rem;
56
/* taille de police intermédiaire */57
margin-top: 30px;
58
/* espace au-dessus des titres */59
margin-bottom: 10px;
60
/* espace sous le titre */61
border-bottom: 2px solid #ddd;
62
/* ligne grise sous le titre */63
padding-bottom: 5px;
64
/* espace entre le texte et la ligne */65
}
66
67
/* Paragraphes */68
main p {
69
line-height: 1.5;
70
/* augmente l’espacement entre les lignes */71
margin-bottom: 15px;
72
/* espace sous chaque paragraphe */73
}
74
75
/* Listes dans les sections */76
main section ul {
77
padding-left: 20px;
78
/* ajoute un retrait pour les listes */79
margin-bottom: 20px;
80
/* espace sous la liste */81
}
82
83
main section li {
84
margin-bottom: 10px;
85
/* espace entre les éléments de liste */86
}
87
88
/* Balises <address> utilisées pour lieux/sites */89
address {90
font-style: normal;
91
/* supprime l’italique par défaut */92
display: inline;
93
/* reste sur la même ligne que le texte */94
}
95
96
/* Liens dans le contenu (hors navigation) */97
main section a {
98
color: #0066cc;
99
/* même bleu que les liens du menu */100
text-decoration: none;
101
/* pas de soulignement par défaut */102
}
103
104
main section a:hover {
105
text-decoration: underline;
106
/* souligne au survol */107
}
108
109
/* Séparateurs horizontaux */110
hr {111
border: 0;
112
/* supprime la bordure par défaut */113
border-top: 1px solid #ddd;
114
/* ajoute une ligne fine grise */115
margin: 30px 0;
116
/* espace autour de la ligne */117
}
Méthode : css/projets.css
1
.projets {2
text-align: center;
3
/* centre les articles à l'intérieur du conteneur */4
}
5
6
.projets article {
7
display: inline-block;
8
/* affiche les articles les uns à côté des autres (comme du texte) */9
vertical-align: top;
10
/* aligne le haut des articles entre eux */11
width: 220px;
12
/* largeur fixe pour chaque carte */13
margin: 10px;
14
/* espace extérieur autour de chaque carte */15
padding: 10px;
16
/* espace intérieur entre le bord et le contenu */17
background: #f9f9f9;
18
/* couleur de fond gris très clair */19
border: 1px solid #ddd;
20
/* bordure fine et grise autour des cartes */21
border-radius: 8px;
22
/* arrondit légèrement les coins de la carte */23
text-align: left;
24
/* le texte à l’intérieur est aligné à gauche */25
}
26
27
.projets h3 {
28
margin-top: 0;
29
/* supprime l’espace au-dessus du titre */30
font-size: 1.1rem;
31
/* définit la taille du titre en unités relatives */32
}
33
34
.projets a {
35
text-decoration: none;
36
/* enlève le soulignement par défaut des liens */37
color: #0066cc;
38
/* applique une couleur bleue au lien */39
font-weight: bold;
40
/* met le lien en gras */41
}
42
43
.projets a:hover {
44
text-decoration: underline;
45
/* remet le soulignement quand on survole le lien */46
}
47
48
.projets p {
49
font-size: 0.9rem;
50
/* définit une taille de texte légèrement plus petite */51
color: #333;
52
/* applique une couleur gris foncé au texte */53
}
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