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

Présentations similaires


Présentation au sujet: "Techniques Internet de Base"— Transcription de la présentation:

1 Techniques Internet de Base 2006-2007
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ée Fait 1962
Début de la recherche par ARPA, projet du ministère de la Défense américain 1969 Connexion des premiers ordinateurs entre 4 universités américaines 1971 23 ordinateurs sont reliés sur ARPANET 1981 Apparition du Minitel en France 1982 Définition du protocole TCP/IP et du mot "Internet" 1984 1000 ordinateurs connectés 1987 ordinateurs connectés 1989 ordinateurs connectés 1991 annonce publique du World Wide Web 1992 ordinateurs connectés 1993 Navigateur Web NCSA Mosaic 1996 ordinateurs connectés 1999 utilisateurs dans le monde 2005 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 images ... formulaires

9 Site Web ...

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

11 Protocole HTTP 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 chemin d'accès à la page web protocole page web adresse du serveur web

13 Communication Client-Serveur
Serveur Web GET Navigateur Web Internet

14 Communication Client-Serveur
OK <HTML>... Serveur Web Navigateur Web Internet

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 Le langage HTML

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) MySQL
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
Serveur Web + Module PHP Nouvelle intervention Internet mise à jour Serveur MySQL

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

26 PHP - Fonctionnement Programme PHP Document HTML

27 JavaScript vs. PHP JavaScript PHP
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 PHP PHP et MySQL
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 <!-- et --> Exemple <!-- Je peux écrire ici tout ce que je veux. --> Attention Pas d'espace entre les caractères faisant partie des deux balises

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

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

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 <ELEMENT ATTRIBUT1=valeurX ATTRIBUT2=valeurY>...</ELEMENT> Il vaut mieux encadrer les valeurs des attributs par des guimets <A HREF="homepage.html">Home Page</A>

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 o

38 Type de document Tourjour la même
<!DOCTYPE HTML PUBLIC "-//W3C//DD HTML 4.01 Transitional//EN"

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 <!DOCTYPE ....> <HTML> ... la page web... </HTML>

40 Entête Délimitée par <HEAD> ... </HEAD> Eléments
META : marqueur contenant les méta-informations (auteur, description, mot clés...) Exemples <META NAME="description" CONTENT="Description de la page."> <META NAME="keywords" CONTENT="exemple, étudiants, cours"> TITLE : titre de la page, affiché dans la barre de titre du navigateur Exemple <TITLE>Page d'exemple</TITLE>

41 Exemple d'entête <HTML> <HEAD>
<META NAME="author" CONTENT="Pierre Dupont, Danielle Martin"> <META NAME="description" CONTENT="Site de la Fac de sciences."> <META NAME="keywords" CONTENT="université, sciences, cours"> <TITLE>Université - Faculté de Sciences</TITLE> </HEAD> </HTML>

42 Corps Délimité par <BODY> ... </BODY>
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 : #000000 Rouge : #FF0000 Bleu : #0000FF Blanc : #000000 Gris : #808080 Noms : on utilise des noms prédéfinis (en anglais)

44 Les 16 couleurs usuelles Black "#000000" Silver "#C0C0C0" Gray
Nom Valeur 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 <HTML>
<BODY BACKGROUND="image.jpg" TEXT="blue" LINK="red" VLINK="fuchsia"> Ceci est un exemple de page web avec un peu de texte. </BODY> </HTML>

46 Une première page web <!DOCTYPE HTML PUBLIC "-//W3C//DD HTML 4.01 Transitional//EN" <HTML> <HEAD> <META NAME="author" CONTENT="Ruggero G. Pensa"> <TITLE>Ma première page Web</TITLE> </HEAD> <BODY TEXT="blue"> <H1>Ma première page Web</H1> Ceci est un exemple de page web avec un peu de texte. </BODY> </HTML>

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 <Entrée> Pour délimiter un paragraphe on utilise l'élément <P> ... </P> Exemple <P>Ceci est un paragraphe</P> <P>Ceci est un autre paragraphe</P> Pour forcer un retour au début de la ligne suivante, à l'intérieur du même paragraphe, on insère un marqueur <BR> Exemple <P>Ceci est un paragraphe<BR>et ceci est toujours le même paragraphe.</P>

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 ... <P ALIGN="left">Ceci est un paragraphe aligné à gauche. Ceci est un paragraphe aligné à gauche.</P> <P ALIGN="center">Ceci est un paragraphe aligné au centre. Ceci est un paragraphe aligné au centre.</P> <P ALIGN="right">Ceci est un paragraphe aligné à droite. Ceci est un paragraphe aligné à droite.</P> <P ALIGN="justify">Ceci est un paragraphe justifié. Ceci est un paragraphe justifié. Ceci est un paragraphe justifié.</P>

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 Formatage physique
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 ... <P>Exemple d'<EM>utilisation de l'élément EM</EM>.</P> <P>Exemple d'<STRONG>utilisation de l'élément STRONG</STRONG>.</P> <P>Exemple d'<CITE>utilisation de l'élément CITE</CITE>.</P> <P>Exemple d'<CODE>utilisation de l'élément CODE</CODE>.</P> <P>Exemple d'<B>utilisation de l'élément B</B>.</P> <P>Exemple d'<I>utilisation de l'élément I</I>.</P> <P>Exemple d'<TT>utilisation de l'élément TT</TT>.</P> <P>Exemple d'<BIG>utilisation de l'élément BIG</BIG>.</P> <P>Exemple d'<SMALL>utilisation de l'élément SMALL</SMALL>.</P>

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

57 Les polices de caractères
Pour agir directement sur le type de caractère, sa taille et sa couleur on utilise la balise <FONT>...</FONT> 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 ... <P><FONT FACE="comic sans MS,arial" SIZE="4" COLOR="red">Voici du texte affiché à l'aide du conteneur <FONT>.</FONT></P> <P><FONT FACE="verdana,arial" SIZE="+3" COLOR="blue">Voici du texte affiché à l'aide du conteneur <FONT>.</FONT></P> <P><FONT FACE="courier new,arial" SIZE="-1" COLOR="green">Voici du texte affiché à l'aide du conteneur <FONT>.</FONT></P>

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"

Présentations similaires


Annonces Google