HTML Les types de balises Balises simples d'organisation : <br>, <hr> Balise de formattage de texte : <b> </b>, <i> </i>, <center></center> Balises logiques : <adresse>... <adresse>, <bloquote>...</bloquote>, <H1>...</H1> Balises structurelles : <table> <tr> <td>,<ol> <li> Balises paramétrées : <img src="logo.gif">,<a href= "index.html">,<p align="center"> Appels de scripts clients :<script><applet><object> Formulaires et champs de saisie de l'information : <form> <input> Multidocuments ou document multicadre : <frameset> <frame> Stephf@lisiflory.insa-lyon.fr
Web : Architecture documentaire Stephf@lisiflory.insa-lyon.fr
HTML Problèmes HT Qualité graphique des Serveurs (taille des pages) Standards inexistants Pas de dynamique de fonctionnement Principe de parse HTML lourd Internet -> Professionnel (HTML fait “à la louche”) Grosse concurrence Sites Fantômes Liens monodirectionnels …. Stephf@lisiflory.insa-lyon.fr
Aides à la navigation/consultation Stephf@lisiflory.insa-lyon.fr
Aides à la navigation/consultation <html><body> <frameset rows="20%, 80%"> <frame src="bandeau.html" name="bandeau" SCROLLING=NO marginheight=1> <frameset cols="20%,80%" FRAMEBORDER=yes BORDER=1> <frame src="navigation.html" name="navigation" > <frame src="Intro.html" name="description" marginheight=14> </frameset> </body></html> Stephf@lisiflory.insa-lyon.fr
Aides à la navigation/consultation <frameset> <frame> ... Fenêtres TARGET dans un tag <A> </A> <A href=« Page2.html » Target=« description »>lire page2</A> _blank : nouvelle fenêtre sans nom _self : valeur par défaut _parent : remplace le document de définition du frameset _top : remplace toutes les frames de la fenêtre ouverte Entête HTTP Window_target: _top Stephf@lisiflory.insa-lyon.fr
Aides à la navigation/consultation <html><body> <table border=1> <tr> <td> et </td><td> un </td><td> tableau </td> </tr> <tr> <td colspan=3>+++++++++++++++++++++++</td> </table></body></html> Stephf@lisiflory.insa-lyon.fr
Images Map <img src="http://lisiaix0/icones/logoinsa.gif" ismap usemap="http://lisiaix0/map.map"> map.map (0,0,30,30) http://www.insa-lyon.fr/ (0,30,60,30) http://www.univ-lyon1.fr/ Stephf@lisiflory.insa-lyon.fr
Outils de publication Editeurs HTML : HotMetal, Netscape Editor, Microsoft Frontpage… Principe de l’édition : Arborescence sur un serveur Web Envoi par ftp des nouveaux fichiers Problèmes Maintenance Evolution Incompatibilité des pages... Stephf@lisiflory.insa-lyon.fr
Outils de production Stephf@lisiflory.insa-lyon.fr
HTML Formulaires formulaire Bouton de saisie <Form Method={GET|POST} action=url> Bouton de saisie <input type={passwd | file | checkbox | radio | submit | reset | image | hidden } name= value= > <textarea wrap=virtual> <Select name="Nature de l'intervention" multiple> <option selected> choix1 <option>choix2 Stephf@lisiflory.insa-lyon.fr
HTML : Formulaires de saisie accueil.html <html> <form ACTION="/cgi-bin/Identite.pl" METHOD="GET"> <PRE> Nom:<INPUT TYPE="Text" NAME="Nom"> Prénom :<INPUT TYPE="Text" NAME="Prénom"> </PRE> <Input type="submit" value="Valider"> <Input type="reset" value="RAZ"> </form></body></html> => GET /cgi-bin/Identite.pl?Nom=George&Pr%E9nom=Casombre Stephf@lisiflory.insa-lyon.fr
CGI : Schéma Stephf@lisiflory.insa-lyon.fr
CGI : Exemple client : HTTP://lisiaix0/bonjour.cgi Serveur : Exec «bonjour.cgi» #!/usr/local/bin/perl print "Content-Type: text/html\n\n"; print "<html><body>Bonjour tout le monde </body></html>"; ou bien le fichier «image.cgi» print "Content-type:image/gif\n\n"; open (toto, "Image1.gif"); while (<toto>) { print $_;} close (toto); <html><body> <img src= "http://www.insa-lyon.fr/icones/image.cgi"> Bienvenue sur l’INSA de lyon </body></html> Stephf@lisiflory.insa-lyon.fr
CGI : variables d'environnement Récupérer des paramètres du client HTTP://www.insa-lyon.fr/environnement.cgi?annee=1998&mois=01 Variables d'environnements : #!/usr/local/bin/perl print "Content-type: text/html\n\n"; print "<html><body><h1>Environnements</h1> print "Query_string : "+ $ENV{"QUERY_STRING"}; print "IP machine distante : "+ $ENV{"REMOTE_ADDR"}; print "Nom de la machine : "+ $ENV{"REMOTE_HOST"}; Stephf@lisiflory.insa-lyon.fr
Server Side Include Schéma Stephf@lisiflory.insa-lyon.fr
SSI Server Side Include (.shtml) Tag interprété par le serveur : <!- #commande paramètre(s)="argument"-> Commandes : <!- #echo var="SERVER_NAME" -> <!- #include file="truc.html" ->(virtual) <!- #exec cmd="/bin/ps" -> (cgi) Extensions : php3 : http://www.php3.net Microsoft : ASP … Utilisation : ? Stephf@lisiflory.insa-lyon.fr
HTML Cookies Informations définies par le serveur et stockées sur le client Exemple Set-Cookie: IdSession=123123; path=/annuaire Set-Cookie: IdUser=steph; path=/ => GET /annuaire./toutlemonde.html Cookie: IdSession=123123; IdUser=steph Utilisation : ? Stephf@lisiflory.insa-lyon.fr
Javascript Interprété sur le client : JavaScript (Netscape) / Jscript (Microsoft) Langage événementiel ? Arbre de composants documentaires Fonction d'accès et de manipulation des composants de l'arbre Utilisation : ? http://Stars.com/Authoring/JavaScript http://netscape.developper.com/ Stephf@lisiflory.insa-lyon.fr
JavaScript Exemples <!-- <HTML> <HEAD> function check(p) { j=0; while (j<p.length) { p.elements[j].checked = true; if (p.elements[j].onclick) p.elements[j].onclick(); j++; } } function show(o) { var s = ""; for (i in o) s+=i+"="+o[i]+" "+"\n"; w=window.open( 'about:blank' ); w.document.open( "text/plain" ); w.document.writeln( s ); w.document.close(); } --> <HTML> <HEAD> < SCRIPT SRC="jsinfo.js"></SCRIPT> </HEAD> <BODY> <FORM NAME=un> <INPUT TYPE=CHECKBOX NAME=chk1 onclick='alert("hello")'> <INPUT TYPE=CHECKBOX NAME=chk2> </FORM> <A HREF=# onClick='javascript:show(un)'>a</A> <A HREF=# onClick='javascript:show(un.elements[1])'>1</A> <A HREF=# onClick='javascript:show(un.elements[0])'>0</A> <A HREF=# onClick='javascript:check(un)'>activer</A> <IMG NAME=MonImage BORDER=0 SRC="image1.gif" onMouseOver='MonImage.src="image2.gif" onMouseOut='MonImage.src="image1.gif"> </BODY></HTML> Stephf@lisiflory.insa-lyon.fr
Client Pull / Serveur Push Le serveur programme le client pour aller chercher l'information <html><head><meta http-equiv="Refresh" content="5; url="http://www.insa-lyon.fr/"> <title>kkdssdkjskjds</title></head> <body>Ca va partir ! </body></html> print ("Content-type: multipart/x-mixed-replace; boundary=FICHIER_SUIVANT\n"); print ("\n--FICHIER_SUIVANT\n"); print ("Cha Marche"); sleep(3); Utilisation ? Stephf@lisiflory.insa-lyon.fr
Architecture globale Stephf@lisiflory.insa-lyon.fr
C/S Web Stephf@lisiflory.insa-lyon.fr
Apache : configuration src configuration mime.types http.conf srm.conf access.conf logs http.pid error.log acces.log icons support Stephf@lisiflory.insa-lyon.fr
Apache : httpd.conf ServeurType standalone Port 80 User nobody Group Web ServerAdmin webmaster@machine ServerRoot /opt/apache_1.2.4 Timeout 300 KeepAlive on MaxKeepAliveRequests 100 KeepAliveTimeout 15 MinSpareServers 5 MaxSpareServers 10 StartServers 5 MaxClients 150 MaxRequestsPerChild 30 HostnameLookups on BrowserMatch Mozilla/2 nokeepalive Stephf@lisiflory.insa-lyon.fr
Apache : srm.conf Aspect du serveur pour les clients DocumentRoot /www/insa UserDir public_html DirectoryIndex index.html FancyIndexing on AddIcons /icons/back.gif .. AccessFileName .htaccess DefaultType text/plain Alias /icons/ /opt/apache_1.2.4/icons/ ScriptAlias /cgi-bin/ /opt/apache_1.2.4/cgi-bin/ AddHandler cgi-script .cgi Stephf@lisiflory.insa-lyon.fr
Apache access.conf <directory /www/insa/theme.siam> #none, all, options Indexes FollowSymLinks ExecCGI AllowOverride None order allow, deny allow from all </directory> <Location /server-status> SetHandler server-status order deny, allow deny from all allow from .insa-lyon.fr, .univ-lyon1.fr </location> Stephf@lisiflory.insa-lyon.fr
Apache : Logs httpd.pid : N° process du père error.log : access.log date, ressource accédée, client, raison [Mon Feb 9 12:16:05 1998] access to /www/insa/theme.siam/frame/Bandeau.gif failed for pc401-50.insa-lyon.fr, reason: File does not exist access.log client, date, méthode utilisée, réponse, taille réponse wormhole.ctp.com [13/Feb/1998:20:00:56 +0100] "GET /~sfrenot/ HTTP/1.0" 200 4726 Stephf@lisiflory.insa-lyon.fr