Dépannage HTML et CSS | Développement web

Introduction

Dans ce projet, vous allez apprendre à résoudre les problèmes d'affichage d'un site web et à vous assurer qu'il est correctement stylisé et structuré. L'objectif est de prendre un site web inachevé et de le rendre ressemblant au produit fini souhaité.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

à identifier et à résoudre les problèmes dans le fichier HTML
à mettre à jour le fichier CSS pour appliquer les styles corrects
à vous assurer que le site web est affiché avec la largeur et la mise en page souhaitées

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Analyser et résoudre les problèmes de code HTML et CSS
Appliquer des techniques pour structurer et styliser correctement les pages web
Mettre en évidence l'importance de la minutie dans le développement web

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") subgraph Lab Skills html/basic_elems -.-> lab-300060{{"Réparer les problèmes d'affichage du site web"}} html/head_elems -.-> lab-300060{{"Réparer les problèmes d'affichage du site web"}} html/layout -.-> lab-300060{{"Réparer les problèmes d'affichage du site web"}} html/doc_flow -.-> lab-300060{{"Réparer les problèmes d'affichage du site web"}} html/embed_media -.-> lab-300060{{"Réparer les problèmes d'affichage du site web"}} end

Configurer la structure du projet

Dans cette étape, vous allez configurer le projet et ouvrir les fichiers dans l'éditeur.

Ouvrez l'éditeur et vous devriez voir les fichiers suivants : index.html, style.css et les fichiers d'images html5logo.png, css3-logo.png, nav-btn.png et evolution.png.
Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.
Ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Corriger l'affichage du site web

Dans cette étape, vous allez examiner la structure HTML de la page et à partir de là, vous trouverez le problème pour corriger le désordre d'affichage de la page.

Ouvrez le fichier index.html dans l'éditeur de code.
Examinez le fichier index.html et remarquez que la balise <link> pour le fichier CSS a le nom de fichier incorrect. Mettez à jour l'attribut href pour qu'il pointe vers le fichier correct, style.css.

<link rel="stylesheet" href="style.css" />

Le fichier HTML contient les principales sections suivantes :
- <header> : inclut le titre du site web et le menu de navigation.
- <div class="content"> : contient le contenu principal de la page, y compris une section en une colonne, une section en trois colonnes et une section en deux colonnes.
- <footer> : inclut le pied de page du site web avec des liens.
Enregistrez les modifications dans le fichier index.html.
Raffraîchissez la page dans votre navigateur après la correction du bogue et vous verrez l'effet suivant :

Résultat de l'affichage du site web corrigé

Félicitations! Vous avez réussi à corriger l'affichage du site web en mettant à jour les fichiers HTML et CSS.

✨ Vérifier la solution et pratiquer

Sommaire

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.