TP n°1 - Le langage HTML

Objectifs

L’objectif de ce TP est de découvrir le langage HTML au travers de la création d’un mini site web. Vous pouvez travailler indifféremment sous Windows, Mac OS, ou Linux (préféré). Vous aurez besoin d’un navigateur web (e.g. Firefox ou Chrome) et d’un éditeur de texte (e.g. Visual Studio Code).

Préambule

Avant toute chose il vous est recommandé de créer un répertoire itw dans lequel vous rangerez les différents travaux réalisés au cours des séances de TP. Il est conseillé de créer ce répertoire au sein du répertoire public_html de votre compte Unix. Le département MIASHS utilise le répertoire public_html de votre compte Unix comme racine pour votre page personnelle accessible à l’adresse suivante : http://localhost/~votre-login.

Enfin, Il est également conseillé de créer un sous-répertoire consacré à chaque TP, par exemple tp01, tp02, etc.

Pour comprendre l’utilisation des balises HTML utilisées dans ce TP des liens vous renvoient vers la documentation MDN correspondante (https://developer.mozilla.org).

Astuce : par défaut, votre navigatuer suit généralement les liens en remplaçant la page courante. Pour ouvrir un lien dans un nouvel onglet, il est souvent possible de maintenir la touche control (linux et windows) ou commande (mac) lorsque vous le sélectionnez.

Exercice 1 : Création d’une page CV

Créez un fichier HTML portant le nom monCV.html dans le répertoire du TP. Ce fichier sera composé des éléments suivants :
- en-tête (balise head) dans laquelle vous définirez le titre de votre page (balise title),
- corps (balise body),
- à l’intérieur du corps de votre page un premier titre (balise h1).
Si vous avez suivi les conseils donnés dans le préambule, vous devriez pouvoir accéder à cette page à l’adresse suivante : http://localhost/~votre-login/itw/tp01/monCV.html (en remplaçant votre-login par votre login).
Créez un paragraphe (balise p) sous le titre et insérez votre photographie dans celui-ci (balise img) ainsi que vos informations d’état civil (nom, prénom, date de naissance, …).

Si vous ne disposez pas encore d’une photographie personnelle sous forme numérique vous pouvez, en attendant, utiliser l’image ci-dessous : (click droit -> enregistrer l’image)
Faite en sorte que votre image soit accessible aux visiteurs qui ne peuvent la visualiser, par exemple les malvoyants (jetez un œil aux attributs de la balise img). Ne jamais négliger l’accessilibité d’un site internet !
Ajoutez les sections suivantes :
- Diplômes
- Expériences professionnelles
- Activités et loisirs
Chaque section sera délimitée par une balise (balise section) et débutera par son titre (balise h2).
Complétez au moins l’une des sections précédentes en listant ses éléments sous forme de liste à puces (balise ul). Vous pouvez également utiliser les listes ordonées (balise ol) et les listes de descriptions (balise dl).

Exercice 2 : Tables

Créez un second fichier HTML (agenda.html).
Dans ce second document présentez votre emploi du temps hebdomadaire sous la forme d’un tableau (balise table). Ce tableau comportera un en-tête, une colonne par jour, et une ligne par tranche horaire de cours.

Mettez en place des liens de navigation qui permettent de passer directement de la page monCV.html à la page agenda.html et inversement (balise a).
Afin de pouvoir remonter directement au début de votre CV (fichier monCV.html), ajoutez un attribut id) au titre de votre page et un lien vers cet élément à la fin de votre page.
Pour mettre en place un sommaire dans votre page CV :
- ajoutez un attribut id à chaque titre de section,
- ajoutez une section de titre Sommaire après le titre de votre CV,
- dans cette section ajoutez une liste de références à ces différentes ancres.

Exercice 4 : Page d’accueil

Il s’agit de doter votre mini site d’une page d’accueil (index.html) permettant d’accéder à :

votre CV,
la page d’accueil de l’UFR SHS,
un lien permettant de vous écrire un mail,

Vous utiliserez trois logos agissant comme liens.

Créer la page

Tout d’abord récupérez les trois images suivantes :

cv.svg pour votre CV,
mail.svg pour le lien mail,
ufr.svg pour la page d’accueil de l’UFR SHS.

Enregistrez ces trois images dans le répertoire images à la racine de votre site.

Puis créez la page index.html contenant :

le titre « Accueil »,
ces trois images.

Permettre aux visiteurs d’accéder aux différentes pages de votre site en cliquant sur chaque image :

votreNom.html pour votre CV.
mailto:<email> pour votre email (remplacer <email> par votre adresse email). Notez que sur un site web accessible au public, il est souvent nécessaire de ne pas laisser votre email aussi facilement accessible afin de vous prémunir des pourriels.
https://shs.univ-grenoble-alpes.fr/ pour le lien vers l’UFR SHS.

Accessibilité

Assurez vous que la page reste utilisable pour les visiteurs qui ne peuvent pas visualiser les images.

Retour à l’accueil

Pour faciliter la navigation dans le site, ajoutez des liens permettant de retourner sur la page d’accueil sur les pages monCV.html et agenda.html.

Ce sujet de TP a bénéficié du travail de Philippe Genoud, Manuel Atencia Arcas, Quentin Roy et Dima Dalloul.