Scribd
Importer
6 vues4 pages

Introduction_HTML_CSS

Ce chapitre introduit les fondamentaux du HTML et du CSS, en expliquant leur rôle dans la création de pages web. Il couvre la structure de base d'un document HTML, les méthodes d'intégration du CSS, et les meilleures pratiques pour assurer la lisibilité et la maintenabilité du code. En appliquant ces concepts, les développeurs peuvent créer des pages web efficaces et esthétiques.

Transféré par

dioumadione004
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
6 vues4 pages

Introduction_HTML_CSS

Ce chapitre introduit les fondamentaux du HTML et du CSS, en expliquant leur rôle dans la création de pages web. Il couvre la structure de base d'un document HTML, les méthodes d'intégration du CSS, et les meilleures pratiques pour assurer la lisibilité et la maintenabilité du code. En appliquant ces concepts, les développeurs peuvent créer des pages web efficaces et esthétiques.

Transféré par

dioumadione004
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 4

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.

Vous aimerez peut-être aussi