HTML ET PEDAGOGIE


2- Créer ses pages html

2.1- Quel(s) logiciel(s) ?
2.2- Principes de base.
2.3- Créer une page, insérer et mettre en forme le texte.
2.4- Insérer des objets simples.
2.5- Créer des liens hypertexte
- liens internet
- liens vers une page du site
- liens internes : ancres
- liens sur des images : image map
2.6- Créer des cadres

                2.1- Quel logiciel utiliser ?

Libres et gratuits :

- NVU (se prononce "nview") de Framasoft : celui que je préfère !

télécharger nvu

- N'importe quel éditeur de texte : blocnote par exemple.

Gratuit mais pas libre

- Dreamweaver 2 : gratuit, fait du code à peu près propre.

Pas gratuits du tout

- Frontpage (Microsoft); Dreamweaver MX

    2.2- Principes de base : racine, dossiers.

Le nom des pages qui seront publiées sur un internet ou sur un intranet doivent obéir à certaines règles :

Les noms des fichiers ne doivent comporter aucun espace ni accent, et de préférence pas de majuscules.

La majorité des serveurs ne comprennent pas accents et espaces; l'adresse des pages de votre site sera illisible.


- Placez-vous dans le répertoire de votre choix.

Pour nous ce sera le dossier H:/html qui nous permettra de voir nos pages dans l'intranet


- Nous allons créer une page d'accueil : la page index.html

Ouvrir nvu, cliquer sur "nouveau" puis enregistrer sous "index.html"

- Nous allons construire la structure de base de notre site :

Dans un site web, toutes les pages du site, les images et les documents doivent se trouver dans le même dossier que la page d'accueil.
Néanmoins on peut créer des sous-dossier dans ce répertoire, pour ranger le site de façon à s'y retrouver même quand, au fil des ans, vous aurez créé des dizaines de pages.

Quand vous insérez une image, vous insérez en réalité une ligne de code qui dit "allez me chercher l'image placée à cet endroit".

En code ça donne <img  src="images/code2.jpg" />

Quand votre page sera sur le serveur, il faut que l'ordinateur puisse trouver cette image.

Nous mettrons donc les images dans un dossier "images"

Vous pourrez également mettre vos documents .doc, .ppt, .sxw, .sxi, .pdf, .mp3 etc... dans un dossier "documents"



Donc créons la structure de notre site:

Dans le dossier H:/html, cliquez sur "fichier" -> "nouveau" -> "dossier"

Nommez-le "images"




              2.3- Créer sa page, insérer du texte, modifier son texte

Sélectionnez le titre, puis cliquez sur "Format". Vous aurez accès au menu texte :
- police
- taille
- style du texte
- couleur du texte
- ...

Le logiciel vous propose des raccourcis :
A la place de "Corps de texte" (ici, "body Text"), vous pouvez donner une taille différente à votre texte avec quelques formats prédéfinis (paragraphe, titre ...)

A la place de "Variable Width", en cliquant sur la flèche, le menu déroulant vous propose des polices différentes.

En cliquant sur les carrés noir et blanc, vous changez la couleur de police et la couleur du fonds de page. A droite, une icône permet de surligner.

Les A accompagnés de flèches permettent d'augmenter ou de diminuer la taille du texte sélectionné.

Pour le reste, c'est comme dans tout traitement de texte usuel.

            2.4- Insérer des objets

Les tableaux sont très utiles dans les pages web : ils permttent de placer du texte ou des  images sur la page, de créer des colonnes etc...

Insérez donc un tableau dans votre page.



Cliquez sur l'icône "tableau" Tableau rapide : choisissez le nombre de cases. Pour être plus précis : cliquez sur l'onglet du milieu. Vous pouvez choisir :
- le nombre de lignes, de colonnes.
- la largeur du tableau.
- La largeur de la bordure (0 signifie "bordure invisible".
- Les paramètres avancés (pour centrer le tableau, changer la couleur d'arrière plan...)
Pour modifier les paramètres liés à la cellule sélectionnnée :

- alignement du texte dans la cellule.
- espacement entre les cellules.
- paramètres avancés.

Insérez du texte dans une case/cellule du tableau :

Pour insérer du texte dans une cellule de tableau il suffit de cliquer sur le cellule et de taper son texte.

Pour centrer, aligner votre texte à droite ou à gauche, modifier les propriétés de votre tableau, double cliquez dessus : une fenêtre de propriétés s'ouvre.
Vous pouvez ainsi ajouter lignes, colonnes et modifier votre tableau.

Astuce : en cliquant sur le tableau, le cadre apparaît. En cliquant sur les flèches vous ajoutez une ligne ou une colonne, en cliquant sur la croix vous supprimez la ligne ou la colonne sélectionnée.


Vous allez insérer une image dans une case/cellule de votre tableau.

Attention
Cette image doit être préalablement placée dans votre dossier images

Même principe :

cliquez sur l'icône de la barre d'outil pour insérer l'image:
Une fenêtre de propriété apparaît
Cliquez sur "choisir un fichier"
Sélectionnez votre fichier dans le dossier "images"

Vous pouvez indiquer un texte alternatif : c'est le texte qui appraît pendant que votre image se charge sur la page.

Si vous ne voulez pas de texte alternatif, décochez la case !

En cliquant dans les autres onglets, vous pouvez modifier les dimensions de l'image, ajouter un lien sur l'image etc...


     
          2.5- Les liens hypertextes

L'intérêt des pages html réside dans l'hypertextualité. Elle recouvre plusieurs formes :



http://www.nomdusite.fr

Vous allez faire un lien vers le site de l'académie de Lille http://www.ac-lille.fr qui va s'ouvrir dans une nouvelle fenêtre.

Sélectionnez le texte ou l'image sur lequel vous voulez faire le lien.

Cliquez sur l'icône "lien" (ici "link")
Dans la fenêtre de propriétés, taper (ou copier - coller) l'adresse du site.
En cliquant sur "édition avancée" vous pouvez choisir la façon dont votre lien va s'ouvrir :

- dans "attributs" choisissez la balise "target" - donnez-lui la valeur que vous désirez en la sélectionnant dans le menu déroulant.
_blank : votre lien s'ouvre dans une nouvelles fenêtre du navigateur.
_self : votre lien s'ouvre dans la même fenêtre.
_parent : votre lien s'ouvre dans le cadre actuel. (visible seulement s'il y a un jeu de cadres, ou frames)
_top : votre lien s'ouvre dans la fenêtre tout entière. (visible seulement quand il y a un jeu de cadres, ou frames)


documents/mesexercices.html

- Vous allez créer une deuxième page à la racine de votre site qui s'appellera "page2.html"
- Dans la page index.html, vous écrirez "lien vers la page 2" et vous créerez le lien vers cette page 2 afin qu'il s'ouvre dans la même fenêtre.

Cliquez sur l'icône "lien".

Dans la barre d'adresse de la fenêtre de propriétés, cliquez sur "choisir un fichier".

Sélectionnez votre "page2.html".

Puis "édition avancée" -> attributs "target" et "_self"

#nomdebalise
Ce sont les ancres qui permettent par exemple de cliquer sur un titre du plan (haut de la page) pour accéder à la partie de la page qui correspond.

Il faut donc d'abord créer les ancres, puis les liens qui vont vers elles.

Vous allez créer une ancre en haut de la page index.html que vous appelerez "haut".

Placez votre curseur à l'endroit où vous voulez placer l'ancre.

Choisissez l'icône "ancre" (anchor)
Donnez un nom simple en minuscules, sans accent et sans espace à votre ancre.
OK ? C'est fait !

Maintenant il faut créer le lien vers l'ancre :

- Tout en bas de la page, tapez "Haut de page" puis créez le lien vers l'ancre "haut de page"

Sélectionnez le texte

Cliquez sur l'icône "lien" puis dans la fenêtre de propriété, tapez #nomdelancre

Vous ne vous souvenez plus de son nom ? Ce n'est pas grave : cliquez sur la flèche à droite du cadre d'adresse, un menu se déroule; Vous y trouverez la liste de toutes vos ancres !

Vous pouvez créer des liens hypertexte sur tout ou partie d'une image :

Sélectionnez l'image, puis cliquez sur l'icône "lien". Le tour est joué !


Ce logiciel ne permet pas directement cette fonctionnalité. Là les plus téméraires d'entre vous vont tâter du code... (voir ci-dessous).

Les moins téméraires vont essayer avec Dreamweaver 2 (là, c'est moins rapide mais très facile)

Voici le code qui permet de rendre clicable trois parties de l'image images/tableau.jpg :

<img src="images/tableau.jpg" usemap="#Map">
<map name="Map">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,...,xn,yn"  href="page2.html">
<area shape="circle" coords="xducentre,yducentre,rayon" href="page3.html">
<area shape="rectangle" coords="xgauche,yhaut,xdroit,ybas" href="page4.html">
</map>

Copiez ce code

Cliquez dans la page à l'endroit où vous désirez insérer l'image interactive

Cliquez sur l'onglet " <HTML> Source " , repérez votre curseur (c'est le plus difficile)

Collez le code à l'endroit choisi. Modifiez les paramètres du code :

<img src="images/tableau.jpg"
- le nom votre image.
<map name="Map"> - le nom de la carte : ici c'est "Map" dans <map name="Map"> mais ça ne peut pas servir deux fois.
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,...,xn,yn"  href="page2.html">

- les paramètres des zones clicables :

polygone (P) : abscisse du point 1, ordonnée du point 1, etc..., abscisse du point "n", ordonnée du point "n"

<area shape="circle" coords="xducentre,yducentre,rayon" href="page3.html"> cercle (C) : abscisse du centre, ordonnée du centre, rayon en pixel.
<area shape="rectangle" coords="xgauche,yhaut,xdroit,ybas" href="page4.html"> rectangle (R) : côté gauche, haut, droite, bas
href="page2.html#ancre" target="_blank"
- changez également le nom de la page vers laquelle vous faites un lien. Ce lien peut contenir une ancre.

Vous pouvez également ajouter une cible (target)

Les paramètres "x" et "y" sont des pixels. Pour obtenir ces chiffres, ouvrez votre image avec "paint", mettez la souris sur le point dont vous souhaitez obtenir les coordonnées, lisez-les en bas à droite (x,y)


2.6- Créer des cadres

Les cadres : un jeu de cadres est un ensemble de pages web qui fonctionne ensemble. Cela permet de garder une partie de la page fixe tandis qu'une autre partie bouge.

Par exemple pour des exercices : les documents en bas, les questions en haut, le menu à gauche

 

 

NVU ne gère pas bien les cadres; par contre DW2 facilite leur création :

Créer vos deux pages en leur donnant deux noms significatifs (ici page1.html et page2.html)

Ensuite créer le jeu de cadre (le paquet qui englobe ces deux pages)

"fichier" -> nouveau -> "jeu de cadres" et choisir les parties fixes et la partie qui va changer.

Donnez-lui un nom significatif.

Donc pour une seule page vous avez trois fichiers !

Vous pouvez ensuite travailler vos pages

 

 

Quand vous enregistrez, enregistrez tout votre jeu de cadre ("enregistrer tout")

Vous pouvez faire des liens vers d'autres pages, et si vous voulez que la page apparaisse dans le cadre principal, n'oubliez pas d'indiquer une cible ("_self")

Vous pouvez également insérer une case à écrire, un bouton... pour insérer des questionnaires par exemple, mais c'est plus facile avec un logiciel exerciseur...

3- Réaliser des exercices avec netquizz

4- Transférer ses fichiers