1. Préparation

2. Validation et correction de pages HTML

La validation d'une page web est importante. Cela permet d'être sûr que la structure de la page est correcte et qu'il n'y a pas de fautes, c'est-à-dire que la syntaxe du langage HTML5 est bien respectée.

Dans ce premier exercice, vous allez effectuer ce travail de vérification sur le code d'un mini site existant

3. Création d'un mini site personnel

Vous aller créer un mini site Web personnel présentant votre CV, votre emploi du temps et une galerie de photographies personnelles. Dans ce TP, nous nous focaliserons uniquement sur la description et la structuration du contenu du site à l'aide du langage HTML (Hyper Text Markup Language), sans nous soucier de son apparence sur laquelle nous travaillerons lors de séances ultérieures consacrées au langage CSS (Cascading Style Sheets). La vidéo ci-dessous vous montre le site que vous allez essayer de produire aujourd'hui.

3.1: Création d'une page CV

1. Créez un fichier HTML portant le nom monCV.html. Ce fichier sera composé des éléments suivants :
   • une partie en tête (balise head) dans laquelle vous définirez le titre de votre page (balise title),
   • une partie corps (balise body),
   
   
2. Créez à l'intérieur du corps de votre page un en-tête constitué d'un titre, par exemple Site Personnel de XXX, et d'un sous titre, par exemple Mon CV. Pour distinguer le titre du sous titre vous pourrez utiliser les balises h1 h2.
   Il peut être intéressant, en particulier pour lors la définition de l'apparence du site avec les CSS, d'imbriquer ces éléments à l'intérieur d'une balise sémantique header.
   
   
3. Vous allez maintenant créer une section regroupant les informations d'état civil (Nom, Prénom, date de naissance, ...) ainsi qu'une photographie personnelle. Délimitez celle-ci par une balise section et insérez à l'intérieur de cet élément les éléments suivants:
   • un titre, Etat Civil, mis en évidence par une balise h2,
   • votre photographie à l'aide d'une balise img.

     Si vous ne disposez pas encore d'une photographie personnelle sous forme numérique vous pouvez, en attendant, utiliser l'image ci-dessous que vous pourrez enregistrer sur votre compte par un clic droit avec la souris puis sélection de l'item "Enregistrer l'image sous..." du menu contextuel.

     
   • Vos informations état civil (Nom, Prénom, date de naissance, ...) que vous placerez chacune à l'intérieur d'un élément p.
   
   
4. Sur le même modèle que la section Etat Civil ajoutez les sections suivantes :
   • Diplômes
   • Compétences Informatiques
   • Expériences professionnelles
   • Activités et loisirs
   
   
5. Complétez au moins l'une des sections précédentes en listant ses éléments sous forme de liste à puces (balise ul), ou de liste numérotée ((balise ol) ou de liste de descriptions (balise dl). Vous ferez les autres ultérieurement après avoir réalisé les exercices suivants.
   
   

6. Vérifiez que votre code est conforme à la norme HTML5 du W3C. Pour cela utilisez le service de validation du W3C (https://validator.w3.org/nu) vu dans l'exercice 2.

3.2 : Tables HTML

Créez un second fichier HTML, agenda.html, en respectant la même structure que le fichier monCV.html, à savoir:

1. un élément header contenant un titre (Site Personnel de XXX) et un sous titre (Emploi du Temps).
   
   
2. un élément section présentant votre emploi du temps hebdomadaire sous la forme d'un tableau HTML (balise table).

   Ce tableau comportera une colonne par jour et une ligne par tranche horaire de cours, et devra contenir des cours s'étalant sur au moins deux horaires comme dans l'exemple ci dessous.

   

   Inutile d'essayer de présenter votre emploi du temps réel, contentez vous de reproduire l'emploi du temps ci dessus. Pour définir des cellules de tableau s'étendant sur plusieurs lignes ou plusieurs colonnes, utilisez les attributs rowspan et rowspan de la balise td. Par ailleurs, pour matérialiser les bords des cases de votre tableau, vous utiliserez un attribut border=1 pour votre balise table. Cet attribut a vocation à disparaître avec HTML5, nous verrons par la suite comment le remplacer par un style CSS comme le préconise le W3C.

3. Comme dans l'exercice 1, pensez à vérifier que votre HTML est correct avec le service de validation du W3C.

3.3 Liens hypertextes

Dans cette partie, vous allez mettre en place dans votre site différents types de liens hypertextes (balise a) :

1. Des liens vers des ressources d'autres sites. Par exemple, dans la table présentant votre emploi du temps vous pourrez mettre un lien entre le nom de matière et le site web de celle-ci si elle existe. Ainsi pour le cours d'Algorithmique, vous pouvez ainsi pointer vers la page moodle du cours Algorithmique du M2CCI de l'ufr IM²AG.

   

2. Des liens entre resources de votre site. Pour cela, mettez en place des liens de navigation qui permettent de passer d'une page de votre site à l'autre, c'est à dire un lien de la page monCV.html vers la page agenda.html et inversement. Ces liens étant destinés à effectuer une navigation rapide dans votre site, il est habituel de les faire apparaître en haut de page (pour vous sous l'élément header contenant le titre et sous titre de votre page). HTML5 permet de leur associer une sémantique de navigation en les plaçant à l'intérieur d'un élément nav, cela facilitera ensuite la mise en forme de ces éléments avec les styles CSS.

3. Des liens internes à un document. Par exemple, pour pouvoir accéder rapidement aux différents éléments de votre CV, vous mettrez en place un sommaire dans votre page monCV.html.

   

   Pour effectuer une navigation rapide dans votre CV comme sur la figure ci-dessus, procédez comme suit:

   • ajoutez un attribut id) à l'élement titre des différentes sections de votre CV,
   • après l'en tête de votre CV (élément header) ajoutez un élément section contenant :
     • Sommaire dans un element titre (h3)
     • une liste de liens vers les différentes sections

3.4 Image réactive

Il s'agit de doter votre mini site d'une page d'accueil (index.html) présentant un menu permettant de choisir entre :

1. La page d'accueil de l'ufr IM²AG,
2. La page d'accueil du serveur moodle de l'ufr IM²AG (le placard électronique),
3. Votre CV.

Ce menu est réalisé à l'aide d'une image réactive.

Affichage de l'image

Récupérez l'image contenue dans ce fichier menu.png (vous pouvez procéder comme indiqué sur la figure ci-dessous) et créez une page index.html contenant:

• le titre Menu,
• cette image.

Rendre l'image réactive

Rendez l'image réactive (voir balise map) en définissant trois zones associées aux URL suivantes :

• https://im2ag.univ-grenoble-alpes.fr/ pour le lien vers l'UFR IM²AG,
• https://im2ag-moodle.univ-grenoble-alpes.fr pour le placard électronique,
• monCV.html pour votre CV.

Il existe de nombreux outils pour construire des images réactives. Parmi ceux-ci on peut noter GIMP (GNU Image Manipulation Program), un logiciel gratuit offrant de nombreuses et puissantes fonctionalités de manipulation d'image dont en ce qui nous concerne la création d'images réactives (voir le tutorial How To Create An Image Map Using GIMP de Tim Lenahan).

Permettre la navigation dans le site

Pour faciliter la navigation dans votre site, ajoutez dans les pages monCV.html et agenda.html des liens qui permettent de retourner directement sur la page d'accueil.

3.5 : galerie de photographies

S'il vous reste du temps vous pouvez enrichir votre site d'une galerie de photographies. Pour cela créez une nouvelle page, photos.html et ajoutez aux pages de votre site le ou les liens qui permettront d'y accéder.

Pour constituer cette galerie vous pouvez utiliser les images contenues dans cette archive photos.zip