Internet Les bases, HTML, CSS, JavaScript Djamel SERIAI

1. Internet Les bases, HTML, CSS, JavaScript Djamel SERIAI

2. Objectifs du cours • Les bases technologiques d’Internet • Les origines, les bases • Les aspects matériels et logiciels • Le langage HTML de A à Z • Les bases du langage HTML • Les concepts avancés du langage HTML • Les feuilles de Styles • Structure et syntaxe • Utilisation des feuilles de styles • Le langage JavaScript • Concepts et Syntaxe du langage • Exemples pratiques

3. Organisation du cours • Organisation du cours Les Bases + HTML HTML HTML + CSS Applettes + JavaScript CSS + Applettes JavaScript JavaScript Java- Script 28/03 31/03 04/04 11/04 11/04 Cours TP

4. Partie I : Internet-Les bases

5. QU'EST-CE QU'INTERNET ? (1) • Internet : C’est quoi ? • Est un réseau de réseaux • Est l'interconnexion de milliers de réseaux locaux d'entreprises ou d'organismes. • Il s'appuie sur un ensemble de protocoles de communication (matériels et logiciels) • Connu sous le sigle TCP/IP (Transmission Control Protocol/Internet Protocol) • Basé sur la commutation de paquets (datagrammes) • Des centaines d'autres réseaux, réseaux locaux et même des ordinateurs isolés peuvent s'y connecter • Chaque ordinateur connecté à INTERNET est identifié par son numéro IP • La partie française d'INTERNET est RENATER, le réseau de la recherche, ouvert en 1992.

6. QU'EST-CE QU'INTERNET ? (2) • HISTORIQUE D'INTERNET • Internet tire ses origines d'ARPANET, réseau militaire Américain créé par la DARPA (Defense Advanced Research Projects Agency) • Dans les années 60-70 pour que les liaisons entre bases puissent être maintenues en cas de guerre nucléaire • Le réseau ARPAnet a été scindé en deux pour donner naissance à: • Milnet, réseau militaire • NSFnet (National Science Foundation network), réseau de la recherche • Depuis, des centaines d'ordinateurs de par le monde ont été reliés • Aujourd'hui, pratiquement tous les pays sont connectés à Internet, et le nombre d'internautes double tous les 6 mois.

7. Architecture de l'Internet et accès (1) •  Internet :architecture • Le réseaux Internet est composé de réseaux TCP/IP • Ces réseaux sont la propriété d'opérateurs Internet ou bien d'opérateurs de télécommunication qui structurent une partie de leur lignes de transmission (en fibre optique le plus souvent) sous forme de liens TCP/IP. • Ces réseaux sont interconnectés entre eux à la manière des réseaux téléphoniques internationaux

8. Architecture de l'Internet et accès (2) • Internet : accès • La bande passante TCP/IP brute crée est revendue • A des entreprises et administrations sous formes de liaisons spécialisée fixes à l'Internet • Via des distributeurs : les Internet Services Providers ou Access Providers • Distribuent cette bande passante à des personnes physiques à travers des batteries de modems reliées à des concentrateurs, eux même reliés à l'Internet. • Parmi les ISP les plus connus : AOL, MSN (Microsoft) et Wanadoo (France Télécom). • Le débit effectif de la connexion est fonction du point le plus lent traversé (modem, réseau du fournisseur d'accès, "internet ", serveur, etc.)

9. Internet : Aspects matériels et logiciels (1) • Aspects matériels • Câbles et prises • Il existe plusieurs moyens de se connecter à l'Internet : • De manière permanente à travers un autre réseau (un réseau local comme Ethernet) • Temporairement à travers le réseau téléphonique via un modem. • Modems  • Les modems (MODulateurs / DEModulateurs) • sont des équipements qui transforment les signaux numériques informatiques en signaux analogiques téléphoniques (et réciproquement) • Permettent d'utiliser le téléphone pour relier deux ordinateurs

10. Internet : Aspects matériels et logiciels (2) • Aspects matériels • Réseau • Un réseau est un ensemble de matériels électroniques interconnectés. • Les extrémités des connexions sont désignées par le terme de nœud. Les nœuds (matériels) peuvent être: • Ordinateurs • Serveurs • Stations de Travail • Terminaux passifs • Imprimantes • Scanners • Modems • Commutateurs Téléphoniques (Standards) • Capteurs, Palpeurs, Détecteur • Etc...

11. Internet : Aspects matériels et logiciels (3) • Aspects matériels • Réseau • Connectique • Pour connecter les appareils entre eux, on utilise généralement des câbles et des équipements spécialisés, tels que des hubs, des switches ou des routeurs. • Appareils de connectique • Hubs (Concentrateurs) • Servent à relier entre eux toutes les parties d'un même réseau physique, généralement tous les ordinateurs sont reliés à un Hub, sauf dans le cas d'un câblage coaxial où le Hub est inutile. • Lorsqu'une information arrive sur un Hub, elle est rediffusée vers toutes les destinations possibles à partir de celui-ci, c'est à dire vers toutes ses prises. • Switches (Commutateurs) • A un instant donné, ils ne laissent passer les informations que vers la destination voulue.

12. Internet : Aspects matériels et logiciels (4) • Aspects matériels • Réseau • Appareils de connectique • Bridges (Ponts) • Ils servent à relier entre eux deux réseaux différents d'un point de vue physique. • De plus ils filtrent les informations et ne laissent passer que celles qui doivent effectivement aller d'un réseau vers l'autre. • Routers (Routeurs) • Ils relient des réseaux physiques et/ou logiques différents, généralement distants. • Comme les ponts ils filtrent les informations mais à un niveau beaucoup plus fin ( le niveau logique ), et l'on peut même s'en servir pour protéger un réseau de l'extérieur tout en laissant des réseaux "amis" accéder au réseau local.

13. Internet : Aspects matériels et logiciels (5) • Aspects matériels • Réseau • Topologies • Est la manière dont sont reliés entre eux les différents composants d’un réseau. • On distingue principalement quatre types: • Bus, Étoile, Anneau, Point-à-Point

14. Internet : Aspects matériels et logiciels (6) • Aspects logiciels • Protocole TCP/IP • Le Transport Control Protocol (TCP) a pour objet de fiabiliser les échanges d'ordinateur à ordinateur, et de structurer ceux-ci sous forme d'un flot continu d'octets (de caractères le plus souvent). • Tout ordinateur connecté à un réseau TCP/IP doit être capable d'utiliser (" parler ") ces protocoles (" langue " commune ) avec les autres ordinateurs du réseau. • L'Internet Protocol (IP) se charge d'acheminer les informations sous forme brute d'un point quelconque du réseau à un autre point du réseau.

15. Principaux services d'Internet (1) • Les servies • TELNET • Est le service permettant l'exécution de programmes à distance, en général sur un hôte de type Unix. • Le courrier électronique - email • Est certainement le plus utilisé sur Internet, avec plusieurs milliards de messages échangés par an • Les groupes de discussion - newsgroups • Ressemblent au courrier électronique, et plus particulièrement aux listes de diffusion • FTP • Est un protocole d'échange de fichiers informatiques. • La toile - World Wide Web • Est le sous ensemble des serveurs Internet qui offrent des informations consultables sous forme de documents hypertextes et multimédia.

16. Principaux services d'Internet (2) • TELNET • Est le service permettant l'exécution de programmes à distance, en général sur un hôte de type Unix. • La commande telnet permet de se connecter sur une machine distante et d'y travailler exactement comme d’une connexion locale • Toutes les commandes lancées utilisent alors non pas les ressources (mémoire, processeur, etc...) de l’ordinateur local, mais de l'ordinateur distant. • Il est alors très simple d'exécuter un calcul qui monopoliserait un ordinateur local durant plusieurs jours, sur une machine très puissante qui fera le calcul en quelques secondes • Le numéro de port de TELNET est 23

17. Principaux services d'Internet (3) • Le courrier électronique – email • Le courrier électronique permet d’envoyer des messages textuels. • Ces messages peuvent comporter éventuellement des documents attachés, que l'on appelle pièces jointes, et qui peuvent être de n'importe quel type • Utilise entre autres les ports 25, 109, 110, 143 et 220, selon ce que l'on veut faire • Les messages électroniques peuvent recevoir des options particulières, telles que: • la priorité, l'accusé de réception, l'authentification de l'émetteur (cryptographie), l'envoi sous forme de document mis en forme (par défaut c'est en texte pur), etc... • Le courrier électronique offre une importante possibilité à travers le système de listes de diffusion.

18. Principaux services d'Internet (4) • Les groupes de discussion – newsgroups • Il existe environ 30000 groupes de discussion d'accès libre sur Internet • Il existe aussi des groupes de discussion dans des organismes ou entreprises, mais qui ne sont pas accessibles de l'extérieur. • Les groupes de discussion fonctionnent selon le mode diffusant. • Un message envoyé va être diffusé vers tous les autres serveurs de news de la région ou du monde (selon les options). • Un message adressé à un groupe de discussion va en fait voyager de serveur en serveur à travers le monde. • A l'inverse, le courrier électronique va directement de l'émetteur au destinataire en passant par le moins d'intermédiaires possibles.

19. Principaux services d'Internet (5) • FTP • Signifie File Transfert Protocol, est un protocole d'échange de fichiers informatiques. • Grâce à la commande ftp on peut télécharger des fichiers depuis un serveur distant et/ou placer des fichiers sur un serveur distant. • FTP utilise les ports 20 et 21. • Comme pour TELNET, lors de la connexion un nom d'utilisateur et un mot de passe sont demandés. • Il faut donc être connu du système distant. • Néanmoins, il est d'usage que les serveurs FTP autorisent les connections de type anonymes, c'est à dire sans entrer de nom d'utilisateur ni de mot de passe. • Certains logiciels, comme les navigateurs WEB, cachent complètement le processus de transfert de fichier à l'utilisateur.

20. Principaux services d'Internet (6) • La toile - World Wide Web • Est le sous ensemble des serveurs Internet qui offrent des informations consultables sous forme de documents hypertextes et multimédia. • Le protocole utilisé est HTTP, et passe par le port 80. • Comme FTP, HTTP sert à transférer des fichiers • Cependant les possibilités offertes sont bien plus grandes car on transfère la plupart du temps des fichiers au format HTML. • Permet d'inclure différents types de documents (images, etc...) au sein d'un même document hypertexte. • De plus en plus de bases de données sont accessibles par ce protocole plutôt que par TELNET car cela permet d'avoir des représentations graphiques des données.

21. Le world wide Web (1) • Le Web comment ça marche ?

22. Le world wide Web (2) • Composantes de WWW • URI: Uniform Ressource Identifier • Adresse des ressources sur INTERNET • Une ressource peut être un document (texte, image, son, vidéo) ou un service (interrogation d'une base de données). • HTTP: Hyper Text Transmission Protocol (TCP port 80) • Permet • Demande d'un fichier à un serveur • envoi de données à un programme CGI (Common Gateway Interface) qui permet à un programme de lire un formulaire • HTML(Hyper Text Markup Language) • Langage de présentation d'information, prévu pour une grande variété d'ordinateurs • MIME types (Multipurpose Internet Mail Extension) : • Type de média et de fichiers.

23. Le world wide Web (3) • Composantes de WWW • Uniform Ressource Identifier : URI (=URL) • Méthode générale pour désigner un service sur Internet. • Formée de 3 parties: • Le mode d'accès : protocole d'échange entre le client et le serveur • http (transfert de données HTML) ; • 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).

24. Le world wide Web (4) • Composantes de WWW • Uniform Ressource Identifier : URI (=URL) • Formée de : • Le nom du serveur :adresse internet du serveur (adresse TCP/IP unique sur le réseau) • Le nom de la ressource :arborescence des répertoires (chemin) qui conduit au document et nom du document qui comporte toujours l'extension .html ou .htm (si ce n'est pas un script qui est appelé) ; • éventuellement : • le port (sous TCP/IP le port par défaut attribué à http est 80 mais lors de l'installation du logiciel il est possible de choisir un autre numéro, il faut alors l'indiquer dans l'URL du document; • authentification (username et password) ; • arguments passés à un programme lors de l'appel de liens exécutables.

25. Le world wide Web (5) • Composantes de WWW • Uniform Ressource Identifier : URI (=URL) • Syntaxe d'une URI absolue • minimale : protocole://nom_serveur/ • courante : protocole://nom_serveur/repertoire/sous_repertoire/nom_document • complète : protocole://username;password@nom_serveur:port/repertoire/nom_document?arguments • Exemples: • http://www.voila.fr • http://www.ensm-douai.fr • ftp://ftp.lip6.fr/pub/gnu/a2ps/a2ps-4.10.4.tar.gz • file://localhost/mailto:seriai@ensm-douai.fr • news://news.u-strasbg.fr • http://csl.ensm-douai.fr/seriai/scripPHP?nom=toto

26. Le world wide Web (6) • Composantes de WWW • Uniform Ressource Identifier : URI (=URL) • Adressage et nommage • Le monde est structuré sous forme d'une arborescence, avec soit les domaines génériques (.com, .edu),soit les pays en dessous de la racine.

27. Le world wide Web (7) • Composantes de WWW • Uniform Ressource Identifier : URI (=URL) • Adressage et nommage • Les domaines français sont organisés de la manière suivante : • Il est envisagé d'ouvrir de nouveaux noms de domaines pour désengorger les domaines génériques existants.

28. Le world wide Web (9) • Composantes de WWW • Client - serveur • Client WWW • comporte un logiciel de navigation qui affiche les pages envoyées par le serveur. • Principes • Nom: browser, navigateur, butineur • client universel: accède à (presque) tous les protocoles • va chercher un document dont l'URI est demandé • interprète le langage HTML avec tolérance aux erreurs • affiche les images .gif ou .jpg • interprète le langage java et javascript

29. Le world wide Web (10) • Composantes de WWW • client - serveur • Client WWW • Commandes • initialisation: Home page, cache, fontes, couleurs, java, javascript, cookies • demande URI • scrolling image: par clavier ou souris • sélection d'un lien • remplissage formulaire, submit • backward, forward (cache mémoire), home • stop • reload • bookmarks • gestion cache: mémoire, disque, proxy server • historique • save (image: bouton droit souris), print

30. Le world wide Web (11) • Composantes de WWW • Client - serveur • Rôle d'un serveurWWW • Transformation de l'URL en fichier ou en script • Vérification d'identité : Le client est-il qu’il prétend être ? • Vérification d'accès : Le client est-il autorisé à effectuer cette requête ? • Détermination de : Type MIME des données, Taille des données, Langage, etc... • Envoi de la réponse au client • Traitements évolués (interprète perl, accès à des BDs, etc...) • Langage de requête ASP de Microsoft interprété" par le serveur Information Server sous NT, par exemple pour faire des requêtes à une base de données. • Javascript interprété au niveau serveur (Netstcape FastTrack et Enterprise Server) • Langage de requête pour Msql (module Apache) • Perl (module)

31. Le world wide Web (12) • Composantes de WWW • client - serveur • Serveur WWW • Différents types de serveur • Apache (le plus répandu, Unix/NT) • Microsoft Information Server (NT) • Netscape Server (Unix, Windows NT) • NCSA • CERN • Roxen (Unix, celui utilisé à l'ESSI) • Jigsaw (java, portable, W3C) • MacHTTP (Mac) • WebStar (95, NT) • etc... • http://webcompare.internet.com/ pour une comparaison complète de tous les serveurs disponibles.

32. Le world wide Web (13) • Composantes de WWW • Protocole HTTP (Hypertext Transfer Protocol ) • Le serveur attend des connexions TCP sur le port 80 • Le client demande un fichier par GET, envoie un formulaire par POST • Commandes: GET, POST, HEAD, PUT, DELETE • Serveurs HTTP: • CERN • NCSA • Apache • Netscape ...

33. Le world wide Web (14) • Composantes de WWW • Protocole HTTP (Hypertext Transfer Protocol ) • Hypertext • L'hypertexte = texte avec des liens. • Le W3 emploie l'hypertexte comme méthode de présentation • Les documents n'ont pas besoin d'être sous forme de texte: ils peuvent être des graphiques, des films et sons • Le terme "hypermedia", signifie l'"hypertexte de multimédia"   • Le langage HTML est le langage permettant d’écrire des document hypertext