Table des matières

I - Langage HTML et CSS 3

1. Exercice 1: Création d'une page d'accueil 3

2. Exercice 2: Mise en forme avec CSS 4

3. Exercice 3: Intégration d'images et de liens 4

4. Exercice 4: Formulaires HTML 5

5. Exercice 5: Responsive Design avec CSS 6

6. Exercice 6: Utilisation avancée de CSS 6

Langage HTML et CSS

1. Exercice 1: Création d'une page d'accueil

Rubriques :

1. Entête (Header) : Ajoutez un en-tête avec le titre de la page.

2. Navigation (Nav) : Créez une barre de navigation avec au moins trois liens.

3. Section principale (Main) : Incluez une section principale avec du texte.

4. Barre latérale (Sidebar) : Ajoutez une barre latérale avec une liste d'éléments.

5. Section de pied de page (Footer) : Insérez une section de pied de page avec des informations de
contact.

2. Exercice 2: Mise en forme avec CSS

Rubriques :

1. Styles de base : Appliquez une couleur de fond et une couleur de texte à la page.

2. Mise en forme de l'en-tête : Ajoutez une bordure au titre de l'en-tête.

3. Stylisation de la barre de navigation : Modifiez la couleur de fond des liens de la barre de

navigation au survol.

4. Style de la section principale : Appliquez une ombre à la section principale.

5. Personnalisation de la barre latérale : Changez la couleur du texte dans la barre latérale.

 6. Style du pied de page : Ajoutez une bordure supérieure au pied de page.

3. Exercice 3: Intégration d'images et de liens

Rubriques :

1. Ajout d'une image : Intégrez une image à la section principale.

2. Création de liens : Ajoutez des liens dans la barre latérale vers différentes pages.

3. Liens externes : Insérez un lien externe dans le pied de page vers un site Web externe.

4. Exercice 4: Formulaires HTML

Rubriques :

1. Création d'un formulaire : Ajoutez un formulaire de contact dans la section principale.

2. Champs de formulaire : Incluez des champs tels que Nom, Email et Message.

3. Bouton de soumission : Ajoutez un bouton de soumission avec une classe CSS.

5. Exercice 5: Responsive Design avec CSS

Rubriques :

1. Media Queries : Ajoutez des médias requêtes pour rendre le site réactif.

2. Menu de navigation mobile : Créez un menu de navigation qui s'affiche sur les petits écrans.

6. Exercice 6: Utilisation avancée de CSS

Rubriques :

1. Grilles CSS : Créez une mise en page à l'aide de CSS Grid.

2. Flexbox : Utilisez Flexbox pour aligner les éléments dans la barre latérale.

3. Transitions : Ajoutez une transition à l'ombre de la section principale.