Création de pages WEB en HTML Claude Duvallet Université du Havre UFR Sciences

Création de pages WEB en HTML Claude Duvallet Université du Havre UFR Sciences et Techniques 25 rue Philippe Lebon - BP 540 76058 LE HAVRE CEDEX Claude.Duvallet@gmail.com http://litis.univ-lehavre.fr/∼duvallet/ Claude Duvallet — 1/108 HTML Plan du cours Historique Le WEB HTML Claude Duvallet — 2/108 HTML HISTORIQUE Claude Duvallet — 3/108 HTML Introduction Historique Le réseau Internet Architecture Historique 1 Introduction 2 Historique 3 Le réseau Internet 4 Architecture Claude Duvallet — 4/108 HTML Introduction Historique Le réseau Internet Architecture Introduction Un réseau est un ensemble d’objets interconnectés les uns avec les autres : permet de faire circuler des éléments entre chacun de ces objets. Un réseau permet : le partage : fichiers, applications, la communication entre personnes, la communication entre processus (machines industrielles), manipulation de bases de données, le jeu à plusieurs, ... Claude Duvallet — 5/108 HTML Introduction Historique Le réseau Internet Architecture Historique (1/4) 1969 : création du réseau militaire ARPANET : assurer la transmission d’informations, même en temps de guerre. le téléphone était le seul moyen de communication : les nœuds sont des points essentiels pour le fonctionnement de tout réseau, il fallait concevoir un réseau de communication capable d’emprunter des routes différentes si l’un des nœuds n’était plus en service : = ⇒un réseau complètement décentralisé, = ⇒construire une toile (Web). 4 universités de connectées : Internet était un réseau fréquenté par des initiés qui maîtrisaient le système d’exploitation Unix. 1971 : 15 universités sont sur ARPANET, le premier e-mail est envoyé. 1972 : FTP : protocole de transfert de fichiers. Claude Duvallet — 6/108 HTML Introduction Historique Le réseau Internet Architecture Historique (2/4) 1973 : internationalisation avec la connexion d’une université de Londres et une autre de Norvège. 1974 : TELNET : protocole de prise de commande à distance. 1983 : les protocoles principaux sont finalisées, les militaires quittent ARPANET pour fonder leur propre réseau. 1985 : avec le développement de la technologie "personal computer" et des Local Area Network, il devient possible de construire une interconnexion de réseaux. 1987 : la plus grave "panne" de sécurité d’Internet : Robert Morris écrivit un WORM (programme s’auto reproduisant et se propageant dans un réseau), des réseaux entiers furent complètement paralysés, d’autres furent déconnectés pour limiter les dégâts. Claude Duvallet — 7/108 HTML Introduction Historique Le réseau Internet Architecture Historique (3/4) 1990 : ARPANET s’éteint pour être remplacé par Internet, qui compte plus de 300 000 hôtes, arrivé du WWW (World Wide Web) développé au CERN en Suisse, ⇒changement irréversible de l’économie mondiale : apparition du e-Business (commerce électronique), interconnexion des systèmes d’information des entreprises, 1992 : plus de 1 000 000 machines connectées. 1993 : conception du premier navigateur Web : Mosaic. 1994 : 3 500 000 d’hôtes pour 40 000 réseaux interconnectés, les moteurs de recherche apparaissent. création de Nestcape Communicator. Claude Duvallet — 8/108 HTML Introduction Historique Le réseau Internet Architecture Historique (4/4) 2000 : l’économie mondiale mute à nouveau : apparition du c-Business (travail collaboratif), utilisation du Web pour définir des espaces communautaires. 2005 : 1 milliard d’internautes. Claude Duvallet — 9/108 HTML Introduction Historique Le réseau Internet Architecture Le réseau Internet Internet est un immense réseau d’ordinateurs interconnectés sur toute la planète : tous ces ordinateurs peuvent échanger des informations. pendant le temps d’une connexion à l’Internet, l’ordinateur utilisé devient membre de ce réseau.                                           Claude Duvallet — 10/108 HTML Introduction Historique Le réseau Internet Architecture Architecture (1/4) Une des raisons majeures, qui fait la solidité d’Internet, est sa composition. totalement décentralisé : il ne comporte aucun "site central", c’est un réseau maillé, constitué de routeurs : nœuds du réseau. formé d’un ensemble de réseaux. Internet ne possède pas d’architecture véritable : ce qui le caractérise, c’est le principe d’acheminement des messages qui y transitent. Claude Duvallet — 11/108 HTML Introduction Historique Le réseau Internet Architecture Architecture (2/4) Serveur : machine avec système d’exploitation multi-tâches, offre des services à l’écoute du réseau 24h/24,           rôle : transformation de l’url en fichier ou en script. envoi de la réponse au client, mise à jour des journaux (Acces_log, error_log, ...) , vérification d’accès : le client est-il autorisé à effectuer cette requête ? ... Claude Duvallet — 12/108 HTML Introduction Historique Le réseau Internet Architecture Architecture (3/4) Client : programme appelant un service sur une machine distante, pas de communication client / client, ⇒clients / serveur sont mis en relation par un protocole : méthode standard qui permet la communication entre des processus. les protocoles : TCP , UDP , HTTP , FTP , IP , SMTP , Telnet... Routeur = une machine connectée à plusieurs réseaux. Les routeurs calculent à chaque instant le chemin optimal : en cas d’encombrement, les informations (paquets) sont transmises, mais avec une vitesse moindre. L ’ordinateur destinataire réceptionne les informations (paquets) les unes après les autres et les assemblent. Claude Duvallet — 13/108 HTML Introduction Historique Le réseau Internet Architecture Architecture (4/4) L ’architecture d’un réseau a 2 aspects : physique : déterminé par des contraintes physiques et d’emplacements. logique : déterminé par les objectifs que l’on veut atteindre en termes de débit, de sécurité, de disponibilité. Claude Duvallet — 14/108 HTML Introduction Historique Le réseau Internet Architecture Le WEB Claude Duvallet — 15/108 HTML Hyperliens Le WEB 5 Hyperliens Claude Duvallet — 16/108 HTML Hyperliens Hyperliens Le web a été inventé au CERN en Suisse. Il se base sur l’hypertexte : ensemble de documents liés les uns aux autres à l’aide de liens ou hyperliens. Ajouter une figure En sélectionnant un de ces liens : passe d’un document à l’autre : un hypertexte se différencie d’un texte habituel par le fait qu’il ne se lit pas linéairement. Sur un texte, le lien se présente sous la forme d’un texte souligné de couleur bleue. Claude Duvallet — 17/108 HTML Hyperliens HTML Claude Duvallet — 18/108 HTML Généralités En-tête Corps Structurer un document HTML 6 Généralités 7 En-tête 8 Corps 9 Structurer un document Claude Duvallet — 19/108 HTML Généralités En-tête Corps Structurer un document HTML (HyperText Markup Language) Le HTML est un format d’écriture de document du type SGML (Standard Generalized Markup Language) : HTML est un ensemble de balises utilisés pour définir les différents composants d’un document Web. langage de description de documents hypertextuels. HTML = ⇒XHTML Depuis le 26 janvier 2000, le XHTML est la nouvelle norme du W3C en matière de langage balisé pour concevoir des documents Web : le XHTML n’est rien de plus que du HTML reformulé de façon à respecter les règles strictes du XML. Claude Duvallet — 20/108 HTML Généralités En-tête Corps Structurer un document Exemple de fichier source <html> <head> <title> Titre de la page </title> </head> <body> Exemple simple de page WEB </body> </html> Résultat : Claude Duvallet — 21/108 HTML Généralités En-tête Corps Structurer un document Affichage du code source d’une page menu ’Affichage’ puis ’Code source de la page’. Claude Duvallet — 22/108 HTML Généralités En-tête Corps Structurer un document Le langage HTML De façon générale les commandes sont de la forme : <balise>texte</balise> ou encore <balise attribut="valeur">texte</balise> L ’instruction suivante n’est pas du XHTML : <balise> balise est vide ou orpheline : <br ></br> ou <br /> Claude Duvallet — 23/108 HTML Généralités En-tête Corps Structurer un document Remarques générales Les noms de marqueurs sont minuscules : <b> et non <B> Plusieurs attributs pour une même balise : <balise attribut1="valeur" attribut2="valeur"> texte </balise> Plusieurs caractères blancs sont remplacés par un seul caractère blanc. Les "retours-chariot " ne sont pas pris en compte, il faut utiliser : <p> (changement de paragraphe). <br /> (changement de ligne). Une ligne peut être mise en commentaires : <!-- commentaire --> Claude Duvallet — 24/108 HTML Généralités En-tête Corps Structurer un document Principaux caractères de code ASCII de la langue française Les normes HTML demandent de respecter le codage dans les caractères ASCII 7 bits, c’est à dire sans caractères accentués : Claude Duvallet — 25/108 HTML Généralités En-tête Corps Structurer un document Balise d’entête Entre le couple de balises <head> et </head> : donnent des informations générales sur toute la page : <title> </title> titre de la page. <meta...> informations lues par le serveur, optimise le référencement. Claude Duvallet — 26/108 HTML Généralités En-tête Corps Structurer un document Les méta-données (1/2) Définition de la langue et du nom de l’auteur : <meta name="Author" lang="fr" content="Claude Duvallet"/> ⇒plusieurs auteurs possibles séparés par des virgules. Définition de mot-clés qui caractérisent le mieux le site : <meta name="Keywords" lang="fr" content="Mots clés, espacés par une virgule"/> Catégorie de la page (pour les moteurs de recherche) : <meta name="Category" content="Création de site WEB"/> Copyright de la page : <meta name="Copyright" content="Claude Duvallet"/> Description : zone fréquentée par les moteurs de recherche qui indexent le site, uploads/Ingenierie_Lourd/ cours-html 7 .pdf

  • 28
  • 0
  • 0
Afficher les détails des licences
Licence et utilisation
Gratuit pour un usage personnel Attribution requise
Partager