Imbrication de blocs HTML HTML03

Cet article propose de manipuler des éléments de type bloc pour comprendre le principe d’imbrication de blocs.

Important avant de commencer

Utilisez du texte de type Lorem Ipsum pour avoir du contenu textuel lors de la réalisation de cette exercice.

Pour mieux visualiser le concept de boîte en HTML, nous allons utiliser la propriété CSS background-color en l’appliquant dans les balises ouvrantes avec l’attribut style :

                <p style="background-color: red;">Texte</p>
            

Consignes de l’exercice

Créez un dossier racine, intitulé html03-racine pour stocker les fichiers de l’exercice.

Créez une nouvelle page HTML sous le nom page1.html en prenant soin de bien placer le fichier dans le dossier racine créé précédemment.

Saisissez la structure de base suivante dans la page que vous venez de créer :

                <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
</head>
<body>
</body>
</html>

Afin de mieux voir les différents blocs, copier/coller les lignes 4,5 et 6 du code ci-dessous pour les intégrer à votre page.

                <!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { margin: 10px; padding:10px; }
</style>
<meta charset="UTF-8">
<title>Titre de la page</title>
</head>
<body>
</body>
</html>

Construisez la structure HTML suivante dans le fichier page1.html :

Modèle de blocs imbriqués

Pour chacun des éléments de la structure HTML créés à la question précédente, ajoutez une couleur d’arrière-plan différente (exemple : purple, yellow, green, etc.).

Vous pouvez consulter ci-dessous la correction pour le fichier page1.html. Si nécessaire, copiez/collez le code de la page pour le tester et observez les couleurs des différents éléments et en particulier de l’élément <div> qui est en vert.

Dans le dossier de votre site, créez une page HTML page2.html.

Modèle de blocs imbriqués

Pour chacun des éléments de la structure HTML créés à la question précédente, ajoutez une couleur d’arrière-plan différente. Pensez à modifier également la couleur d’arrière-plan de body pour modifier la couleur de la page complète.

Dans le dossier de votre site, créez une page page3.html.

Construisez la structure HTML suivante dans le fichier page3.html :

Modèle de blocs imbriqués

Pour chacun des éléments de la structure HTML créés à la question précédente, ajoutez une couleur d’arrière-plan différente.

Ouvrez à nouveau le fichier exo3_page1.html.

Insérez des emphases fortes strong sur quelques chaînes de caractères.

Pour chacune des emphases insérées à la question précédente, ajoutez une couleur d’arrière-plan différente.

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.