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...
![Page 1: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/1.jpg)
1
Fonctionnalités d'un serveur WEB
o Logiciel
o Niveau d'exploitation RESEAUoNotion de Serveur/Client
o Niveau d'exploitation SGF
WEB
![Page 2: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/2.jpg)
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,… )……
![Page 3: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/3.jpg)
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
![Page 4: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/4.jpg)
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
![Page 5: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/5.jpg)
5
Un exemple
WEB
![Page 6: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/6.jpg)
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
![Page 7: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/7.jpg)
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…
![Page 8: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/8.jpg)
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
![Page 9: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/9.jpg)
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
![Page 10: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/10.jpg)
10
Principes de Fonctionnement
WEB
•Serveur
•1) connexion avec le serveurhttp://……
•2) Echange Mise en cache
•3) Rupture de la connexion
![Page 11: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/11.jpg)
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
![Page 12: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/12.jpg)
![Page 13: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/13.jpg)
![Page 14: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/14.jpg)
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
![Page 15: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/15.jpg)
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
![Page 16: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/16.jpg)
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
![Page 17: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/17.jpg)
17
•Beaucoup de textes•Problèmes 'Image'•Les caractères accentués
HTML
![Page 18: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/18.jpg)
18
Pourquoi ? Texte HTML
o Editeur Spécialisé
WysiWyg
o Difficile d'être completo Corrections quelquefois difficiles
HTML
![Page 19: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/19.jpg)
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
![Page 20: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/20.jpg)
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
![Page 21: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/21.jpg)
21
Un
exemple
Netscape Par défaut : Gif / JpegHTML
![Page 22: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/22.jpg)
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
![Page 23: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/23.jpg)
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
![Page 24: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/24.jpg)
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
![Page 25: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/25.jpg)
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
![Page 26: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/26.jpg)
26
Un exemple
HTML
![Page 27: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/27.jpg)
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
![Page 28: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/28.jpg)
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
![Page 29: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/29.jpg)
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
![Page 30: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/30.jpg)
30
Editeur : DreamWeaver
HTML
![Page 31: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/31.jpg)
31
Editeur : Netscape Composer
HTML
![Page 32: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/32.jpg)
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
![Page 33: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/33.jpg)
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
![Page 34: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/34.jpg)
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
![Page 35: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/35.jpg)
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
![Page 36: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/36.jpg)
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
![Page 37: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/37.jpg)
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
![Page 38: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/38.jpg)
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
![Page 39: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/39.jpg)
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
![Page 40: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/40.jpg)
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
![Page 41: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/41.jpg)
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
![Page 42: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/42.jpg)
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
![Page 43: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/43.jpg)
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
![Page 44: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/44.jpg)
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
![Page 45: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/45.jpg)
45
Les MAP : DreamWeaver
HTMLHTML-images
![Page 46: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/46.jpg)
46
Les MAP : DreamWeaver
HTMLHTML-images
![Page 47: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/47.jpg)
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
![Page 48: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/48.jpg)
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
![Page 49: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/49.jpg)
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
![Page 50: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/50.jpg)
![Page 51: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/51.jpg)
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……
![Page 52: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/52.jpg)
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
![Page 53: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/53.jpg)
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
![Page 54: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/54.jpg)
54
Exemple•Même Tableau
HTMLHTML-tableau
![Page 55: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/55.jpg)
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
![Page 56: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/56.jpg)
56
Autre exemple
•2 colonnes•Tableau imbriqué
HTMLHTML-tableau
![Page 57: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/57.jpg)
57
Et un autre…
•1 tableau•6 colonnes•10 lignes
Des regroupementsimpossibles
HTMLHTML-tableau
![Page 58: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/58.jpg)
![Page 59: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/59.jpg)
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
![Page 60: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/60.jpg)
60
HTML 4.0 - Les Frame
o Structuration avancée de pages
Frame FrameSet
Un nom / frame
HTML-frame
•3 zones = 4 fichiers .html
![Page 61: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/61.jpg)
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
![Page 62: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/62.jpg)
62
Les Frame
o Intérêts Target : option d'un 'href'
blank : nouvelle fenêtreParentNom frame….
HTML-frame
![Page 63: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/63.jpg)
63
Exemple : Frame
HTML
•4 Frame•1 scrollable
HTML-frame
![Page 64: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/64.jpg)
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
![Page 65: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/65.jpg)
65
Exemple : définition Feuille
HTML-css
![Page 66: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/66.jpg)
66
Exemple de Style
HTML-css
La création n'est pas toujours Wysiwyg( ici DreamWeawer )
![Page 67: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/67.jpg)
67
Exemple comparatif
HTML-css
![Page 68: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/68.jpg)
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 )
![Page 69: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/69.jpg)
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
![Page 70: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/70.jpg)
70
Zones indépendantes
o On peut le faire aussi avec des tableaux
o en direct
HTML-layer
![Page 71: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/71.jpg)
71
Ca bouge
o En direct
HTML-layer
![Page 72: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/72.jpg)
72
Exemple pratique
HTML-layer
En direct
![Page 73: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/73.jpg)
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
![Page 74: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/74.jpg)
74
Un exemple
HTML-form
![Page 75: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/75.jpg)
75
Les objets
HTML-form
![Page 76: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/76.jpg)
![Page 77: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/77.jpg)
77
Mise en Oeuvre
o Wordo Excelo PowerPointo Editeur Spécialisé : FrontPage,
DreamWeaver,Netscape Composer,ColdFusion, autre ….
DREAM
![Page 78: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/78.jpg)
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
![Page 79: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/79.jpg)
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
![Page 80: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/80.jpg)
80
DreamWeaver - La gestion de Site
o Le site Local
Visualisation graphique Gestion simplifiée
![Page 81: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/81.jpg)
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
![Page 82: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/82.jpg)
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
![Page 83: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/83.jpg)
83
![Page 84: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/84.jpg)
84
![Page 85: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/85.jpg)
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....
![Page 86: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/86.jpg)
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@ )
![Page 87: 1 Fonctionnalités d'un serveur WEB oLogiciel oNiveau d'exploitation RESEAU oNotion de Serveur/Client oNiveau d'exploitation SGF WEB.](https://reader036.fdocument.pub/reader036/viewer/2022081514/551d9d7d497959293b8b50ff/html5/thumbnails/87.jpg)
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....