Programmation Web HTML

Transcription

1 Programmation Web HTML Christophe Lecoutre IUT de Lens - CRIL CNRS UMR 8188 Université d Artois France Département SRC Septembre

2 Plan 1 Introduction 2 Éléments et attributs élémentaires 3 Listes et Tables 4 Liens et images 5 Formulaires 6 Audio / Video (HTML5) 7 Encore plus de HTML5 2

4 Bibliographie Matthew MacDonald HTML5, the missing manual, 2nd Edition, O reilly Rob Larsen Begininning HTML and CSS, Wrox, 2013 John Duckett. Beginning Web Programming with HTML, XHTML, and CSS, 2nd Edition, Wrox

5 Sites Validation HTML W3C Validator at HTML5 Validator at Specifications/Ressources alsacreations at (site français) W3School at HTML5 caniuse at moderniz at HTML5 polyfills on GitHub at 5

6 Objectif Écrire des pages web avec : HTML : permet de définir la structure des pages CSS : permet de définir l apparence des pages Javascript : permet d ajouter l interactivité/le contrôle Prendre en compte : la simplicité d utilisation : facilité de navigation pour les utilisateurs l accessibilité : rendre les sites utilisables à autant d utilisateurs que possible 6

7 Langages de balisage Langages qui spécifient la structure logique d un document (page). Par exemple : HTML: HyperText Markup Language, used for the web Latex: used for professional elaboration of scientific documents HTML + CSS + Javascript HTML est construit sur les concepts de : balises (tags) éléments (elements) attributs (attributes) 7

8 Balises et éléments Description : une balise est formée par un identifiant (identifier) et deux crochets d angle (two enclosing angle brackets) un élément est formé par un contenu (potentiellement vide) et deux balises de même identifiant l encadrant La balise gauche est appelé la balise ouvrante tandis que la balise droite est appelée la balise fermante La balise fermante possède un forward slash après le premier crochet d angle Exemple <h1> A propos de HTML </h1> Attention! Une balise tagname sans contenu peut s écrire <tagname/>. On dit alors qu elle est auto-fermante. 8

9 Attributs Un attribut est formé par : un nom le symbole = une valeur entre double apostrophes (quotes), ou simple apostrophes Une liste (potentiellement vide) d attributs séparés par des espaces est placé après l identifiant de la balise ouvrante et avant le crochet d angle de droite. Exemple <h1 id="firstheading"> A propos de HTML </h1> Attention! Balises et attributs doivent être écrits en lettres minuscules. 9

10 Tags, Elements, and Attributes attribute name attribute value <h1 id="firstheading"> A propos de XHTML </h1> opening tag (with an attribute) content of the element closing tag element 10

11 Tags, Elements, and Attributes Exemple <body>  <h1> Premier en-tete <\h1> <p> coucou </p> <a href="  </body> Remarque Les commentaires sont placés entre des balises en utilisant la syntaxe  11

12 Versions de HTML Histoire complexe : HTML 4.01 XHTML 1.0 (et XHTML 2) HTML5 De manière à valider un document HTML, une Document Type Declaration, ou DOCTYPE, doit être utilisée. Une DOCTYPE déclare au navigateur la Document Type Definition (DTD) à laquelle le document se conforme. Remarque Pour HTML5, on utilise simplement : <!DOCTYPE html> 12

13 Squelette d un document HTML5 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>... </title> </head> <body>... </body> </html> 13

15 En-têtes HTML offre 6 niveaux d en-tête (headings) : <h1>, <h2>, <h3>, <h4>, <h5> et <h6> Par défaut, les navigateurs affichent les contenus de : <h1>, <h2> et <h3> en plus gros que la taille par défaut <h4> avec la taille par défaut <h5> et <h6> en plus petit que la taille par défaut Remarque On pourra avec CSS numéroter automatiquement les en-têtes de section. 15

16 Exemple <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h3>heading 3 bis</h3> <h4>heading 4 bis</h4> <h5>heading 5</h5> <h6>heading 6</h6> 16

17 Paragraphes et retours à la ligne Deux éléments fréquents : <p> est utilisé pour construire des paragraphes <br> est utilisé pour créer des retours à la ligne Remarque L élément <br> est vide. On écrira plutôt <br /> que <br/> ou <br> qui sont aussi autorisés maintenant. Quelque soit le nombre d espaces consécutifs, seul un espace est affiché. Cela est connus sous le terme de white space collapsing. Exemple <p> ceci est un test de la balise p avec retour a la ligne </p> 17

18 Exemple p { text-align:justify; } <p> Les cheminées crachaient une puanteur de soufre, les tanneries la puanteur de leurs bains corrosifs,... </p> <p> Les rivières puaient, les places puaient, les églises puaient, cela puait sous les ponts et dans les palais. <br /> Le paysan puait... </p> 18

19 Polices à espacement fixe Le contenu d un élément <pre> est écrit avec une police à espacement fixe, et préserve de plus à la fois les espaces et les retours à la ligne. Exemple <pre> x o x o o x o x x </pre> 19

20 Elements <em> et <strong> Ces éléments ajoutent de l information (structurelle) à des fragments de texte. Éléments importants : <em> ajoute une emphase (habituellement en italique) <strong> ajoute une emphase plus forte que <em> (habituellement en gras) De bonnes raisons de les utiliser (plutôt que les éléments <i> et <b>) : les outils tels que les lecteurs d écran (destiné aux personnes aveugles ou fortement malvoyantes) peuvent ajuster l intonation les programmes automatiques peuvent les extraire comme mots-clés (et/ou les indexer) Remarque Les éléments <i> et <b> sont réhabilités, mais juste pour la mise en forme. On peut nénamoins utiliser CSS à la place. 20

21 Exemple <p> <strong> Fermer </strong> le gaz </p> <p> En arrivant <em> téléphoner </em> </p> <br /> <p> Les mot-clès du document sont : <b> HTML </b> et <b> CSS </b> </p> <p> C est peut-être plus beau ici <i> en italique </i> mais c est un point de vue.</p> 21

22 Elements <dfn> et <address> Comme phrase elements, nous trouvons également : <dfn> indique que vous introduisez un terme spécial ou nouveau, typiquement rendu en italique <address> indique une adresse postale, habituellement à la fin d un document, ou encore une adresse de contact (créateur d une page web) Exemple <p> Une fonction est <dfn> recursive </dfn> ssi elle s appelle dans son propre corps. </p> <address> IUT de Lens, <br /> Rue de l universite, <br /> SP 16, LENS Cedex </address> 22

23 Elements <abbr>, <cite>, <blockquote> et <q> <abbr> indique une abréviation; si possible, à accompagner d un attribut title <cite> contient une citation ou une référence à une autre source; souvent utilisé pour inclure des titres de livres, films ou chansons. <blockquote> insère une longue citation (à l intérieur d un bloc) d une autre source. A démarrer après une ligne vide et utiliser <p> à l intérieur de <blockquote>. <q> insère une courte citation (à l intérieur d une phrase) d une autre source. Attention! L élément <cite> est à distinguer de l attribut cite (dont la valeur doit être une URL) habituellement utilisé avec <blockquote> et <q>. 23

24 Exemple <p> J ai un ami appellé <abbr title="samuel"> Sam</abbr> </p> <p> Ceci est un cours sur <abbr title=" Hypertext Markup Language" lang="en">html< /abbr> </p> <p> Ces diapositives sont inspirées de <cite> Beginning web programming with HTML, XHTML and CSS</cite> </p> <p> Oscar Wilde a écrit dans <cite lang="en"> The Picture of Dorian Gray</cite> :</p> <blockquote cite="goodreads.com"> <p> Those who find ugly meanings in beautiful things are corrupt without being charming. This is a fault. Those who find beautiful meanings in beautiful things are the cultivated. For these there is hope. They are the elect to whom beautiful things mean only Beauty. </p> </blockquote> <p> Oscar Wilde a aussi dit <q cite="goodreads. com">always forgive your enemies; nothing annoys them so much.</q> </p> 24

25 Elements pour le code <code>: le contenu est du code de programmation, habituellement rendu en police à espacement fixe. <var>: le contenu indique une variable (informatique) <kbd>: le contenu indique du texte donné par l utilisateur (d un programme) <samp>: le contenu désigne une sortie (d un programme) Exemple <pre> <code> int sum(int i, int j) { return i+j; } </code> </pre> Attention! Certains caractères sont réservés en HTML (voir diapositive suivante) 25

26 Caractères spéciaux Voici ces caractères : Symbol Description Entity Name Number Code & Ampersand & & < Less than < < > Greater than > > " Double quote " " Non-breaking space Exemple <abbr title="tim"> doit être écrit pour être affiché tel quel dans une page HTML sous la forme : \<abbr title=\"tim\"\> 26

27 Elements de présentation Attention! Lorsque cela est possible, préférez une solution CSS Ces éléments suivants peuvent s avérer utiles : <sup>: le contenu est écrit en exposant <sub>: le contenu est écrit en indice Autres éléments : <wbr> pour gérer les césures de mots longs (word breaking) <b> pour caractères gras (bold). <i> pour caractères en italique. <u> (underline) et <strike> sont dépréciés utiliser CSS plutôt que d employer <big> 27

28 Eléments revisités en HTML5 Ce sont : <hr> defines a thematic break in an HTML page (e.g. a shift of topic) ; c est un élément vide, donc écrire <hr />. <small> defines smaller text (and other side comments). <s> specifies text that is no longer correct, accurate or relevant. This tag should not be used to define replaced or deleted text, use <del> to define replaced or deleted text. Exemple <p><s>my car is blue.</s></p> <p>my new car is silver.</p> <hr /> <p><small>copyright 2013 by Toto</small></p> 28

29 Exercice 1 Pour avoir une police à espacement fixe, on utilise : a) <pre> b) <b> c) <tt> d) CSS 2 Pour mettre du texte en gras, on utilise : a) <b> b) <em> c) <strong> d) CSS 3 Est-ce que ce qui suit est bien formé? <p> Je suis <em> content </p> </em> 4 Est-ce que ce qui suit est bien formé? <h1> Programmation Web </h1> <h2> HTML <h2> <p> Il faut respecter la syntaxe </p> 5 Est-ce que ce qui suit est bien formé? <adresse> Toto, rue des géants de la frite, Trouville </adresse> 6 Est-ce que ce qui suit est bien formé? <p> <abbr title="mademoiselle">mlle </abbr> </p> 29

36 Éditer du texte Pour montrer les modifications faites à du texte, utiliser : l élément <ins> pour un ajout; le texte inséré est souligné; l élément <del> pour une suppression; le texte détruit est barré. Exemple <p> Le meilleur jeu vidéo de tous les temps est <del>starcraft 2</del> <ins datetime=" t17:08:00" cite=" title="c est trop bien">pengo</ins> </p> Attention! A n utiliser que pour un site en cours de développement. 30

37 Attributs universels Ce sont les 3 attributs qui peuvent être utilisés sur la majorité des éléments HTML : id: utilisé pour donner un identifiant unique à un élément ; la valeur doit commencer par une lettre; class: utilisé pour spécifier qu un élément appartient à un groupe (classe) spécifique ; la valeur est une liste de noms de classe (habituellement, une seul) avec l espace comme séparateur; title: donne un titre à un élément ; habituellement affiché comme information contextuelle (tooltip). Attention! L attribut style est déprécié, et l attribut name plus valide en HTML. Remarque Les attributs id et class seront particulièrement utiles avec CSS. 31

38 Attributs d internationalisation Il y a 3 attributs d internationalisation qui permettent à l utilisateur d écrire des pages dans différentes langues. Ils sont disponibles pour la plupart des éléments HTML. dir: indique au navigateur dans quelle direction le texte est lu ; sa valeur peut être "ltr" ou "rtl". lang: indique la langue principale ; gardé pour des raisons de compatibilité. Les valeurs de lang sont des codes ISO-639 standard (fr pour french, en pour english, en-us pour U.S. english,...) Remarque Typiquement, vous utiliserez ces attributs avec seulement l élément html. Toutefois, il est possible de les associer avec certains éléments particuliers dans le corps du document. 32

39 Attributs d événements Les attributs d événements permettent d associer un scripte (programme) à un événement (e.g., un clic de souris ou l appui d une touche). Il y a 10 attributs appelés collectivement attributs communs d évènements : onclick, ondoubleclick onmousedown, onmouseup, onmouseover, onmousemove, onmousepress onkeypress, onkeydown, onkeyup L élément <body> accepte les évènements suivants : onload, onunload, Les évènements associés aux formulaires sont : onfocus, onblur, onsubmit, onreset, onselect, onchange 33

40 Éléments bloc et en ligne Chaque élément appartient à l une des deux catégories : un élément bloc démarre sur une nouvelle ligne, et est suivi par une nouvelle ligne; par exemple, <p>, <h1>, <h2>, <h3>, <ul>, <ol>, <dl>, <pre>, <blockquote>, et <address> sont des éléments bloc. un élément en ligne peut apparaître au sein de phrases; par exemple, <em>, <strong>, <sup>, <sub>, <big>, <small>, <ins>, <del>, <code>, <cite>, et <dfn> sont des éléments en ligne. Remarque Les éléments bloc peuvent contenir d autres éléments bloc ou en ligne Les éléments en ligne ne peuvent apparaître qu au sein d éléments bloc, et ne peuvent pas contenir d éléments bloc. 34

41 Grouper les éléments avec <div> et <span> Ces éléments permettent de grouper plusieurs éléments dans une page. Plus précisément, <div> est utilisé pour grouper des éléments bloc <span> est utilisé pour grouper des éléments en ligne Exemple <div class="gras"> <p> Lorsque l alarme <span class="rouge" sonne </span> <... Remarque Les éléments <div> et <span> n affectent pas l apparence de la page, mais sont communément utilisés avec CSS pour associer des styles à des sections de page. 35

42 Exemple.gras { font-weight:bold; }.rouge { color:red; } <p> En cas de danger, d accident d appel d URGENCE : tél xxxx. </p> <div class="gras"> <p> Lorsque l alarme d évacuation sonne </p> <ul> <li> suivre les consignes </li> <li> et surout ne <span class="rouge"> jamais pleurer </span> </li> <li> ni <span class="rouge"> jamais paniquer </span> </li> </ul> </div> 36

44 Listes Unordered lists (<ul>) : sont des listes à puces Ordered lists (<ol>) : sont des listes numérotées Definition lists (<dl>) : permettent de spécifier des termes et leurs définitions Chaque élément d une liste est : contenu dans un élément <li> pour les listes <ul> et <ol>; composé d un élément <dt> (le terme à définir) et d un élément <dd> (la définition du terme) pour les listes <dl>. Exemple <ul> <li>html</li> <li>css</li> </ul> Remarque Vous devez utiliser CSS pour contrôler la numérotation des listes <ol>. 38

45 Exemple <h3> Une liste non numérotée </h3> <ul> <li>html</li> <li>css</li> <li>php</li> </ul> <h3> Une liste numérotée </h3> <ol> <li>html</li> <li>css</li> <li>php</li> </ol> <h3> Une liste de définitions </h3> <dl> <dt>html</dt> <dd>hypertext Markup Language</dd> <dt>css</dt> <dd>cascading Style Sheet</dd> <dt>php</dt> <dd>hypertext Preprocessor</dd> </dl> 39

46 Listes imbriquées Faire attention d écrire proprement les listes imbriquées. Par exemple, Exemple <ul> <li>deux roues</li> <li>quatre roues <ol> <li>automobiles</li> <li>camions</li> </ol> </li> </ul>. Deux roues. Quatre roues 1. Automobiles 2. Camions 40

47 Tables Les tables sont constituées de lignes et de colonnes. A chaque intersection d une ligne et d une colonne, on trouve une cellule. Une table est écrite ligne par ligne. Les éléments utilisés pour construire des tables sont : <table> <tr> (table row): pour construire une ligne <td> (table data): pour construire une cellule <th> (table heading): pour construire une cellule en-tête pour une ligne ou colonne ; habituellement rendu en gras. Exemple <table> <tr> <th>quarter 1 (Jan-Mar)</th> <td> </td>... Attention! Chaque cellule doit être un élément <td> ou <th>, même si l élément est vide. 41

48 Exemple th,td { border: 1px solid black; padding:10px; } <table> <tr> <th></th> <th>charges</th> <th>revenus</th> <th>profit</th> </tr> <tr> <th>jan-mar</th> <td>112</td> <td>218</td> <td><em>106</em></td> </tr>... <tr> <th>oct - Dec</th> <td>118</td> <td>229</td> <td><em>110</em></td> </tr> </table> 42

49 Attributs pour <table> et <tr> Pour l élément <table>: summary fournit une description succincte de la table (utile pour les lecteurs d écran) les autres attributs (autres que ceux qui sont universels ou d évènement) sont dépréciés. Pour l élément <tr>: char is used to specify that the content of each cell within the row must be aligned around the first instance of a particular character known as an axis separator; currently, not really supported by browsers charoff may also be associated with char; les autres attributs (autres que ceux qui sont universels ou d évenement) sont dépréciés. 43

50 Attributs pour <td> et <th> colspan and rowspan spécifie combien de colonnes et de lignes une cellule doit enjamber abbr est utilisé pour fournir une version abrégée du contenu de la cellule headers indicate (for voice browsers) which headers correspond to that cell; its value is a space-separated list of the header cell s id attribute values scope defines a way to associate header cells and data cells in a table char and charoff, defined as for <tr> axis allows you to add conceptual categories to cells (to be used programmatically) les autres attributs (autres que ceux qui sont universels ou d évènement) sont dépréciés. Remarque Un attribut donné pour un élément <td> et <th> remplace un attribut similaire d un élément contenant tel que <tr> ou <table>. 44

51 Enjambement de lignes et de colonnes Notons que si la table possède 3 colonnes et qu une cellule enjambe 2 colonnes dans une ligne, nous n avons besoin que de 2 éléments <td> sur cette ligne. Exemple <table> <tr> <td class="col1" colspan="3"> </td>... Remarque Si une cellule n a pas de contenu, inclure pour éviter des problèmes avec certains navigateurs. 45

52 Exemple <h3> colspan </h3> <table> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2"> </td> </tr> <tr> <td colspan="3"> </td> </tr> </table> 46

53 Head, Body and Foot A table can be divided into three portions: a header, using the element <thead> a body using the element <tbody> a foot using the element <tfoot> The separation of the parts of the table allows for richer formatting of tables by browsers (e.g., for aural browsers, or when printing a table). Remarque A table may contain several <tbody> elements to indicate different pages. Attention! The <tfoot> element must appear before the <tbody> element in the code. 47

54 Exemple <table> <thead> <tr> <td colspan="4">tête de table</td> </tr> </thead> <tfoot> <tr> <td colspan="4">pied de table</td> </tr> </tfoot> <tbody> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> </tbody>... </table> 48

55 Légendes et groupes de colonnes Pour ajouter une légende, il suffit d insérer une élément <caption> avant la première ligne. Pour formatter (avec CSS) des groupes de colonnes adjacentes, définir de tels groupes avec l élément <colgroup> et l attribut span. Exemple <table> <caption>this is the caption</caption> <colgroup span="4" /> <colgroup span="2" /> <tr>... Remarque Il est possible d affiner le concept de groupes de colonnes en utilisant l élément <col>. 49

56 Exercice E crire le code HTML pour reproduire le tableau suivant : 50

58 Hyperliens Les hyperliens permettent au visiteur de naviguer entre des sites web distants en cliquant sur des mots, phrases et images. Pour créer un lien vers un autre document, utiliser l élément <a>. La syntaxe minimale pour son utilisation est : <a href="url"> </a> Il est de bon usage de : rendre le contenu de vos liens concis et précis utiliser l attribut title, affiché comme information contextuelle lorsque l utilisateur passe sur le lien Exemple <a href=" title="search the Web with Google">Google</a> is a very popular search engine. 52

59 URL URL stands for Uniform Resource Locator. The general syntax is: Elements of a URL The protocole, or scheme name, identifies the type of URL you are linking; typically, this is http, but it may be https, ftp, file,... The username and password are optional (required for a password-protected part of a site). The host (name) or IP address gives the destination location for the URL. The port number is optional; if omitted, the default for the scheme (protocol) is used. The path is used to find the resource specified; it is case-sensitive. The query string contains data to be passed to web applications. The anchor part when used with HTTP specifies a precise location on the page. 53

60 URL La plupart du temps, une URL est une simple URL absolue : Elle peut aussi être une URL relative (i.e. la machine hôte est absente) : path Exemple page2.html Remarque Quand le chemin ne se termine pas par un nom de fichier, le serveur web retourne un fichier par défaut (e.g. index.html), ou un message d erreur. 54

61 Ancres Il y a 2 types d ancre qui peuvent être créés avec <a> : les ancres sources, qui sont construites en utilisant <a> avec l attribut href les ancres destinations, qui sont construites en utilisant <a> avec l attribut id Remarque Les ancres sources sont celles auxquelles pensent les gens lorsqu on évoque les hyperliens. C est quelque chose sur lequel on clique et qui nous amène quelque part ailleurs. 55

62 Ancres destinations Une ancre destination permet au créateur d une page de marquer des points spécifiques dans une page qu il est possible d accéder par des ancres sources. Usages communs : Liens Back to top au bas de (sections de) longues pages Tables des matières permettant à l utilisateur d accéder à la section voulue Liens vers des notes de bas de pages ou définitions La valeur de l attribut href d une ancre source qui établit un lien vers une ancre destination doit être la valeur de l attribut id de l ancre destination précédée du caractère #. Remarque Il est possible pour une ancre source de créer un lien avers n importe quel élément possédant un attribut id. 56

63 Ancres sources et destinations Exemple <a id="pagetop">navigation</a> <a href="#pagetop">page top</a> Attention! Le contenu de l ancre destination ne doit pas être vide. 57

64 Exemple <h1><a id="top">wrox Cafe Menu</a></h1> <nav> <a href="#starters">starters</a> <a href="#mains">main Courses</a> <a href="#desserts">desserts</a> </nav> <p>welcome </p> <h2><a id="starters">starters</a></h2> <ul> <li>chestnut and Mushroom Goujons (<a href="#vege">v</a>)</li> <li>goat Cheese Salad (<a href="#vege">v</a>)</li> <li>honey Soy Chicken Kebabs</li> <li>seafood Salad</li> </ul> <p><small><a href="#top">back to top</a>< /small></p> <h2><a id="desserts">desserts</a></h2>... <p><a id="vege">items with a (v) are suitable for vegetarians.</a></p> 58

65 Attributs pour <a> In addition to the universal attributes (i.e. core and internationalization attributes) and the UI event attributes, we find: accesskey: provides a keyboard shortcut on a source anchor to activate a link; ALT + SHIFT + accesskey for Firefox ( 2) target: specifies in which window/frame the linked document will be opened; use " blank" to open it in a new window and " self" for the same window tabindex: specifies the order in which, when the TAB key is pressed, the links (or form controls) obtain focus charset: indicates the character encoding of the linked document (e.g., UTF-8 or ISO ) hreflang: specifies the language of the linked document (e.g., fr) type: specifies the MIME type of the linked document coords and shape: to deal with image maps rel and rel: see documentation 59

66 Linking to Addresses To open a new in the user s default program, with a given address, the syntax is: <a href="mailto:toto@usine.fr"> me</a> Remarque It is possible to specify the subject, the body, the cc and the bcc of the message. For example, <a href="mailto:toto@usine.fr?subject=xhtml&cc=titi@usine.fr">...</a> Attention! The address can be retrieved to be spammed. Use forms (with a server-side scripting language such as JSP or PHP) or Javascript to protect it. 60

67 Images En HTML, nous pouvons : ajouter des images aux documents utiliser les images comme hyperliens diviser une image en sections associées à différents hyperliens; ceci est appelé image map Attention! Attention à la taille des fichiers d image. Attention! Les images sont soumises à des copyright. 61

68 Images Les navigateurs tendent à supporter trois formats d images bitmap : GIF (Graphics Interchange Format) using 256 colors (8-bit GIF) or 16 colors (4-bit GIF) JPEG (Joint Photographic Experts Group Format) PNG (Portable Network Graphics) using 256 colors (8-bit PNG) or many more (24-bit PNG) 62

69 L élément <img> Pour inclure une image, utiliser <img> avec au moins 2 attributs : src: nécessaire pour spécifier l URL de l image à charger ; l URL peut être absolue ou relative alt: nécessaire pour spécifier une alternative textuelle à l image au cas où l utilisateur ne pourrait la voir. Exemple <img src="logo-iut.gif" alt="logo IUT de Lens" /> Remarque Il est important que la valeur de l attribut alt décrive réellement l image. Une image peut ne pas être visible pour 2 raisons : le fichier n a pas été trouvé par le navigateur l utilisateur est malvoyant Cependant, si l image est seulement utilisée pour améliorer la mise en place de la page (et donc ne fournit aucune information), utiliser simplement alt="". 63

70 L élément <img> In addition to the universal and UI event attributes, <img> can also carry the following attributes: width and height: specify the width and height of the image (in pixels); it allows the browser to lay out the image quicker longdesc: used to indicate the URL of a document containing a detailed description of the image ismap and usesmap: used with image maps align, border, hspace, vspace and name, which are deprecated Attention! If you want to display the image a lot smaller, you should create a new reduced-size version of the image (thumbnail), instead of using width and/or height attributes. 64

71 Exemple <p> Taille originale : width 311 height 300 <br /> <img src="penguin2.png" alt="penguin" width="311" height="300" /> </p> <p> Rétrécissement : height 150 (sans width) <br /> <img src="penguin2.png" alt="penguin" height="150" /> </p> <p> Déformation : width 300 height 150 < br /> <img src="penguin2.png" alt="penguin" width="300" height="150" /> </p> 65

72 Images comme liens et Image Maps Pour convertir une image en hyperlien, plutôt que de placer du texte au sein d un élément <a>, il suffit de placer une image. Exemple <a href="index.html" title="click to return home"> <img src="images/banana.gif" alt="banana" /> </a> On the other hand, image maps allow you to specify several links that correspond to different clickable areas, called hotspots, of one single image. There are two types of image maps: Server-side image maps Client-side image maps Attention! The hotspots shouldn t be too small. Besides, you should put text links at the bottom of the page, and indicate this with the alt attribute of the image. 66

73 Server-side Image Maps The image is put inside a <a> element. A special attribute ismap is used, which tells the browser to send the server the coordinates x, y where the user s mouse was when he/she clicked. Exemple <a href="map.php"> <img src="images/states.gif" alt="map of U. States" ismap /> </a> If the user clicks the image at position (50,75) then the browser will send the following query to the server: 67

74 Client-side Image Maps To build one, we use the elements <map> and <area>. The image that forms the map is an element <img> with an attribute usemap. The value of this attribute is the value of the name attribute of the element <map> preceded by #. The element <map> carries the attribute name and contains several <area> elements. Exemple <img src="images/gallery_map.gif" alt="gallery Map" width="500" height="300" usemap="#gallery" /> <map id="idgallery" name="gallery"> <area shape="circle" coords="154,150,59" href="foyer.html" alt="gallery foyer" />... Remarque There is another way of building an image map with an element <map> inside an <object> element. 68

75 Exemple 69

77 Formulaires (forms) Chaque fois que vous souhaitez collecter des informations de la part d un visiteur de votre site, un formulaire est requis. Vous pouvez créer un formulaire en combinant un certain nombre de composants : zones/champs de saisie (Text fields) bouttons (Buttons) cases à cocher (Checkboxes) listes à choix multiple (Select lists)... Attention! HTML est utilisé uniquement pour présenter le formulaire à l utilisateur; il ne permet pas de traiter directement les données du formulaire. 71

78 Formulaires Une fois que l utilisateur a rempli le formulaire, il doit typiquement cliquer sur un bouton pour envoyer les données vers un serveur. Les données sont envoyées au serveur sous la forme de couples nom/valeur, un couple par composant du formulaire : le nom corresponds au nom du composant du formulaire la valeur est celle que l utilisateur a entrée ou sélectionnée Exemple <form action=" method="get" id="idsearch">... </form> Attention! Chaque élément <form> doit être accompagné au mois des 2 attributs action et method. 72

79 Attributs pour l élément <form> action spécifie où envoyer les données du formulaire ; la valeur est une URL correspondant à une page/programme sur une serveur web. method spécifie la méthode à employer pour envoyer les données ; cela peut être "get" ou "post" enctype spécifie la manière dont les données doivent être encodées avant d être envoyées ; utiliser "multipart/form-data" comme valeur quand un composant de formulaire est un file upload control onsubmit et onreset peuvent être utilisées pour lancer une procédure de contrôle (e.g. avec Javascript) quand l utilisateur clique sur un bouton de type submit ou reset Attention! Un formulaire peut contenir des éléments tels que des paragraphes, des en-têtes... mais ne peut pas contenir un autre formulaire. 73

80 Zones de saisie et boutons Il y a 3 types de composants zones/champs de saisie : champ de saisie (simple-ligne) en utilisant l élément <input> avec l attribut type fixé à la valeur "text" champ mot-de-passe en utilisant l élément <input> avec l attribut type fixé à la valeur "password" zone de saisie (multi-ligne) en utilisant l élément <textarea> Il ya 3 façons de créer un bouton : en utilisant l élément <input> avec l attribut type fixé à la valeur "submit", "reset" ou "button"; en utilisant l élément <input> avec l attribut type fixé à la valeur "image"; en utilisant l élément <button> avec l attribut type fixée à la valeur "submit", "reset" ou "button". 74

81 Champ de saisie Un tel composant est créé avec l élément <input> dont l attribut type vaut "text". En plus des attributs universels, les autres attributs de <input> sont : name: donne le nom du couple nom/valeur qui est envoyé au serveur value: fournit une valeur initiale size: spécifie la largeur du champ en terme de caractères pouvant être affichés maxlength: spécifie le nombre maximal de caractères qu un utilisateur peut entrer disabled, readonly, tabindex et accesskey Exemple <p> Search the site: <input type="text" name="txtsearch" /> </p> 75

82 Exemple <form action=" method="get"> <p> Search the site: <input type="text" name="txtsearch" size="20"/> </p> <input type="submit" value="search"/> </form> 76

83 Champ mot-de-passe Un tel composant est créé avec l élément <input> dont l attribut type vaut "password". Le champ masque les caractères tapés en les remplaçant par un point ou une astérisque. Exemple <input type="password" name="pwdpassword" size="20" maxlength="20" /> Attention! Les mot-de-passes sont cachés à l écran mais envoyés au serveur en texte clair. De manière à les rendre sécurisés, il faut une connexion SSL entre le client et le serveur. 77

84 Exemple <form action=" method="get"> <p> Username: <input type="text" name="txtuser" size="20" /> </p> <p> Password: <input type="password" name="pwdpass" size="20" /> </p> <input type="submit" value="log in" /> </form> 78

85 Zones de saisie Un tel composant est créé avec l élément <textarea>. Il permet à l utilisateur d entrer plus d une ligne de texte. Exemple Please, tell us what you think: <br /> <textarea name="txtfeedback" rows="10" cols="50" > Enter your feedback here. </textarea> Remarque Les attributs rows et cols spécifient le nombre de lignes et de colonnes du composant textarea. Attention! Vous avez toujours besoin d une balise ouvrante et d une balise fermante pour <textarea>, même si le contenu est vide (à cause de certains navigateurs). 79

86 Exemple <form action=" method="get"> Please, tell us your opinion: <br /> <textarea name="txtfeedback" rows="10" cols="50" > Enter your feedback here. </textarea> <br /> <input type="submit" value="submit" /> </form> 80

87 Boutons avec <input> Avec l élément <input>, le type de bouton que vous créez est spécifié à l aide de l attribut type. Ses valeurs possibles sont : "submit": crée un bouton qui soumet automatiquement les données du formulaire (lorsqu on clique dessus) "reset": crée un bouton qui réinitialise automatiquement les composants à leurs valeurs initiales "button": crée un bouton qui peut être utilisé pour exécuter un script coté client Exemple <input type="submit" value="soumission" /> <input type="reset" value="clear" /> <input type="button" value="calcul" onclick="calculer()" / Remarques L attribut value spécifie le texte affiché sur le bouton. Les attributs onclick, onfocus et onblur peuvent être utilisés pour lancer une procédure de contrôle. 81

88 Utiliser des images pour les boutons Vous pouvez utiliser une image pour un bouton plutôt que d utiliser un bouton standard. Un tel composant est créé avec <input> dont l attribut type vaut "image". Nous avons besoin de 2 attributs supplémentaires : "src": spécifie la source du fichier contenant l image "alt": fournit une alternative textuelle à l image Exemple <input type="image" name="btnpanic" src="imagepanic.gif" alt="submit" /> Remarque Un bouton image est un bouton de type submit. En outre, les coordonnées x et y de l endroit où l utilisateur a cliqué sont envoyées au serveur. 82

89 Exemple input, button { margin-bottom:10px; } <form action=" method="get"> <p> Name <input type="text" name="txtname" /> </p> <input type="submit" name="btnvotered" value="vote for reds" /> <input type="submit" name="btnvoteblue" value="vote for blues" /> <br /> <input type="reset" value="clear" /> <br> <input type="button" value="calculate" onclick="calculate()" /> <br /> <input type="image" name="btnimage" src="submit.gif" alt="submit" /> </form> 83

90 L élément <button> L élément <button> est un ajout plus récent (que <input>) qui permet de spécifier le texte figurant sur le bouton entre les balises ouvrantes et fermantes. Exemple <button type="submit"> Submit </button> <button type="reset"> <strong> Clear this form </strong> </button> <button type="button"> Compute something </button> <button type="button"> <img src="images/submit.gif" alt="another submit" /> </button> Attention! Faire attention à cet élément car les navigateurs le traitent différemment. 84

91 Exemple <form action=" method="get"> <button type="submit">submit</button> <br /> <button type="reset"> <strong> Clear this form </strong> I want to start again </button> <br /> <button type="button"> Compute something </button> <br /> <button type="button"> <img src="fig.gif" alt="submit" /> </button> </form> 85

92 Cases à cocher L utilisateur peut basculer entre les positions on et off en cliquant sur la case à cocher. Un tel composant est créé avec <input> dont l attribut type vaut "checkbox". Ce composant est idéal pour : fournir une simple réponse oui/non avec une case à cocher sélectionner plusieurs items d une liste d options possibles Exemple <input type="checkbox" name="chkaccept" checked /> I accept the terms... <br /> <input type="checkbox" name="chkskills" value="css"/> CSS <br /> <input type="checkbox" name="chkskills" value="php"/> PHP <br /> Remarques En l absence de l attribut value, la valeur est automatiquement "on". Plusieurs cases à cocher peuvent partager le même nom. 86

93 Exemple <form action=" method="get"> <b> Quelles sont vos compétences? </b> <input type="checkbox" name="chkskills" value="html" /> HTML <br />... <input type="checkbox" name="chkskills" value="php" /> PHP <br /> <input type="submit" value="submit" /> </form> <br /> <form action=" method="get"> <input type="checkbox" name="ack" checked /> I accept the conditions <br /> < input type="submit" /> </form> 87

94 Boutons radios L utilisateur peut sélectionner une seule option à un moment donné dans un groupe qui a été déclaré. Un tel composant est créé avec <input> dont l attribut type vaut"radio". Exemple <input type="radio" name="radclass" value="first"/> First class <input type="radio" name="radclass" value="business"/> Business class Remarque Un groupe de boutons radios correspond à tous les boutons radio partageant la même valeur de l attribut name. Attention! Vous devez fournir au moins 2 boutons radios dans chaque groupe. 88

95 Exemple <form action=" method="get"> <b> En quelle classe voulez-vous voyagez? </b> <br /> <input type="radio" name="radclass" value="first"/> Première <br /> <input type="radio" name="radclass" value="biz"/> Business <br /> <input type="radio" name="radclass" value="eco"/> Economie <br /> <input type="submit" value="send" /> </form> 89

96 Exercice On souhaite écrire le formulaire suivant qui comporte un champ de saisie, trois cases à cocher et un bouton submit. Pour chaque case à cocher, la description est donnée ici par une image. Les images sont des icônes de taille 32x32 pixels et ont pour nom java.png, python.png et php.png. Attention! Dans la vraie vie, on évitera d utiliser une image plutôt que du texte pour une utilisation aussi sensible. 90

97 Listes à choix multiple Une liste à choix multiple permet de sélectionner un item dans une liste déroulante, et peut prendre bien moins de place qu un groupe de boutons radios. Un tel composant est créé avec <select> contenant plusieurs éléments <option>. Exemple <select name="selcolor"> <option value="red"> Red </option> <option value="green"> Green </option>... </select> Parmi les attributs pour <select>, on trouve : size: spécifie le nombre de lignes de la liste pouvant être visibles à un instant donné; on peut alors obtenir une liste avec un ascenseur multiple: permet de sélectionner plusieurs items dans la liste 91

98 Exemple <form action=" method="get"> <select name="selcolor"> <option selected value="">select color </option> <option value="red"> Red </option> <option value="green"> Green </option> <option value="blue"> Blue </option> </select> <input type="submit" value="choose" /> </form> <form action=" method="get"> <select name="selday" size="4" > <option value="mon">monday</option> <option value="tue">tuesday</option>... <option value="sun">sunday</option> </select> <input type="submit" value="submit" /> </form> 92

99 Grouping Options It is possible to group options using the <optgroup> element which acts as a container for several options. The <optgroup> element can carry a label attribute. Exemple <select name="sellinformation"> <optgroup label="hardware"> <option value="desktop"> Desktop computers </option> <option value="laptop"> Laptop computers </option> </optgroup>... Remarque To initially have one option selected, you must write <option selected... 93

100 File Upload Controls You can propose a form control in order to allow the user to upload a file to the server. Such a control is created by an element <input> with an attribute type whose value is "file". Exemple <form enctype="multipart/form-data"...> <input type="file" name="fileupload" accept="image/*" />... Remarque The enctype attribute of the <form> alement indicates here that only files with an image format can be uploaded; but this is partially supported by browsers. Attention! The method and enctype attributes of the <form> element must be given the values "post" and "multipart/form-data", repectively. 94

101 Composants cachés Pour passer de l information entre différentes pages sans que l utilisateur ne le voie, vous pouvez utiliser un composant caché. Un tel composant est créé avec <input> dont l attribut type est fixé à "hidden". Exemple <input type="hidden" name="hidname" value="toto" /> Attention! L information contenue dans le composant caché ne doit pas être confidentielle car elle est visible dans le code source. 95

102 Exemple <form action=" method="post" enctype="multipart/form-data"> <input type="file" name="fileupload" accept="image/*" /> <br /> <br /> <input type="submit" value="submit" /> </form> <p> <strong> NB : Il est nécessaire d utiliser method="post". </strong> </p> <br /> <form action=" method="get"> <input type="hidden" name="secret" value="coucou" /> <input type="submit" value="click here. " /> </form> 96

103 L élément <label> Pour tout composant de formulaire n ayant pas un attribut label, il est de bonne pratique d utiliser l élément <label>. La valeur de l attribut for de l élément <label> doit être la valeur de l attribut id d un composant. Exemple <tr> <td> <label for="idname"> User name </label> </td> <td> <input type="text" id="idname" name="txtname" /> </td> Remarque Pour un champ de saisie, il est habituel de placer le label à gauche, tandis que pour les cases à cocher et les boutons radios c est à droite. Remarque Une alternative est d utiliser l élément <label> en tant que conteneur, mais cela ne permet pas de contrôler complètement l endroit où le label sera positionné. 97

104 Elts <fieldset> and <legend> Pour de grands formulaires, les éléments <fieldset> et <legend> peuvent aider à grouper les composants : <fieldset> crée une bordure <legend> ajoute une légende Exemple <fieldset> <legend> <em> Contact Information </em> </legend> <label> First name: <input type="text" name="txtfname" />... Attention! Lorsqu il est utilisé, l élément <legend> doit toujours être le premier fils de l élément <fieldset>. 98

105 Exemple <form> <fieldset> <legend> <em> Connectez vous </em> </legend> <table> <tr> <td> <label for="idname"> User name </label> </td> <td> <input type="text" id="idname" name="txtusername" /> </td> </tr> <tr> <td> <label for="idpwd"> Password </ label> </td> <td> <input type="password" id="idpwd" name="pwdpassword" /> </td> </tr> </table> </fieldset> <p> <input type="submit" value="send" /> </p> </form> <p> <strong> NB : Ne pas utiliser methood="get" dans la vraie vie car le mot de passe est visible lors de l envoi. </strong> </p> 99

106 Contrôler le focus Les éléments avec lesquels l utilisateur peur interagir peuvent recevoir le focus. Pour contrôler l ordre dans lequel les éléments peuvent obtenir le focus, utiliser l attribut tabindex avec une valeur comprise entre 0 et Exemple <input type="checkbox" name="chkn" value="1" tabindex="3" <input type="checkbox" name="chkn" value="2" tabindex="7" Remarque 0 est pour les éléments sans l attribut tabindex. Attention! Un élément désactivé (disabled) ne peut obtenir le focus. 100

107 Access Keys Access keys représentent des raccourcis clavier. Exemple <legend accesskey="c"> Contact Information (SHIFT + ALT + C) </legend>... <input accesskey="e" type="submit" value="enter" /> Les éléments suivants peuvent être accompagnés de l attribut accesskey : <a>, <area>, <button>, <input>, <label>, <legend>, <textarea> les éléments suivants peuvent être accompagnés de l attribut tabindex : <a>, <area>, <button>, <input>, <object>, <select>, <textarea> 101

108 Composants désactivés et en lecture seule Certains composants de formulaire peuvent porter les attributs disabled et readonly. readonly: spécifie que l utilisateur ne peut changer la valeur du composant (mais un scripte peut). Un couple nom/valeur pour le composant est envoyé lorsque le formulaire est soumis. disabled: spécifie que l utilisateur ne peut changer la valeur du composant (mais un scripte peut réactiver le composant). Un couple nom/valeur pour le composant n est pas envoyé au serveur lorsque le formulaire est soumis. 102

109 Attribut placeholder Cet attribut permet de placer une indication au niveau de certains éléments <input>, disparaissant dés que l utilisateur entre une information. Exemple <input type="text" name="query" placeholder="recherche"> <button type="submit">ok</button> <input type="text" name="lgn" placeholder="nom d utilisateur"> <input type="password" name="pwd" placeholder="mot de passe"> <button type="submit">se connecter</button> 103

110 Validation : HTML Un test de validation est effectué à chaque soumission (bouton submit) pour tout controle ayant l attribut required Pour une validation instantanée (c est-à-dire, dés que l utilisateur quitte un champ), il faut utiliser Javascript. Remarque Pour désactiver (temporairement) la validation au niveau d un formulaire, il faut utiliser novalidate au niveau de l élément <form>. Une alternative est d utiliser formnovalidate au niveau d un bouton (submit). Exemple <form... novalidate> <input type="text" name="login" required> <input type="text" name="mail" required>

111 Validation : CSS Il est possible d utiliser les pseudo-classes suivantes pour accompagner la gestion de validation : :required, pour tout élément <input> ayant l attribut required :optional, pour tout élément <input> n ayant pas l attribut required :valid et :invalid pour tout élément valide et invalide couramment :in-range et :out-of-range pour les éléments qui utilisent les attributs min et max Exemple input:required:invalid { background-color:lightyellow; } 105

112 Validation : expressions régulières et attribut pattern Il est possible d utiliser l attribut pattern pour forcer le texte tapé à respecter une certain forme, donnée par une expression régulière. Exemple <label for="promocode">promotion Code</label> <input id="promocode" placeholder="qrb-001" title= "Your promotion code is three uppercase letters, a dash, then three numbers" pattern="[a-z]{3}-[0-9]{3}"> Remarque Certaines 106

113 Validation : Javascript Il est possible d utiliser la fonction setcustomvalidity de Javascript pour controler la validité du texte tapé. Exemple <script> function validercommentaire(control) { if (control.value.length < 20) control.setcustomvalidity("commentaire trop court."); else control.setcustomvalidity(""); } </script> // pas d erreur <textarea oninput="validercommentaire(this)" required> </textarea> 107

114 Validation : Polyfill Pour gérer les problèmes rencontrés avec les navigateurs anciens (type IE), étudier les solutions sur comme par exemple Exemple <script src="shared/js/modernizr.com/modernizr forms.j </script> <script src="shared/js/html5forms.js" data-webforms2-support="all" data-webforms2-force-js-validation="true"> </script> Remarque On peut simplement énumérer les fonctionnalités dont on a besoin comme par exemple : data-webforms2-support="validation,placeholder" 108

115 Attributs autofocus et autocomplete autofocus permet de placer le focus sur un controle <input> donné. autocomplete permet d éviter l auto-completion lorsque cela est sensible (login, etc.) ; valeurs on/off. Exemple <form... autocomplete="off"> <input type="text" name="login" autofocus>... Remarque Il n est possible d utiliser autofocus qu une seule fois par formulaire. 109

116 Attributs autocorrect, autocapitalize... Il peut etre pertinent de régler certains de ces attributs, notamment pour certains mobiles. autocorrect pour la correction automatique (on/off). autocapitalize pour la mise en majuscule automatique (on/off). spellcheck (true/false) Exemple <form autocomplete="off" autocapitalize="off" autocorrect="off"> <input name="name" placeholder="please enter your name"><br> <input name="street" placeholder="please enter street"><br> <textarea cols="10" rows="8" ></textarea> </form> 110

117 Nouveaux controles (HTML5) Nouvelles valeurs de type pour <input> : , adresse unique ou liste (avec la virgule comme séparateur) si l attribut multiple est positionné tel url number, nombre avec la possibilité d encadrer celle-ci avec les attributs min et max et de gérer les parties fractionnaires avec step range, pour choisir un nombre à l aide d un slider color, pour choisir une couleur à l aide d une boite de dialogue search Exemple <label for=" "> <em>*</em></label> <input id=" " type=" " required>> <label for="age">age<em>*</em></label> <input id="age" type="number" min="0" max="120" step="0.5"> 111

118 Nouveaux controles (HTML5) Pour entrer une date ou heure, nous disposons des valeurs suivantes de type pour <input> : date, pour choisir une couleur à l aide d une boite de dialogue ; format YYYY-MM-DD datetime; format YYYY-MM-DDTHH:mm:ss (secondes optionnelles) datetime-local month ; format YYYY-MM week, format YYYY-Www (par exemple, 2014-W02) time ; format HH:mm:ss.ss (secondes optionnelles). Remarque Possibilité d utiliser les attributs min et max. Par exemple : <input type= date min= max= > Remarque Utiliser polyfill, par exemple la librairie HTML5Forms pour les navigateurs qui n implantent pas ces éléments 112

119 Exemple Telephone Number:<br> <input type="tel" name="txttel"> <br> <input type=" " name="txt "> Favorite Color:<br> <input type="color" name="txtcolor"> Date of Birth:<br> <input type="date" name="txtdate"> 113

120 Suggestions avec datalist Pour créer une liste de suggestions, il faut créer un élement <datalist> en y plaçant des <option> et l associer à un autre élément à l aide de l attribut list. <datalist id="animaux"> <option value="zebre"> <option value="chat"> <option value="caribou">... <option value="crabe"> </datalist>... <input list="animaux"> Exemple Remarque Il est possible d utiliser l attribut label en plus de value ; le label sera affiché, la veleur sera envoyée. 114

121 Elements <progress> et <meter> L élément <progress> affiche une barre de progression palpitante, sauf si une valeur est donnée à l attribut value. L élément <meter> affiche une barre (jauge) indiquant une valeur relative par rapport à un intervalle. Exemple <progress>task in progress...</progress> <progress value=0.50>50%</progress> <progress max=200 value=100>50%</progress> <meter min="5" max="70" value="28">28 pounds</meter> <meter min="5" max="100" high="70" value="79">79 pounds</meter> Remarque Un jeu de couleurs est utilisé pour les jauges selon que les valeurs soient jugées basses ou élevées par rapport aux valeurs des attributs low and high. 115

123 Technologies Encore à venir pour HTML5 : gestion copyright (HTML 5.1?) audio/video recording (element <device>?) controle fin du streaming et buffering gestion dynamique pour l audio 117

124 Element <audio> Grande simplicité. Exemple <audio controls src="song.mp3"> </audio> Remarque Il est nécessaire d utiliser une balise ouvrante et une balise fermante 118

125 Attributs pour <audio> autoplay specifies that the audio will start playing as soon as it is ready controls specifies that audio controls should be displayed (such as a play/pause button etc) loop specifies that the audio will start over again, every time it is finished muted specifies that the audio output should be muted preload avec 3 valeurs possibles : auto : the browser should load the entire audio file when the page loads metadata : the browser should load only metadata when the page loads none the : browser should NOT load the audio file when the page loads src specifies the URL of the audio file 119

126 Element <video> Grande simplicité. Exemple <video controls src="film.mp4"> </video> Remarque Il est nécessaire d utiliser une balise ouvrante et une balise fermante 120

127 Attributs pour <video> Les mêmes que pour <audio>, et aussi : height width poster qui indique le nom d un fichier contenant une image utilisée si : la première image de la video n a pas encore été téléchargée si l attribut preload a comme valeur none si le fichier video n est pas trouvé (ou reconnu) Exemple <video src="video.mp4" poster="image.jpg"> </video> Remarque Si la boite est plus grande (valeurs explicites de heigth et width) que la video, celle-ci est élargie dans la mseure du possible (pas de déformation) 121

128 Oui mais différents formats Pour l audio Format Description Extension MIME MP3 format classique.mp3 audio/mpeg OGG Vorbis standard libre.ogg audio/ogg WAV audio brut.wav audio/wav Pour la video Format Description Extension MIME H.264 standard de l industrie.mp4 video/mp4 OGG Theoria standard libre.ogv video/ogg WebM nouveau format (VP8).webm video/webm 122

129 Fichiers videos Ils utilisent trois formats : le codec video (H.264, Theoria ou WebM par exemple) le codec audio (MP3 ou Vorbis par exemple) le format global du container qui encapsule le tout (avec aussi par exemple des fichiers pour les sous-titres et/ou des images) Le type.mkv est un format qui peut utiliser du H.264 ou du Theoria. 123

130 Fallback Devant le problème d absence de standard, une solution de repli est de proposer plusieurs formats : Exemple <audio controls> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Votre navigateur n accepte pas l element audio. </audio> <video controls> <source src="film.webm" type="video/webm"> <source src="film.mp4" type="video/mp4"> Votre navigateur n accepte pas l element video. </video> Remarque le problème, c est qu il faut encoder la même séquence audio ou video de 124

131 Autres solutions de repli Pour une solution hénergée (Dailymotion, Youtube, etc.), il faut uploader la video et récupérer la ligne de code qui correspond à un élément <iframe>. Exemple <iframe width="420" height="315" src=" allowfullscreen> </iframe> Pour une solution Flah, on utilise un élément <object>. Remarque Possibilité d intégrer une solution de repli Flash au sein d un élement HTML5, ou le contraire (non présenté ici). 125

132 Avec Javascript pour l audio Exemple <audio id="song" src="song.mp3"></audio>... var audio = document.getelementbyid("song"); audio.play();... audio.pause(); audio.currenttime = 0; // pause() et cette instruction = sto... audio.volume=5; alert(audio.volume + " " + audio.duration);... var audiobis = document.createelement("audio"); if (audiobis.canplaytype("audio/ogg")) audiobis.src = "song2.ogg"; else if (audiobis.canplaytype("audio/mp3")) audiobis.src = "song2.mp3"; 126

133 Avec Javascript pour la video Exemple <video id="film" src="film.mp4" ontimeupdate="progress()"></ <progress id="prg" value="0"></progress> <p id="time">0 seconde.</p>... var video = document.getelementbyid("video"); video.play(); video.playbackrate = 2;... function progress() { var newvalue=video.currenttime / video.duration; document.getelementbyid("prg").value = newvalue; document.getelementbyid("time").innerhtml=video.currenttim } 127

134 Sous-titres De nombreux formats pour timed text tracking : WebVTT (Web Video Text Tracks Format) ; extension.vtt ; voir TTML (Timed Text Markup Language) ; W3C standard mais en perte de vitesse... Exemple 00:00: > 00:00:7.000 apparaît après 3 secondes jusque 7 secondes 00:01: > 00:01: dure 10 secondes à partir d une minute 00:01: > 00:01: <i> sous-titre </i> en italique juste après le précédent Remarque Il existe des outils pour créer les sous-titres. Par exemple 128

135 Sous-titres : élément <track> Exemple <video controls width="600" height="400"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <track src="movie.vtt" srclang="en" kind="subtitles" label="english" default> <track src="moviefr.vtt" srclang="fr" kind="subtitles" label="french"> </video> Remarque Il existe un polyfill pour les sous-titres, tel que par exemple 129