Séance 3

Objectifs

  • Comprendre la séparation contenu (HTML) / présentation (CSS).

  • Être capable de styliser la page d’accueil avec un fichier CSS.

MéthodeArborescence

Arborescence

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
</head>
10
11
<body>
12
13
    <header id="haut">
14
        <a href="images/photo.jpg">Lien vers ma photo</a>
15
        <h1>Portfolio de Vincent Vanneste</h1>
16
        <nav>
17
            <a href="index.html">Accueil</a> |
18
19
            <a href="projets.html">Projets</a> |
20
            <a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a>
21
        </nav>
22
        <hr>
23
    </header>
24
25
    <main>
26
        <nav>
27
            <a href="#about">À propos</a> |
28
            <a href="#competences">Compétences</a> |
29
            <a href="#experiences">Expériences</a> |
30
            <a href="#formations">Formations</a>
31
32
        </nav>
33
34
        <section id="about">
35
            <h2>À propos</h2>
36
            <p>Je suis directeur des études du DEUST WMI de Calais et j'enseigne les fondamentaux du développement web
37
                (HTML, CSS, JavaScript, PHP). Passionné par la transmission des connaissances, j'accompagne mes
38
                étudiants dans l'acquisition des compétences nécessaires pour réussir dans le secteur du numérique.</p>
39
            <p><strong>Localisation :</strong> Calais, France</p>
40
            <p><strong>Site :</strong> <a href="https://vincent-vanneste.fr/" target="_blank">vincent-vanneste.fr</a>
41
            </p>
42
            <p><strong>Email :</strong> <a
43
                    href="mailto:vincent.vanneste@univ-littoral.fr">vincent.vanneste@univ-littoral.fr</a></p>
44
        </section>
45
46
        <hr>
47
48
        <section id="competences">
49
            <h2>Compétences</h2>
50
            <p><strong>HTML</strong><br>
51
                <strong>CSS</strong><br>
52
                Responsive<br>
53
                Accessibilité<br>
54
                <strong>JavaScript</strong><br>
55
                <strong>PHP</strong> <br>
56
                Laravel 11<br>
57
                MySQL<br>
58
                <strong>Git & GitHub</strong>
59
            </p>
60
        </section>
61
62
        <hr>
63
64
        <section id="experiences">
65
            <h2>Expériences récente</h2>
66
            <h3>Enseignant – Licence 1 Informatique</h3>
67
            <p>ULCO • 2025 → 2025<br>
68
                Introduction à HTML, CSS, JS.</p>
69
70
            <h3>Directeur des études – DEUST WMI</h3>
71
            <p>FCU ULCO • 2024 → 2025</p>
72
        </section>
73
74
        <hr>
75
76
        <section id="formations">
77
            <h2>Formations</h2>
78
            <h3>Doctorat productique, automatique et informatique industrielle</h3>
79
            <p>Université de Lille - 2000</p>
80
81
            <h3>CAPET Technologie</h3>
82
            <p>IUFM Douais - 1998</p>
83
        </section>
84
    </main>
85
86
    <footer>
87
        <hr>
88
        <p>&copy; 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés. | <a href="#haut">Haut de page</a></p>
89
    </footer>
90
91
</body>
92
93
</html>
<link rel="stylesheet" href="css/style.css">
  • Sert à relier un fichier CSS externe à la page HTML.
  • rel="stylesheet" → indique que c’est une feuille de style.
  • href="css/style.css" → chemin vers le fichier CSS (ici dans le dossier css).
C’est ce fichier qui gère la mise en forme (couleurs, polices, marges, etc.) du site.
Méthodecss/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
/* Header */
12
header {
13
  background-color: #1e3a5f;
14
  /* couleur de fond bleu foncé */
15
  color: #ffffff;
16
  /* couleur du texte dans le header (blanc) */
17
}
18
19
/* Style des liens directs dans le header */
20
header > a {
21
  color: #ffffff;
22
  /* couleur du lien par défaut : blanc */
23
}
24
25
/* Style lorsque l'utilisateur survole le lien */
26
header > a:hover {
27
  color: #ffcc00;
28
  /* couleur du lien au survol : jaune vif pour contraste */
29
}
30
31
/* Style des liens visités (déjà cliqués) dans le header */
32
header > a:visited {
33
  color: #cccccc;
34
  /* couleur du lien après qu'il a été visité : gris clair */
35
}
36
37
header h1 {
38
  font-size: 2em;
39
  /* taille du titre principal */
40
  font-weight: bold;
41
  /* texte en gras pour le titre */
42
}
43
44
/* Navigation principale du header */
45
header nav a {
46
  color: #ff8c42;
47
  /* couleur des liens dans le header (orange doux) */
48
  text-decoration: none;
49
  /* suppression du soulignement */
50
  font-weight: bold;
51
  /* texte en gras pour les liens */
52
}
53
54
header nav a:hover {
55
  color: #ffcc00;
56
  /* couleur des liens au survol (jaune vif) pour contraste */
57
}
58
59
/* Navigation interne dans le main */
60
main nav a {
61
  color: #1e90ff;
62
  /* couleur des liens internes (bleu clair) */
63
  text-decoration: none;
64
  /* suppression du soulignement par défaut */
65
  font-weight: bold;
66
  /* texte en gras */
67
}
68
69
main nav a:hover {
70
  color: #0056b3;
71
  /* couleur des liens internes au survol (bleu foncé) */
72
}
73
74
/* Titres des sections */
75
section h2 {
76
  color: #1e3a5f;
77
  /* couleur des titres principaux des sections (bleu foncé) */
78
  font-size: 1.5em;
79
  /* taille du titre de section */
80
}
81
82
section h3 {
83
  color: #004080;
84
  /* couleur des sous-titres (bleu plus profond) */
85
  font-size: 1.2em;
86
  /* taille des sous-titres */
87
}
88
89
/* Paragraphes dans les sections */
90
section p {
91
  color: #333333;
92
  /* couleur du texte des paragraphes (gris foncé) */
93
  font-family: Georgia, serif;
94
  /* police plus classique pour le texte des sections */
95
}
96
97
/* Liens dans les sections */
98
section a {
99
  color: #1e90ff;
100
  /* couleur des liens dans le contenu (bleu clair) */
101
  text-decoration: underline;
102
  /* ajout d’un soulignement pour distinguer les liens */
103
}
104
105
section a:hover {
106
  color: #0056b3;
107
  /* couleur des liens au survol (bleu foncé) pour contraste */
108
}
109
110
/* Footer */
111
footer {
112
  background-color: #1e3a5f;
113
  /* fond bleu foncé pour le footer */
114
  color: #ffffff;
115
  /* texte blanc dans le footer */
116
}
117
118
footer a {
119
  color: #ff8c42;
120
  /* liens du footer en orange doux */
121
  text-decoration: none;
122
  /* suppression du soulignement des liens */
123
}
124
125
footer a:hover {
126
  color: #ffcc00;
127
  /* couleur des liens au survol (jaune vif) */
128
}
Exemple

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




Séance 3