1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de...
Transcript of 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de...
1
Fonctionnalités d'un serveur WEB
o Logiciel
o Niveau d'exploitation RESEAUoNotion de Serveur/Client
o Niveau d'exploitation SGF
WEB
2
Le Serveur
WEB
o Logiciel ( aspect système ) Différents fournisseurs
IIS ( Microsoft/PC )Apache (PC/Unix/…)autres
Différentes fonctionnalitésColdFusion (PC/.. ) IIS ( ASP,… )……
3
Le Serveur
o RESEAU Protocole d'échange
httpd/ ( actuel ?? 1.0 ) Hyper Text Protocol
Standard réseauIP ( Tcp/IP / adressage / port )URL….. (
protocole://utilisateur@adresse:port )http://www.univ-valenciennes.fr:80/
WEB
4
Le Serveur
o SGF ( Système de Gestion de Fichiers )
Site Web : Hiérarchie de documents/pages
Sécurité des accès et autorisation( mots de passe, no réseau machine,…)
Répertoires particuliersScripts CGI, icônes, alias,…
WEB
5
Un exemple
WEB
6
Le Serveur
o Logiciel ( aspect fonctionnel )
CGICommon Gateway Interface
SSIServer Side Include
Modules complémentairesASP, JSP, PHP, …..inclusion de résultats de
traitements
…..
WEB
7
Le Client
o Le Browser / Butineuro Spécifique à la machine o La Visualisation de la page Web et
les aspects Multimédiao Certains aspects 'Traitements' :
Plugins,JavaScript Java,…..
WEB
•Certains problèmes de compatibilité•Plus connus : Netscape, Iexplorer,autres…
8
Le Client
o HTML : Hypertext Markup Language(langage généraliste XML)
Interprété Toutes les fonctions d'affichage et de
mise en page
o HYPER-TEXTE : en gros notion de Liens
o URL : Uniform Resource Locator
WEB
9
Le Client
o URL : Uniform Resource Locator
Convention pour Accès Unique à un document, ou à une fonction
Accès aux services réseau : ftp, mail, http,…
ftp://ftp.univ-valenciennes.frtelnet://crabe.univ-
valenciennes.fr
WEB
10
Principes de Fonctionnement
WEB
•Serveur
•1) connexion avec le serveurhttp://……
•2) Echange Mise en cache
•3) Rupture de la connexion
11
Principes de Fonctionnement
o Fonctionnement Standard Sécurisé Pas de connexion autre qu'avec le serveur
o Fonctionnements spécifiques - type accès Base de données
Pas par le clientCoté serveur : asp, jsp, servlet ( java ),…
WEB
14
Généralités
o Le langage HTML est un langage à balises ( norme v3.2 ou v4.0 )
o Une page HTML est un fichier TEXTE contenant un ensemble de balises et de textes descriptifs
o Exemple: mettre en gras le mot Gilles, <b>Gilles</b>.
o les commandes sont de la forme :
o <marqueur> texte </marqueur> o <marqueur attribut=argument> texte </marqueur> o <marqueur>
ou
HTML
15
Généralités
o PEU de différence entre Minuscules et Majuscules
<b> équivaut à <B>
o PLUSIEURS attributs à la même balise
<marqueur attribut1=argument1 attribut2=argument2> texte </marqueur>
o Les normes HTML = caractères ASCII 7 bits
pas de caractères accentués
HTML
16
Exemple : Page HTML
•<HTML><HEAD><TITLE> Interfaces avec les SGBD </TITLE></HEAD>
•<BODY BGCOLOR="#FFFFEE" TEXT="#000000" LINK="#0000B0" VLINK="#0000B0">
•<BASEFONT SIZE=3> <TABLE WIDTH=100%>
• <TR> <TD ALIGN=LEFT><IMG SRC=Icones/WWW.gif BORDER=0 ALIGN=LEFT>
• <FONT SIZE=1> Bâtir un système d'information avec les outils Web;<BR> interfaces d'accés aux bases de données,<BR> exemple d'application </FONT> </TD>
•<TD ALIGN=RIGHT> <BR> <A HREF=plan.html><IMG SRC=Icones/back2.gif BORDER=0 HSPACE=1 ALT="[BACK]"></A> <A HREF=index.html><IMG SRC=Icones/up2.gif BORDER=0 HSPACE=1 ALT="[HOME]"></A> <A HREF=B2.html><IMG SRC=Icones/next2.gif BORDER=0 HSPACE=1 ALT="[NEXT]"></A> <BR CLEAR=ALL> </TD></TR> </TABLE>
•<HR> <H1><IMG HSPACE=5 SRC=Icones/star_gold.gif ALT="*" > Interfaces avec les SGBD</H1><P>
•<IMG SRC=int-sgbd.gif ALIGN=RIGHT>HTML
17
•Beaucoup de textes•Problèmes 'Image'•Les caractères accentués
HTML
18
Pourquoi ? Texte HTML
o Editeur Spécialisé
WysiWyg
o Difficile d'être completo Corrections quelquefois difficiles
HTML
19
Les Caractères Accentués
© ° $ é ê è
© ° $ é ê è ð ë ½ ¼ ¾
ð ë 1/2 1/4 3/4 !
• un caractère accentué, on entre une combinaison précédée du caractère & ….. terminé par un ; (point virgule)
é se code é
• Extrait de tableau caractères > 128
HTML
20
Balises de documents
o Les documents sur le Web ( et les objets )
ont un type MIMEo Un entête spécifiant leur nature et
comment les utilisero Type Mime : text/html image/pjpg
HTML
21
Un
exemple
Netscape Par défaut : Gif / JpegHTML
22
Balises de documents
o <HTML>o <HEAD>o <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-
8859-1">o <META NAME="AUTEUR" CONTENT="Gilles Maire">o <META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I)
[Netscape]">o <TITLE>Un nouveau guide d'Internet - Eléments d'HTML - par
cyber</TITLE>o </HEAD>o <BODY TEXT="#FFAE00" BGCOLOR="#330000" LINK="#FFE600">o </BODY>o </HTML>
•Nécessaire
HTML
23
Balises de documents
o Génération STATIQUE : automatiquePar l'éditeur Web
o Génération DYNAMIQUE JavaScript Mode programmé
A faire soi même
( Autre intérêt de l'aspect texte HTML )HTML
24
Balises d'entêtes
o Entre les balises HEADo <TITLE> : titre de la pageo <META> : infos générales utilisés par
moteur,…..<META NAME="Keywords" CONTENT="Cours,Web"……<META HTTP-EQUIV="Expires" CONTENT="Monday ,01-Jan-2002"…
o <BASE> : référence du site des pages<BASE HREF="http://www.univ-valencienne.fr/SITE
toto.html ->>>> http://www.univ-valenciennes.fr/SITE/toto.html
HTML
25
Balises de mise en forme
o Un document : Flux de TEXTEo Pas concerné par les Fins de Ligne
<! Commentaire > <P> fin de paragraphe <BR> break ; coupe une ligne <HR> coupure horizontale <DIV> <CENTER>
HTML
26
Un exemple
HTML
27
Exemple : Html
<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body bgcolor="#FFFFFF"><p>COURS HTML/WEB</p><p> </p><p>Ceci est le paragraphe de présentation</p><hr><p>Ici c'est un saut de paragraphe, avec saut de ligne automatique</p><p>Je ne peux pas mettre de TABULATION pour décaler le texte</p><p>Par contre une ligne<br> scindée en 2 permet d'avoir une notions de paragraphe</p><p> </p></body></html>
HTML
28
Balises de mise en forme
o Des balises spécifiques…(quelques unes) <B> , <I>, ..ex: <B><I>Texte</I></B>
Texte <PRE> : preformatté <BLINK> : clignotant ( pas norme 3.2 ) <H1>…<H6> <SUP>, <SUB>…exposant,indice,…
HTML
29
Exemple plus complet
<body bgcolor="#FFFFFF">
<p align="center"><font size="5">COURS HTML/WEB</font></p>
<p> </p>
<p align="center"><font color="#FF0000">Ceci est le paragraphe de présentation</font></p>
<hr align="center" width="50%">
<p>Ici c'est un saut de paragraphe, avec <i><b><font size="+2">saut de ligne automatique</font></b></i></p>
<p>Je ne peux pas mettre de TABULATION pour décaler le texte</p>
<blockquote>
<blockquote>
<p>Par contre une ligne<br>
scindée en 2 permet d'avoir une notion de paragraphe</p>
</blockquote>
</blockquote>
<p> </p>
</body>
HTML
30
Editeur : DreamWeaver
HTML
31
Editeur : Netscape Composer
HTML
32
Fonctionnalités Avancées
o Mises en Page IHM attractif Interactivité
Html 3.2, Html 4.0Plugins .. Macromedia Flash
o Architectures de Documentso Images,..multimédia
Norme HTML, DHTML, Editeur…..
HTML
33
Liens et ancres
o Liens Hyper-Texteso Base de la Navigation sur le Web
o Endroit sensible de la page..pointe Une autre page Un point de référence dans la même
page ou une autre Une page sur un autre site D'autres fonctionnalités liées a l'URL
HTML-liens
34
Liens et ancres
o <A> : Anchor
o <A HREF="adresse URL">…….</A>
•principe URL• protocole : // adresse FQDN : port / page ( ou document Mime)HTML
URL Local Intra
HTML-liens
35
Liens et ancres
o Protocole Relatif au réseau Relatif à comportements internes
o Réseau http , ftp, telnet , mailto, ….
o Interne javascript: , about: , file: ,
HTML
protocole : // adresse FQDN : port / pageURL Local Intra
HTML-liens
36
Les LIENS
o Hyperlien Internet : URL
• http://www.univ-valenciennes.fr
code_exploitation://nom_machine.domaine_reseau
http
ftp
file
mailto
http://www.
ftp://forma@houebe
file://c:\images...
mailto://valli@univ-val....
URL Local Intra
HTML-liens
37
Liens et ancres
o Adresse FQDNFully Qualified Domain Name
www.univ-valenciennes.fr ??univ-valenciennes.fr : nom de domainewww : nom du site / nom d'une machine
o No de Port Référence d'un programme sur une
machine Dépend de l'installation / défaut : 80 ( http )
25 ( mailto ) 21 ( ftp )HTML
protocole : // adresse FQDN : port / pageURL Local Intra
HTML-liens
38
Liens et ancres
o L'objet MIME ( fichier )
o extension : .html / .htm , .gif , .jpgo défaut : dépend du serveur
index.html , index.htm : 1ère page
o La configuration : dépend du serveur et du client : .conf/Apache mime/Netscape
protocole : // adresse FQDN : port / page
HTML
URL Local Intra
HTML-liens
39
Liens et ancres
o Hyperlien local ( dépend <BASE> ) ici hyperlien
toto.htmlimage.gif / image.jpgtexte.dochttp://www.univ-valenciennes.fr/images/
image.gif#etiquette ancre ( anchor )toto.html#etiquette
HTML
URL Local Intra
•<A HREF="url"> ……. </A>
HTML-liens
40
Liens et ancres
o Hyperlien : les ancres intra document inter document..pas le début
aaaa
aaaa
HTML
URL Local Intra
•<A NAME=aaaa>
•<A HREF="#aaaa">…</A>•<A HREF="http://www/toto.html#aaaa"
HTML-liens
41
Liens particuliers
o <A HREF="mailto:[email protected]?subject=Sujet"> message pour </A>
Appel automatique de la composition Email
o <A HREF="file:….."> ….. </A>
HTML-liens
42
Les images
o Formats supportés Gif / Jpg
o Intégrés dans la mise en pageo Pas toujours génial => artifices
<IMG SRC="toto.gif" ALT="texte" WIDTH=640 HEIGHT=480>
HTML-images
43
Les images
o Principal Intérêt Beauté/attrait de la page Dialogue / hyperlien <A HREF…><IMG>
</A> Prévisualisation ex : image réduite,
charge l'image complète
Images cliquablesLOURDEUR de chargement
HTML-images
44
Les MAP
o Objectifs : Image Cliquable Menu Autres,….
HTML
<MAP NAME=Nom>
<AREA SHAPE=valeur COORDS= "valeur_coordonnées" HREF="url">
<AREA SHAPE=valeur COORDS= "valeur_coordonnées" HREF="url">
</MAP>
<IMG SRC=Nom de l'image USEMAP="#Nom">SHAPE=rect|circle|poly
HTML-images
45
Les MAP : DreamWeaver
HTMLHTML-images
46
Les MAP : DreamWeaver
HTMLHTML-images
47
Les MAP : DreamWeaver
<body bgcolor="#FFFFFF">
<img src="file:///D:/WEB_BDD/msqljava.gif" width="281" height="156" usemap="#menu" border="0">
<map name="menu">
<area shape="rect" coords="17,90,99,135" href="#sql" target="_parent">
<area shape="rect" coords="167,78,266,138" href="#sql">
<area shape="rect" coords="169,9,263,68" href="#serveur"></map>
</body>
HTMLHTML-images
48
Balises de définitions
oListes de définitions oListes de répertoires oListes de numéros oListe à puces oListes de menus
Mises en page Structurées
HTMLHTML-autres
49
Exemple : Listes•<ul>
• <li>Liste1</li>
• <li>Liste 2</li>
• <li>Liste 3</li>
•</ul>
•<p><b>Les Listes Numérotées</b></p>
•<ol>
• <li>Numero 1
• <ol>
• <li>Numero 10</li>
• <li>Numero 11</li>
• <li>Numero 12</li>
• </ol>
• </li>
• <li>Numero 2</li>
• <li>Numero3</li>
• <li></li>
•</ol>HTMLHTML-autres
51
Petite synthèse
•Fonctionnalités de base•Petites pages simples, plutôt techniques
• Organisations plus évoluées •Tableaux => données tabulaires + facilités + outils de mise en page•Facilité introduites par les éditeurs•D-Html……
52
Les Tableaux
o Simplement : colonnes + ligneso Code HTML : aie……un peu dur duro Editeur wysiwyg : intéressant
o Intérêt Données Mise en page
HTML-tableau
53
Tableau - détail
o Case tableau Image (s) Texte Portion page Html Tableau
o Regroupement de cases Découper la zone en Zones inégalement réparties
HTMLHTML-tableau
54
Exemple•Même Tableau
HTMLHTML-tableau
55
Le code
<body bgcolor="#FFFFFF"><table width="400" border="1" height="231"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr>
HTML
Une ligne de 5 colonnes
HTML-tableau
56
Autre exemple
•2 colonnes•Tableau imbriqué
HTMLHTML-tableau
57
Et un autre…
•1 tableau•6 colonnes•10 lignes
Des regroupementsimpossibles
HTMLHTML-tableau
59
HTML 4.0
o Introduction de fonctionnalités étendues de mise en page Frame Layer Feuilles de Styles … Gros PB de compatibilité entre IE et
Netscape
60
HTML 4.0 - Les Frame
o Structuration avancée de pages
Frame FrameSet
Un nom / frame
HTML-frame
•3 zones = 4 fichiers .html
61
Les Frame
o Intérêts Découpage d ’un site/page en gardant
visiblecertaines parties ( menu , structure site )
Contrôle de défilement
HTMLHTML-frame
62
Les Frame
o Intérêts Target : option d'un 'href'
blank : nouvelle fenêtreParentNom frame….
HTML-frame
63
Exemple : Frame
HTML
•4 Frame•1 scrollable
HTML-frame
64
Les Feuilles de Styles
o Comparable aux styles que l'on trouve dans les traitements de textes
Mise en forme globale et uniforme d'un site Définit des classes d'attributs Modification des attributs standards HTMl Fichier extérieur .css Inclus dans le source par classe JavaScript
HTML-css
65
Exemple : définition Feuille
HTML-css
66
Exemple de Style
HTML-css
La création n'est pas toujours Wysiwyg( ici DreamWeawer )
67
Exemple comparatif
HTML-css
68
Le code
source
<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF"><p class="titre" style="left: 313px; top: 9px">Bonjour</p><p>On <span class="bas">essaie</span> de <span
class="haut">faire</span> une <span class="bas">mise</span> en <span class="bas">page</span></p><p> </p><p class="titre"><span class="titre"><span class="titre"><span
class="titre"><span class="titre"><span class="haut"><span class="bas"><span class="titre"><span class="titre">FIN</span></span></span></span></span></span></span></span>
</p></body></html>
HTML-css
<style type="text/css">
<!--
.haut { top: 10px; clip: rect( ); position: relative}
.bas { top: -10px; clip: rect( ); position: relative}
.titre { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18pt; text-align: center; color: #FF0033}
-->
</style>
Erreur non visible dans la page( à corriger à la main )
69
Les LAYER
o Introduction dans une page Web de Zones d'affichage 'autonomes' Difficile d'afficher des zones dynamiques
indépendantes ( frame, fenêtre externe,..)
Mise en page ( police, couleur,…) Layer + Javascript…..ca bouge Euh….incompatibilité possible avec E et
N
HTML-layer
70
Zones indépendantes
o On peut le faire aussi avec des tableaux
o en direct
HTML-layer
71
Ca bouge
o En direct
HTML-layer
72
Exemple pratique
HTML-layer
En direct
73
Les formulaires
o1er niveau d'interactivitéo Zones de saisie + interface de dialogue
oNécessite un niveau de traitemento CGIo JavaScript
oFORM + INPUTo Méthode d'envoi :paramètre 'action' GET / POST
( la + moderne , unique maintenant )o Envoi : bouton ( submit )
HTML-form
74
Un exemple
HTML-form
75
Les objets
HTML-form
77
Mise en Oeuvre
o Wordo Excelo PowerPointo Editeur Spécialisé : FrontPage,
DreamWeaver,Netscape Composer,ColdFusion, autre ….
DREAM
78
DreamWeaver - La gestion de Site
o Le Serveur Situé sur une machine hôte distante
Structure arborescente des pages sous forme de fichiers ‘ système ’sécurité des pagesniveaux spéciaux d ’accès avec mots de passe
L ’url de référence : http://machine.domaine
79
DreamWeaver - La gestion de Site
o Accès à la machine
houebe
hoth
ftp.nordnet.fr
ftpperso.free.fr
/usr/www/formalogin : forma
passwd : forma99
Mode FTP
80
DreamWeaver - La gestion de Site
o Le site Local
Visualisation graphique Gestion simplifiée
81
DreamWeaver - La gestion de Site
o Transfert de la structure sur le site réel
Fichier par fichier avec les documents relatifs ou attachés
o Accessibilité par http://www.... Si pb on le voit tout de suite
82
Architecture des répertoires
o Adressage absoluo Adressage Relatif
Répertoire de référenceIndex.html
Relativité des répertoiresRépertoire : wwwRépertoire : www/images
• Le répertoire http://www/SITE/toto.html devient le répertoire de référence
83
84
85
DreamWeaver
o Exercice No3 Réagencer le site avec frames Réimplantation du site
sur houebe....si il y a de la place• http://www.univ-valenciennes/forma/g1....
Sinon hoth• http://hoth.univ-valenciennes/forma/g1....
86
DreamWeaver – exo 1
o Exercice No1 Mettre en forme un site a partir de documents
existantsLa page principale : index.htmlLes pages secondaires : page suivante, page
maître, menu de circulation, glossaireLe glossaire : les mots clés référencent le glossairecours2/page2_2.html -> ancre / glossaire la date de mise à jour en bas l ’adresse email ( la votre, valli@ , fabrice.blin@ )
87
DreamWeaver – exo2
o Exercice No2 Implantation du site
sur houebe....si il y a de la place• http://www.univ-valenciennes/forma/g1....
Sinon hoth• http://hoth.univ-valenciennes/forma/g1....