TP 11 : corriger et optimiser code HTML et CSS
Souvent les développeurs front end doivent travailler sur du code qui n'a pas été développé par eux, voici donc un peu d'entrainement en termes de corrections et optimisations d'intégration HTML et CSS
Partie 1 : 10 erreurs dans le code HTML
- Récupérer le dossier compressé Télécharger le fichier (site.zip)
- Décompresser et enregistrer le dossier
- Le dossier contient une page web contenant au niveau de son code html 10 erreurs distinctes, vous devez retrouver ces 10 erreurs et les corriger
- Pour vous aider vous disposez ici d'une image vous fournissant la charte graphique de cette même page une fois les 10 erreurs corrigées
- : Voir la charte graphique
- Vous devez donc
- identifier les 10 erreurs,
- les corriger dans le document HTML "index.html" et sauvegarder ce document
- vérifier que la validateur du W3C ne détecte plus d'erreurs
Partie 2 : 7 erreurs dans le code CSS
- Récupérer le dossier compressé Télécharger le fichier (1,54 Mo 2016-12-15 17:55:04)
- Décompresser et enregistrer le dossier
- Le dossier contient une page web faisant appel à un fichier CSS nommé "style.css" contenant au niveau de son code 7 erreurs distinctes. Chaque erreur entraine des erreurs de mise en page spécifiques, vous devez retrouver ces 7 erreurs et les corriger
- Pour vous aider vous disposez ici d'une image vous fournissant la charte graphique de cette même page une fois les 7 erreurs corrigées : Voir la charte
- Vous devez donc :
- identifier les 7 erreurs,
- les corriger dans le document CSS "style.css" et sauvegarder ce document
Partie 3 : Optimisation du code html
- Etudier le code html de la page web "index.html" située dans le dossier compressé Télécharger le fichier (1,54 Mo 2016-12-15 17:55:04) de manière à améliorer la qualité du code html et le potentiel de référencement naturel de la page web
- Relever 3 à 5 améliorations à apporter et sur un document (word,...)
- les détailler
- préciser leur impact attendu
Partie 4 : modification du CSS pour optimiser l'impression
La page web contenu dans le répertoire suivant Télécharger le fichier (2html.zip 6,27 Mo 2016-12-15 18:12:54) n'est pas adaptée à l'impression, vous devez créer cette adaptation de manière à disposer :
- d'une impression en noir et blanc
- d'une impression sans image sauf le logo
- d'une impression uniquement de la zone de contenu utile (suppression du header et footer et de la sidebar)
- le tout en ajoutant le minimum de code CSS
