Exercices : Initiation à l’intégration XHTML/CSS

Séance de cours n°2

Le document suivant a intégré en XHTML mais il présente plusieurs erreurs…

Récupérez le document contenant le code avec des erreurs,
Enregistrez le document au format .html sur votre ordinateur et le nommé sous la forme [exercice-1-nom-prenom].html (exemple : “exercice-1-eric-emery.html”),
Ouvrez le document avec un éditeur de code (bloc note),
Corrigez les 5 erreurs contenues dans la source HTML,
Enregistrez le document et vérifier son affichage dans un navigateur Internet,

Une fois corrigée, la page html correcte permettra d’afficher dans un navigateur Internet le contenu suivant :

Créer une page internet à partir du contenu proposé dans le document PDF.

Récupérer le code source vide de la page html de l’exercice 2,
Enregistrer le document sur votre ordinateur au format [exercice-2-nom-prenom].html (exemple : “exercice-2-eric-emery.html”),
Récupérer le contenu proposé dans le document PDF,
Se servir du contenu du document PDF pour remplir le code HTML de la page,
- Remplir le titre de la page,
- Remplir la description de la page,
- Remplir les mots clés de la page,
- Remplir la zone comprise entre <body></body> en utilisant les balises XHTML suivantes : <h1></h1>, <h2></h2>, <p></p>, <strong></strong>, <em></em>, <a href=”"></a>
Enregistrer la page en un fichier nommé [exercice-2-nom-prenom].html ,
Vérifier la cohérence de la mise en page de l’affichage et de la mise en page dans votre navigateur Internet, vous devez obtenir le résultat suivant :

L’envoyer en pièce jointe (compressée : zip,…) à l’adresse contact@natural-net.fr.

Récupérer le code source disponible dans le fichier texte page-web-source.txt,
Copier ce code source et le coller dans le "bloc note",
Enregistrer la page sous la forme exercice-3[nom-prenom].html,
Récupérer le contenu proposé à l’adresse : rendu-html.pdf (capture d’écran du rendu du document xhtml hiérarchisé sans css) et tp3-xhtml.txt (contenu textuel brut),
Coder la page html en remplissant les 2 grands contenus <head>…</head> et <body>…</body> (ne pas oublier le titre et les META),
Coder la page html en respectant l’organisation : titres, sous-titres, listes, liens,…
Ajouter les styles CSS dans l’entête du document pour obtenir dans le navigateur le rendu suivant : tp3-xhtml-ccs.pdf (capture d’écran du rendu du document xhtml hiérarchisé avec css). Les couleurs utilisées sur ce document sont :
- yellow
- black
- red
- green
Vérifier la cohérence de la mise en page de l’affichage et de la mise en page dans votre navigateur Internet
Valider le code xhtml : http://validator.w3.org/#validate_by_upload
Valider le code css : http://jigsaw.w3.org/css-validator/
L’envoyer en pièce jointe d’un mail la page produite à l’adresse contact@natural-net.fr avant la fin du cours.