• Aucun résultat trouvé

HTML Les types de balises

N/A
N/A
Protected

Academic year: 2022

Partager "HTML Les types de balises"

Copied!
28
0
0

Texte intégral

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

(2)

Stephf@lisiflory.insa-lyon.fr 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)

Stephf@lisiflory.insa-lyon.fr 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>

(6)

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

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

</tr>

</table></body></html>

(8)

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/

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

Stephf@lisiflory.insa-lyon.fr 10

Outils de production

(11)

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

(12)

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

(13)

CGI : Schéma

(14)

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>

(15)

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"};

(16)

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

(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 : http://www.php3.net – Microsoft : ASP …

– Utilisation : ?

(18)

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

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

http://Stars.com/Authoring/JavaScript

(20)

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>

(21)

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>

(22)

Stephf@lisiflory.insa-lyon.fr 22

Architecture globale

Poste client

Machine Serveur

Client Web

Serveur Web

.shtml .cgi

JavaScript Cookies

Client Pull

Server Push

(23)

C/S Web

Logiciel passerelle Client

Connexion spécifique Serveur

Web CGI

HTTP/

html

1er tronçon

2nd tronçon

Processus d’utilisation

(24)

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

(25)

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

(26)

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

(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

(28)

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

Références

Documents relatifs

L’assurance dans la Caisse de Pensions prend fin au moment de la dissolution du rapport de travail, mais au plus tard si l’âge de la retraite réglemen- taire est atteint ou si

 Comparaison des surcoûts générés par l’atteinte des BATAELs aux bénéfices pour l’environnement.. 515-66 peuvent, sur demande de l’exploitant, excéder, dans des

Assurer l’encouragement à la lecture et la formation des lecteurs dans la recherche de l’information 4.. Assurer les relations avec les

R´ ep´ eter 74 fois le remplacement de 2 noires par une jaune, puis le rempla- cement d’une noire et une jaune par une rouge.. L’urne contient alors une noire et

Parfois, on a besoin d'utiliser des balises génériques (aussi appelées balises universelles) car aucune des autres balises ne convient. On utilise le plus souvent des

Une façon simple d’y arriver est de créer un fond d’écran avec les bornes pour une résolution de 800x600 pixels et de 1024x768 pixels. IFT1147 -

R48/24/25 Toxique: risque d'effets graves pour la santé en cas d'exposition prolongée par contact avec la peau et par ingestion. R50/53 Très toxique pour les organismes

R50/53: Très toxique pour les organismes aquatiques, peut entraîner des effets néfastes à long terme pour l'environnement aquatique... R43 Peut entraîner une sensibilisation