Introduction à HTML et CSS
Objectifs du chapitre
Dans ce premier chapitre, nous allons poser les bases essentielles pour comprendre ce
qu’est le HTML, le rôle du CSS, et comment ces deux technologies interagissent pour
créer des pages web. À la fin de ce chapitre, vous serez capable de :
1. Comprendre la structure de base d’une page HTML.
2. Connaître le rôle du CSS et les différentes façons de l’intégrer.
3. Connaitre les meilleur pratique en HTML et CSS.
I. Introduction
Le développement web repose sur plusieurs technologies essentielles, dont HTML et
CSS. Ces deux langages sont les bases fondamentales pour structurer et styliser une page
web. Dans ce document, nous allons explorer le rôle de chacun d'eux, ainsi que la
structure d'un bon document HTML et CSS.
1. Qu'est-ce que HTML ?
HTML (HyperText Markup Language) est le langage de balisage standard pour la
création de pages web. Il décrit la structure et le contenu d’une page web à l’aide
d’éléments et de balises.
- HyperText : permet de créer des liens entre les pages, rendant le web navigable.
- Markup Language : un langage utilisant des balises pour structurer le contenu.
Une page HTML est composée d’une série d’éléments, chacun défini par une balise
ouvrante et une balise fermante.
Exemple de base d'un document HTML
Résultat:
<!DOCTYPE html> : informe le navigateur que le document utilise le HTML5.
<html> : l’élément racine qui contient tout le contenu de la page.
<head> : contient des métadonnées comme le titre, les liens vers les fichiers CSS, les
icônes, etc.
<body> : la partie visible de la page où sont placés tous les éléments que l’utilisateur
verra.
2. Qu’est-ce que le CSS ?
CSS (Cascading Style Sheets) est un langage qui permet de styliser les pages web. Il
permet de modifier l'apparence du texte, des couleurs, des marges et des dispositions pour
améliorer le design et l'ergonomie d'un site.
Exemple de base d'un fichier CSS
II. Intégration du CSS dans une page HTML
Il existe trois principales façons d’ajouter du CSS à une page HTML :
1. CSS en ligne
Le CSS est ajouté directement dans les balises HTML via l’attribut style. Exemple :
2. CSS interne
Les styles sont inclus dans une section <style> dans le <head> du document :
3. CSS externe
Un fichier CSS distinct est lié au document HTML à l’aide d’une balise <link> :
III. Structure d'un bon document HTML et CSS
Un bon document HTML et CSS suit certaines bonnes pratiques pour assurer la lisibilité
et la maintenabilité du code.
1. Respecter la structure de base
Tout document HTML doit commencer par la déclaration <!DOCTYPE html>, suivie des
balises <html>, <head> et <body>.
2. Séparer HTML et CSS
Il est recommandé de séparer la structure (HTML) de la présentation (CSS) en utilisant
un fichier CSS externe.
3. Utiliser des classes et des IDs de manière appropriée
- Classe (`class`) : Utilisée pour appliquer un style à plusieurs éléments.
- ID (`id`) : Utilisé pour identifier un seul élément unique.
4. Respecter la sémantique HTML
L'utilisation de balises sémantiques comme <header>, <section>, <article>, <footer>
permet d'améliorer l'accessibilité et le référencement du site.
5. Organiser le CSS de manière claire
- Regrouper les styles par sections (ex: global, typographie, mise en page).
- Utiliser des commentaires pour décrire les différentes parties du code.
NB : Dans la structuration d’un document HTML toutes balises ouvertes doivent
être fermé.
Ces balises n'ont pas besoin d'une balise de fermeture :
Conclusion
HTML et CSS sont les bases du développement web. Un bon document HTML doit être
bien structuré et sémantiquement correct, tandis que le CSS doit être organisé pour
faciliter la maintenance et l'évolution du site. En appliquant ces bonnes pratiques, on
assure la création de pages web efficaces, accessibles et esthétiques.
