Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Cours Web - HTML (1° partie) Thierry Vaira BTS IRIS Avignon tvaira@free.fr « v0

Cours Web - HTML (1° partie) Thierry Vaira BTS IRIS Avignon tvaira@free.fr « v0.1 Introduction Objectifs Se familiariser avec le codage HTML et acquérir une pratique minimale. Être capable de mener à bien la construction d’un site ou d’une page en respectant les bonnes pratiques. Être informé des dernières implémentations des standards du web. Acquérir les capacités d’auto-formation nécessaires pour suivre les évolutions à venir. tv (BTS IRIS Avignon) Cours Web - HTML tvaira@free.fr « v0.1 2 / 37 Introduction Déﬁnition HTML signiﬁe HyperText Markup Language. C’est un langage de description de document conçu pour représenter des documents hypertextuels (notion de liens), appelés aujourd’hui « pages web ». Il permet également de structurer sémantiquement et de mettre en forme le contenu des pages en utilisant des balises (Markup Language). Il est initialement dérivé du SGML (Standard Generalized Markup Language), jugé trop complexe. Remarque : HTML n’est ni un protocole ni un langage de programmation. tv (BTS IRIS Avignon) Cours Web - HTML tvaira@free.fr « v0.1 3 / 37 Introduction Technologies L’utilisation conjointe d’un ensemble de technologies permet la réalisation de « documents web » : Document HTML (ou XHTML) pour la structure sémantique des informations ; Feuille de style CSS (Cascading Style Sheets) pour la présentation des informations ; Interface DOM (Document Object Model) et langage de programmation JavaScript pour aﬃcher et interagir dynamiquement avec l’information présentée (cf. deuxième partie) ; Remarque : l’ensemble de ces technologies sont interprétés côté client. tv (BTS IRIS Avignon) Cours Web - HTML tvaira@free.fr « v0.1 4 / 37 Web Le World Wide Web « Je n’ai fait que prendre le principe d’hypertexte et le relier au principe du TCP et du DNS et alors - boum ! - ce fut le World Wide Web ! » Tim Berners-Lee Le web est un des services disponibles sur Internet. Internet est un réseau de services. Internet est basée sur l’architecture client/serveur : - Les services Internet sont tous fournis par des serveurs. - Les demandeurs du service sont nommés les clients. - Les clients émettent des requêtes en se basant sur un protocole. - Après traitement des requêtes, les serveurs renvoient des réponses en se basant sur un protocole. Chaque service est associé à un protocole (web = HTTP). tv (BTS IRIS Avignon) Cours Web - HTML tvaira@free.fr « v0.1 5 / 37 Web Internet (I) Internet est un réseau de réseaux. - L’interconnexion des réseaux sur Internet est réalisé par des routeurs qui donnent une topologie de type maillé. - Internet est un réseau de type WAN (Wide Area Network). - Le plus souvent, on passe par un FAI (Fournisseur d’Accès Internet) ou ISP (Internet Service Provider) pour se connecter (raccorder) au réseau Internet. Les aspects techniques d’Internet sont couverts par des RFC (Requests For Comment) - Ce sont une série numérotée de documents électroniques destinées aux techniciens, ingénieurs, ... - Peu de RFC sont des standards, mais tous les standards d’Internet sont des RFC. - Les RFC sont rédigées pas des experts techniques. En mai 2008, le nombre de RFC a atteint les 5 000. - La première RFC (RFC 1), titrée "Logiciel hôte", a été publiée le 7 avril 1969 par Steve Crocker. tv (BTS IRIS Avignon) Cours Web - HTML tvaira@free.fr « v0.1 6 / 37 Web Internet (II) En résumé, Internet est un réseau informatique mondial qui rend accessibles au public des services (comme le courrier électronique et le World Wide Web). Ses utilisateurs sont désignés par le néologisme « internaute ». Techniquement, Internet se déﬁnit comme le réseau public mondial utilisant le protocole de communication « TCP/IP » (signiﬁant : les protocoles de la famille TCP/IP). Lorsque les technologies Internet (TCP/IP, services, etc.) sont mises en oeuvre au sein de réseaux privés (entreprises, administrations, etc ...), on parle alors d’intranet. Attention, beaucoup d’utilisateurs confondent Internet et Web ! tv (BTS IRIS Avignon) Cours Web - HTML tvaira@free.fr « v0.1 7 / 37 Web Historique (I) « Je n’ai fait que prendre le principe d’hypertexte et le relier au principe du TCP et du DNS et alors - boum ! - ce fut le World Wide Web ! » Tim Berners-Lee Historique du web en quelques dates : 1991 : Origine, le World Wide Web est basé sur trois inventions, le protocole de communication client/serveur HTTP (Hypertext Transfer Protocol), les adresses web (URI/URL) et le langage HTML (HyperText Markup Language). 1993-1997 : Evolution du langage HTML par l’apports des navigateurs (NCSA Mosaic, Netscape Navigator, Microsoft Internet Explorer, Mozilla Firefox, ...). 1994 : Naissance du W3C (World Wide Web Consortium) qui est un organisme de normalisation chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, CSS, PNG, SVG et SOAP. Le W3C n’émet pas des normes au sens européen, mais des recommandations à valeur de standards industriels. Tim Berners-Lee préside aujourd’hui le W3C. tv (BTS IRIS Avignon) Cours Web - HTML tvaira@free.fr « v0.1 8 / 37 Web Historique (II) 1996 : Standardisation HTTP/1.0 (RFC 1945), cette version supporte les serveurs HTTP virtuels, la gestion de cache et l’identiﬁcation. 1997 : Standardisation HTTP/1.1 (RFC 2068 puis dans la RFC 2616 en juin 1999), cette version ajoute le support des connexions persistantes et la négociation de type de contenu (format de données, langue). 1999 : dernière spéciﬁcation de HTML, la 4.01. 2014 : ﬁnalisation prévue de la spéciﬁcation HTML5. Le W3C encourage les développeurs Web à utiliser HTML 5 dès maintenant. tv (BTS IRIS Avignon) Cours Web - HTML tvaira@free.fr « v0.1 9 / 37 HTML Créer des documents, un site (I) Créer des documents HTML avec un éditeur de texte ou un logiciel spécialisé (extension conseillée : .html). Visualiser avec un navigateur : le code HTML est interprété côté client. Pour mettre un site en ligne, il faut : un accès internet (ou intranet) et un espace d’herbergement sur un serveur HTTP (chez un hébergeur payant ou gratuit par exemple). Mettre le site en ligne (déployer) : transférer sur le serveur HTTP les documents et l’arborescence, en utilisant par exemple FTP (File Transfer Protocol). tv (BTS IRIS Avignon) Cours Web - HTML tvaira@free.fr « v0.1 10 / 37 HTML Créer des documents, un site (II) Avertissements : Techniques : séléctionnez un encodage et déclarez-le, évitez les espaces et les caractères accentués dans les noms de ﬁchiers et les chemins (par exemple, l’espace est codé %20 dans les URL), utilisez les chemins relatifs (les chemins absolus ne sont pas portables), utilisez des minuscules (les URL sont sensibles à la casse), ... voir les bonnes pratiques Légaux : respectez les droits d’auteur, les droits d’éditeur, les décisions de justice, les droits à l’image , ... tv (BTS IRIS Avignon) Cours Web - HTML tvaira@free.fr « v0.1 11 / 37 HTML Syntaxe Les navigateurs appliquent la loi de Postel : "Soyez libéral dans ce que vous acceptez, et conservateur dans ce que vous envoyez" (RFC 791). Malgré les libertés prises avec la norme initiale, la terminologie propre à SGML est utilisée : document, élément, attribut, valeur, balise, entité, validité, etc... tv (BTS IRIS Avignon) Cours Web - HTML tvaira@free.fr « v0.1 12 / 37 HTML Version d’un document HTML (I) Un document HTML valide doit déclarer la version HTML qu’il utilise. On utilisera la dernière version spéciﬁée à ce jour, la 4.01. La déclaration de type de document indique la déﬁnition de type de document (DTD) en vigueur pour le document. HTML 4.01 spéciﬁe trois DTD (Strict, Transitoire et Frameset) et les DTD varient selon les éléments qui y sont gérés. tv (BTS IRIS Avignon) Cours Web - HTML tvaira@free.fr « v0.1 13 / 37 HTML Version d’un document HTML (II) Pour HTML 4.01, les auteurs doivent donc inclure l’une des déclarations de type de document suivantes dans leurs documents (avant la balise <html>) : Strict comprend tous les éléments et attributs qui ne sont pas déconseillés : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Transitoire (conciliante) inclut la totalité du DTD strict auquel se rajoutent les éléments et attributs déconseillés (la plupart d’entre eux concernant la présentation visuelle) : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Frameset (jeu d’encadrement) inclut la totalité du DTD transitoire plus les cadres : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> tv (BTS IRIS Avignon) Cours Web - HTML tvaira@free.fr « v0.1 14 / 37 HTML DTD (I) La Document Type Deﬁnition (DTD), ou Déﬁnition de Type de Document, est un document permettant de décrire un modèle de document SGML, XML ou HTML. Une DTD indique les noms des éléments pouvant apparaître et leur contenu, c’est-à-dire les sous-éléments et les attributs. En dehors des attributs, le contenu est spéciﬁé en indiquant le nom, l’ordre et le nombre d’occurrences autorisées des sous-éléments. L’ensemble constitue la déﬁnition des hiérarchies valides d’éléments et de texte. Le document sera jugé valide lorsqu’il possède et respecte sa DTD (Deﬁnition Type Document). tv (BTS IRIS Avignon) Cours Web - HTML tvaira@free.fr « v0.1 15 / 37 HTML DTD (II) Exemple de déﬁnition de la DTD uploads/s1/ cours-web-html-1-partie.pdf