[go: up one dir, main page]
Scribd
Importer
53 vues37 pages

Module HTML-CSS

Ce module sur HTML et CSS vise à enseigner les bases de la création de sites web, en abordant la différence entre HTML et CSS, l'importance de la sémantique, et les outils nécessaires pour coder. Les sections incluent des exercices pratiques sur la structure de base d'une page HTML, l'utilisation des balises, et l'application de styles CSS. À la fin, les participants devraient être capables de créer et visualiser des pages web simples en utilisant ces technologies.

Transféré par

Fof Fofana
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
53 vues37 pages

Module HTML-CSS

Ce module sur HTML et CSS vise à enseigner les bases de la création de sites web, en abordant la différence entre HTML et CSS, l'importance de la sémantique, et les outils nécessaires pour coder. Les sections incluent des exercices pratiques sur la structure de base d'une page HTML, l'utilisation des balises, et l'application de styles CSS. À la fin, les participants devraient être capables de créer et visualiser des pages web simples en utilisant ces technologies.

Transféré par

Fof Fofana
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/ 37

MODULE : HTML & CSS

MODULE : HTML & CSS


PROGRAMME

INTRODUCTION
• Objectifs : Comprendre les bases de la création de sites web avec HTML et CSS.
• Notions abordées :
o Différence entre HTML et CSS.
o L’importance de la sémantique en HTML.
o Présentation de l’interface client et comment un navigateur interprète
HTML/CSS.
o Outils recommandés : éditeurs de texte (VS Code, Sublime Text) et navigateurs
(Chrome, Firefox).

I. LES BASES DE HTML ET CSS


1. Les bases du HTML
1. Structure de base d’une page HTML 5
o <html>, <head>, <body>, l’encodage UTF-8.
o Le rôle des balises meta (langue, auteur, description).
o Exercice : Créer une page HTML simple avec un titre et un paragraphe.
2. Élément, balises et attributs
o Explication de ce qu'est une balise, un élément et un attribut.
o Les balises auto-fermantes (ex : <img />).
o Exercice : Ajouter une image avec un attribut alt.
3. Gestion du Type de Document et Visualisation dans un Navigateur en HTML
o Le rôle du Doctype dans les documents HTML5.
o Visualiser le code dans le navigateur et inspecter le code source.
4. Bonnes pratiques, règles et commentaires
o L’importance de l’organisation du code.
o Comment écrire des commentaires en HTML (<!-- Commentaire -->).
5. Les éléments heading, paragraph et break
o Utilisation des balises <h1> à <h6>, <p>, <br>.
o Exercice : Structurer un article avec des titres et paragraphes.
6. Les éléments strong, emphasis et mark
o Mise en valeur avec <strong>, <em>, <mark>.
MODULE : HTML & CSS

o Exercice : Formater un texte pour lui donner une importance visuelle.


7. Listes ordonnées et non-ordonnées
o Différence entre <ol> et <ul>, et l'usage de <li>.
o Exercice : Créer une liste de courses ordonnée et une liste non ordonnée.
8. Liens internes et liens externes
o Créer des liens hypertextes avec <a>.
o Liens vers des sections de la page (ancres) et liens vers d'autres sites.
o Exercice : Créer un menu de navigation simple.

2. Les bases du CSS


1. Sélecteurs, propriétés et valeurs
o Explication des sélecteurs de base (élément, classe, ID).
o Propriétés CSS (couleur, taille, etc.) et valeurs.
o Exercice : Appliquer un style de texte à une page HTML.
2. Où écrire le CSS ?
o CSS en ligne, dans <style> ou dans un fichier externe.
o Différences et avantages.
o Exercice : Utiliser un fichier CSS externe.
3. Les commentaires en CSS
o Ajouter des commentaires en CSS (/* Commentaire */).
MODULE : HTML & CSS

INTRODUCTION

Objectifs :
À la fin de cette introduction, vous serez capables de :
• Comprendre les bases de la création de sites web en utilisant HTML pour la structure
et CSS pour la mise en forme.
• Distinguer la fonction de chaque langage et leur importance.
• Utiliser des outils simples pour commencer à créer et visualiser vos pages web.
Notions abordées :
1. Différence entre HTML et CSS
• HTML (HyperText Markup Language) est utilisé pour structurer le contenu d'une
page web. C’est comme le squelette de la page.
o Exemples : Titres, paragraphes, images, liens.
o Analogie : Imaginez une maison en construction. Le HTML serait les
fondations, les murs et la charpente.
• CSS (Cascading Style Sheets) est utilisé pour mettre en forme le contenu HTML. Il
permet de rendre la page plus agréable à regarder.
o Exemples : Couleurs, polices, alignements, espacements.
o Analogie : Si le HTML est la structure de la maison, le CSS est la décoration
intérieure – la peinture, les meubles, etc.
2. L’importance de la sémantique en HTML
La sémantique en HTML concerne l’utilisation des bonnes balises pour décrire le contenu. Il
est important de choisir des balises qui ont du sens pour le contenu qu’elles entourent. Par
exemple :
• <h1> pour un titre principal.
• <p> pour un paragraphe.
• <img> pour une image.
Pourquoi est-ce important ?
• Accessibilité : Les personnes utilisant des technologies d’assistance (comme les
lecteurs d’écran) peuvent mieux comprendre la structure de votre page.
• SEO (Search Engine Optimization) : Les moteurs de recherche comme Google utilisent
la sémantique HTML pour mieux indexer vos pages.
3. Présentation de l’interface client et du rôle du navigateur
MODULE : HTML & CSS

Une page web est affichée grâce à un navigateur (comme Chrome ou Firefox). Le navigateur
interprète le code HTML et CSS que vous écrivez et le transforme en une page visible par les
utilisateurs.
Étapes de fonctionnement :
1. L’utilisateur entre une URL (comme www.example.com) dans son navigateur.
2. Le serveur envoie le fichier HTML et CSS au navigateur.
3. Le navigateur interprète ce fichier pour afficher la page.
o HTML pour la structure.
o CSS pour la mise en forme.
4. Outils recommandés pour coder
Pour créer et visualiser vos premières pages web, vous aurez besoin de deux types d’outils :
• Éditeurs de texte :
o Visual Studio Code (VS Code) : Un éditeur très populaire, simple et puissant.
o Sublime Text : Léger, rapide, avec des fonctionnalités pratiques pour les
développeurs.
o Notepad++ : Idéal pour les débutants, simple d’utilisation.
• Navigateurs :
o Google Chrome : Très utilisé et dispose d’outils de développement intégrés.
o Mozilla Firefox : Un autre excellent navigateur avec des outils performants pour
tester votre code.
5. Premier exercice :
Avant de commencer à coder, installez un éditeur de texte (VS Code ou Sublime Text) et ouvrez
un navigateur. Nous allons faire nos premiers pas en HTML dans les prochaines sections.
MODULE : HTML & CSS

I. LES BASES DE HTML ET CSS


1. Les bases du HTML
1.1 Structure de base d’une page HTML 5
La structure d’une page HTML 5 suit un modèle assez simple. Chaque document HTML
commence par la déclaration du type de document, suivie de balises principales qui organisent
le contenu. Voici les balises essentielles :

Exemple : Structure de base d'une page HTML 5

Explication des éléments :


1. <!DOCTYPE html> : Cette déclaration indique au navigateur que le document est en
HTML 5.
2. <html> : La balise racine qui contient tout le contenu HTML de la page.
3. <head> : Cette section contient des informations métadonnées sur la page. Ces
informations ne sont pas visibles directement sur la page mais sont importantes pour le
navigateur et le référencement.
o <meta charset="UTF-8"> : Spécifie l’encodage des caractères en UTF-8. Cela
permet d’utiliser des caractères spéciaux comme les accents (é, è, à).
o <meta name="description" content="..."> : Donne une brève description de
la page. Cela peut apparaître dans les résultats des moteurs de recherche.
o <meta name="author" content="..."> : Mentionne l’auteur de la page.
MODULE : HTML & CSS

4. <title> : Définit le titre de la page, qui apparaît dans l’onglet du navigateur.


5. <body> : Cette balise contient tout le contenu visible de la page. Tout ce que vous voyez
sur une page web (titres, paragraphes, images, vidéos) se trouve à l'intérieur de cette
balise.
o <h1> : Un titre principal. Il existe six niveaux de titres en HTML, de <h1> (le
plus important) à <h6> (le moins important).
o <p> : Représente un paragraphe de texte.

Le rôle des balises meta :


• <meta charset="UTF-8"> : Assure que les caractères spéciaux (accents, symboles)
s’affichent correctement.
• <meta name="description" content="..."> : Fournit une description de la page web.
C’est utile pour les moteurs de recherche qui affichent souvent cette description dans
les résultats de recherche.
• <meta name="author" content="..."> : Donne le nom de l’auteur ou du créateur du
site.
Ces balises permettent aussi d'optimiser le référencement et de fournir des informations
importantes pour les utilisateurs et les navigateurs.

Exercice pratique :
Objectif : Créer une page HTML simple avec un titre et un paragraphe.
Instructions :
1. Ouvrez votre éditeur de texte (par exemple, VS Code ou Sublime Text).
2. Créez un nouveau fichier et copiez-collez la structure de base suivante :
MODULE : HTML & CSS

3. Enregistrez le fichier sous le nom exercice.html.


4. Ouvrez ce fichier dans un navigateur en double-cliquant dessus. Vous devriez voir
le titre de la page dans l’onglet du navigateur, un titre principal et un paragraphe
sur la page.

1.2 Élément, balises et attributs


1.2.1 Qu'est-ce qu'une balise, un élément et un attribut ?
1. Balise (Tag) :
Une balise est un mot-clé entouré de crochets angulaires (< >) qui indique au
navigateur comment afficher ou structurer le contenu. Elle sert à ouvrir ou à fermer un
élément.
o Balise ouvrante : <p> indique le début d'un paragraphe.
o Balise fermante : </p> marque la fin de ce paragraphe.
Exemple :

2. Élément (Element) :
Un élément comprend la balise ouvrante, le contenu, et la balise fermante. C'est tout
le bloc de contenu entre ces balises.
MODULE : HTML & CSS

o Exemple : L'élément paragraphe complet est constitué de <p>, du texte à


l'intérieur, et de </p>.
Exemple :

3. Attribut (Attribute) :
Les attributs fournissent des informations supplémentaires sur une balise. Ils se
placent dans la balise ouvrante et sont composés d'un nom et d'une valeur.
o Exemple : L'attribut href dans une balise <a> spécifie l'URL vers laquelle le
lien pointe.
Exemple :

1.2.2 Les balises auto-fermantes


Certaines balises n'ont pas besoin de contenu et ne nécessitent pas de balise fermante. Elles
sont appelées balises auto-fermantes et se terminent par un / à l'intérieur de la balise.
Exemples courants :
1. <img /> : Pour insérer une image.

2. <br /> : Pour insérer un saut de ligne.

3. <hr /> : Pour insérer une ligne horizontale.


MODULE : HTML & CSS

Exercice pratique :
Objectif : Insérer une image avec un attribut alt.
Instructions :
1. Créez une page HTML simple ou utilisez le fichier précédent.
2. Dans le fichier, insérez l'image suivante à l'intérieur de la balise <body> :

3. Modifiez le chemin de l’image pour qu’il corresponde à une image que vous avez sur
votre ordinateur, ou utilisez une image en ligne.
4. Enregistrez le fichier et ouvrez-le dans un navigateur. Vous devriez voir l'image
s'afficher. Si l'image ne se charge pas, le texte défini dans l'attribut alt sera affiché à la
place.

Explication :
• src="chemin/vers/image.jpg" : Spécifie le chemin vers l’image. Il peut être relatif
(par exemple, images/photo.jpg) ou absolu (par exemple,
https://www.example.com/photo.jpg).
• alt="Description de l'image" : L’attribut alt fournit une description textuelle de
l’image, utile si l’image ne se charge pas ou pour des raisons d'accessibilité (comme
les lecteurs d'écran pour les malvoyants).

1.3 Gestion du Type de Document et Visualisation dans un Navigateur en HTML


1.3.1 Le rôle du Doctype dans les documents HTML5
Le Doctype est la toute première ligne d’un document HTML. Il indique au navigateur la
version de HTML que vous utilisez, afin qu'il puisse interpréter correctement le code.
En HTML5, le Doctype est très simple :
MODULE : HTML & CSS

• Pourquoi est-il important ?


o Le Doctype permet au navigateur de savoir qu'il doit interpréter le document
en mode standard, ce qui garantit une compatibilité avec les dernières
fonctionnalités de HTML5.
o Sans le Doctype, le navigateur pourrait entrer en mode "quirks" (mode de
compatibilité), où il essaie de rendre la page en fonction d’anciennes règles, ce
qui peut causer des problèmes d'affichage.
1.3.2 Visualiser le code dans le navigateur
1. Créer et ouvrir une page HTML dans un navigateur
o Après avoir créé un document HTML, comme l'exemple ci-dessous, vous
pouvez l’ouvrir dans un navigateur (comme Chrome ou Firefox) pour voir
comment il s'affiche :

2. Comment visualiser le code source d'une page dans le navigateur ?


o Faites un clic droit sur la page web (ou utilisez le raccourci clavier Ctrl + U ou
Cmd + U sur Mac) et sélectionnez "Afficher le code source de la page". Vous
verrez alors le code HTML brut de votre document.
1.3.3 Utiliser les outils de développement pour inspecter le code
Tous les navigateurs modernes sont équipés d’outils de développement qui permettent
d'inspecter et de modifier temporairement une page web directement dans le navigateur.
• Inspecter un élément :
o Faites un clic droit sur n’importe quel élément de la page (par exemple, un titre
ou une image) et sélectionnez "Inspecter".
MODULE : HTML & CSS

o Une console de développeur s’ouvrira, affichant le HTML correspondant à cet


élément. Cela permet de voir comment le navigateur interprète le code.
• Modifier le contenu en direct :
o Dans la console de développeur, vous pouvez modifier le HTML directement
pour tester des changements sans avoir à retourner à votre éditeur de texte. Ces
modifications ne sont pas permanentes et s’effacent lorsque vous rechargez la
page.
Exercice pratique :
Objectif : Visualiser le code HTML dans un navigateur et inspecter un élément.

1. Créez une nouvelle page HTML avec le code suivant :

2. Étape 1 : Ouvrir le fichier HTML dans le navigateur


o Ouvrez le fichier HTML dans un navigateur (Chrome ou Firefox).
3. Étape 2 : Afficher le code source
o Faites un clic droit sur la page et sélectionnez "Afficher le code source de la
page" pour voir le code brut.
4. Étape 3 : Utiliser l'outil "Inspecter"
o Faites un clic droit sur le titre (<h1>) et sélectionnez "Inspecter". Regardez
comment le navigateur présente le code dans la console de développeur.
MODULE : HTML & CSS

o Essayez de modifier le texte à l’intérieur de la balise <h1> directement dans la


console, et observez les changements dans la page en temps réel.

1.4 Bonnes pratiques, règles et commentaires


1.4.1 L’importance de l’organisation du code
Lors de la création de pages web en HTML, il est essentiel de suivre certaines bonnes
pratiques pour garantir que votre code soit lisible, maintenable et compréhensible par
d'autres développeurs (et vous-même, plus tard).
Voici quelques-unes des principales bonnes pratiques :
1. Indentation et espacement
o Utilisez une indentation cohérente (par exemple, 2 ou 4 espaces) pour
imbriquer correctement les balises. Cela permet de visualiser la hiérarchie des
éléments et de rendre le code plus lisible.
o Évitez d'écrire tout le code sur une seule ligne ; mettez chaque élément
important sur sa propre ligne.
Exemple :

2. Utilisation cohérente des balises


o Assurez-vous d'utiliser les balises HTML de manière cohérente et appropriée.
o Utilisez des balises sémantiques comme <header>, <footer>, <article>, et
<section> pour décrire le contenu de votre page.
3. Commentaires dans le code
o Les commentaires permettent de laisser des notes dans votre code, à
destination de vous-même ou d'autres développeurs. Ils n'apparaissent pas sur
la page web mais sont visibles dans le code source.
4. Nommage descriptif des classes et des IDs
MODULE : HTML & CSS

o Lorsque vous donnez des noms à vos classes CSS ou vos IDs, essayez d'utiliser
des noms descriptifs qui reflètent leur utilité.

1.4.2 Comment écrire des commentaires en HTML


En HTML, les commentaires sont très utiles pour expliquer des sections de code ou laisser
des notes pour vous-même ou vos collègues. Les commentaires n'ont aucun impact sur
l'affichage de la page, ils sont simplement ignorés par le navigateur.
Syntaxe d’un commentaire en HTML :

• Les commentaires commencent par <!-- et se terminent par -->.


• Vous pouvez écrire des commentaires sur une ou plusieurs lignes.
Exemple :

1.4.3 Avantages d'utiliser des commentaires


1. Clarté : Les commentaires permettent de décrire le rôle de certaines parties du code,
ce qui est particulièrement utile dans des projets complexes.
2. Maintenabilité : Ils facilitent la maintenance du code, surtout si vous ou quelqu'un
d'autre devez revenir dessus après plusieurs mois.
3. Collaboration : Si plusieurs personnes travaillent sur le même projet, les
commentaires aident à partager des informations sur le code sans affecter son
fonctionnement.
Exercice pratique :
Objectif : Appliquer les bonnes pratiques de structuration du code et ajouter des
commentaires.
1. Créez un fichier HTML et suivez les bonnes pratiques de structure et de lisibilité :
o Indentez correctement votre code.
o Ajoutez des commentaires pour expliquer chaque section.
MODULE : HTML & CSS

2. Ouvrez le fichier dans un navigateur pour voir le résultat, puis inspectez le code source
pour voir les commentaires.

1.5 Les éléments heading, paragraph et break


1.5.1 Utilisation des balises <h1> à <h6>, <p>, et <br>
Ces balises HTML sont fondamentales pour structurer le contenu d'une page web. Elles aident
non seulement à organiser le texte, mais aussi à améliorer l'accessibilité et le référencement
(SEO).
1. Balises de titre (<h1> à <h6>)
MODULE : HTML & CSS

o Les balises de titre (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) sont utilisées pour
définir les titres et sous-titres de votre document. Elles vont de <h1>, le plus
important et généralement le titre principal, à <h6>, le moins important.
o Exemple :

2. Balise de paragraphe (<p>)


o La balise <p> est utilisée pour définir des paragraphes. Chaque balise <p> crée
une nouvelle ligne avec un espace avant et après le texte.
o Exemple :

3. Balise de retour à la ligne (<br>)


o La balise <br> insère un saut de ligne à l'intérieur d'un paragraphe ou d’un
autre élément en ligne. Elle est généralement utilisée pour les adresses ou les
poèmes, où les sauts de ligne sont significatifs.
o Exemple :

Exercice pratique : Structurer un article avec des titres et paragraphes


Objectif : Appliquer les balises de titre, de paragraphe, et de saut de ligne pour créer un
article bien structuré.
1. Instructions :
o Créez un fichier HTML.
o Utilisez les balises <h1>, <h2>, <h3>, et <p> pour structurer l'article.
o Ajoutez des balises <br> là où vous pensez qu’un retour à la ligne est
nécessaire.
MODULE : HTML & CSS

2. Exemple de structure d’article :


MODULE : HTML & CSS

3. Étapes à suivre :
MODULE : HTML & CSS

o Créez un fichier nommé article.html avec le code fourni ci-dessus.


o Ouvrez ce fichier dans un navigateur pour voir le résultat.
o Vérifiez que les titres sont bien hiérarchisés, que les paragraphes sont
correctement espacés, et que les sauts de ligne sont bien placés.
1.6 Les éléments strong, em, et mark
1.6.1 Mise en valeur avec <strong>, <em>, et <mark>
Ces balises HTML sont utilisées pour appliquer différentes formes de mise en valeur au texte.
Elles permettent de renforcer le sens et l'importance du contenu d'une page web.
1. Balise <strong>
o La balise <strong> est utilisée pour indiquer que le texte a une importance
particulière. Visuellement, le texte est généralement affiché en gras.
o Exemple :

o Usage : Utilisez <strong> pour les éléments qui doivent être mis en avant de
manière significative dans le contexte du texte.
2. Balise <em>
o La balise <em> est utilisée pour ajouter une emphase sur le texte. Par défaut, le
texte est affiché en italique.
o Exemple :

o Usage : Utilisez <em> pour indiquer que le texte a une importance ou une
nuance particulière, mais pas au point d'être en gras.
3. Balise <mark>
o La balise <mark> est utilisée pour mettre en surbrillance du texte. Le texte est
généralement affiché avec un arrière-plan jaune ou une autre couleur de
surbrillance.
o Exemple :
MODULE : HTML & CSS

o Usage : Utilisez <mark> pour signaler des éléments importants ou des termes à
retenir, souvent pour des recherches ou des révisions.
Exercice pratique : Formater un texte pour lui donner une importance visuelle
Objectif : Utiliser les balises <strong>, <em>, et <mark> pour améliorer la présentation d’un
texte.
1. Instructions :
o Créez un fichier HTML.
o Écrivez un texte en utilisant les balises <strong>, <em>, et <mark> pour mettre
en valeur différentes parties du texte.
o Testez le rendu dans un navigateur pour voir comment les balises affectent
l’apparence du texte.
2. Exemple de texte formaté :

3. Étapes à suivre :
o Créez un fichier nommé formatage.html avec le code fourni ci-dessus.
o Ouvrez ce fichier dans un navigateur pour voir le résultat.
o Vérifiez que le texte est bien formaté selon les balises utilisées et que les
différences visuelles sont claires.
1.7 Listes ordonnées et non-ordonnées
1.7.1 Différence entre <ol> et <ul>, et l'usage de <li>
MODULE : HTML & CSS

Les listes en HTML permettent de présenter des éléments sous forme de liste, ce qui est utile
pour organiser l'information de manière claire et structurée. Il existe deux types principaux de
listes :
1. Listes ordonnées (<ol>)
o Les listes ordonnées sont utilisées pour afficher des éléments dans un ordre
spécifique. Les éléments de la liste sont automatiquement numérotés.
o Exemple :

o Usage : Utilisez <ol> lorsque l'ordre des éléments est important, par exemple,
dans les instructions ou les classements.
2. Listes non ordonnées (<ul>)
o Les listes non ordonnées sont utilisées pour afficher des éléments sans ordre
particulier. Les éléments sont généralement précédés de puces.
o Exemple :

o Usage : Utilisez <ul> lorsque l'ordre des éléments n'a pas d'importance,
comme dans une liste de courses ou une liste de caractéristiques.
3. Balise <li>
o La balise <li> est utilisée pour définir un élément de la liste, que ce soit dans
une liste ordonnée ou non ordonnée. Elle doit être placée à l'intérieur des
balises <ol> ou <ul>.
MODULE : HTML & CSS

o Exemple :

Exercice pratique : Créer une liste de courses ordonnée et une liste non ordonnée
Objectif : Utiliser les balises <ol>, <ul>, et <li> pour créer des listes structurées.
1. Instructions :
o Créez un fichier HTML.
o Créez une liste ordonnée pour une séquence d'étapes.
o Créez une liste non ordonnée pour une liste de courses.
o Testez le rendu dans un navigateur pour voir les listes affichées correctement.
2. Exemple de listes :
MODULE : HTML & CSS

3. Étapes à suivre :
o Créez un fichier nommé listes.html avec le code fourni ci-dessus.
o Ouvrez ce fichier dans un navigateur pour voir le rendu des listes.
o Assurez-vous que les listes ordonnées sont numérotées correctement et que les
listes non ordonnées sont précédées de puces.
1.8 Liens internes et liens externes
1.8.1 Créer des liens hypertextes avec <a>
Les liens hypertextes sont essentiels pour la navigation sur le web. Ils permettent aux
utilisateurs de se déplacer entre différentes pages ou sections d'une même page. La balise
HTML utilisée pour créer des liens est <a>, également connue sous le nom de balise
d'ancrage.
1. Création d'un lien vers une autre page :
o La balise <a> avec l'attribut href est utilisée pour définir l'URL vers laquelle le
lien doit pointer.
o Exemple :

o Usage : Utilisez cet exemple pour créer des liens vers des pages externes.
2. Création d'un lien vers une section de la même page (ancre) :
o Pour créer un lien vers une section spécifique de la même page, vous utilisez
des ancres. Attribuez un id à la section cible et utilisez un href avec un # suivi
de l'id pour le lien.
o Exemple :

o Usage : Utilisez les ancres pour naviguer à l'intérieur d'une même page,
souvent pour des menus de navigation ou des tables des matières.
MODULE : HTML & CSS

3. Création d'un lien vers une autre page du même site :


o Vous pouvez également créer des liens vers d'autres pages du même site en
utilisant des chemins relatifs.
o Exemple :

o Usage : Utilisez des chemins relatifs pour relier des pages au sein de votre site
web.
Exercice pratique : Créer un menu de navigation simple
Objectif : Utiliser la balise <a> pour créer des liens internes et externes, et organiser un menu
de navigation.
1. Instructions :
o Créez un fichier HTML avec un menu de navigation en haut de la page.
o Ajoutez des liens vers différentes sections de la même page et vers des pages
externes.
o Créez les sections correspondantes dans la même page pour les liens internes.
o Testez le rendu dans un navigateur pour vérifier que les liens fonctionnent
correctement.
2. Exemple de menu de navigation :
MODULE : HTML & CSS
MODULE : HTML & CSS

3. Étapes à suivre :
o Créez un fichier nommé menu.html avec le code fourni ci-dessus.
o Ouvrez ce fichier dans un navigateur pour voir le menu de navigation en
action.
o Assurez-vous que les liens internes vous dirigent vers les sections appropriées
de la même page et que le lien externe ouvre le site dans une nouvelle fenêtre.
MODULE : HTML & CSS

II. Les bases du CSS


2.1 Sélecteurs, propriétés et valeurs
2.1.1 Explication des sélecteurs de base
Les sélecteurs CSS sont utilisés pour cibler des éléments HTML spécifiques afin d'appliquer
des styles. Voici les sélecteurs de base les plus utilisés :
1. Sélecteur d'élément :
o Cible tous les éléments d'un type spécifique.
o Exemple :

§ Usage : Ici, tous les éléments <p> auront un texte bleu.

2. Sélecteur de classe :
o Cible tous les éléments ayant une classe spécifique. Pour cibler une classe,
vous utilisez un point . suivi du nom de la classe.
o Exemple :

§ Usage : Applique un fond jaune à tous les éléments portant la classe


highlight.

3. Sélecteur d'ID :
o Cible un élément unique qui possède un identifiant spécifique. Les identifiants
sont uniques dans une page et sont sélectionnés avec un # suivi du nom de l'ID.
o Exemple :
MODULE : HTML & CSS

§ Usage : Change la taille du texte pour l'élément avec l'ID header.

2.1.2 Propriétés CSS et valeurs


Les propriétés CSS permettent de définir des styles spécifiques pour les éléments HTML.
Chaque propriété accepte une ou plusieurs valeurs spécifiques.
1. Exemples de propriétés courantes :
o color: Détermine la couleur du texte.
o font-size: Spécifie la taille du texte.
o background-color: Définit la couleur de fond d'un élément.
2. Exemple d'utilisation des propriétés CSS :

o Explication :
§ Tous les paragraphes (<p>) auront un texte rouge, une taille de police
de 16 pixels et un fond gris clair.

2.1.3 Exercice : Appliquer un style de texte à une page HTML


Objectif :
Utiliser les sélecteurs CSS pour appliquer un style à une page HTML existante.
Étapes :
1. Créez une page HTML simple :
o Écrivez une page contenant un titre, un paragraphe et une liste d'éléments.
Ajoutez des classes et des identifiants pour personnaliser les styles.
MODULE : HTML & CSS

2. Créez une feuille de style CSS (styles.css) :


o Utilisez les sélecteurs d'éléments, de classes et d'ID pour styliser le contenu de
la page.
MODULE : HTML & CSS

3. Testez votre page dans un navigateur :


o Ouvrez la page HTML dans un navigateur pour voir les styles appliqués.
o Modifiez les styles dans le fichier CSS pour observer les changements en
temps réel.
2.2 Où écrire le CSS ?
Le CSS peut être appliqué de différentes manières dans une page HTML. Les trois méthodes
principales sont : le CSS en ligne, le CSS dans la balise <style> et le CSS dans un fichier
externe. Voyons chaque méthode en détail ainsi que leurs avantages et inconvénients.
2.2.1 CSS en ligne (Inline CSS)
Le CSS en ligne est écrit directement dans l'attribut style des balises HTML individuelles.
• Exemple :
MODULE : HTML & CSS

• Avantages :
o Simple à utiliser pour styliser un élément spécifique.
o Idéal pour des modifications rapides ou des styles uniques.
• Inconvénients :
o Difficile à maintenir si vous avez beaucoup de styles.
o Rend le code HTML moins lisible et organisé.
o Ne permet pas la réutilisation du style sur plusieurs éléments.
2.2.2 CSS dans la balise <style> (CSS interne)
Le CSS interne est placé dans la section <head> de votre document HTML à l'intérieur de la
balise <style>.
• Exemple :

• Avantages :
o Utile pour styliser une page entière sans avoir besoin d'un fichier externe.
o Centralisé dans la balise <head>, donc plus organisé que le CSS en ligne.
• Inconvénients :
o Moins efficace pour les grands sites web, car le style n'est pas réutilisable sur
plusieurs pages.
o Alourdit le fichier HTML.
2.2.3 CSS dans un fichier externe
Le CSS externe est écrit dans un fichier séparé avec l'extension .css et est lié à la page HTML
à l'aide de la balise <link> dans la section <head>.
• Exemple :
MODULE : HTML & CSS

Le fichier styles.css contiendra le CSS :

• Avantages :
o Permet de séparer le style et le contenu, rendant le code HTML plus lisible et
facile à maintenir.
o Le fichier CSS peut être réutilisé sur plusieurs pages, ce qui facilite la gestion
des styles à grande échelle.
o Optimise le chargement des pages : le fichier CSS est mis en cache par le
navigateur, ce qui accélère le temps de chargement des pages suivantes.
• Inconvénients :
o Nécessite un fichier supplémentaire, ce qui peut sembler plus complexe pour
les débutants.
o Les modifications rapides nécessitent d'éditer un fichier séparé.
2.2.4 Comparaison des méthodes
Méthode Avantages Inconvénients

CSS en ligne Rapide à implémenter pour un Difficile à maintenir à


seul élément. grande échelle.
CSS dans Organisé dans la section <head>. Alourdit le fichier
<style> HTML.
CSS externe Séparation claire entre style et Nécessite la gestion
contenu. d'un fichier externe.
MODULE : HTML & CSS

2.2.5 Exercice : Utiliser un fichier CSS externe


Objectif :
Apprendre à lier un fichier CSS externe à une page HTML et à utiliser cette méthode pour
styliser une page.
Étapes :
1. Créez un fichier HTML :

2. Créez un fichier CSS (styles.css) :

3. Liez le fichier CSS externe à votre page HTML :


o Assurez-vous que la balise <link> dans le fichier HTML pointe vers le bon
fichier CSS.
4. Testez la page dans un navigateur :
o Ouvrez la page HTML dans un navigateur et vérifiez que les styles définis
dans le fichier CSS sont correctement appliqués.
MODULE : HTML & CSS

2.3 Les commentaires en CSS


Les commentaires en CSS permettent d'ajouter des notes dans le code pour le rendre plus
lisible et compréhensible, sans affecter le rendu du style dans le navigateur. Ils sont essentiels
pour une bonne organisation du code, notamment lors de la collaboration sur un projet ou
pour se repérer dans un fichier CSS complexe.
2.3.1 Syntaxe des commentaires en CSS
En CSS, les commentaires sont écrits entre /* et */. Tout ce qui est contenu dans ces
délimiteurs est ignoré par le navigateur.
• Exemple de commentaire simple :

• Exemple dans un bloc de code CSS :

Les commentaires peuvent également être utilisés pour désactiver temporairement certaines
règles CSS lors du débogage :
• Exemple :
MODULE : HTML & CSS

2.3.2 Bonnes pratiques pour les commentaires en CSS


• Explication des sections : Les commentaires permettent de délimiter les différentes
sections du fichier CSS pour faciliter la navigation.

• Commentaires concis et pertinents : Les commentaires doivent rester simples et


décrire clairement la partie du code concernée.
• Utilisation modérée : Il est important de ne pas abuser des commentaires. Ils doivent
être utilisés là où c'est nécessaire, sans alourdir inutilement le fichier.
2.3.3 Exercice : Ajouter des commentaires dans un fichier CSS
Objectif :
Apprendre à utiliser les commentaires pour mieux organiser et structurer un fichier CSS.
Étapes :
1. Modifiez votre fichier CSS existant (styles.css) :
o Ajoutez des commentaires pour expliquer les différentes sections du style.

2. Testez la page dans le navigateur :


MODULE : HTML & CSS

o Les commentaires n'apparaîtront pas dans le navigateur, mais ils rendent le


code CSS plus lisible.
MODULE : HTML & CSS

Étude de Cas : Création d'une Page de Contact pour un Site Web

Contexte :
Vous êtes chargé de créer une page de contact pour un site web fictif d'une petite entreprise
appelée "ÉcoVoyage". Cette entreprise propose des services de voyage écologiques et
souhaite offrir un moyen facile à ses clients de les contacter pour plus d'informations ou pour
poser des questions. La page de contact doit inclure un formulaire simple que les visiteurs
peuvent remplir pour envoyer un message à l'équipe de support.

Objectifs du Projet :
1. Concevoir la structure HTML pour la page de contact.
2. Appliquer des styles CSS pour rendre le formulaire attrayant et fonctionnel.
3. Intégrer des fonctionnalités de base pour le formulaire de contact, y compris la
validation des champs.

Exigences du Projet :
1. Structure HTML :
o Créer une page HTML avec les éléments suivants :
§ Un en-tête avec le titre de la page.
§ Un formulaire de contact avec les champs suivants :
§ Nom
§ Email
§ Message
§ Un bouton de soumission.
§ Un message de confirmation après l'envoi du formulaire (à simuler).
2. Styles CSS :
o Ajouter des styles pour améliorer l'apparence du formulaire :
§ Mise en forme des champs du formulaire.
§ Design du bouton de soumission.
§ Disposition et alignement des éléments.
3. Validation du Formulaire :
o Assurez-vous que le formulaire valide les champs obligatoires.
o Les champs doivent être vérifiés avant l'envoi :
§ Le champ "Nom" doit être rempli.
MODULE : HTML & CSS

§ Le champ "Email" doit être au format email valide.


§ Le champ "Message" doit être rempli.

Vous aimerez peut-être aussi