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>
Stephf@lisiflory.insa-lyon.fr 2
Web : Architecture documentaire
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 4
Aides à la navigation/consultation
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>
Stephf@lisiflory.insa-lyon.fr 6
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
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>
</tr>
</table></body></html>
Stephf@lisiflory.insa-lyon.fr 8
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/
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 10
Outils de production
HTML Formulaires
• formulaire
– <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
Stephf@lisiflory.insa-lyon.fr 12
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
CGI : Schéma
Stephf@lisiflory.insa-lyon.fr 14
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»
#!/usr/local/bin/perl
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>
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 16
Server Side Include Schéma
Poste client
Machine Serveur
Client Web
Serveur Web 1 Le client émet une requête http
http://www.insa-lyon.fr/recherche.cgi
6 Le client affiche le document et interagit avec l'utilisateur
4 Le fichier est réanalysé par le serveur
2 Le serveur contrôle les droits d'accès
.shtml
3 Le serveur recherche le fichier
shtml 5 le fichier html
est renvoyé au client
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 18
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 : ?
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
Stephf@lisiflory.insa-lyon.fr 20
JavaScript Exemples
<!--
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>
<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>
Client Pull / Serveur Push
• Le serveur programme le client pour aller chercher l'information
print ("Content-type: multipart/x-mixed-replace;
boundary=FICHIER_SUIVANT\n");
print ("\n--FICHIER_SUIVANT\n");
print ("Cha Marche");
sleep(3);
print ("\n--FICHIER_SUIVANT\n");
print ("Cha Marche");
<html><head><meta http-equiv="Refresh" content="5;
url="http://www.insa-lyon.fr/">
<title>kkdssdkjskjds</title></head>
<body>Ca va partir ! </body></html>
Stephf@lisiflory.insa-lyon.fr 22
Architecture globale
Poste client
Machine Serveur
Client Web
Serveur Web
.shtml .cgi
JavaScript Cookies
Client Pull
Server Push
C/S Web
Logiciel passerelle Client
Connexion spécifique Serveur
Web CGI
HTTP/
html
1er tronçon
2nd tronçon
Processus d’utilisation
Stephf@lisiflory.insa-lyon.fr 24
Apache : configuration
• /apache-1.2.4/
– src
– configuration
• mime.types
• http.conf
• srm.conf
• access.conf
– logs
• http.pid
• error.log
• acces.log
– icons – support
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 StartServers5
MaxClients 150
MaxRequestsPerChild 30
Stephf@lisiflory.insa-lyon.fr 26
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
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
Stephf@lisiflory.insa-lyon.fr 28
Apache : Logs
• httpd.pid : N° process du père
• error.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