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

Présentations similaires


Présentation au sujet: "COURS TP TECHNOLOGIES INTRANET / INTERNET. 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."— 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 Le TP Partie cliente : HTML ouXML CSSouXSL JAVASCRIPT FORMULAIRE COOKIES option :APPLETou ACTIVE X Partie serveur : PHPouASP 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 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 EN-TETE : Valeur. EN-TETE : Valeur Ligne vide 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 EN-TETE : Valeur. EN-TETE : Valeur Ligne vide 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 HTTPDate 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, 01-Dec-00 23:00:00 GMT

14 1. Le protocole HTTP - Les Codes d informations HTTP Numéro Signification 301Le document a été déplacé de façon permanente 302Le document a été déplacé de façon temporaire 401Vous n'êtes pas autorisé à accéder au document 404L'URL demandée est valide mais n'est pas sur le serveur 408Le temps d'attente pour accéder à la page demandée a expiré 503Service non disponible Erreurs redirectionErreurs dues aux clientsErreurs 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 / 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 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. 2. Le Langage HTML - Historique Suite

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

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

20 Le langage HTML est un langage à balises Les balises (TAG) sont de la forme : texte ou encore texte ou même On peut attribuer plusieurs attributs à la même balise par la syntaxe suivante : texte 3. Le Langage HTML - Généralités

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 ... … Le Langage HTML - Structure d'un document HTML Exemples :

23 3. Le Langage HTML - Balises de formatage physique Les Titres: ….. Les styles : Gras Barré Italique Souligné Les paragraphes : Complément :...

24 3. Le Langage HTML - Balises de formatage logique Abréviation Acronyme L'auteur Citation Instruction Texte supprimé mais qui reste présent Définition d'instance Emphase Accentuation du nom d'une personne Comme strike (barré) Exemple 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. texte... un nom ou d'ancre hypertexte.... définit un lien vers une ancre... définit un lien vers un URL 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.

26 3. Le Langage HTML - Les polices de caractères L'ensemble du document : Une partie de texte :.. 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 : texte Notons que les noms de couleurs peuvent être donnés en toutes lettres (Red,Blue,Green,..) Green Le Jeu de caractères ….

27 3. Le Langage HTML - Les listes Listes de définitions : une liste de définitions Terme 1 à définir Définition du terme 1 Terme 2 à définir Définition du terme 2 Listes de répertoires : une liste de répertoires texte 1 texte 2 Listes de numéros : une liste précédée d'un numéro s'incrémentant automatiquement. texte 1 texte 2 Liste à puces : permet de donner une liste précédée d'une puce. texte 1 texte 2 Listes de menus : permet de donner une liste menus. texte 1 texte 2 Les listes de numéros ont des attributs permettant de définir le type de numérotations : Liste listes à puces ont un attributs permettant de définir le style de la puce :

28 4. Le Langage HTML - Les tables Le tableau est encadré par les marqueurs : et Le titre du tableau est encadré par Chaque ligne est encadrée par Les cellules d'en-tête sont encadrées par Les cellules de valeur sont encadrées par HTML 4.0 : Groupement de Lignes : Groupement de Colonnes :

29 5. Le Langage HTML - Les frames Fichier d'agencement des cadres, Fichier HTML dont la balise est remplacée par la balise. Les dimensions sont fixés en pixels ou en pourcentage (%). Désigner un cadre avec un lien hypertexte Pour spécifier le nom du cadre dans lequel doit s'ouvrir un lien : _ 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.... 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 : Option 1 Option 2 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 valeur par défaut 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 Envoi 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 : URL ACCESSKEY : Cliquez ici DISABLED : READONLY : Les éléments pouvant recevoir l'attribut READONLY son INPUT, TEXT, PASSWORD et TEXTAREA.

36 7. Le Langage HTML - Les Images 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 permet d'associer des pages HTML à des parties différentes d'une image. A l'intérieur du bloc on trouve des définitions de type définissant chacune des zones sensibles. 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 : … Les exposants : … Les indices : … Les factions : ATTENTION au accolades ex : tan(a) = {sin(a) sin(b)} Les racines :... (.. pour les racines carrés) ex : Les ( ),[ ],{ } :... ex : ( { 1 2 } )

41 9. Le Langage HTML Autres balises intéressantes Les bannières Les textes défilants Direction d'écriture Son en arrière plan Saut de ligne Ligne horizontale Caractère de machine à écrire Police plus grande Clignote (propre à Netscape) Encadre le texte par des guillemets Police plus petite Forte accentuation rendue par du gras 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 de la section

43 9. Le Langage HTML - Les feuilles de styles : CSS - Dans une URL externe par la balise 1. La balise 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...

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 :... 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 :... En javascript pour changer la class associée à un balise on utilisera la propriété className. Bonjour 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;} LiensLiens visitésLiens 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 éléments HTML 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

éléments HTML

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.

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

51 12. Le Langage HTML - Les SII echo : Permet d'insérer certaines données dans une page HTML. Utilisez la variable var 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. goto : La balise goto permet de sauter vers une étiquette #label sans exécuter le code entre l'instruction courante et l'étiquette. blablabla non renvoyé 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 : include : Permet d'inclure le contenu d'un fichier dans la page HTML odbc : La balise odbc permet de soumettre des requêtes à une base de données odbc et de mettre à jour cette dernière. " -->

53 12. Le Langage HTML - Les SII exemple

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

Présentations similaires


Annonces Google