1 / 89

Plan

Nouvelles Technologies Introduction Sadok Ben Yahia, PhD sadok.benyahia@fst.rnu.tn http://www.cck.rnu.tn/sbenyahia Département d’Informatique Fac. Sces. Tunis. Plan. Introduction Les services internet Le web Le protocole HTTP Langage HTML. Réseaux: Introduction.

conlan
Télécharger la présentation

Plan

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Nouvelles Technologies IntroductionSadok Ben Yahia, PhDsadok.benyahia@fst.rnu.tn http://www.cck.rnu.tn/sbenyahiaDépartement d’InformatiqueFac. Sces. Tunis

  2. Plan • Introduction • Les services internet • Le web • Le protocole HTTP • Langage HTML

  3. Réseaux: Introduction • C'est un ensemble fonctionnel constitué par des machines (ordinateurs, imprimantes, etc.) reliées entre elles par des liens (fils de cuivre, fibre optique). Suivant la distance couverte: • les réseau locaux (LAN: local area network), • les réseaux nationaux (WAN: wide area network). • Il ne suffit pas de relier deux machines avec n'importe quel câble pour assurer la mise en route du réseau. Il faut permettre aux machines de dialoguer entre elles : c’est la fonction des protocoles réseau.

  4. Réseaux: Protocoles • Les protocoles sont indispensables pour permettre à deux ou ++ machines de dialoguer de façon correcte. • la transmission des données sur le réseau (liaison) • l'acheminement correct des données sur le réseau (transport) • la détection des erreurs avec le cas échéant la retransmission des données • le dialogue entre des applications (programmes) sur des machines différentes Couche application Mise en forme des données Couche Transport Adressage et transport des données Couche Liaison Transmission des données sur le support physique

  5. L'internet : un réseau de réseaux • L'Internet est un réseau de réseaux (méta-réseau). • Sa structuration est similaire à un emboîtement de poupées russes: on part du réseau local pour aller vers le réseau international. • L'élément de base est le réseau local qui s'insère ensuite dans un réseau de campus (dans le cas d'une université) lui même connecté sur un réseau régional. • Les réseaux régionaux sont fédérés au niveau national par un réseau d'interconnexion qui offre en plus des connexions internationales.

  6. Les services de l'Internet - Présentation • On appelle service Internet toute application mettant en jeu les protocoles de communication de l'Internet donc TCP/IP. • Les services permettront de : • échanger du courrier électronique • se connecter sur des machines distantes • récupérer des fichiers (programmes, données, etc.) • consulter les forums électroniques (également appelés news) • accéder à de l'information • participer à une discussion grâce à un serveur de liste

  7. Les services de l'Internet • Du point de vue de l'utilisateur on peut considérer schématiquement l'Internet comme étant divisé en deux espaces: • un espace de communication directe entre individus • un espace d'information Chacun de ces espaces se caractérise par des supports d'information spécifiques: courrier = messages forums = articles listes de diffusion = messages web = page (constituée de fichiers textes, images, sons, etc.) ftp = fichier de tout type

  8. WWW : World Wide Web • HTML :Créé en 1989 au CERN par Tim Berners-LeeMettre en ligne de la documentation (initialement technique pour physiciens) • Services de l'Internet • Web • Messagerie • Transfert de fichiers (FTP) • Forum de nouvelles (news), de discussion (chat) • Principes du Web • Hypertexte : HTML • Client/serveur : HTTP • Schéma de désignation : URL

  9. Hypertexte • Texte "normal " • organisation linéaire • éventuellement renvois sous forme de sommaires, index, notes de bas de page • Hypertexte • organisation pas forcément linéaire • texte enrichi de liens • renvoi vers un document • renvoi vers une partie du même document • renvoi vers une partie d'un autre document

  10. Client Serveur Web HTTP requête réponse :document HTML Client/serveur Client : le navigateur (Internet Explorer, Netscape, ...)Serveur : le serveur Web (Apache, Microsoft IIS, ...) Le client émet une requête Le serveur répond en fournissant le document demandé ou un message d'erreur si le document n'existe pas

  11. Schéma de désignation : Uniform Resource Locator (URL) Permet de désigner une page WebChaque page a un nom unique  pas d'ambiguïté possibleProtocole : // serveur / pagehttp://www.fst.ca/index.html Organisation hiérarchique possible pour les pages (=hiérarchie fichier disque) Protocole :// serveur / répertoire / ... / pagehttp://www.ulaval.ca/papers/2002/index.html

  12. Complémentssur les URL’s Eléments constitutifs (optionnels) d'une URLprotocole:// protocoles utilisables : HTTP, FTP, MAILTO, FILE, NEWSutilisateur@ login pour les pages protégéesserveur nom ou adresse IP (ex. : 163.136.27.6 ) du serveur:numéro numéro de port TCP du serveur/répertoire chemin d'accès dans la hiérarchie de répertoiresfichier nom du document à atteindre#signet signet dans le document à atteindre?options information transmise au serveur (ex. :formulaire) Exemplehttp://user1@12.7.6.1:8080/pub/cv.html#diplomes ftp://anonymous@ftp.fst.ca http://www.altavista.com/query.html?erty

  13. Structured'un document HTML • <! DOCTYPE ….> • <HtML> • <HEAD> • En-tête</HEAD> • <BODY> Corps du document</BODY> • </HTML> Déclaration version HTML utilisée En-tête Corps du document • Déclaration de version et en-tête facultatifs • Absence de corps  document vide (sauf cas spéciaux, ex.: frames)

  14. HTML: Règles de balisage Deux types de balises : • autonome < .. > (ex. : <DOCTYPE >) • délimitant une zone • balise de début de zone < ... > (ex. : <HTML> ) • balise de fin de zone </… > (ex. : </HTML> ) • Identifiants de balise non sensibles à la casse (<BODY> = <Body>)

  15. HTML: Règles de balisage certaines balises sont associées à un ou plusieurs attributs : chaque attribut à un identifiant et une valeur (entre "   " et après = ) ex. : <IMG SRC="photo.gif" ALT="une photo"> • commentaires <!- - ceci est un commentaire - - > • encodage de caractère & ... ; < > & &lt; &gt; &amp caractères accentués & lettre accent ; é à ô &eacute; &agrave &ocirc;

  16. Client Web ExplorerNetscape ….. IISApache... ……. HTTP: Hypertext Transfert Protocol Protocole réseau d’échange de l’information sur le Web Principe de base • un couple requête/réponse par document à charger • + autant de req./rép. qu'il y a d'éléments inclus (images, frames, sons, ...) Les éléments inclus sont désignés par des URLsIls peuvent être localisés : - sur le même site (que le document) et dans le même répertoire - sur le même site mais dans un répertoire différent - sur un site différent

  17. Le protocole HTTP • Définit le langage utilisé pour les échanges entre client et serveur Web • version 0.9 • simple protocole de transfert de données (GET et réponse) • version 1.0 • restée un Internet Draft (RFC 1945) • actuellement version 1.1 • RFC 2616 (juin 1999) • Pas de session permanente entre client/serveur

  18. réponse client serveur Déroulement d’une requête HTTP HTTP démon HTTPD • Demande de connexion • Attente de la réponse du serveur • Établissement de la connexion • Envoi d’une requête (URL) • Réponse du serveur • Affichage de la réponse • Fermeture de la connexion

  19. réponse client serveur Déroulement d’une requête HTTP protocolesans état démon HTTPD • Demande de connexion • Attente de la réponse du serveur • Établissement de la connexion • Envoi d’une requête (URL) • Réponse du serveur • Affichage de la réponse • Fermeture de la connexion

  20. Exemple de transaction HTTP % telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur web

  21. Exemple de transaction HTTP % telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur webTrying 148.60.4.30...Connected to apollon.univ-tunis1.tn.Escape character is '^]'.

  22. Exemple de transaction HTTP % telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur webTrying 148.60.4.30...Connected to apollon.univ-tunis1.tn Escape character is '^]'.GET /index.html HTTP/1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . demande de transfertHost: apollon.univ-tunis1.tn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . nom du serveurFrom: pa@ifsic.univ-tunis1.tn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . adresse demandeur (optionnelle) (ligne blanche = fin de l’entête HTTP de la requête)

  23. Exemple de transaction HTTP % telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur webTrying 148.60.4.30...Connected to apollon.univ-tunis1.tn.Escape character is '^]'.GET /index.html HTTP/1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . demande de transfertHost: apollon.univ-tunis1.tn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . nom du serveurFrom: pa@ifsic.univ-tunis1.tn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . adresse demandeur (optionnelle) (ligne blanche = fin de l’entête HTTP de la requête) HTTP/1.1 200 OK. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . réponse du serveurDate: Tue, 02 Jun 2001 14:11:17 GMTServer: Apache/1.3b6Last-Modified: Mon, 07 Apr 2001 10:39:08 GMT. . . . . . . . . . . . . informations sur la ressourceETag: "b3dd-524-33b78ccc"Content-Length: 1316. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . taille de la ressourceAccept-Ranges: bytesContent-Type: text/html. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . type MIME (ligne blanche = fin de l’entête HTTP de la réponse) <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">(contenu)<HTML>….</HTML>

  24. Exemple de transaction HTTP % telnet www.info.univ-tunis1.tn 80 . . . . . . . . . . . . . . . . . . . . . .connexion au serveur webTrying 148.60.4.30...Connected to cck.univ-tunis.tn.Escape character is '^]'.GET /index.html HTTP/1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . demande de transfertHost: cck.univ-tunis.fr . . . . . . . . . . . ………... . . . . . . . . . . . . . . . . . . . nom du serveurFrom: sad@fst.univ-tunis.fr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . adresse demandeur (optionnelle) (ligne blanche = fin de l’entête HTTP de la requête) HTTP/1.1 200 OK. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . réponse du serveurDate: Tue, 02 Jun 2001 14:11:17 GMTServer: Apache/1.3b6Last-Modified: Mon, 07 Apr 2001 10:39:08 GMT. . . . . . . . . . . . . informations sur la ressourceETag: "b3dd-524-33b78ccc"Content-Length: 1316. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . taille de la ressourceAccept-Ranges: bytesContent-Type: text/html. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . type MIME (ligne blanche = fin de l’entête HTTP de la réponse) <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> (contenu)<HTML>….</HTML>Connection closed by foreign host.fermeture de la connexion

  25. RequêteHTTP Permet d'envoyer des commandes au serveur Web3 commandes principales (présentes dans HTTP/1.0 et 1.1)GET : demande d'un documentHEAD : demande de l'en-tête (HTTP) d'un documentPOST : dépose d'information sur le serveur GET : requête principale, 80 % des requêtes WebHEAD : au travers de l'en-tête, permet de savoir si un document a changéPOST : envoi de d'information saisie dans un formulaire client Format de la requête (1 ligne) commande URL version HTTP comprise par le clientGET /index.html HTTP/1.1

  26. Requête HTTP (2) Pour les commandes POST, informations supplémentaires nécessairesFormat de la requête (plusieurs lignes) commande URL version HTTP comprise par le client ligne blanche Informations envoyées par le client POST /cgi-bin/prog.exe HTTP/1.1Nom=XXX&Prenom=YYTZl

  27. RéponseHTTP (1) La réponse du serveur Web à une commandeFormat de la réponse (plusieurs lignes) version HTTP du serveur code retour commentaire en-tête 1 HTTP: valeur....en-tête n HTTP: valeur document texte (HTML) ou binaire (GIF, JPG) HTTP/1.1 200 OKContent-Length: 9872Content-Type: text/html<HTML> ....</HTML>

  28. RéponseHTTP (2) code retour : renseigne sur le succès (200) ou l'échec (4xx) de la requêteen-têtes HTTP : informations transmises par le serveur sur le document envoyé Exemple d'en-têtes • Content-Length : taille du document • Last-Modified : date de dernière modification du document • Server : nom du logiciel serveur • Expire : date d'expiration du document • Content-Type : type MIME ( Multipurpose Internet Mail Extensions) du document Nombreux autres en-têtes possibles

  29. RéponseHTTP (3) • Type (MIME) du document : Classification des documents de la forme : médium/format • text/html : document texte HTML • text/plain : document texte "brut"   • image/gif : image GIF • image/jpeg : image JPEG • audio/wav : fichier son au format .wav • video/mpeg : fichier vidéo au format .mpeg • application/ps : fichier généré par une application au format PostScript • application/octet-stream : fichier d'octets "brut"+ nombreux autres types existants

  30. Les codes de réponse sous HTTP • 10x : information • 20x : succès • 30x : redirection • 40x : erreur du client • 50x : erreur du serveur 200 OK 301 Moved permanently 401 Unauthorized402 Payment required403 Forbidden404 Not found 500 Internal server error

  31. Le language (HTML): Hypertext Markup Language

  32. Les titres en HTML <Hn> … </Hn> n varie entre 1 et 6. H1 Titre de rang 1 H2 Titre de rang 2 H3 Titre de rang 3 H4 Titre de rang 4 H5 Titre de rang 5 H6 Titre de rang Exemple : <H1 align=“center”> Titre1</H1>

  33. Les Divisions d’un document • <BR> : Retour à la ligne • <P…> … </P> : Nouveau paragraphe • <HR…> : Ligne horizontale de séparation Attribut: ALIGN : l’alignement de la ligne COLOR : Couleur de la ligne NOSHADOW : Supprime l’effet 3D SIZE : la hauteur de la ligne WIDTH : la largeur de la ligne

  34. Exemple <HTML> <BODY> <H2 ALIGN="CENTER"> Le réseau Internet </H2> <BR> Le World Wide Web est un service d'Internet. <HR SIZE="3" WIDTH="90%" ALIGN="CENTER"> <P ALIGN="RIGHT"> Internet propose également d'autres services comme l'E-mail, FTP... </P> </BODY> </HTML>

  35. Les Styles • <B> ... </B> : Pour écrire en gras. • <I> ... </I> : Pour écrire en italique. • <U> ... </U> : Pour souligner le texte. • <S> … </S> : Pour barrer le texte • <TT> ... </TT> : Caractères de machine à écrire. • <CENTER> … </CENTER> : Le texte va être centré. • <SUB> ... </SUB> : Texte en indice. • <SUP> ... </SUP> : Texte en exposant. • <FONT…> ... </FONT> : Agit sur la police, la couleur et la taille des caractères.

  36. Exemple <BODY> <B> Ce texte va être affiché en gras </B> <BR> <I> Ce texte va être affiché en italique </I> <BR> <U> Ce texte va être souligné </U> <BR> <S> Ce texte va être barré </S> <BR> <TT> Ce texte va être en caractères de M.A.E </TT> <CENTER> Ce texte va être centré </CENTER> <BR> <BR> X<SUB>1</SUB><SUP>2</SUP> + 4 X<SUB>2</SUB> + 5 = 0 <BR> <B> <I> Cette équation n’admet pas de solutions <U> dans R </U> </B> </I> </BODY>

  37. Exemple <HTML> <BODY> <H2> Démonstration de l’utilisation de la balise FONT </H2> <FONT SIZE=3 COLOR="#000000" FACE="Arial"> Noir </FONT> <BR> <FONT SIZE=4 COLOR="#FFFF00" FACE="Arial Black"> Jaune </FONT> <BR> <FONT SIZE=6 COLOR="#FF0000" FACE="Comic sans MS"> Rouge </FONT> <BR> </BODY> </HTML>

  38. Fond de page et couleur du texte La balise <BODY> peut recevoir plusieurs attributs qui vont permettre de contrôler la couleur du fond de la fenêtre du Browser, la couleur des caractères du texte, et enfin la couleur des liens. • BGCOLOR : Couleur du fond (format RGB) • BACKGROUND : Pour insérer une image de fond (GIF, JPG) • TEXT : Couleur du texte (format RGB) • LINK : Couleur des liens non encore visités (format RGB) • VLINK : Couleur des liens visités (format RGB) • LEFTMARGIN : Marge de gauche en pixels • TOPMARGIN : Marge du haut en pixels

  39. Exemple <HTML> <BODY TEXT=“#00FF00” BACKGROUND=“images/bgrd.gif”> <H2> Démonstration de l’utilisation des attributs BODY </H2> <BR> Internet est un réseau mondial qui concerne les: <FONT COLOR=“#FFFFFF“ SIZE=4> Chercheurs </FONT> <BR> <FONT COLOR=“#0000FF“ SIZE=4> Militaires </FONT> <BR> Internet concerne aussi le monde éducatif et les particuliers... </BODY> </HTML>

  40. Les Listes • Les listes sont composées de deux éléments: 1. Les ancres de type de liste (<UL> ou <OL>) 2. Les ancres d’item de liste (<LI>) • les types de liste <UL> et </UL> : Délimitent une liste avec puces (Unordered List). <OL> et </OL> : Délimitent une liste à numéros ou à lettres (Ordered List).

  41. Exemple <HTML> <BODY> <H3 ALIGN=“CENTER” > Exemple de listes régulières </H3> <OL> <LI> Pommes </LI> <LI> Melon </LI> </OL> <BR> <UL> <LI> Pommes </LI> <LI> Melon </LI> </UL> </BODY> </HTML>

  42. Les Tableaux <TABLE> et </TABLE> : Définition d’un tableau. <TD> et <TD> : Une Cellule du tableau. <TR> et </TR> : Une ligne du tableau. <TH> et </TH> : Une Cellule En-tête du tableau (gras et centré). <CAPTION> et </CAPTION> : Titre du tableau.

  43. Les tableaux Bordure de cadre [Border]<TABLE border=?></TABLE> <TABLE border=2><TR><TD>1</TD><TD>2</TD></TR><TR><TD>3</TD><TD>4</TD></TR></TABLE>

  44. Les tableaux … • L'espace entre les cellules ou l'épaisseur des lignes duquadrillage<TABLE cellspacing=?> • La largeur de la table <TABLE width=?><TABLE width=%> <TABLE border=2 cellspacing=10><TR><TD>1</TD><TD>2</TD></TR><TR><TD>3</TD><TD>4</TD></TR></TABLE>

  45. Les tableaux … • L'enrobage des cellules oul'espace entre le bord et le contenu<TABLE cellpadding=?> <TABLE border=2 cellpadding=10><TR><TD>1</TD><TD>2</TD></TR><TR><TD>3</TD><TD>4</TD></TR></TABLE>

  46. Les tableaux: Atelier • Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois colonnes égales <CENTER><TABLE width=60% border=1><TR><TD>cellule1</TD><TD>cel. 2</TD><TD>3</TD></TR></TABLE></CENTER> • Ajoutons la balise de largeur de la cellule CENTER><TABLE width=60% border=1><TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD><TD width=34%>3</TD></TR></TABLE></CENTER> • Je veux ce tableau

  47. Les tableaux: Atelier • Je souhaite que la première ligne prenne toute la largeur de la ligne. La première cellule doit donc déborder sur 3 cellules horizontales <CENTER><TABLE width=60% border=1><TR><TD colspan=3>cellule 1</TD> </TR><TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD><TD width=34%>3</TD> </TR></TABLE></CENTER> • Dans le même style, je souhaite que la première colonne prenne toute la hauteur de la colonne. La première cellule doit donc déborder sur 2 cellules <CENTER><TABLE width=60% border=1><TR> <TD width=33% rowspan=2>cellule 1</TD> <TD width=33%>cel 2</TD> <TD width=34%>3</TD></TR> <TR> <TD width=33%>cel 2</TD><TD width=34%>3</TD> </TR> </TABLE></CENTER> • Tester cette instruction <TD colspan=3 align=center bgcolor="#0000FF">

  48. Exemple <HTML> <BODY> <TABLE WIDTH="90%" BORDER="3"> <CAPTION> <B> Types de Données </B> </CAPTION> <TR> <TH WIDTH="20%"> Type </TH> <TH WIDTH="80%"> Informations </TH> </TR> <TR> <TD WIDTH="20%"> Integer </TD> <TD WIDTH="80%" ALIGN="CENTER"> Ce type représente les valeurs comprises entre -32767 et 32768 </TD> </TR> </TABLE> </BODY> </HTML>

  49. Exemple <HTML> <BODY> <TABLE WIDTH="90%" BORDER="3"> <CAPTION> <B> Liste des Enseignants </B> </CAPTION> <TR> <TH WIDTH="20%"> Spécialité </TH> <TH WIDTH="80%"> Nom-Prénom </TH> </TR> <TR> <TD WIDTH="20%"> Informatique </TD> <TD WIDTH="80%" ALIGN="CENTER"> Habib Tounsi </TD> </TR> </TABLE> </BODY> </HTML>

  50. Inclusion d’images, de son et de films • Les images et les séquences vidéo <IMG> : Cette balise est toujours complétée par le nom de la source avec l’un des attributs suivants: • SRC : dans le cas d’une image GIF ou JPG. • DYNSRC : dans le cas d’une séquence vidéo AVI. • Le son (par exemple un fond musical) <BGSOUND> : Cette balise est complétée par les attributs suivants: • SRC : qui indique la source du son WAV. • LOOP : qui indique le nombre de fois que la musique doit être jouée (INFINITE pour que la musique soit joué sans arrêt).

More Related