La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

COURS TP TECHNOLOGIES INTRANET / INTERNET.

Présentations similaires


Présentation au sujet: "COURS TP TECHNOLOGIES INTRANET / INTERNET."— Transcription de la présentation:

1 COURS TP TECHNOLOGIES INTRANET / INTERNET

2 Le plan du cours Séance 1 : HTML / DHTML Séance 2 : Javascript
Séance 3 : XML Séance 4 : Java, WAP Séance 5 : ASP, IIS Séance 6 : PHP, Apache, Mysql Séance 7: TP Séance 8: Présentation des TP

3 CONNEXION BASE DE DONNEES
Le TP Partie cliente : HTML ou XML CSS ou XSL JAVASCRIPT FORMULAIRE COOKIES option : APPLET ou ACTIVE X Partie serveur : PHP ou ASP CONNEXION BASE DE DONNEES VARIABLES SESSION

4 COURS TP N°1 INTRODUCTION AU HTML

5 Plan de la séance 1 1. Le Protocole HTTP - Notions sur le protocole
- Les COOKIES - Les seveurs HTTP 2. Le langage HTML - Les bases du langage EXO n°1 - Les Tables EXO n°2 - Les Frames EXO n°3 - Les formulaires EXO n°4 - Le DHTML - Les CSS - Les SSI

6 Les TP EXO 1 : Pages HTML balises de bases / Liens & Ancres / Images EXO 2 : Pages HTML contenant des Tables imbriquées EXO 3 : Frames à plusieurs niveaux EXO 4 : Pages HTML contenant des Formulaires

7 1. Le protocole HTTP - Historique
Le protocole HTTP (HyperText Transfer Protocol) créé en 1990. La version 0.9 était uniquement destinée à transférer des données sur Internet. La version 1.0 du protocole permet de transférer des messages avec des en-têtes décrivant le contenu du message en utilisant un codage de type MIME MIME (Multipurpose Internet Mail Extension).

8 1. Le protocole HTTP - Communication entre le navigateur et le serveur
Le but du protocole HTTP est de permettre un transfert de fichiers localisé grâce à une chaîne de caractères appelée URL (Uniform Resource Locator ) entre un navigateur (le client) et un serveur Web (appelé Httpd) La communication C/S en deux temps : Le navigateur effectue une requête HTTP Le serveur traite la requête puis envoie une réponse HTTP

9 1. Le protocole HTTP - Requête HTTP
Une requête HTTP est un ensemble de lignes envoyées au serveur par le navigateur : - Une ligne de requête La méthode L'URL La version du protocole utilisé par le client (généralement HTTP/1.0) - Les champs d'en-tête de la requête : (lignes facultatives) - Le corps de la requête : (ligne optionnel)

10 1. Le protocole HTTP - Exemple de Requête HTTP
Une requête HTTP a donc la syntaxe suivante : METHODE URL VERSION<crlf> EN-TETE : Valeur<crlf> . Ligne vide<crlf> CORPS DE LA REQUETE Exemple de requête HTTP : GET HTTP/1.0 Accept : text/html If-Modified-Since : Saturday, 15-January :37:11 GMT User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows 95) Get / Post Type MIME Info Client

11 1. Le protocole HTTP - Réponse HTTP
Une réponse HTTP est un ensemble de lignes envoyées au navigateur par le serveur : - une ligne de statut : La version du protocole utilisé Le code de statut La signification du code - Les champs d'en-tête de la requête : (lignes facultatives) - Le corps de la réponse : Contient le document demandé

12 1. Le protocole HTTP - Exemple de Réponse HTTP
Une réponse HTTP a donc la syntaxe suivante VERSION-HTTP CODE EXPLICATION<crlf> EN-TETE : Valeur<crlf> . Ligne vide<crlf> CORPS DE LA REPONSE Exemple de réponse HTTP : HTTP/ OK Date : Sat, 15 Jan :37:12 GMT Server : Microsoft-IIS/2.0 Content-Type : text/HTML Content-Lentgh : 1245 Last-Modified : Fri, 14 Jan :25:13 GMT Version HTTP Date de début de transfert des données Type MIME Longueur du Corps

13 1. Le protocole HTTP - Les COOKIES
Les cookies sont envoyés dans l'entête HTTP. Set-Cookie: NOM=valeur [;EXPIRES=date] [;DOMAIN=nom_de_domaine][;PATH=chemin][;SECURE] Les différents paramètres : NOM : Nom de la variable EXPIRES : Date de validité du cookie. DOMAIN : Domaine d'un cookie. Sans valeur c'est le nom du serveur qui est utilisé. PATH : Chemin définit le chemin d'un cookie. Sans valeur, le navigateur utilise le chemin du document qui a créé les cookies. SECURE : Définit si le cookie est transmis de façon sécurisée. Les navigateurs peuvent stocker : 300 cookies, 4 Ko d'information. 20 cookies par domaine. Si ces limites sont atteintes, le navigateur détruit les cookies avec la date d'expiration les plus récentes. Exemple Set-Cookie: Nom=EMMA ; path=/; expires=Wednesday, Dec-00 23:00:00 GMT

14 1. Le protocole HTTP - Les Codes d ’informations HTTP
Numéro Signification 301 Le document a été déplacé de façon permanente 302 Le document a été déplacé de façon temporaire 401 Vous n'êtes pas autorisé à accéder au document 404 L'URL demandée est valide mais n'est pas sur le serveur 408 Le temps d'attente pour accéder à la page demandée a expiré 503 Service non disponible Erreurs redirection Erreurs dues aux clients Erreurs dues aux serveurs

15 1. Le protocole HTTP - Les Serveurs HTTP
Apache : C'est le serveur HTTP le plus utilisé, ce succès est principalement dû à sa robustesse. Plate-forme : UNIX, Windows NT et Windows 95. Microsoft Information Server : Microsoft propose un serveur rapide et robuste dans les environnements Windows NT / 2000. Netscape Interprise Server et Commerce Server : Netscape est le troisième des serveurs HTTP utilisés sur Internet. Plate-forme : UNIX Windows NT ( mais pas sous Windows 95) Le serveur Netscape possède ses API, appelées NSAPI, qui sont bien sûr différentes de celles proposées par Microsoft sous le nom de ISAPI. OmniHTTP Freeware.

16 2. Le Langage HTML - Historique du WEB
1965 Ted Nelson donne naissance à l'Hypertexte. Mars 1989 Tim Berners-Lee du CERN publie l'article «Hypertexte et le CERN» Janvier 1993 Il existe une cinquantaine de serveurs http dans le monde Février 1993 Marc Andreesen édite la première version du browser Mosaic Mars 1993 Andreessen et Clark s'unissent pour développer Netscape. Juillet 1993 Le Cern et le MIT puis l'INRIA créent le WWW Consortium. Octobre 1994 Netscape est lancé en beta test Février millions d'utilisateurs de Netscape. 75% des browsers sont des Netscape. Novembre 1995 Netscape sort la version 2.03b qui supporte le langage JAVA. Décembre 1995 Microsoft lance sa version Internet Explorer 2.0

17 2. Le Langage HTML - Historique Suite
Mars 1996 Microsoft annonce que la version d'Internet Explorer 3.0 Décembre 1996 versions IE4 et de Office 97, qui transforment votre PC en un navigateur. Septembre 1997 La loi anti trust américaine demande à Microsoft de retirer son navigateur de Windows 98. Janvier 1998 Netscape annonce que les versions de son Navigateur sont toutes libres d'utilisation.

18 3. Le Langage HTML - Versions
HTML 3.x : 1996 - Les formules mathématiques - Les Tables - Les Frames HTML 4.0 : 1997 - DHTML - Les Feuilles de styles - Extension des objets Formulaire XHTML : 2000 - Rapprochement vers XML HTML 1.0 : 1990 - niveaux de titres - les paragraphes - les liens hypertexte - les listes HTML 2.0 : 1994 - Les images - Les formulaires

19 3. Le Langage HTML - Internet Explorer / Netscape
Netscape One Microsoft Internet Explorer : Active X Internet Explorer

20 3. Le Langage HTML - Généralités
Le langage HTML est un langage à balises Les balises (TAG) sont de la forme : <marqueur> texte </marqueur> ou encore <marqueur attribut=argument> texte </marqueur> ou même <marqueur> On peut attribuer plusieurs attributs à la même balise par la syntaxe suivante : <marqueur attribut1=argument1 attribut2=argument2>

21 3. Le Langage HTML - Notions de bases
- Pas de gestion de la casse - Toutes balises inconnues par le navigateur seront ignorées - Pas de caractères accentués utilisez les entités : > pour > < pour < & pour &   espace insécable - Les normes HTML demandent de respecter le codage dans les caractères ASCII 7 bits, sans caractères accentués. - Les attributs peuvent ne pas être entourés de " ou de '. - plusieurs caractères blancs sont remplacés par un seul caractère blanc, - les retours-chariot ne seront pas pris en compte.

22 3. Le Langage HTML - Structure d'un document HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"> <HTML> <HEAD> <!-- ENTETEDU DOCUMENT--> <TITLE>... </TITLE> <! -- Titre du document --> <BASE>… </BASE> <! -- Chemin de base pour tous les liens relatifs --> <LINK> ... </LINK> <! -- Lien avec une ressource DTD, CSS, JS --> <META> </META> <! -- Modification de l'entete HTTP, Date--> <! -- d'expiration, mots clés --> </HEAD> <BODY> ... </HTML> Exemples : <META HTTP-EQUIV="Expires" CONTENT="Monday, 01-Jan-96" 16:26:30 GMT"> <META NAME="KeyWords" CONTENT="Computer,internet,intranet" >

23 3. Le Langage HTML - Balises de formatage physique
Les Titres: <H1> </H1> ….. <H6> </H6> Les styles : <B> Gras </B> <S> Barré </S> <I> Italique </I> <U> Souligné </U> Les paragraphes : <P> </P> <BR> <!-- Pour les sauts de lignes --> <BLOCKQUOTE> <!-- Pour les tabulations --> Complément : <BIG>...</BIG> <SMALL>...</SMALL>

24 3. Le Langage HTML - Balises de formatage logique
<ABBREV> </ABBREV> Abréviation <ACRONYM> </ACRONYM> Acronyme <AU> </AU> L'auteur <CITE> </CITE> Citation <CODE> </CODE> Instruction <DEL> </DEL> Texte supprimé mais qui reste présent <DFN> </DFN> Définition d'instance <EM> </EM> Emphase <PERSON> </PERSON> Accentuation du nom d'une personne <S> </S> Comme strike (barré) <SAMP> </SAMP> Exemple <VAR> </VAR> Nom d'une variable

25 3. Le Langage HTML - Liens hypertext et Ancres
Un lien permet de définir une région sensible au clic de souris. <A HREF=adresse title=valeur> texte </A> <A NAME="signet"> </A> un nom ou d'ancre hypertexte. <A HREF="#nom de signet"> </A> définit un lien vers une ancre <A HREF="URL"> </A> définit un lien vers un URL <A HREF="URL#signet. </A> définit un lien vers un URL avec une ancre définie. L'argument mailto : adresse permet d'envoyer un courrier électronique à l'adresse correspondante. <A ?subject=Sujet > </A>

26 3. Le Langage HTML - Les polices de caractères
L'ensemble du document : <BASEFONT SIZE=valeur> Une partie de texte : <FONT SIZE=valeur> ..</FONT> La syntaxe SIZE=+i permet de donner une taille relative par rapport à la taille en cours. L'attribut COLOR, permet de modifier la couleur du text : <FONT COLOR="#FF0000">texte </FONT> Notons que les noms de couleurs peuvent être donnés en toutes lettres (Red,Blue,Green,..) <FONT COLOR="Green">Green</FONT> Le Jeu de caractères <FONT FACE="Times New Roman,Arial,Helvetica">….</FONT>

27 3. Le Langage HTML - Les listes
Les listes de numéros ont des attributs permettant de définir le type de numérotations : <OL TYPE=A|a|I|i|1 START=nb COMPACT> Liste listes à puces ont un attributs permettant de définir le style de la puce : <UL TYPE=disc|circle|square> Listes de définitions : une liste de définitions <DL> <DT> Terme 1 à définir <DD> Définition du terme 1 <DT> Terme 2 à définir <DD> Définition du terme 2 </DL> Listes de répertoires : une liste de répertoires <DIR> <LI> texte 1 <LI> texte 2 </DIR> Listes de numéros : une liste précédée d'un numéro s'incrémentant automatiquement. <OL> <LI> texte 1 <LI> texte 2 </OL> Liste à puces : permet de donner une liste précédée d'une puce. <UL> <LI> texte 1 <LI> texte 2 </UL> Listes de menus : permet de donner une liste menus. <MENU> <LI> texte 1 <LI> texte 2 </MENU>

28 4. Le Langage HTML - Les tables
Le tableau est encadré par les marqueurs : <TABLE> et </TABLE> Le titre du tableau est encadré par <CAPTION> </CAPTION> Chaque ligne est encadrée par <TR> </TR> Les cellules d'en-tête sont encadrées par <TH> </TH> Les cellules de valeur sont encadrées par <TD> </TD> HTML 4.0 : Groupement de Lignes : <THEAD> <THEAD> <TBODY> <TBODY> <TFOOT> <TFOOT> Groupement de Colonnes : <COLGROUP> <COL> </COL> </COLGROUP>

29 5. Le Langage HTML - Les frames
Fichier d'agencement des cadres, Fichier HTML dont la balise <BODY> est remplacée par la balise <FRAMESET>. Les dimensions sont fixés en pixels ou en pourcentage (%). <FRAMESET COLS="20%, *"> <!-- Ou ROWS --> <FRAME SRC="frame1.htm" NAME="gauche"> <FRAME SRC="frame2.htm" NAME="droite"> </FRAMESET> Désigner un cadre avec un lien hypertexte Pour spécifier le nom du cadre dans lequel doit s'ouvrir un lien : <A HREF="page.htm" TARGET="gauche"> _self Affiche la cible dans le même cadre que le lien _parent Affiche la cible dans le cadre de niveau supérieur _blank Affiche la cible dans une nouvelle fenêtre _top Affiche la cible dans la fenêtre entière du navigateur

30 6. Le Langage HTML - Les formulaires
Les formulaires permettent de réaliser des écrans de saisies. FORM : Les balises FORM permettent de définir les interfaces d'échange d'informations entre un utilisateur et le serveur http. <FORM ACTION="url"> ... </FORM> Les attributs suivants peuvent être utilisés : ACTION : fournit une adresse URL sur laquelle la requête issue de la FORM va être envoyée. Si le champ ACTION est absent, la requête sera envoyée sur le serveur courant. METHOD : est la méthode d'accès au serveur http. On trouve deux méthodes d'accès POST et GET. GET : Utilise l'URL. Cette méthode limite la taille du message à 255 caractères. POST : Utilise le champ corps de la requête HTTP.

31 6. Le Langage HTML - Les formulaires
INPUT : Cette est utilisée avec des attributs pour spécifier les caractéristiques de la commande clavier (ou souris) désirée. Les différents attributs que peut utiliser la commande INPUT sont : TYPE qui peut prendre les valeurs : text pour les entrées de type texte. hidden password pour les entrées de type mot de passe, checkbox pour les boîtes à cocher. radio pour les boutons radios submit un bouton poussoir qui provoque l'envoi de la requête FORM. reset image permet de remplacer le bouton par défaut par une image. file permet de soumettre un fichier au serveur.

32 6. Le Langage HTML - Les formulaires
NAME est le nom du champ VALUE valeur par défaut d'un champ de saisie. CHECKED SIZE est la taille du champ pour les champs caractères.. MAXLENGTH est le nombre maximum de caractères SRC est l'URL de l'image dans le cas où TYPE=image dans ce cas l'attribut ALIGN peut prendre les valeurs LEFT | RIGHT | TOP | MIDDLE | BOTTOM.

33 6. Le Langage HTML - Les formulaires
SELECT : Gestion des listes déroulantes La commande SELECT est utilisée avec la syntaxe suivante : <SELECT NAME="a-menu"> <OPTION VALUE=valeur> Option 1 <OPTION VALUE=valeur> Option 2 </SELECT> Les attributs de la commande SELECT sont les suivants : NAME est le nom symbolique de l'élément. C'est-à-dire le nom du champ utilisé par l'auteur de la page HTML. Ce nom n'est pas visible pour les utilisateurs. SIZE donne le nombre d'éléments qui seront affichés dans le menu. Les autres valeurs seront accessibles au moyen d'un ascenseur. MULTIPLE indique que la commande SELECT pourra avoir plusieurs sélections. SELECTED indique que l'option est sélectionnée par défaut. VALUE valeur par défaut

34 6. Le Langage HTML - Les formulaires
TEXTAREA : Saisie multilignes <TEXTAREA NAME=... ROWS=.. COLS=.. > valeur par défaut </TEXTAREA> NAME le nom symbolique de l'entrée ROWS nombre de lignes du champ de saisie COLS est la longueur de la ligne de saisie du champ texte. BUTTON : permet de définit un champ bouton d'action <BUTTON name="reset" type="reset"> <BUTTON name="submit" value="submit" type="submit"> Envoi <IMG src="/gif/icone.gif" alt="Envoi"> </BUTTON> LABEL : La balise LABEL permet d'associer une zone de texte à un champ.

35 6. Le Langage HTML - Les formulaires
FIELDSET et LEGEND : La balise FIELDSET permet de regrouper plusieurs champs La balise LEGEND permet de donner une légende à un groupe de champs regroupés par une balise FIELDSET. Les attributs spécifiques à IE : TABINDEX : <A TABINDEX="10" HREF="...">URL</A> <BUTTON TYPE="button" NAME="get-database" TABINDEX="1"> ACCESSKEY : <A ACCESSKEY="C" HREF="...">Cliquez ici</A> DISABLED : <INPUT DISABLED NAME="fred" VALUE="stone"> READONLY : Les éléments pouvant recevoir l'attribut READONLY son INPUT, TEXT, PASSWORD et TEXTAREA.

36 7. Le Langage HTML - Les Images
<IMG SRC="nom du fichier"> <FIG SRC="nom du fichier"> Les images à insérer dans les pages HTML sont de deux sortes, Les GIF (256 couleurs), on distingue deux sous formats : le format GIF 87a : demandé pour les petites icones et des images ne dépassant pas 1 Ko. L e format GIF 89a : ce format est appelé le format GIF entrelacé : il est réservé aux plus grosses images, qui s'afficheront en trois passes et aux images transparentes.

37 7. Le Langage HTML - Les Images suites
Les JEPG, on distingue deux sous formats : le format JPEG : Joint Photographic Expert Group JPEG est la norme la plus répandue à l'heure actuelle pour l'affichage d'images numériques sur Internet Elle se base sur une compression dite "par blocs" c'est à dire pixel par pixel (8x8) selon les courbes de couleur. Bonne performance mais compression très destructive. le format JPEG2000 : basée sur l'ondelette suivant la logique mathématique DWT (Discrete Wavelet Transform). L'algorithme distingue les zones à haute et basse fréquence pour appliquer sa compression. La technologie est ensuite multi-résolution c'est à dire à résolution progressive (progressivité en résolution spatiale).

38 7. Le Langage HTML - La compression par Ondelettes
La transformée par ondelettes est équivalente à un filtre passe-bande. Elle peut-être décomposée en 2 filtres complémentaires : Passe-haut : H, détails Passe-bas : L, projection

39 7. Le Langage HTML - Les Images Mappées
La balise <MAP> permet d'associer des pages HTML à des parties différentes d'une image. A l'intérieur du bloc <MAP> </MAP> on trouve des définitions de type <AREA> définissant chacune des zones sensibles. <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"> Les paramètres prennent les valeurs suivantes : SHAPE= rect | circle | poly | default COORDS= des valeurs entre côtes et séparées par des virgules comme décrit précédemment. HREF= l'URL qui sera ouverte

40 8. Le Langage HTML - Les formules Mathématiques
Les formules mathématiques : <MATH>…</ MATH > Les exposants : <SUP>…</SUP> Les indices : <SUB>…</SUB> Les factions : <OVER> ATTENTION au accolades ex : <MATH>tan(a) = {sin(a) <OVER> sin(b)} </MATH> Les racines : <ROOT>...</ROOT> (<SQRT>..</SQRT> pour les racines carrés) ex : <MATH><ROOT>4<OF>2000</ROOT></MATH> Les ( ),[ ],{ } : <BOX>...</BOX> ex : <MATH><BOX> ( <LEFT>{ 1 <OVER> 2 }<RIGHT> ) </BOX></MATH>

41 9. Le Langage HTML Autres balises intéressantes
<BANNER> </BANNER> Les bannières <MARQUEE> </MARQUEE > Les textes défilants <BDO> </BDO > Direction d'écriture <BGSOUND> </BGSOUND> Son en arrière plan <BR> Saut de ligne <HR> Ligne horizontale <TT> </TT> Caractère de machine à écrire <BIG> </BIG> Police plus grande <BLINK> </BLINK> Clignote (propre à Netscape) <Q> </Q> Encadre le texte par des guillemets <SMALL> </SMALL> Police plus petite <STRONG> </STRONG> Forte accentuation rendue par du gras <STRIKE> </STRIKE> Texte barré (comme S)

42 9. Le Langage HTML - Les feuilles de styles : CSS
Les feuilles de style sont apparues en 1997 avec le browser Internet Explorer 3.0, puis s'est généralisé avec les versions 4.0 d'Internet Explorer et de Netscape Navigator. Définition d'un style balise {propriété de style: Valeur; propriété de style: Valeur ...} Les feuilles de styles peuvent être définies dans plusieurs sections : - Dans la balise <STYLE> de la section <HEAD> <HEAD> <STYLE type="text/css"> <!-- BALISE1 {propriété de style: Valeur; propriété de style: Valeur ...} BALISE2 {propriété de style: Valeur; propriété de style: Valeur ...} --> </STYLE> </HEAD>

43 9. Le Langage HTML - Les feuilles de styles : CSS
- Dans une URL externe par la balise <LINK> <HTML> <HEAD> <LINK rel=stylesheet type="text/css" href="style.css"> </HEAD> 1. La balise <LINK> avertit le navigateur qu'il doit établir un lien 2. rel=stylesheet précise qu'il s'agit d'une feuille externe 3. type="text/css" avertit qu'il s'agit de feuilles de style en cascade 4. href=" ... " définit l'emplacement de la feuille de style - En règles individuelles par l'attribut STYLE des balises à définir <HTML> <BODY> <BALISE STYLE="propriété de style: Valeur; propriété de style: Valeur ... "> ... < /BALISE > </BODY> </HTML>

44 9. Le Langage HTML - Les feuilles de styles : CSS
Les Classes Permettent d'affecter des styles différents à des balises (modification dynamique de l'aspect d'une page HTML) La définition des classes: .nom_de_la_classe {propriété de style: Valeur; propriété de style: Valeur ...} Pour utiliser une classe : <BALISE class="nom_de_la_classe"> ... </BALISE> Javascript va permettre grâce à sa gestion d'événement de changer dynamique la classe associée à une balise.

45 9. Le Langage HTML - Les feuilles de styles : CSS
Les ID Ils permettent d'identifier les balises et d'associer un style à une balise. Javascript va référencer la règle de style voulue grace à l'ID On l'utilisera de la manière suivante : <BALISE ID="nom_ID" > ... </BALISE> En javascript pour changer la class associée à un balise on utilisera la propriété className. <P ID='nom_ID' onMouseOver = "className ='style'">Bonjour </P> Pour affecter un style à une balise en Javascript : - IE : document.all.nom_ID.style.propriété_de_style - Navigator : document.nom_ID.style.propriété_de_style

46 9. Le Langage HTML - Les feuilles de styles : CSS
Styles affectés aux liens A:link{ color : #000099; text-decoration : none; font-weight : normal } A:visited{ color : #000099; text-decoration : underline; font-weight : bold; } A:hover{ color : #ff0066; text-decoration : underline; font-weight : normal;} Liens Liens visités Liens survolés

47 10. Le Langage HTML - Le DHTML
Le DHTML (Dynamic HyperText Markup Language) n'est pas un nouveau langage de balises. C'est plutôt un ensemble de technologies : Le HTML Les feuilles de style (CSS) Le modèle objet de document (DOM) Le Javascript, Le DHTML n'est possible que sur Explorer et Netscape Navigator versions 4 ou supérieures. Attention le code à écrire est différent pour les deux navigateurs. La notion de couche est introduite par les balises DIV, SPAN et LAYER.

48 10. Le Langage HTML - Le DHTML
La balise LAYER spécifique à Netscape Navigator <LAYER NAME="Nom de la couche" LEFT="Distance au bord gauche" TOP="Distance au haut"> éléments HTML </LAYER> Les balises DIV et SPAN Ces balises génériques mais mieux supportées par Internet Explorer que Netscape Navigator DIV : permet de structurer des blocs entier. SPAN : ne que s'appliquer à des éléments simples comme une ligne. Avec les balises DIV et SPAN, le positionnement peut se faire de deux façons: Le positionnement absolu par rapport au coin supérieur gauche de la fenêtre du navigateur Le positionnement relatif par rapport à d'autres éléments <DIV style="position: absolute; top: 99 px; left: 99 px; visibility : visible;z-index : 2;"> </DIV>

49 11. Le Langage HTML - Clients Pull / Serveur Push
Les mécanismes de Serveur Push et de Client Pull ont été introduits à partir des versions 1.1 de Netscape. Ils permettent d'animer des pages Webs, notamment par des séquences d'images. Server Push : le serveur envoie des données, à la suite d'une demande faite par un client,sans fermer la connexion. La fonction Serveur Push laisse la connexion ouverte, ce qui a pour effet de montrer au lecteur une page HTML jamais chargée à 100%. Client Pull : la page HTML envoyée par le serveur contient des ordres de rafraîchissement automatique. La fonction Client Pull provoque la réouverture de la connexion par le client. <META HTTP-EQUIV="Refresh" CONTENT="x; URL=http://..">

50 12. Le Langage HTML - Les SII
Les SSI (Server Side Include) Si elles sont supportées par le serveur http, elle seront compatibles avec tous les navigateurs puisque le code des SSI sera transformé en HTML. Le format d'un appel SSI est le suivant : <!--#<balise><variables> -> Les balises reconnues sont break, config, echo, , exec, if, include, fsize, flastmod, label, goto et odbc. Les commandes break : La balise break permet de terminer le document HTML config : Utilisée pour positionner les options de sortie HTML. <!--#config timefmt="%d/%m/%y" -->

51 12. Le Langage HTML - Les SII
echo : Permet d'insérer certaines données dans une page HTML. Utilisez la variable var <!--#echo var="DATE_LOCAL" --> est la date du jour Pour récuperer les variables issues de formulaires par la méthode POST il suffit d'affecter à la variable var la variable utilisée dans le formulaire. Afficher des variables d'environnement : DATE_LOCAL la date et l'heure locales du serveur HTTP DOCUMENT_NAME le nom complet du document REMOTE_ADDR l'adresse IP du client distant REMOTE_HOST le nom de la station cliente REMOTE_USER le nom du client distant

52 12. Le Langage HTML - Les SII suite
exec : La balise exec permet d'exécuter une commande quelconque par le système d'exploitation du serveur. <!--#exec cmd='date' --> goto : La balise goto permet de sauter vers une étiquette #label sans exécuter le code entre l'instruction courante et l'étiquette. <!--#goto ="suite" --> blablabla non renvoyé <BR> <!--#label ="suite" --> if : La balise if permet d'effectuer une exécution sous certaines conditions, par exemple, d'afficher une portion de texte HTML si une condition est remplie. La syntaxe générale de la balise est la suivante : <!--#if expr="expression" --> ... <!--#elif expr="expression" --> ... <!--#else --> ... <!--#endif --> include : Permet d'inclure le contenu d'un fichier dans la page HTML <!--#include vitual|file = "fichier" --> odbc : La balise odbc permet de soumettre des requêtes à une base de données odbc et de mettre à jour cette dernière. <!--#odbc connect="base,user,pass" --> <!--#odbc statement="SELECT NOM, AGE" --> <!--#obdc format="%s a %s ans<P>" -->

53 12. Le Langage HTML - Les SII exemple
<!--#if expr="${HTTP_USER_AGENT} = /MSIE 5/" --> <!--#set var="brtype" value="msie5" --> <!--#elif expr="${HTTP_USER_AGENT} = /MSIE 4/" --> <!--#set var="brtype" value="msie4" --> <!--#elif expr="${HTTP_USER_AGENT} = /MSIE 3/" --> <!--#set var="brtype" value="msie3" --> <!--#elif expr="${HTTP_USER_AGENT} = /MSIE 2/" --> <!--#set var="brtype" value="msie2" --> <!--#else --> <!--#set var="brtype" value="unknown" --> <!--#endif --> <!--#include file="$brtype.txt"-->

54 13. Les références Les logiciels Wysiwyg
Front Page de Microsoft est un très bon produit, gérant le téléchargement des pages sur le serveur Http (Version française). Word IA : est une extension de Word qui permet de transformer Word en un éditeur/ Navigateur. Cette version ne supporte que le HTML 2 et ne permet donc pas une mise en page très ergonomique. De plus les efforts de Microsoft vont vers le développement de FrontPage Netscape Composer : (du package Communicator) uniquement sous Windows. Cest la réponse de Netscape à Microsoft . Dreamweaver de Macromedia est le meilleur outil testé. Il est rapide, exempt de bogue et est muni d'une interface très ergonomique et très agréable. Seul le prix peut faire réfléchir l'amateur, mais il reste le meilleur investissement pour le professionnel.

55 Les références - Les ouvrages intéressants
HTML 4 & HTML Dynamique Micro PC Poche Micro Application R Steyer XML Langage & applications Eyrolles Alain Michard Chapitre 5 Les feuilles de styles

56 Les références - Les sites WEB à consulter


Télécharger ppt "COURS TP TECHNOLOGIES INTRANET / INTERNET."

Présentations similaires


Annonces Google