Université Nice-Sophia Antipolis
2012-2013
Licence Info, Maths, Maths Info 1
retour sur la page d'accueil du cours

Introduction au Web
TD - HTML, éléments de base
- ENONCE -

Objectif: démarrer avec HTML, créer des exemples simples illustrant le balisage structurel, les liens hypertextes, les tableaux et les frames.

Prise en main et Création de votre page

Pour réaliser des pages Web, nous devons créer des documents (fichiers) que nous rendrons publiques (accessible de quiconque) en les plaçant sur un serveur web et en donnant les droits d'accès adéquats.
Nous utiliserons un des sites Web de l'université (www-mips.unice.fr) grâce à une configuration de vos comptes informatiques : tous les fichiers/documents que vous placerez dans le répertoire www de votre site Web étudiant.
L'ensemble de vos documents devront être valide (selon la dtd choisie), cf. l'outil de validation du W3C. Vous avez le choix entre deux types de document : la version html ou xhtml. Une fois le type de document choisi, vous aurez à respecter la façon de réaliser ce document
Selon le type de document, le squelette de votre fichier sera :

Quel type de document avez-vous choisi pour votre index.html ? pourquoi ?

Sur votre compte (linux), créez à la racine un répertoire www s'il n'existe pas encore.
Naviguez avec l'explorateur de fichier graphique ou en ligne de commande, dans une console, à l'aide des commandes cd (pour changer de répertoire) et ls (pour lister le contenu d'un répertoire) et mkdir (pour créer un répertoire).
Ce répertoire sera votre page web sur le serveur www-mips.unice.fr. Créer un fichier xhtml valide que vous appellerez index.html dans le votre répertoire www.
Pour créer le fichier, utilisez n'importe quel éditeur de texte (vi, emacs, gedit, kate, quantas+, kwrite, etc.) et sauvegardez le nouveau fichier dans votre répertoire www, sous le nom index.html
Visualisez votre nouveau document dans un navigateur.

Dans votre document, modifiez ce qui est écrit dans la balise "title". Rafraîchissez (rechargez) la page dans votre navigateur. Que constatez-vous ? Où cela se répercute-t-il ?

Vous l'aurez compris, tous vos documents dans le répertoire www seront visibles via le Web et que pour voir les modifications de ces documents, il faudra recharger la page web en question.

Dans votre document, modifiez ce qui est écrit entre la balise "body". Par exemple, dans une balise "div", écrivez "bienvenue sur ma page web étudiante". Rajoutez des espaces et des retours à la ligne dans ces quelques mots. Que constatez-vous ? Changez la balise div par une balise pre ? Quel est l'impact sur le document ?

Pour y accéder à votre page web, l'url est la suivante : http://www-mips.unice.fr/~login En cas de problème d'erreur 403 (forbidden), réglez vos droits d'accès avec la commande en ligne "chmod o+r index.html" ou en donnant des droits de lecture "aux autres" via les propriétés du fichier dans l'explorateur de fichier graphique.

Créez un répertoire html, un fichier index.html dedans et créez un lien de votre page principale (dans le fichier index.html de votre répertoire www) vers cette nouvelle page grâce à la balise "a". Privilégiez les liens relatifs.

Créez un lien de votre page "index.html" du répertoire ~/www/html (~ signifie ici votre répertoire de base de votre compte informatique) vers votre page principale (le fichier index.html de votre répertoire www) grâce à la balise "a". Voici donc les prémices d'une navigation Web.

Dans la suite du td, vous répondrez aux questions dans le fichier ~/www/html/index.html ou dans un autre fichier dans le répertoire ~/www/html. Dans ce cas, mettez un lien vers ce fichier dans ~/www/html/index.html.

Caractères accentués

Les caractères accentués sont entrés de façon spéciale en html. Consultez la table disponible à http://www.w3.org/TR/html4/sgml/entities.html.

Ecrivez le mot "intérêt" en minuscule et en majuscule (avec accent). Ecrivez "coeur" (ligature) et "facade" avec une "cédille".

Quel intérêt cela peut-il représenter d'utiliser les signes unicode pour écrire une uri (adresse email, url, ...) ?

Perdus dans le nombre, retrouvez les accents de html (entities).

Sur ce site, à cet endroit (http://www.i3s.unice.fr/~tettaman/Classes/IntroWeb/html/exo) il y a deux fichiers accent&.html et "emploi du temps.html". Faites des liens vers ces deux pages.

Structuration

Nous allons recréer un document html en essayant les différentes balises du cours (notamment DFN, STRONG, PRE...)
Il y aura deux liens : W3C (http://www.w3.org) et "listes des caractères spéciaux" (http://www.w3.org/TR/html4/sgml/entities.html).

Refaites la page web à l'adresse suivante : http://www.i3s.unice.fr/~tettaman/Classes/IntroWeb/html/exo/text.pdf

Liens et images

Pour savoir comment faire pour faire un lien qui puisse "envoyer" un courriel, consultez la documentation : la documentation (rfc) sur le "mailto"

Qu'est-ce que ce "mailto" ?
De votre page ~/www/html/index.html, placez un bloc adresse comportant un lien permettant d'envoyer un courrier à votre adresse e-mail.

Le spam provient en partie des analyses automatiques des pages web à la recherche de courrier électronique. Une solution, créez une image et la mettre sur sa page ou placer des caractères supplémentaires dans votre adresse électronique en demandant à vos visteurs de les enlevez

Avec gimp (ou autre logiciel pour faire une image), créez une image (au format png par exemple) représentant votre adresse électronique. Supprimez le lien "courriel" et remplacez votre adresse courriel par cette image.

liens internes

Créez une table des matières (sommaire) interne au document fortoc.html (dans le document lui-même) Validez votre page (validator.w3.org).

Un aperçu du résultat final est visible dans le fichier pdf exo5.pdf.

Tableaux

Considérez l'emploi du temps suivant : un emploi du temps au format pdf à faire au format xhtml. L'objectif de cet exercice et de refaire cet emploi du temps au format html. Vous aurez à bien vérifier le nombre de colonnes et à utiliser les attributs colspan et rowspan, sachant qu'il y a en tout 41 colonnes et 5 lignes (max) par jour.

Commencez par ne faire que le mercredi matin.

Puis faites le jeudi matin, puis le mardi matin.

Finalement, ajouter le mardi après-midi et les autres après-midi.

Correction de page web

Dans les archives de l'université, nous avons retrouvé un vieux fichier xhtml, anciencalendrier, écrit très maladroitement. Normalement, il aurait dû ressembler à ce fichier pdf. Vous mesurez ainsi tout le travail qu'il reste à faire.

À l'aide du validator (validator.w3.org), corrigez la page anciencalendrier.html erreur après erreur.
Note : il n'y a que 3 erreurs en tout.

frame

Créez le répertoire images sur votre page web (~/www/html/images) et placez quelques (4 ou 5) images dedans.

On désire créer un document toc.html comportant la liste des liens vers les images se trouvant dans le répertoire "images".

Créez une page composée de 2 zones (frame), la zone de gauche contiendra la liste des liens vers les images se trouvant dans le répertoire images, la zone de droite affichera l'image correspondant à l'élément sélectionné dans la liste (le lien sur lequel vous avez cliqué).

Note : une fois l'image choisie, avez-vous un indice sur le nom de l'image sur laquelle vous avez cliquée ?

Valider auprès du validator.w3.org le document toc.html. N'avez-vous rien oublié ?

Ajoutez à vos images l'image http://www.i3s.unice.fr/~tettaman/Classes/IntroWeb/petitchateau.gif . Essayez de mettre un signet (bookmark, lien favori) sur cette image (sur votre site). Utilisez-le. Que constatez vous ? Ajoutez après la liste des images un lien vers votre page principale. Que constatez-vous ?

Exercice sur les images cliquables

Récupérez la carte de France des départements, disponible ici. Faites en sortes que l'on puisse cliquer sur les départements pour aller sur leur site web. Faites également en sorte que le nom du département apparaisse lorsque l'on immobilise la souris dessus (sur la carte). Au mimum, faites le avec les départements (et sites) suivants :

Pour trouver les coordonnées, utilisez un logiciel d'édition d'image (par exemple gimp).

Vous avez fini ? travaillez pour vous !

Si vous avez terminé ces exercices, bravo ! Vous avez bien travaillé. Nous vous proposons maintenant de faire votre propre site :
Faites une page d'accueil qui explique ce qu'on trouvera sur votre site : les différents projets que vous avez faits (avec une description le cas échérant) ou que vous ferez. Incluez à cette page les liens extérieurs qui vous tiennent à cœur.
Préparez votre cv et mettez en ligne.
Réalisez un menu qui pointe vers les principales pages : accueil, une page par projet / tp, votre cv.
Soignez l'organisation de la page, même si avec CSS on pourra tout modifier...

Valid HTML 4.01 Strict