Home >Documents >COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 :...

COURS TP TECHNOLOGIES INTRANET / INTERNET. Le plan du cours Séance 1 : HTML / DHTML Séance 2 :...

Date post:03-Apr-2015
Category:
View:112 times
Download:2 times
Share this document with a friend
Transcript:
  • Page 1
  • COURS TP TECHNOLOGIES INTRANET / INTERNET
  • Page 2
  • Le plan du cours Sance 1 : HTML / DHTML Sance 2 : Javascript Sance 3 : XML Sance 4 : Java, WAP Sance 5 : ASP, IIS Sance 6 : PHP, Apache, Mysql Sance 7: TP Sance 8: Prsentation des TP
  • Page 3
  • Le TP Partie cliente : HTML ouXML CSSouXSL JAVASCRIPT FORMULAIRE COOKIES option :APPLETou ACTIVE X Partie serveur : PHPouASP CONNEXION BASE DE DONNEES VARIABLES SESSION
  • Page 4
  • COURS TP N1 INTRODUCTION AU HTML
  • Page 5
  • Plan de la sance 1 1. Le Protocole HTTP - Notions sur le protocole - Les COOKIES - Les seveurs HTTP 2. Le langage HTML - Les bases du langage EXO n1 - Les Tables EXO n2 - Les Frames EXO n3 - Les formulaires EXO n4 - Le DHTML - Les CSS - Les SSI
  • Page 6
  • Les TP EXO 1 : Pages HTML balises de bases / Liens & Ancres / Images EXO 2 : Pages HTML contenant des Tables imbriques EXO 3 : Frames plusieurs niveaux EXO 4 : Pages HTML contenant des Formulaires
  • Page 7
  • 1. Le protocole HTTP - Historique Le protocole HTTP (HyperText Transfer Protocol) cr en 1990. La version 0.9 tait uniquement destine transfrer des donnes sur Internet. La version 1.0 du protocole permet de transfrer des messages avec des en-ttes dcrivant le contenu du message en utilisant un codage de type MIME MIME ( Multipurpose Internet Mail Extension ).
  • Page 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 grce une chane de caractres appele 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 requte HTTP Le serveur traite la requte puis envoie une rponse HTTP
  • Page 9
  • 1. Le protocole HTTP - Requte HTTP Une requte HTTP est un ensemble de lignes envoyes au serveur par le navigateur : - Une ligne de requte La mthode L'URL La version du protocole utilis par le client (gnralement HTTP/1.0 ) - Les champs d'en-tte de la requte : (lignes facultatives) - Le corps de la requte : (ligne optionnel)
  • Page 10
  • 1. Le protocole HTTP - Exemple de Requte HTTP Une requte HTTP a donc la syntaxe suivante : METHODE URL VERSION EN-TETE : Valeur. EN-TETE : Valeur Ligne vide CORPS DE LA REQUETE Exemple de requte HTTP : GET http://www.yahoo.fr HTTP/1.0 Accept : text/html If-Modified-Since : Saturday, 15-January-2000 14:37:11 GMT User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows 95) Get / Post Type MIME Info Client
  • Page 11
  • 1. Le protocole HTTP - Rponse HTTP Une rponse HTTP est un ensemble de lignes envoyes 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-tte de la requte : (lignes facultatives) - Le corps de la rponse : Contient le document demand
  • Page 12
  • 1. Le protocole HTTP - Exemple de Rponse HTTP Une rponse HTTP a donc la syntaxe suivante VERSION-HTTP CODE EXPLICATION EN-TETE : Valeur. EN-TETE : Valeur Ligne vide CORPS DE LA REPONSE Exemple de rponse HTTP : HTTP/1.0 200 OK Date : Sat, 15 Jan 2000 14:37:12 GMT Server : Microsoft-IIS/2.0 Content-Type : text/HTML Content-Lentgh : 1245 Last-Modified : Fri, 14 Jan 2000 08:25:13 GMT Version HTTPDate de dbut de transfert des donnes Type MIME Longueur du Corps
  • Page 13
  • 1. Le protocole HTTP - Les COOKIES Les cookies sont envoys dans l'entte HTTP. Set-Cookie: NOM=valeur [;EXPIRES=date] [;DOMAIN=nom_de_domaine][;PATH=chemin][;SECURE] Les diffrents paramtres : 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 dfinit le chemin d'un cookie. Sans valeur, le navigateur utilise le chemin du document qui a cr les cookies. SECURE : Dfinit si le cookie est transmis de faon scurise. Les navigateurs peuvent stocker : 300 cookies, 4 Ko d'information. 20 cookies par domaine. Si ces limites sont atteintes, le navigateur dtruit les cookies avec la date d'expiration les plus rcentes. Exemple Set-Cookie: Nom=EMMA ; path=/; expires=Wednesday, 01-Dec-00 23:00:00 GMT
  • Page 14
  • 1. Le protocole HTTP - Les Codes d informations HTTP Numro Signification 301Le document a t dplac de faon permanente 302Le document a t dplac de faon temporaire 401Vous n'tes pas autoris accder au document 404L'URL demande est valide mais n'est pas sur le serveur 408Le temps d'attente pour accder la page demande a expir 503Service non disponible Erreurs redirectionErreurs dues aux clientsErreurs dues aux serveurs
  • Page 15
  • 1. Le protocole HTTP - Les Serveurs HTTP Apache : C'est le serveur HTTP le plus utilis, ce succs 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 troisime des serveurs HTTP utiliss sur Internet. Plate-forme : UNIX Windows NT ( mais pas sous Windows 95) Le serveur Netscape possde ses API, appeles NSAPI, qui sont bien sr diffrentes de celles proposes par Microsoft sous le nom de ISAPI. OmniHTTP Freeware.
  • Page 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 Fvrier 1993 Marc Andreesen dite la premire version du browser Mosaic Mars 1993 Andreessen et Clark s'unissent pour dvelopper Netscape. Juillet 1993 Le Cern et le MIT puis l'INRIA crent le WWW Consortium. Octobre 1994 Netscape est lanc en beta test Fvrier 1995 4 millions d'utilisateurs de Netscape. 75% des browsers sont des Netscape. Novembre 1995 Netscape sort la version 2.03b qui supporte le langage JAVA. Dcembre 1995 Microsoft lance sa version Internet Explorer 2.0
  • Page 17
  • Mars 1996 Microsoft annonce que la version d' Internet Explorer 3.0 Dcembre 1996 versions IE4 et de Office 97, qui transforment votre PC en un navigateur. Septembre 1997 La loi anti trust amricaine 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
  • Page 18
  • 3. Le Langage HTML - Versions HTML 1.0 : 1990 - niveaux de titres - les paragraphes - les liens hypertexte - les listes HTML 2.0 : 1994 - Les images - Les formulaires HTML 3.x : 1996 - Les formules mathmatiques - Les Tables - Les Frames HTML 4.0 : 1997 - DHTML - Les Feuilles de styles - Extension des objets Formulaire XHTML : 2000 - Rapprochement vers XML
  • Page 19
  • 3. Le Langage HTML - Internet Explorer / Netscape Microsoft Internet Explorer : Active X Netscape One Internet Explorer
  • Page 20
  • Le langage HTML est un langage balises Les balises (TAG) sont de la forme : texte ou encore texte ou mme On peut attribuer plusieurs attributs la mme balise par la syntaxe suivante : texte 3. Le Langage HTML - Gnralits
  • Page 21
  • Page 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 prcise 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="... " dfinit l'emplacement de la feuille de style - En rgles individuelles par l'attribut STYLE des balises dfinir...
  • Page 44
  • 9. Le Langage HTML - Les feuilles de styles : CSS Les Classes Permettent d'affecter des styles diffrents des balises (modification dynamique de l'aspect d'une page HTML) La dfinition des classes:.nom_de_la_classe {proprit de style: Valeur; proprit de style: Valeur...} Pour utiliser une classe :... Javascript va permettre grce sa gestion d'vnement de changer dynamique la classe associe une balise.
  • Page 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 rfrencer la rgle de style voulue grace l'ID On l'utilisera de la manire suivante :... En javascript pour changer la class associe un balise on utilisera la proprit className. Bonjour Pour affecter un style une balise en Javascript : - IE : document.all.nom_ID.style.proprit_de_style - Navigator : document.nom_ID.style.proprit_de_style
  • Page 46
  • 9. Le Langage HTML - Les feuilles de styles : CSS Styles affects 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 visitsLiens survols
  • Page 47
  • 10. Le Langage HTML - Le DHTML Le DHTML (Dynamic HyperText Markup Language) n'est pas un nouveau langage de balises. C'est plutt un ensemble de technologies : Le HTML Les feuilles de style (CSS) Le modle objet de document (DOM) Le Javascript, Le DHTML n'est possible que sur Explorer et Netscape Navigator versions 4 ou suprieures. Attention le code crire est diffrent pour les deux navigateurs. La notion de couche est introduite par les balises DIV, SPAN et LAYER.
  • Page 48 lments HTML">
  • 10. Le Langage HTML - Le DHTML La balise LAYER spcifique Netscape Navigator lments HTML Les balises DIV et SPAN Ces balises gnriques mais mieux supportes par Internet Explorer que Netscape Navigator DIV : permet de structurer des blocs entier. SPAN : ne que s'appliquer des lments simples comme une ligne. Avec les balises DIV et SPAN, le positionnement peut se faire de deux faons: Le positionnement absolu par rapport au coin suprieur gauche de la fentre du navigateur Le positionnement relatif par rapport d'autres lments lments HTML
  • Page 49
  • 11. Le Langage HTML - Clients Pull / Serveur Push Les mcanismes 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 squences d'images. Server Push : le serveur envoie des donnes, 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 charge 100%. Client Pull : la page HTML envoye par le serveur contient des ordres de rafrachissement automatique. La fonction Client Pull provoque la rouverture de la connexion par le client.
  • Page 50
  • 12. Le Langage HTML - Les SII Les SSI (Server Side Include) Si elles sont supportes 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, email, exec, if, include, fsize, flastmod, label, goto et odbc. Les commandes break : La balise break permet de terminer le document HTML config : Utilise pour positionner les options de sortie HTML.
  • Page 51
  • 12. Le Langage HTML - Les SII echo : Permet d'insrer certaines donnes dans une page HTML. Utilisez la variable var est la date du jour Pour rcuperer les variables issues de formulaires par la mthode POST il suffit d'affecter la variable var la variable utilise 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
  • Page 52 ">
  • 12. Le Langage HTML - Les SII suite exec : La balise exec permet d'excuter une commande quelconque par le systme d'exploitation du serveur. goto : La balise goto permet de sauter vers une tiquette #label sans excuter le code entre l'instruction courante et l'tiquette. blablabla non renvoy if : La balise if permet d'effectuer une excution sous certaines conditions, par exemple, d'afficher une portion de texte HTML si une condition est remplie. La syntaxe gnrale 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 requtes une base de donnes odbc et de mettre jour cette dernire. " -->
  • Page 53
  • 12. Le Langage HTML - Les SII exemple
  • Page 54
  • 13. Les rfrences Les logiciels Wysiwyg Front Page de Microsoft est un trs bon produit, grant le tlchargement des pages sur le serveur Http (Version franaise). 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 trs ergonomique. De plus les efforts de Microsoft vont vers le dveloppement de FrontPage Netscape Composer : (du package Communicator) uniquement sous Windows. Cest la rponse de Netscape Microsoft. Dreamweaver de Macromedia est le meilleur outil test. Il est rapide, exempt de bogue et est muni d'une interface trs ergonomique et trs agrable. Seul le prix peut faire rflchir l'amateur, mais il reste le meilleur investissement pour le professionnel.
  • Page 55
  • Les rfrences - Les ouvrages intressants HTML 4 & HTML Dynamique Micro PC Poche Micro Application R Steyer XML Langage & applications Eyrolles Alain Michard Chapitre 5 Les feuilles de styles
  • Page 56
  • Les rfrences - Les sites WEB consulter http://www.commentcamarche.net/ http://www.imaginet.fr/ http://www.allhtml.com

Click here to load reader

Reader Image
Embed Size (px)
Recommended