Remerciez-le!

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

HTML : Hyper Text Markup Language Achref El Mouelhi Docteur de l’universit´ e d

HTML : Hyper Text Markup Language Achref El Mouelhi Docteur de l’universit´ e d’Aix-Marseille Chercheur en programmation par contrainte (IA) Ing´ enieur en g´ enie logiciel elmouelhi.achref@gmail.com H & H: Research and Training 1 / 118 Plan 1 Introduction 2 Outils 3 Concept de balises 4 Structure d’une page HTML 5 Attributs d’une balise 6 Organisation du texte 7 Titres H & H: Research and Training 2 / 118 Plan 8 Listes <ul> et <li> <ol> et <li> type start <dl>, <dt> et <dd> 9 Images 10 Liens <a> download target <base> H & H: Research and Training 3 / 118 Plan 11 Tableaux <table>, <tr> et <td> <caption> et <th> colspan rowspan <thead>, <tbody> et <tfoot> <colgroup> et <col> 12 Formulaires Zones de saisie Zones de choix Boutons Barres de progression Autres balises/attributs pour les formulaires 13 Encore un peu de multim´ edia H & H: Research and Training 4 / 118 Plan 14 Objets 15 Classiﬁcation des balises 16 Restructuration d’une page web avec HTML5 17 Caract` eres sp´ eciaux 18 Attributs globaux 19 ARIA 20 Donn´ ees 21 HTML5 et compatibilit´ e des navigateurs 22 Conventions et bonnes pratiques 23 Code HTML5 valide H & H: Research and Training 5 / 118 © Achref EL MOUELHI © Introduction HTML H & H: Research and Training 6 / 118 © Achref EL MOUELHI © Introduction HTML HTML : Hyper Text Markup Language Ce n’est pas un langage de programmation C’est plutˆ ot un langage de description compos´ e de plusieurs balises (tags) interpr´ et´ e par le navigateur Il ne n´ ecessite pas un ´ editeur de texte particulier Il est cr´ e´ e en 1991 par Tim Berners-Lee et est standardis´ e depuis 1994 par W3C H & H: Research and Training 7 / 118 © Achref EL MOUELHI © Introduction HTML En parlant Standardisation : deux organismes W3C (World Wide Web Consortium) : organisme de standardisation fond´ e par Tim Berners-Lee charg´ e de promouvoir la compatibilit´ e des technologies web (HTML, XML, CSS, SOAP ...) WHATWG (Web Hypertext Application Technology Working Group) : collaboration non ofﬁcielle des diff´ erents d´ eveloppeurs de navigateurs Web (Mozilla Foundation, Opera Software, Apple...) charg´ e de d´ eveloppement de nouvelles technologies sur la base sur la base des impl´ ementations actuelles d’Internet Explorer H & H: Research and Training 8 / 118 © Achref EL MOUELHI © Introduction HTML Le 28 mai 2019 Signature d’une collaboration entre W3C et WHATWG But : d´ eveloppement d’une version unique des sp´ eciﬁcations HTML et DOM H & H: Research and Training 9 / 118 © Achref EL MOUELHI © Introduction HTML HTML : ´ evolution HTML1 : premi` ere version cr´ e´ ee par Tim Berners-Lee en 1991. HTML2 : deuxi` eme version, apparue en 1994. On commence ` a parler de W3C. HTML3 : apparue en 1996 avec plusieurs nouveaut´ es comme les tableaux, les scripts, le positionnement du texte autour des images, etc. HTML4 : apparue en 1998 avec la possibilit´ e : d’utiliser de frames (d´ ecoupage d’une page en plusieurs parties), des am´ eliorations sur les formulaires, d’utiliser des feuilles de style (CSS). HTML5 : ﬁnalis´ ee en octobre 2014 et permet : d’inclure facilement des vid´ eos, d’ajouter plus de pr´ ecisions sur les champs d’un formulaire H & H: Research and Training 10 / 118 © Achref EL MOUELHI © Outils HTML De quoi on a besoin? un navigateur un ´ editeur de texte H & H: Research and Training 11 / 118 © Achref EL MOUELHI © Outils HTML Quelques navigateurs Google chrome : https://www.google.com/chrome/ Mozilla ﬁrefox : https://www.mozilla.org/fr/firefox/new/ Edge (install´ e par d´ efaut sous Windows) ... H & H: Research and Training 12 / 118 © Achref EL MOUELHI © Outils HTML Quelques ´ editeurs de texte Sublime text : https://www.sublimetext.com/3 Atom : https://atom.io/ Notepad++ : https://notepad-plus-plus.org/download/v7.5.7.html Brackets : http://brackets.io/ ... H & H: Research and Training 13 / 118 © Achref EL MOUELHI © Outils HTML Quelques ´ editeurs de texte Sublime text : https://www.sublimetext.com/3 Atom : https://atom.io/ Notepad++ : https://notepad-plus-plus.org/download/v7.5.7.html Brackets : http://brackets.io/ ... CodePen : une solution en ligne Trois ´ editeurs en parall` ele : un pour HTML, un pour CSS et un pour JavaScript https://codepen.io/ H & H: Research and Training 13 / 118 © Achref EL MOUELHI © Outils HTML Utiliser un IDE (Environnement de d´ eveloppement int´ egr´ e)? Console auto-int´ egr´ ee Auto-compl´ etion Auto-compilation Coloration syntaxique Meilleure structuration du projet H & H: Research and Training 14 / 118 © Achref EL MOUELHI © Outils HTML Quel IDE pour HTML? Visual Studio Code code.visualstudio.com/download H & H: Research and Training 15 / 118 © Achref EL MOUELHI © Outils HTML Quel IDE pour HTML? Visual Studio Code code.visualstudio.com/download Visual Studio Code (ou VSC) , pourquoi? Gratuit Offrant la possibilit´ e d’int´ egrer des ´ editeurs de texte connus (comme Sublime Text, Atom...) Pouvant s’adapter selon le langage de programmation Extensible via l’installation de quelques centaines d’extensions H & H: Research and Training 15 / 118 © Achref EL MOUELHI © Outils HTML Quelques recommandations (raccourcis) pour VSC Pour activer la sauvegarde automatique : aller dans File > AutoSave Pour indenter son code : Alt Shift f Pour faire une s´ election multiple : Ctrl f2 H & H: Research and Training 16 / 118 © Achref EL MOUELHI © Outils HTML Pour cr´ eer un projet sous VSC Allez dans File > Open Folder... Cliquez sur Nouveau dossier et saisissez cours-html Cliquez sur le dossier cours-html puis sur le dossier S´ electionner un dossier Cr´ eez un ﬁchier index.html dans cours-html Dans index.html, saisissez html:5 puis cliquez sur Entree H & H: Research and Training 17 / 118 © Achref EL MOUELHI © Outils HTML Code g´ en´ er´ e <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <title>Document</title> </head> <body> </body> </html> H & H: Research and Training 18 / 118 © Achref EL MOUELHI © Outils HTML Extension Live Server Installez l’extension Live Server Faites un clic doit sur index.html Cliquez sur Open with Live Server H & H: Research and Training 19 / 118 © Achref EL MOUELHI © Concept de balises HTML Syntaxe <balise> objet </balise> H & H: Research and Training 20 / 118 © Achref EL MOUELHI © Concept de balises HTML Syntaxe <balise> objet </balise> ou bien (les balises orphelines ou auto-fermantes) [objet] <balise/> H & H: Research and Training 20 / 118 © Achref EL MOUELHI © Concept de balises HTML Syntaxe <balise> objet </balise> ou bien (les balises orphelines ou auto-fermantes) [objet] <balise/> Avec HTML5, plus besoin de / pour les balises orphelines [objet] <balise> H & H: Research and Training 20 / 118 © Achref EL MOUELHI © Concept de balises HTML Syntaxe <balise> objet </balise> ou bien (les balises orphelines ou auto-fermantes) [objet] <balise/> Avec HTML5, plus besoin de / pour les balises orphelines [objet] <balise> Commentaire : balise particuli` ere  H & H: Research and Training 20 / 118 © Achref EL MOUELHI © Concept de balises HTML Propri´ et´ es Les balises doivent ˆ etre ouvertes puis ferm´ ees r´ ecursivement, comme des parenth` eses ([...]{(...)}) Tout ce qui est entour´ e par deux balises s’appelle ´ el´ ement Un ´ el´ ement peut ´ eventuellement contenir du texte, liens, balises... Un texte en clair (non-entour´ e par une balise) est afﬁch´ e Les balises non reconnues seront ignor´ ees (non-afﬁch´ ees) Les commentaires en HTML sont ignor´ es par le navigateur Les commentaires ne sont pas afﬁch´ es mais restent visibles dans le code source de la page et ne doit donc jamais contenir une information conﬁdentielle. H & H: Research and Training 21 / 118 © Achref EL MOUELHI © Structure d’une page HTML HTML Composition Le contenu d’une page HTML est compris entre deux balises html Une page HTML est compos´ ee de deux parties une entˆ ete : head un corps : body H & H: Research and Training 22 / 118 © Achref EL MOUELHI © Structure d’une page HTML HTML Composition Le contenu d’une page HTML est compris entre deux balises html Une page HTML est compos´ ee de deux parties une entˆ ete : head un corps : body <!DOCTYPE html> <html> <head> </head> <body> </body> </html> H & H: Research and Training 22 / 118 © Achref EL MOUELHI © Structure d’une page HTML HTML DOCTYPE Ce n’est pas une balise C’est facultatif C’est une directive permettant de pr´ eciser qu’il s’agit d’un document HTML et indiquant sa version  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <!DOCTYPE html> H & H: Research and Training 23 / 118 © Achref EL MOUELHI © Structure d’une page HTML Que peut contenir <HEAD>? <head> <meta charset="utf-8"> <meta name="description" content="Formation HTML"> <title>Formation 2017</title> </head> <head> : les m´ eta informations <title> titre du document (afﬁch´ e par le uploads/Voyage/ cours-html 3 .pdf