1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB

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, Gilles.

o les commandes sont de la forme :

o <marqueur> texte </marqueur> o <marqueur attribut=argument> texte </marqueur> o <marqueur>

ou

HTML

http://www.fr.msn.com/

15

Généralités

o PEU de différence entre Minuscules et Majuscules

 équivaut à 

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>

• Bâtir un système d'information avec les outils Web; interfaces d'accés aux bases de données, exemple d'application </TD>

•<TD ALIGN=RIGHT> <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> </TD></TR> </TABLE>

•<HR> <H1><IMG HSPACE=5 SRC=Icones/star_gold.gif ALT="*" > Interfaces avec les SGBD</H1>

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

© ° &dollar; é ê è

© ° $ é ê è ð ë ½ ¼ ¾

ð ë 1/2 1/4 3/4 &excl;

• 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


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


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 > fin de paragraphe 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">COURS HTML/WEB Ceci est le paragraphe de présentation<hr>Ici c'est un saut de paragraphe, avec saut de ligne automatiqueJe ne peux pas mettre de TABULATION pour décaler le textePar contre une ligne scindée en 2 permet d'avoir une notions de paragraphe </body></html>

HTML

28

Balises de mise en forme

o Des balises spécifiques…(quelques unes) , , ..ex: Texte

Texte <PRE> : preformatté <BLINK> : clignotant ( pas norme 3.2 ) <H1>…<H6> , …exposant,indice,…

HTML

29

Exemple plus complet

<body bgcolor="#FFFFFF">

COURS HTML/WEB

 

Ceci est le paragraphe de présentation

<hr align="center" width="50%">

Ici c'est un saut de paragraphe, avec saut de ligne automatique

Je ne peux pas mettre de TABULATION pour décaler le texte

<blockquote>

<blockquote>

Par contre une ligne 

scindée en 2 permet d'avoir une notion de paragraphe

</blockquote>

</blockquote>

 

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

http://www.univ-valenciennes.fr/

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

mailto:[email protected]?subject=Sujet%22%3E

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


HTMLHTML-images

47


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

•Les Listes Numérotées

•<ol>

• <li>Numero 1

• <ol>

• <li>Numero 10</li>



• </ol>

• </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">BonjourOn essaie de faire une mise en page FIN

</body></html>

HTML-css

<style type="text/css">



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


o Accès à la machine

houebe

hoth

ftp.nordnet.fr

ftpperso.free.fr

/usr/www/formalogin : forma

passwd : forma99

Mode FTP

80


o Le site Local

Visualisation graphique Gestion simplifiée

81


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

http://www/SITE/toto.html

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