Programmation Web HTML

Dimension: px
Commencer à balayer dès la page:

Download "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

3 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 3

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> <!-- ci-dessous, c est un en-tete --> <h1> Premier en-tete <\h1> <p> coucou </p> <a href="http://www.arte.fr">arte</a> <!-- ci-dessus, un lien --> </body> Remarque Les commentaires sont placés entre des balises en utilisant la syntaxe <!-- comment --> 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

14 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 14

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

30 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

31 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

32 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

33 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

34 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

35 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="http://www.mamedb.com/game/pengo" 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

43 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 37

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

57 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 51

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="http://www.google.com/" 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 me</a> Remarque It is possible to specify the subject, the body, the cc and the bcc of the message. For example, <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

76 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 70

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="http://www.totosa.fr/search.php" 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="http://..." 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="http://..." 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="http://..." 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="http://..." 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="http://..." 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="http://..." 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="http://..." 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="http://..." 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="http://..." 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="http://..." 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="http://..." 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="http://..." 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

122 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 116

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="http://www.youtube.com/embed/j---aiyzngq" 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

136 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 130

137 Compatibilité avec HTML5 Pour connaitre le support HTML5 de votre navigateur : 131

138 Compatibilité avec HTML5 Pour connaitre le support HTML5 des différents navigateurs : 132

139 Compatibilité avec HTML5 Pour connaitre les statistiques des navigateurs : 133

Introduction au Web. Fabien Givors. Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr

Introduction au Web. Fabien Givors. Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr Introduction au Web D'après les cours de Andrea G. B. Tettamanzi Fabien Givors Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr Fabien Givors, 2014 1 Planning des cours

Plus en détail

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl IAE - Web Marketing Créer un site internet «simple» Publier un site internet Référencer un site internet Olivier Toscano Gérant WebCMS Sàrl HTML HTML est un langage à balisage Les balises permettent de

Plus en détail

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles Index A affichage, CSS 180 album photos, créer 83 arrière-plan, CSS 152 images 152 Attributs de balises HTML action 90 align 71 attributs communs 131 background 39 border 39, 70 cellpadding 70 cellspacing

Plus en détail

Technologies Web. Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr

Technologies Web. Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr Technologies Web Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr Plan du cours Cours 1 : Introduction HTML/CSS Cours 2 : Introduction programmation web + javascirpt Cours 3 : Introduction

Plus en détail

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 le langage HTML Maxime Morge Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 Plan Pourquoi est-il nécessaire de connaître le langage HTML? Comment stucturer le contenu d une page? Données

Plus en détail

Denis Monnerat monnerat@u-pec.fr. Modifié: 2015/11/09. IUT de Fontainebleau

Denis Monnerat monnerat@u-pec.fr. Modifié: 2015/11/09. IUT de Fontainebleau WIM 1.1 LANGAGE HTML Denis Monnerat monnerat@u-pec.fr Modifié: 2015/11/09 IUT de Fontainebleau Sommaire 1. Introduction 2. HTML 3. Principaux éléments 4. Index des balises html(5) INTRODUCTION Internet

Plus en détail

Introduction. Rappel : conception, interrogation et mise à jour d une base de données

Introduction. Rappel : conception, interrogation et mise à jour d une base de données Introduction Rappel : conception, interrogation et mise à jour d une base de données De nombreux sites Web ont une (ou plusieurs) BD pour gérer leur données 2/51 Pages Web statiques L utilisateurice demande

Plus en détail

OP4. BD & Web. Résumé de cours. Partie II : HTML 4.0

OP4. BD & Web. Résumé de cours. Partie II : HTML 4.0 Univ.Montpellier II 2005 M. Hascoët OP4 BD & Web Résumé de cours Partie II : HTML 4.0 M. Hascoët mountaz@lirmm.fr Université Montpellier II Place Eugène Bataillon 34095 Montpellier Cedex 05 2/5 1. Introduction

Plus en détail

MODULE HTML CSS. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr

MODULE HTML CSS. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr MODULE HTML CSS Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr ORGANISATION DU MODULE 13 séances de 2 heures une partie cours une partie exercices sur machine. Modalités de contrôle : partiel en fin

Plus en détail

LES FORMULAIRES. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr

LES FORMULAIRES. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr LES FORMULAIRES Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr LES FORMULAIRES Permet de récupérer les informations saisies par l'internaute sur votre site Nécessite un traitement des données : php mail

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86 Plan du travail Chapitre 1: Internet et le Web Chapitre 2: Principes d Internet Chapitre 3 : Principaux services d Internet Chapitre 4 : Introduction au langage HTML 2014/2015 Cours TIC - 1ère année MI

Plus en détail

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas...

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas... Introduction et HTML Technologies du Web 1 Jean-Christophe Routier Licence 1 SESI Université Lille 1 Introduction Objectifs : Présentation des bases de la création de documents web par la découverte des

Plus en détail

Gérer les formulaires

Gérer les formulaires 195 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel sur les formulaires Le formulaire est un outil de base indispensable pour les sites web dynamiques puisqu'il

Plus en détail

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Olivier BOEBION 12/02/2004 1 Le point de départ 1.1 Et la lumière fut... A la fin des années 1980, Tim Berners-Lee travaillant

Plus en détail

TP 8 : Créer son site web de D à Z...

TP 8 : Créer son site web de D à Z... TP 8 : Créer son site web de D à Z... Présentation Nous allons tenter de créer en 2 ou trois séances un site WEB de toute pièce. Vous devrez choisir un thème (ce que vous voulez, ou presque...). Vous établirez

Plus en détail

Programmation Web - HTML

Programmation Web - HTML Programmation Web - HTML Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2014-2015 http://liris.cnrs.fr/fabien.duchateau/ens/lif4/ 1/69 Introduction De nombreux sites

Plus en détail

Internet. Principes généraux Création de site web Langage HTML

Internet. Principes généraux Création de site web Langage HTML Internet Principes généraux Création de site web Langage HTML Internet Principes généraux L a n o t i o n d e r é s e a u Réseau : ensemble d interconnections permettant une communication Ex : réseau téléphonique,

Plus en détail

3. Formulaires. Cours Web. Formulaires. 3. Formulaires. 3. Formulaires. Formulaires. Lionel Seinturier. Université Pierre & Marie Curie

3. Formulaires. Cours Web. Formulaires. 3. Formulaires. 3. Formulaires. Formulaires. Lionel Seinturier. Université Pierre & Marie Curie Cours Web Formulaires Lionel Seinturier Université Pierre & Marie Curie Lionel.Seinturier@lip6.fr 8/9/03 Formulaires HTML 1.0 essentiellement "mono"-directionnel informations fournies par le serveur (suite

Plus en détail

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

Plus en détail

Programmation Web - HTML

Programmation Web - HTML Programmation Web - HTML Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2015-2016 http://liris.cnrs.fr/fabien.duchateau/ens/lif4/ 1/74 Introduction De nombreux sites

Plus en détail

TP 1 : HTML 4. EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows

TP 1 : HTML 4. EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows TP 1 : HTML 4 EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows : Bloc-notes ou bien EDIT en mode MS-DOS suivant votre ordinateur. Les utilisateurs

Plus en détail

HTML/CSS - Travaux Pratiques 2

HTML/CSS - Travaux Pratiques 2 HTML/CSS - Travaux Pratiques 2 Le but de ces séances de TP est de se familiariser avec le format HTML et les feuilles de style CSS pour la création de pages web. Pour cela, vous utiliserez emacs sous Linux

Plus en détail

Bases de données et Sites Web. Li345

Bases de données et Sites Web. Li345 Bases de données et Sites Web. Li345 Remerciements à: Stéphane Gançarski et Philippe Rigaux. Ces transparents sont fortement inspirés du très bon livre : Pratique de MySQL et PHP, troisième édition Philippe

Plus en détail

Smile Mobile Dashboard

Smile Mobile Dashboard Smile Mobile Dashboard 1. Magento Extension The iphone and Android applications require access to data from your Magento store. This data is provided through an extension, available on Magento Connect

Plus en détail

(Programme de formation pour les parents ~ Training program for parents)

(Programme de formation pour les parents ~ Training program for parents) PODUM-INFO-ACTION (PIA) La «carte routière» pour les parents, sur l éducation en langue française en Ontario A «road map» for parents, on French-language education in Ontario (Programme de formation pour

Plus en détail

XHTML. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) XHTML 1 / 56

XHTML. Thierry Lecroq. Université de Rouen FRANCE. Thierry Lecroq (Univ. Rouen) XHTML 1 / 56 XHTML Thierry Lecroq Université de Rouen FRANCE Thierry Lecroq (Univ. Rouen) XHTML 1 / 56 Plan 1 Généralités sur le web 2 Généralités sur XHTML 3 Les principaux éléments 4 Les liens 5 Les listes 6 Les

Plus en détail

La toile mondiale. Réseau TCP/IP. Qu'est-ce qu'un réseau? Protocole TCP/IP. WWW (World Wide Web) HTTP = HyperText Transfer Protocol.

La toile mondiale. Réseau TCP/IP. Qu'est-ce qu'un réseau? Protocole TCP/IP. WWW (World Wide Web) HTTP = HyperText Transfer Protocol. HTML Miguel Tomasena Références : La toile mondiale http://www.siteduzero.com http://www.wschools.com/html http://www.w.org/ html Doctor WWW (World Wide Web) Réseau Qu'est-ce qu'un réseau? Un réseau est

Plus en détail

Partie HTML TD 6 : Liens hypertexte et formulaires

Partie HTML TD 6 : Liens hypertexte et formulaires Partie HTML TD 6 : Liens hypertexte et formulaires 1. Les liens hypertextes Ils permettent la navigation dans les sites Web. Il y a 3 types de liens : - Les liens internes à un site - Les liens internes

Plus en détail

INF04 HTML5 1 Langages et structure du Web. Benoît Habert

INF04 HTML5 1 Langages et structure du Web. Benoît Habert INF04 HTML5 1 Langages et structure du Web Benoît Habert Plan du cours Programmation côté client (4 séances) BH HTML5 Nouvelles balises «sémantiques» Rich media : audio, vidéo CSS3 (transitions, animations,

Plus en détail

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

Plus en détail

1 En route vers HTML 5 et CSS3

1 En route vers HTML 5 et CSS3 IUT de Bobigny 2015-2016 Licence CIWM-I TD n 3 Conception de Pages Web orientée Client Table des matières 1 En route vers HTML 5 et CSS3 1 1.1 La structure d un document HTML 5.................... 2 1.2

Plus en détail

Une (petite) initiation au langage HTML

Une (petite) initiation au langage HTML Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

Instructions Mozilla Thunderbird Page 1

Instructions Mozilla Thunderbird Page 1 Instructions Mozilla Thunderbird Page 1 Instructions Mozilla Thunderbird Ce manuel est écrit pour les utilisateurs qui font déjà configurer un compte de courrier électronique dans Mozilla Thunderbird et

Plus en détail

Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr

Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr Initiation aux techniques du Web Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr Introduction Tableaux La balise (DIV) Polices en HTML Body (corps) et Head (en-tête) attributs Forms(formulaires):

Plus en détail

Compte rendu de PHP MySQL : création d un formulaire de base de données

Compte rendu de PHP MySQL : création d un formulaire de base de données REVILLION Joris Décembre 2009 3EI Compte rendu de PHP MySQL : création d un formulaire de base de données Objectifs : Le principal objectif de ce cours est de découvrir et de nous familiariser avec le

Plus en détail

Un code simplifié, plus léger, moins bavard. Il est plus facile à manipuler et à mettre à jour.

Un code simplifié, plus léger, moins bavard. Il est plus facile à manipuler et à mettre à jour. XHTML : introduction 1. Présentation et historique Le HTML à l origine est un langage simple destiné à la présentation des documents hypermédias. Toutefois au fil des ans, il s est avéré que le HTML ne

Plus en détail

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES...

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES... Diffusion de l information dans Internet Guide de création de documents Word accessibles 5 novembre 2009 OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT...

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

Introduction à PHP. Formulaires HTML et PHP, interactions avec le client. monnerat@u-pec.fr. 6 avril 2015. IUT de Fontainebleau. Introduction à PHP

Introduction à PHP. Formulaires HTML et PHP, interactions avec le client. monnerat@u-pec.fr. 6 avril 2015. IUT de Fontainebleau. Introduction à PHP Formulaires HTML et PHP, interactions avec le client IUT de Fontainebleau 6 avril 2015 1 Formlaire et traitement 2 Texte Cases à cocher Listes Upload de fichiers Sommaire Formlaire et traitement 1 Formlaire

Plus en détail

Web HTML. Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr

Web HTML. Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr Web HTML Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr 1 Plan Fonc-onnement du web Le langage HTML 2 Web : Introduc;on Réseau : mise en commun de ressources (données, imprimantes, ) Internet : Interconnexion

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

Générateur de pages WEB et serveur pour supervision accessible à partir d un navigateur WEB

Générateur de pages WEB et serveur pour supervision accessible à partir d un navigateur WEB AUTOMGEN 8.009 Générateur de pages WEB et serveur pour supervision accessible à partir d un navigateur WEB version 2 : support de sources vidéo, support 3D, support de l ensemble des objets IRIS 2D WEB

Plus en détail

JSP/Servlets Enchaînement de pages. B. Mermet 2009

JSP/Servlets Enchaînement de pages. B. Mermet 2009 JSP/Servlets Enchaînement de pages B. Mermet 2009 Spécification d'une adresse cible Adresse absolue protocole://adresse Adresse relative à l'application /adressepage Adresse relative à la page adressepage

Plus en détail

1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP.

1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP. TP5: LES FORMULAIRES OBJECTIFS : 1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP. PARTIE 1: Formulaire

Plus en détail

Programmation Web. Thierry Hamon

Programmation Web. Thierry Hamon 1/27 Programmation Web Thierry Hamon Bureau H202 - Institut Galilée Tél. : 33 1.48.38.35.53 Bureau 150 LIM&BIO EA 3969 Université Paris 13 - UFR Léonard de Vinci 74, rue Marcel Cachin, F-93017 Bobigny

Plus en détail

WEB page builder and server for SCADA applications usable from a WEB navigator

WEB page builder and server for SCADA applications usable from a WEB navigator Générateur de pages WEB et serveur pour supervision accessible à partir d un navigateur WEB WEB page builder and server for SCADA applications usable from a WEB navigator opyright 2007 IRAI Manual Manuel

Plus en détail

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

Plus en détail

Cours Web nº1. P. Yger (pierre.yger@unic.cnrs-gif.fr) 14 et 18 septembre 2009. Introduction au World Wide Web et à XHTML. Internet et le Web

Cours Web nº1. P. Yger (pierre.yger@unic.cnrs-gif.fr) 14 et 18 septembre 2009. Introduction au World Wide Web et à XHTML. Internet et le Web Internet et le Web Cours Web nº1 Introduction au World Wide Web et à XHTML P. Yger (pierre.yger@unic.cnrs-gif.fr) 14 et 18 septembre 2009 P. Yger (IFIPS) Web et XHTML 14-18 Sep 2009 1 / 37 Internet et

Plus en détail

Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP

Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Au cours de ce TP, vous allez voir comment PHP permet aux utilisateurs, une interaction avec

Plus en détail

HTML 5. Page de base Meta Outils pour Firefox. Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées

HTML 5. Page de base Meta Outils pour Firefox. Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées HTML 5 Page de base Meta Outils pour Firefox Les commentaires Paragraphe et saut de ligne Listes simples et ordonnées Listes imbriquées Les 6 niveaux de titre Indices et exposants Les liens L arborescence

Plus en détail

http://www.bysoft.fr

http://www.bysoft.fr http://www.bysoft.fr Flash Slideshow Module for MagentoCommerce Demo on http://magento.bysoft.fr/ - Module Slideshow Flash pour MagentoCommerce Démonstration sur http://magento.bysoft.fr/ V3.0 ENGLISH

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet Création de sites web INF0326 Outils bureautiques, logiciels et Internet Plan Création de pages web HTML et CSS Création de sites web avec WordPress Créer des pages web Partie 1 Système hypertexte Un système

Plus en détail

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques Contenu Statique Le client envoie une requête avec un nom de fichier Le serveur répond en lui retournant

Plus en détail

Micro-ordinateurs, informations, idées, trucs et astuces utiliser le Bureau à distance

Micro-ordinateurs, informations, idées, trucs et astuces utiliser le Bureau à distance Micro-ordinateurs, informations, idées, trucs et astuces utiliser le Bureau à distance Auteur : François CHAUSSON Date : 8 février 2008 Référence : utiliser le Bureau a distance.doc Préambule Voici quelques

Plus en détail

Présentation de HTML5

Présentation de HTML5 Présentation de HTML5 Option Web Multimédia Polytech Paris-Sud cycle préparatoire 2e année Claude Barras (claude.barras@u-psud.fr) Université Paris-Sud & LIMSI-CNRS 22 septembre 2014 Introduction HTML5

Plus en détail

How to Login to Career Page

How to Login to Career Page How to Login to Career Page BASF Canada July 2013 To view this instruction manual in French, please scroll down to page 16 1 Job Postings How to Login/Create your Profile/Sign Up for Job Posting Notifications

Plus en détail

Monday, December 2 nd 2013. Formation Galaxy

Monday, December 2 nd 2013. Formation Galaxy Formation Galaxy Lundi, 10 Février 2014 This training has not for objectives to introduce every Galaxy tool individually or to build a workflow to process your own data. Objectives: To provide a first

Plus en détail

MODE D'EMPLOI USER MANUAL. MIDI MESSENGER version 1-2-3. MIDI MESSENGER version 1-2-3

MODE D'EMPLOI USER MANUAL. MIDI MESSENGER version 1-2-3. MIDI MESSENGER version 1-2-3 MIDI MESSENGER version 1-2-3 USER MANUAL MidiMessenger has been designed to help virtual organs users by sending Midi messages to the instrument. But MidiMessenger is also a general purpose tool for one

Plus en détail

TP HTML n 3 : Les formulaires et le PHP

TP HTML n 3 : Les formulaires et le PHP TP HTML n 3 : Les formulaires et le PHP 1 ) Qu'est-ce qu'un formulaire? En HTML, un formulaire est un espace de saisie dans une page web, pouvant comporter plusieurs zones, ou champs : on peut y saisir

Plus en détail

lundi 3 août 2009 Choose your language What is Document Connection for Mac? Communautés Numériques L informatique à la portée du Grand Public

lundi 3 août 2009 Choose your language What is Document Connection for Mac? Communautés Numériques L informatique à la portée du Grand Public Communautés Numériques L informatique à la portée du Grand Public Initiation et perfectionnement à l utilisation de la micro-informatique Microsoft Document Connection pour Mac. Microsoft Document Connection

Plus en détail

LE LANGAGE HTML TODO : v1.2.1.0 07/05/2010 peignotc(at)arqendra(dot)net / peignotc(at)gmail(dot)com

LE LANGAGE HTML TODO : v1.2.1.0 07/05/2010 peignotc(at)arqendra(dot)net / peignotc(at)gmail(dot)com LE LANGAGE HTML TODO : - v.2..0 07/05/200 peignotc(at)arqendra(dot)net / peignotc(at)gmail(dot)com Toute reproduction partielle ou intégrale autorisée selon les termes de la licence Creative Commons (CC)

Plus en détail

HTML5 et CSS3 Faites évoluer le design de vos sites web (2ième édition)

HTML5 et CSS3 Faites évoluer le design de vos sites web (2ième édition) Introduction A. La création de sites Web 20 B. Les langages 20 C. Le livre 20 1. Pour les designers Web 20 2. Le contenu 20 Chapitre 1 : L évolution de l HTML et des CSS A. Rapide historique de l Internet

Plus en détail

Introduction à HTML et CSS

Introduction à HTML et CSS ENS de Cachan Introduction à HTML et CSS Françoise Tort Chargement d'une page Web h"p://site.chemin./page.html navigateur requête.html.css.jpg.mp3 serveur web fichiers Le navigateur web traduit les pages,

Plus en détail

Référentiel Général d Accessibilité pour les Administrations RGAA. Annexe 2 : Tests de conformité au RGAA

Référentiel Général d Accessibilité pour les Administrations RGAA. Annexe 2 : Tests de conformité au RGAA Référentiel Général d ccessibilité pour les dministrations RG nnexe 2 : Tests de conformité au RG Page 1/203 Cadres 1. Thématique Cadres 1.1. [Cadres] 1 : bsence de cadres non titrés Tout élément : frame

Plus en détail

ONLINE TIAMA CATALOGS USER GUIDE

ONLINE TIAMA CATALOGS USER GUIDE ONLINE TIAMA CATALOGS USER GUIDE Home page / Accueil 3 4 5 Ref. Description Description Home page Accueil Catalog access Accès catalogue Advanced search Recherche avancée Shopping basket Panier Log off

Plus en détail

Once the installation is complete, you can delete the temporary Zip files..

Once the installation is complete, you can delete the temporary Zip files.. Sommaire Installation... 2 After the download... 2 From a CD... 2 Access codes... 2 DirectX Compatibility... 2 Using the program... 2 Structure... 4 Lier une structure à une autre... 4 Personnaliser une

Plus en détail

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos. KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html

Plus en détail

Technique Internet de Base Javascript avancé

Technique Internet de Base Javascript avancé Technique Internet de Base Javascript avancé morge@di.unipi.it Licence 2 Université Jean Monnet 2008-2009 Introduction Un langage de programmation objet à prototype Un langage de programmation événementiel.

Plus en détail

Accès au support technique produits et licences par le portail client MGL de M2Msoft.com. Version 2010. Manuel Utilisateur

Accès au support technique produits et licences par le portail client MGL de M2Msoft.com. Version 2010. Manuel Utilisateur Accès au support technique produits et licences par le portail client MGL de M2Msoft.com Version 2010 Manuel Utilisateur Access to M2Msoft customer support portal, mgl.m2msoft.com, 2010 release. User manual

Plus en détail

Web et présentation d information spatiale

Web et présentation d information spatiale Université de La Rochelle LUP-SIG 2004-2005 Programmation SIG et Internet Cartographique Web et présentation d information spatiale Moteurs de recherche et formulaires HTML Jean-Michel FOLLIN jmfollin@univ-lr.fr

Plus en détail

Installation et compilation de gnurbs sous Windows

Installation et compilation de gnurbs sous Windows Installation et compilation de gnurbs sous Windows Installation de l environnement de développement Code::Blocks (Environnement de développement) 1. Télécharger l installateur de Code::Blocks (version

Plus en détail

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

Plus en détail

Les outils de création de sites web

Les outils de création de sites web Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site

Plus en détail

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles

Plus en détail

Installing the SNMP Agent (continued) 2. Click Next to continue with the installation.

Installing the SNMP Agent (continued) 2. Click Next to continue with the installation. DGE-530T 32-bit Gigabit Network Adapter SNMP Agent Manual Use this guide to install and use the SNMP Agent on a PC equipped with the DGE-530T adapter. Installing the SNMP Agent Follow these steps to install

Plus en détail

Sélectionner la Ville liée ou l Arrondissement hébergeant la propriété recherchée. Select the City or the Borough where is located the property.

Sélectionner la Ville liée ou l Arrondissement hébergeant la propriété recherchée. Select the City or the Borough where is located the property. 4 méthodes de recherche s offrent à vous / 4 search methods may be used. Par adresse; / by Address Par numéro de lot rénové; / by Renovated lot number Par numéro de matricule; / by Matricule Par numéro

Plus en détail

LES BALISES AUDIO ET VIDÉO EN HTML5

LES BALISES AUDIO ET VIDÉO EN HTML5 LES BALISES AUDIO ET VIDÉO EN HTML5 Eskimon 29 octobre 2015 Table des matières 1 Introduction 5 2 Les balises audio et vidéo 7 2.1 Les balises audio et vidéo.............................. 7 2.2 Les éléments

Plus en détail

Les formulaires. Les formulaires HTML 7/10/15. PermeDent de saisir des informa2ons des usagers de la page web.

Les formulaires. Les formulaires HTML 7/10/15. PermeDent de saisir des informa2ons des usagers de la page web. Les formulaires Les formulaires HTML PermeDent de saisir des informa2ons des usagers de la page web. Ces informa2ons peuvent être traitées par un programme dont on aura spécifié l'url sur un serveur ou

Plus en détail

Référentiel Général d Accessibilité pour les Administrations RGAA

Référentiel Général d Accessibilité pour les Administrations RGAA Référentiel Général d Accessibilité pour les Administrations RGAA Annexe 3 : Grilles de correspondance entre les critères de succès et les tests de conformité Page 1/21 1. Grille de correspondance des

Plus en détail

Aide Utilisateur. Cellpass.fr

Aide Utilisateur. Cellpass.fr Aide Utilisateur Mise en place simple :... 2 Création d une ressource... 2 Installation du module... 5 Test fonction file OK... 7 temps de connexion < 1 seconde(s)... 7 Exemple d'installation PassUp pour

Plus en détail

La vocation purement sémantique de la page HTML a été pervertie avec les années.

La vocation purement sémantique de la page HTML a été pervertie avec les années. Bruxelles Formation CEPEGRA Olivier Céréssia 2012 PRÉAMBULE A mille lieues de la vision structuraliste de ses créateurs, la page HTML est devenue un document hybride mêlant structure, contenu, mise en

Plus en détail

Programmation Web IMAC 2015-2016. TD 8 : Formulaires. 2 décembre 2015

Programmation Web IMAC 2015-2016. TD 8 : Formulaires. 2 décembre 2015 Programmation Web IMAC 2015-2016 TD 8 : Formulaires 2 décembre 2015 Objectif: Dans ce TD, nous allons introduire les formulaires en HTML. Pour pouvoir les utiliser on abordera aussi les plug-ins jquery

Plus en détail

Guide de base WordPress

Guide de base WordPress Guide de base WordPress Pour créer et gérer votre blogue ou site Internet 1- La création du blogue Wordpress Créez votre propre compte Wordpress.com en quelques secondes. C est gratuit. Entrez cette adresse

Plus en détail

Bernard Lecomte. Débuter avec HTML

Bernard Lecomte. Débuter avec HTML Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.

Plus en détail

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

Plus en détail

Introduction à HTML. A. HTML et le web

Introduction à HTML. A. HTML et le web Introduction à HTML Isabelle Debled Renesson Marie-Dominique Devignes LORIA 1 2 1 Fonctionnement en mode client/serveur 1. Construction d une requête ex web : http://www.loria.fr/news CLIENT 5. Mise en

Plus en détail

Initiation à Dreamweaver

Initiation à Dreamweaver Benjamin Godefroy Redouane Zarghoune Initiation à Dreamweaver SI28 Ecriture interactive et multimédia Automne 2004 Organisation du TD Préambule : Introduction au HTML Présentation de Dreamweaver Exercices

Plus en détail

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 Premières applications Web 2.0 avec Ajax et PHP J e a n - M a r i e D e f r a n c e Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 8 Applications Ajax-PHP synchrones Pour commencer simplement, je vous

Plus en détail

Formation (X)HTML-CSS avancé

Formation (X)HTML-CSS avancé Formation (X)HTML-CSS avancé Table des matières 1 Introduction 3 1.1 La philosophie W3C.................................. 3 1.2 Du HTML au XHTML................................. 3 1.3 Et dans la pratique...................................

Plus en détail

1 sur 12 18/11/2015 14:27

1 sur 12 18/11/2015 14:27 Articles Médias Pages Page mise à jour. Afficher la page Commentaires Contact Apparence Extensions Utilisateurs Outils Réglages Portfolios News FAQ Employees Clients Testimonials Flexslider icarousel Animated

Plus en détail

Programmation Avancée pour le Web

Programmation Avancée pour le Web L3 Informatique Option : ISIL Programmation Avancée pour le Web RAMDANI Med U Bouira 1 Contenu du module Introduction aux applications Web Rappels sur les sites Web Conception d une application Web Notion

Plus en détail

RAPID 3.34 - Prenez le contrôle sur vos données

RAPID 3.34 - Prenez le contrôle sur vos données RAPID 3.34 - Prenez le contrôle sur vos données Parmi les fonctions les plus demandées par nos utilisateurs, la navigation au clavier et la possibilité de disposer de champs supplémentaires arrivent aux

Plus en détail

DOCUMENTATION MODULE FOOTERCUSTOM Module crée par Prestacrea

DOCUMENTATION MODULE FOOTERCUSTOM Module crée par Prestacrea DOCUMENTATION MODULE FOOTERCUSTOM Module crée par Prestacrea INDEX : DOCUMENTATION - FRANCAIS... 2 1. INSTALLATION... 2 2. CONFIGURATION... 2 3. LICENCE ET COPYRIGHT... 4 4. MISES A JOUR ET SUPPORT...

Plus en détail

Practice Exam Student User Guide

Practice Exam Student User Guide Practice Exam Student User Guide Voir la version française plus bas. 1. Go to http://training.iata.org/signinup 2. Enter your username and password to access your student profile Your profile was created

Plus en détail

Service Web. Cours de Réseaux. Tuyêt Trâm DANG NGOC 2012-2013. Université de Cergy-Pontoise. Tuyêt Trâm DANG NGOC Service Web 1 / 12

Service Web. Cours de Réseaux. Tuyêt Trâm DANG NGOC 2012-2013. Université de Cergy-Pontoise. <dntt@u-cergy.fr> Tuyêt Trâm DANG NGOC Service Web 1 / 12 Service Web Cours de Réseaux Tuyêt Trâm DANG NGOC Université de Cergy-Pontoise 2012-2013 Tuyêt Trâm DANG NGOC Service Web 1 / 12 Plan 1 Le Web 2 HTTP 3 FTP 4 URL Tuyêt Trâm DANG NGOC

Plus en détail

12. JavaScript. Cours Web. JavaScript. 12. JavaScript. 12. JavaScript. JavaScript. Lionel Seinturier. Université Pierre & Marie Curie.

12. JavaScript. Cours Web. JavaScript. 12. JavaScript. 12. JavaScript. JavaScript. Lionel Seinturier. Université Pierre & Marie Curie. Cours Web Lionel Seinturier Université Pierre & Marie Curie Lionel.Seinturier@lip6.fr 11/7/02 Programme Java s'exécutant côté client Web (ie dans le navigateur) applet prog. "autonome" stocké dans un fichier.class

Plus en détail

AMESD-Puma2010-EFTS- Configuration-update-TEN (en-fr)

AMESD-Puma2010-EFTS- Configuration-update-TEN (en-fr) AMESD-Puma2010-EFTS- Configuration-update-TEN (en-fr) Doc.No. : EUM/OPS/TEN/13/706466 Issue : v2 Date : 23 July 2013 WBS : EUMETSAT Eumetsat-Allee 1, D-64295 Darmstadt, Germany Tel: +49 6151 807-7 Fax:

Plus en détail