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

Techniques Internet de Base 2006-2007 Licence 2 (Info, Maths, PC/PA) Université Jean Monnet Ruggero G. PENSA

Présentations similaires


Présentation au sujet: "Techniques Internet de Base 2006-2007 Licence 2 (Info, Maths, PC/PA) Université Jean Monnet Ruggero G. PENSA"— Transcription de la présentation:

1 Techniques Internet de Base Licence 2 (Info, Maths, PC/PA) Université Jean Monnet Ruggero G. PENSA

2 Introduction

3 Internet Internet (Inter Network) est un réseau informatique à l'échelle du monde, reposant sur le protocole de communication IP (Internet Protocol), et qui rend accessible au public des services comme le courrier électronique et le web.

4 Histoire d'Internet AnnéeFait 1962Début de la recherche par ARPA, projet du ministère de la Défense américain 1969Connexion des premiers ordinateurs entre 4 universités américaines ordinateurs sont reliés sur ARPANET 1981Apparition du Minitel en France 1982Définition du protocole TCP/IP et du mot "Internet" ordinateurs connectés ordinateurs connectés ordinateurs connectés 1991annonce publique du World Wide Web ordinateurs connectés 1993Navigateur Web NCSA Mosaic ordinateurs connectés utilisateurs dans le monde utilisateurs dans le monde

5 Protocoles IP (Internet Protocol) : définit le mode d'échange élémentaire entre les ordinateurs en leur donnant une adresse unique sur le réseau. TCP : responsable de l'établissement de la connexion et du contrôle de la transmission. HTTP (HyperText Transfer Protocol) FTP (File Transfer Protocol) SMTP, POP3, IMAP pour le courrier électronique IRC (Internet Relay Chat) NNTP (Network News Transfert Protocol) SSL ou TLS : protocoles de transaction sécurisée P2P (Peer to Peer) UDP : DNS (Domain Name System) : système de résolution de noms Internet. ICMP (Internet Control Message Protocol)

6 World Wide Web Le World Wide Web, communément appelé le Web, parfois la Toile, littéralement la « toile (d'araignée) mondiale », est un système hypertexte public fonctionnant sur Internet et qui permet de consulter, avec un navigateur Web, des pages Web mises en ligne dans des sites Web. L'image de la toile vient des hyperliens qui lient les pages Web entre elles.

7 Hypertexte Système hypertexte système contenant des documents liés entre eux par des hyperliens permettant de passer automatiquement du document consulté à un autre document lié. Un document hypertexte est donc un document qui contient des hyperliens Hyperlien ou lien hypertexte ou lien référence dans un système hypertexte permettant de passer automatiquement d'un document consulté à un document lié.

8 Page web text formulaires images...

9 Site Web...

10 Communication Client-Serveur Internet Navigateur Web Serveur Web Protocole HTTP

11 HyperText Transfer Protocol Le Client demande une page web en spécifiant l'URL (méthode GET) Le serveur envoie le statut (OK, Page inexistante,...) et est la page web

12 URL (Uniform Resource Locator) Spécifie "l'adresse" d'une page web protocole adresse du serveur web chemin d'accès à la page web page web

13 Communication Client-Serveur Internet Navigateur Web Serveur Web GET

14 Communication Client-Serveur Internet Navigateur Web Serveur Web OK...

15 Qu'est-ce qu'il y a derrière une page web Les éléments de la page (texte, images, media, etc…) doivent être présentés à tout le monde de la même manière Le navigateur à besoin de directives univoques pour la mise en forme des éléments de la page. Le langage HTML

16

17 HTML (HyperText Markup Language) Version actuelle : 4.01 Développé à la fin des année 80 au CERN de Genève Ce n'est pas un langage de programmation mais un langage de marquage Permet de spécifier la position du texte et des images, les polices des caractères, les couleurs… …et le contenu!

18 Qu'est-ce qu'il y a à l'autre bout du fil Le serveur HTTP C'est un logiciel servant des requêtes respectant le protocole de communication client-serveur HTTP Il réside sur un ordinateur appellé Serveur Web Le plus utilisé : Apache Fonctionnement Il reçoit les requêtes envoyées par le navigateur distant Il cherche la ressource demandée sur le disque dur du serveur Web Si la ressource existe, il l'envoie au navigateur web distant, sinon il envoie un message d'erreur

19 Les ressources Une page web est constituée en général d'une ou plusieurs ressources Les ressources sont en général des documents (fichiers) écrits en langage HTML Autres types de ressources Images Flux audio/vidéo Programmes ou scripts Autres documents qui peuvent être téléchargés …

20 Les scripts Petits programmes qui servent à contrôler les données saisies dans des formulaires HTML, ou à interagir avec le document HTML Langage plus commun : JavaScript Le code JavaScript peut être intégré directement au sein des pages Web Il est exécuté sur le poste client Le navigateur Web prend en charge l'exécution des scripts Permettent d'avoir des pages web dynamiques

21 Sites web dynamiques Le page web écrites en langage HTML sont statiques Dans un site web statique la forme et le contenu de la page sont définis par l'auteur du site Un site web dynamique est un site web dont les pages peuvent être générées dynamiquement, soit à la demande Le contenu peut être obtenu en combinant l'utilisation d'un langage de scripts ou de programmation et une base de données Très utilisés : PHP et MySQL

22 PHP et MySQL PHP (Hypertext Preprocessor) Langage de script interprété pour la réalisation de pages web dynamiques et d'applications côté serveur Les programmes sont exécutés sur le serveur, et peuvent accéder à des ressources du serveur Web (fichiers, autres programmes, bases de données) MySQL MySQL est un gestionnaire de bases de données relationnelles (SGBD relationnel) Une base de données est un ensemble structuré et organisé permettant le stockage de grandes quantités d'informations afin d'en faciliter l'exploitation (ajout, mise à jour, recherche de données)

23 Exemple de site web dynamique Le forum de discussion L'utilisateur lit les interventions (post) des autres utilisateurs dans des discussions (thread) Il peut ajouter une intervention pertinente à l'argument de la discussion (topic) Il peut ajouter une nouvelle discussion Le forum est mise à jour instantanément avec les nouvelles discussions et interventions Certains utilisateurs (modérateurs) peuvent supprimer des discussions ou des interventions qui violent certains règles (netiquette)

24 Forum - fonctionnement Internet Nouvelle intervention mise à jour Serveur MySQL Serveur Web + Module PHP

25 Forum - fonctionnement Internet Lecture discussion recherche Serveur MySQL Serveur Web + Module PHP reponse page discussion

26 PHP - Fonctionnement Programme PHP Document HTML

27 JavaScript vs. PHP JavaScript Exécuté sur le client par le navigateur Web Il ne permet pas d'accéder aux fichiers et à la mémoire du client Il est incorporé dans le code HTML Utilisé essentiellement pour le contrôle des formulaires PHP Exécuté sur le serveur par le module PHP Il peut accéder aux fichiers du serveur Le navigateur ne peut pas accéder au code PHP Utilisé essentiellement pour la production de pages web dynamiques

28 Cours en trois parties HTML et Javascript Pages web statiques Gestion de l'input utilisateur Contrôle des formulaires PHP Programmes en PHP Gestion des sessions PHP et MySQL Syntaxe SQL Interface PHP et MySQL

29 La syntaxe HTML

30 La Syntaxe HTML 4.01 Décrite par le consortium W3C Cinq éléments entités : nom symboliques ou numériques attribués aux caractères spéciaux commentaires : portions de texte ignoré par le navigateur éléments : représentent la structure ou indiquent le comportement de certaines parties du document HTML attributs : déterminent les propriétés des éléments particularité SGML : non étudiées ici

31 Les entités des caractères Délimitées par & et ; à : à é : é É : É è : è ê : ê ë : ë ç : ç œ : œ

32 Les entités des caractères Délimitées par & et ; : € & : & < : < > : > : espace insécable © : © ® : ®...

33 Commentaires Ils doivent être placée entre deux balises spéciales Exemple Attention Pas d'espace entre les caractères faisant partie des deux balises

34 Eléments conteneurs Délimités par deux balises Une balise d'ouverture (initiale) Exemple : Une balise de fermeture (ou balise terminale) Exemple : Exemple d'élément Ceci est un titre Pas de différences majuscules/minuscules équivaut à

35 Eléments marqueurs Elément qui ne comprend pas de balise terminale Exemple :

36 Attributs A chaque élément on peut associer une ou plusieurs propriétés Chaque propriété est décrite par un couple attribut=valeur Chaque couple est séparé par un espace Exemple... Il vaut mieux encadrer les valeurs des attributs par des guimets Home Page

37 Structure d'un document HTML Trois parties Déclaration du type de document : sert à identifier la version HTML utilisée (pas nécessaire) Entête : contient le titre et les méta- informations (mot clés, etc.) Corps : contient tous les éléments qui vont concourir à l'affichage de la page dans la fenêtre du navigateur

38 Type de document Tourjour la même

39 L'élément HTML L'élément spéciale HTML délimite l'ensemble du document HTML, exception faite pour le type Une page web devrait toujours contenir l'élément HTML Exemple... la page web...

40 Entête Délimitée par... Eléments META : marqueur contenant les méta-informations (auteur, description, mot clés...) Exemples TITLE : titre de la page, affiché dans la barre de titre du navigateur Exemple Page d'exemple

41 Exemple d'entête Université - Faculté de Sciences

42 Corps Délimité par... Contient la présentation de la page web Dispose de plusieurs attribut qui s'appliquent à l'ensemble du document BACKGROUND="fichier" : permet de décorer l'arrière-plan avec un motif (image) TEXT="couleur" : permet de définir la couleur d'affichage du texte LINK, VLINK, ALINK="couleur" définissent la couleur d'affichage des liens respectivement non visités, visités et sélectionnés. Autres attributs (on les verra plus tard)

43 Représentation des couleurs Deux systèmes : triplets RGB et noms des couleurs Triplet en Hexadécimal #XXYYZZ XX : composante Rouge (0-255 en Hexadécimal) YY : composante Verte (0-255 en Hexadécimal) ZZ : composante Bleue (0-255 en Hexadécimal) Exemples : Noir : # Rouge : #FF0000 Bleu : #0000FF Blanc : # Gris : # Noms : on utilise des noms prédéfinis (en anglais)

44 Les 16 couleurs usuelles NomValeur RGB Black"#000000" Silver"#C0C0C0" Gray"#808080" White"#FFFFFF" Maroon"#800000" Red"#FF0000" Purple"#800080" Fuchsia"#FF00FF" Green"#008000" Lime"#00FF00" Olive"#808000" Yellow"#FFFF00" Navy"#000080" Blue"#0000F0" Teal"#008080" Aqua"#00FFFF"

45 Exemple de corps Ceci est un exemple de page web avec un peu de texte.

46 Une première page web Ma première page Web Ma première page Web Ceci est un exemple de page web avec un peu de texte.

47 Le texte avec HTML

48 Les séparateurs Les caractères "espace", "tabulation" et "retour à la ligne" sont considéré comme un seul espace Plusieurs espaces consécutifs : seul le premier est pris en compte Pour afficher plusieurs espaces il faut utiliser l'entité caractère "espace insécable"

49 Exemples Le texte : Dans ce texte il y a plusieurs espaces. donne le texte suivant : Dans ce texte il y a plusieurs espaces. Le texte : Dans ce texte aussi il y a plusieurs espaces. donne le texte suivant : Dans ce texte aussi il y a plusieurs espaces.

50 Le paragraphe Pour passer à un nouveau paragraphe, il ne suffit pas de taper sur la touche Pour délimiter un paragraphe on utilise l'élément... Exemple Ceci est un paragraphe Ceci est un autre paragraphe Pour forcer un retour au début de la ligne suivante, à l'intérieur du même paragraphe, on insère un marqueur Exemple Ceci est un paragraphe et ceci est toujours le même paragraphe.

51 Paragraphe : attribut ALIGN ALIGN sert à spécifier l'alignement du paragraphe Valeurs : center : alignement au centre left : alignement à gauche right : alignement à droite justify : alignement sur les deux marges (justifié)

52 Alignement : exemples... Ceci est un paragraphe aligné à gauche. Ceci est un paragraphe aligné à gauche. Ceci est un paragraphe aligné au centre. Ceci est un paragraphe aligné au centre. Ceci est un paragraphe aligné à droite. Ceci est un paragraphe aligné à droite. Ceci est un paragraphe justifié. Ceci est un paragraphe justifié. Ceci est un paragraphe justifié....

53 Enrichissements Modifications d'apparence d'un texte intervenant sans changer ni le type de police utilisée ni sa taille, ni sa forme Exemples : gras, italique, etc. Deux types de formatage logique : exprime le style (citation, code, etc.) physique : indique le type (gras, italique, etc.)

54 Formatage : éléments Formatage logique EM : pour marquer l'insistance STRONG : autre type d'insistance CITE : citations brèves CODE : extraits de programmes Formatage physique B : gras I : italique TT : teletype BIG : gros (même police) SMALL : petit (même police)

55 Formatage : exemples... Exemple d' utilisation de l'élément EM. Exemple d' utilisation de l'élément STRONG. Exemple d' utilisation de l'élément CITE. Exemple d' utilisation de l'élément CODE. Exemple d' utilisation de l'élément B. Exemple d' utilisation de l'élément I. Exemple d' utilisation de l'élément TT. Exemple d' utilisation de l'élément BIG. Exemple d' utilisation de l'élément SMALL....

56 Les titres et sous-titres Il s'agit de titres qui seront affichés dans la fenêtre du navigateur (différent de ) Six niveaux de titres, d'importance logique décroissante :,,... Exemples Voici un titre de niveau 1 Voici un titre de niveau 2 Voici un titre de niveau 3 Voici un titre de niveau 4 Voici un titre de niveau 5 Voici un titre de niveau 6

57 Les polices de caractères Pour agir directement sur le type de caractère, sa taille et sa couleur on utilise la balise... Attributs FACE : donne une liste de noms de polices. La police retenue pour l'affichage est la première reconnue par le navigateur SIZE : modifie la taille de la police courante de façon relative ou absolue Absolue : de "1" à "7" Relative : "+1", "+2", "-2" etc. COLOR : détermine la couleur des caractères

58 Les polices : exemples... Voici du texte affiché à l'aide du conteneur <FONT>....

59 Les feuilles de style (CSS) Permettent une mise en forme plus cohérente du document Pas traité ici Un petit aide à l'utilisation des feuilles de style


Télécharger ppt "Techniques Internet de Base 2006-2007 Licence 2 (Info, Maths, PC/PA) Université Jean Monnet Ruggero G. PENSA"

Présentations similaires


Annonces Google