Menu

TD 4 et 5 : 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)
• Convertisseur en ligne : pour transformer du HTML 4.01 en XHTML : http://infohound.net/tidy/
• 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

Addendum : notion de lien vers un fragment

Définition : Un fragment est un élément ou un sous-arbre constitué par un élément et ses sous-éléments. Lorsque'un fragment est identifié par l'attribut id d'un élément, on peut définir des liens vers ce fragment, plutôt que la totalité de la page qui le contient. Pour cela, il suffit de rajouter le caractère "#" (dièse) à la fin de l'URL, suivi de l'id de l'élément visé. Cela indique au navigateur qu'il doit défiler dans la page pour que cet élément se retrouve en haut de l'écran (si possible).
Exemple : l'ancre de lien <a href="#fragment"> permet de se positionner dans cette section (voir code source de la page).

Préambule

Créez un répertoire "TD4-5", 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 "TD4-5" que les fichiers dont le rendu est demandé).

HTML et XHTML

Apportez (ou rédigez en 10 minutes) un CV succinct et adaptez-le pour le présenter sous forme de plusieurs pages Web. Ces différentes pages correspondent à des "rubriques" et sont décrites ci-dessous. Elles seront reliées entre elles par un menu.

Structure des pages

Chacune des pages comportera trois blocs de texte :

1. un bloc titre comportant
   • un titre principal contenant votre nom
   • un titre de niveau 2 indiquant votre profession
2. un bloc menu, composé
   • d'un titre de niveau 2
   • d'un lien vers le haut de la page
   • des lignes suivantes : "Présentation", "Formation", "Expérience", "Divers"
3. Un bloc principal, destiné à contenir les informations présentées dans chacune des pages (détaillées dans les sections suivantes)

À la fin du TP, la structure de vos pages devra ressembler à l'image suivante.

Remarque : pour l'instant, les styles et le positionnement ne sont pas réalisables (vous les réaliserez en CSS).

À faire : placez des liens sur les lignes du menu, pointant respectivement vers les pages (locales) "index.html", "formation.html", "experience.html", "divers.html". Ces pages n'existent pas encore, les questions suivantes vont vous permettre de les créer.

Contenu des différentes pages

Récupérez (ou rédigez en 10 minutes) un CV succinct. Pour la rédaction du code HTML, 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.

Page de présentation

Copiez votre page de structure dans un fichier nommé "index.html". Complétez le bloc principal pour qu'il contienne :

• des paragraphes indiquant votre état civil, votre adresse, etc.
• un paragraphe de description (par exemple, votre devise)
• une photo

Page "formation"

Copiez votre page de structure dans un fichier nommé "formation.html". Complétez le bloc principal pour qu'il contienne une liste indiquant votre formation. Chaque item de cette liste comportera :

• une date ou période
• l'intitulé de la formation suivie

Page "expérience"

Copiez votre page de structure dans un fichier nommé "experience.html". Complétez le bloc principal pour qu'il contienne un tableau indiquant votre expérience professionnelle. Chaque ligne du tableau comportera :

• une date ou période
• l'intitulé de la position occupée
• le nom de l'entreprise ou organisme

Page "divers"

Copiez votre page de structure dans un fichier nommé "divers.html". Complétez le bloc principal en laissant libre cours à votre imagination. La structuration devra toutefois être en accord avec le contenu...

Ajout de liens internes aux pages

• Dans les différentes pages de votre CV, identifiez (i.e. spécifiez un attribut id) les éléments importants de votre bloc principal (par exemple, les titres de niveau 2 ou 3, les items de liste ou les lignes d'un tableau).
• Dans le bloc de menu de chaque page, créez des sous-menus qui pointent vers les fragments correspondants de la page courante
• Vérifiez-en le bon fonctionnement

Instructions

1. Vérifiez l'affichage de chacune des pages sur les navigateurs installés sur votre machine
2. Si ce n'est pas déjà fait, transformez ces documents en XHTML strict, (même si vous devez perdre quelques caractéristiques de présentation). Pour cela, vous pouvez utliser XMLSpy ou Tidy (voir plus haut, rubrique "Outils" -> "Convertisseur en ligne")
3. Validez ce document avec l'outil de validation de XMLSpy puis avec le validateur du W3C : http://validator.w3.org/
4. Sauvegardez ces fichiers dans un répertoire "XHTML" de "TD4-5".

CSS

Création

• Dans chacune des pages de votre CV, rajoutez un lien vers une feuille de style commune "CV.css".
• Écrivez cette feuille de style pour qu'elle regroupe toutes les caractéristiques de mise en forme communes à vos pages XHTML.
• Spécifiez-y les marges de votre page et positionnez votre photo de façon absolue à l'écran.
• Validez votre feuille de style avec le validateur du W3C : http://jigsaw.w3.org/css-validator/
• Réenregistrez ces deux fichiers (XHTML et CSS) dans le dossier "XHTML"

Utilisation d'une feuille existante

• Créez un nouveau dossier nommé "CSS" et dupliquez-y votre travail.
• Allez sur le site http://www.oswd.org/ et choisissez une feuille de style adaptée à la présentation de votre CV.
• Modifiez votre CV pour que les pages fassent référence à cette feuille de style et pour qu'elles appliquent correctement les styles qui y sont définis.
• Sauvegardez ces fichiers dans un répertoire "CSS"

Rendu du TP

• Récupérez le fichier "Rendu.xsd"
• Créez un fichier "contenu.xml" valide selon ce schéma et décrivant les contenus du répertoire "TD4-5"
• Placez ce fichier à la racine de votre répertoire "TD4-5" et zippez l'ensemble du répertoire
• Renommez votre fichier .zip : PANIST1_TD45_NomEtd1_NomEtd2.zip
• Envoyez ce fichier zip par mail à Lionel Médini pour le 24 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.