Écriture textuelle de documents structurés Structure notée grâce à des balises <section>... </section> SGML : Standard Generalized Markup Language

Dimension: px

Commencer à balayer dès la page:

Download "Écriture textuelle de documents structurés Structure notée grâce à des balises <section>... </section> SGML : Standard Generalized Markup Language"

Nicolas Primeau
il y a 6 ans
Total affichages :

1 HTML

2 Langages à balises Écriture textuelle de documents structurés Structure notée grâce à des balises <section>... </section> SGML : Standard Generalized Markup Language méta-langage applications : documentation technique, lexicographie New Oxford English Dictionary, 1985 HTML 2

pages hypertextes : HTML, qui est une application

3 Le web et le HTML Web : né en 1990 au CERN à Genève Fondements technologiques : un langage de description de pages hypertextes : HTML, qui est une application particulière de SGML protocole HTTP fondé sur Internet (notamment sur TCP/IP) HTML 3

4 HTML, HyperText Markup Language Jeu fini de balises destiné à décrire des pages web dans une optique de présentation Propriétés Langage simple, facile à écrire Mise en œuvre rapide Permet la navigation au travers des pages d information via les liens Intégration de médias (image fixe, image animée, fichier audio) HTML 4

5 Structure générale d'un document HTML <!DOCTYPE html> <html> <head>  <meta charset="utf-8"> <title> Titre du document </title> </head> <body>... Contenu du document... </body> </html> HTML 5

6 HTML : histoire récente HTML 4 W3C SGML XHTML 1 W3C XML XHTML 2 (draft) W3C XML SGML-like HTML 5 ou XML (draft) WHATWG puis W3C (2007) implémenté dans les navigateurs récents HTML 6

Situation actuelle Norme HTML 5 en cours de finalisation : Déjà largement implémentée dans les navigateurs récents Donc utilisable dès maintenant C'est le

7 Situation actuelle Norme HTML 5 en cours de finalisation : Déjà largement implémentée dans les navigateurs récents Donc utilisable dès maintenant C'est le langage de l'avenir du web Deux syntaxes concrètes Syntaxe simplifiée ( HTML 5 ) la plus utilisée, sera étudiée ici Syntaxe de type XML ( XHTML 5 ) HTML 7

$html C:\server\htdocs\jacquet\ 3 Affichage : interprétation HTML HTML fichier. html 2 Réponse : fichier.$

8 Web : fonctionnement client-serveur Obtention des pages via le protocole HTTP (requête / réponse) Client Serveur web wwwdi.supelec.fr 1 Requête : html C:\server\htdocs\jacquet\ 3 Affichage : interprétation HTML HTML fichier. html 2 Réponse : fichier. html HTML fichier. html Pour tester, les navigateurs savent aussi ouvrir des pages sur disque sans passer par HTTP HTML 8

Clients : navigateurs Parts de marché en Europe, septembre 2013 2,3 2,28 9,17 Chrome 37,33 Firefox 23,64

9 Clients : navigateurs Parts de marché en Europe, septembre ,3 2,28 9,17 Chrome 37,33 Firefox 23,64 IE Safari 25,28 Opera Autres Tendance : respect des standards, innovation rapide Source : Statcounter HTML 9

Logiciels serveurs Parts de marché dans le monde, septembre 2012 15,96 16,05

10 Logiciels serveurs Parts de marché dans le monde, septembre ,96 16,05 23,1 44,89 Apache HTTPd Microsoft IIS nginx Autres Source : Netcraft HTML 10

11 Plugins : disparition en cours Permettent d'intégrer des formats de données supplémentaires dans les pages Apparus vers 1995 dans les navigateurs Exemples : Flash, applets Java, PDF, Silverlight Situation en octobre 2013 : Plugins abandonnés dans IE10/Metro, sur mobiles et tablettes Au niveau de leurs applications : Applets Java moribondes Flash Adobe abandonne développement sur mobile, recentrage sur HTML5 natif Silverlight développement arrêté par Microsoft PDF intégré nativement dans Chrome et Firefox HTML 11

12 Structure d'un document En-tête <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>titre de mon document</title> </head> <body>... </body> </html> Titre : balise title titre de la fenêtre du navigateur, de l'onglet Codage des caractères utilisé dans le fichier HTML 12

13 Point crucial : codage des caractères Documents (X)HTML, XML : fichiers texte Fichier texte contient seulement du texte ou des symboles pas de données supplémentaires type mise en forme seulement des marques pour le passage à la ligne ( caractères spéciaux, cf. '\n' en Java) Du texte ou des symboles... un fichier est une suite finie d'octets (= mots de 8 bits) les caractères (lettres, chiffres, symboles) doivent donc être empaquetés dans un flux d'octets HTML 13

14 Code ASCII (historique) 1963 Chaque caractère est représenté par un nombre (code) 128 caractères codés sur 7 bits (8ème bit inutilisé, ou parfois utilisé comme bit de parité) Comprend : lettres majuscules et minuscules chiffres symboles (=, caractères de contrôle (CR, LF, TAB, BEL,...) HTML 14

15 Table ASCII Issue d'un manuel General Electric, 1972 HTML 15

16 Codes ASCII étendus (historiques) Utilisation du 8 ème bit 128 caractères supplémentaires pour prendre en compte les caractéristiques d une langue ou d un groupe de langues ISO (Latin-1) : français, espagnol, allemand... ISO : polonais, tchèque, hongrois... ISO 8859-xx développés et maintenus de 1982 à 2004 HTML 16

17 Unicode Chaque caractère ou symbole se voit attribuer un numéro unique (code point) Au départ sur 16 bits, maintenant sur 21 bits Plusieurs codages associés : UTF-32/UCS-4, UTF-16/UCS-2, UTF-8,... Forme Bits utiles Code points 0xxxxxxx 1 à 7 0 à xxxxx 10xxxxxx 8 à à xxxx 10xxxxxx 10xxxxxx 12 à à xxx 10xxxxxx 10xxxxxx 10xxxxxx 17 à à HTML 17

18 Pourquoi doit-on indiquer le codage? S u p é l e c , Codage UTF-8 Décodage UTF S u p é l e c HTML 18

19 Pourquoi doit-on indiquer le codage? S u p é l e c , Codage UTF-8 Décodage ISO S u p Ã l e c HTML 19

20 Codages sur le web : Unicode, Unicode! ASCII Unicode UTF-8 Latin-1 Source : The Official Google Blog, 3 février 2012 HTML 20

21 Contenu du document <body> : corps = page (tout ce qui apparaît à l'écran) éléments de type bloc (les uns en-dessous des autres) : structure, groupements, listes, tableaux, formulaires éléments de type inline (au sein d'un bloc, bout à bout pour former des lignes) HTML 21

22 Blocs 1/7 : structure du document <section> : section, partie du document <h1>,..., <h6> : titre de section (de différents niveaux) <article> : article de blog, commentaire <aside> : section supplémentaire ( encadré ) <nav> : section qui contient des liens de navigation <header>, <footer> : en-tête et pied de page <address> : information de contact HTML 22

23 Blocs 2/7 : groupements <p> : paragraphe <pre> : bloc de code <blockquote> : citation <figure> : figure <figure> <img src="courbe_03.png" alt="..." /> <figcaption> Caractéristique courant-tension du dipôle. </figcaption> </figure> <div> : groupement quelconque HTML 23

24 Blocs 3/7 : Listes Unordered list Ordered list <ul> <li>1er élément</li> <li>2ème élément</li> <li>3ème élément</li> </ul> <ol> <li>1er élément</li> <li>2ème élément</li> <li>3ème élément</li> </ol> 1er élément 2ème élément 3ème élément 1. 1er élément 2. 2ème élément 3. 3ème élément HTML 24

25 Blocs 4/7 : Tableaux <table> Table Row ligne <tr> <td>ligne 1, colonne 1</td> <td>ligne 1, colonne 2</td> <td>ligne 1, colonne 3</td> </tr> <tr> <td>ligne 2, colonne 1</td> <td>ligne 2, colonne 2</td> <td>ligne 2, colonne 3</td> </tr> </table> Table Data cellule HTML 25

26 Blocs 5/7 : Multimédia Images <img src="toto.jpg" width="180" height="130" alt="une description de l'image" /> Vidéo <video autoplay="1" controls="1"> <source src="mavideo.ogg" type="video/ogg" /> <source src="mavideo.mov" /> <track kind="subtitles" src="brave.en.vtt" srclang="en" label="english" /> </video> Audio <audio controls="1" preload="auto" autobuffer="1"> <source src="elvis.mp3" /> <source src="elvis.ogg" /> </audio> Dessin dynamique : <canvas> HTML 26

27 Blocs 6/7 : Graphismes, mathématiques Un document HTML5 peut inclure des fragments écrits dans deux autres langages XML : <svg> : image vectorielle SVG <math> : formule mathématique MathML Exemple : HTML 27

28 Blocs 7/7 : Formulaires <form> : formulaire <input> : champ de saisie ; type donné par attribut type text, , password, date, range, checkbox, radio, file, submit... <textarea> : zone de texte multi-lignes <select> : liste de choix Exemple : HTML 28

29 Éléments inline <a> : lien (cf. planche suivante) <em>, <strong> : emphase <cite> : titre d'une œuvre <quote> : citation (mots, phrase) <abbr> : abréviation <time> : date et heure <code>, <var> : fragment de code, variable <sup>, <sub> : exposant, indice <span> : inline quelconque HTML 29

30 Hypertexte : liens <p> Vous pouvez également visiter notre <a href="musee/">musée</a>. </p>... Vous pouvez également visiter notre musée. <h1>le musée</h1> <p> De tout temps les hommes... </p>... HTML 30

31 URL: Uniform Resource Locator Chaîne de caractères qui identifie une ressource Autres exemples : Schéma : moyen d'accéder à la ressource../enseignement/ (URL relative) mailto:christophe.jacquet@supelec.fr file:///home/jacquet/mementolatex.pdf Autres termes parfois rencontrés (abandon progressif?) URN : Uniform Resource Name (pas de moyen d'accès) Exemple : urn:isbn: URI : Uniform Resource Identifier = URL ou URN HTML 31

32 Lier vers un élément donné de la page Attribut id : identifiant unique <h1>le musée</h1>... <h2 id="collections">collections permanentes</h2> <p> Les collections permanentes sont ouvertes à la visite tous les jours sauf le mardi de... </p>... HTML 32

Documents pareils

Programmation Internet Cours 4

Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web