Séance 2

Objectifs

  • Comprendre la structure hiérarchique d’un document HTML.

  • Être capable de créer une page d’accueil simple avec du texte et des liens.

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
</head>
9
10
<body>
11
12
    <header id="haut">
13
        <a href="images/photo.jpg">Lien vers ma photo</a>
14
        <h1>Portfolio de Vincent Vanneste</h1>
15
        <nav>
16
            <a href="index.html">Accueil</a> |
17
18
            <a href="projets.html">Projets</a> |
19
            <a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a>
20
        </nav>
21
        <hr>
22
    </header>
23
24
    <main>
25
        <nav>
26
            <a href="#about">À propos</a> |
27
            <a href="#competences">Compétences</a> |
28
            <a href="#experiences">Expériences</a> |
29
            <a href="#formations">Formations</a>
30
31
        </nav>
32
33
        <section id="about">
34
            <h2>À propos</h2>
35
            <p>Je suis directeur des études du DEUST WMI de Calais et j'enseigne les fondamentaux du développement web
36
                (HTML, CSS, JavaScript, PHP). Passionné par la transmission des connaissances, j'accompagne mes
37
                étudiants dans l'acquisition des compétences nécessaires pour réussir dans le secteur du numérique.</p>
38
            <p><strong>Localisation :</strong> Calais, France</p>
39
            <p><strong>Site :</strong> <a href="https://vincent-vanneste.fr/" target="_blank">vincent-vanneste.fr</a>
40
            </p>
41
            <p><strong>Email :</strong> <a
42
                    href="mailto:vincent.vanneste@univ-littoral.fr">vincent.vanneste@univ-littoral.fr</a></p>
43
        </section>
44
45
        <hr>
46
47
        <section id="competences">
48
            <h2>Compétences</h2>
49
            <p><strong>HTML</strong><br>
50
                <strong>CSS</strong><br>
51
                Responsive<br>
52
                Accessibilité<br>
53
                <strong>JavaScript</strong><br>
54
                <strong>PHP</strong> <br>
55
                Laravel 11<br>
56
                MySQL<br>
57
                <strong>Git & GitHub</strong>
58
            </p>
59
        </section>
60
61
        <hr>
62
63
        <section id="experiences">
64
            <h2>Expériences récente</h2>
65
            <h3>Enseignant – Licence 1 Informatique</h3>
66
            <p>ULCO • 2025 → 2025<br>
67
                Introduction à HTML, CSS, JS.</p>
68
69
            <h3>Directeur des études – DEUST WMI</h3>
70
            <p>FCU ULCO • 2024 → 2025</p>
71
        </section>
72
73
        <hr>
74
75
        <section id="formations">
76
            <h2>Formations</h2>
77
            <h3>Doctorat productique, automatique et informatique industrielle</h3>
78
            <p>Université de Lille - 2000</p>
79
80
            <h3>CAPET Technologie</h3>
81
            <p>IUFM Douais - 1998</p>
82
        </section>
83
    </main>
84
85
    <footer>
86
        <hr>
87
        <p>&copy; 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés. | <a href="#haut">Haut de page</a></p>
88
    </footer>
89
90
</body>
91
92
</html>
1 - Le <header>
zone d’en-tête de la page. En général, on y met le titre du site, un logo, ou un menu de navigation.
  • <a href="..."> : un lien hypertexte. Ici, il mène vers une image ou une autre page.
  • <h1> : le titre principal de la page. Il n’y a normalement qu’un seul <h1> par page.
  • <nav> : un menu de navigation contenant plusieurs liens <a>.
  • <hr> : une ligne horizontale qui sépare les parties de la page.
2 - Le <main>
C’est la partie centrale du site, qui contient les informations principales.
Menus internes
  • <nav> : encore un menu, mais cette fois-ci pour naviguer à l’intérieur de la page grâce aux ancres (href="#about" → va vers la section <section id="about">).
Sections
  • <section> : sert à regrouper un bloc de contenu cohérent (À propos, Compétences, Expériences, Formations).
  • <h2> : titre de niveau 2 (sous-titre).
  • <h3> : titre de niveau 3 (sous-sous-titre, pour détailler encore plus).
  • <p> : un paragraphe de texte.
  • <strong> : texte mis en gras (pour mettre en avant une information importante).
  • <a href="..." target="_blank"> : lien cliquable, qui s’ouvre dans un nouvel onglet grâce à target="_blank".
  • <br> : saut de ligne.
3 - Le <footer>
zone de pied de page (souvent contact, copyright, retour en haut…).
  • &copy; : caractère spécial HTML qui affiche ©.
  • <a href="#haut"> : lien qui ramène au début de la page (grâce à l’ancre id="haut" placée sur le <header>).
Exemple

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




Séance 2
MéthodePage projets.html
La page projets sert uniquement à tester un lien interne du menu. Elle reprend la structure de la page d’accueil (index), mais son contenu a été simplifié : la partie <main> a été supprimée et remplacée par un simple titre.
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
</head>
9
10
<body>
11
12
    <header id="haut">
13
        <a href="images/photo.jpg">Lien vers ma photo</a>
14
        <h1>Portfolio de Vincent Vanneste</h1>
15
        <nav>
16
            <a href="index.html">Accueil</a> |
17
            <a href="projets.html">Projets</a> |
18
            <a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a>
19
        </nav>
20
        <hr>
21
    </header>
22
23
    <main>
24
        <section>
25
            <h2>Mes projets</h2>
26
        </section>
27
    </main>
28
29
    <footer>
30
        <hr>
31
        <p>&copy; 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés. | <a href="#haut">Haut de page</a></p>
32
    </footer>
33
34
</body>
35
36
</html>