Formation à la publication ENTmip ecollège31

Formation à la publication ENTmip
ecollège31
octobre 2012
TP - Un peu de HTML pour l'ENT, mais pas trop...
Fonction : Intervenir sur le code HTML généré par l'éditeur d'article afin d' ajouter des fonctionnalités qui sont pas prises
en charge
Les articles de l'ENT ainsi que d'autres pages, sont codés avec le langage HTML qui est a été conçu pour décrire
des pages WEB, c'est un langage qui utilise des balises de code pour la description des pages, l'implémentation des
liens. Ce code est interprété par les navigateurs qui affichent les pages de la façon attendue.
L'éditeur d'article de l'ENT permet d'écrire du code HTML sans le voir et même sans le savoir. Toutefois, on dispose d'un
bouton "SOURCE" qui autorise la visualisation et la modification du code.
S'il est utile de connaître quelques balises HTML pour appliquer des fonctions qui ne sont pas accessibles depuis
l'éditeur, on ne pourra pas aller très loin car cet éditeur nettoie le code pour qu'il soit conforme aux exigence de l'ENT, il
est par exemple impossible d' incorporer des fonctions Java.
Pour des applications qui dépasseraient les limites fixées par le système ENT, on pourra utiliser un mini-site stocké dans
une ressource pédagogique qui sera exécuté dans une fenêtre du navigateur hors ENT sans les limitations gênantes.
Code HTML et balises
Le code en majuscule ou non est placé entre < >, soit <code> pour différentier des données
Certaine balises produisent directement une action , comme <br>
Certaines ont besoin de paramètre , <img src="gif/ordi.gif" align=right>
D'autres s'appliquent à un objet et encadrent celui ci, balise de début <G>, balise de fin </G>, comme
<G> objet </G>
Décaler un tableau placé en haut de page
Si on place un tableau en haute de page, il n'est plus possible
d’insérer une ligne au dessus dans l'éditeur, mais on peut le faire en
mode « SOURCE » HTML :
Insérer la balise
<br> qui produit un saut ligne
Insérer un trait de séparation
Insérer la balise
<hr> qui produit un trait sur toute la largeur de la page
Ecrire du texte barré
<s> Texte à rayer </s>
Faire clignoter du texte
<blink>texte</blink> Fonctionne bien avec Firefox, mais pas avec IE, Chrome
Faire défiler du texte, un objet
<marquee>texte</marquee>
<marquee><img......./></marquee>
Montrer le titre d'une image sur plusieurs lignes
Utilisation de l'éditeur
Le texte saisi dans le champ « Titre » apparaît sur 2 lignes mais il est
tronqué. La longueur de la ligne varie selon le navigateur utilisé.
Si on examine le code HTML on voit que le titre est inséré en tant
qu'objet :
<img vspace="5" hspace="20" border="0" align="left" title="[titreimage]2344[/titre-image]" alt="[legende-image]2344[/legende-image]"
src="/lectureImageToolbox.do?TAG=[id-image]2344[/id-image]" />
JP Pontié
Académie de Toulouse – Mission TICE– Pôles d'Appui – Dafpen – iufm Midi Pyrénées
03/10/12
page 1/3
Formation à la publication ENTmip
ecollège31
octobre 2012
on peut remplacer la référence à l'objet titre par le texte voulu :
title="Une lampe est un objet technique fabriqué par l'homme et destiné à produire une lumiére pour s'éclairer"
alors le texte n'est plus tronqué
Le code HTML n'accepte pas les caractères spéciaux, accentués ils sont remplacées par un code du type
&#xyz; exemple &#224 pour à, &#232 pour è.
saisir les caractères, puis le code de remplacement sera placé automatiquement par l'éditeur.
Pour insérer des retours à la ligne dans le texte, ajouter le code représenté par les caractères suivants
&#10;
title="La lampe &#224; incandescence&#10; est un dispositif&#10; qui produit&#10; de la lumi&#232;re&#10;
On est donc en mesure de gérer un texte long avec des retours à la ligne !
Utiliser des zone cliquables sur une image
Insérer l'image normalement avec l'outil d'intégration d'image...
Il faut connaître les dimension de l'image en pixel et surtout les cordonnées des zones que l'on veut rendre cliquable
On devra s'aider d'un logiciel de retouche d'image (Paint.net, Photofitre..) qui affichent les coordonnées des sélections
exemple :
220
(0,0)
ECRAN
0,0,220,180
IMAGE
295 x 255 pixels
UC
221,0,295,180
180
(295,255)
CLAVIER
0,181,295,255
Modification du code
code initial :
<<img width="295".......... src=" /lectureImageToolbox.do?TAG=[id-image]2349[/id-image]" />
Modifier / ajouter le code suivant :
<img width="295" vspace="20" hspace="20" height="255" border="0" title="[titre-image]2349[/titre-image]" alt="[legendeimage]2349[/legende-image]" src=" /lectureImageToolbox.do?TAG=[id-image]2349[/id-image]" usemap="#ordi" /></p>
<map name="ordi">
<area shape="rect" coords="0,0,220,180" href="http://ac-toulouse.entmip.fr/formations-a-l-ent/formation-referentsnumeriques/outils-tice-pour-l-ent/ecran-2695.htm" title="Ecran" />
<area shape="rect" coords="0,181,295,255" href="http://ac-toulouse.entmip.fr/formations-a-l-ent/formation-referentsnumeriques/outils-tice-pour-l-ent/clavier-2694.htm" title="Clavier" />
<area shape="rect" coords="221,0,295,180" href="http://ac-toulouse.entmip.fr/formations-a-l-ent/formation-referentsnumeriques/outils-tice-pour-l-ent/unite-centrale-2696.htm" title="unit&#233; centrale" />
</map>
JP Pontié
Académie de Toulouse – Mission TICE– Pôles d'Appui – Dafpen – iufm Midi Pyrénées
03/10/12
page 2/3
Formation à la publication ENTmip
•
•
ecollège31
octobre 2012
La balise <map..>... </map> permet de créer une image réactive, déclarer usemap="#ordi" (attention au #) dans
le code d'intégration de l'image puis map name="ordi" le nom doit être le même (ici ordi)
La balise <area... /> décrit une zone cliquable
◦ shape= ... : type de zonepeut prendre 3 valeurs rect : Pour un rectangle - circle : Pour un cercle - poly :
Pour un polygone
◦ coords=... : indique les coordonnées
▪ coordonnées coins supérieurs gauche et inférieur droit de la zone pour un rectangle rect
▪ coordonnées de chaque angle du polygone si vous optez pour la valeur poly
▪ coordonnées du centre du cercle et la dimension du rayon de ce même cercle pour la valeur circle
◦ href définit la page de destination du lien correspondant à la zone. Vous utiliser le copier / coller
◦ title=... Titre de la zone qui apparaît au survol du curseur de la souris
•
Répéter la balise <area.../> pour décrire chaque zone....
TP UTILISER L'EDITEUR DE CODE HTML
• Expérimenter les diverses fonctions présentées dans ce document.
• Repérer des cas d'utilisation où ces fonctions peuvent rendre service dans l'édition d'un article
Cette liste n'est certainement pas exhaustive, on peut essayer d'autre manipulations et vérifier si elles sont acceptée par
l'ENT et si elles produisent bien l'effet attendu pour les principaux navigateurs .
La documentation sur le code HTML est abondante sur le WEB
JP Pontié
Académie de Toulouse – Mission TICE– Pôles d'Appui – Dafpen – iufm Midi Pyrénées
03/10/12
page 3/3