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

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

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

Plus en détail

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

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

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

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

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

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

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

Plus en détail

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

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

Plus en détail

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

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

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

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

Mémento des balises HTML 5

Mémento des balises HTML 5 Mémento des balises HTML 5 s de premier niveau Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le «code minimal» d'une

Plus en détail

Partie HTML TD 6 : Liens hypertexte et formulaires

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

Plus en détail

Gérer les formulaires

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

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

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

Mémento des balises HTML

Mémento des balises HTML Chapitre 21 Mémento des balises HTML Diculté : C ette page est une liste non exhaustive des balises HTML qui existent. Vous trouverez ici un grand nombre de balises HTML. Nous en avons déjà vu certaines

Plus en détail

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

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

Plus en détail

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

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

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

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

Plus en détail

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

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

Plus en détail

Questions à choix multiples Page 1 de 10

Questions à choix multiples Page 1 de 10 INF2005 Programmation web Examen intra hiver 2015 Question #1 Qui a gagné la guerre des fureteurs dans les années 1990? a) Netscape b) Internet Explorer c) Firefox d) Chrome e) Opera f) Mosaic g) Aucune

Plus en détail

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

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

Plus en détail

Prog. Web TP2 Année universitaire 2012 2013 - Formulaires - suite

Prog. Web TP2 Année universitaire 2012 2013 - Formulaires - suite Prog. Web TP2 Année universitaire 2012 2013 - Formulaires - suite 1 INSCRIPTION À UN SITE On suppose que l'inscription à un site offre de nombreux avantages. Pour s'inscrire à ce site il faut saisir :

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

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

Installation du logiciel

Installation du logiciel Hot Potatoes Hot Potatoes est un logiciel gratuit proposé par Half-Baked Software et l Université de Victoria au Canada. Il se compose de six modules permettant chacun de mettre au point différents types

Plus en détail

Introduction à la programmation web

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

Plus en détail

Bases de données et Sites Web. Li345

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

Plus en détail

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

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

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

Plus en détail

Introduction au Web. Andrea G. B. Tettamanzi. Université de Nice Sophia Antipolis Département Informatique

Introduction au Web. Andrea G. B. Tettamanzi. Université de Nice Sophia Antipolis Département Informatique Introduction au Web Andrea G. B. Tettamanzi Université de Nice Sophia Antipolis Département Informatique andrea.tettamanzi@unice.fr Andrea G. B. Tettamanzi, 2013 1 CM - Séance 2 HTML Andrea G. B. Tettamanzi,

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

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

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

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

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

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

Plus en détail

Création de page web avec Dreamweaver 2.0

Création de page web avec Dreamweaver 2.0 Création de page web avec Dreamweaver 2.0 Guide d accompagnement pour Windows avril 2002 Suzanne Harvey Responsable RÉCIT suzanne.harvey@prologue.qc.ca http://www.apinfo.qc.ca http://www.cssh.qc.ca/se/recit

Plus en détail

LISTE DES BALISES EN HTML5

LISTE DES BALISES EN HTML5 LISTE DES BALISES EN HTML5 AIDE-MÉMOIRE HTML&CSS www.multiforme.eu BALISE DEFINITION DES BALISES DESCRIPTION Pour un commentaire L inclusion du DOCTYPE dans un document HTML assure

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

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

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

Plus en détail

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

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

Plus en détail

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

Smile Mobile Dashboard

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

Plus en détail

Publier une Actualité ou un Evenement

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

Plus en détail

Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie 1 de 2)

Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie 1 de 2) École de bibliothéconomie et des sciences de l information SCI6306 Bases de données documentaires Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie

Plus en détail

Monday, December 2 nd 2013. Formation Galaxy

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

Plus en détail

Les formulaires, le langage JavaScript

Les formulaires, le langage JavaScript Les formulaires, le langage JavaScript Walid Belkhir Université de Provence belkhir@cmi.univ-mrs.fr http://www.lif.univ-mrs.fr/ belkhir/ 1 / 45 Plan 1 Les formulaires en HTML 2 Le noyau du JavaScript Les

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

Programme de Formation

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

Plus en détail

CMS Modules Dynamiques - Manuel Utilisateur

CMS Modules Dynamiques - Manuel Utilisateur CMS Modules Dynamiques - Manuel Utilisateur 1. Introduction Le modèle CMS Le modèle des «Content Management Systems» proposé par MUM est un type particulier de sites web dynamiques, ayant comme avantage

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

Introduction à HTML et CSS

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

Plus en détail

Web et présentation d information spatiale

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

Plus en détail

POUR COMMENCER AJOUTEZ LES RÉSERVATIONS À VOTRE SITE WEB MODULE DE RECHERCHE DE GROUPE D OPENTABLE

POUR COMMENCER AJOUTEZ LES RÉSERVATIONS À VOTRE SITE WEB MODULE DE RECHERCHE DE GROUPE D OPENTABLE AJOUTEZ LES RÉSERVATIONS À VOTRE SITE WEB MODULE DE RECHERCHE DE GROUPE D OPENTABLE Le module de recherche de groupe permet aux utilisateurs de sélectionner un emplacement spécifique de restaurant à partir

Plus en détail

Comment utiliser Votre site web» Table des matières Tableau de bord de Votre site web»...2 Ajouter un fichier média : Images»...6 Guide de démarrage

Comment utiliser Votre site web» Table des matières Tableau de bord de Votre site web»...2 Ajouter un fichier média : Images»...6 Guide de démarrage Comment utiliser Votre site web» Table des matières Tableau de bord de Votre site web»...2 Ajouter un fichier média : Images»...6 Guide de démarrage rapide. Rédiger une page ou un article,»...3 Ajouter

Plus en détail

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS En renommant, déplaçant ou supprimant des images déjà insérées dans des pages, ou en renommant, déplaçant ou supprimant des sous-dossiers, les images

Plus en détail

Technique Internet de Base Javascript avancé

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

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM

TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM TUTORIEL JOOMLA CONTENT EDITOR POUR L UNIVERS DE L ENTRAINEUR.COM V1.0 TUTORIEL JCE - EDITEUR Le nouvel outil pour vos articles... Pour les plus anciens d entre vous, vous avez connu la transmission des

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

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

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

Développement Partie Cliente

Développement Partie Cliente ISI 1022 : Jean-Noël Sorenti. Année 2002/2003 Développement Partie Cliente ISI 1022 : 1 ISI 1022 : Développement Partie Cliente Le développement partie cliente concerne tout développement étant interprété

Plus en détail

Gérer un site internet simple

Gérer un site internet simple TUTORIEL Gérer un site internet simple Pourquoi avoir un site internet? Table of Contents Table of Contents... 2 Étape 1 : créer un compte Google (Gmail)... 3 Etape 2 : créer un site internet Google...

Plus en détail

ONLINE TIAMA CATALOGS USER GUIDE

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

Plus en détail

EXERCICES JAVASCRIPT Exercice N 01 Écrire un script java qui permet de saisir le nom de l utilisateur et de l afficher en gras, dans une page Web.

EXERCICES JAVASCRIPT Exercice N 01 Écrire un script java qui permet de saisir le nom de l utilisateur et de l afficher en gras, dans une page Web. EXERCICES JAVASCRIPT Exercice N 01 Écrire un script java qui permet de saisir le nom de l utilisateur et de l afficher en gras, dans une page Web. Exercice N 02 Écrire un script java qui utilise une fonction

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

Référentiel Général d'accessibilité pour les Administrations RGAA 3 2016 RGAA Note de version

Référentiel Général d'accessibilité pour les Administrations RGAA 3 2016 RGAA Note de version Référentiel Général d'accessibilité pour les Administrations RGAA 3 2016 RGAA Note de version RGAA 3 2016 Note de version 1/49 Table des matières RGAA Note de versions...4 Documents impactés par la mise

Plus en détail

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

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

Plus en détail

Programmation Avancée pour le Web

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

Plus en détail

Une (petite) initiation au langage HTML

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

Plus en détail

Le langage HTML. Structure d'une page HTML. Les balises. balises de structure.

Le langage HTML. Structure d'une page HTML. Les balises. balises de structure. <base> Sommaire : Le langage HTML...2 Structure d'une page HTML...2 Les balises...2 balises de structure...2 Les balises de formatage...4 Les balises de liens...6 Les balises d'images...6 Les balises de listes...7

Plus en détail

Programmation Web. Thierry Hamon

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

Plus en détail

<link rel = stylesheet  type = text / css  href = monstyle. css  /> Programmation Web AGRAL-3 et MTX-3, 2012-13 SÃl ance TP N o 5 Mars 2013 Objectifs Langage CSS Interactions HTML/CSS Manipulation [Où mettre ses fichiers? ] Pour ce TP vous allez mettre votre fichier HTML

Plus en détail

INFO-F-101 Programmation Projet 4 Page Ranking(1/4): Création de la matrice du compte des liens

INFO-F-101 Programmation Projet 4 Page Ranking(1/4): Création de la matrice du compte des liens INFO-F-101 Programmation Projet 4 Page Ranking(1/4): Création de la matrice du compte des liens Année académique 2009 2010 1 Introduction Ce projet est le premier d une série de quatre projets qui ont

Plus en détail

Fonctionnalités avancées de Word

Fonctionnalités avancées de Word BIBLIOTHÈQUE UNIVERSITAIRE DE LILLE 1 Thèses et littérature grise Fonctionnalités avancées de Word Bibliothèque de l université des sciences et technologies de Lille 1 Diffusion électronique des thèses

Plus en détail

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

HTML 5 HTML 5. Nouveau standard en développement basé sur HTML et XHTML

HTML 5 HTML 5. Nouveau standard en développement basé sur HTML et XHTML HTML 5 HTML 5 Nouveau standard en développement basé sur HTML et XHTML Supporté partiellement par les navigateurs: Safari, Chrome, Firefox, et Opera supportent une partie de HTML5 Caractéristiques: Éléments

Plus en détail

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web.

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web. Document 1 : client et serveur Les ordinateurs sur lesquels sont stockés les sites web sont appelés des serveurs. Ce sont des machines qui sont dédiées à cet effet : elles sont souvent sans écran et sans

Plus en détail

MODULE HTML CSS.

MODULE HTML CSS. MODULE HTML CSS David Tourel david.tourel@iut-tlse3.fr HTML : HyperText Markup Language Langage de description Interprété par les navigateurs Associé au CSS et JavaScript Métiers: développeur front end,

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

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

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s):

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s): Formation JavaScript : Perfectionnement Objectif(s): Comprendre l'approche AJAX Comprendre l'objet XMLHttpRequest Durée : 2 jour(s) Pré-requis : Bonnes connaissances en (X)HTML, CSS et JavaScript Public

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

Publier des données sur le Web

Publier des données sur le Web Publier des données sur le Web Introduction Microsoft Excel fournit les outils dont vous avez besoin pour créer et enregistrer votre classeur sous forme d une page web et le publier sur le Web. La commande

Plus en détail

pour apprendre le langage html

pour apprendre le langage html pour apprendre le langage html introduction : Voici ce que vous devez savoir avant de continuer : Tout d' abord, il faut préciser que le langage HTML est relativement simple mais que celui ci impose au

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

Manuel d'utilisateur et de référence

Manuel d'utilisateur et de référence Manuel d'utilisateur et de référence Manuel d'utilisateur et de référence All rights reserved. No parts of this work may be reproduced in any form or by any means - graphic, electronic, or mechanical,

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

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

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

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

Plus en détail