Créer un projet HTML/CSS : guide

Tu peux utiliser des outils en ligne comme CodeSandbox pour créer des projets. Cependant, une approche plus professionnelle consiste à stocker tous les fichiers du projet localement sur ton disque.

1. Construire le HTML

HTML, ou HyperText Markup Language, est un langage de balisage utilisé pour définir la structure d'une page web. Il permet d'organiser et de mettre en forme le texte, les images et d'autres éléments d'une page.

Exemple de structure de document HTML :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4  <title>Ma page</title>
5</head>
6<body>
7  <header>
8    <h1>Titre de la page</h1>
9  </header>
10  <main>
11    <p>Contenu de la page...</p>
12  </main>
13  <footer>
14    <p>Pied de page</p>
15  </footer>
16</body>
17</html>

2. Mise en forme avec le CSS

Le CSS (Cascading Style Sheets) est un langage qui permet de mettre en forme les éléments d'une page web. Grâce à lui, nous pouvons contrôler l'apparence des textes, des couleurs, des arrière-plans, des mises en page et d'autres aspects de la page.

Exemple de styles CSS :

1body {
2    background-color: lightblue;
3}
4
5h1 {
6  color: navy;
7}
8
9p {
10  font-size: 16px;
11}
12
13main {
14  padding: 20px;
15}

3. Intégrer le HTML et le CSS

Il existe différentes méthodes pour relier le code HTML et le code CSS :

a) Styles CSS internes

Les styles CSS peuvent être placés directement dans le document HTML, à l'intérieur de la section <head>, à l'aide de la balise <style>. Cette façon de faire convient à une seule page ou à une expérience rapide, mais tu ne pourras pas réutiliser ces styles sur les autres pages du projet.

1<head>
2  <style>
3    h1 {
4      color: navy;
5    }
6  </style>
7</head>

b) Fichiers CSS externes

La méthode recommandée, qui consiste à stocker les styles CSS dans un fichier séparé (par exemple, style.css). Ce fichier est ensuite inclus dans le document HTML à l'aide de la balise <link>.

1<head>
2  <link rel="stylesheet" href="style.css">
3</head>

c) L'attribut style

L'attribut style peut aussi être utilisé directement dans les balises HTML, ce qui permet d'appliquer des styles directement à des éléments sélectionnés. Cependant, il vaut mieux éviter cette méthode, car elle rend la gestion des styles et la maintenance du code difficiles.

1<h1 style="color: navy;">Titre de la page</h1>

Pas à pas dans Visual Studio Code

Passons maintenant à ton ordinateur. Il te suffit d'un éditeur de code gratuit et d'un navigateur - voici toutes les étapes.

1. Installer Visual Studio Code

Télécharge et installe Visual Studio Code depuis le site officiel code.visualstudio.com.

2. Créer un nouveau projet

• Ouvre VSCode.
• Choisis Fichier > Nouvelle fenêtre (ou utilise le raccourci Ctrl+Shift+N) pour ouvrir une nouvelle fenêtre de VSCode.
• Choisis Fichier > Ouvrir le dossier et sélectionne le dossier où tu veux stocker ton projet.

3. Créer un fichier HTML

• Dans la barre d'outils de gauche, clique droit sur le dossier du projet et choisis Nouveau fichier.
• Nomme le fichier avec l'extension .html, par exemple index.html.

4. Créer un fichier CSS

• Clique droit sur le dossier du projet et choisis Nouveau fichier.
• Nomme le fichier avec l'extension .css, par exemple style.css.

5. Lier les fichiers HTML et CSS

• Ouvre le fichier index.html.
• Dans la section <head>, ajoute un lien vers le fichier CSS comme indiqué ci-dessous :

1<head>
2  <title>Ta page</title>
3  <link rel="stylesheet" href="style.css">
4</head>

6. Prévisualiser la page

• Pour voir à quoi ressemble ta page, ouvre le fichier index.html dans un navigateur web.
• Tu peux aussi installer une extension comme « Live Server » dans VSCode, qui actualisera automatiquement ta page après chaque modification.

7. Enregistrer et tester

• Enregistre toutes les modifications (Fichier > Enregistrer tout ou Ctrl+K S).
• Teste ta page en effectuant diverses modifications et en observant les résultats.

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Mon projet HTML/CSS</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <header>
11        <h1>Ma première page</h1>
12        <nav>
13            <a href="#about">À propos de moi</a>
14            <a href="#projects">Projets</a>
15            <a href="#contact">Contact</a>
16        </nav>
17    </header>
18
19    <main>
20        <section id="about">
21            <h2>À propos de moi</h2>
22            <p>Bienvenue ! J'apprends à créer des sites web.</p>
23        </section>
24
25        <section id="projects">
26            <h2>Projets</h2>
27            <p>Mes futurs projets seront ici.</p>
28        </section>
29
30        <section id="contact">
31            <h2>Contact</h2>
32            <p>Email : example@example.com</p>
33        </section>
34    </main>
35
36    <footer>
37        <p>&copy; 2024 Ma page</p>
38    </footer>
39</body>
40</html>

Souviens-toi : le HTML est le squelette du temple, et le CSS dans un fichier séparé, c'est la peinture - garde-les séparés, une seule balise <link> les reliera.