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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Conformité RGAA du site internet du Plan PME Rhône-Alpes Rapport d évaluation

Conformité RGAA du site internet du Plan PME Rhône-Alpes Rapport d évaluation Conformité RGAA du site internet du Plan PME Rhône-Alpes Rapport d évaluation Site web évalué : http://planpme.rhonealpes.fr/ Date de l évaluation : 28 novembre 2014 Version du RGAA : RGAA 2.2 Equivalence

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

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

Tutoriel de formation SurveyMonkey

Tutoriel de formation SurveyMonkey Tutoriel de formation SurveyMonkey SurveyMonkey est un service de sondage en ligne. SurveyMonkey vous permet de créer vos sondages rapidement et facilement. SurveyMonkey est disponible à l adresse suivante

Plus en détail

Technique Internet de Base Introduction au HTML

Technique Internet de Base Introduction au HTML Technique Internet de Base Introduction au HTML morge@di.unipi.it Licence 2 Université Jean Monnet 2008-2009 Déroulement Organisation CM: Vendredi 10h-13h 30/01, 07/02,... TP: Lundi 14h-16h 02/02, 09/02,...

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

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

DOCUMENTATION - FRANCAIS... 2

DOCUMENTATION - FRANCAIS... 2 DOCUMENTATION MODULE SHOPDECORATION MODULE PRESTASHOP CREE PAR PRESTACREA INDEX : DOCUMENTATION - FRANCAIS... 2 INSTALLATION... 2 Installation automatique... 2 Installation manuelle... 2 Résolution des

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

Programmation Web TP1 - HTML

Programmation Web TP1 - HTML Programmation Web TP1 - HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez la société SC, agence spécialisée dans la conception des sites internet. 1 - Une première page en HTML

Plus en détail

MAT 2377 Solutions to the Mi-term

MAT 2377 Solutions to the Mi-term MAT 2377 Solutions to the Mi-term Tuesday June 16 15 Time: 70 minutes Student Number: Name: Professor M. Alvo This is an open book exam. Standard calculators are permitted. Answer all questions. Place

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

WiFi Security Camera Quick Start Guide. Guide de départ rapide Caméra de surveillance Wi-Fi (P5)

WiFi Security Camera Quick Start Guide. Guide de départ rapide Caméra de surveillance Wi-Fi (P5) #45 #46 WiFi Security Camera Quick Start Guide Guide de départ rapide Caméra de surveillance Wi-Fi (P5) #47 Start Here 1 Is this you? TECH SUPPORT CTRL ALT DEL 2 If yes, turn to page three 1 3 If not,

Plus en détail

HTML, CSS, JS et CGI. Elanore Elessar Dimar

HTML, CSS, JS et CGI. Elanore Elessar Dimar HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML

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

Publication sur Internet

Publication sur Internet SÉANCE 3 Publication sur Internet 3.1 Edition d un site en HTML 3.1.1 Les différents types de documents Les documents présents sur Internet peuvent être de différents formats. Le format HTML est le premier

Plus en détail

www.evogue.fr SUPPORT DE COURS / HTML

www.evogue.fr SUPPORT DE COURS / HTML L i a m T A R D I E U www.evogue.fr SUPPORT DE COURS / HTML Sommaire Sommaire... 2 Présentation... 3 Introduction... 3 Fonctionnement... 3 Historique... 4 Navigateurs... 6 Définition... 6 Historiquement...

Plus en détail

Sana Sellami. sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012

Sana Sellami. sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012 Sana Sellami sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012 Connaître les principales techniques pour la création de sites web Se familiariser avec les langages du web Rendre dynamique le

Plus en détail

Tutorial des barres d'outils dans Mozilla Firefox

Tutorial des barres d'outils dans Mozilla Firefox Version 2.1 24. septembre 2007 Tutorial des barres d'outils dans Mozilla Firefox Responsable du projet : Auteur : Collaborateurs : Marc Johannot Cide Cyrille Verdon, Pouly Romain TUTORIIAL Les barres d'outils

Plus en détail

TABLE DES MATIERES A OBJET PROCEDURE DE CONNEXION

TABLE DES MATIERES A OBJET PROCEDURE DE CONNEXION 1 12 rue Denis Papin 37300 JOUE LES TOURS Tel: 02.47.68.34.00 Fax: 02.47.68.35.48 www.herve consultants.net contacts@herve consultants.net TABLE DES MATIERES A Objet...1 B Les équipements et pré-requis...2

Plus en détail

Manuel de l utilisateur*

Manuel de l utilisateur* Gestionnaire de contenu (CRM) Manuel d utilisateur du Gestionnaire de contenu (CRM) de votre site Internet Manuel de l utilisateur* * Source : Communauté Umbraco * Source: Communauté Umbraco Table des

Plus en détail

Micro-ordinateurs, informations, idées, trucs et astuces. Utiliser Dragon Naturally speaking. Auteur : François CHAUSSON

Micro-ordinateurs, informations, idées, trucs et astuces. Utiliser Dragon Naturally speaking. Auteur : François CHAUSSON Micro-ordinateurs, informations, idées, trucs et astuces Utiliser Dragon Naturally speaking Auteur : François CHAUSSON Date : 1er juillet 2011 Référence : utiliser Dragon.doc Préambule Voici quelques informations

Plus en détail

Présentation du Framework BootstrapTwitter

Présentation du Framework BootstrapTwitter COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...

Plus en détail

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des

Plus en détail

Grille sommaire d'évaluation de l'accessibilité du Web (Développée par AccessibilitéWeb sous licence Creative Commons BY- NC- SA)

Grille sommaire d'évaluation de l'accessibilité du Web (Développée par AccessibilitéWeb sous licence Creative Commons BY- NC- SA) Grille sommaire d'évaluation de l'accessibilité du Web (Développée par AccessibilitéWeb sous licence Creative Commons BY- NC- SA) No. Validation Tests avec les outils Commentaires A Contenu non- textuels

Plus en détail

Introduction Survol du langage Javascript et html. Programmation WEB. Introduction à Javascript WIM 1.1. IUT de Fontainebleau.

Introduction Survol du langage Javascript et html. Programmation WEB. Introduction à Javascript WIM 1.1. IUT de Fontainebleau. Introduction à Javascript IUT de Fontainebleau 17 décembre 2014 1 Introduction 2 3 Sommaire Introduction 1 Introduction 2 3 Une application Web est une applications clients/serveur(s) On peut la voir en

Plus en détail

Application Form/ Formulaire de demande

Application Form/ Formulaire de demande Application Form/ Formulaire de demande Ecosystem Approaches to Health: Summer Workshop and Field school Approches écosystémiques de la santé: Atelier intensif et stage d été Please submit your application

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 : v3 Date : 7 May 2014 WBS : EUMETSAT Eumetsat-Allee 1, D-64295 Darmstadt, Germany Tel: +49 6151 807-7 Fax: +49

Plus en détail

Version 4.0. Multinet Ressources Inc. Page 1 sur 13

Version 4.0. Multinet Ressources Inc. Page 1 sur 13 Version 4.0 Page 1 sur 13 Introduction Lorsque vous obtenez l accès à Méganet, votre site est déjà construit. C est-à-dire qu il a fait l objet d une étude de style selon les couleurs de votre entreprise

Plus en détail

CREATION d UN SITE WEB (INTRODUCTION)

CREATION d UN SITE WEB (INTRODUCTION) CREATION d UN SITE WEB (INTRODUCTION) Environnement : World Wide Web : ordinateurs interconnectés pour l échange d informations ( de données) Langages : HTML (HyperText Markup Language) : langages pour

Plus en détail

HTML. Notions générales

HTML. Notions générales 1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS

Plus en détail

Publier dans la Base Documentaire

Publier dans la Base Documentaire Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008

Plus en détail

HTML 5. Une référence pour le développeur web. Rodolphe Rimelé. Préface de Raphaël Goetter. Groupe Eyrolles, 2011, ISBN : 978-2-212-12982-3

HTML 5. Une référence pour le développeur web. Rodolphe Rimelé. Préface de Raphaël Goetter. Groupe Eyrolles, 2011, ISBN : 978-2-212-12982-3 HTML 5 Une référence pour le développeur web Rodolphe Rimelé Préface de Raphaël Goetter Groupe Eyrolles, 2011, ISBN : 978-2-212-12982-3 Index A AAC 312 abréviation 129 accessibilité 624 Ajax 644 Ajax (Asynchronous

Plus en détail

Prise en main rapide

Prise en main rapide Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un

Plus en détail

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation

Plus en détail

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des

Plus en détail

KompoZer. Un éditeur de pages Web. M r Castanet - Année scolaire 2007/2008 - page 1

KompoZer. Un éditeur de pages Web. M r Castanet - Année scolaire 2007/2008 - page 1 KompoZer Un éditeur de pages Web M r Castanet - Année scolaire 2007/2008 - page 1 I. Introduction : Au cours de cette formation, nous allons utiliser le logiciel KompoZer, qui gratuit et libre de droit,

Plus en détail

Introduction à Expression Web 2

Introduction à Expression Web 2 Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer

Plus en détail

ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.

ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables

Plus en détail

RTSP - Introduction (1/2)

RTSP - Introduction (1/2) RTSP - Introduction (1/2) Protocol suite: TCP/IP. Type: Application layer protocol. Working group: mmusic, Multiparty Multimedia, Session Control RFC 2326: «RTSP is an application-level protocol for control

Plus en détail

Le Web Dynamique avec JavaScript

Le Web Dynamique avec JavaScript Le Web Dynamique avec JavaScript Concepts et Syntaxe 1 Intérêt Présentation de JavaScript Contrôle du contenu et de l apparence de pages Web Contrôle de fonctionnalités du Navigateur Internet Gestion du

Plus en détail

INTRODUCTION AU CMS MODX

INTRODUCTION AU CMS MODX INTRODUCTION AU CMS MODX Introduction 1. Créer 2. Organiser 3. Personnaliser UNE PETITE INTRODUCTION QUEST-CE QU UN CMS? CMS est l acronyme de Content Management System. C est outil qui vous permet de

Plus en détail

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations

Plus en détail

GUIDE D UTILISATION GESTION DU CONTENU SITE INTERNET CANATAL. 1 ère Partie. Modification du Contenu du Site WordPress de Canatal

GUIDE D UTILISATION GESTION DU CONTENU SITE INTERNET CANATAL. 1 ère Partie. Modification du Contenu du Site WordPress de Canatal INDUSTRIES CANATAL INC. GUIDE D UTILISATION GESTION DU CONTENU SITE INTERNET CANATAL 1 ère Partie Modification du Contenu du Site WordPress de Canatal Version 1.0 FR 27 février 2013 Page laissée intentionnellement

Plus en détail

Mode dʼemploi User guide

Mode dʼemploi User guide Mode dʼemploi User guide Urban Connexion Kit for Microsoft Surface Référence Urban Factory ICR32UF Introduction: Vous venez d acheter un kit de connexion Urban Factory pour Microsoft Surface, et nous vous

Plus en détail

Contents Windows 8.1... 2

Contents Windows 8.1... 2 Workaround: Installation of IRIS Devices on Windows 8 Contents Windows 8.1... 2 English Français Windows 8... 13 English Français Windows 8.1 1. English Before installing an I.R.I.S. Device, we need to

Plus en détail

deux tâches dans le tableau et à cliquer sur l icône représentant une chaîne dans la barre d outils. 14- Délier les tâches : double cliquer sur la

deux tâches dans le tableau et à cliquer sur l icône représentant une chaîne dans la barre d outils. 14- Délier les tâches : double cliquer sur la MS Project 1- Créer un nouveau projet définir la date du déclenchement (début) ou de la fin : File New 2- Définir les détails du projet : File Properties (permet aussi de voir les détails : coûts, suivi,

Plus en détail

How To connect to TonVPN Max / Comment se connecter à TonVPN Max

How To connect to TonVPN Max / Comment se connecter à TonVPN Max How To connect to TonVPN Max / Comment se connecter à TonVPN Max Note : you need to run all those steps as an administrator or somebody having admin rights on the system. (most of the time root, or using

Plus en détail

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information

Plus en détail

Les services usuels de l Internet

Les services usuels de l Internet Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet Courrier électronique (mail) - protocole SMTP (Simple Mail Transfer Protocol) inclut maintenant tous types

Plus en détail

Cross-Site Request Forgery (CSRF)

Cross-Site Request Forgery (CSRF) TIW4-TP1 CSRF 1 Cross-Site Request Forgery (CSRF) Copyright c 2006-2010 Wenliang Du, Syracuse University. The development of this document is funded by the National Science Foundation s Course, Curriculum,

Plus en détail

Petite histoire d Internet

Petite histoire d Internet À la base, Internet est défini par des ordinateurs qui sont reliés entre eux grâce à des câbles, du WiFi ou encore des satellites, créant ainsi un réseau à échelle mondiale. Les ordinateurs communiquent

Plus en détail

Développement Web pour mobiles

Développement Web pour mobiles Développement Web pour mobiles Les bases du HTML par Eric Sarrion Date de publication : 11/08/2010 Dernière mise à jour : Le langage HTML est le langage de base permettant de construire des pages web,

Plus en détail

Introduction à Dreamweaver

Introduction à Dreamweaver Introduction à Dreamweaver Dreamweaver est un logiciel d édition de page web. Un site est un ensemble de pages [souvent en format html, ce qui signifie HyperText Markup Language, reliées entre elles par

Plus en détail

CRÉER UN DVD VIDEO avec DVD FLICK (avec ou sans menu)

CRÉER UN DVD VIDEO avec DVD FLICK (avec ou sans menu) CRÉER UN DVD VIDEO avec DVD FLICK (avec ou sans menu) DVD Flick permet de convertir des vidéos de différents formats en DVD Vidéo (lisible sur un lecteur DVD de salon). Il supporte plus de 45 formats différents

Plus en détail

Normes techniques 2011

Normes techniques 2011 Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique

Plus en détail

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE 11/02/14 CONTEXTE SITE WEB RÉACTIFS S. LANQUETIN ENVIRONNEMENT Clavier (standard, mini, virtuel) Souris / doigt / stylet Rotation de l écran Performances CPU et GPU Capacité de stockage GPS Mobile/fixe

Plus en détail

Logitech Tablet Keyboard for Windows 8, Windows RT and Android 3.0+ Setup Guide Guide d installation

Logitech Tablet Keyboard for Windows 8, Windows RT and Android 3.0+ Setup Guide Guide d installation Logitech Tablet Keyboard for Windows 8, Windows RT and Android 3.0+ Setup Guide Guide d installation English.......................................... 3 Français.........................................

Plus en détail

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL Prise en main de NVU et Notepad++ (conception d application web avec PHP et MySql) Propriétés Intitulé long Formation concernée Matière Présentation Description Conception de pages web dynamiques à l aide

Plus en détail

Sérère Sine Network Diokodial : Bienvenue sur le Réseau Social Sérère Sine

Sérère Sine Network Diokodial : Bienvenue sur le Réseau Social Sérère Sine Tutorial 1.0-0-2010 Sérère Sine Network Créez votre site et Communiquez! Sérère Sine Network Diokodial : Bienvenue sur le Réseau Social Sérère Sine Tutorial (Comment procéder) Comment construire les pages

Plus en détail

Surveillance de Scripts LUA et de réception d EVENT. avec LoriotPro Extended & Broadcast Edition

Surveillance de Scripts LUA et de réception d EVENT. avec LoriotPro Extended & Broadcast Edition Surveillance de Scripts LUA et de réception d EVENT avec LoriotPro Extended & Broadcast Edition L objectif de ce document est de présenter une solution de surveillance de processus LUA au sein de la solution

Plus en détail

Utilisation de l éditeur.

Utilisation de l éditeur. Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7

Plus en détail

Pack Fifty+ Normes Techniques 2013

Pack Fifty+ Normes Techniques 2013 Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié

Plus en détail

Société de Banque et d Expansion

Société de Banque et d Expansion Société de Banque et d Expansion INTERNET BANKING DEMO AND USER GUIDE FOR YOUR ACCOUNTS AT NETSBE.FR FINDING YOUR WAY AROUND WWW.NETSBE.FR www.netsbe.fr INTERNET BANKING DEMO AND USER GUIDE FOR YOUR ACCOUNTS

Plus en détail

DOCUMENTATION - FRANCAIS... 2

DOCUMENTATION - FRANCAIS... 2 DOCUMENTATION MODULE CATEGORIESTOPMENU MODULE CREE PAR PRESTACREA INDEX : DOCUMENTATION - FRANCAIS... 2 INSTALLATION... 2 CONFIGURATION... 2 LICENCE ET COPYRIGHT... 3 SUPPORT TECHNIQUE ET MISES A JOUR...

Plus en détail

Tutoriel Drupal «views»

Tutoriel Drupal «views» Tutoriel Drupal «views» Tutoriel pour la découverte et l utilisation du module Drupal «Views» 1 Dans ce tutoriel nous allons d abord voir comment se présente le module views sous Drupal 7 puis comment

Plus en détail

Création de formulaires interactifs

Création de formulaires interactifs SESSION 16 Création de formulaires interactifs Programme de la session Lancer un sondage en utilisant divers éléments d'entrée de formulaire Traiter les entrées utilisateur Activer un script à partir d'un

Plus en détail

Notice d accessibilité HTML, CSS et JavaScript

Notice d accessibilité HTML, CSS et JavaScript Notice d accessibilité HTML, CSS et JavaScript Date Version État / commentaires 10 sept. 2015 2.0 Cette version prend en compte WCAG 2.0 et RGAA 3.0. En partenariat avec : Air Liquide Atos BNP Paribas

Plus en détail

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...

Plus en détail

Guide de l interface utilisateur d Optymo

Guide de l interface utilisateur d Optymo Guide de l interface utilisateur d Optymo Notes de lecture : dans ce document, les textes soulignés font référence à des libellés des fenêtres ou aux libellés associés à des boutons d Optymo. Les textes

Plus en détail

Fiche d Inscription / Entry Form

Fiche d Inscription / Entry Form Fiche d Inscription / Entry Form (A renvoyer avant le 15 octobre 2014 Deadline octobrer 15th 2014) Film Institutionnel / Corporate Film Film Marketing Produit / Marketing Product film Film Communication

Plus en détail

Utiliser une WebCam. Micro-ordinateurs, informations, idées, trucs et astuces

Utiliser une WebCam. Micro-ordinateurs, informations, idées, trucs et astuces Micro-ordinateurs, informations, idées, trucs et astuces Utiliser une WebCam Auteur : François CHAUSSON Date : 8 février 2008 Référence : utiliser une WebCam.doc Préambule Voici quelques informations utiles

Plus en détail

LA NETWORK MANAGER remote control software CUSTOM PRESET CREATION PROCEDURE

LA NETWORK MANAGER remote control software CUSTOM PRESET CREATION PROCEDURE LA NETWORK MANAGER remote control software CUSTOM PRESET CREATION PROCEDURE TECHNICAL BULLETIN - VERSION 1.0 Document reference: NWM-CUSTOM-PRS_TB_ML_1-0 Distribution date: July 21 st, 2010 2010 L-ACOUSTICS.

Plus en détail

DOCUMENTATION - FRANCAIS... 2

DOCUMENTATION - FRANCAIS... 2 DOCUMENTATION MODULE PRETTYSLIDER MODULE PRESTASHOP CREE PAR PRESTACREA INDEX : DOCUMENTATION - FRANCAIS... 2 INSTALLATION... 2 Installation automatique... 2 Installation manuelle... 2 Résolution des problèmes...

Plus en détail