La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

HTML Les types de balises

Présentations similaires


Présentation au sujet: "HTML Les types de balises"— Transcription de la présentation:

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>

2 Web : Architecture documentaire

3 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 ….

4 Aides à la navigation/consultation

5 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>

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

7 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>

8 Images Map <img src="http://lisiaix0/icones/logoinsa.gif" ismap
usemap="http://lisiaix0/map.map"> map.map (0,0,30,30) (0,30,60,30)

9 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...

10 Outils de production

11 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

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

13 CGI : Schéma

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» 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>

15 CGI : variables d'environnement
Récupérer des paramètres du client 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"};

16 Server Side Include Schéma

17 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 : Microsoft : ASP … Utilisation : ?

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 : ?

19 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 : ?

20 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>

a 1 0 activer Stephf@lisiflory.insa-lyon.fr.", "width": "800" }

21 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 ?

22 Architecture globale

23 C/S Web

24 Apache : configuration
src configuration mime.types http.conf srm.conf access.conf logs http.pid error.log acces.log icons support

25 Apache : httpd.conf ServeurType standalone Port 80 User nobody
Group Web ServerAdmin 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

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

27 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>

28 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: ] access to /www/insa/theme.siam/frame/Bandeau.gif failed for pc 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: ] "GET /~sfrenot/ HTTP/1.0"


Télécharger ppt "HTML Les types de balises"

Présentations similaires


Annonces Google