Qu’est-ce qu’une page html ?


Dans FrontPage, ouvrir une nouvelle page

Elle apparaît blanche et FrontPage l’affiche directement en mode " normal ", c'est-à-dire en mode de travail (on peut écrire sur cette page, insérer des images, tout comme sur un traitement de texte).

 

Le mode aperçu permet de voir le résultat de ses travaux comme il sera affiché (avec plus ou moins de réussite…) avec un navigateur (comme Internet explorer ou Netscape).

Le mode HTML permet de visualiser l’envers du décor : ce mode affiche un code, dit " html ", qui permet justement le décryptage d’une page par un navigateur.

 

Manier, insérer, modifier un " script " demande de connaître les rudiments de ce code…

Voici le code d’une page blanche

 

 

On peut voir une succession de " balises " qui correspondent au codage.

<html> est une balise d’ouverture, qui dit que la page sera codée en html
</html> est la balise de fermeture : fin de la page…
<head> correspond à des informations d’en tête. </head> ferme cette en-tête. Dans l’en-tête il y a notemment une autre balise qui correspond au nom de la page (ici " nouvelle page 1 "). Le nom de la page est compris entre les balises <title> et </title>

Entre les balises <body> et </body> il y aura tout le contenu visible de la page !

Tapez " svt1 " entre ces deux balises et revenez en mode normal : svt1 apparaît
Revenez en mode HTML, tapez " svt2 " sous " svt1 " puis revenez en mode normal : svt2 apparaît bien mais à la suite de svt1.
Restez en mode normal et tapez " svt3 " sous " svt1 svt2 " puis revenez en mode HTML : svt3 est compris entre les balises <p> et </p> qui sont des balises indiquant qu’il y a un nouveau paragraphe dans la page.

 

Explications :

En mode normal on travaille comme sur un traitement de texte, frontpage se charge de coder les informations directement en html pour nous.
En mode HTML, on travaille en html (évidemment…) : là, il faut respecter la grammaire propre à ce langage informatique. Chaque action (changement de ligne, espace, tableaux, images, etc.) est encadrée par des balises propres. Modifier l’apparence d’un script demande de savoir repérer des informations codées en html…

 


Une première utilisation d’un javascript

Rendre l’internet interactif en proposant aux élèves un exercice de rangement de photographies dans un ordre chronologique.

Préalablement il vous faudra télécharger le fichier rangerimages.zip sur votre disque dur puis le décompresser pour ouvrir la page "exercice.htm". cette page et les images qui lui sont assocciées servent de modèle à ce tutorat.

Dans le dossier " rangerimages ", ouvrir le fichier " exercices " avec FrontPage.

 

 

On visualise 4 images (développement embryonnaire de l’oursin) et une image " erreur " (petite croix rouge). Passez en mode aperçu pour voir l’action de ce script : vous pouvez déplacer ces images par simple cliquer-glisser.
L'image est encadrée en un trait continu
L'encadrement en pointillé est la zone de "calque" (Layer en anglais). Cette zone sera déplaçable

 


Objectif 1 : changer une image

Clic droit sur l'image : fenêtre contextuelle qui apparaît

 

Dans "propriétés de l'image", choisir "parcourir" (onglet "général")

 

Choisir l'image dans un répertoire du disque dur

 

 

Recadrez l’image pour lui rendre une taille acceptable.

Vous pouvez donc remplacer une image qui est comprise dans l’exécution de ce script sans pour autant avoir de connaissances en html !

Vous pouvez donc mettre les images que vous voulez (pensez seulement à bien les ranger dans le bon dossier…).

 


Objectif 2 : changer la position initiale de l’image (et de son calque)

 

 

Il ne faut pas confondre l’image et le calque ! Ici l’image est incluse dans le calque. Pour que l’image change de place initiale, c’est donc le calque qu’il faut déplacer.

Cliquez sur l’image : vous sélectionnez l’image
Cliquez sur le calque (entre l’image et le contour du calque) : vous sélectionnez le calque en entier
En passant la souris à proximité de la bordure du calque vous pouvez alors modifier la taille du calque (le curseur devient " double flèches ") ou bien le déplacer par cliquer glisser (le curseur devient " 4 flèches ")

 


Objectif 3 : rajouter des images à déplacer

On n’y coupera pas, il faut passer en mode HTML pour effectuer cette opération !

En mode HTML

  1. On repère le script :
  2. Il apparaît en rouge et est situé entre les balises d’en-tête <head> et </head>

    Sa balise d’ouverture est <SCRIPT language=JavaScript>

    Sa balise de fermeture est </SCRIPT>

 

Bonne nouvelle : on ne touche pas à ce script !

On repère le calque et l’image entre les balises <BODY> et </body>

 

 

Vous remarquez une structure répétitive : elle débute par <DIV id=Layer1 et se termine par </DIV>

Et ceci 5 fois…

Ce n’est pas un hasard, cela correspond aux cinq calques et à leurs cinq images.

On comprend (en partie) le code

 

 
On copie le code et on le colle à la suite des 5 premiers

 

 

On surligne le premier code au complet (de <DIV… à </DIV>), puis clic droit sur la sélection, puis choisir " copier "

On colle la sélection juste après la balise </DIV> de fermeture du calque (Layer) 5.

 

 

On modifie les données de ce calque pour le rendre actif

Mettre la valeur 6 à la place de la valeur 1 pour chaque " Layer1 ". attention, il y a trois valeurs à modifier.

 

 

Résultat :

 

 

On finalise

 

Revenir en mode normal de FrontPage : il n’y a que cinq calques ! pas de panique, le sixième calque se cache sous un des cinq premiers (en fait sous le calque 1 puisque les calques 1 et 6 ont la même position que nous n’avons pas modifié).

Sélectionner les calques au hasard et déplacez les pour trouver le sixième calque créé (normalement il doit être situé sous le stade 2 cellules…).

Changez l’image du calque en lui affectant l’image " oursin6 " par exemple.

 


L’imagination au pouvoir

Avec ce script il est possible de…

Mettre en ordre des images (ce qui vient d’être fait)
Compléter un schéma : pour cela vous pouvez créer une image d’arrière plan fixe et des images " texte "
Faire un puzzle
Fabriquer un modèle (par exemple associer les différentes molécules qui composent u nucléotide, l’ADN…)