TW1 Introduction Documents Web HTML Contenu Arbres Introduction et HTML Technologies du Web 1 Jean-Christophe Routier Licence 1 SESI Université Lille 1 Université Lille 1 - Licence 1 SESI Technologies du Web 1 1 TW1 Introduction Documents Web HTML Contenu Arbres Introduction Objectifs : I Présentation des bases de la création de documents web par la découverte des technologies « côté client » I I I création de la page, contenu et forme : HTML/CSS programmation : javascript approfondi et prolongé par l’UE Technologies du Web 2 du S4 Informatique http://portail.fil.univ-lille1.fr/ls2/tw1 Université Lille 1 - Licence 1 SESI Technologies du Web 1 2 TW1 Introduction Documents Web HTML Contenu Arbres Ce cours n’est pas... I ... un catalogue exhaustif des fonctionnalités HTML et CSS Université Lille 1 - Licence 1 SESI Technologies du Web 1 3 TW1 Introduction Documents Web HTML Contenu Arbres Ce cours n’est pas... I ... un catalogue exhaustif des fonctionnalités HTML et CSS I ... un cours de « création graphique » de page web Université Lille 1 - Licence 1 SESI Technologies du Web 1 3 TW1 Introduction Documents Web HTML Contenu Arbres Ce cours n’est pas... I ... un catalogue exhaustif des fonctionnalités HTML et CSS I ... un cours de « création graphique » de page web ... un cours complet sur javascript I Université Lille 1 - Licence 1 SESI Technologies du Web 1 3 TW1 Introduction Documents Web HTML Contenu Arbres Ce cours n’est pas... I ... un catalogue exhaustif des fonctionnalités HTML et CSS I ... un cours de « création graphique » de page web ... un cours complet sur javascript I I pas de « programmation objet » Université Lille 1 - Licence 1 SESI Technologies du Web 1 3 TW1 Introduction Documents Web HTML Contenu Arbres Ce cours n’est pas... I ... un catalogue exhaustif des fonctionnalités HTML et CSS I ... un cours de « création graphique » de page web ... un cours complet sur javascript I I I pas de « programmation objet » pas d’utilisation de frameworks existants Université Lille 1 - Licence 1 SESI Technologies du Web 1 3 TW1 Introduction Documents Web HTML Contenu Arbres Ce cours n’est pas... I ... un catalogue exhaustif des fonctionnalités HTML et CSS I ... un cours de « création graphique » de page web ... un cours complet sur javascript I I I I pas de « programmation objet » pas d’utilisation de frameworks existants ... un cours complet sur les technologies web Université Lille 1 - Licence 1 SESI Technologies du Web 1 3 TW1 Introduction Documents Web HTML Contenu Arbres Ce cours n’est pas... I ... un catalogue exhaustif des fonctionnalités HTML et CSS I ... un cours de « création graphique » de page web ... un cours complet sur javascript I I I I pas de « programmation objet » pas d’utilisation de frameworks existants ... un cours complet sur les technologies web I pas de programmation côté serveur (php, J2EE, etc.) Université Lille 1 - Licence 1 SESI Technologies du Web 1 3 TW1 Introduction Documents Web HTML Contenu Arbres Ce cours n’est pas... I ... un catalogue exhaustif des fonctionnalités HTML et CSS I ... un cours de « création graphique » de page web ... un cours complet sur javascript I I I I pas de « programmation objet » pas d’utilisation de frameworks existants ... un cours complet sur les technologies web I I pas de programmation côté serveur (php, J2EE, etc.) pas de bases de données Université Lille 1 - Licence 1 SESI Technologies du Web 1 3 TW1 Introduction Documents Web HTML Contenu Arbres Ce cours n’est pas... I ... un catalogue exhaustif des fonctionnalités HTML et CSS I ... un cours de « création graphique » de page web ... un cours complet sur javascript I I I I pas de « programmation objet » pas d’utilisation de frameworks existants ... un cours complet sur les technologies web I I I pas de programmation côté serveur (php, J2EE, etc.) pas de bases de données pas d’« ajax » Université Lille 1 - Licence 1 SESI Technologies du Web 1 3 TW1 Introduction Documents Web HTML Contenu Arbres Ce cours n’est pas... I ... un catalogue exhaustif des fonctionnalités HTML et CSS I ... un cours de « création graphique » de page web ... un cours complet sur javascript I I I I pas de « programmation objet » pas d’utilisation de frameworks existants ... un cours complet sur les technologies web I I I pas de programmation côté serveur (php, J2EE, etc.) pas de bases de données pas d’« ajax » Bon alors... on va faire quoi ? Université Lille 1 - Licence 1 SESI Technologies du Web 1 3 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Être capables de concevoir des documents web dans le respect des standards. Université Lille 1 - Licence 1 SESI Technologies du Web 1 4 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Être capables de concevoir des documents web dans le respect des standards. I Connaı̂tre les principaux standards du web : (X)HTML 5, CSS, Javascript, DOM Université Lille 1 - Licence 1 SESI Technologies du Web 1 4 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Être capables de concevoir des documents web dans le respect des standards. I I Connaı̂tre les principaux standards du web : (X)HTML 5, CSS, Javascript, DOM Maı̂triser la notion de séparation contenu / forme / dynamicité Université Lille 1 - Licence 1 SESI Technologies du Web 1 4 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Être capables de concevoir des documents web dans le respect des standards. I I I Connaı̂tre les principaux standards du web : (X)HTML 5, CSS, Javascript, DOM Maı̂triser la notion de séparation contenu / forme / dynamicité Savoir Université Lille 1 - Licence 1 SESI Technologies du Web 1 4 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Être capables de concevoir des documents web dans le respect des standards. I I I Connaı̂tre les principaux standards du web : (X)HTML 5, CSS, Javascript, DOM Maı̂triser la notion de séparation contenu / forme / dynamicité Savoir I modéliser un document sous forme arborescente et traduire ce modèle en un document (X)HTML 5 Université Lille 1 - Licence 1 SESI Technologies du Web 1 4 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Être capables de concevoir des documents web dans le respect des standards. I I I Connaı̂tre les principaux standards du web : (X)HTML 5, CSS, Javascript, DOM Maı̂triser la notion de séparation contenu / forme / dynamicité Savoir I I modéliser un document sous forme arborescente et traduire ce modèle en un document (X)HTML 5 réaliser la mise en forme en utilisant le langage CSS Université Lille 1 - Licence 1 SESI Technologies du Web 1 4 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Être capables de concevoir des documents web dans le respect des standards. I I I Connaı̂tre les principaux standards du web : (X)HTML 5, CSS, Javascript, DOM Maı̂triser la notion de séparation contenu / forme / dynamicité Savoir I I I modéliser un document sous forme arborescente et traduire ce modèle en un document (X)HTML 5 réaliser la mise en forme en utilisant le langage CSS rendre le document dynamique et le manipuler via l’interface DOM / javascript Université Lille 1 - Licence 1 SESI Technologies du Web 1 4 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Être capables de concevoir des documents web dans le respect des standards. I I I Connaı̂tre les principaux standards du web : (X)HTML 5, CSS, Javascript, DOM Maı̂triser la notion de séparation contenu / forme / dynamicité Savoir I I I I modéliser un document sous forme arborescente et traduire ce modèle en un document (X)HTML 5 réaliser la mise en forme en utilisant le langage CSS rendre le document dynamique et le manipuler via l’interface DOM / javascript Être conscient de l’importance du respect des normes Université Lille 1 - Licence 1 SESI Technologies du Web 1 4 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Être capables de concevoir des documents web dans le respect des standards. I I I Connaı̂tre les principaux standards du web : (X)HTML 5, CSS, Javascript, DOM Maı̂triser la notion de séparation contenu / forme / dynamicité Savoir I I I I I modéliser un document sous forme arborescente et traduire ce modèle en un document (X)HTML 5 réaliser la mise en forme en utilisant le langage CSS rendre le document dynamique et le manipuler via l’interface DOM / javascript Être conscient de l’importance du respect des normes Maı̂triser le processus de rédaction et de validation des documents. Université Lille 1 - Licence 1 SESI Technologies du Web 1 4 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Être capables de concevoir des documents web dans le respect des standards. I I I Connaı̂tre les principaux standards du web : (X)HTML 5, CSS, Javascript, DOM Maı̂triser la notion de séparation contenu / forme / dynamicité Savoir I I I I I I modéliser un document sous forme arborescente et traduire ce modèle en un document (X)HTML 5 réaliser la mise en forme en utilisant le langage CSS rendre le document dynamique et le manipuler via l’interface DOM / javascript Être conscient de l’importance du respect des normes Maı̂triser le processus de rédaction et de validation des documents. Savoir utiliser des outils de développement adaptés I I inspecteurs de structure HTML et de style CSS, debugger javascript Université Lille 1 - Licence 1 SESI Technologies du Web 1 4 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Savoir développer des programmes en javascript et connaı̂tre les bases de ce langage. Université Lille 1 - Licence 1 SESI Technologies du Web 1 5 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Savoir développer des programmes en javascript et connaı̂tre les bases de ce langage. I syntaxe Université Lille 1 - Licence 1 SESI Technologies du Web 1 5 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Savoir développer des programmes en javascript et connaı̂tre les bases de ce langage. I I syntaxe spécificité du langage Université Lille 1 - Licence 1 SESI Technologies du Web 1 5 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Savoir développer des programmes en javascript et connaı̂tre les bases de ce langage. I I I syntaxe spécificité du langage réutiliser ce qui a été vu en ocaml (InitProg et API1) Université Lille 1 - Licence 1 SESI Technologies du Web 1 5 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Savoir développer des programmes en javascript et connaı̂tre les bases de ce langage. I I I I syntaxe spécificité du langage réutiliser ce qui a été vu en ocaml (InitProg et API1) fonctionnalités « de base » du langage Université Lille 1 - Licence 1 SESI Technologies du Web 1 5 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Savoir développer des programmes en javascript et connaı̂tre les bases de ce langage. I I I I I syntaxe spécificité du langage réutiliser ce qui a été vu en ocaml (InitProg et API1) fonctionnalités « de base » du langage produire des pages web dynamiques Université Lille 1 - Licence 1 SESI Technologies du Web 1 5 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Savoir développer des programmes en javascript et connaı̂tre les bases de ce langage. I I I I I I syntaxe spécificité du langage réutiliser ce qui a été vu en ocaml (InitProg et API1) fonctionnalités « de base » du langage produire des pages web dynamiques Connaı̂tre les bases de la programmation événementielle. Université Lille 1 - Licence 1 SESI Technologies du Web 1 5 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Savoir développer des programmes en javascript et connaı̂tre les bases de ce langage. I I I I I I syntaxe spécificité du langage réutiliser ce qui a été vu en ocaml (InitProg et API1) fonctionnalités « de base » du langage produire des pages web dynamiques Connaı̂tre les bases de la programmation événementielle. I principes Université Lille 1 - Licence 1 SESI Technologies du Web 1 5 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Savoir développer des programmes en javascript et connaı̂tre les bases de ce langage. I I I I I I syntaxe spécificité du langage réutiliser ce qui a été vu en ocaml (InitProg et API1) fonctionnalités « de base » du langage produire des pages web dynamiques Connaı̂tre les bases de la programmation événementielle. I I principes mise en œuvre Université Lille 1 - Licence 1 SESI Technologies du Web 1 5 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Savoir développer des programmes en javascript et connaı̂tre les bases de ce langage. I I I I I I Connaı̂tre les bases de la programmation événementielle. I I I syntaxe spécificité du langage réutiliser ce qui a été vu en ocaml (InitProg et API1) fonctionnalités « de base » du langage produire des pages web dynamiques principes mise en œuvre Être capables de rechercher des informations dans un document et de les exploiter Université Lille 1 - Licence 1 SESI Technologies du Web 1 5 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Savoir développer des programmes en javascript et connaı̂tre les bases de ce langage. I I I I I I Connaı̂tre les bases de la programmation événementielle. I I I syntaxe spécificité du langage réutiliser ce qui a été vu en ocaml (InitProg et API1) fonctionnalités « de base » du langage produire des pages web dynamiques principes mise en œuvre Être capables de rechercher des informations dans un document et de les exploiter I spécifications de standards (HTML, CSS) Université Lille 1 - Licence 1 SESI Technologies du Web 1 5 TW1 Introduction Documents Web HTML Contenu Arbres A l’issue de ce module vous devriez... I Savoir développer des programmes en javascript et connaı̂tre les bases de ce langage. I I I I I I Connaı̂tre les bases de la programmation événementielle. I I I syntaxe spécificité du langage réutiliser ce qui a été vu en ocaml (InitProg et API1) fonctionnalités « de base » du langage produire des pages web dynamiques principes mise en œuvre Être capables de rechercher des informations dans un document et de les exploiter I I spécifications de standards (HTML, CSS) sites de références Université Lille 1 - Licence 1 SESI Technologies du Web 1 5 TW1 Introduction Documents Web HTML Contenu Arbres Fonctionnement I quelques cours d’amphi, pas nécessairement chaque semaine I I notions d’ordre général 2 TD d’1h30 par semaine, tous en « salle machines » I I I I apprendre par la pratique lire les documentations proposées savoir rechercher une information, l’analyser et l’utiliser explorer, essayer I réalisation de « mini-projets » I exercices à rendre régulièrement, pris en compte dans l’évaluation De nombreux éléments seront acquis via les exercices. Evaluation : contrôles en TD + devoir final + exercices rendus Université Lille 1 - Licence 1 SESI Technologies du Web 1 6 TW1 Introduction Documents Web HTML Contenu Arbres Internet et le web Pour vous... C’est quoi I internet ? Université Lille 1 - Licence 1 SESI Technologies du Web 1 7 TW1 Introduction Documents Web HTML Contenu Arbres Internet et le web Pour vous... C’est quoi I internet ? I le web ? Université Lille 1 - Licence 1 SESI Technologies du Web 1 7 TW1 Introduction Documents Web HTML Contenu Arbres Internet et le web I Internet : un réseau mondial (supranational) de machines interconnectées I I I un réseau de réseaux des protocoles de communication : TCP-IP nombreuses applications : courrier électronique, transfert de fichiers (ftp), messagerie instantanée, peer-to-peer, World Wide Web Université Lille 1 - Licence 1 SESI Technologies du Web 1 8 TW1 Introduction Documents Web HTML Contenu Arbres Internet et le web I Internet : un réseau mondial (supranational) de machines interconnectées I I I I un réseau de réseaux des protocoles de communication : TCP-IP nombreuses applications : courrier électronique, transfert de fichiers (ftp), messagerie instantanée, peer-to-peer, World Wide Web le Web (Tim Berners-Lee, 1989) : I I I I I I système d’information réparti en « pages web » = documents web basé sur la notion d’hypertexte et la notion d’hyperliens permettant de naviguer entre les documents web ,→ les documents forment un graphe = « toile » des protocoles de commmunication HTTP, HTTPS des adresses pour nommer les documents : URL des langages pour créer les documents : HTML, CSS, javascript des navigateurs qui interprètent les documents Université Lille 1 - Licence 1 SESI Technologies du Web 1 8 TW1 I Introduction Documents Web HTML Contenu Arbres W3C « World Wide Web Consortium » I I organisme de normalisation chargé de promouvoir la compatibilité des technologies du web « un seul web partout et pour tous » Université Lille 1 - Licence 1 SESI Technologies du Web 1 9 TW1 I Introduction HTML Contenu Arbres W3C « World Wide Web Consortium » I I I Documents Web organisme de normalisation chargé de promouvoir la compatibilité des technologies du web « un seul web partout et pour tous » HTML5 = HTML5 + CSS3 + javascript Université Lille 1 - Licence 1 SESI Technologies du Web 1 9 TW1 Introduction Documents Web HTML Contenu Arbres Client-Serveur Université Lille 1 - Licence 1 SESI Technologies du Web 1 10 TW1 Introduction Documents Web HTML Contenu Arbres Client-Serveur Université Lille 1 - Licence 1 SESI Technologies du Web 1 10 TW1 Introduction Documents Web HTML Contenu Arbres Documents web I nécessité de respecter les normes/standards, interopérabilité (différents clients) I validation (XHTML5 et CSS) Université Lille 1 - Licence 1 SESI Technologies du Web 1 11 TW1 Introduction Documents Web HTML Contenu Arbres Documents web I nécessité de respecter les normes/standards, interopérabilité (différents clients) I I validation (XHTML5 et CSS) séparation contenu-forme I I I contenu : XHTML, structure du document forme : CSS, présentation, style exemple : sans style – style 1 – style 2 Université Lille 1 - Licence 1 SESI Technologies du Web 1 11 TW1 Introduction Documents Web HTML Contenu Arbres Documents web I nécessité de respecter les normes/standards, interopérabilité (différents clients) I I séparation contenu-forme I I I I validation (XHTML5 et CSS) contenu : XHTML, structure du document forme : CSS, présentation, style exemple : sans style – style 1 – style 2 avantages : I I adaptation aux différents supports, accessibilité facilité de maintenance, évolutivité Université Lille 1 - Licence 1 SESI Technologies du Web 1 11 TW1 Introduction Documents Web HTML Contenu Arbres HTML Ca veut dire quoi HTML ? Université Lille 1 - Licence 1 SESI Technologies du Web 1 12 TW1 Introduction Documents Web HTML Contenu Arbres HTML HTML HyperText Markup Language Université Lille 1 - Licence 1 SESI Technologies du Web 1 12 TW1 Introduction Documents Web HTML Contenu Arbres HTML HTML HyperText Markup Language I un langage de description de document I permet de structurer le contenu d’un document I langage de balisage parenthésé Université Lille 1 - Licence 1 SESI Technologies du Web 1 12 TW1 Introduction Documents Web HTML Contenu Arbres HTML HTML HyperText Markup Language I un langage de description de document I permet de structurer le contenu d’un document I langage de balisage parenthésé XHTML : I une « version » d’HTML conforme au langage XML I XML : eXtensible Meta Language XHTML5 ≡ HTML5 I I I mêmes éléments et mêmes attributs une syntaxe plus rigoureuse plus facilement manipulable par des outils logiciels Université Lille 1 - Licence 1 SESI Technologies du Web 1 12 TW1 Introduction Documents Web HTML Contenu Arbres C’est quoi un langage ? Université Lille 1 - Licence 1 SESI Technologies du Web 1 13 TW1 Introduction Documents Web HTML Contenu Arbres Langage vocabulaire + syntaxe + sémantique HTML : Université Lille 1 - Licence 1 SESI Technologies du Web 1 13 TW1 Introduction Documents Web HTML Contenu Arbres Langage vocabulaire + syntaxe + sémantique HTML : I vocabulaire = éléments prédéfinis, identifiés par des balises I I ouvrante/fermante : <element>/</element> insensible à la casse : <eLEmENt> = <eLeMeNT> mais XHTML ⇒ minuscules Université Lille 1 - Licence 1 SESI Technologies du Web 1 13 TW1 Introduction Documents Web HTML Contenu Arbres Langage vocabulaire + syntaxe + sémantique HTML : I vocabulaire = éléments prédéfinis, identifiés par des balises I I I ouvrante/fermante : <element>/</element> insensible à la casse : <eLEmENt> = <eLeMeNT> mais XHTML ⇒ minuscules sémantique = rôle/sens des éléments I I I I <h1> : un titre de premier niveau <p> : un paragraphe de texte <img> : une image stockée dans un fichier externe <time> : une heure ou une date Université Lille 1 - Licence 1 SESI Technologies du Web 1 13 TW1 Introduction Documents Web HTML Contenu Arbres Langage vocabulaire + syntaxe + sémantique HTML : I vocabulaire = éléments prédéfinis, identifiés par des balises I I I sémantique = rôle/sens des éléments I I I I I ouvrante/fermante : <element>/</element> insensible à la casse : <eLEmENt> = <eLeMeNT> mais XHTML ⇒ minuscules <h1> : un titre de premier niveau <p> : un paragraphe de texte <img> : une image stockée dans un fichier externe <time> : une heure ou une date syntaxe = règles d’écriture du document Université Lille 1 - Licence 1 SESI Technologies du Web 1 13 TW1 Introduction Documents Web HTML Contenu Arbres Structure d’un document Structure minimale : I un DOCTYPE Université Lille 1 - Licence 1 SESI Technologies du Web 1 14 TW1 Introduction Documents Web HTML Contenu Arbres Structure d’un document Structure minimale : I un DOCTYPE I un élément racine <html> Université Lille 1 - Licence 1 SESI Technologies du Web 1 14 TW1 Introduction Documents Web HTML Contenu Arbres Structure d’un document Structure minimale : I un DOCTYPE I un élément racine <html> un élément entête <head> I I I un élément titre <title> déclaration de l’encodage de caractères utilisé Université Lille 1 - Licence 1 SESI Technologies du Web 1 14 TW1 Introduction Documents Web HTML Contenu Arbres Structure d’un document Structure minimale : I un DOCTYPE I un élément racine <html> un élément entête <head> I I I I un élément titre <title> déclaration de l’encodage de caractères utilisé un élément corps <body> Université Lille 1 - Licence 1 SESI Technologies du Web 1 14 TW1 Introduction Documents Web HTML Contenu Arbres <! DOCTYPE html > < html xmlns = " http :// www . w3 . org /1999/ xhtml " > <! -- entête du document -- > < head > < title > Document HTML 5 minimal </ title > < meta charset = " UTF -8 " / > </ head > <! -- corps du document -- > < body > <! -- on placera ici le contenu de la page -- > </ body > </ html > Université Lille 1 - Licence 1 SESI Technologies du Web 1 15 TW1 Introduction Documents Web HTML Contenu Arbres Validation La validation permet de vérifier la correction syntaxique. http://validator.w3.org/nu La validation d’un document produit doit être systématique options à adapter pour validation XHTML5, cf. TD. Université Lille 1 - Licence 1 SESI Technologies du Web 1 16 TW1 Introduction Documents Web HTML Contenu Arbres Règles d’écriture : parenthésage Les éléments non vides doivent toujours avoir une balise ouvrante <element> et une balise fermante </element>. Le contenu de l’élément se trouve entre ces balises. ex : <p> contenu du paragraphe </p> Les éléments vides ont une seule balise terminée par /> : <vide/> Ils n’ont pas de contenu. ex : <br/> Université Lille 1 - Licence 1 SESI Technologies du Web 1 17 TW1 Introduction Documents Web HTML Contenu Arbres Règles d’écriture : Imbrication/Emboitement Le contenu d’un élément peut contenir d’autres éléments « imbriqués ». <p > début < code > emboité1 < strong > emboité2 </ strong > emboité1 </ code > suite </ p > Université Lille 1 - Licence 1 SESI Technologies du Web 1 18 TW1 Introduction Documents Web HTML Contenu Arbres Règles d’écriture : Imbrication/Emboitement Les emboitements obéissent à des règles, tout n’est pas possible. ex : I un élément <p> ne peut pas contenir un élément <h1> I un élément <ul> contient nécessairement au moins un élément <li> I un élément <li> est nécessairement emboité dans un élément <ul> I etc. Université Lille 1 - Licence 1 SESI Technologies du Web 1 19 TW1 Introduction Documents Web HTML Contenu Arbres Règles d’écriture : Imbrication/Emboitement Les éléments ne doivent pas se chevaucher : premier ouvert, dernier fermé. Ceci est interdit : <p > debut < code > emboité ? </ p > Université Lille 1 - Licence 1 SESI suite < code > Technologies du Web 1 20 TW1 Introduction Documents Web HTML Contenu Arbres Attributs I I I I définit une propriété pour un élément se note dans la balise ouvrante de l’élément, en minuscules et sa valeur est entre guillemets " certains sont communs à tous les éléments title information textuelle sur le contenu de l’élément class associe une ou plusieurs classes à l’élément, une classe peut être partagée par plusieurs éléments id nomme un élément de manière unique dans le document etc. d’autres sont spécifiques à un élément src pour l’élément <img> désigne la source de l’image < img src = " images / HTML5_Logo . png " class = " gauche encadree " id = " logo " alt = " le logo HTML 5 " / > Université Lille 1 - Licence 1 SESI Technologies du Web 1 21 TW1 Introduction Documents Web HTML Contenu Arbres Différentes catégories d’éléments cf. Mozilla Developer Network Université Lille 1 - Licence 1 SESI Technologies du Web 1 22 TW1 I Introduction Documents Web HTML Contenu Arbres éléments de flux I contiennent généralement du texte ou du contenu intégré Université Lille 1 - Licence 1 SESI Technologies du Web 1 23 TW1 I Introduction HTML Contenu Arbres éléments de flux I I Documents Web contiennent généralement du texte ou du contenu intégré éléments de phrasé I I définissent le texte et le balisage qu’il contient des séquences de contenu phrasé constituent des paragraphes Université Lille 1 - Licence 1 SESI Technologies du Web 1 23 TW1 I Introduction Contenu Arbres contiennent généralement du texte ou du contenu intégré éléments de phrasé I I I HTML éléments de flux I I Documents Web définissent le texte et le balisage qu’il contient des séquences de contenu phrasé constituent des paragraphes éléments intégrés I importent une ressource définie en dehors du document Université Lille 1 - Licence 1 SESI Technologies du Web 1 23 TW1 I Introduction I Arbres contiennent généralement du texte ou du contenu intégré définissent le texte et le balisage qu’il contient des séquences de contenu phrasé constituent des paragraphes éléments intégrés I I Contenu éléments de phrasé I I HTML éléments de flux I I Documents Web importent une ressource définie en dehors du document éléments de titre Université Lille 1 - Licence 1 SESI Technologies du Web 1 23 TW1 I Introduction I I Arbres contiennent généralement du texte ou du contenu intégré définissent le texte et le balisage qu’il contient des séquences de contenu phrasé constituent des paragraphes éléments intégrés I I Contenu éléments de phrasé I I HTML éléments de flux I I Documents Web importent une ressource définie en dehors du document éléments de titre éléments sectionnants I permettent une décomposition du document Université Lille 1 - Licence 1 SESI Technologies du Web 1 23 TW1 I Introduction I I Arbres contiennent généralement du texte ou du contenu intégré définissent le texte et le balisage qu’il contient des séquences de contenu phrasé constituent des paragraphes éléments intégrés I I Contenu éléments de phrasé I I HTML éléments de flux I I Documents Web importent une ressource définie en dehors du document éléments de titre éléments sectionnants I permettent une décomposition du document Sémantique des éléments I chaque élément possède une sémantique qui définit son usage I lors de la création d’un document faire des choix pertinents d’éléments Université Lille 1 - Licence 1 SESI Technologies du Web 1 23 TW1 I Introduction I I Arbres contiennent généralement du texte ou du contenu intégré définissent le texte et le balisage qu’il contient des séquences de contenu phrasé constituent des paragraphes éléments intégrés I I Contenu éléments de phrasé I I HTML éléments de flux I I Documents Web importent une ressource définie en dehors du document éléments de titre éléments sectionnants I permettent une décomposition du document Sémantique des éléments I chaque élément possède une sémantique qui définit son usage I lors de la création d’un document faire des choix pertinents d’éléments Savoir rechercher l’information (documentation), la lire et l’exploiter Université Lille 1 - Licence 1 SESI Technologies du Web 1 23 TW1 Introduction Documents Web HTML Contenu Arbres Sections Eléments sectionnants <section> section générique dont le contenu est cohérent thématiquement <article> contenu autonome dans un document qui doit pouvoir être réutilisé indépendamment <aside> information connexe au contenu principal « voisin » <nav> contient des liens de navigation vers des fragments du document ou vers d’autres documents (« menu ») Université Lille 1 - Licence 1 SESI Technologies du Web 1 24 TW1 Introduction Documents Web HTML Contenu Arbres Sections Eléments sectionnants <section> section générique dont le contenu est cohérent thématiquement <article> contenu autonome dans un document qui doit pouvoir être réutilisé indépendamment <aside> information connexe au contenu principal « voisin » <nav> contient des liens de navigation vers des fragments du document ou vers d’autres documents (« menu ») Entête et pied <header> introduction à un document, une section, un article. Peut contenir un titre, un logo, etc. <footer> pied de page, d’une section, d’un article, etc. Peut contenir des informations, des liens annexes, etc. Université Lille 1 - Licence 1 SESI Technologies du Web 1 24 TW1 Introduction Documents Web HTML Contenu Arbres < body > < header > < nav > </ nav > </ header > < aside > </ aside > < section > < header > </ header > < article > </ article > < article > </ article > < footer > </ footer > </ section > < article > </ article > < footer > </ footer > </ body > MDN FIL Université Lille 1 - Licence 1 SESI Technologies du Web 1 25 TW1 Introduction Documents Web HTML Contenu Arbres Titres Titres <h1> à <h6> titres, par ordre décroissant d’importance exemple Université Lille 1 - Licence 1 SESI Technologies du Web 1 26 TW1 Introduction Documents Web HTML Contenu Arbres Eléments de flux Ce sont des éléments structurants. Quelques exemples <p> paragraphe, ne peut contenir que des éléments de type phrasé <ol>, <ul> listes <table> tableaux <figure> contenu indépendant accompagné d’une légende et référencé dans le texte. Le plus souvent une image, un diagramme, etc. etc. Découverte par la pratique en TD. Université Lille 1 - Licence 1 SESI Technologies du Web 1 27 TW1 Introduction Documents Web HTML Contenu Arbres Eléments de phrasés Ne peuvent contenir que du contenu de type phrasé. Quelques exemples <em> un élément de texte important, mis en valeur, <strong> un élément de texte très important, encore plus mis en valeur, <code> une portion de code de programme <kbd> une entrée au clavier etc. Découverte par la pratique en TD. exemple Université Lille 1 - Licence 1 SESI Technologies du Web 1 28 TW1 Introduction Documents Web HTML Contenu Arbres Hyperliens <a> L’élément <a> permet de définir des liens externes ou internes au document. La cible du lien est définie par l’attribut href dont la valeur est une URL. I élément de flux ou de phrasé, selon la catégorie du contenu <a href="http://fil.univ-lille1.fr" target=" blank" title="le site du FIL"> le FIL </a> Université Lille 1 - Licence 1 SESI Technologies du Web 1 29 TW1 Introduction Documents Web HTML Contenu Arbres Hyperliens <a> L’élément <a> permet de définir des liens externes ou internes au document. La cible du lien est définie par l’attribut href dont la valeur est une URL. I élément de flux ou de phrasé, selon la catégorie du contenu <a href="http://fil.univ-lille1.fr" target=" blank" title="le site du FIL"> le FIL </a> URL Uniform Resource Locator : identifiant des ressources web = « adresses web » I URL absolue : I I I http://fr.wikipedia.org/wiki/Uniform_Resource_Locator mailto:[email protected]?subject=[TW1]question URL relative : ../images/firefox.png Université Lille 1 - Licence 1 SESI Technologies du Web 1 29 TW1 Introduction Documents Web HTML Contenu Arbres Eléments génériques <div> et <span> <div> élément de flux générique, permet d’organiser le contenu du document <span> élément de phrasé générique, permet de distinguer une portion de texte I pas de sémantique spécifique a priori I sémantique définie implicitement par le rédacteur, via les attributs class et id I prendront leur importance avec les CSS Université Lille 1 - Licence 1 SESI Technologies du Web 1 30 TW1 Introduction Documents Web HTML Contenu Arbres Hors catégorie Certains éléments n’appartiennent à aucune catégorie car ils apparaissent nécessairement emboité dans un autre élément. Quelques exemples <li> un élément dans une liste <ul> ou <ol> <figcaption> la légende d’une <figure> plus en valeur, <tr>, <td> les cellules d’une <table> etc. Université Lille 1 - Licence 1 SESI Technologies du Web 1 31 TW1 Introduction Documents Web HTML Contenu Arbres Des arbres... Vous pensez peut-être qu’un arbre c’est ça Université Lille 1 - Licence 1 SESI Technologies du Web 1 32 TW1 Introduction Documents Web HTML Contenu Arbres Des arbres... Vous pensez peut-être qu’un arbre c’est ça Université Lille 1 - Licence 1 SESI Technologies du Web 1 32 TW1 Introduction Documents Web HTML Contenu Arbres Des arbres... Vous pensez peut-être qu’un arbre c’est ça ou cela Université Lille 1 - Licence 1 SESI Technologies du Web 1 32 TW1 Introduction Documents Web HTML Contenu Arbres Des arbres... Vous pensez peut-être qu’un arbre c’est ça ou cela ou peut-être cela Université Lille 1 - Licence 1 SESI Technologies du Web 1 32 TW1 Introduction Documents Web HTML Contenu Arbres Des arbres... Vous pensez peut-être qu’un arbre c’est ça ou cela ou peut-être cela mais en fait non... Université Lille 1 - Licence 1 SESI Technologies du Web 1 32 TW1 Introduction Documents Web HTML Contenu Arbres Un arbre c’est ça : Université Lille 1 - Licence 1 SESI Technologies du Web 1 33 TW1 Introduction Documents Web HTML Contenu Arbres Vocabulaire sur les arbres Des nœuds de l’arbre. Université Lille 1 - Licence 1 SESI Technologies du Web 1 34 TW1 Introduction Documents Web HTML Contenu Arbres Vocabulaire sur les arbres Le nœud racine de l’arbre Université Lille 1 - Licence 1 SESI Technologies du Web 1 35 TW1 Introduction Documents Web HTML Contenu Arbres Vocabulaire sur les arbres Les nœuds feuilles de l’arbre Université Lille 1 - Licence 1 SESI Technologies du Web 1 36 TW1 Introduction Documents Web HTML Contenu Arbres Vocabulaire sur les arbres sous-arbre de racine le nœud article. Les nœuds du sous-arbre sont les descendants du nœud article Université Lille 1 - Licence 1 SESI Technologies du Web 1 37 TW1 Introduction Documents Web HTML Contenu Arbres Vocabulaire sur les arbres Le nœud article est le père des noeuds h1, p, img et p. Les nœuds h1, p, img et p sont les fils du nœud article. = descendants de premier niveau. Université Lille 1 - Licence 1 SESI Technologies du Web 1 38 TW1 Introduction Documents Web HTML Contenu Arbres Vocabulaire sur les arbres Les nœuds h1, p, img et p sont des nœuds frères. Le nœud img suit le premier nœud p. Le nœud h1 précède le premier nœud p. Université Lille 1 - Licence 1 SESI Technologies du Web 1 39 TW1 Introduction Documents Web HTML Contenu Arbres Structure arborescente d’un document HTML Arbre DOM On parle d’arbre DOM (Document Object Model) d’un document. Les nœuds de l’arbre sont les éléments. exemple Université Lille 1 - Licence 1 SESI Technologies du Web 1 40 TW1 Introduction Documents Web HTML Contenu Arbres Structure arborescente d’un document HTML Arbre DOM On parle d’arbre DOM (Document Object Model) d’un document. Les nœuds de l’arbre sont les éléments. Le plus souvent on ignore les nœuds txt. exemple Université Lille 1 - Licence 1 SESI Technologies du Web 1 40 TW1 Introduction Documents Web HTML Contenu Arbres Structure arborescente d’un document HTML Arbre DOM On parle d’arbre DOM (Document Object Model) d’un document. Les nœuds de l’arbre sont les éléments. Le plus souvent on ignore les nœuds txt. exemple Université Lille 1 - Licence 1 SESI Technologies du Web 1 40 TW1 Introduction Documents Web HTML Contenu Arbres Structure arborescente d’un document HTML exemple Université Lille 1 - Licence 1 SESI Technologies du Web 1 41 TW1 Introduction Documents Web HTML Contenu Arbres Structure arborescente d’un document HTML I on parcourt le document séquentiellement exemple Université Lille 1 - Licence 1 SESI Technologies du Web 1 41 TW1 Introduction Documents Web HTML Contenu Arbres Structure arborescente d’un document HTML I on parcourt le document séquentiellement I chaque élément est un nouveau nœud exemple Université Lille 1 - Licence 1 SESI Technologies du Web 1 41 TW1 Introduction Documents Web HTML Contenu Arbres Structure arborescente d’un document HTML I on parcourt le document séquentiellement I chaque élément est un nouveau nœud I si l’élément <elt> est emboité dans l’élément <boite>, le nœud elt est fils du nœud boite exemple Université Lille 1 - Licence 1 SESI Technologies du Web 1 41 TW1 Introduction Documents Web HTML Contenu Arbres Structure arborescente d’un document HTML I on parcourt le document séquentiellement I chaque élément est un nouveau nœud I si l’élément <elt> est emboité dans l’élément <boite>, le nœud elt est fils du nœud boite I les nœuds des éléments emboités à un même niveau sont frères. Ils se suivent « de gauche à droite » selon leur ordre d’apparition dans le document exemple Université Lille 1 - Licence 1 SESI Technologies du Web 1 41 TW1 Introduction Documents Web HTML Contenu Arbres Le navigateur I interprète en continu l’arbre DOM du document pour afficher la page I chaque élément/nœud occupe une zone rectangulaire dans la page ⇒ « boı̂te » I toute modification de la structure DOM est répercutée ⇒ pages dynamiques Université Lille 1 - Licence 1 SESI Technologies du Web 1 42
