Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
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
2
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
3
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….. ( ) 3 WEB
4
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
5
Un exemple 5 WEB
6
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
7
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
8
(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
9
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
10
Principes de Fonctionnement
Serveur 3) Rupture de la connexion 1) connexion avec le serveur 2) Echange Mise en cache 10 WEB
11
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
13
Aspects du langage HTML
14
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
15
<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
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/ 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
17
Les caractères accentués
Beaucoup de textes Problèmes 'Image' Les caractères accentués 17 HTML
18
Pourquoi ? Texte HTML Editeur Spécialisé Difficile d'être complet
WysiWyg Difficile d'être complet Corrections quelquefois difficiles 18 HTML
19
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
20
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
21
Un exemple Netscape Par défaut : Gif / Jpeg 21 HTML
22
Balises de documents Nécessaire <HTML> <HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso "> <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
23
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
24
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=" toto.html ->>>> 24 HTML
25
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
26
Un exemple 26 HTML
27
Exemple : Html <html> <head>
<title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "> </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
28
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
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> <p>Par contre une ligne<br> scindée en 2 permet d'avoir une notion de paragraphe</p> </blockquote> </body> 29 HTML
30
Editeur : DreamWeaver 30 HTML
31
Editeur : Netscape Composer
31 HTML
32
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
33
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
34
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
35
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
36
code_exploitation://nom_machine.domaine_reseau
Les LIENS URL Local Intra Hyperlien Internet : URL code_exploitation://nom_machine.domaine_reseau http ftp file mailto file://c:\images... 36 HTML-liens
37
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 ?? 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 ) ( mailto ) ( ftp ) 37 HTML-liens HTML
38
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
39
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 #etiquette ancre ( anchor ) toto.html#etiquette <A HREF="url"> ……. </A> 39 HTML-liens HTML
40
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=" aaaa aaaa 40 HTML-liens HTML
41
Liens particuliers <A message pour </A> Appel automatique de la composition <A HREF="file:….."> ….. </A> 41 HTML-liens
42
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
43
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
44
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
45
Les MAP : DreamWeaver 45 HTML-images HTML
46
Les MAP : DreamWeaver 46 HTML-images HTML
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> 47 HTML-images HTML
48
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
49
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
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…… 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
52
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
53
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
54
Exemple Même Tableau Le tableau peut s'adapter à la dimension de la fenêtre du navigateur. 54 HTML HTML-tableau
55
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
56
Autre exemple 2 colonnes Tableau imbriqué 56
Pour faire un menu…et une zone d'affichage 56 HTML HTML-tableau
57
Et un autre… 1 tableau 6 colonnes 10 lignes
Regroupement de cases Des regroupements impossibles 57 HTML-tableau HTML
59
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
60
Structuration avancée de pages
HTML 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 = fichiers .html 60 HTML-frame
61
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
62
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
63
Exemple : Frame 4 Frame 1 scrollable 63 HTML-frame HTML
64
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
65
Exemple : définition Feuille
65 HTML-css
66
Exemple de Style La création n'est pas toujours Wysiwyg ( ici DreamWeawer ) 66 HTML-css
67
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
68
Le code source 68 <html> <head>
<title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "> </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
69
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
70
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
71
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
72
Exemple pratique En direct 72 HTML-layer
73
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' 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
74
Un exemple 74 HTML-form
75
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
77
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
78
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 : 78
79
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
80
DreamWeaver - La gestion de Site
Le site Local Visualisation graphique Gestion simplifiée 80
81
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 Si pb on le voit tout de suite 81
82
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 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 : 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
83
84
84
85
DreamWeaver Exercice No3 Réagencer le site avec frames
Réimplantation du site sur houebe....si il y a de la place Sinon hoth 85
86
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 ( la votre, , ) 86
87
DreamWeaver – exo2 Exercice No2 Implantation du site
sur houebe....si il y a de la place Sinon hoth 87
Présentations similaires
© 2024 SlidePlayer.fr Inc.
All rights reserved.