docBalise - Université de La Rochelle
download 
Plainte Transcription
Balise - Université de La Rochelle
Université de La Rochelle LUP-SIG 2004 - 2005 Programmation SIG et Internet Cartographique Présentation et traitement d’information sur le Web Présentation du WWW (HTML, HTTP) Jean-Michel Follin [email protected] WWW comporte trois composantes HTML HyperText Markup Language : Un format de description de documents et de mise en forme de données. HTTP HyperText Transfert Protocol : Un protocole de récupération de documentation HTML, WWW World Wide Web : Un réseau mondial de serveurs. 2 HTTP : HyperText Transfert Protocol HTTP: Un protocole de communication client-serveur en mode connecté Le client contacte le serveur (par défaut port 80), Le serveur répond Il envoie une commande HTTP (méthode) Par exemple : GET /chemin/fichier.html HTTP/1.0 Il envoie une ligne d'état (ex erreur code 404 ‘Not found’) Par exemple : HTTP/1.0 200 OK Puis une en-tête (informations clients) Puis une en-tête (informations serveurs) Puis une ligne blanche Puis une ligne blanche Puis eventuellement des données Puis eventuellement des données 3 HTML : HyperText Markup Language • Langage de balisage basé sur SGML (Standard Generic Markup Language), • Utilisé pour les documents WWW, • Un langage en évolution (HTML version 2.x 3.x 4.x XHTML). • Un langage interprété (et non compilé) Création d'un organisme de normalisation : Le World Wide Web Consortium (W3C) http://www.w3.org/ Chargé de définitir les normes et moyens de contrôle. 4 HTML : HyperText Markup Language Avantages : • Faciliter de réalisation de liens d'un serveur vers un autre, • Facilité d’écriture du HTML avec un éditeur standard, • Facilité de lecture avec un navigateur ou browser (Internet Explorer, Netscape, Mozilla, ...), • On peut réaliser assez facilement un serveur, • Hypertexte : navigation entre et à l’intérieur de pages Web. Inconvénients : • Le langage HTML n'est pas assez complet, • Mélange entre la présentation et le contenu. 5 Balisage Un élément de structure est marqué par des balises : • une balise de début : <NOM D’ELEMENT> • une balise de fin : </NOM D’ELEMENT> Possibilité de mettre des options, qu'on appelle des “ attributs ” : dans <TAGADA type="plouf">, TAGADA est l'élément, type l'attribut, et “ plouf ” la valeur de l'attribut. le W3C conseille d'écrire les ELEMENTS en majuscule et les attributs en minuscule 6 Squelette d’un document HTML Un document HTML possède des balises obligatoires : • Encadré par balises HTML • En tête (renseignements d’identification) HEAD • Corps (partie visible dans le browser) BODY <HTML> <HEAD> <TITLE> Titre externe (ce qui apparaît dans la barre de titre du browser) </TITLE> <META> Informations supplémentaires (metadonnées) non visibles </META> </HEAD> <BODY> Texte … </BODY> </HTML> 7 DTD et Doc Type Une DTD (Document Type Definition) : • permet de définir strictement la structure d'un document • précise au navigateur quelle version de HTML vous utilisez. DTD le plus fréquent à l'heure actuelle = HTML 4 transitionnel (éléments considérés comme obsolètes mais qui sont encore supportés) Un document HTML récent comporte un DOCTYPE, ex : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> ⇒ Définit un document au format HTML version 3.2. 8 Meta Fournit des informations supplémentaires non visible sur le document (dans HEAD) Balise : <META> ...</META> Attributs : • name : nom de l'information (nom de l’auteur, mots clés, …), • http-equiv : informations sur l’encodage et la langue de la page, • content : contenu de l’information, • charset : caractères à utiliser pour le document. Exemples : <META name="keywords" lang="fr" content="Géomatique, web, Cartographie"> <META http-equiv ="Content-Type" content="text/html; charset=iso8859-1"> <!-- encodage du doc --> <META http-equiv="Content-Language" content="fr"> <!-- langue du doc --> 9 Mise en page (1) Structuration : <P> … </P> : Définition d’un paragraphe (attribut align pour la disposition) <H1>, <H2>, ..., <H6> : Hiérarchie de titres <H1> Titre </H1> <H2> Partie 1 </H2> <H3> Section </H3> <H4> Paragraphe </H4> <P> Texte </P> 10 Mise en page (2) Les listes : ordonnées <OL>, non ordonnées <UL>, descriptives <DL> Liste numérotée à partir de 2 en chiffres romains <OL start=2 type="i"> <LI>item 1</LI> <LI>item 2</LI> <LI>item 3</LI> </OL> 11 Les Frames <FRAMESET cols="x%, y%" border=1> <FRAME src= "page1.html" name="frame1"> <FRAME src= "page2.html" name= "frame2"> <NOFRAMES> You must use a browser that can display frames to see this page. </NOFRAMES> </FRAMESET> Division verticale de la fenêtre du navigateur en deux frames (la 1ère partie occupera x% de cette fenêtre, et la 2nde y%) Définition éventuelle du contenu de la frame (lien avec la page html utilisée) Texte à afficher si le navigateur ne supporte pas les frames 12 Liens hypertexte (références) Balise : <A href="adresse">texte</A> Adresse absolue ou relative selon l’emplacement du document : absolue : <A href="http://www.yahoo.com/index.html">Yahoo</A> relative : <A href="documents/doc1.html">Mon document 1</A> Attribut target – nom de la fenêtre pour afficher le document demandé : <A href="document2.html" target="fenetre2">document 2</A> <A href="http://www.yahoo.fr">Aller sur yahoo</A> 13 Liens sur des ancres Ancre : un point de repère dans le texte sur lequel on peut mettre un lien. Balise : <A name="repere"> repère dans le texte </A> Possibilité de faire un lien dessus de la façon suivante : • depuis un fichier différent : <A href="fichier.html#repere"> Texte du lien </A>, • depuis le même fichier : <A href="#repere"> Texte du lien </A>. 14 Images Insertion d’une image (bmp, gif, jpeg, …) : Adresse de l’image (relative ou absolue) <IMG src="UNIVERSITE.gif" alt="Université de La Rochelle" > Texte de substitution (affiché si image non supportée) Autres attributs possibles : • Alignement avec align="default, top ou center " • Bordure de l’image : border= "nombre de pixels" • Taille de l’image (height et width, en nombre de pixels) 15 Images et liens hypertexte Une référence peut contenir du texte, mais également une image, entre les balises <a href="adresse"> et </a> : <html> <b>Aller sur le site de L'<i>Université de La Rochelle</i></b> <a href="http://www.univ-lr.fr"><img src="logo_ulr.jpg" width=30></a> </html> 16 Images « cliquables » Image cliquable (image-map) : des références définies sur les parties d’une image 17 Images cliquables : syntaxe Inclusion d’une image <IMG src= "img.gif" usemap="nom" … > Attribut usemap : nom de la description à utiliser pour différentes zones de l’image Description donnée entre les balises <map> et </map> <map name="nom"> … </map> Zones (références) définies à l’aide des balises <area…> <area shape=rect coords="234,280,316,335" href="document.html"> type de la zone (rectangle, cercle, polygone, ...) coordonnées sur l’image (pixels) la référence vers le document à afficher On peut utiliser l’attribut target dans <area> pour afficher le résultat dans une autre fenêtre de navigateur. 18 Images cliquables : exemple <html> <body> <img src="presentation_ulr.jpg" border=0 usemap="#exemple"> <map name="exemple"> <area shape=circle coords="228,207,41" href="TagMAP_LR.html"> <area shape=circle coords="75,271,28" href="TagMAP_ETUD.html"> <area shape=rect coords="234,280,316,335" href="TagMAP_BU.html"> </map> </body> </html> 19 Images cliquables : attribut shape Des valeurs pour les attributs de la balise <area> : shape coords (pixels) x1,y1,x2,y2 rect (haut-gauche, bas-droite) x,y,d circle (centre, diamètre) x1,y1,x2,y2,x3,y3,…,x1,y1 poly (le dernier point est le même que le premier) Exemple : <area shape=circle coords="62,80,24" href="document.html"> 20 Présentation d’information géographique Une technique « simple » : Une carte : une image (<img>) La description des objets de la carte : les documents HTML contenant les informations Le lien entre les objets de la carte et leur description : référence (<a>) images cliquables (<map>, <area>) ⇒ les présentations peuvent être visualisées par tous les navigateurs Web 21 Références Ce document : http://perso.univ-lr.fr/jmfollin/LupSIG/s1/cours/s1_coursHTML.pdf Tutorial HTML : http://www.eleves.ens.fr/tuteurs/internet/web/html/bases.html http://www.nainformaticien.free.fr/programmation/html/html0.html http://membres.lycos.fr/guidehtml/ http://www.cabuzel.com/truc/resume.html W3Schools – HTML Tutorial : http://www.w3schools.com/html/ Guide Internet : http://guide.ungi.net/ 22
