Mise Niveau Web

1
Mise à Niveau Web

• Marco Winckler winckler_at_univ-tlse1.fr

2
Résumé

• Larchitecture Web
• Le language HTML
• Formulaires HTML

3
Le Web (1/2)

• 1989 - Tim Berners-Lee, CERN Geneva
• 1991 - premier prototype
• Oct. 1993 plus de 200 servers

T. Berners-Lee (1989) Information Management A
Proposal http//www.w3.org/History/1989/proposal
.html
4
Le Web (2/2)

• Hypertext Transfer Protocol (HTTP)
• Uniform Resource Locator (URL)
• EX http//www.server.fr/dir/page.html
• HyperText Markup Manguage (HTML)

URI Universal Resource Identificator
5
Larchitecture Web avec Proxy et Cache
CLIENT ?
6
Larchitecture Web avec Cache/Proxy
CLIENT ?
CACHE/PROXY

? (Log file) Enregistre une trace
? Pages du site
? SERVEUR
7
Les Fichiers de Log

• Information retenues dans les fichiers de log
• Addresse IP du client
• jour heure (hhmmss) de laccess
• Type de Client browser (Mozilla, IE, Opera,
  Safari, etc.)
• Resource demandé (page ou Script)
• Mot-clés utilisé dans le moteurs de recherche
• Erreurs dexecution (ex. 403 Forbidden, 404 file
  not found, 500 Internal Error, etc.)
• cache et proxy ne sont pas pris en compte dans le
  fichiers log

8
Le Language HTML
9
Les versions HTML

• HyperText Markup Manguage (HTML)
• 1éré Version - 1990, par Tim Berners-Lee
• HTML 2.0 - 1994, Standard IETF (RFC 1866) (
  forms et imagemaps)
• HTML 3.0 - 1994, par Raggett, jamais employé
  vraiment
• HTML 3.2 - 1996, normalisation des dialectes
  (tags de browser)
• HTML 4.0 Dec/1997, HTML dynamique, frames, CSS,
  JavaScript
• XHTML 1. 0 2000, reformulation de HTML 4 en XML
  1.0

10
Quest-ce que cest HTML

• Langage texte pour créer de document hypertexte
  sur le Web, donc besoin dêtre portable
• Langage structuré par de tags (commande)
• Ex.
• ltIgt italique lt/Igt
• Certain tags besoin dêtre fermés dautres pas
• Ex.
• ltBgt Bold/Grass lt/Bgt
• ltHRgt Ligne horizontale

11
Structure dun document HTML

Document HTML
ltHTMLgt lt/HTMLgt
ltHEADgt ltTITLEgt Pour la barre de
titre lt/TITLEgt ltMETA NAME"Author"
CONTENT"Winckler"gt ltBASE
HREF"/usr/home/winckler"gt lt/BASEgt lt/HEADgt
ltBODY bgcolor"C0C0C0" text"000000"gt
... Le contenu du document... lt/BODYgt
12
Caractéristiques du HTML

• Les caractère blancs sont ignorent par les
  browser
• a b ltrésultatgt a b
• a b ltrésultatgt a b
• Utilisation de caractères ISO Latin
• Assure la portabilité du document
• Ex.
• é est remplacé par eacute
• ç est remplacé par ccedil ou 184
• lt est remplacé par lt
• Ex école eacutecole

13
Les caractères ISO Latin

• Les caractères comme lt gt " sont interprété
  cars ils font parti de tags
• En plus, les accents tel que é, ê, ù, etc. sont
  dépendent du système dexploitation, donc pour
  raisons de portabilité ces accents et dautres
  caractères spéciaux sont remplacés par de codes

ISO Latin 1
14
Tags pour la mise en forme

• Taille du texte
• ltH1gt la plus grande taille lt/H1gt, ltH2gtlt/H2gt
  jusquà
• ltH6gt la plus petite taille lt/H6gt
• ltUgt souligne lt/Ugt
• ltBLINKgt clignoter lt/BLINKgt
• Texte avec ltSUPgtexposant lt/SUPgt
• Texte avec ltSUBgtindicelt/SUBgt
• ltPREgt texte tel quil a eacuteteacute
  digiteacute lt/PREgt
• ltEMgt Mettre du texte en valeur lt/EMgt
• ltP alignleftgtParagraphe lt/Pgt
  (left/center/right)
• Force nouvelle ligne ltBRgt
• Pour le commentaires
• lt!commentairesgt

15
Tags pour les listes

• ltOLgt
• ltLIgt premier item dune liste numérote
• ltLIgt deuxième item dune liste numérote
• lt/OLgt
• ltULgt
• ltLIgt item dune liste non numérote
• lt/ULgt

16
Les Liens

• Vers un document dans le même dossier
• lta href"docB.html"gt
• lien pour document B
• lt/agt
• Vers un document dans un autre site
• lta href"http//www.site.com/docB.html"gt
• lien pour document B dans un autre site
• lt/agt
• Vers un adresse mail
• ltA hrefmailtowinckler_at_irit.frgt
• e-mail de Marco Winckler
• lt /Agt
• Vers une région dans un autre document
• lta href"docB.htmltarget"gt
• lien pour la région target du document B
• lt/agt
• Avec une image comme ancre

A
B
C
D
17
Exercice 1

• Créer avec le logiciel MS NotePad un document
  HTML en utilisant les tags pour mise en forme du
  texte, images et liens.

18
Remarques

• Certains tags ne fonctionne que sur certain
  browser
• Les noms de pages et de repertoires
• sont sensitive case (ex. A ? a)
• ne pas utiliser des espaces en blanc pour le nom
  de fichiers et de repertoires
• Utiliser de chemin relatifs (ex. ./
  ./dir1/dir2/ ./../
• Attention aux extensions de fichier (ex. .html,
  htm)

19
Couleur RGB

• RedGreenBlue
• 6 digits pour chaque couleur
• Caractères hexadécimal
• Ex.
• 000000 - noir
• FF0000 rouge
• FFFFFF blanc

20
Rajouter de la couleur

• Fond décran BGCOLORcouleur
• Texte TEXTcouleur
• Lien
• Lien non visité LINKcouleur
• Lien déjà VLINK couleur
• Lien actif ALINK couleur
• Ex. ltBODY BGCOLOR"000000" TEXT"FFFFFF"
  LINK"9690CC VLINK"000000" gt

21
Tableaux (1/2)

• Les Tags
• ltTABLEgt
• ltCAPTIONgt Légende lt/CAPTIONgt
• ltTRgt (Table Row - ligne)
• ltTDgt (Table Data - colonne)
• donné dune cellule
• lt/TDgt
• lt/TRgt
• lt/TABLEgt
• Ex.
• ltTABLE BORDERgt
• ltTRgt
• ltTDgt 1 lt/TDgt
• ltTDgt 2 ltTDgt
• lt/TRgt
• ltTRgt
• ltTDgt 3 lt/TDgt
• ltTDgt 4 ltTDgt

22
Tableaux (2/2)

• ltTABLE gt
• ltTRgt
• ltTDgtColonne 1 - Ligne 1lt/TDgt
• ltTDgtColonne 2 - Ligne 1lt/TDgt
• ltTDgtColonne 3 - Ligne 1lt/TDgt
• lt/TRgt
• ltTRgt
• ltTDgtColonne 1 - Ligne 2lt/TDgt
• ltTDgtColonne 2 - Ligne 2lt/TDgt
• ltTDgtColonne 3 - Ligne 2lt/TDgt
• lt/TRgt
• ltTRgt
• ltTDgtColonne 1 - Ligne 3lt/TDgt
• ltTDgtColonne 2 - Ligne 3lt/TDgt
• ltTDgtColonne 3 - Ligne 3lt/TDgt
• lt/TRgt
• lt/TABLEgt

23
Exercice 2

• Rajouter un tableau (3 colonnes x 5 lignes)
• Rajouter aussi de la couleur dans le document
  HTML que vous venez de créer

24
Les Frames
25
Frames
26
Structures des Frames
Index (frameset)
target
Page1
Frame1
target
Frame2
target
target
Page2
Page3
Page4
27
La tag Frameset

• Le frameste organize les Frames dans un layout.
  Cest le fichier Index
• ltFRAMESET COLS"20,"gt
• ... Les frames
• lt/FRAMESETgt
• Pour les Browser que ne supportent pas de frames
• ltNOFRAMESgt lt/NOFRAMESgt

28
Attributs de Frameset

• COLS alignement vertical
• Ex. COLS " width ", " height "
• ROWS alignement vertical
• Ex. ROWS "width", "height "
• WIDTH et HEIGHT taille en perceptuelle () par
  pixels
• Joker pour les valeurs width ou heigth
• FRAMESPACING espace entre frames
• BORDER épaisseur du cadre du frame

29
Le Frameset et les frames

• Dans le fichier Index
• Rajouter la section ltFRAMESETgt
• Ex.
• ltHTMLgt
• ltFRAMESET COLS"20,"gt
• ltFRAME SRCarq.htm NAMEnamegt
• lt/FRAMESETgt
• lt/HTMLgt

FRAMESET est toujours le premier!! Il continent
les FRAMES
30
Attributs du Frame

• NAME"nom_de_la_zone"
• SRC"URL"
• SCROLLING"yes" ou "no" ou "auto"
• MARGINWIDTH nombre de pixels de la marge
  verticale
• MARGINHEIGHT nombre de pixels de la marge
  horizontale
• NORESIZE évite la modification de la taille par
  l'utilisateur
• BORDER nombre de pixels du bord
• FRAMEBORDER"yes" ou "no" par défaut
  "yes""yes" le séparateur est en 3-D"no" le
  séparateur est plat
• FRAMESPACING nombre de pixels de la séparation
• BORDERCOLOR"RRVVBB" couleur de la séparation

31
FRAMESET FRAMESET

• Un FRAMESET peut contenir dautres
• ltFRAMESET COLS"25,85"gt
• ltFRAME SRCesquerda.html" NAMEESQgt
• ltFRAMESET ROWS,gt
• ltFRAME SRCarquivo1.html" NAMEARQ1gt
• ltFRAME SRCarquivo2.html" NAMEARQ2gt
• lt/FRAMESET gt
• lt/FRAMESETgt

32
Exercice 3

• Créer une structure avec des frames tel que
  lexemple ci-dessous

33
Les formulaires
34
Formulaires

• Les formulaires permettent la saisie de donné et
  le transfert de donnés du client vers le serveur

?html
? Serveur Web
? Client (browser)
35
CGI (Common Gateway Interface)

• Script exécutables sur le serveur
• Permettent la connexion avec une base de donné,
  génération de pages dynamiques, etc.
• Ecrit en Perl, C, C, etc.
• Reçoivent les donnes du client a travers des
  formulaires HTML ou codifié dans URL
• Les donnés sont codifiés
• http//www.site.fr/mon.cgi?champ1valeur1champ2v
  aleur2

36
Structure dun formulaire HTML
ltHTMLgt ltHEADgt lt/HEADgt ltBODYgt lt/BODYgt lt/H
TMLgt
ltFORM actioncgi.cgi methodget or post
enctypetext/plaingt lt/FORMgt
ltINPUT namenom_du_champgt ltTEXTAREA
namenom_du_champgt lt/TEXTAREAgt ltSELECT
namenom_du_champgt ltOPTIONgt ltOPTIONgt lt/SELECTgt
37
La tag FORM

• ACTIONurl du script CGI
• METHODget ou post
• GET les donnés sont affiché dans lURL
• POST les donnés sont cachés
• ENCTYPE "multipart/form-data"
  "application/x-www-form-urlencoded"
  "text/plain
• "application/x-www-form-urlencoded" codifié par
  défaut
• "multipart/form-data" pour file upload
• "text/plain" non codifié
• Moyen simple denvoyer les données
• ltFORM ACTION"mailtomon_at_mail.fr" METHODPOST
  ENCTYPE"text/plain"gt

38
La tag INPUT

• ltINPUT TYPE NAME VALUE CHECKEDgt lt/INPUTgt
• TYPE
• "text" (saisir du texte )
• "password" (saisir du mot de passe les
  caractères sont remplacés par)
• "checkbox" (pour les cases à cocher)
• "radio" (pour les boutons multiples (on/off)
• "submit" (bouton pour envoyer le formulaire une
  fois rempli)
• "reset" (bouton effacer le contenu du formulaire)
  
• "file (pour permettre l'envoi d'un fichier)
• NAME "un nom" qui identifie le champ
• SIZE "nombre de caractères" visible du champ
• MAXLENGTH "nombre max. de caractères" accepté
  par le champ
• Ex.
• ltinput type"text" name"var" size"20"
  maxlength"255" value"null"gt

39
La tag TEXTEAREA

• ltTEXTAREA NAME ROWS COLSgt lt/TEXTAREAgt
• NAME "un nom" qui identifie le champ texte
• ROWS nombre de lignes visibles
• COLS nombre de colonnes visibles
• Ex.
• ltTEXTAREA NAME"var1" ROWS4 COLS40gtlt/TEXTAREAgt
• ltTEXTAREA NAME"var2" ROWS4 COLS40gt
• contenu initiale
• lt/TEXTAREAgt

40
La tag SELECT

• ltSELECT NAMEgt lt/SELECTgt
• NAME "un nom" qui identifie le menu
• ltOPTION SELECTEDgt ltOPTIONgt représente chaque
  choix du menu
• SELECTED signale le choix par défaut
• Ex.
• ltSELECT NAME"a-menu"gt
• ltOPTION SELECTEDgt First option.
• ltOPTIONgt Second option.
• lt/SELECTgt

41
Exercice 4

• Construire un formulaire HTML
• Utiliser toutes les tags et ses variantes (pour
  Input, text, password, radio, etc.)

42
Les images
43
Une tag pour insérer des images

• ltimg src"peter.jpg" width"200" height"150"gt
• ltimg srcimage.GIF" width"200" height"150"
  ALTImage description"gt
• Alignment
• ltIMG SRCinglaterrasmall.gif ALIGNTOPgt
• ltIMG SRC" inglaterrasmall.gif ALIGNCENTERgt
• ltIMG SRC" inglaterrasmall.gif ALIGNBOTTONgt
• Types dimages acceptés .JPEG, .GIF, .PNG

44
Images et plus les types de fichier

• Types dimages acceptés .JPEG, .GIF, .PNG
• Graphic Interchange Format (GIF)
• Compuserve (années 80s)
• Palette (modifiable) de max. 256 couleurs
• Très efficace pour le graphiques
• Compression
• Interlacing
• Animated
• Portable Network Graphics (NPG)
• clone publique du GIF
• JPEG
• true colors (24 bits)
• Plus adaptés pour les photos
• Compression avec perte réglable

45
Niveau de compression JPEG
Taux de compression 0 10 KB
Taux de compression 75 7 KB
Taux de compression 99 3 KB
46
GIF x JPEG
47
Options GIF et NPG

• Interlaced
• Pour de gros fichier
• Visualisation pendant la charge
• Transparent (Alpha Channel)
• Une couleur de limage est remplacé par la
  couleur de fond

48
Images Réactives

• zones sensibles de l'image
• Deux éléments indispensables
• un fichier image .gif ou .jpg
• définir les zones réactives
• Ex.
• ltMAP NAME"DEMO"gt
• ltAREA SHAPE"RECT" HREF"nez.html"
  COORDS"54,81,83,107"gt
• ltAREA SHAPE"CIRCLE" HREF"menton.html"
  COORDS"70,126,15"gt ltAREA SHAPE"DEFAULT"
  HREF"non.html"gt
• lt/MAPgt
• ltIMG ALIGNMIDDLE SRC"manas.gif"
  USEMAP"DEMO"gt
• Ex. http//www.irit.fr/recherches/LIIHS/winckler/b
  razil.html

49
Exercice 5

• Construire une image réactive a laide de MapEdit