Scribd
Importer
14 vues3 pages

Exercices HTML - CSS - 1

Transféré par

moukokoyoris45
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
14 vues3 pages

Exercices HTML - CSS - 1

Transféré par

moukokoyoris45
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/ 3

Exercice 1 : Structure de Base HTML

Objectif : Créer un document HTML simple avec la structure de base.

Instructions

• Crée un fichier index.html.


• Ajoute la structure de base HTML :
• Inclue le <!DOCTYPE html>, la balise <html> avec lang="fr", et la section <head>.
• Dans le <head>, ajoute :
• <title> : Le titre de ta page.
• <meta charset="UTF-8"> pour l’encodage.
• Dans le <body>, ajoute un <h1> avec un titre de ton choix et un <p> pour un court paragraphe.

Exercice 2 : Utilisation des Balises de Texte et Images


Objectif : Apprendre à utiliser les balises de texte et d’images.

Instructions

• Dans le fichier index.html, ajoute :


• Un titre principal avec <h1>.
• Un sous-titre avec <h2>.
• Trois paragraphes avec <p>.
• Insère une image avec <img> :
• Utilise un fichier d’image de ton choix (ou trouve une image en ligne).
• Assure-toi d’ajouter un attribut alt décrivant l’image.

Exercice 3 : Créer une Liste de Liens


Objectif : Créer des liens et des listes pour organiser du contenu.

Instructions

• Dans le fichier index.html, ajoute une section avec un titre <h3>.


• Crée une liste non ordonnée (<ul>) contenant trois liens (<a>) vers des sites de ton choix.
• Crée une autre liste ordonnée (<ol>) contenant trois étapes d’une recette, d’un exercice ou de
quelque chose que tu aimes.

Exercice 4 : Appliquer du Style avec du CSS Interne


Objectif : Appliquer du style directement dans HTML en utilisant CSS interne.

Instructions

Dans ton fichier index.html, ajoute une balise <style> dans la section <head>.
Dans le bloc <style>, applique les styles suivants :
• Change la couleur du texte du <h1>.
• Mets le texte du <h2> en italique.
• Modifie la couleur de fond de tes paragraphes (<p>).
• Centrer l’image.
Exercice 5 : Création et Utilisation d’une Classe CSS
Objectif : Apprendre à styliser des éléments en utilisant des classes CSS.

Instructions

Dans le fichier index.html, crée trois paragraphes <p> et donne à chacun la classe important.
Dans le bloc <style>, ajoute une classe .important :
Change la couleur du texte.
Change la taille de la police.
Ajoute un soulignement.

Exercice 6 : Création d’un Fichier CSS Externe


Objectif : Apprendre à utiliser un fichier CSS externe pour styliser une page.

Instructions

• Crée un fichier style.css.


• Lien le fichier style.css dans index.html avec <link rel="stylesheet" href="style.css"> dans la
section <head>.
• Dans style.css, ajoute :
• Un style pour le <body> : couleur de fond différente et une police sans-serif.
• Un style pour le <h1> : couleur de texte différente et texte centré.
• Un style pour les liens <a> : couleur de texte, suppression du soulignement.

Exercice 7 : Styliser avec Marges et Espacements


Objectif : Pratiquer l’utilisation de margin et padding pour espacer les éléments.

Instructions

Dans style.css, ajoute les styles suivants :


• Un style pour le titre principal <h1> avec une marge extérieure (margin) pour l’espacer du haut
de la page.
• Un style pour les paragraphes <p> avec une marge intérieure (padding) pour espacer le texte
des bords.
• Un style pour l’image, avec une marge extérieure pour l’éloigner des autres éléments.

Exercice 8 : Application de Couleurs et d’Effets de


Survol
Objectif : Utiliser les couleurs et l’effet de survol (hover) en CSS.

Instructions

Dans style.css, ajoute :


Un style pour les liens (<a>) avec une couleur de texte différente.
Un effet de survol (:hover) pour que le lien change de couleur lorsque l’on passe la souris dessus.
Exercice 9 : Créer une Carte Simple avec des Styles
CSS
Objectif : Créer une "carte" pour organiser des informations dans une mise en page
agréable.

Instructions

Dans index.html, ajoute une div avec la classe carte qui contiendra :
• Une image (par exemple, une image de produit ou de profil).
• Un titre pour la carte (<h2>).
• Une description courte (<p>).

Dans style.css, ajoute un style pour .carte :


• Donne-lui une largeur fixe, un fond clair, des marges et du padding.
• Ajoute une bordure et arrondis les coins avec border-radius.
• Ajoute une ombre avec box-shadow.

Vous aimerez peut-être aussi