2000 Introduction au World-Wide Web...
Transcription
2000 Introduction au World-Wide Web...
Techniques de Programmation pour Internet Année Spéciale Informatique ENSIMAG 1999 - 2000 James L. Crowley (avec l'aide de Edmond Boyer et Jérôme Martin) Plan : Introduction au World-Wide Web.......................2 Objectifs du cours .........................................3 Plan du cours.....................................................................3 Description du cours...........................................................3 HTML & formulaires .....................................5 Langage HTML..................................................................5 Structure d'un document HTML...........................................5 Formulaires HTML........................................13 Organisation: 8 séances de cours et 4 TDs Les notes et les exemples sont disponibles surs : http://www-prima.imag.fr/Prima/Homepages/jlc/Courses/1999/AS.TPI/TPI.html Introduction au World-Wide Web World-Wide Web : système d'information hypermédia. Le concept d'hypermédia est ancient. Par exemple, Vanevar Bush. Président de MIT 1929-39 avait proposé une bureaux mécaniques qui s'appellent la "Memex" dans les années 20. Ted Nelson a démontré un système d'hypertexte dans les années 60. mais mono utilisateur. Le WWW fut né en mars 89 à l'initiative de Tim Berners-Lee pour la communication au sein de la communauté scientifique du CERN. Son utilité est due à l'internet. Définition officielle: "wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents " Qu'est-ce que le World-Wide Web? • • • • • • Accès universel aux bases d'informations Accessibles à tous et partout Liens entre les informations (hypermédia) Informations sous différents formats (multimédia) Navigation aisée et rapide Supporté par internet "Networks of Networks" 15M d'utilisateurs, 50 pays Hypertexte & Hypermédia hypertexte : document-texte contenant des liens vers d'autres parties du document ou vers d'autres documents lien hypertexte ("hyper-lien") : formé d'une ancre, mot, groupe de mots, images, ... mis en évidence et d'une adresse vers le document cible document hypermedia son, de la vidéo. document hypertexte conte- nant en plus des images, du Objectifs du cours 1. Aborder les différents problèmes techniques liés à la gestion d'applications dédiées au Web. 2. Présenter les protocoles et leurs usages. 3. Introduire le langage Perl. 4. Présenter les outils de programmation CGI. Plan du cours Séance 1 Introduction au World-Wide Web. HTML & Formulaires. Séance 2 Format MIME et Le protocole HTTP. Séance 3 TD 1 - Faire un Page Personnel Séance 4 L'interface CGI. Séance 5 TD 2 - Interrogation du système (who, /etc/passwd...) Séance 6 Le langage Perl. Séance 7 Le langage Perl. Séance 8 TD 3 - Interrogation d'un annuaire téléphonique. Séance 9 Le langage Perl. Séance 10 Les applets et les servlets. Séance 11 TD 4 - Robot de recherche.? Séance 12 Sécurité des serveurs HTTP. Description du cours HTML & Formulaires Le langage HTML permet la génération de documents portables à l'aide d'un sémantique générique permettant de représenter une information issue d'applications diverses. Le langage est interprété localement par un "browser". Ce langage représente le support de documents statiques et dynamiques. Les formulaires permettent l'interrogation de l'utilisateur à fin de générer les documents dynamiques répondant à la requête de l'utilisateur. Format MIME. Le format MIME est le format de transfert des informations de type multimédia. Il est utilisé pour le courrier électronique mais aussi pour le protocole HTTP. Le protocole HTTP Le protocole HTTP est un protocole client/serveur permettant l'échange rapide de données pour les systèmes d'information intégrant des ressources distribuées de type multimédia. L'interface CGI. L'interface CGI permet la communication entre les applications internes et le protocole HTTP. Le langage HTML et l'interface CGI sont utilisés pour la création de documents et la gestion de requêtes. Ces deux concepts sont réunis lors de la création d'interfaces permettent de mettre à la disposition de l'utilisateur certaines applications hébergées par le serveur Web. Le langage Perl. Le langage Perl est un outil performant qui offre un ensemble d'opérateurs permettant un traitement simplifié des chaînes de caractères. Notamment, les opérateurs de traitement de chaînes de caractères et les "hashes". Ce langage s'est imposé naturellement pour le développement d'interfaces CGI car la principale tâche de ces interfaces est la mise au format HTML d'un document résultant d'une requête à une base de données ou d'un programme quelconque. Les applets et les servlets. La programmation internet à l'aide du langage Java se vient progressivement de plus en plus présente. Il s'agit soit d'applets : des petites applications tournant sur les machines clientes, soit de servlets : des applications tournant sur les machines serveurs et répondant à des requêtes de manière similaire aux scripts CGI. Sécurité sur le Web. Les problèmes de sécurité relatifs aux interfaces CGI sont abordés et quelques solutions simples sont proposées. Le Protocole HTML Langage HTML HTML : Hyper Text Markup Language. Langage de création et de description des documents hypermédia. Fournit un ensemble de commandes de formatage. Syntaxe HTML <balise attributs> contenu </balise> - balise ( en anglais: "tag") est un mot clé du langage associant une propriété particulière au contenu de la balise - le contenu représente du texte, des images ou d'autres balises - </balise> est une étiquette précisant la fin de la balise Exemple de la syntaxe HTML <HTML> <TITLE>Ma photo</TITLE> <HR> <H1>Ceci est ma photo</H1> <IMG SRC="jim.gif"> <BR> La photo de <A HREF="joelle.html">ma femme</A> <!-- Commentaire --> </HTML> Structure d'un document HTML <HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML> <!-- Début de document HTML --> <!-- Définition de l'en-tête --> <!--Définition du corps --> <!-- Fin du document HTML --> Balises de l'en-tête <TITLE> définit le titre du document, utilisé par les butineurs (browsers) comme titre de la fenêtre. <META> contient un Méta informations - Une description du document qui peut servir pour l'indexation et la composition automatique de catalogues. <SCRIPT> définit un script exécuté avec le document <BASE> définit l' URL de référence du document, utilisé par les liens relatifs <LINK> indique une relation du document avec d'autres documents <STYLE> définit le style de formatage du document Exemples de balises de l'en-tête <HEAD> <BASE HREF="http://www-prima.imag.fr/Prima/jlc.html"> <LINK REL=Previous HREF="intro.html"> <LINK REL=Next HREF="mime.html"> <LINK REL=ToC HREF="toc.html"> <META NAME="AUTHOR" CONTENT="Jim CROWLEY"> <META NAME="GENERATOR" CONTENT="Adobe PageMill 2.0 Mac"> <META HTTP-EQUIV=Expires CONTENT="Mon, 04 Jan 01 10:00:00GMT"> <TITLE>HTML & Formulaires</TITLE> </HEAD> Attributs de la balise <BODY> BACKGROUND="image_name" définit une image comme fond d'écran. BGCOLOR=#rrggbb couleur RGB du fond. TEXT=#rrggbb couleur RGB du texte. LINK=#rrggbb couleur RGB des hyper liens. VLINK=#rrggbb couleur RGB des hyper liens déjà visités. exemple : <BODY BGCOLOR=#0000F0 > <BODY BGCOLOR=#FFFFFF > <-- Bleu --> <-- blanc --> Structure du corps - Hiérarchie à 6 niveaux : <H n > ... </H n > - Paragraphes : <P> ... </P> Attribut de <H n > et <P> : ALIGN=" type " avec type = left , right ou justify Mise en forme du texte (styles logiques) <PRE> ... </PRE> Affiche du texte pré-formaté, police à chasse fixe. <EM> ... </EM> Mise en valeur du texte. <STRONG> ... </STRONG> Mise en valeur du texte. <CODE> ... </CODE> Texte de type code <CITE> ... </CITE> Texte provenant d'une citation. <ADDRESS> ... </ADDRESS> Adresse. Mise en forme du texte (styles physiques) <B> ... </B> gras. <I> ... </I> italique. <CITE>...</CITE> donne aussi en italique <TT> ... </TT> Texte à chasse fixe. (un texte formaté avec une police à espacement constant) <U> ... </U> souligné. <BIG> ... </BIG> plus gros <SMALL> ... </SMALL> plus petit <SUB> ... </SUB> en indice et plus petit. <SUP> ... </SUP> en exposant et plus petit. <FONT> ... </FONT> les attributs définissent la taille, la police exemple This is <FONT SIZE="+2">Big</FONT SIZE="+2"> exemples : <BR> <TT>Ceci est de chasse fixe</TT><BR> <B>Ceci est Gras</B><BR> <U>Ceci est souligné</U><BR> <U>Ceci est souligné</U><BR> This is <BIG> Big</BIG> <BR> Ceci n'est pas une <FONT SIZE="+2">PIPE</FONT SIZE="+2"><BR> Listes Listes non ordonnées <UL>... </UL> Ajout d'un élément : <LI> . exemple : I like <UL> <LI>Skiing <LI>Cycling <LI>Flying <LI>Reading </UL> variantes : <UL TYPE=disc> , <UL TYPE=circle> ou <UL TYPE=square> . Listes ordonnées <OL> ... </OL> variantes : <OL TYPE=a> <OL TYPE=I> <OL TYPE=i> <OL TYPE=1> <UL> <LI>Skiing <LI>Cycling <LI>Flying <LI>Reading <OL TYPE=a> <LI>History of Science <LI>History of Technology <LI>History of Mathematics </OL> </UL> Lexiques ( Listes de définition ) <DL> ... </DL> Ajout d'un terme à définir : <DT> . Ajout d'une définition : <DD> . Exemple de lexique <DL> <DT>Octet <DD>Mot de huit bits <DT>kiloOctet <DD>1024 octets <DD>8192 bits </DL> Tableaux (balises de base) <TABLE>...</TABLE> commande principale pour ouvrir une zone de tableaux. <TR>...</TR> Commande pour définir une rangée <TD>...</TD> Commande pour définir les données d'une rangée <TH>...</TH> Commande pour définir une rangée d'en-tête Exemples de tableaux <TABLE BORDER> <TR> <TH>jour de la semaine</TH> <TH>montant</TH> <TH>Total cumulé</TH> </TR> <TR> <TD>Lundi</TD><TD>456 FF</TD><TD>456 FF</TD> </TR> <TR> <TD>Mardi</TD><TD>200 FF</TD><TD>656 FF</TD> </TR> </TABLE> Ancres hypertextes ancre : partie de texte ou objet marquant un hyper lien Syntaxe : <A attribut >...</A> <A HREF="xxx.html"> Nom </A> Le photo de <A HREF="joelle.html">ma femme</A> insère un pointeur nommé objet vers la référence dest <A NAME=" dest "> objet </A> enregistre dest comme point d'accès à l'intérieur du document HTML et sur l'objet exemple: <A HREF="#LIKES">Stuff I like</A> ...et plus loin.. <A NAME="LIKES">I Like</A> ou bien <A HREF="#top">Debut du page</A> et au bas de page <A NAME="top"></A> Diverses balises <BR> Force un saut de ligne <HR> Ligne horizontale <MATH>...</MATH> Formule mathématique <HR> <MATH>d=ax+by+c</MATH> <!-- ... > Commentaire invisible <META HTTP-EQUIV="refresh" CONTENT=" t ; [URL= url ]"> rafraîchissement de l'écran après t secondes. url spécifie le fichier à ouvrir. Images Syntaxe : <IMG attribut > SRC=" url image " spécifie l'URL de l'image (formats : gif, xbitmap, jpeg) exemple : <IMG SRC="jim.gif"> ALT=" texte " spécifie le texte à afficher à la place de l'image ALIGN=" type " alignement du texte par rapport au texte l'entourant ( type = bottom, top middle, left, right ) HEIGHT=" taille " WIDTH=" taille " taille de l'image ISMAP / USEMAP l'image est une image réactive . Images réactives : • Navigation par le biais de carte • Utilisation de l'attribut ISMAP (ou USEMAP ) de là balise <IMG> • Lien avec une url définissant les caractéristiques de l'image Images réactives USEMAP Définition d'une carte <MAP NAME=" nommap "> ... </MAP> Contenu de la balise <MAP> <AREA SHAPE="type" HREF="url" COORDS=" x,y,... "> Type des zones SHAPE COORDS rect ax,ay,bx,by circle ax,ay,R poly x1,y1,x2,y2,... Images réactives ISMAP Définition d'une carte par le lien sur l'image définissant la description de l'image et passé au programme imagemap Contenu du fichier méthode URL x1,y1 x2,y2 ... xn,yn de description où méthode correspond à rect , circle ou poly . Exemple d'images réactives USEMAP <IMGSRC="mapimg.gif "USEMAP="#Face"> <MAPNAME="Face"> <!RectangleBUTTON> <AREASHAPE="rect" HREF="page1.html" COORDS="140,20,180,60"> <!TriangleBUTTON> <AREASHAPE="poly" HREF="page2.html" COORDS="80,100,220,90,200,150"> <!CircleBUTTON> <AREASHAPE="circle" HREF="page3.html" COORDS="80,100,60"> </MAP> Exemple d'images réactives ISMAP <A HREF="/cgi-bin/imagemap/path/mapimg"> <IMG SRC="mapimg.gif" ISMAP"> </A> Le fichier mapimg contient : rect page1.html 140,20,180,60 poly page2.html 80,100,220,90,200,150 circle page3.html 80,100,60 Formulaires HTML HTML : documents statiques. formulaires :documents dynamiques. interrogation de l'utilisateur avant de fournir des documents par remplissage d'un questionnaire : Balise FORM Syntaxe : <FORM ACTION =" url " METHOD=" méthode "> url identifie le programme utilisé pour traiter le formulaire. méthode définit la méthode à employer pour transmettre au serveur l'information recueillie dans les champs du formulaire. GET les données sont ajoutées à l'URL. POST les données sont envoyées dans le corps du message. Éléments de formulaire sous-types de INPUT TEXT PASSWD SUBMIT RESET CHECKBOX RADIO HIDDEN Champs de saisie texte Champs de saisie texte caché Bouton de soumission du formulaire Bouton de remise à zéro du formulaire Bouton à cocher Bouton à cocher de type radio Champs invisible Autres: SELECT TEXTAREA Menu déroulant Champs de saisie texte multi-ligne Définition d'un élément INPUT Syntaxe : <INPUT attributs > TYPE Type de l'entrée ( TEXT , PASSWD , CHECKBOX , ... ) NAME nom symbolique SIZE nombre de caractères (physique) ( TEXT ou PASSWD ) MAXLENGTH nombre de caractères autorisés CHECKED Le bouton CHECKBOX ou RADIO est sélectionné par défaut VALUE Valeur de TEXT ou PASSWD par défaut Valeur du bouton CHECKBOX ou RADIO quand sélectionné Etiquette du bouton SUBMIT ou RESET Définition d'un élément SELECT Syntaxe : <SELECT attributs > <OPTION attributs > Premiére option. <OPTION attributs > Seconde option. ... </SELECT> Attributs de <SELECT> : NAME nom symbolique. SIZE si 1 alors menu déroulant sinon taille de la liste. MULTIPLE Sélection multiple si l'attribut est présent. Attribut de <OPTION> : SELECTED si l'attribut est présent, l'option est sélectionnée . Définition d'un élément TEXTAREA Syntaxe : <TEXTAREA attributs > texte par défaut </TEXTAREA> Attributs : NAME ROWS COLS nom symbolique. Nombre de lignes de la zone texte. Nombre de colonnes de la zone texte. Exemple de formulaire (source) <H2>Exemple de questionnaire</H2> <P>Veuillez remplir ce questionnaire: <FORM METHOD=post ACTION="lhttp://www.hal.com/sample"> <P>Nom: <input name="name" size="48"> <P>Sexe:<input name="sexe" value="male" type=radio CHECKED>M <input name="sexe" value="female" type=radio>F <P>Age: <input name="age" value="cat1" type=radio> 15-20 <input name="age" value="cat2" type=radio CHECKED> 20-30 <input name="age" value="cat3" type=radio> tres vieux <P>Villes dans lesquelles vous avez reside: <UL PLAIN> <LI><input name="city" type=checkbox value="Paris"> Paris <LI><input name="city" type=checkbox value="Grenoble"> Grenoble <LI>Autres <textarea name="other" cols=48 rows=4></textarea> </UL><HR> <CENTER> <INPUT TYPE=SUBMIT Value="Valider le questionnaire"> <INPUT TYPE=RESET Value="Reinitialiser"> </CENTER></FORM>