Fonctionnalités d'un serveur WEB Logiciel Niveau d'exploitation RESEAU Notion de Serveur/Client Niveau d'exploitation SGF La mise en œuvre d'un site Web dépend de 2 aspects : Le serveur Web Le client Web Les 2 aspects mettent en œuvre simplement des outils logiciels Le serveur exploite des accès dans les fonctions basses du système, les couches d'accès réseau et les couches d'accès au système de gestion de fichier. 1 WEB
Le Serveur Logiciel ( aspect système ) Différents fournisseurs IIS ( Microsoft/PC ) Apache (PC/Unix/…) autres Différentes fonctionnalités ColdFusion (PC/.. ) IIS ( ASP,… ) …… Un nombre conséquent de serveurs existent, allant du (petit) serveur aux fonctionnalités réduites, à plusieurs serveurs 'professionnels' Un serveur Web , est en partie passif, et présentaient dans les 1ères versions, quelques fonctionnalités dynamiques ( CGI, SSI notamment ) Les serveurs modernes tels que ceux présentés sur le transparent proposent des fonctionnnalités de transmission des pages HTML ainsi que des fonctionnalités " d'exécution " de procédures locales ( servlet, Asp, Php,…) 2 WEB
Le Serveur RESEAU Protocole d'échange Standard réseau httpd/ ( actuel ?? 1.0 ) Hyper Text Protocol Standard réseau IP ( Tcp/IP / adressage / port ) URL….. ( protocole://utilisateur@adresse:port ) http://www.univ-valenciennes.fr:80/ 3 WEB
Le Serveur 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 particuliers Scripts CGI, icônes, alias,… 4 WEB
Un exemple 5 WEB
Le Serveur Logiciel ( aspect fonctionnel ) CGI SSI Common Gateway Interface SSI Server Side Include Modules complémentaires ASP, JSP, PHP, …..inclusion de résultats de traitements ….. 6 WEB
Le Client Le Browser / Butineur Spécifique à la machine La Visualisation de la page Web et les aspects Multimédia Certains aspects 'Traitements' : Plugins,JavaScript Java,….. Certains problèmes de compatibilité Plus connus : Netscape, Iexplorer,autres… 7 WEB
(langage généraliste XML) Le Client HTML : Hypertext Markup Language (langage généraliste XML) Interprété Toutes les fonctions d'affichage et de mise en page HYPER-TEXTE : en gros notion de Liens URL : Uniform Resource Locator 8 WEB
Le Client 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.fr telnet://crabe.univ-valenciennes.fr 9 WEB
Principes de Fonctionnement Serveur 3) Rupture de la connexion 1) connexion avec le serveur http://…… 2) Echange Mise en cache 10 WEB
Principes de Fonctionnement Fonctionnement Standard Sécurisé Pas de connexion autre qu'avec le serveur Fonctionnements spécifiques - type accès Base de données Pas par le client Coté serveur : asp, jsp, servlet ( java ),… 11 WEB
Aspects du langage HTML
Exemple: mettre en gras le mot Gilles, <b>Gilles</b>. Généralités Le langage HTML est un langage à balises ( norme v3.2 ou v4.0 ) Une page HTML est un fichier TEXTE contenant un ensemble de balises et de textes descriptifs Exemple: mettre en gras le mot Gilles, <b>Gilles</b>. les commandes sont de la forme : <marqueur> texte </marqueur> <marqueur attribut=argument> texte </marqueur> <marqueur> ou 14 HTML
<b> équivaut à <B> Généralités PEU de différence entre Minuscules et Majuscules <b> équivaut à <B> PLUSIEURS attributs à la même balise <marqueur attribut1=argument1 attribut2=argument2> texte </marqueur> Les normes HTML = caractères ASCII 7 bits pas de caractères accentués 15 HTML
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> 16 HTML
Les caractères accentués Beaucoup de textes Problèmes 'Image' Les caractères accentués 17 HTML
Pourquoi ? Texte HTML Editeur Spécialisé Difficile d'être complet WysiWyg Difficile d'être complet Corrections quelquefois difficiles 18 HTML
Les Caractères Accentués 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 19 HTML
Balises de documents Les documents sur le Web ( et les objets ) ont un type MIME Un entête spécifiant leur nature et comment les utiliser Type Mime : text/html image/pjpg 20 HTML
Un exemple Netscape Par défaut : Gif / Jpeg 21 HTML
Balises de documents Nécessaire <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META NAME="AUTEUR" CONTENT="Gilles Maire"> <META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I) [Netscape]"> <TITLE>Un nouveau guide d'Internet - Eléments d'HTML - par cyber</TITLE> </HEAD> <BODY TEXT="#FFAE00" BGCOLOR="#330000" LINK="#FFE600"> </BODY> </HTML> Nécessaire 22 HTML
Balises de documents Génération STATIQUE : automatique Par l'éditeur Web Génération DYNAMIQUE JavaScript Mode programmé A faire soi même ( Autre intérêt de l'aspect texte HTML ) 23 HTML
Balises d'entêtes Entre les balises HEAD <TITLE> : titre de la page <META> : infos générales utilisés par moteur,….. <META NAME="Keywords" CONTENT="Cours,Web"…… <META HTTP-EQUIV="Expires" CONTENT="Monday ,01-Jan-2002"… <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 24 HTML
Balises de mise en forme Un document : Flux de TEXTE Pas concerné par les Fins de Ligne <! Commentaire > <P> fin de paragraphe <BR> break ; coupe une ligne <HR> coupure horizontale <DIV> <CENTER> 25 HTML
Un exemple 26 HTML
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> </body> </html> 27 HTML
Balises de mise en forme 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,… 28 HTML
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> <p>Par contre une ligne<br> scindée en 2 permet d'avoir une notion de paragraphe</p> </blockquote> </body> 29 HTML
Editeur : DreamWeaver 30 HTML
Editeur : Netscape Composer 31 HTML
Fonctionnalités Avancées Mises en Page IHM attractif Interactivité Html 3.2, Html 4.0 Plugins .. Macromedia Flash Architectures de Documents Images,..multimédia Norme HTML, DHTML, Editeur….. 32 HTML
Liens et ancres Liens Hyper-Textes Base de la Navigation sur le Web 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 33 HTML-liens
Liens et ancres <A> : Anchor URL Local Intra <A> : Anchor <A HREF="adresse URL">…….</A> principe URL protocole : // adresse FQDN : port / page ( ou document Mime) 34 HTML-liens HTML
Liens et ancres Protocole Réseau Interne Relatif au réseau protocole : // adresse FQDN : port / page URL Local Intra Protocole Relatif au réseau Relatif à comportements internes Réseau http , ftp, telnet , mailto, …. Interne javascript: , about: , file: , 35 HTML-liens HTML
code_exploitation://nom_machine.domaine_reseau Les LIENS URL Local Intra 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... 36 mailto://valli@univ-val.... HTML-liens
Liens et ancres Adresse FQDN Fully Qualified Domain Name No de Port protocole : // adresse FQDN : port / page URL Local Intra Adresse FQDN Fully Qualified Domain Name www.univ-valenciennes.fr ?? univ-valenciennes.fr : nom de domaine www : nom du site / nom d'une machine 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 ) 37 HTML-liens HTML
Liens et ancres L'objet MIME ( fichier ) protocole : // adresse FQDN : port / page URL Local Intra L'objet MIME ( fichier ) extension : .html / .htm , .gif , .jpg défaut : dépend du serveur index.html , index.htm : 1ère page La configuration : dépend du serveur et du client : .conf/Apache mime/Netscape 38 HTML-liens HTML
Liens et ancres Hyperlien local ( dépend <BASE> ) ici hyperlien URL Local Intra Hyperlien local ( dépend <BASE> ) ici hyperlien toto.html image.gif / image.jpg texte.doc http://www.univ-valenciennes.fr/images/image.gif #etiquette ancre ( anchor ) toto.html#etiquette <A HREF="url"> ……. </A> 39 HTML-liens HTML
Liens et ancres Hyperlien : les ancres intra document URL Local Intra Hyperlien : les ancres intra document inter document..pas le début <A NAME=aaaa> <A HREF="#aaaa">…</A> <A HREF="http://www/toto.html#aaaa" aaaa aaaa 40 HTML-liens HTML
Liens particuliers <A HREF="mailto:Bruno.Valli@uvhc.fr?subject=Sujet"> message pour </A> Appel automatique de la composition Email <A HREF="file:….."> ….. </A> 41 HTML-liens
Les images Formats supportés Intégrés dans la mise en page Gif / Jpg Intégrés dans la mise en page Pas toujours génial => artifices <IMG SRC="toto.gif" ALT="texte" WIDTH=640 HEIGHT=480> 42 HTML-images
Les images 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 cliquables LOURDEUR de chargement 43 HTML-images
Les MAP Objectifs : Image Cliquable Menu Autres,…. <MAP NAME=Nom> <AREA SHAPE=valeur COORDS= "valeur_coordonnées" HREF="url"> </MAP> <IMG SRC=Nom de l'image USEMAP="#Nom"> SHAPE=rect|circle|poly 44 HTML-images HTML
Les MAP : DreamWeaver 45 HTML-images HTML
Les MAP : DreamWeaver 46 HTML-images HTML
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> 47 HTML-images HTML
Balises de définitions Listes de définitions Listes de répertoires Listes de numéros Liste à puces Listes de menus Mises en page Structurées 48 HTML-autres HTML
Exemple : Listes 49 <ul> <li>Liste1</li> <p><b>Les Listes Numérotées</b></p> <ol> <li>Numero 1 <li>Numero 10</li> <li>Numero 11</li> <li>Numero 12</li> </ol> </li> <li>Numero 2</li> <li>Numero3</li> <li></li> 49 HTML-autres HTML
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…… Les fonctions et comportements présentés permettent une mise en œuvre de 'petites pages HTML'. Pour créer des mises en pages structurées, supportant une 'certaine intéractivité' il est nécessaire d'utiliser des objets plus complexes 51
Les Tableaux Simplement : colonnes + lignes Code HTML : aie……un peu dur dur Editeur wysiwyg : intéressant Intérêt Données Mise en page Les tableaux sont la base de mises en formes de données spécifiques , et vont être utilisés pour effectuer des mises en page complexes de certaines pages Web. Il est impératif de disposer d'un éditeur facilitant leur manipulation. 52 HTML-tableau
Tableau - détail Case tableau Regroupement de cases Image (s) Texte Portion page Html Tableau Regroupement de cases Découper la zone en Zones inégalement réparties Chaque cellule de tableau va se comporter comme une mini page Web, à la taille variable ou fixe, fonction des paramètres ( nombreux ) du tableau Il est possible de regrouper plusieurs cases pour n'en faire qu'une seule. 53 HTML HTML-tableau
Exemple Même Tableau Le tableau peut s'adapter à la dimension de la fenêtre du navigateur. 54 HTML HTML-tableau
Le code Une ligne de 5 colonnes <body bgcolor="#FFFFFF"> <table width="400" border="1" height="231"> <tr> <td> </td> </tr> Une ligne de 5 colonnes Tableau = <table> </table> Ligne = <tr> </tr> Colonne = <td> </td> 55 HTML HTML-tableau
Autre exemple 2 colonnes Tableau imbriqué 56 Pour faire un menu…et une zone d'affichage 56 HTML HTML-tableau
Et un autre… 1 tableau 6 colonnes 10 lignes Regroupement de cases Des regroupements impossibles 57 HTML-tableau HTML
HTML 4.0 Introduction de fonctionnalités étendues de mise en page Frame Layer Feuilles de Styles … Gros PB de compatibilité entre IE et Netscape Le norme HTML 4 introduit de nouveaux objets et comportements. Le pionnier (Netscape, on peut le dire ..mais peut être en perte de vitesse maintenant ) a introduit souvent des éléments de la norme suivante dans les versions actuelles de ses logiciels ( le concurrent aussi d'ailleurs ). Même si une partie de la norme est respectée par tout le monde , la mise en œuvre peut être différente, voire incohérente. Utiliser les fonctionnalités suivantes impliquent souvent l'utilisation exclusive d'un visualisateur N ou E 59
Structuration avancée de pages HTML 4.0 - Les Frame Structuration avancée de pages Un nom / frame Frame FrameSet C'est compliqué, car pour 3 zones d'affichage il faut 4 fichiers Fichier 1 = frameset , contenant le descriptif des zones et les attributs Fichier n = les 'n' zones Beaucoup de personnes préfèrent utiliser des tableaux ou autres… 3 zones = 4 fichiers .html 60 HTML-frame
Les Frame Intérêts Découpage d ’un site/page en gardant visible certaines parties ( menu , structure site ) Contrôle de défilement Certaines options permettent ( ou non ) de garder les séparations entre les zones, les ascenseurs, etc. A voir, le look dépend du navigateur et du système d'exploitation..pas toujours très beau. 61 HTML HTML-frame
Les Frame Intérêts Target : option d'un 'href' blank : nouvelle fenêtre Parent Nom frame…. Une frame possède un nom Un hyperlien peut spécifer une 'target' et donc choisir la zone d'affichage 'destinataire' L'option 'target=blank' permet l'affichage dans une nouvelle page. Des options supplémentaires permettent de supprimer les menus, barres,… 62 HTML-frame
Exemple : Frame 4 Frame 1 scrollable 63 HTML-frame HTML
Les Feuilles de Styles 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 Pour se faciliter une mise en forme d'un site….. A voir 64 HTML-css
Exemple : définition Feuille 65 HTML-css
Exemple de Style La création n'est pas toujours Wysiwyg ( ici DreamWeawer ) 66 HTML-css
Exemple comparatif 67 Feuille de style très simple….3 classes simples Ca marche partout ( distordu peut être, mais du à la recopie d'écran ) 67 HTML-css
Le code source 68 <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> <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> Observer les différentes zones descriptives et référencées. Le code généré par l'éditeur peut être erroné, suite à des manipulations souris répétées ou mal contrôlées. L'exécution dans la page Web est souvent correcte, mais inutile. Il peut être intéréssant de minimiser le source HTML en l'éditant directement à la main. Erreur non visible dans la page ( à corriger à la main ) 68 HTML-css
Introduction dans une page Web de Zones d'affichage 'autonomes' Les LAYER 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 A observer sur les sites Fonctionnalités intéressantes, mais pas très utilisées 69 HTML-layer
On peut le faire aussi avec des tableaux Zones indépendantes On peut le faire aussi avec des tableaux en direct Ouarhhhhhhh !!! C'est beau 70 HTML-layer
Ca bouge En direct Ici ca ne bouge pas beaucoup, mais avec la diapo suivante cela permet de s'affranchir d'un niveau de programmation JavaScript ou de Flash ou autre 71 HTML-layer
Exemple pratique En direct 72 HTML-layer
Les formulaires 1er niveau d'interactivité Zones de saisie + interface de dialogue Nécessite un niveau de traitement CGI JavaScript FORM + INPUT Méthode d'envoi :paramètre 'action' GET / POST ( la + moderne , unique maintenant ) Envoi : bouton ( submit ) Premier pas vers un retour d'information sur le serveur Habituellement par l'email action=mailto, Nécessité de 'programmer' la récupération des informations Langage préféré de certains développeurs : Perl, C,.. 73 HTML-form
Un exemple 74 HTML-form
Les objets Un formulaire propose les interfaces standards pour la saisie de textes D'éléments dans une liste Coche de choix prédéfinit Il est plus difficile de pouvoir envoyé un fichier vers le serveur ( ex : une image ) pb de sécurité ( piratage ) Pb de récupération des données 75 HTML-form
Mise en Oeuvre Word Excel PowerPoint Editeur Spécialisé : FrontPage, DreamWeaver,Netscape Composer,ColdFusion, autre …. Une phase intéressante pour démarrer : document Traitement de textes,…. ( Microsoft = exporter HTML ), sous Word extension HTML. On améliore après 77 DREAM
DreamWeaver - La gestion de Site Le Serveur Situé sur une machine hôte distante Structure arborescente des pages sous forme de fichiers ‘ système ’ sécurité des pages niveaux spéciaux d ’accès avec mots de passe L ’url de référence : http://machine.domaine 78
DreamWeaver - La gestion de Site Mode FTP Accès à la machine houebe hoth ftp.nordnet.fr ftpperso.free.fr /usr/www/forma login : forma passwd : forma99 79
DreamWeaver - La gestion de Site Le site Local Visualisation graphique Gestion simplifiée 80
DreamWeaver - La gestion de Site Transfert de la structure sur le site réel Fichier par fichier avec les documents relatifs ou attachés Accessibilité par http://www.... Si pb on le voit tout de suite 81
Architecture des répertoires Adressage absolu Adressage Relatif Répertoire de référence Index.html Relativité des répertoires Répertoire : www Répertoire : www/images Le répertoire http://www/SITE/toto.html devient le répertoire de référence Il est important de bien comprendre que la structure des pages, les hyper-liens,… sont étroitement liés. Certains hyper-liens tapés à la main, ou par programme, peuvent engendrés des problèmes , et donc la page est plantée En général : http://…..référence absolue nom.html : relatif au répertoire courant images/toto.gif : relatif au répertoire fils ( images ) ../images/toto.gif : répertoire au dessus du répertoire courant 82
83
84
DreamWeaver 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.... 85
DreamWeaver – exo 1 Exercice No1 Mettre en forme un site a partir de documents existants La page principale : index.html Les pages secondaires : page suivante, page maître, menu de circulation, glossaire Le glossaire : les mots clés référencent le glossaire cours2/page2_2.html -> ancre / glossaire la date de mise à jour en bas l ’adresse email ( la votre, valli@ , fabrice.blin@ ) 86
DreamWeaver – exo2 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.... 87