TD 5 et 6 : HTML, XHTML, CSS et autres langages dédiés au Web

Objectifs pédagogiques du TP

• Se familiariser avec les principaux langages de description de documents utilisés côté client : (X)HTML, XML, CSS, XSL, SVG
• Avoir un aperçu des autres technos disponibles et savoir les intégrer dans une page Web

Outils

• Logiciels installés sur les machines de TP : Navigateurs Web, éditeur de texte, Editeur HTML WYSIWYG (Microsoft Frontpage ou autre), Altova XMLSpy
• Logiciel libre que vous pouvez installer chez vous : éditeur HTML + validateur XML : HTML-Kit  (http://www.chami.com/ ou copie locale accessible ici) + plugin XML Validator (menu Tools/Install/Install Plugin)
• Tutoriels : voir partie "Liens utiles" de la page d'accueil du cours
• Ressources : site d'Open Source Web Design, qui propose des feuilles de style CSS à télécharger

Préambule

Créez un répertoire "TD5-6", dans lequel vous archiverez tous les fichiers à rendre dans ce TD. Créez un deuxième répertoire temporaire, dans lequel vous effectuerez les manipulations demandées (merci de ne placer dans "TD5-6" que les fichiers dont le rendu est demandé).

HTML

1. Rédigez un CV succinct en HTML (et en 10 minutes). Ce CV devra comporter, en plus du texte : des liens, une image (votre photo ?), des listes, des tableaux et d'autres éléments de mise en forme que vous trouverez sur les différents tutoriels.
   Tous les coups sont permis :
   • taper directement le code à la main : au début, cela para ît fastidieux, mais au moins, on sait ce qu'on fait,
   • utiliser un logiciel WYSIWYG présent sur les machines de TP : normalement, FrontPage doit être installé sur les machines de TP,
   • faire du copier-coller de code source de pages ou d'exemples de code trouvés sur Internet et le modifier.
2. Vérifiez l'affichage de ce document sur les navigateurs installés sur votre machine et validez ce document avec le validateur du W3C : http://validator.w3.org/.
3. Sauvegardez ces fichiers dans un répertoire "HTML" de "TD5-6".

XHTML

1. Ouvrez votre document avec XMLSpy et transformez-le en XHTML strict, même si vous devez perdre quelques caractéristiques de présentation. Validez-le avec l'outil de validation de XMLSpy puis avec celui du W3C.
2. Sauvegardez ce fichier dans un répertoire "XHTML" de "TD5-6".

SVG

A l'aide du pointeur de W3Schools sur SVG, utilisez l'outil de création SVG de XMLSpy pour réaliser une figure simple : créez un nouveau document, et choisissez le type SVG. Insérez un ou plusieurs éléments disponibles dans la palette "Elements" (à droite) dans la partie taggée "your graphic here" de votre document.

Visualisez le résultat avec Firefox (IE n'intègre pas ne standard de visualisateur SVG...).

Autres technos

Rédigez une nouvelle page Web en y incluant différents types d'objets externes : animations Flash, applets Java, fichier SVG... Enregistrez le tout dans un répertoire "Divers".

Remarque : attention aux problèmes de droits d'auteur...

CSS

Création

• Reprenez votre CV en XHTML et rajoutez-y une référence à une feuille de style "CV.css".
• Écrivez cette feuille de style pour retrouver toutes les caractéristiques de mise en forme que vous avez perdues lors de la transformation en XHTML.
• Spécifiez les marges de votre page et positionnez votre photo de façon absolue à l'écran.
• Réenregistrez ces deux fichiers (XHTML et CSS) dans le dossier "XHTML"

Utilisation d'une feuille existante

• Allez sur le site http://www.oswd.org/ et choisissez une feuille de style adaptée à la présentation de votre CV.
• Modifiez votre fichier XHTML pour qu'il fasse référence à cette feuille de style et pour qu'il applique correctement les styles qui y sont définis.
• Sauvegardez ces fichiers dans un répertoire "CSS"

Rendu du TP

Vous enverrez par mail la totalité des fichiers générés sous forme d'un fichier ZIP contenant l'arborescence de fichiers du dossier "TD5-6" à Lionel Médini pour le 29 janvier au matin.

Attention : vérifiez bien que les lien entre les différents fichiers que vous allez rendre ne font pas référence à votre système de fichier propre.