TP 2 - Premières pages web

Retour à la page de l'UE

Dans ce TP, vous devrez effectuer des actions et répondre à des questions. Vous devrez produire un compte-rendu du TP, qui sera un fichier du format de votre choix (texte, odt, pdf...). Les questions pour lesquelles il faudra écrire la réponse dans le compte-rendu auront ce style : encadrées en pointillés sur fond gris. Le rendu du TP se fera sur Jalon.

Exercice 1 : votre espace web

Dans votre répertoire personnel, créez un répertoire appellé www/, s'il n'existe pas. Dans ce répertoire, téléchargez le fichier bonjour_html.html de l'exercice 1 du TP 1 à l'aide de la commande wget. Pour rappel, l'URL de ce fichier est: http://www.i3s.unice.fr/~jplozi/intro_web_2016/exemples/bonjour_html.html

Renommez-le (commande mv) en index.html. Copiez index.html (commande cp) vers un fichier nommé toto.html. Modifiez toto.html (avec un éditeur de texte tel que gedit ou emacs) pour supprimer le texte barré.

Question 1.1. Accedez à http://www-mips.unice.fr/~login/index.html (vous devez remplacer login par votre nom d'utilisateur). Accédez maintenant à http://www-mips.unice.fr/~login/toto.html. Finalement, accédez à http://www-mips.unice.fr/~login/. Quelle page voyez-vous ? Qu'est-ce que cela signifie ?
Question 1.2. Accedez à file:///chemin/absolu/vers/www/index.html, où vous remplacerez /chemin/absolu/vers/www/ par le chemin absolu vers votre répertoire www (pour le trouver, utilisez par exemple la commande pwd). Si vous avez réussi, vous devriez voir votre page web s'afficher. Quelle différence y a-t-il entre y accéder de cette manière, et y accéder comme vous l'avez fait à la question précédente ?

Créez un répertoire titi dans votre répertoire www, et déplacez-y votre fichier toto.html.

Question 1.3. Dans votre navigateur, par quelle URL (commençant par http://) pouvez-vous désormais accéder à votre page toto.html?

Lancez cette commande sur index.html :

chmod a-r index.html
Question 1.4. Chargez à nouveau la page index.html dans votre navigateur. Que constatez-vous ? Qu'a fait la commande chmod précédente ? Vous pouvez utiliser son manuel et/ou rechercher sur internet pour trouver une réponse.

Pour annuler l'action de votre précédente commande chmod, utilisez :

chmod a+r index.html
Question 1.5. Créez un répertoire ~/www/images/. Sur Google Images, téléchargez une (petite) image et enregistrez-la dans ce répertoire. Modifiez votre page index.html afin d'afficher l'image en bas de votre page.
Question 1.6. Faites maintenant en sorte que lorsqu'on clique sur l'image, cela redirige l'utilisateur vers la page toto.html. Faites-le d'abord en utilisant un chemin relatif, puis en utilisant une URL complète. Copiez-collez les deux versions dans votre rapport.

Exercice 2 : votre page personnelle

Maintenant que vous êtes familiers avec l'utilisation de votre espace web, il est temps de créer une vraie page. Créez un répertoire expériences/ dans votre répertoire www. Déplacez-y tous les fichiers et répertoires de l'exercice précédent.

Question 2.1. Créez un nouveau fichier index.html dans www, avec un titre (balises title et h1) du type "Bienvenue sur la page personnelle de <votre nom> !". Ajoutez-y un petit paragraphe vous décrivant, expliquant que vous êtes un étudiant à l'université de Nice, en faisant en sorte que si l'utilisateur clique sur "université de Nice", il se retrouve sur http://www.unice.fr.
Question 2.2. Ajoutez cette phrase au début de votre page: "Ceci est une page web en français, sans intérêt pour l'instant, mais qui sera bientôt un chef d'œuvre !"... Avec les accents, les cédilles, et le caractère œ, en utilisant les codes HTML pour chacun de ces caractères !

Pour savoir comment créer un lien qui permet d'envoyer un courrier électronique, jetez un œil à la documentation (RFC) sur le mailto.

Question 2.3. Ajoutez en bas de votre page un paragraphe qui indique à l'utilisateur comment vous joindre, en indiquant votre adresse e-mail. Celle-ci doit être cliquable et permettre de vous envoyer un e-mail directement ! Vérifiez que cela fonctionne. Placez avant votre paragraphe un titre de niveau 2 ayant pour texte "Contact".
Question 2.4. Restructurez votre document: mettez tout ce que vous avez écrit entre le titre de la page et le titre de niveau 2 "Contact" dans une balise section. Mettez "Contact" et le texte en-dessous dans une autre balise section. Une fois que tout marche, copiez/collez le code HTML de votre page dans votre rapport.

Le problème avec ce que vous avez fait dans la question 2.3 est qu'une grande partie du spam sur internet provient de programmes qui parcourent le web automatiquement à la recherche d'adresses. Une solution pour éviter ce problème est de ne pas utiliser de lien, et d'écrire votre adresse e-mail dans une image.

Question 2.5. Avec gimp, ou tout autre programme de manipulation d'image, créez une image qui contient votre adresse e-mail. Supprimez le lien vers votre adresse e-mail, et remplacez le texte de votre adresse e-mail par cette image.
Question 2.6. Puisque vous avez gimp d'ouvert, profitez-en pour créer une image de favoris ("favicon", regardez le transparent à la fin du cours). Récupérez une image carrée qui vous plait sur internet, redimensionnez-la à la taille 96x96 pixels, enregistrez la quelque part au format PNG dans votre espace web, et faites le nécessaire dans votre fichier index.html !
Question 2.7. En bas de votre page, ajoutez un petit ascii art, i.e., un dessin créé avec des caractère texte avec une police à largeur fixe. Par exemple:
                  / <`     '> \
                 (  / @   @ \  )
                  \(_ _\_/_ _)/
                (\ `-/     \-' /)
                 "===\     /==="
                  .==')___(`==.    hjw
                 ' .='     `=.
Vous pouvez soit utiliser cet exemple, soit rechercher "ascii art" sur google pour trouver un dessin qui vous plaît davantage. Quelle balise devez-vous utiliser pour préserver le formattage et utiliser une police à largeur fixe ?

Nous voulons désormais que la page web soit bien indexée par les moteurs de recherche.

Question 2.8. Pour cela, ajoutez les balises meta author, description et keywords dûment complétées.

Pour aller plus loin...

Vous avez fini ? Faites des recherches sur internet pour essayer de comprendre CSS. Vous pouvez par exemple utiliser ce tutoriel. Utilisez du CSS pour embellir votre page personnelle !

Valid XHTML 1.1