|
| Encarta 2008 - cours HTML
|
|
|
|
1.Introduction
Ce document est venu de lui-même, par nécessité de mettre un peu d'ordre dans nos idées,
dans nos moyens et dans nos outils de travail. Il s'est donc imposé comme une façon
d'organiser notre travail et nos futurs projets. En le construisant jour après jour, il nous est
rapidement apparu comme un outil qui pourrait servir à d'autres. Le document que vous
consultez en ce moment est le résultat d'un travail passionnant qui ouvre la porte vers des
développements clients-serveur accessibles à tous. C'est dans le contexte de l'enseignement
assisté par ordinateur que nous avons exploité le langage HTML.
Ce manuel est conçu pour un usage avec le logiciel Netscape comme navigateur. Nous avons
cherché à documenter, décrire et illustrer les possibilités du langage HTML version 2.0 avec
les propositions et extensions en vue de l'adoption prochaine de la version 3.0. De plus,
l'affichage correct des commandes n'est assuré que dans la version 1.1N de Netscape
2.Historique
Le langage HTML tire son origine du langage SGML (Standard Generalized Markup
Language). Il s'agit d'un type particulier d'annotations destiné au WWW et qui correspond à
une collection de styles reconnaissables par les navigateurs. Un navigateur (en anglais
"browser") est donc un logiciel qui interprète à l'écran les commandes HTML contenues dans
un document accessible sur le WWW.
Le langage HTML est utilisé sur le WWW depuis 1990. La version actuellement en vigueur
est HTML 2.0. Des discussions sont en cours (voir le document de Berners-Lee et Connolly
en bibliographie) pour l'adoption de nouvelles annotations pour une version HTML 3.0
notamment en matière de tableaux et de commandes de formatage définissant les exposants et
indices3. Pages HTML
3. Pages HTML
Il faut d'abord spécifier qu'un document contenant des annotations en HTML n'est rien de plus
qu'un fichier texte. Il peut donc être reconnu sans problèmes de conversion d'un
environnement à un autre. Une page peut donc être lue et interprétée par n'importe quel
navigateur sur n'importe quelle plateforme.
Pour créer un document HTML, il faut insérer les commandes suivantes au début du
document:
<HTML> "première ligne du document"
<head> "ouverture de la zone d'entête"
<title> "titre de la page suivi de </title>"
</head> "fermeture de la zone d'entête."
<body> "ouverture du corps du document"
"Mettre le texte et les images ici"
</body> "fin du corps du document"
</HTML> "fin du document HTML"
La page ainsi créée pourra servir de maquette et s'affichera ainsi à l'ouverture dans l'éditeur de
texte:
Au sujet de la commande
inutile) à l'ouverture du document HTML en insérant plusieurs commandes
<title>, il est possible d'obtenir une animation sympathique (mais<title>
consécutives. Le navigateur lira successivement chaque ligne et réaffichera le nouveau titre à
chaque raffraichissement. Essayez la commande avec les lignes suivantes:
<HEAD>
<TITLE>ESSAI D'ANIMATION</TITLE>
<TITLE>E</TITLE>
<TITLE>ES</TITLE>
<TITLE>ESS</TITLE>
<TITLE>ESSA</TITLE>
<TITLE>ESSAI</TITLE>
<TITLE>ESSAI D</TITLE>
<TITLE>ESSAI D'</TITLE>
<TITLE>ESSAI D'A</TITLE>
<TITLE>ESSAI D'AN</TITLE>
<TITLE>ESSAI D'ANI</TITLE>
<TITLE>ESSAI D'ANIM</TITLE>
<TITLE>ESSAI D'ANIMA</TITLE>
<TITLE>ESSAI D'ANIMAT</TITLE>
<TITLE>ESSAI D'ANIMATI</TITLE>
<TITLE>ESSAI D'ANIMATIO</TITLE>
<TITLE>ESSAI D'ANIMATION</TITLE>
</HEAD>
La meilleure façon d'écrire toutes les lignes consiste d'abord à écrire la ligne la plus longue (la
dernière), puis de faire des copier coller à reculons en effaçant une lettre jusqu'à la première
ligne.
Il est important de noter toutefois que cette possibilité a été accélérée dans Netscape 2.0
au point de ne plus être perceptible.
Remarquez que les annotations HTML viennent pour la plupart en paires. Ainsi, on marque
un élément avec la commande <un code> et on la referme avec </un code> comme dans
l'exemple ici:
<title>insérer ici l'élément</title>
4.Formatage du texte
Cette section décrit les différentes options disponibles pour formater le texte dans une page
WWW.
4.1 Entêtes (Headers)
Le formatage d'une page commence généralement par le choix et l'usage d'entêtes
prédéterminées qui s'échelonnent de H1 à H6 (niveaux). La commande H1 est la plus grosse
disponible et la H6 est la plus petite. Les commandes Hx comprennent un choix de taille, le
caractère gras et un retour de paragraphe.
<H1> suivi de l'entête et de </H1> donne:
Exemple de header de niveau 1
<H2> suivi de l'entête et de </H2> donne:
Exemple de header de niveau 2
<H3> suivi de l'entête et de </H3> donne:
Exemple de header de niveau 3
<H4> suivi de l'entête et de </H4> donne:
Exemple de header de niveau 4
<H5> suivi de l'entête et de </H5> donne:
Exemple de header de niveau 5
<H6> suivi de l'entête et de </H6> donne:
Exemple de header de niveau 6
Il n'y a pas de niveau inférieur à H6
Il n'est pas nécessaire d'ajouter les commandes <P> ou <BR> à la fin des lignes de H1 à H6
puisque celles-ci sont implicites.
4.2 Autres commandes
<center> suivi de quelquechose de centré suivi de </center> donne:
Quelquechose de centré
<P> donne un changement de paragraphe
<br> donne un simple changement de ligne
Notez ici que les commandes <P> et <BR> n'ont pas à être fermées. Vous pouvez utiliser
plusieurs commandes <BR> ou <P> répétitivement pour augmenter l'espacement.
<b></b>donne un texte en gras:
texte en gras
<strong></strong>donne un texte en gras également:
texte en gras
<EM></EM> donne un texte en italique:
texte en italique
<I></I> donne également un texte en italique:
texte en italique
<CITE></CITE>donne aussi un texte en italique:
texte en italique
<TT></TT>donne un texte formaté avec une fonte à espacement constant (teletype):
formaté avec une police à espacement constant
texte
note: Les majuscules et les minuscules peuvent être utilisées indifféremment pour les
annotations.
Texte préformaté
Les annotations <pre></pre> obligent le navigateur à afficher un texte préformaté. Le
navigateur respecte alors les fins de ligne (retours de chariot). Voici un exemple de texte
préformaté:
Résultats du vote dans la circonscription
Noms votes obtenus %
________________________________________________
Candidat 1: 670 votes 59
Candidat 2: 341 votes 30
Candidat 3: 123 votes 11
________________________________________________
Total des votes: 1134 votes 100
La commande <CODE></CODE> permet d'afficher du texte provenant de lignes de codes en
programmation. C'est un formatage similaire à la commande TT. Les retours de chariot ne
sont pas respectés contrairement à la commande <PRE>. Voici un exemple:
if dPorifice[i] = b then begin Pt :=2 * dPorifice[i] / Ro / NO[i]
Qorifice[i] :=NP[i] * 4 * 0.7 * Ao * XpwrY(Pt, 0,5); end
La commande <VAR></VAR> permet d'attribuer l'annotation variable à une donnée.
L'élément annoté s'affiche en italique comme l'exemple qui suit:
variable
Augmentation ou réduction de la taille des caractères
<FONT SIZE="+2"></FONT SIZE="+2"> donne un accroissement de la grosseur affichée du
texte de 2 unités:
plus gros de 2 unités
<FONT SIZE="+4"></FONT SIZE="+4"> donne un accroissement de la grosseur affichée du
texte de 4 unités:
plus gros de 4 unités
<FONT SIZE="-2"></FONT SIZE="-2"> donne une réduction de la grosseur affichée du
texte de 2 unités:
plus petit de 2 unités
Les valeurs autorisées s'échellonnent entre 1 et 7. Prenez note que Netscape reconnaît aussi
les commandes écrites sans guillemets comme <FONT SIZE=+1>. Nous recommandons
toutefois que vous respectiez à la lettre les codes HTML reconnus. Vous pouvez aussi utiliser
commande abbréviée </FONT> pour clore la commande <FONT SIZE>. Il est important de
souligner ici que l'usage de cette commande n'influence pas la taille des H1 à H6. Ainsi,
augmenter la taille du texte peut entraîner un dépassement de la taille d'une entête, ce qui n'est
pas souhaitable.
BLOCKQUOTE
La commande <BLOCKQUOTE></BLOCKQUOTE> permet d'emprisonner un paragraphe
telle une citation en alinéa comme dans l'exemple ci-dessous:
Ce texte a été analysé par plusieurs auteurs dont Messieurs DeLaRoche,
Dupuis et Dumont. Ils en sont tous venus à la conclusion que le grand mérite
réside dans la traduction parfaite d'un texte déjà publié par un australien du
nom de McIntyre.
La commande <STRIKE></STRIKE> permet de rayer un texte comme
dans l'exemple suivant: TEXTE RAYÉ
La commande <SUB></SUB> permet d'utiliser les indices dans des
formules comme dans l'exemple qui suit: H
La commande <SUP></SUP> permet d'utiliser les exposants dans des
formules comme comme dans l'exemple qui suit: E=mc
Une autre commande intéressante permet de faire clignoter du texte afin
d'attirer l'attention de l'usager. La commande est: <BLINK>IMPORTANT</BLINK> et
donne: IMPORTANT. Cette commande ne fonctionne pas sur une image.
2O.2.
Caractères spéciaux dans HTML
Certains caractères ont une signification spécifique dans HTML. Pour les utiliser comme tels
dans une page, il faut utiliser les commandes alternatives pour les afficher correctement à
l'écran. Ces commandes sont:
<
>
&
"
pour: <pour: >pour: &pour: "
À PROPOS DES ACCENTS...
L'utilisation des caractères accentués sur le WWW pose un certain nombre de problèmes car il
y a plusieurs façons de traiter les caractères diacritiques.
On peut en effet utiliser une des deux méthodes suivantes:
•
•
Les caractères référencés
Avec cette méthode, on utilise seulement le jeu de caractères US-ASCII standard.
Ce dernier ne contient que 127 caractères (non-accentués) et n'utilise que sept bits sur les huit
que contient un octet (l'unité fondamentale permettant de représenter un caractère latin sur les
ordinateurs). Cette méthode a l'avantage d'être passepartout puisque:
1. Certains systèmes informatiques filtrent le huitième bit lorsqu'ils échangent du
courrier avec d'autres systèmes informatiques. Aussi, l'envoi, par courrier
électronique, d'un document HTML utilisant un jeu de caractères 8 bits n'est pas
assuré d'être réalisé avec succès. Par contre, la norme HTTP (utilisée sur le WEB)
prescrit des échanges utilisant 8 bits. L'utilisation d'un jeu de caractères contenant 256
entités est donc possible pour les communications sur le WWW.
2. Les jeux de caractères dits "étendus" ou 8-bits ne sont pas les mêmes d'un système
informatique à un autre. Aussi, la seule façon d'assurer l'intégrité d'un document
HTML, quelle que soit la plateforme utilisée, est de se limiter au jeu de caractères USASCII
(7 bits).
Le désavantage de la méthode des caractères référencés est que la composition et la
consultation des sources HTML de votre document devient beaucoup plus fastidieuse (le
document se trouve «enlaidi» d'une série de codes inintelligibles). Par exemple, le caractère é
est encodé avec la séquence de caractères suivante:
En d'autres mots, si le travail de
plateformes utilisant des encodages différents, la seule façon d'assurer l'intégrité du document
lorsque celui-ci est échangé consiste à utiliser les caractères référencés.
Cette situation est appelée à évoluer car l'interopérabilité entre les systèmes devient de plus en
plus important.
é.composition d'un document HTML doit être effectué sur des
Le jeu de caractères ISO Latin-1 (ISO-8859-1)
Cette méthode est, de bien des façons, plus élégante que la première. Elle suppose cependant
l'utilisation, pour la
le jeu de caractères ISO Latin-1.
Le jeu de caractères ISO Latin-1 est constitué de 256 caractères permettant d'accommoder
toutes les langues latines occidentales. Comme son nom l'indique, il est l'objet d'une norme
ISO reconnue sur l'Internet pour l'encodage des caractères diacritiques.
La plupart des systèmes UNIX récents ainsi que les plateformes MS-Windows (3.11, 95, NT)
peuvent être configurés pour utiliser les jeux ISO Latins. Par contre, l'utilisation des
plateformes Macintosh, MS-DOS ou OS/2 peut poser des problèmes. En effet, les
manufacturiers de ces systèmes ont adoptés des encodages différents pour représenter les
caractères diacritiques. Ainsi, le é est representé par la valeur numérique
code multilingue (850) sur DOS et OS/2, par la valeur
composition des pages HTML, d'une plateforme informatique qui utilise130 dans la page de142 sur Macintosh et par la valeur 233
en ISO Latin-1.
Il va sans dire que si le logiciel de navigation WWW ne connaît pas le jeu de caractère utilisé,
le résultat risque d'être très décevant sinon illisible. En fait, la norme HTTP qui défini le
protocole d'échange de données sur le WEB prescrit le jeu de caracères ISO Latin-1 et les
logiciels de navigation ne doivent pas assumer autre chose.
Autrement dit, si vous décidez d'utilisez le jeu de caractères ISO Latin-1 (8 bits), la
consultation du
éditeur qui utilise lui aussi ce jeu de caractères.
code source (HTML) de votre document devra toujours se faire avec un
Exemples des résultats obtenus avec différents encodages
Pour illustrer la différence entre les jeux de caractères et les techniques de représentation des
caractères diacritiques, la liste qui suit contient des références à des fichiers sources en HTML
utilisant différents encodages:
•
Document HTML utilisant les caractères référencés
•
Document HTML utilisant les caractères ISO Latin-1
•
Document HTML utilisant les caractères de la Page de code 850 (MS-DOS, OS/2)
•
Document HTML utilisant les caractères Macintosh
Si vous demandez à votre navigateur de vous afficher le contenu de ces documents, seuls les
deux premiers apparaîtront "intacts". Par contre, si vous examinez la source de ces documents
avec votre navigateur (
utilise l'encodage natif de votre système d'exploitation apparaîtront "intacts". Essayez le!
view source sur Netscape), alors le premier document et celui qui
En résumé
En tant que francophones, nous devrions encourager et promouvoir l'utilisation d'une norme et
d'une technologie qui permet d'exprimer toutes les subtilités de l'orthographe français sans
recourir à des artifices lourds, complexes et inesthétiques.
De ce point de vue, l'utilisation de caractères encodés en US-ASCII nous apparaît comme un
pis-aller tout à fait insatisfaisant.
Le jeu de caractères ISO Latin est déjà reconnu sur l'Internet et dans la communauté
informatique internationale. De plus, il n'est pas rattaché à un manufacturier d'ordinateurs ou
de logiciels et il permet l'expression de toutes les langues latines occidentales.
Nous encourageons tous les utilisateurs et concepteurs francophones à utiliser cette norme
lorsque c'est possible. Il faut également encourager les fabricants de logiciels d'exploitation,
de traitement de textes, de mise en page, d'édition et de traitement de courrier électronique à
faire de même.
La tâche de décodage et de conversion doit être laissée aux ordinateurs, les humains ont des
choses plus intéressantes à faire.
5. Listes et définitions
Cette section décrit comment programmer des listes ainsi que des définitions en HTML. Que
l'on utilise ou non les codes <UL> ou <OL>, chaque ligne doit être précédée de la commande
<LI>.
5.1 Listes non ordonnées <UL>
Les listes sont très utilisées en HTML pour ordonner de l'information hiérarchiquement, en
utilisant ou non des chiffres pour numéroter les sections et sous-sections. On parle alors de
listes non-ordonnées (<UL>) et de listes ordonnées (ou <OL>).
<UL>
<LI>premier point
<LI>deuxième point
</UL>
donne:
•
•
<UL>
<LI>premier point
<LI>deuxième point
<UL>
<LI>premier point secondaire
<LI>deuxième point secondaire
</UL></UL>
donne:
•
•
o
o
L'indentation multiple permet d'utiliser par défaut différentes puces en début de liste. Dans
l'exemple suivant affichant trois niveaux, on remarque que le cercle noir est suivi du cercle
vide puis du carré vide:
deuxième point secondaire
•
o
premier point tertiaire
•
•
•
o
o
o
premier point
premier point secondaire
premier point tertiaire
5.2 Listes ordonnées <OL>
<OL>
<LI>premier point
<LI>deuxième point
</OL>
donne:
1. premier point
2. deuxième point
<OL>
<LI>premier point
<LI>deuxième point
<OL>
<LI>premier point secondaire
<LI>deuxième point secondaire
</OL></OL>
donne:
1. premier point
2. deuxième point
1. premier point secondaire
2. deuxième point secondaire
Variantes d'affichage des listes ordonnées
Le code:
<OL TYPE=A>
<LI>premier item
<LI>deuxième item
</OL>
donne:
A. premier item
B. deuxième item
Les variantes <OL TYPE=a>, <OL TYPE=I>, <OL TYPE=i> et <OL TYPE=1> donnent
respectivement des lettres minuscules, des lettres majuscules en chiffres romains, des lettres
minuscules en chiffres romains et des chiffres, comme les exemples ci-dessous:
a. premier item
b. deuxième item
I. premier item
II. deuxième item
i. premier item
ii. deuxième item
1. premier item
2. deuxième item
5.3 Définitions
Une définition est une annotation HTML qui permet d'inscrire d'abord un terme à définir pour
lui ajouter en-dessous et en retrait (alinéa) sa définition.
<DL> indique une zone de définitions ("definitions list") à venir ci-dessous (une ou plusieurs)
<DT>("definition term") indique le premier terme à définir
<DD> donne la définition du premier terme en retrait d'un alinéa
</DL>("definition list") indique la fin de la zone de définitions.
Pour mettre plusieurs définitions une à la suite des autres, il suffit de répéter la séquence
<DT><DD> autant de fois que l'on en a besoin à l'intérieur de la zone. On peut aussi donner
plus d'une définition à un terme en réutilisant la commande <DD> plus d'une fois sous la
ligne <DT>.
Voici ce que cela donne:
Octet
Mot de huit bits
kiloOctet
1024 octets
8192 bits
6. Images
Les navigateurs HTML reconnaissent généralement deux formats d'images; les images GIF et
les images JPEG. Ces deux formats d'images sont comprimés.
L'insertion d'une image est possible en tapant la commande suivante: <img
src="images/serviette50.gif">, ce qui donne:
Le segment
guillemets indique le nom du dossier où se trouve la ou les images, le deuxième terme indique
le nom du fichier contenant l'image et le format de celle-ci. Une image en format GIF se
termine par
La taille de l'image est déterminée par le fichier lui-même. On peut placer par exemple une
grande image occupant l'ensemble de l'écran:
IMG SRC indique qu'il s'agit de la source d'une image, le premier terme entre les.GIF alors qu'une image en format JPEG se termine par .JPEG ou .JPG .
Insertion d'une image au fil du texte:
Lorsque vous rencontrerez cette image, <img src="images/serviette50.gif"> vous pourrez
vous diriger...donne:
Lorsque vous rencontrerez cette image, vous pourrez vous diriger...
Alignement des images
Image alignée à la base: <img src="images/serviette50.gif" ALIGN=BOTTOM> donne:
L'image de la serviette devrait s'aligner à sa base.
Image alignée à la tête: <img src="images/serviette50.gif" ALIGN=TOP> donne:
L'image de la serviette devrait s'aligner à sa tête.
Image alignée au centre: <img src="images/serviette50.gif" ALIGN=MIDDLE> donne:
L'image de la serviette devrait s'aligner en son centre.
Alignement du texte à gauche ou à droite d'une image
code: <img src="photos/PK015moyenne.jpeg"
ALIGN=LEFT HSPACE=4> nous donne:
Le système d'irrigation régulé par vannes est
utilisé au Pakistan afin d'emmagasiner et
économiser l'eau de pluie.
Remarquez l'usage de la commande
ALIGN=LEFT où l'image se place à gauche du
texte. L'inverse est possible avec la commande:
<img src="photos/PK015moyenne.jpeg"
ALIGN=RIGHT HSPACE=4> qui donne:
Le système d'irrigation régulé par vannes est
utilisé au Pakistan afin d'emmagasiner et
économiser l'eau de pluie.
La commande HSPACE
définit un espace horizontal libre entre l'image
et le texte. Ainsi, l'exemple suivant montre une
progression de l'espace horizontal autour d'une
image de HSPACE=1 à HSPACE=5. Cette
commande HTML se positionne ainsi dans le
code:
<img src="images/belicone.gif" HSPACE=5>
texte texte texte texte texte texte texte texte texte texte
Toutes les valeurs sont possibles. La commande VSPACE définit un espace vertical libre
entre l'image et le texte.
La commande <br clear> placée à la fin du texte indique au navigateur de
forcer un changement de ligne qui tienne compte de la place occupée par l'image. Ainsi dans
l'exemple présent, le texte étant plus long que l'espace disponible, celui-ci va continuer sous
l'image.
7. Lignes horizontales
Pour créer des lignes en HTML, la commande de base est:
<HR>
Pour faire varier la largeur de la ligne, on utilise le code suivant:
donne une ligne de 75% de la largeur de l'écran (selon la largeur de la fenêtre choisie par
l'usager).
Toutes les valeurs sont possibles, même les décimales. Voici un échantillon varié:
<HR WIDTH=5%>donne:
<HR WIDTH=15%>donne:
<HR WIDTH=25%>donne:
<HR WIDTH=50%>donne:
<HR WIDTH=65%>donne:
<HR WIDTH=92%>donne:
Les paramètres de largeur des lignes peuvent aussi être désignées en pixels. Ainsi:
<HR WIDTH=100> donne:
<HR WIDTH=200> donne:
<HR WIDTH=300> donne:
<HR WIDTH=400> donne:
Pour faire varier l'épaisseur de la ligne:
<HR SIZE="5"> donne une ligne d'épaisseur 5:
Toutes les valeurs sont possibles, même les décimales. Voici un échantillon varié:
<HR SIZE="1">donne:
<HR SIZE="2">donne:
<HR SIZE="3">donne:
<HR SIZE="3.5">donne:
<HR SIZE="4">donne:
<HR SIZE="10">donne:
<HR SIZE="25">donne:
On peut faire varier les deux en même temps:
Toutes les valeurs sont possibles, même les décimales. Voici un échantillon varié:
<HR SIZE=2 WIDTH=25%> donne:
<HR SIZE=4 WIDTH=45%> donne:
<HR SIZE=10 WIDTH=95%>donne:
<HR SIZE=20 WIDTH=25%>donne:
Les lignes peuvent aussi être alignées à gauche à droite ou centrées. Les commandes suivantes
<HR ALIGN=left>
<HR ALIGN=right>
<HR ALIGN=center>
donnent respectivement:
Enfin, la commande <HR NOSHADE> permet d'afficher une ligne sans
effet de profondeur comme ci-dessous:
donne:<HR WIDTH=75%> . Cela
Images et lignes
Il est également intéressant de placer des lignes en tant qu'images, ce qui offre beaucoup plus
de possibilités graphiques. Ainsi, il s'agit de dessiner et préparer à l'avance dans votre logiciel
de dessin préféré une image en forme de ligne et de l'enregistrer en format GIF. On peut aussi
capturer un fond d'écran et utiliser la trame sous forme de ligne mince ou épaisse, longue ou
courte, selon votre choix. Ces images sont alors appelées à l'aide de la commande de base
(<img src="images/ligne1.gif">). Ainsi, on pourrait avoir des lignes de ce genre:
8. Pointeurs
Pour insérer un pointeur (lien hypertexte-hypermédia), il faut indiquer une référence (appelée
URL pour Uniform Ressource Locator) et un élément, texte ou image, visible à l'écran sur
lequel on doit cliquer pour y accéder. Voici un exemple de code pour obtenir un pointeur:
<A HREF="dossier/menu_du_jour.HTML">Menu du jour</A>.
Le pointeur apparaît alors en couleur contrastée (bleu par défaut dans Netscape) et souligné
dans le navigateur et donne:
Les pointeurs peuvent diriger le navigateur vers des sites HTTP, FTP, TELNET, TN3270,
GOPHER ou USENET. On peut aussi entrer directement sur un fichier sur le système local ou
sur un réseau local.
Pour créer un pointeur, il s'agit tout simplement de définir le type de document dans la
commande A HREF comme dans les exemples qui suivent:
Menu du jour.
8.1 Site HTTP (WWW)
Le code:
<A HREF="http://WWW.fsaa.ulaval.ca">Serveur WWW de la FSAA</A>
donne accès à un serveur WWW, notamment à celui de la Faculté des sciences de l'agriculture
et de l'alimentation de l'Université Laval.
Cliquez ici pour accéder à ce serveur:
Serveur WWW de la FSAA.
8.2 Site FTP
Le code:
<A HREF="ftp://ftp.apple.com/pub">Site FTP de la compagnie Apple</A>
donne accès à un dossier public sur un serveur FTP de la compagnie Apple inc.
Cliquez ici pour accéder à ce serveur:
Site FTP de la compagnie Apple.
8.3 Site TELNET
Le code:
<A HREF="telnet://ariane.ulaval.ca/">ARIANE</A>
permet d'accéder à un serveur (le catalogue de la bibliothèque de l'Université Laval) en mode
émulateur de terminal VT100/VT220.
Cliquez ici pour accéder à ce serveur:
ARIANE
8.4 Site TN3270
Le code:
<A HREF="tn3270://muse <retour>@mvs.mcgill.ca/">MUSE</A>
permet d'accéder à un serveur (le catalogue de la bibliothèque de l'Université McGill) en
mode émulateur de terminal IBM 3270.
Cliquez ici pour accéder à ce serveur:
MUSE
8.5 Site GOPHER
Le code:
HREF="gopher://dionysos.ulaval.ca:70/00/reglementation/calendrier/1996-
1997/cal9697.rtf.txt</A>
<A
donne accès à un serveur Gopher notamment à celui de l'Université Laval et plus
particulièrement au fichier contenant le calendrier universitaire.
Cliquez ici pour accéder à ce document:
Calendrier
8.6 Site USENET(news)
Le code:
<A HREF="news:soc.culture.quebec">Société québecoise</A>
donne accès au forum NEWS sur la société québecoise.
Cliquez ici pour accéder à ce forum:
Société québécoise
8.7 Fichier sur le système hôte
Le code:
<A HREF="fichier.HTML">fichier</A>
donne tout simplement accès à un fichier HTML situé au même niveau hiérarchique que le
fichier actuellement ouvert sur le serveur.
Pour obtenir un document situé ailleurs sur le même serveur, il faut spécifier le sentier à
suivre. Dans ce cas, on indique le chemin complet avec le code qui suit:
<A HREF="http://www.grr.ulaval.ca/grrwww/glossairehtml.html">Glossaire</A>.
8.8 La commande A NAME
La commande
ensuite référer directement à ce point précis avec une commande
se taper directement comme ceci:
<a name="Gopher">, ce qui indique au navigateur où se trouve la section visée. Pour se
rendre à cet endroit, il faut taper la référence comme ceci:
<a href="manuel8.html#Gopher">Gopher</a>.
Pour essayer la commande en question, cliquer sur:
chapitre 8.5 de ce manuel.
Les pointeurs
que notre glossaire a été conçu. Ainsi, après avoir identifié les sections d'un document avec
des <a name="section">, il s'agit de taper la commande plus complète <a
href="manuel8.html#Gopher">Gopher</a>. Ainsi, le pointeur indique d'abord le nom du
fichier HTML dans lequel il faut se rendre et ensuite le nom de la section précédée de #.
A NAME enregistre un point d'accès à l'intérieur d'un document HTML. On peutA HREF. La commande peutGopher et vous devriez vous rendre auA NAME fonctionnent aussi d'un document HTML à un autre autre. C'est ainsi
8.9 La commande ALT
La commande ALT est utile à connaître puisqu'elle permet aux usagers n'utilisant pas de
navigateurs graphiques, ou ayant désactivé volontairement l'affichage des images, de voir des
pointeurs alternatifs en mode texte.
La commande ALT est ajoutée dans le code des pointeurs ainsi:
<A HREF="fichier.HTML"><img src="images/belicone.gif" ALT="accès au fichier
X"></a>
Ce qui donne ceci dans un navigateur graphique: et ceci dans un navigateur textuel:
au fichier X
accès
9. Courrier
L'adressage de courrier est possible en HTML de deux manières différentes selon que l'on
utilise les formulaires ou non.
La première façon est d'utiliser la commande suivante:
<A HREF="mailto:dboivin@grr.ulaval.ca">Le courrier électronique</a>
Celle-ci s'affiche ainsi à l'écran:
C'est donc un bouton clickable qui nous amène la boîte de dialogue suivante dans laquelle on
tape notre message et on l'envoie.
Notez que l'adresse électronique de l'envoyeur vis à vis "From:" apparaît d'elle-même si
l'usager a pris soin d'entrer ces renseignements dans le fichier préférences de son navigateur.
L'adresse électronique du destinataire est inscrite tout de suite après "mailto:" dans la
commande HTML.
Le courrier électronique.
10. Formulaires
10.1 La commande FORM
Des formulaires peuvent être préparés afin de saisir des données et les traiter au niveau du
serveur.
Pour rédiger un questionnaire, il faut:
1. Établir une zone d'édition (appelée FORM) en utilisant les commandes
<FORM></FORM>.
2. Définir la méthode à employer pour transmettre au serveur l'information recueillie
dans les champs du formulaire.
3. Identifier l'emplacement et le nom du programme qui devra traiter l'information
recueillie.
4. Fournir, s'il y a lieu, les arguments au programme de traitement des données.
Toute cette information se retrouve dans la commande suivante:
<FORM METHOD="POST" ACTION="/cgi-bin/questionnaire.cmd?xxx">
La méthode utilisée est
se retrouve dans le dossier
Il est à noter que le programme de traitement des données (questionnaire.cmd en l'occurrence)
doit être fourni par l'administrateur du serveur et créé en fonction de l'application à supporter.
POST, le programme de traitement se nomme questionnaire.cmd etcgi-bin, un seul argument est fourni au programme soit xxx.
10.2 Les commandes INPUT
Voici un exemple complet de formulaire. Veuillez noter que les commandes de formatage
(caractères gras, centrer, insertion d'une image, etc.) que l'on a décrites jusqu'ici sont toutes
valables et utilisables.
La commande INPUT="TEXT"
Parmi les choix disponibles en HTML, un des types d'entrée de données est le champ
type="text"
dimensions à l'écran.
Ainsi, dans la question ci-dessous, le code à utilisé pour entrer le nom de la personne est:
input. Dans ce cas, il faut inscrire le type de champ, le nom du champ et ses
NOM: <input type="text" name="name" size=30>.
Le type
définie à l'écran par la commande
Ainsi, une commande size=30 est un champ d'une longueur de 30 espacements de largeur.
Pour un champ plus long, entrez une valeur de 50 ou 70, selon l'espace requis pour couvrir
toutes les possibilités.
La commande name="name" précise que l'on désire enregistrer le contenu du champ dans la
rubrique "name".
Voici quelques exemples de champs text:
text est un champ ou l'usager entre de l'information sur son clavier, dans une zonesize.
VEUILLEZ ENTRER LES INFORMATIONS
DANS LES CHAMPS CI-DESSOUS
•
NOM:
•
ADRESSE:
•
VILLE:
•
PROVINCE:
•
CODE POSTAL:
•
PAYS:
•
TELEPHONE:
•
COURRIER ELECTRONIQUE:
Copie du
code HTML utilisé pour générer ce formulaire.
La commande INPUT="RADIO"
Un autre type de champ est le type "input type=radio" qui permet d'afficher une série de
boutons radio comme choix de réponses.
Il suffit d'abord de poser la question puis de positionner la commande suivante:
<input type="radio" name="info" value="OUI">OUI
<input type="radio" name="info" value="NON">NON
Dans l'exemple ci-dessous, deux choix sont offerts Oui ou Non. Lorsque l'usager répond, il n'a
d'autre choix que l'une ou l'autre réponse. Il ne peut pas choisir les deux.
1.Etes-vous officiellement inscrit au cours sur HTML?
OUI NON
A la question 2 ci-dessous, on remarque que les choix de réponses sont offerts comme des
définitions (DT).
Les choix peuvent alors s'écrire comme ceci:
<dl>
<dt>A.<input type="radio" name="refer" value="par_hasard">
Tout à fait par hasard en naviguant sur internet.
<dt>B. <input type="radio" name="refer" value="pointeur.">
On m'avait donné le pointeur pour m'y rendre.
</dl>
Le résultat donne:
2. Si "non", comment avez-vous abouti dans ce manuel HTML?
A.
B.
Tout à fait par hasard en naviguant sur internet. On m'avait donné le pointeur pour m'y rendre.
Dans l'exemple qui suit, on remarque que le nombre de choix de réponses n'est pas limité à
deux.
Ainsi, lorsque plusieurs choix (six dans l'exemple ci-dessous) sont fournis, l'usager ne peut en
sélectionner qu'un seul quand même.
Une commande doit être inscrite comme ceci:
<input type="radio" name="temps"
value="-10"> moins de 10 minutes
Le premier segment indique qu'il s'agit bien d'un type de bouton radio, le champ s'appelle
"temps" et la valeur proposée est -10.
Il faut ensuite répéter le choix de réponse pour que celui-ci soit visible à l'écran.
Voici le résultat offert à l'écran des six choix de réponses.
3. Combien de temps avez-vous passé dans le manuel HTML?
moins de 10 minutes
entre 10 et 15 minutes
entre 15 et 30 minutes
entre 30 et 60 minutes
entre 1 et 2 heures
La commande INPUT=CHECKBOX
plus de 2 heures
La commande
possibles en même temps. La commande s'écrit:
- Kent, England <input name="city" TYPE=checkbox VALUE="Kent"><BR>
ou
-<input name="city" TYPE=checkbox VALUE="Kent"> Kent, England <BR>
selon que vous voulez afficher le bouton avant ou après la réponse.
input Type=checkbox permet d'afficher une liste ou plusieurs choix sont
4a. Veuillez indiquer la ou les villes que vous avez déjà visité?
- Kent, England
- Toronto, Canada
- Dublin, Ireland
4b. Veuillez indiquer la ou les villes que vous avez déjà visité?
-
-
-
La commande SELECT NAME et OPTION
Kent, England Toronto, Canada Dublin, Ireland
La commande
possible et qui s'affichent sous la forme d'un menu "pop-up". La commande s'écrit:
<select name><option selected>Kent, England<option>Toronto, Canada<option>Dublin,
Ireland</select>
select name et Option permet d'afficher une liste ou un seul choix est
5. Veuillez indiquer la ou les villes que vous avez déjà visité?
Dans l'exemple de la question 6 qui suit, on utilise un sixième type de mode d'entrée de
données, soit celui du TEXTAREA.
La commande HTML utilisée ci-dessus est:
cols=56></TEXTAREA>
<TEXTAREA name="logiciels?" rows=3
Dans ce type, on spécifie d'abord le type soit textarea, ensuite le nom de la rubrique soit
name="logiciels?".
En troisième, il faut définir les paramètres d'affichage de la zone de dialogue en rangées et en
colonnes. Les rangées dans ce cas sont de trois et les colonnes sont de 56.
Faites des essais vous-même en faisant varier ces deux nombres.
Enfin, il faut fermer la commande par un </TEXTAREA>.
6. Quels logiciels utilisez-vous pour naviguer l'Internet?
premier point tertiairepremier point secondairepremier pointpremier point tertiairepremier point secondairepremier point
On peut changer ces choix en utilisant la commande <UL TYPE=disc>, <UL TYPE=circle>
ou <UL TYPE=square> comme le montre les exemples ci-dessous:
premier point secondairepremier pointpremier point secondairedeuxième pointpremier pointdeuxième pointpremier pointLes caractères ISO Latin-1 (ISO-8859-1)Les caractères référencés (entity references en anglais) |
| Aujourd'hui sont déjà 96 visiteurs (121 hits) Ici!
|
|
|
|
