HTML 4 - AgroParisTech
Transcription
HTML 4 - AgroParisTech
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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 3 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 4 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/ Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 5 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 6 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 7 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 ! Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 8 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) Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 9 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. Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 10 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) 2 Le nom est défini dans la balise de la zone par l'attribut d'identification name et non pas id. 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" Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 11 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" Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 12 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, terminaison de la balise <input> par une espace suivie de oblique avant supérieur : <... /> 3 En HTML 4, autre possibilité : <button type="reset">texte</button> et en XHTML, terminaison de la balise <input> par une espace suivie de oblique avant supérieur : <... /> Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 13 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, terminaison de la balise <input> par une espace suivie de oblique avant supérieur : <... /> 2 En XHTML, terminaison de la balise par une espace suivie de oblique avant supérieur : <... /> 3 Le nom est défini dans la balise de la zone par l'attribut d'identification name et non pas id. Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 14 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 15 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 16 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. Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 17 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" Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 18 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 19 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 ? Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 20 LES CADRES Principes Composantes Cas des liens Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 21 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 22 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"> Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 23 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 24 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) Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 25 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 26 EXEMPLE DE CADRES lien avec changement de cadre lien avec annulation des cadres Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 27 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 ! Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 28 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 ! Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 29 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> Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 30 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. Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 31 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 ? Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 32 NORMALISATION Historique d'HTML Principales normes Mécanismes divers (cache, redirection, icône) Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 33 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 34 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) Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 35 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 36 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>) Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 37 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 38 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/ Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 39 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 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 40 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) Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 41 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 42 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 ? Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 43 RÉFÉRENCEMENT D'UN SITE Comment faire la publicité d'un site ? Contrôle des robots d'exploration Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 44 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 45 EXEMPLE DE DÉCLARATION z CAS DE GOOGLE (http://www.google.fr/addurl/) SERVICE SIMPLE ET GRATUIT REMPLISSAGE D'UN FORMULAIRE Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 46 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 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 47 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 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 2 attention ! l'orthographe de ce nom de fichier doit être respectée (lettres en minuscule) Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 48 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 49 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 50 ANNEXES Principales normes Solutions du test de connaissances Index Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 51 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/ Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 52 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]. 9. Vrai [voir page 13]. 10. Vrai [voir page 15]. 11. Vrai [voir page 23]. 12. Vrai [voir page 23]. 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]. 20. Vrai [voir page 48]. 21. Faux, mais disponible dans sa version ISO-8859-15 [voir page 37]. 22. Vrai [voir page 37]. 23. Vrai [voir page 41] 24. Vrai [voir page 16] Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 53 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 54 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 55 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 Compléments sur HTML - INA P-G - Michel Cartereau - Mai 2006 - Page 56