Page 79 - ClasseurNumeriqueVierge_3eme
P. 79
Technologie Projet 2 : « Création d’un site WEB : info-infox » 3ème
Séquence n°4
3 ) CRÉATION DU SCRIPT DE LA PAGE D'ACCUEIL
3 ) CRÉATION DU SCRIPT DE LA PAGE D'ACCUEIL
3.1 ) EXEMPLE DE SCRIPT D'UNE IMAGE « MAPPABLE »
3.1 ) EXEMPLE DE SCRIPT D'UNE IMAGE « MAPPABLE »
Un exemple de page d'accueil fait avec une image « mappable » se trouve dans le dossier ressources.
Lancez le fichier « html1.html » et observez le comportement du pointeur de la souris sur :
• l'image de la piscine,
• les petits icônes au dessus de l'image de la piscine,
• le bouton « Retour ».
Vous pouvez aussi cliquer sur ces zones « cliquable » pour voir ce qu'il se passe.
Combien y a-t-il de zones cliquables sur cette image ?
3.2 ) ANALYSE DU SCRIPT EXISTANT
3.2 ) ANALYSE DU SCRIPT EXISTANT
Ouvrir le fichier « html1.html » avec le logiciel « Notepad++ » situé sur votre bureau (avec un « glisser-
déposer » par exemple, ou « clic droit » puis Ouvrir avec Notepad++). Chaque ligne de code est
expliquée ci dessous. Les commentaires en vert donnent des informations sur le code. Ceux en rouge
indiquent qu’il faudra forcément faire une ou plusieurs modifications dans cette ligne de code.
NE RIEN MODIFIER POUR L’INSTANT. Lire seulement et essayer de comprendre.
<!DOCTYPE html> La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle
qui indique qu'il s'agit bien d'une page web HTML
<HTML> C'est la balise principale du code. Elle englobe tout le contenu de votre page.
Comme vous pouvez le voir, la balise fermante </HTML> se trouve tout à la fin
<HEAD> du code
<TITLE>
« Entête » de la page. Elle contient le titre de la page (balise
Bienvenue sur mon site WEB <TITLE>)
=> Vous pouvez modifier le titre
</TITLE>
</HEAD>
Début du « corps » de la page
<BODY> Texte mis en valeur (souligné et balise <H1>)
=> Vous pouvez modifier le texte ou supprimer la ligne
<h1><u>Supervision piscine</u></h1>
Insertion d'une image avec le nom du fichier
<IMG SRC="Domovea.jpg" => Remplacez par le nom de votre image
WIDTH=351 Largeur (Width) et hauteur (Height) de l'image
=> Remplacez les chiffres par la taille de votre image
HEIGHT=277
Insertion dans le script image d'une cartographie (cela indique
USEMAP="#Map"> qu'il y aura des zones cliquables)
<MAP NAME="Map"> Début de la cartographie « Map »
Définition de la première zone cliquable :
- Type : Rectangle (rect)
<AREA SHAPE="rect" - Nom du fichier destination après un clic sur cette zone
- Coordonnées (en pixel) des angles haut gauche (X,Y) et bas droite (X,Y) du
HREF="piscine.html"
rectangle
COORDS="187,130,310,224"> => Si votre zone cliquable est un rectangle, utilisez ce script en modifiant le
nom du fichier-lien et les coordonnées. Sinon, supprimez ces trois lignes.
Activites.odt Collèges - Briançon 3/8
