IN505 Outils Informatiques de LIngnieur

1
IN505Outils Informatiques de LIngénieur

• Technologies Internet

2
Histoire

• 1961 connexion de plusieurs réseaux
  d'ordinateurs.
• fin des années 1960 l'ARPA (Advanced Research
  Project Agency) agence du ministère de la défense
  des USA crée ARPANET (lancé en 1969 et toujours
  en fonctionnement)
• Années 1970 les universités, laboratoires, le
  gouvernement américain sont connectés à ARPAnet.
  Chaque réseau a son langage particulier.-gtles
  réseaux ne peuvent pas communiquer entre eux.
• 1982 TCP/IP (Transmission Control Protocol,
  Internet Protocol)
• IP vient de la couche réseau de ARPANET
• TCP protocole de transport de ARPANET

3
Histoire

• le mot Internet entre dans le langage
• il devient le standard en matière de réseau
• comporte plus de 100 protocoles différents.
• Création du world wide web
• apparition du langage HTML pour rédiger les pages
  web (1989 Tim Berners-Lee du CERN)
• le protocole http (hyperText Transfer Protocol)
  permet de transmettre ces pages
• un programme de navigation client destiné à
  recevoir les données, à les interpréter et à
  afficher les résultat.
• 1993 apparition de Mosaic (Mark Andreesen de
  Urbana Champaign NCSA), la première interface
  graphique pour afficher des documents HTML, son
  fondateur crée ensuite l'entreprise Mosaic
  Communications Corp devenue Netscape (1994).
  Internet Explorer est créé par Microsoft en 1995

4
Présentation d'Internet

• Définition
• En bref, Internet est le réseau mondial d'échange
  d'informations en tout genre...
• Plus précisément, c'est un réseau international
  d'ordinateurs, ou plus précisément encore un
  réseau de réseaux d'ordinateurs, qui communiquent
  entre eux grâce à un protocole d'échange de
  données standard TCP/IP (Transmission Control
  Protocol / Internet Protocol).
• Chacun spécifie les droits d'accès à ses données
  ( rqs Erreur 403 Forbidden / hackers / recherche
  d'extra-terrestres ... )

5
Se connecter à Internet

• Quatre éléments doivent être pris en compte pour
  pouvoir se raccorder à Internet
• un ordinateur suffisamment puissant,
• un modem ou un modem câble et/ou une carte
  réseau,
• un compte ouvert auprès d'un fournisseur d'accès
  Internet,
• des logiciels spécifiques de consultation des
  services Internet (navigateur,messagerie...).
• En Général, un particulier accède à Internet via
  un prestataire de services, appelé fournisseur
  d'accès, ("provider").Ce dernier connecte
  l'ordinateur de chaque utilisateur sur le
  réseau.

6
Le service Web

• Il est impératif de différencier Internet, et le
  Web.Ces deux mots sont très proches dans
  l'esprit de chacun, mais correspondent à deux
  notions très différentes.Internet est un "réseau
  physique" (des ordinateurs reliés par des
  câbles).Le "Web" (la toile d'araignée) est une
  application qui utilise le réseau Internet, et
  rend possible l'échange d'informations sur ce
  réseau, notamment grâce à l'utilisation des
  navigateurs, du langage HTML et donc du système
  de navigation hypertexte.

7
Les hébergeurs / serveurs web

• Un hébergeur, ou serveur web, est simplement un
  ordinateur dédié à la diffusion de l'information.
• Cet ordinateur est d'un côté connecté à Internet,
  et de l'autre, à une base de données spécifique.
• Lorsqu'un utilisateur du réseau, ou client, tape
  un adresse web dans son navigateur, pour
  visualiser une page web, c'est en fait son
  navigateur qui envoie une requête au serveur, qui
  lui retourne la page correspondante (après
  certaines vérifications...).

8
Un serveur Web

• Un service Web est un logiciel, dont le rôle est
  d'écouter des requêtes d'un type particulier
  (requête HTTP) provenant de clients que l'on
  appelle navigateurs.
• Les navigateurs sont bien connus des
  utilisateurs, et les plus répandus sont Netscape
  Navigator, Internet Explorer, Mozila...

9
IP et DNS

• Le service web doit être exécuté sur une machine
  qui possède une identification unique sous la
  forme d'un numéro IP (Internet Protocol), afin
  qu'un navigateur puisse localiser le service web
  sans ambiguité.
• Ce numéro (ou adresse IP) est codé sur quatre
  octets, comme par exemple 192.67.78.90. Bien que
  seul le numéro IP soit nécessaire, la machine
  possède généralement un nom enregistré dans un
  DNS (Domain Name System), qui permet de retrouver
  l'adresse IP à partir du nom.
• Pour l'utilisateur humain, il est en effet plus
  simple de se souvenir d'un nom comme www.abc.fr
  que de 192.67.78.90.

10
HTTP Hyper Text Transfer Protocole

• Le protocole HTTP (Hyper Text Transfer Protocole)
  est assez simple il permet au navigateur de
  demander a tout service web de lui retourner un
  fichier stocké sur le serveur. La plupart du
  temps, ces fichiers sont au format HTML (Hyper
  Text Format Language).
• Ce format consiste en du texte simple agrémenté
  de balises de mises en page qui permettent au
  navigateur de présenter le texte sous une forme
  plus agréable à lire. http//192.67.78.90 ou
  http//www.abc.fr

11
Architecture client serveur
12
Notion d'URL

• L'URL (Unique Ressource Location) est un moyen de
  désignation universel de l'emplacement de
  certains fichiers. Repensez à l'utilisation que
  vous faîtes de votre navigateur quand vous tapez
  l'adresse d'un site web , et vous reconnaitrez
  dans ces adresses des URL.
• Une URL consiste en une chaîne de caractères qui
  prend la forme suivante protocole//machine/che
  min_du_fichier
• protocole est souvent ftp quand le fichier se
  trouve sur un serveur ftp, ou http quand le
  fichier se trouve sur une serveur web. machine
  est le nom complet de la machine ou son adresse
  IP

13
Recherche sur internet

• Présentation
• Les annuaires de recherche pour les recherches
  thématiquesrépertoires de sites classés par
  rubrique et indexés par des professionnels.
• Les moteurs de recherche pour les recherches à
  partir d'une liste de mots clésrobots qui
  collectent les adresses des sites et indexent
  automatiquement l'ensemble des pages Web.
• Principes pour la liste des mots clés
• séparer les mots clés par des espaces
• pour faire une recherche sur un groupe de mots,
  utiliser "les guillemets"
• une minuscule peut être transformée en majuscule,
  mais pas l'inverse
• ajouter un devant un mot assure la présence du
  mot
• ajouter un - devant un mot exclut la présence du
  mot
• ajouter un entre 2 mots indique que les mots
  doivent être proches (moins de 10 mots entre les
  2

14
Autres services Internet

• ftp (transfert de fichiers entre ordinateurs
  reliés à internet)
• smtp (échange de couriers électroniques)
• nntp (forums de news)
• telnet (connexion à d'autres ordinateurs)
• mailto (lancer un agent de mail)
• about (pour distribuer certains types
  d'informations)
• javascript (pour exécuter un script téléchargé
  par la page).

15
Language HTML

• HTML (HyperText Markup Language) permet de relier
  par des liens cliquables des éléments
  d'information
• ce n'est pas un langage de programmation, c'est
  un langage de balisage qui permet d'indiquer la
  mise en forme de la page
• c'est un langage de balisage, c'est à dire une
  application de SGML (Standard Generalized Markup
  Language) et à présent une application XML
  (Extended Markup Language)
• HTML est interprété par le navigateur ou browser.
  

16
Les pages web et l'hypertexte

• Les écrans ou "pages" du world wide web proposent
  des
• textes
• tableaux
• images
• vidéos
• sons
• éléments d'interfaces (boutons, boîtes de
  dialogue, listes).
• Il est possible de placer des liens sur ces
  objets. -gt connexion à d'autres pages.
  (HYPERTEXTE)

17
Élément HTML

• la syntaxe est la suivante ltNOM_ELEMENTgt texte
  lt/NOM_ELEMENTgt
• pas sensible à la casse ltELEMENTgt ltelementgt
  ltElementgt lteLemenTgt (la norme recommande
  l'utilisation des majuscules pour les éléments)
  
• ils peuvent comporter des attributs nomAttribut
  " valeur ", l'ordre dans lequel ceux-ci sont
  placés n'a pas d'importance, ex ltIMG
  alt"photo de mes vacances" src"photos/vacances/m
  er.gif"gt est équivalent à ltIMG
  src"photos/vacances/mer.gif" alt"photo de mes
  vacances" gt

18
Structure dune page HTML

• lthtmlgtltheadgtlttitlegtMon titrelt/titlegtlt/headgt
  ltbodygtVoici mon premier document!lt/bodygtlt/html
  gt

19
Exemple

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http//www.w3.org/TR/html4/strict.dtd"gt
• ltHTMLgt
• ltHEADgt
• ltTITLEgtTitre de la pagelt/TITLEgt
• ltMETA name"author" content"Mon nom"gt
• ltMETA name"keywords" content"Mes mots cles"gt
• ltMETA name"description" content"Description de
  ma page"gt
• lt/HEADgt
• ltBODYgt corps du texte lt/BODYgt
• ltADDRESSgt adresse auteur lt/ADDRESSgt
• lt/HTMLgt

20
paragraphes

• syntaxe ltPgt texte lt/Pgt
• l'élément lt/Pgt est optionnel.
• Découpe le texte en paragraphes, c'est
  l'équivalent d'un retour à la ligne suivi d'une
  ligne vide.

21
En-tête, sous-titre

• ltHngt avec n 1..6
• permet de définir des sections dans le document
  
• six tailles possibles du plus grand ltH1gt au plus
  petit ltH6gt
• une ligne est sautée avant et après la section
• avantage par rapport à une image chargement
  immédiat
• possibilité d'alignement ltHn align"center"gt
• attribut de style align déclassé.

22
Traits

• ltHRgt trace un trait dans la fenêtre.
• il est possible de définir
• la longueur du trait (width)
• la largeur du trait (size)
• sa position (left, right, center avec align)
• et un effet de relief (trait non ombré avec
  noshade).
• ltHR width"40" align"left"gt

23
Définir une police

• pour une portion du documentLes tailles,
  couleurs et noms des polices pour une portion du
  document peuvent être définis pas l'élément FONT
• syntaxe ltFONT size"n" color"c"
  face"police1,police2,police3"gt texte lt/FONTgt
• pour tout le document
• syntaxe ltBASEFONT size"n" color"c"
  face"police1,police2,police3"gt dans l'en-tête
  HEAD ... /HEAD
• Définit la police standard, sa taille et sa
  couleur pour tout le reste du document.
• Quand un élément ltFONTgt est placé, il est utilisé
  jusqu'à lt/FONTgt et ensuite ce sont les
  définitions de ltBASEFONTgt qui sont reprises.

24
Les Listes

• ltDLgt Definition List lt/DLgt
• ltDTgt Definition Term lt/DTgt (optionnel)
• ltDDgt Definition Description lt/DDgt
  (optionnel)
• ltULgt unordered list lt/ULgt
• ltLHgt list header lt/LHgt (optionnel)
• ltLIgt list item lt/LIgt (optionnel)

25
Tableau

• ltTABLE frame"border" border"5"gt
• Structure
• ltTABLEgt
• ltTHEADgt
• ltTRgt...lt/TRgt
• ...
• ltTRgt...lt/TRgt
• lt/THEADgt
• ltTBODYgt
• ltTRgt...lt/TRgt
• ...
• lt TRgt...lt/TRgt
• lt/TBODYgt
• ltTFOOTgt
• ltTRgt...lt/TRgt
• ...
• ltTRgt...lt/TRgt
• lt/TFOOTgt
• lt/TABLEgt

26

• ltTABLE border"5" width"70"gt
• ltTHEAD align"right" style"font-familymon
  aco colorblue"gt
• ltTRgt
• ltTDgten tete 1.1lt/TDgt
• ltTDgten tete 1.2lt/TDgt
• ltTDgten tete 1.3lt/TDgt
• lt/TRgt
• lt/THEADgt
• ltTBODY align"center" style"font-familycourie
  r"gt
• ltTRgt
• ltTDgtcorps 1.1lt/TDgt
• ltTDgtcorps 1.2lt/TDgt
• ltTDgtcorps 1.3lt/TDgt
• lt/TRgt
• ltTRgt
• ltTDgtcorps 2.1lt/TDgt
• ltTDgtcorps 2.2lt/TDgt
• ltTDgtcorps 2.3lt/TDgt
• lt/TRgt

27
Liens

• Syntaxe
• ltA href"lien"gt texte du lienlt/Agt
• ltA href"http//www.altavista.com"gtaltavistalt/Agt
• Accès direct à certaines parties de la page
  courante
• ltA href "label"gttexte referencelt/Agt
• Référence à un label d'une autre page
• ltA href "nom_fichier.htmllabel"gttexte reference
  dans une autre pagelt/Agt
• Élément mail
• ltA href"mailtonom_at_adresse"gtcontactez-moi par
  e-maillt/Agt

28
Images
Système de coordonnées

• Syntaxe simple
• ltIMG hspacex vspacey src"fichier_image"gt
• Taille des écrans standard 640x480 et 800x600
• Préférence
• -gt maximum 300x300 pour les photographies
• -gt maximum 100 pour les boutons
• Image cliquable
• Sol ltA HREF"fichier.html"gt et lt/Agt est un lien
  (encadré en couleur)

100
29
Cadres
30
Cadres

• Un lien d'un cadre peut modifier le contenu d'un
  autre cadre, utilité
• table des matières
• bandeau de boutons
• logo du site permanent en haut de la page.

31
Cadres
32
Cadres
33
Cadres

• Afficher dans le cadre souhaité
• ltA HREF"nom.html" TARGET"label_cadre"/_blank/_se
  lf/_top/_parentgt

34
Formulaire

• Les formulaires vont nous permettre de
  sophistiquer la communication avec l'utilisateur
  en augmentant l'interactivité.  En HTML, on peut
  créer un formulaire à l'aide du conteneur ltFROMgt
  ... lt/FORMgt.

35

• Plusieurs boites de saisie sont à notre
  disposition.
• ltInput typegt
• TEXT
• permet de créer une boite de saisie pour une
  seule ligne de texte.
• RADIO
• permet de créer des bouton de type radio (un seul
  choix possible par ensemble de boutons).
• CHECKBOX
• permet de créer des cases à cocher (plusieurs
  choix possibles).
• SUBMIT
• permet de créer un bouton qui enverra les données
  saisies à un serveur.
• RESET
• permet de créer un bouton qui effacera le
  formulaire (état original)
• BUTTON
• permet de créer un bouton "programmable".

36
Formulaire

• ltSELECTgt et ltOPTIONgt
• permettent de créer un menu déroulant.
• ltTEXTAREAgt
• permet de créer un case de saisie de texte
  comprenant plusieurs lignes

37
Récapitulation des Balise HTML dun formulaire

• ltinput typebuttongt
• ltinput typecheckboxgt ----------Case à cocher
• ltinput typefilegt ------------------Choix d'un
  fichier à transmettre
• ltinput typehiddengt --------------Champ caché
• ltinput typepasswordgt ---------Saisie d'un champ
  non visible sur l'écran
• ltinput typeradiogt----------------Bouton radio
• ltinput typeresetgt-----------------Bouton RESET
• ltinput typesubmitgt---------------Bouton SUBMIT
• ltinput typetextgt -------------------Saisie d'une
  ligne de texte
• ltselectgt...lt/selectgt-------------Menu déroulant
  (Sélection)
• lttextareagt...lt/textareagt---------- Saisie de
  plusieurs lignes de texte
• .

38
Propriétés communes des éléments d'un formulaire

• form
• Cette propriété désigne le formulaire qui
  contient l'élément en question.
• name
• Le nom de la balise HTML.
• type
• Le type de l'élément du formulaire.
• value
• La valeur (contenu) de l'élément du formulaire

39
(No Transcript)
40
(No Transcript)
41
(No Transcript)