Enoncé

IUT TC
2006-2007
S2 - TP HTML N° 1
Pensez à sauvegarder fréquemment dans votre espace de travail les documents que vous réalisez !
L'objectif de ce TP est de se familiariser avec le langage HTML et de comprendre les mécanismes de construction d’une
page HTML. La construction d’images animées et des « image map » est aussi abordée.
Une page simple
Créez un document HTML dont le rendu est celui de la figure suivante :
Pour ce faire :
•
Créez un répertoire artsMartiaux dans votre dossier personnel.
•
Copiez le fichier artsmartiaux.txt dans ce répertoire. Changez son extension en html pour l’utiliser comme
document de base.
•
Vous utiliserez 2 niveaux hiérarchiques pour les titres.
1
IUT TC
•
2006-2007
Changez la couleur d’arrière-plan de la page et des titres (voir le fichier codesCouleurs.pdf dans le répertoire
ressources
•
Insérez un lien sur le texte "le lien suivant" pointant vers [email protected]
Les gif animés
GIF Animator est un logiciel de conception de fichiers GIF animés. Sa fonction est de regrouper des images dans un
même fichier, au format GIF, fichier qui sera inclus dans des pages HTML. Les images sont par la suite affichées en
séquence par le navigateur, ce qui produit un effet d'animation.
Lancez "GIFAnimator " (dans le répertoire gifAnimator). Cliquez sur la commande Ouvrir un fichier et remontez
jusqu’au dossier imagesAnim1 pour découvrir les images qui vont constituer l’animation. Choisissez la première image de
la séquence. Insérez ensuite les autres images en utilisant la commande Insérer
ou en glissant l’image de
l’explorateur de windows vers une des vignettes visibles.
Une fois les images insérées, il vous faut paramétrer votre animation, passez sous l’onglet Animation et cochez les
boîtes looping et Repeat forever si vous voulez que votre gif cycle indéfiniment, sinon attribuez une valeur à la boîte
Repeat count si vous désirez obtenir un nombre de répétitions précis. Vous pouvez aussi renseigner le champ trailing
comment avec la date de création, votre nom, etc.…. Les paramètres Animation Width et Animation Height permettent
de définir la largeur et la hauteur de la zone rectangulaire dans laquelle s'affichera l'animation. Par défaut ces valeurs
sont déterminées par les images de plus grandes dimensions, mais il est possible de les fixer suivant l'effet recherché.
2
IUT TC
2006-2007
Sous l’onglet Image attribuez une valeur (Duration 1/100s) comme durée d’affichage de chaque image. Vous pouvez
donner la même valeur à toutes les images ou attribuer une valeur plus importante à une image en particulier. Par
exemple, vous pouvez attribuer la valeur 100 à la dernière image et 30 à toutes les autres. Le paramètre Undraw Method
permet de définir l'enchaînement des images. Après avoir été affichée, une image peut demeurer à l'écran (Leave), être
remplacée par le fond de page (Restore Background), ou par l'image précédente (Restore Previous). On peut
également laisser ce point indéfini (Undefined) le navigateur utilisant alors ses propres paramètres. Pour régler la
transparence du gif, cochez la case Transparency : une couleur sera alors 'transparente', c'est à dire remplacée lors de
l'affichage par celle du fond de page. Par défaut c'est la couleur noire qui est proposée comme 'transparente', mais il est
possible d'en définir une autre en cliquant sur le cadre Transparent Color.
Cliquez sur le bouton Preview
pour ouvrir la fenêtre de visualisation de votre GIF. Vous pouvez réaliser les réglages
qui vous semblent utiles après avoir fermé la fenêtre. Enregistrez votre gif animé dans votre répertoire artsMartiaux par le
bouton Save As
.
Pour pratiquer un peu plus, les dossiers imagesAnim2 et imagesAnim3 contiennent des images pour créer deux autres
animations.
Insertion d’une image
Pour insérer une image dans un document HTML, il faut utiliser la balise <img>. Celle-ci a besoin de deux attributs, src et
alt. Le premier permet de spécifier la source de l'image (son URL). Le deuxième attribut est un texte qui remplace l'image
s’il y a un problème lors de l'affichage de cette dernière. Vous pouvez y placer un texte de description par exemple. Vous
pouvez également spécifier dans les attributs la taille que vous voulez donner à l'image, en précisant les valeurs width
et height, pour respectivement largeur et hauteur. L'utilisation de la balise est donc :
<img src="adresse_image" alt="description" width="valeur" height="valeur" />
Lorsque vous voudrez insérer les images dans votre document, il faudra donc indiquer la source des images, ainsi que
leurs dimensions. Vous pouvez obtenir ces informations avec le navigateur.
Exercice
Insérer le gif animé que vous avez crée dans la page artsmartiaux.html
Mise en page avec des tableaux
On souhaite créer un petit site Internet présentant des informations sur des films sous forme de fiches synthétiques et de
fiches artistiques. Vous allez commencer par créer une fiche pour le film « Comme une image » en utilisant un tableau de
5 lignes par 2 colonnes pour créer la structure de la page (voir figure ci-dessous). Vous trouverez les ressources
nécessaires à la réalisation de cette page dans le répertoire fichesCine (copiez les ressources dans votre espace de
travail)
3
IUT TC
2006-2007
Les « image map »
Il est facile d'associer une image à un lien... lorsque la souris passe au-dessus de l'image, le curseur se transforme en
main, un message apparaît éventuellement et un click ouvre une nouvelle page ou déclenche une action prévue par le
Webmaster (son, script, dialogue, téléchargement, ...). Une image peut aussi être découpée en zones associées chacune
à des liens différents. Par exemple, dans l’image ci-dessous à gauche, nous souhaitons créer 3 zones cliquables nous
redirigeant vers trois pages différentes.
Pour ce faire, nous allons créer un « image map » :
<map name="test">
<area shape=”rect”coords="91,52,116,107" href="doc1.html" alt="zone1">
<area shape=”circle” coords="170,50,46" href="doc2.html" alt="zone2">
<area shape=”poly”
coords="75,1,36,29,1,84,1,125,46,128,80,95,78,56,99,18,88,0,75,1" ref="doc3.html"
alt="zone3">
</map>
<img usemap="#test" src="cid.gif">
4
IUT TC
•
L'origine du repère (0,0) est le coin haut-gauche de l'image ;
•
Un point est défini par une paire (H,V), l'unité est le pixel ;
•
Le rectangle est défini par 2 sommets (gauche, haut) et (droite, bas) ;
•
Le cercle est défini par son centre et son rayon ;
•
Le polygone est défini par les coordonnées de l’ensemble de ses points.
2006-2007
Exercice :
•
Copiez dans votre espace de travail le répertoire imageMap. Ouvrez la page france.html.
•
Que se passe-t-il lorsque vous cliquez sur l’Aquitaine ? Que se passe-t-il lorsque vous cliquez sur la Corse ? Pour
répondre à ces questions et comprendre le fonctionnement de l’image map, regardez le code source de la page. Le
code source peut être affiché par la commande View / Page Source du navigateur ou par la commande View
Source de la barre WebDeveloper :
•
Créez une nouvelle page concernant quelques régions de votre choix. Séparez les renseignements de chaque région
et placez une ancre pour chacune.
•
Modifiez le code HTML de la page france.html de manière à ce que les renseignements de la région choisie
apparaissent lorsque l’on clique sur la région.
5