[email protected] 1 HTML Les types de balises Balises simples d'organisation :, Balise...
28
[email protected] 1 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>
-
Upload
cosme-dias -
Category
Documents
-
view
109 -
download
0
Transcript of [email protected] 1 HTML Les types de balises Balises simples d'organisation :, Balise...
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>
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• ….
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></frameset></body></html>
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>
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...
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
• <option>choix2
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 : Exemple
• client : HTTP://lisiaix0/bonjour.cgi• Serveur : Exec «bonjour.cgi»
#!/usr/local/bin/perlprint "Content-Type: text/html\n\n";print "<html><body>Bonjour tout le monde </body></html>";
ou bien le fichier «image.cgi»#!/usr/local/bin/perlprint "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 clientHTTP://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"};
Server Side Include Schéma
Poste client
Machine ServeurClient Web
Serveur Web
1 Le client émet une requête httphttp://www.insa-lyon.fr/recherche.cgi
6 Le client affiche ledocument et interagitavec l'utilisateur
4 Le fichier estréanalysé par leserveur
2 Le serveur contrôleles droits d'accès
.shtml
3 Le serveurrecherche le fichier
shtml
5 le fichier htmlest renvoyé auclient
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 : ?
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
http://netscape.developper.com/
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>
• Utilisation ?
Architecture globale
Poste client
Machine ServeurClient Web
Serveur Web
.shtml .cgiJavaScript Cookies
Client Pull
ServerPush
C/S Web
Logiciel
passerelle
Client
Connexion
spécifique
Serveur
WebCGI
HTTP/html
Connexion
virtuelle
1er tronçon
2nd tronçon
Processus d’utilisation
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 standalonePort 80User nobodyGroup WebServerAdmin webmaster@machineServerRoot /opt/apache_1.2.4Timeout 300KeepAlive onMaxKeepAliveRequests 100KeepAliveTimeout 15MinSpareServers 5MaxSpareServers 10StartServers 5MaxClients 150MaxRequestsPerChild 30HostnameLookups onBrowserMatch Mozilla/2 nokeepalive
Apache : srm.conf• Aspect du serveur pour les clientsDocumentRoot /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 ExecCGIAllowOverride Noneorder allow, denyallow from all
</directory><Location /server-status>
SetHandler server-statusorder deny, allowdeny from all
allow from .insa-lyon.fr, .univ-lyon1.fr</location>
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
