HTML 4 - AgroParisTech

Transcription

INSTITUT NATIONAL AGRONOMIQUE PARIS-GRIGNON
INA P-G
COMPLÉMENTS AUX BASES
DE LA CRÉATION DE PAGES :
FORMULAIRES, CADRES,
NORMALISATION ET RÉFÉRENCEMENT
♣
Objectifs
• Maîtriser des techniques avancées pour enrichir un site
• Pour un autodidacte, contrôler et mettre à niveau ses connaissances
Compléments
• Un éditeur pour HTML (HTML-Kit, Dreamweaver, etc.)
• Aide-mémoire de HTML (document disponible sur le site* de l'auteur)
Niveau de compétences en pré-requis
• Connaissance des bases de l'écriture de pages (document sur le site*)
♣
Ce document d'enseignement est diffusé librement, pour usage individuel.
Michel Cartereau - Mai 2006
INA P-G - UER d'informatique - 16, rue Claude Bernard - F 75231 PARIS CEDEX 05
michel.cartereau @ inapg.fr - Téléphone : +33 1 44 08 16 80 - Télécopie : +33 1 44 08 16 66
(*) http://www.inapg.fr/ens_rech/mathinfo/winfo/
SAVEZ-VOUS ?
Répondre soit par vrai ou faux.
1. Les renseignements issus dans un formulaire sont toujours transmis en clair.
2. Toute donnée issue d'un formulaire est identifiée par un nom de zone.
3. Il est possible de choisir plusieurs options à la fois dans une zone de liste.
4. Une zone cachée de formulaire sert à placer un commentaire pour l'auteur.
5. Dans le cas d'un bouton à image, le serveur reçoit les coordonnées du clic.
6. HTML 4 facilite le regroupement de zones d'un formulaire.
7. Un jeu de cadres se définit dans une page spéciale.
8. Le redimensionnement d'un cadre peut être annulé.
9. La notation _top sert à l'affichage d'une page dans une nouvelle fenêtre.
10. En HTML 4, il est possible d'incruster une page dans une autre.
11. La normalisation d'HTML s'effectue dans le cadre du CERN à Genève.
12. Une adresse d'accès à un serveur FTP peut comporter un nom d'usager.
13. HTTP est une norme s'appliquant aux caractéristiques linguistiques d'une page.
14. La balise <meta> permet d'annuler la mise en cache d'une page.
15. La description d'une page peut contenir des mots-clefs mais pas un résumé.
16. Un mécanisme permet d'interdire à un robot d'indexer le contenu d'une page.
17. Le symbole de l'euro (« € ») est disponible dans l'alphabet ISO-8859-1 (Latin 1).
18. On peut indiquer en HTML la langue du texte d'une page.
19. Une icône peut être affectée à une page afin de la repérer dans un navigateur.
20. HTML 4 permet de regrouper des options dans une liste de formulaire.
Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 2
LES FORMULAIRES
Principes
Composantes
Mise en œuvre
UTILISATION D'UN FORMULAIRE
UN EXEMPLE DE RECUEIL DE RENSEIGNEMENTS
FORMULAIRE
Nom
Adresse
Catégorie
↓
znom=TARZAN Albert
zadresse=Jungle
zcategorie=Homme
Envoi
z
FORMULAIRE
RENSEIGNEMENTS
D'ENREGISTREMENT
TRANSMIS
PRINCIPES
INDICATION DE LA DESTINATION DES RENSEIGNEMENTS
traitement par un programme sur un serveur (en général), ou
envoi par messagerie dans une boîte aux lettres (sous réserves)
exemple : envoyer les renseignements au programme en
http://www.inapg.fr/cgi-bin/winfo/mouchard.pl
CONSTRUCTION DU FORMULAIRE D'ACQUISITION
assemblage à l'aide de différents types de zone,
exemple : une zone de saisie d'un texte sur une ligne
IDENTIFICATION DE CHAQUE RENSEIGNEMENT
par un nom spécifique attribué à la zone de saisie
exemple : zone de l'adresse identifiée par le nom zadresse
CRÉATION DE FORMULAIRE (DREAMWEAVER, HTML-KIT)
z
DREAMWEAVER
1
1) Commande INSERTION FORMULAIRE
2) Sélection du formulaire : clic sur un bord
3) Paramètrage via les propriétés
destination, mode de transmission et type de codage
z
HTML-KIT
2
1) Commande ACTIONS FORMS FORM
2) Indiquer la destination en paramètre de action=""
3) Ajouter l'attribut du mode d'envoi : method=""
et si besoin, du type de codage : enctype=""
<form method="GET"
action="http://www.inapg.fr/cgi-bin/winfo/mouchard.pl">
Différents éléments d'un formulaire : menu ACTIONS FORMS
1
2
Cas de la version MX (6) de Macromedia Dreamweaver
Cas de la version 1.0 - Outil gratuit, disponible en http://www.chami.com/html-kit/
PARAMÉTRAGE DU FORMULAIRE
z
CARACTÉRISTIQUES GÉNÉRALES
PARAMÈTRAGE DÉFINI DANS UN ENTÊTE (<form>)
destination et mode de transmission des renseignements
DESTINATION DES RENSEIGNEMENTS ISSUS DU FORMULAIRE (action="")
soit envoi à un programme de traitement sur un serveur (URL)
soit envoi 1 par messagerie : mailto:
MODE D'ENCODAGE DES DONNÉES (enctype="")
a priori, codage : application/x-www-form-urlencoded
2
ou en cas d'envoi avec fichier joint : multipart/form-data
ou en cas d'envoi en clair dans un message : text/plain
MODE DE TRANSMISSION DES DONNÉES AU SERVEUR (method="")
soit "GET" : envoi avec l'adresse de destination (a priori),
soit "POST" : envoi en dehors de l'adresse (données invisibles)
z
CAS DE LA TRANSMISSION VERS UNE BOÎTE AUX LETTRES
ENVOI D'UN MESSAGE À UNE ADRESSE ÉLECTRONIQUE
Attention ! cela dépend des possibilités du navigateur
PARAMÈTRAGE
action ........................................ mailto:adresse
méthode .................................... POST
type d'encodage........................ text/plain
EXEMPLE DE BALISE D'ENTÊTE
<form
method="POST"
action="mailto:[email protected]"
enctype="text/plain" >
1
Envoi conditionné aux possibilités réelles du navigateur sur le poste de travail
Mode de codage appliqué automatiquement en cas d'absence d'indication
3 Conseillé dans le cas général car peu de contraintes sur la nature des informations transmises
2
3
EXEMPLE DE FORMULAIRE ORDINAIRE
zone de texte (1 seule ligne)
znom
zone de texte
(plusieurs lignes)
zcommentaire
zone de liste
case d'option
zage
zetudiant
boutons de choix exclusif
zsexe
bouton
d'annulation
bouton de
validation
ZONES DE FORMULAIRE DANS DREAMWEAVER
z
BARRE D'OUTILS SPÉCIALISÉE
Activer FENÊTRE INSERTION FORMULAIRE
texte sur une ligne
zone cachée
texte sur
plusieurs lignes
bouton de commande
bouton pour fichier
bouton à image
zone de liste
bouton de choix exclusif
case à cocher
Boutons d'insertion d'un élément
(ou INSERTION OBJETS DE FORMULAIRE)
z
CARACTÉRISTIQUES D'UN ÉLÉMENT DU FORMULAIRE
Clic dans la zone pour accéder à ses propriétés dans le panneau
ATTENTION ! VEILLER À BIEN RESTER DANS LE CADRE DU FORMULAIRE !
ZONES DE FORMULAIRE DANS HTMLKIT
z
BARRE D'OUTILS SPÉCIALISÉE
Activer VIEW ACTIONS BAR puis l'onglet FORMS
formulaire
zone de liste
option d'une liste
texte sur
plusieurs lignes
texte sur une ligne
case à cocher
bouton de
choix exclusif
bouton de commande
Boutons pour un formulaire
(ou ACTIONS FORMS)
ZONES DE SAISIE DE TEXTE
z
SUR UNE SEULE LIGNE (<input type="text" ou "password"> 1)
nom de la zone 2 obligatoire (name=""),
valeur initiale optionnelle (value=""),
taille en caractère de l'affichage optionnelle (size=""),
longueur maximale du texte optionnelle (maxlength=""),
saisie en aveugle optionnelle (<input type="password">)
mais aucune garantie sur la confidentialité de la transmission !
exemples :
<input type="text" name="znom" size="40">
<input type="password" name="zpasse" size="80">
z
SUR PLUSIEURS LIGNES (<textarea>)
nom de la zone 3 obligatoire (name=""),
taille de l'affichage optionnelle mais conseillée :
en lignes (rows="") et en colonnes (cols=""),
texte initial optionnel (éventuellement sur plusieurs lignes) :
<textarea> texte </textarea>
lors de l'envoi, le saut de ligne est codé par « %0D%0A »
exemple :
<textarea name="zdivers" rows="2" cols="18">
exprimez-vous !
</textarea>
1
En XHTML, terminaison de la balise par une espace suivie de oblique avant supérieur : <... />
Le nom est défini dans la balise de la zone par l'attribut d'identification name et non pas id.
3 Le nom est défini dans la balise de la zone par l'attribut d'identification name et non pas id.
2
ZONE DE LISTE
z
CHOIX DANS UNE LISTE
1
(<select> et <option>)
DÉFINITION GLOBALE DE LA LISTE (<select>)
nom de la zone obligatoire 2 (name=""),
taille optionnelle de la liste affichée (size="") :
un seul élément est affiché si elle n'est pas précisée ,
option de choix multiple dans la liste (multiple), lors de l'envoi
couple « nom=valeur » pour chacune des valeurs sélectionnées
DÉFINITION D'UN ÉLÉMENT DE LA LISTE (<option>)
chaque élément de la liste est défini par un libellé affiché,
le libellé est transmis en résultat quand sélectionné,
sauf si une valeur a été indiquée (value="valeur")
sélection automatique lors de l'affichage, en option (selected 4),
sinon c'est le premier élément de la liste
EXEMPLE :
<select name="zage" size="1">
<option value="-18">moins de 18 ans</option>
<option value="18-40">entre 18 et 40 ans</option>
<option value="40-60">entre 40 et 60 ans</option>
<option value="+60" selected>plus de 60 ans</option>
</select>
1
Dreamweaver distingue « menu » et « liste », selon qu'un seul élément est visible à la fois (menu)
ou plusieurs (liste)
3 Modalités de sélection mulitple variables selon les postes ; cas de Windows : Ctrl+clic
4 En XHTML, valeur obligatoire et fixée : selected="selected"
3
BOUTON DE RADIO ET CASE À COCHER
z
BOUTONS DE RADIO (<input type="radio"> 1)
boutons offrant un choix exclusif entre plusieurs options
nom de zone 2 obligatoire identique pour un groupe (name="")
pour chaque bouton, valeur transmise obligatoire (value=""),
activation initiale, en option (checked 3)
exemple :
<input type="radio" name="sexe" value="h">masculin
<input type="radio" name="sexe" value="f">féminin
z
CASE À COCHER (<input type="checkbox"> 1)
nom de zone 2 obligatoire (name=""),
valeur obligatoire (value=""), transmise seulement si case cochée,
activation initiale, en option (checked 3)
exemple :
<input type="checkbox" name="zetudiant" value="oui">
ici, une information ne sera transmise qu'en cas de cochage ;
ce sera alors : zetudiant=oui
1
En XHTML, terminaison de la balise par une espace suivie de oblique avant supérieur : <... />
Le nom est défini dans la balise de la zone par l'attribut d'identification name et non pas id.
3 En XHTML, valeur obligatoire et fixée : checked="checked"
2
ZONES DE COMMANDE
z
BOUTON DE VALIDATION (<input type="submit"> 1)
provoque la transmission des renseignements,
libellé affiché (value="") et nom de zone (name="") optionnels,
possibilité de boutons multiples
exemple :
<input type="submit" value="Envoyer">
z
BOUTON AVEC UNE IMAGE (<input type="image"> 2)
provoque implicitement la transmission des renseignements,
indication obligatoire de l'adresse de l'image (src=""),
libellé (alt="") et nom de zone (name="") optionnels,
le serveur reçoit aussi les coordonnées du clic sur l'image
exemple :
<input type="image" src="lettre.gif" alt="envoyer">
z
BOUTON D'ANNULATION (<input type="reset"> 3)
provoque l'effacement des informations déjà saisies,
libellé affiché (value="") optionnel,
exemple :
<input type="reset" value="Effacer">
1
En HTML 4, autre possibilité : <button type="submit">texte</button> et en XHTML,
terminaison de la balise <input> par une espace suivie de oblique avant supérieur : <... />
2 En HTML 4, autre possibilité : <button type="submit">image</button> et en XHTML,
3 En HTML 4, autre possibilité : <button type="reset">texte</button> et en XHTML,
ZONES SPÉCIALES
CES ZONES NE S'UTILISENT QUE DANS DES CAS TRÈS PARTICULIERS
z
BOUTON D'ACTIVATION DE SCRIPT (<input type="button"> 1)
activation d'un script quand le bouton est pressé,
indication du libellé affiché sur le bouton (value=""),
le script est associé à l'événement onclick
exemple :
<input type="button" value="Spécial" onclick="faire();">
z
BOUTON POUR JOINDRE UN FICHIER (<input type="file"> 2)
cas de l'envoi d'un fichier choisi par l'usager,
codage spécial : multipart/form-data associé à POST
(chaque autre renseignement est transmis séparément)
nom de zone indispensable (name=""),
taille d'affichage optionnelle (size=""),
le bouton et son libellé sont en fait définis par le navigateur,
Attention ! mécanisme assez mal géré par les navigateurs
exemple :
<form action="http://www.poste.fr/colis"
enctype="multipart/form-data" method="post">
<input type="file" name="zdocument">
z
ZONES CACHÉES (<input type="hidden"> 2)
renseignement ni saisi par l'usager ni affiché dans la page,
nom de zone 3 (name="") et valeur (value="") obligatoires,
exemple :
<input type="hidden" name="zpays" value="fr">
1
En HTML 4, autre possibilité : <button type="button">contenu</button> et en XHTML,
2 En XHTML, terminaison de la balise par une espace suivie de oblique avant supérieur : <... />
REGROUPEMENT DE ZONES
RENFORCEMENT DE LA LISIBILITÉ DU FORMULAIRE 1
légende
z
encadrement
REGROUPEMENT DE ZONES (<fieldset>)
balise de regroupement d'une partie d'un formulaire,
signalé à l'affichage généralement par un cadre englobant
z
ATTRIBUTION D'UNE LÉGENDE (<legend>)
balise de définition d'une légende d'un regroupement,
doit être placée juste après le début de regroupement (<fieldset>),
affichage dans le coin supérieur gauche du cadre englobant
z
EXEMPLE
<fieldset>
<legend>Important</legend>
nom <input name="znom" type="text">
prénom <input name="zprenom" type="text">
</fieldset>
1
Notamment pour les malvoyants ; mécanisme introduit dans la version n° 4 d'HTML
REGROUPEMENT D'OPTIONS
RENFORCEMENT DE LA LISIBILITÉ D'UNE LONGUE LISTE 1
libellé
d'un groupe
d'options
z
REGROUPEMENT D'OPTIONS (<optgroup>)
balise de définition d'un groupe d'options d'une liste, avec
un libellé du groupe obligatoire (label="")
signalé à l'affichage généralement par une mise en forme du libellé
et par un décalage des options du groupe
z
EXEMPLE
<select name="zarbre"
multiple size="9" >
<option selected label="aucun" value="?">aucun</option>
<optgroup label="conifère">
<option value="pinus">pin</option>
<option value="larix">mélèze</option>
<option value="thuya">thuya</option>
</optgroup>
<optgroup label="feuillu">
<option value="quercus">chêne</option>
<option value="fagus">hêtre</option>
<option value="castanea">châtaignier</option>
</optgroup>
</select>
1
Mécanisme introduit dans la version n° 4 d'HTML
ETIQUETTES DE ZONES
RENFORCEMENT DE L'ACCESSIBILITÉ AU FORMULAIRE 1
sélection par clic sur le libellé
z
PRINCIPE DE L'ÉTIQUETTE DE ZONE (<label>)
Spécification du libellé associé à une zone à renseigner
mécanisme de liaison entre le texte du libellé et la zone
Renforcement de l'accessibilité à la zone
sélection via le libellé et indication non-visuelle aux malvoyants
z
ETIQUETTE DE ZONE IMPLICITE
Enrobage de la zone et son libellé 2 par la balise <label>
<label> zone avec libellé </label>
Exemple
<p><label>Ville : <input type="text" name="zville"></label></p>
<p><label>Pays : <input type="text" name="zpays"></label></p>
z
ETIQUETTE DE ZONE EXPLICITE
Association indirecte via une identification de la zone :
attribut id="nom" dans la balise de la zone,
<label for="nom"> libellé </label>
Exemple
<p>Sexe :
<input type="radio" name="zsexe" value="M" id="sexem">
<label for="sexem">masculin</label> <input type="radio" name="zsexe" value="F" id="sexef">
<label for="sexef">féminin</label>
</p>
1
2
Notamment pour les malvoyants ; mécanisme introduit dans la version n° 4 d'HTML
Attention à ce que la balise <label> ne recouvre qu'une seule zone de saisie.
ATTRIBUTS SUPPLÉMENTAIRES
CES ATTRIBUTS ONT ÉTÉ INTRODUITS DANS LA VERSION N° 4 D'HTML
z
TOUCHE DE RACCOURCI (accesskey="symbole")
Affectation d'une touche 1 de raccourci à la zone,
attention ! il y a une distinction entre lettre minuscule et majuscule
exemple : <input type="reset" accesskey="z">
z
IDENTIFICATION D'UNE ZONE (id="nom")
identification utilisable par programmation ou comme une ancre,
complémentaire au nom de zone (name) et non transmis à l'envoi
exemple : <input type="text" name="zad1" id="rue">
z
DÉSACTIVATION D'UNE ZONE (disabled et readonly 2)
avec disabled, une zone ne peut plus être modifiée par l'usager,
généralement elle apparaît en grisé pour signaler cet état
readonly ne s'applique qu'à une zone de saisie de texte,
avec un effet similaire mais sans signalement à l'écran
exemples :
<input type="checkbox" name="zz" value="1" disabled>
<textarea name="zpays" readonly>France</textarea>
z
SÉQUENCE DE PARCOURS DES ZONES (tabindex="rang">)
agit sur le parcours des zones à l'aide de la touche de tabulation,
en fixant un rang à chaque zone (ou zéro pour l'exclure),
attention ! si utilisé, attribuer alors un rang à toutes les zones
exemple : <input type="text" name="znom" tabindex="2">
1
2
Combinaison avec la touche « Alt » sous Windows, « Commande » à la pomme sur Macintosh
En XHTML, valeur obligatoire et fixée : disabled="disabled" et readonly="readonly"
EXERCICE DU FORMULAIRE DE LA RECETTE
RECONSTITUER LA PAGE AVEC LE FORMULAIRE SUIVANT
PRÉCISIONS :
1) Envoi vers http://www.inapg.fr/cgi-bin/winfo/mouchard.pl
2) Il peut y avoir plusieurs légumes choisis simultanément,
3) Les informations sur le choix du(es) légume(s) et du plat sont
codées par l'initiale en majuscule du nom choisi ;
exemple : G pour un gratin
4) L'image de l'enveloppe placée dessous le bouton « Envoyer » a
le même rôle que ce bouton : un clic sur l'image provoque l'envoi
des données saisies
5) Le formulaire contient de plus une information cachée à l'usager
mais transmise avec les données saisies, qui indique la langue
utilisée dans le formulaire : soit zlangue fixée à FR
EXERCICES SUR LES FORMULAIRES
1. Quels sont les paramètres d'un formulaire ?
2. Quels types de zone correspondent à la saisie de texte ?
3. Une zone de liste se définit à l'aide de quelle(s) balise(s) ?
4. En quoi une case à cocher se différence-t-elle d'un bouton de radio ?
5. Quel est le rôle principal des attributs « value » et « name » ?
6. A quoi sert une zone cachée ?
7. Quel(s) type(s) de zone provoque l'envoi des renseignements saisis dans le
formulaire ?
8. Comment s'utilise la balise « <legend> » ?
9. Quel est le rôle de la balise « <label> » ?
10. Les attributs « id » et « name » sont-ils équivalents ?
LES CADRES
Principes
Composantes
Cas des liens
INTRODUCTION AUX CADRES (FRAMES)
INTRODUITS DANS LA NORME HTML 4
1) cadre
en bandeau
z
2) cadre d'affichage principal
QU'EST-CE QUE C'EST ?
PARTAGE DE LA FENÊTRE EN PLUSIEURS CADRES
affichage simultané de plusieurs documents
UTILISÉ PARFOIS POUR FACILITER LA NAVIGATION DANS UN SITE
bandeau permanent servant de sommaire,
avec un cadre principal pour voir les différentes pages
z
COMMENT PROCÉDER ?
PRÉPARATION À L'AVANCE DES PAGES DESTINÉES À CHAQUE CADRE
elles seront utilisées lors de la définition d'un cadre ou d'un lien
STRUCTURE GÉNÉRALE DÉFINIE DANS UNE PAGE SPÉCIFIQUE
indication du découpage de la fenêtre de navigation en cadres
ATTENTION ! TECHNIQUE À UTILISER AVEC BEAUCOUP DE PRÉCAUTIONS :
PROBLÈMES D'AFFICHAGE ET CONSULTATION PLUTÔT DÉLICATE
PAGE DE DÉFINITION DES CADRES (frameset)
z
UNE PAGE SPÉCIALE
PAGE SPÉCIFIQUE 1 SANS DÉFINITION DE CONTENU
corps de page (<body>) remplacé par un découpage (<frameset>)
DÉFINITION DES PROPRIÉTÉS DU JEU DE CADRES
titre général et partage de la fenêtre en cadres
z
DÉFINITION DU JEU DE CADRES
INDICATION DU PARTAGE DE LA FENÊTRE (<frameset>)
partitionnement en largeur (cols="") et-ou en hauteur (rows=""),
tailles exprimées en pourcentage (relatif à la largeur de la fenêtre)
ou en valeur absolue (pixels) ou sinon selon l'espace restant (*)
exemple : <frameset cols="20%,80%">
SPÉCIFICATION DE CHAQUE CADRE (<frame>)
indication de la page à afficher dans le cadre (src=""),
nom conseillé servant pour des liens particuliers (name=""),
contrôle optionnel des barres de défilement (scrolling="") :
présentes ("yes"), absentes ("no") ou si besoin ("auto")
éventuellement, pas d'affichage de bordure (frameborder="0"),
marges optionnelles fixées en pixels, sur les côtés internes :
haut-bas (marginheight=""), droite-gauche (marginwidth="")
interdiction optionnelle de redimensionnement (noresize)
exemple :
<frame name="sommaire" src="som.htm" scrolling="no">
MESSAGE DE REMPLACEMENT (<noframes>)
texte de remplacement si cadres non gérés par le navigateur
exemple :
<noframes>
<body>
<p><a href="topisom.htm">sommaire</a></p>
</body>
</noframes>
1
Utiliser une déclaration spécifique pour le type de document ; exemple en HTML 4 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
EXEMPLE DE DÉFINITION DE CADRES (frameset)
cadre nommé
sommaire,
contenant la page
"topisom.htm"
page ("topicadr.htm") de définition des cadres,
à 20 % et 80 % de la largeur de la fenêtre
cadre nommé principal,
contenant la page "topi0.htm"
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="fr">
<head>
<title>La vie des topinambours</title>
</head>
<frameset cols="20%,80%">
<frame name="sommaire" src="topisom.htm" scrolling="no">
<frame name="principal" src="topi0.htm" scrolling="auto">
<noframes>
<body>
<p>pour continuer, merci de cliquer sur :
<a href="topisom.htm">sommaire</a></p>
</body>
</noframes>
</frameset>
</html>
ATTENTION ! IL Y A DONC TOUJOURS UNE PAGE VIDE DÉFINISSANT LES CADRES
CADRES AVEC DREAMWEAVER
LES PAGES DESTINÉES AUX CADRES DOIVENT ÊTRE CRÉÉES À L'AVANCE !
z
MISE EN PLACE DE LA DÉFINITION GÉNÉRALE
1) Commande FICHIER NOUVEAU JEU DE CADRES (ici « GAUCHE FIXE »)
2) Fixer le titre (MODIFIER PROPRIÉTÉS DE LA PAGE TITRE) et
enregistrer cette page de jeu de cadres ainsi créée
3) Pour chaque cadre (cliquer sur le rectangle en bas à droite),
fixer les propriétés de sa dimension (VALEUR et UNITÉS)
4) Placer le message en cas de navigateur incompatible :
MODIFIER JEU DE CADRES MODIFIER LE CONTENU SANS CADRES
(réactiver ensuite la commande afin de réafficher le jeu de cadres)
CADRES AVEC DREAMWEAVER (SUITE)
z
PARAMÈTRAGE D'UN CADRE
5) Faire apparaître le panneau de mise en forme avancée de cadres :
commande FENÊTRE AUTRES CADRES
6) Sélectionner un cadre dans le panneau de mise en forme avancée
puis fixer ses propriétés
nom
fichier de la page
barres de défilement
EXEMPLE DE CADRES
lien avec changement de cadre
lien avec annulation des cadres
LIENS RELATIFS À UN CADRE
COMMENT DIRIGER L'AFFICHAGE D'UNE PAGE VERS UN CADRE ?
z
PRINCIPE (<a href="" target="">)
POSSIBILITÉ D'AFFECTER LE LIEN À UN CADRE PARTICULIER
affichage dans le cadre indiqué (et non au même endroit)
IDENTIFICATION DU CADRE INDIQUÉE EN PARAMÈTRE DU LIEN
indication du nom du cadre en destination du lien
z
CAS PARTICULIERS DE NOM DE CADRE
LA FENÊTRE OU LE CADRE CONTENANT LE LIEN (valeur par défaut)
_self
LA FENÊTRE EN COURS MAIS SANS LES CADRES
_top
UNE NOUVELLE FENÊTRE DE NAVIGATION
_blank
LA FENÊTRE PARENTE DU CADRE EN COURS (CAS DE CADRES IMBRIQUÉS)
_parent
z
DESTINATION DE RÉFÉRENCE (<base target="">)
POSSIBILITÉ DE FIXER UNE DESTINATION PAR DÉFAUT D'INDICATION
destination associée à une page, définie dans l'en-tête,
s'applique à tous les liens n'ayant pas d'indication de cadre
SI L'IDENTIFICATION DU CADRE EST INCONNUE OU ERRONÉE,
LE NAVIGATEUR OUVRE ALORS UNE NOUVELLE FENÊTRE !
LIENS DE CADRES AVEC DREAMWEAVER
z
CADRE DE DESTINATION D'UN LIEN
commande MODIFIER CIBLE DU LIEN
ou propriété du lien : CIBLE
z
CADRE DE DESTINATION PAR DÉFAUT D'UNE PAGE
commande INSERTION BALISES D'EN-TÊTE BASE
HREF : nom du fichier de la page en cours
CIBLE : identification de cadre de destination par défaut
ou, pour le modifier, commande AFFICHAGE CONTENU DE L'EN-TÊTE
puis bouton
pour accéder à la propriété TARGET
ATTENTION AU BON AFFICHAGE DES LIENS EXTERNES AU SITE !
CADRE INSÉRÉ DANS UNE PAGE
CAS PARTICULIER DE CADRE INTRODUIT EN HTML 4
cadre inséré
z
INSERTION DU CADRE (<iframe>)
CADRE PLACÉ DANS LE CONTENU DE LA PAGE
affichage d'une autre page à l'intérieur de la page courante
BALISE SPÉCIFIQUE : <iframe src="adresse">libellé</iframe>
adresse obligatoire de la page à afficher dans ce cadre,
libellé conseillé, en cas d'impossibilité d'afficher le cadre,
dimensions optionnelles et alignement du texte voisin (styles),
options de cadre (défilement, bordure, marges, redimensionnement)
z
EXEMPLE
<body>
<h1>La vie des légumes</h1><hr>
<h2>Le légume du jour</h2>
<iframe src="artichaud.htm">
l'<a href="artichaud.htm">artichaud</a>
</iframe>
<hr><address>INA P-G - Mai 2005</address>
</body>
EXERCICE DU CADRE À BANDEAU INFERIEUR
CRÉER UN SITE À CADRES SUR LE MODÈLE SUIVANT :
PRÉCISIONS
1) Le cadre du bas, avec le sommaire du site, sert de barre de
navigation au sein du site,
2) les deux cadres sont redimensionnables par l'usager, et
disposent tous les deux d'une barre de défilement,
3) le lien « sans cadres » affiche le même sommaire mais en
dehors de tout cadre,
4) les sites accessibles via les liens de la page principale, par
exemple : « Croqueurs de pommes », s'affichent en pleine
fenêtre, sans les cadres définis ici.
EXERCICES SUR LES CADRES
1. Quelle est la principale balise d'une page de définition de cadres ?
2. Est-il possible de permettre le redimensionnement de cadre lors de la
consultation ?
3. Quel est le rôle de l'attribut « target » pour un lien ?
4. Comment déclencher l'ouverture d'une page dans une nouvelle fenêtre lors de
l'activation d'un lien ?
5. Quel paramétrage permet l'affichage d'une nouvelle page en faisant disparaître
des cadres existants dans la fenêtre de consultation ?
NORMALISATION
Historique d'HTML
Principales normes
Mécanismes divers (cache, redirection, icône)
EVOLUTION DE HTML
z
HISTORIQUE
INVENTION EN 1990 : TIM BERNERS-LEE AU CERN (SUISSE)
langage inspiré de SGML ; 1iers serveur et navigateur en 1991
CRÉATION D'OUTILS GRATUITS : NCSA (ETATS-UNIS), 1993-1994
le navigateur Mosaic et le serveur Web NCSA httpd,
à l'origine de Netscape, Apache, Internet explorer, etc.
ORGANISME DE NORMALISATION DU WEB EN 1994 : W3 CONSORTIUM
MIT (Etats-unis) + CERN puis Inria (France)
z
NORMES (« RFC 1 »)
PREMIÈRES VERSIONS DE 1993 À 1995 : HTML 1.0, HTML+, HTML 2.0
apparition d'incompatibilités au niveau des navigateurs
NORMALISATION PAR CONSENSUS AU SEIN DU W3 CONSORTIUM
HTML 3.2 (I 1997), HTML 4.01 (XII 1999)
REFONDATION D'HTML SUR XML : XHTML 1.0 (XII 2000), 1.1 (V 2001)
SMIL (multimedia ), MathML (notations mathématiques), SVG
(images vectorielles), XForms (formulaires), etc.
z
INDICATION DE LA NORME POUR UNE PAGE
BALISE SPÉCIALE TOUT EN DÉBUT DE PAGE : <!DOCTYPE >
notation : <!DOCTYPE HTML PUBLIC "version" "URL">
exemple :
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
RÉFÉRENCES : http://www.w3.org/ (site officiel)
http://www.rfc-editor.org/rfcsearch.html (RFC)
1
Request for comment : recommandation faisant souvent office de norme
ADRESSE DANS L'INTERNET (URL ET URI)
COMMENT IDENTIFIER SIMPLEMENT TOUTE RESSOURCE ?
z
PRINCIPES
ACCÈS À TOUT TYPE DE RESSOURCE DE L'INTERNET
consulter une page, recevoir un fichier, envoyer un message, etc.
NOTATION UNIQUE ET NORMALISÉE :
Uniform resource locator (URL), 1994, RFC 17386
Uniform resource identifier (URI), 1998, RFC 2396
z
PRINCIPAUX TYPES DE RESSOURCE
CONSULTER UN DOCUMENT SUR UN SERVEUR WEB
http://serveur/chemin
exemple : http://www.inapg.inra.fr/parigri/index.htm
ENVOYER UN MESSAGE VERS UNE ADRESSE ÉLECTRONIQUE 1
mailto:compte@domaine
exemple : mailto:[email protected]
RÉCUPÉRER UN FICHIER À PARTIR D'UN SERVEUR FTP
ftp://serveur/chemin
exemple : ftp://ftp.isi.edu/in-notes/rfc2396.txt
ETABLIR UNE CONNECTION EN TELNET AVEC UN SERVEUR
telnet:serveur
exemple : telnet unix.inra.fr
CONSULTER UN FORUM DE DISCUSSION
news:forum
exemple : news:bionet.molbio.genome-program
ACCÉDER À UN FICHIER LOCAL AU POSTE DE CONSULTATION
file:/serveur local//chemin (serveur de fichier local)
file:///chemin (le poste de consultation)
exemple : file://gaia/alire.txt
1
Attention ! usage déconseillé (collecte automatique d'adresse pour l'envoi de pourriel)
CAS PARTICULIERS D'ADRESSE
COMMENT APPORTER DES PRÉCISIONS À UNE ADRESSE ?
z
COMPTE D'USAGER
INSERTION D'UN NOM D'USAGER (http, ftp, telnet) : compte@serveur
exemple : ftp://[email protected]
INDICATION DU MOT DE PASSE DU COMPTE : compte:passe@serveur
exemple : telnet://etudiant:[email protected]
ATTENTION ! ne s'utilise qu'avec un mot de passe non secret !
z
PORT
ACCÈS PARTICULIER À UN SERVEUR (http, ftp, telnet) : serveur: port
exemple : http://www.la.bas:8080/index.htm
z
PARAMÈTRAGE
AJOUT D'INFORMATIONS (http, mailto) : adresse?données
exemples :
http://www.la.bas/cgi-bin/l.cgi?base=bd1
mailto:[email protected]?subject=info
z
(sujet du message 1)
CARACTÈRES SPÉCIAUX
CODAGE DE SYMBOLES PARTICULIERS : %code-hexadécimal
référence à un alphabet, a priori le code informatique US-ASCII
exemple : file:///c%3a
1
(%3a représente « : »)
Fonctionnement non garanti car dépendant du navigateur
PARAMÈTRAGE LINGUISTIQUE
COMMENT INDIQUER LA LANGUE ET L'ALPHABET ?
z
LANGUE
CODAGE DU NOM D'UNE LANGUE, NORMALISÉ SUR 2 LETTRES (ISO 639)
exemples : en (anglais), fr (français), ru (russe)
IDENTIFICATION COMPLÈTE À DEUX NIVEAUX : langue-variante
la variante est généralement l'identification d'un pays (ISO 3166)
exemples : en-US (anglais des Etats-unis), fr-CH (suisse)
MISE EN ŒUVRE
exemples :
EN HTML
: <meta> 1
OU L'ATTRIBUT
lang= (HTML 4)
<html lang="fr">
<meta http-equiv="Content-language" content="fr">
z
ALPHABET
JEUX NORMALISÉS DE CARACTÈRES (character set, charset)
exemples : us-ascii (alphabet informatique minimal),
iso-8859-1 (ISO Latin-1, Europe occidentale)
iso-8859-15 (ISO Latin occidental, avec l'euro « € »)
UTILISATION D'UNE BALISE SPÉCIALE EN HTML : <meta>*
exemple : <meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
RÉFÉRENCES :
http://www.iana.org/assignments/character-sets
http://www.w3.org/International/O-charset-lang.html
1
Balise placée en début de l'entête de page (<head>)
PROTOCOLE HTTP (version 1.1)
COMMENT LE NAVIGATEUR DIALOGUE AVEC LE SERVEUR ?
z
PRINCIPES
DIALOGUE POUR LA TRANSMISSION DE DOCUMENTS
entre le navigateur et le serveur Web
POSSIBILITÉS DE PARAMÈTRAGE PARTICULIER
indication du type de document, de ses langue et alphabet, etc.
z
PARAMÈTRES PARTICULIERS
IDENTIFICATION DU NAVIGATEUR : User-Agent: nom
envoi par le navigateur, autorise une personnalisation par un script
exemple : USER-AGENT: MOZILLA/4.7 [FR] (WINNT; I)
ADRESSE ÉLECTRONIQUE DE L'USAGER : From: adresse
envoi possible par le navigateur, avec les données d'un formulaire
exemple : From: [email protected]
TYPE (ET ALPHABET) DU DOCUMENT : Content-type: type MIME
envoi par le serveur, avec pour un texte, l'alphabet : type; alphabet
exemple : Content-type: text/html; charset=iso-8859-1
LANGUE(S) DU DOCUMENT : Content-language: langue
envoi par le serveur, pour un document textuel ou non
exemple : Content-language: fr, en
MISE EN ŒUVRE EN HTML 1 : <meta http-equiv= content= >
exemple : <meta
http-equiv="Content-language" content="fr">
RÉFÉRENCE : RFC 2616
1
Balise placée en début de l'entête de page (<head>) ;
Dreamweaver : INSERTION BALISE D'ENTÊTE MÉTA
HTML Kit : ACTIONS DOCUMENT META
EXEMPLE DE DIALOGUE HTTP
UTLISATION DE L'OUTIL SAM SPADE
1
Commande
TOOLS BROWSE WEB
Adresse du serveur
Version de HTTP
Type de demande
Ð
Fetching http://gaia.inapg.fr/ ...
GET / HTTP/1.1
Host: gaia.inapg.fr
Connection: close
User-Agent: Sam Spade 1.10
demande envoyée
au serveur
HTTP/1.1 200 OK
Date: Wed, 07 Jan 2004 10:38:17 GMT
Server: Apache/1.3.26 (Unix) Debian GNU/Linux PHP/4.1.2
Last-Modified: Wed, 17 Dec 2003 08:59:27 GMT
ETag: "401e-29f7-3fe01aef"
Accept-Ranges: bytes
Content-Length: 10743
Connection: close
Content-Type: text/html
entête de la réponse
<html>
<head>
du serveur
début du code HTML de la page envoyée
1
Outil gratuit de diagnostic en TCP-IP sous Windows ; voir en http://samspade.org/ssw/
REDIRECTION ET GESTION DU CACHE
EXEMPLES DE MÉCANISMES ASSOCIÉS À HTTP
z
GESTION DU CACHE
CAS D'ANNULATION DE LA MISE EN CACHE D'UNE PAGE (DYNAMIQUE)
pour forcer son rechargement systématique à chaque consultation
DIRECTIVES DIFFÉRENTES EN HTTP 1.0 (Pragma) ET 1.1 (Cache-Control)
indication double pour garantir le résultat dans tous les cas
NOTATION 1
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
z
REDIRECTION
CAS DE DÉMÉNAGEMENT D'UNE PAGE À UNE NOUVELLE ADRESSE
pour déclencher automatiquement le passage à la nouvelle adresse
MÉCANISME NON NORMALISÉ MAIS ACCEPTÉ PAR CERTAINS NAVIGATEURS
indication d'un délai (en s.) et de la nouvelle adresse (URL complète)
NOTATION
<meta http-equiv="Refresh" content="délai;nouvelle-url">
EXEMPLE
<html>
<head>
<title>Le vagabond</title>
<meta http-equiv="Refresh" content="5;http://www.sdf/">
</head>
<body>
<h1>nouvelle adresse :
<a href="http://www.sdf/">http://www.sdf/</a></h1>
</body>
</html>
1
ICÔNE ASSOCIÉE À UNE PAGE
IDENTIFICATION VISUELLE D'UNE PAGE
z
PRINCIPE
REPÈRE VISUEL D'UNE PAGE DANS CERTAINS NAVIGATEURS
icône dans la barre d'adresse et signets, marques-pages ou favoris
IMAGE SPÉCIFIQUE
format point à point, 16 x 16 pixels (ou 32 x 32), 256 couleurs maxi
format « ICO » de Windows (le plus répandu) ou GIF, PNG etc.
z
MISE EN OEUVRE
FABRICATION DE L'ICÔNE
par exemple, création d'une image de 16 x 16 pixels au format GIF
puis conversion au format ICO (avec l'outil de dessin ou XnView 1)
AFFECTATION A UN SITE
placement de l'icône dans le fichier favicon.ico 2 à la racine,
mécanisme de lecture automatique dans certains navigateurs
AFFECTATION À UNE PAGE
indication du fichier de l'icône dans l'entête de la page
<link rel="shortcut icon" href="adresse" type="image/x-icon">
Référence : http://www.aful.org/gdt/interop/icone_de_page.html
ATTENTION ! MÉCANISME NON NORMALISÉ DÉPENDANT DES NAVIGATEURS
1
Logiciel gratuit pour un usage personnel ; voir en :
http://perso.wanadoo.fr/pierre.g/xnview/enxnview.html
2 « favicon » : abréviation de l'expression anglaise « favorite icon » (icône de favori)
TYPES MIME
COMMENT S'INTERPRÈTE LE TYPE D'UN DOCUMENT ?
z
RÔLE
TYPOLOGIE DE DIFFÉRENTS TYPES DE DONNÉES : TYPE/SOUS-TYPE
défini pour la messagerie (multipurpose Internet mail extensions)
NOTATION RÉUTILISÉE DANS DE NOMBREUX CONTEXTES : type/sous-type
HTML (feuilles de style), protocole HTTP (document échangé), etc.
z
PRINCIPALES FAMILLES DE TYPES (version 1.0)
DOCUMENT TEXTUEL : text
exemples : text/plain (texte brut) text/html (HTML)
application/xhtml+xml (XHTML) text/xml (XML)
DOCUMENT GRAPHIQUE : image
exemples : image/jpeg
image/gif
DOCUMENT SONORE : audio
exemple : audio/mpeg
DOCUMENT VIDÉO : video
exemple : video/quicktime
AUTRE TYPE DE DONNÉES : application
exemples : application/postscript
application/xml
ASSEMBLAGE DE DOCUMENTS : multipart
exemple : multipart/mixed
(message avec un fichier joint)
RÉFÉRENCES : RFC 2045 À 2049
EXERCICES SUR LA NORMALISATION
1. Comment préciser la norme d'HTML utilisée pour une page ?
2. Quel est le rôle de l'attribut « lang » ?
3. Qu'est-ce donc qu'un « type MIME » ?
4. Quel organisme définit les normes du Web ?
5. Quelle balise permet la redirection vers une nouvelle page ?
RÉFÉRENCEMENT D'UN SITE
Comment faire la publicité d'un site ?
Contrôle des robots d'exploration
PRINCIPES DU RÉFÉRENCEMENT D'UN SITE
z
COMMENT FAIRE CONNAÎTRE UN SITE ?
RÉFÉRENCEMENT PAR LES MOTEURS DE RECHERCHE
et accessoirement, dans des annuaires ou sites d'annonces
DESCRIPTION DU SITE ENREGISTRÉE PAR LE MOTEUR DE RECHERCHE
adresse, date, résumé et mot-clefs (ou catégories)
DÉFINITION DES CARACTÉRISTIQUES DU SITE
soit explicite, via un formulaire de déclaration,
soit automatique, lors de l'analyse de la page par le moteur
z
INFORMATIONS DE DESCRIPTION
IMPORTANCE DU BON CHOIX D'UN TITRE
les mots du titre ont plus de poids que ceux dans la page
BALISES SPÉCIALES DANS L'EN-TÊTE DE PAGE
examinées par les moteurs de recherche
z
DÉCLARATION D'UN SITE
DIRECTEMENT SUR LE SITE D'UN MOTEUR DE RECHERCHE
gratuitement (option disponible sur la page d'accueil) ou non 1
INDIRECTEMENT, VIA UN SERVICE DE DÉCLARATION
déclaration simultanée dans plusieurs moteurs de recherche
SITES SPÉCIALISÉS
http://www.webrankinfo.com/
http://www.referencer-site-web.com/
1
Garantie de délai, avec éventuellement le « positionnement payant », garantissant une présence
certaine du site dans les résultats de recherche
EXEMPLE DE DÉCLARATION
z
CAS DE GOOGLE (http://www.google.fr/addurl/)
SERVICE SIMPLE ET GRATUIT
REMPLISSAGE D'UN FORMULAIRE
INFORMATIONS DE DESCRIPTION
z
AJOUT DANS L'EN-TÊTE DE PAGE
BALISE SPÉCIALE (<meta> 1) DANS L'EN-TÊTE DE PAGE (<head>)
après le titre (c'est-à-dire entre </title> et </head>)
RÉSUMÉ
<meta name="description" content="le résumé">
INDICATION DE MOTS-CLEFS
<meta name="keywords" content="liste des mots-clefs">
z
EXEMPLE
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>la vie des topinambours : sommaire</title>
<meta name="description"
content="Un grand roman romantique par l'auteur de
Le paradis se trouve au fond du jardin">
<meta name="keywords"
content="roman, topinambour, best-seller">
</head>
<body>
<h1>la vie des topinambours</h1>
<hr>
<h2>sommaire</h2>
<ul>
<li><a href="topi0.htm">introduction</a></li>
<li><a href="topi1.htm">chapitre 1er</a></li>
<li><a href="topi2.htm">chapitre 2nd</a></li>
</ul>
</body>
</html>
1
INDICATIONS POUR LES ROBOTS
ROBOTS D'INDEXATION DES OUTILS DE RECHERCHE
z
PRINCIPE
MECANISME D'EXCLUSION
interdictions destinées aux robots ou à l'un en particulier
NATURE DES INTERDICTIONS
indexation et-ou exploration de tout ou partie des pages
z
MISE EN ŒUVRE
LOCALEMENT À UNE PAGE : BALISE meta
DANS L'EN-TÊTE
1
<meta name="ROBOTS" contents="directive">
avec comme possibilités de directive :
NOINDEX ......................... exploration sans indexation de la page
NOFOLLOW ....................... indexation de la page sans exploration
NOINDEX,NOFOLLOW ..... ni indexation, ni exploration
GLOBALEMENT AU SITE : FICHIER SPECIFIQUE robots.txt 2
fichier placé à la racine de la hiérarchie des pages du site
une ou plusieurs directives par robot
User-agent: ................ nom du robot (ou * pour tous)
Disallow: .................... (partie de) hiérarchie interdite
RÉFÉRENCE : http://www.searchtools.com/robots/
1
2 attention ! l'orthographe de ce nom de fichier doit être respectée (lettres en minuscule)
INDICATIONS POUR LES ROBOTS (suite)
z
EXEMPLES
BALISE meta
<head>
<meta name="ROBOTS" contents="NOFOLLOW">
<title>Sites internes à l'école</title>
</head>
FICHIER robots.txt
User-agent: *
Disallow: /sites/sites-internes/
User-agent: Tarantula
Disallow: /
User-agent: Big Brother
Disallow: /images/
Disallow: /sites/
User-agent: Gromit
Disallow: /viande-mouton.html
LISTE DES IDENTIFICATIONS DE ROBOTS EN :
http://www.robotstxt.org/wc/active.html
EXERCICE DE PARAMÈTRAGE
SUR LA PAGE D'ACCUEIL D'UN SITE,
COMME PAR EXEMPLE CELUI DES PAGES PERSONNELLES,
EFFECTUER LES PARAMÉTRAGES SUIVANT
:
1.
Langue française et alphabet ISO latin-1
2.
Annulation de la mise en cache de la page
3.
Spécification d'un résumé et de mots-clés pour l'indexation
4.
Indexation seulement de la page d'accueil
5.
Ajout d'une icône d'identification
ANNEXES
Principales normes
Solutions du test de connaissances
Index
PRINCIPALES NORMES
SITES ET BIBLIOGRAPHIE SOMMAIRE
HTML
• W3C (1997), HTML 3.2 specification, http://www.w3.org/TR/REC-html32
• W3C (1999), HTML 4.01 specification, http://www.w3.org/tr/html4/
• W3C (2000), XHTML™ Basic, http://www.w3.org/TR/xhtml-basic/
• Musciano C., Kennedy B. (2001), HTML & XHTML, the definitive guide,
O'Reilly [http://www.oreilly.fr/] , 680 p.
STYLES
• W3C (1999), Cascading Style Sheets, level 1, CSS1 specifications,
recommandation du W3C, http://www.w3.org/TR/REC-CSS1
• W3C (1998), Cascading Style Sheets, level 2, CSS2 specifications,
recommandation du W3C, http://www.w3.org/TR/REC-CSS2
• Glazman D. (1999), CSS2, feuilles de style HTML, Eyrolles
[http://www.eyrolles.com/], 250 p.
AUTRES
• W3C, HTTP - Hypertext Transfer Protocol , http://www.w3.org/Protocols/
• Wong C. (2000), HTTP précis & concis, O'Reilly [http://www.oreilly.fr/] , 90 p.
• RFC, http://www.rfc-editor.org/
SOLUTIONS DU TEST DE CONNAISSANCES
1. Faux, ils sont généralement codés [voir page 6].
6. Vrai [voir page 4].
7. Vrai, avec l'attribut de choix multiple [voir page 11].
8. Faux, il s'agit d'un renseignement caché mais envoyé [voir page 14].
13. Faux, elle désigne la fenêtre actuelle sans les cadres [voir page 28].
14. Vrai, à l'aide du mécanisme de cadre inséré [voir page 30].
15. Faux, c'est le consortium W3C (dont le CERN est membre) [voir page 34].
16. Vrai [voir page 36]
17. Faux, HTTP régit le protocole d'échange avec un serveur [voir page 38].
18. Vrai, grâce aux attibuts Pragma et Cache-Control [voir page 40].
19. Faux, les deux sont tout à fait possibles [voir page 47].
21. Faux, mais disponible dans sa version ISO-8859-15 [voir page 37].
INDEX
%, 36
%0D%0A, 10
application/x-wwwform-urlencoded, 6
audio, 42
*, 23
button, 14
:, 36
cache, 40
Cache-Control, 40
cadre, 22
cadre, bordure, 23
cadre, défilement, 23
cadre, définition, 23
cadre, destination de
référence, 28
cadre, insertion, 30
cadre, jeu, 23
cadre, largeur, 23
cadre, liens, 28
cadre, marges, 23
cadre, nom, 23
cadre,
redimensionnement,
23
cadre, remplacement, 23
character set, 37
charset, 37
checkbox, 12
checked, 12
cols, 10, 23
compte d'usager, 36
Content-language:,
38
Content-Type, 37
Content-type:, 38
coordonnées, 13
?, 36
@, 36
_blank, 28
_parent, 28
_self, 28
_top, 28
<!DOCTYPE>, 34
<base target="">, 28
<button>, 13
<fieldset>, 15
<form>, 6
<frame>, 23
<frameset>, 23
<iframe>, 30
<input>, 10
<label>, 17
<legend>, 15
<meta>, 37, 38, 47
<noframes>, 23
<optgroup>, 16
<option>, 11
<select>, 11
<textarea>, 10
accesskey, 18
action, 6
adresse, caractères
spéciaux, 36
adresse, paramètrage, 36
alphabet, 37
alt, 13
ancre, 18
applette, 18
application, 42
déclaration de site, 45
description, 47
description de page, 45,
47
disabled, 18
Disallow:, 48
Dreamweaver, 5
enctype, 6
étiquette, 17
événement, 14
favicon, 41
fichier local, 35
file, 14
file:, 35
formulaire, destination, 4
formulaire, destination, 6
formulaire, message, 6
formulaire, paramètrage,
6
forum, 35
frame, 22
frameborder, 23
frameset, 24
From:, 38
FTP, 35
ftp:, 35
get, 6
GOOGLE, 46
hidden, 14
html, 42
HTML, normalisation, 34
HTML, versions, 34
HTML-Kit, 5
HTTP, 38
http:, 35
http-equiv, 37, 38
ICO, 41
icon, 41
icône, 41
id, 17, 18
image, 42
ISO 3166, 37
ISO 639, 37
ISO Latin-1, 37
iso-8859-1, 37
keywords, 47
lang, 37
langue, 37, 38
langue, code, 37
mailto:, 35
marginheight, 23
marginwidth, 23
MathML, 34
maxlength, 10
message, 35
method, 6
MIME, 42
mixed, 42
mot de passe, 36
moteur de recherche, 45
mots-clefs, 47
multiform/formdata, 6
multipart, 42
multipart/formdata, 14
multiple, 11
name, 10, 23
news:, 35
NOFOLLOW, 48
NOINDEX, 48
noresize, 23
onclick, 14
option, regroupement, 16
pays, code, 37
plain, 42
port, 36
post, 6
POST, 14
Pragma, 40
radio, 12
readonly, 18
redirection, 40
Référencement, 45
Refresh, 40
reset, 13
résumé, 47
RFC, 34
robot, 48
ROBOTS, 48
robots.txt, 48
rows, 10, 23
saut de ligne, codage, 10
scrolling, 23
selected, 11
size, 10
SMIL, 34
sous-type, 42
src, 13, 23
submit, 13
SVG, 34
tabindex, 18
tabulation, 18
target, 28
téléchargement, 35
Telnet, 35
telnet:, 35
text, 42
text/plain, 6
type, 42
URI, 35
URL, 35
us-ascii, 37
User-agent:, 48
User-Agent:, 38
value, 10, 11
video, 42
W3 consortium, 34
W3C, 34
XForms, 34
XHTML, 10, 11, 12, 13,
14, 18, 34, 42
XML, 42
zone, bouton avec une
image, 13
zone, bouton
d'annulation, 13
zone, bouton de radio, 12
zone, bouton de
validation, 13
zone, bouton pour fichier,
14
zone, bouton pour script,
14
zone, cachée, 14
zone, case à cocher, 12
zone, désactivation, 18
zone, identification, 18
zone, liste, 11
zone, nom, 4, 10
zone, parcours, 18
zone, regroupement, 15
zone, regroupement à
légende, 15
zone, texte à plusieurs
lignes, 10
zone, texte d'une ligne,
10
zone, touche de
raccourci, 18
zone, valeur initiale, 10
SOMMAIRE
SAVEZ-VOUS ?.......................................................2
Liens de cadres avec Dreamweaver .............. 29
LES FORMULAIRES .................................................3
Cadre inséré dans une page .......................... 30
Utilisation d'un formulaire..................................4
Création de formulaire (Dreamweaver, HTML-Kit) 5
Paramétrage du formulaire ...............................6
Exercice du cadre à bandeau inferieur........... 31
Exercices sur les cadres................................. 32
NORMALISATION .................................................. 33
Exemple de formulaire ordinaire.......................7
Evolution de HTML ......................................... 34
Zones de formulaire dans Dreamweaver .........8
Adresse dans l'Internet (URL et URI) ............. 35
Zones de formulaire dans HtmlKit ....................9
Cas particuliers d'adresse .............................. 36
Zones de saisie de texte .................................10
Paramètrage linguistique................................ 37
Zone de liste ...................................................11
Protocole HTTP (version 1.1) ......................... 38
Bouton de radio et case à cocher ...................12
Exemple de dialogue HTTP............................ 39
Zones de commande ......................................13
Redirection et gestion du cache ..................... 40
Zones spéciales ..............................................14
Icône associée à une page............................. 41
Regroupement de zones ................................15
Types MIME.................................................... 42
Regroupement d'options.................................16
Exercices sur la normalisation........................ 43
Etiquettes de zones ........................................17
RÉFÉRENCEMENT D'UN SITE ................................. 44
Attributs supplémentaires ...............................18
Principes du référencement d'un site ............. 45
Exercice du formulaire de la recette ..............19
Exemple de déclaration .................................. 46
Exercices sur les formulaires..........................20
Informations de description ............................ 47
LES CADRES ........................................................21
Indications pour les robots.............................. 48
Introduction aux cadres (frames) ....................22
Indications pour les robots (suite)................... 49
Page de définition des cadres (frameset).......23
Exercice de paramètrage ............................... 50
Exemple de définition de cadres (frameset) ...24
ANNEXES ............................................................ 51
Cadres avec Dreamweaver ............................25
Principales normes ......................................... 52
Cadres avec Dreamweaver (suite) .................26
Solutions du test de connaissances ............... 53
Exemple de cadres .........................................27
Index ............................................................... 54
Liens relatifs à un cadre..................................28

HTML 4 - AgroParisTech

Transcription

Documents pareils

Formulaire de rétractation boutique.ina.fr

Keziah Jones, Jahida Wehbe, Wasis Diop et Didier Bourdon dans la

Micrografx - AgroParisTech

Créer un formulaire de connexion au forum phpBB

Campagnes électorales Réactivation du devoir civique Mobilisation

L`Ina lance son offre de formation professionnelle 2016

En DVD chez Ina Editions : « Il est minuit, Paris s`éveille

Crédits courtisanes

Formulaire de rétractation VOD ina.fr