Organisation d'un site Web et structure HTML¶

1. Comment organiser un site Web ?¶

Un site Web contient souvent plusieurs types de fichiers :

index.html : page d'accueil
Pages HTML
Fichiers CSS (styles)
Images
Fichiers JavaScript
Vidéos, sons et autres ressources

Structure recommandée¶

Hierarchie

Directement sous le dossier parent du site web, on retrouve les fichiers HTML. Puis, au même niveau, on crée des sous-dossiers pour y conserver les autres ressources du site web.

Cette organisation facilite le travail en permettant de se retrouver plus facilement dans le projet.

2. Les chemins d'accès¶

Un chemin d'accès indique où se trouve un fichier.

Chemin absolu¶

Indique l'emplacement complet sur un ordinateur.

C:\documents\images\chat.jpg

Chemin relatif¶

Indique le chemin à partir du fichier actuel.

images/chat.jpg

⚠️ En développement Web, il faut utiliser les chemins relatifs pour que le site fonctionne sur tous les ordinateurs et serveurs.

3. Comment nommer les dossiers et les fichiers¶

Pour éviter les erreurs :

✅ Utiliser seulement des lettres minuscules

✅ Remplacer les espaces par des tirets (-) ou des soulignés (_)

✅ Éviter les accents

Exemples¶

✅ Correct	❌ Incorrect
`mon-site.html`	`Mon Site.html`
`images-chat`	`Images Chat`
`elephant.jpg`	`éléphant.jpg`

4. Structure minimale d'une page HTML¶

Chaque page HTML devrait contenir :

<!DOCTYPE html>
<html>
<head>
    <title>Ma page</title>
</head>
<body>
    Contenu visible
</body>
</html>

Rôle des principales sections¶

`<head>`¶

Contient les informations utiles au navigateur :

titre de la page
encodage
liens CSS
métadonnées

`<body>`¶

Contient tout ce que l'utilisateur voit :

titres
paragraphes
listes
images
liens

✅ Tout ce qui doit apparaître à l'écran doit être placé dans le <body>.

5. Les balises HTML¶

Balises avec fermeture¶

Certaines balises entourent du contenu.

<p>Bonjour tout le monde !</p>

Balise d'ouverture : <p>
Contenu : Bonjour tout le monde !
Balise de fermeture : </p>

Balises sans fermeture¶

Certaines balises sont complètes à elles seules.

<img src="chat.jpg" alt="Un chat">
<hr>

6. Balise, attribut, valeur et contenu¶

Syntaxe générale :

<balise attribut="valeur">contenu</balise>

La balise d'ouverture contient des attributs pour définir d'avantage cette balise, son fonctionnement, sa façon d'être affichée, etc.

La majorité des attributs doivent avoir une valeur associée. Les valeurs sont écrite entre guillements.

Le contenu s'inscrit entre l'ouverture et la fermeture de la balise.

Finalement, lorsque la balise l'exige, on ajoutera la fermeture de balise.

Exemple¶

<a href="https://www.exemple.com">Visiter le site</a>

Balise : a
Attribut : href
Valeur : https://www.exemple.com
Contenu : Visiter le site

✅ Les valeurs d'attributs devraient toujours être écrites entre guillemets.

7. L'indentation du code¶

L'indentation rend le code plus facile à lire.

Bon exemple¶

<body>
    <p>
        Bonjour !
    </p>
</body>

Bonnes pratiques¶

Utiliser des minuscules
Indenter les balises imbriquées
Mettre les balises enfants sur une nouvelle ligne

À retenir¶

⭐ Organiser ses fichiers dans des dossiers.

⭐ Utiliser des chemins relatifs.

⭐ Respecter les règles de nomenclature.

⭐ Toujours utiliser la structure HTML de base.

⭐ Fermer correctement les balises lorsque nécessaire.

⭐ Indenter son code pour le rendre lisible.