Chapitre I: Introduction HTML5 PDF

Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Chapitre I: Introduction HTML5 Professeure Mana...

Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Chapitre I: Introduction HTML5 Professeure Manal ZETTAM Ecole Nationale des Sciences Appliquées de Safi Université Cadi Ayyad - Marrakech Année Universitaire : 2024-2025 Professeure Manal ZETTAM Chapitre I: Introduction HTML5 1 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Plan 1 Introduction 2 Les balises HTML 3 Structure générale d’un document HTML 4 Les attributs 5 Les commentaires 6 Bibliographie & Webographie Professeure Manal ZETTAM Chapitre I: Introduction HTML5 2 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Introduction Définition HTML(HyperText Markup Language) est un langage de balisage (dit aussi langage de marquage) qui permet de structurer le contenu des pages web dans différents éléments. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 3 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Introduction  Les langages de balisage sont issus du langage SGML (Standard Generalized Markup Language) créé en 1986 pour structurer des contenus très divers. Le langage SGML est trop complexe pour être appliqué tel X quel au Web. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 4 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Introduction HTML historique Tim Berners-Lee a inventée HTML en 1992. HTML a été conçu à l’origine comme un outil de structuration des contenus textuels. HTML n’a pas été conçu pas pour créer des présentations diversifiées. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 5 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Introduction HTML historique Netscape et Microsoft ont détourné HTML de sa première vocation avec l’ajout d’éléments de design. CSS (Cascading Styles Sheets) apparut en 1996 a facilité l’utilisation de HTML pour le design. En 1998, HTML4 a été introduit avec l’emploi systématique de CSS 2. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 6 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Introduction HTML historique La création de XML (eXtensible Markup Language) en 1998 et son succès dans de multiples domaines d’application ont conduit le W3C (World Wide Web Consortium) à créer le langage XHTML. Le langage XHTML est une reformulation de HTML en tant qu’application XML. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 7 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Introduction Exemple HTML 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. vel egestas erat tempor mollis Praesent fermentum, orci ac hendrerit bibendum. libr dictum varius est. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 8 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Introduction Exemple XHTML 1.0 Lorem ipsum dolor sit amet, consectetur adipiscing elit. vel egestas erat tempor mollis Praesent fermentum, orci ac hendrerit bibendum. libr dictum varius est. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 9 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Introduction HTML vs XHTML La syntaxe HTML est permissive. La syntaxe XHTML n’est pas permissive. XHTML impose un ensemble de régles d’écriture définies par https: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 10 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Introduction HTML 5 & XHTML 5 HTML 5 (HyperText Markup Language 5) a vu le jour début 2004 après une année de travail. HTML 5 est la dernière révision majeure du HTML (selon W3C). La reformulation de HTML5 en application XML est notée XHTML5. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 11 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Introduction Les nouveautés HTML 5 HTML 5 inaugure de nouveaux éléments pour de nouveaux usages. HTML 5 inaugure de nouvels APIs (Application Programming Interfaces) pour étendre les possibilités dynamiques du langage. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 12 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Introduction Les nouveaux éléments Les premiers permettent d’ajouter une valeur sémantique aux blocs génériques précédemment définis par les éléments div et span. C’est le cas notamment de article, aside, footer, header, section et nav. Les suivants apportent de nouvelles fonctionnalités aux pages web ; c’est le cas,notamment, de audio et video. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 13 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Introduction Les nouvels APIs le stockage de données côté client ; l’élément canvas (dessin 2D et 3D) ; les microformats ; la lecture de médias (audio, vidéo), ; le glisser-déposer (drag’n drop) ; Professeure Manal ZETTAM Chapitre I: Introduction HTML5 14 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Introduction Les nouvels APIs la communication bidirectionnelle (sockets, push, interdocuments), la géolocalisation ; la gestion des applications web hors-ligne ; la lecture et l’écriture de fichiers locaux ; la gestion de l’historique du navigateur ; Professeure Manal ZETTAM Chapitre I: Introduction HTML5 15 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Les balises HTML Les balises HTML structurent le contenu d’un document, en délimitant les blocs. Les blocs contiennent des paragraphes, des titres, différents types de médias(images, sons, vidéos), des contrôles de formulaires ou encore des liens hypertextes. Les balises se distinguent du contenu en utilisant les caractères et /. Les balises ont une présentation et une signification définie par le langage HTML. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 16 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Les balises Il existe trois types de balises : balise d’ouverture : , balise de fermeture : , balise vide :. Exemple Ceci est un paragraphe. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 17 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Structure générale d’un document HTML Le document HTML possède par défaut une tête et un corps. La tête (élément head) définit les propriétés globales du document (titre, apparence, méta-informations). Le corps (élément body) renferme des balises de contenu. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 18 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Structure générale d’un document HTML Modèle de document HTML 5 simple: Titre du document... Professeure Manal ZETTAM Chapitre I: Introduction HTML5 19 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Structure générale d’un document HTML Un document HTML 5 minimaliste: Titre du document La spécification autorise l’omission des balises html, head, meta et body. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 20 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Les attributs Les attributs modifient les propriétés des balises HTML. Un élément peut comporter zéro ou plusieurs attribut(s), choisi(s) dans un ensemble spécifique à cet élément ou un ensemble commun à tous les éléments HTML. Professeure Manal ZETTAM Chapitre I: Introduction HTML5 21 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Les attributs Exemple d’attributs facultatifs: Exemple d’attribut nécessaires: Professeure Manal ZETTAM Chapitre I: Introduction HTML5 22 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Les commentaires Un commentaire est défini comme suit: Professeure Manal ZETTAM Chapitre I: Introduction HTML5 23 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Bibliographie & Webographie Réalisez votre site web avec HTML 5 et CSS 3 Ed. 3 (Eyrolles), Nebra, Mathieu (2023). HTML 5 : Une référence pour le développeur web Ed. 3 (Eyrolles),Rimelé, Rodolphe (2017). XHTML et CSS : Cours et exercices (EYROLLES), Jean Engels (2006). Professeure Manal ZETTAM Chapitre I: Introduction HTML5 24 / 25  Introduction Les balises HTML Structure générale d’un document HTML Les attributs Les commentaires Bibliographie & Webographie Bibliographie & Webographie https://www.w3.org/TR/2009/WD-html5-20090825/ introduction.html https://fr.wikipedia.org/wiki/Extensible_ Hypertext_Markup_Language https://www.irif.fr/~carton/Enseignement/XML/ Cours/Annexes/presentation.html https://developer.mozilla.org/fr/docs/Learn/HTML Professeure Manal ZETTAM Chapitre I: Introduction HTML5 25 / 25