Chapitre 35 | Organiser les fichiers HTML et CSS dans un répertoire

Objectifs du chapitre

  1. Organiser les fichiers HTML et CSS dans un répertoire.
  2. Lier un fichier CSS externe à un fichier HTML.
  3. Comprendre la notion de chemin relatif.
  4. Tester le résultat dans un navigateur.

Organiser les fichiers

Créer un répertoire pour le projet

Structure obtenue :

Lier un fichier CSS à un fichier HTML

Ouvrir le fichier index.html dans VS Code

Explication :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projet HTML</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Ceci est un paragraphe stylisé avec un fichier CSS externe.</p>
</body>
</html>

Ouvrir le fichier style.css dans VS Code

body {
    background-color: lightblue;
}
p {
    color: darkblue;
    font-size: 20px;
}

Tester dans VScode

Depuis le fichier HTML affiché sur VScode, clic droit >Show preview.

  1. Résultat attendu :
    • L’arrière-plan de la page est bleu clair.
    • Le texte du paragraphe est bleu foncé et plus grand.
  2. En cas d’erreur :
    Si les styles ne s’appliquent pas :
    • Vérifiez que le fichier style.css est bien enregistré.
    • Assurez-vous que le chemin du fichier CSS dans la balise <link> est correct.

Tester dans Google Chrome

  1. Ouvrir le fichier HTML dans un navigateur
    • Dans l’explorateur de fichiers, double-cliquez sur index.html pour l’ouvrir dans Google Chrome ou un autre navigateur.
  2. Résultat attendu :
    • L’arrière-plan de la page est bleu clair.
    • Le texte du paragraphe est bleu foncé et plus grand.
  3. En cas d’erreur :
    Si les styles ne s’appliquent pas :
    • Vérifiez que le fichier style.css est bien enregistré.
    • Assurez-vous que le chemin du fichier CSS dans la balise <link> est correct.

Notion de chemin relatif

Chemin relatif pour un fichier au même niveau

Pourquoi utiliser un chemin relatif ?

Organiser les fichiers avec un sous-dossier

Créer un sous-dossier pour les styles

Nouvelle structure obtenue :

Modifier le chemin dans index.html

Explication du nouveau chemin :

Résultat final

Code HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projet HTML avec CSS</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <p>Ceci est un paragraphe stylisé avec un fichier CSS dans un sous-dossier.</p>
</body>
</html>
Code CSS 
body {
    background-color: lightblue;
}
p {
    color: darkblue;
    font-size: 20px;
}

Points à retenir

  1. Liens relatifs : utilisez des chemins relatifs pour indiquer l’emplacement des fichiers (exemple : style.css ou styles/style.css).
  2. Organisation des fichiers : il est courant de regrouper les fichiers CSS dans un dossier dédié, comme styles ou styles ou CSS, pour mieux structurer un projet.
  3. Test dans le navigateur et/ou VScode : toujours tester vos fichiers HTML et CSS dans un navigateur pour vérifier leur bon fonctionnement.

Annexe : Trois façons d’appliquer du CSS

Lors de la création d’une page web, il existe trois façons principales d’ajouter des styles CSS. Chacune a ses avantages et inconvénients. Nous allons les explorer avec des exemples et des explications simples.

1. CSS dans une balise <style> (CSS interne)

Description

Le CSS interne est défini directement dans la balise <style> de la même page HTML. Les styles sont ainsi disponibles uniquement pour cette page.

Exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple avec CSS interne</title>
    <style>
        body {
            background-color: lightyellow;
        }
        p {
            color: darkgreen;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>Ce texte est stylisé avec du CSS interne.</p>
</body>
</html>

Avantages :

Inconvénients :

2. CSS dans un fichier séparé (CSS externe)

Description

Le CSS externe est écrit dans un fichier .css séparé, qui est lié au fichier HTML avec une balise <link>. C’est la méthode préférée pour un projet propre et maintenable.

Exemple :

Fichier HTML (index.html) :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple avec CSS externe</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <p>Ce texte est stylisé avec un fichier CSS externe.</p>
</body>
</html>

Fichier CSS (styles/style.css) :

body {
    background-color: lightblue;
}
p {
    color: navy;
    font-size: 18px;
}

Avantages :

Inconvénients :

3. CSS in-line (dans une balise HTML)

Description

Le CSS in-line est écrit directement dans l’attribut style d’une balise HTML. Les styles s’appliquent uniquement à cet élément précis.

Exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple avec CSS in-line</title>
</head>
<body style="background-color: lightgray;">
    <p style="color: red; font-size: 20px;">Ce texte est stylisé avec du CSS in-line.</p>
</body>
</html>

Avantages :

Inconvénients :

Quelle méthode privilégier ?

Résumé des méthodes

MéthodeAvantagesInconvénientsQuand l’utiliser ?
CSS interneSimple et rapidePas réutilisableTests ou petits projets
CSS externePropre, réutilisable, lisibleFichier supplémentaireProjets structurés ou en équipe
CSS in-linePratique pour un style uniqueDifficile à maintenirTests rapides ou modifications ponctuelles

Conclusion

Le CSS externe est la méthode la plus recommandée pour un code propre et maintenable.

Pour un apprentissage efficace, essayez de toujours structurer vos styles de manière externe et évitez les styles in-line, sauf en cas de nécessité absolue.

Prochaine étape

Dans le prochain chapitre, nous verrons comment ajouter des images à votre projet, tout en utilisant des chemins relatifs pour les appeler.

Avant proposLexiqueIntégration WebRecours à l'IAChapitre 1 | Présentation de CodePenChapitre 5 | Afficher du texte avec HTML [ p / h ]Chapitre 10 | Comprendre la cascade en CSSChapitre 15 | Propriétés CSS pour le style des textesChapitre 17 | Sites de référencesChapitre 18 | Listes ordonnées et non ordonnéesChapitre 20 | A propos des commentairesChapitre 25 | Classes combinées et des déclarations communesChapitre 30 | VS Code & Structure minimale de page HTML5Chapitre 35 | Organiser les fichiers HTML et CSS dans un répertoireChapitre 40 | Insérer une image dans une page HTMLChapitre 50 | Placehold.co pour des images temporaireschapitre 55 | L'indentation en HTML et CSSChapitre 60 | Gagner en productivité sous VScodeChapitre 65 | La fonction "openfolder" et l'affichage multi onglet avec VScodeChapitre 70 | Balises ouvrantes, fermantes et orphelinesChapitre 75 | Vocabulaire essentielChapitre 80 | Sélecteurs imbriqués en CSSChapitre 85 | La balise SPANChapitre 90 | Comprendre les unités de mesure en CSSChapitre 80 | Sélecteurs multiples en CSSChapitre 90 | Intégration d'une vidéo YouTubeChapitre 95 | Intégration d’une Google MapChapitre 100 | Différencier une Page Web du DOMChapitre 105 | Padding et MarginChapitre 110 | Propriétés CSS padding et marginChapitre 115 | Rôle du DIVChapitre 120 | Le flux du texteChapitre 125 | Retour à la ligne [code vs affichage]Chapitre 130 | Z-indexChapitre 135 | Position FixedChapitre 140 | Position AbsoluteChapitre 145 | Fixed vs AbsoluteChapitre 150 | Image en BackgroundChapitre 155 | Les BordersChapitre 160 | Police de caractère OnlineChapitre 165 | Les boutonsChapitre 170 | Responsive : media queriesChapitre 175 | Pseudo-éléments ::before et ::afterChapitre 180 | Les liens HypertexteChapitre 185 | Les transitions animéesChapitre 190 | Navigation avec des ancresChapitre 300 | Flexbox et GridChapitre 500 | Base FlexChapitre 505 | Direction des enfants (flex-direction)Chapitre 510 | Alignement horizontal (justify-content)Chapitre 510 | Alignement vertical (align-items)Chapitre 515 | Gestion des retours à la ligne (flex-wrap)Chapitre 520 | Alignement des lignes (align-content)Chapitre 525 | Flex : Autres propriétésChapitre 550 | Bâtir une Card avec FlexboxChapitre 560 | Les dégradés / GradientsChapitre 570 | Les intégrations SVGChapitre 580 | Les Variables couleurs CSSChapitre 581 | Autres exemple de variablesChapitre 585 | La fonction calc() en CSSChapitre 590 | Formulaire