Les balises HTML

1,832
-1

Published on

Cours sur les balises HTML.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,832
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
70
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Les balises HTML

  1. 1. Les balises (X)HTML
  2. 2. Langage Sémantique + Syntaxe = Communication <balise> Mot <balise attribut="valeur">Contenu</balise> <balise/> </balise> Document = <!DOCTYPE> + <html> + <head> + <body>
  3. 3. Principes d’XHTML • Une balise doit être fermée • Les balises et attributs doivent s’écrire en minuscules • La valeur d’un attribut doit s’écrire entre apostrophes ou guillemets • Un attribut doit avoir une valeur • Les balises doivent être fermées dans le bon ordre
  4. 4. Bloc / en ligne • Bloc : Peut contenir des bloc et des en ligne bloc • En ligne : Peut contenir des en ligne en + des données !
  5. 5. Attributs globaux Attributs que l’on va pouvoir utiliser sur toutes les balises • Core • id : nom • class : nom de classe(s) • style : CSS en ligne • title : tooltip — infobulle • i18n • lang : langue du contenu • dir : direction du texte • events • on* : événements
  6. 6. Structure
  7. 7. bloc <html> Représente un document HTML. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mon document</title> </head> <body> <h1>Bienvenue !</h1> </body> </html> Note : l’attribut xmlns="http:// www.w3.org/1999/xhtml" est obligatoire.
  8. 8. bloc <head> Représente les méta-informations du document. <head> <meta http-equiv="Content-Type" content= "text/html; charset=UTF-8" /> <title>Mon document</title> </head> Note : Il ne doit y avoir qu’une balise <head> et <body> par document.
  9. 9. bloc <body> Représente le corps du document. <body> <h1>Bienvenue !</h1> <p>Ce site voue un culte à Friedrich Nietzsche.</p> </body> Note : ne peut pas contenir de en ligne directement.
  10. 10. bloc <div> Neutre. Permet de regrouper. <div> <p>Je voudrais donner, prodiguer ma sagesse…</p> <p>Il me faudra pour cela descendre dans les…</p> <p>Il me faudra comme toi décliner, ainsi que disent…</p> </div>
  11. 11. en ligne <span> Neutre. Permet de regrouper. <p>Il me faudra comme toi <span><em>décliner<sup>1</sup></em><span>, ainsi que disent les hommes vers lesquels je veux descendre.</p>
  12. 12. bloc <h1…6> Représentent des titres, permettent de hiérarchiser le document. <h1>Les aliments</h1> <h2>Les légumes</h2> <h3>La patate</h3> <h3>La tomate</h3> <h2>Les fruits</h2> <h3>Le kiwi</h3> <h3>La banane</h3> Note : ne peuvent pas contenir de bloc
  13. 13. Textes
  14. 14. bloc <p> Représente un paragraphe de texte. <p>Je voudrais donner, prodiguer ma sagesse, jusqu’au jour où les sages d’entre les hommes se sentiront heureux de leur folie, les pauvres heureux de leur richesse.</p> Note : ne peut pas contenir de bloc
  15. 15. en ligne <a> Représente un lien hypertexte. Attributs : • href : adresse du lien • hreflang : langue de la page ou section ciblée <a href="http://google.fr">Un lien absolu</a> <a href="/news/">Un lien relatif</a> <a href="#moteur-de-recherche">Un lien interne</a> Note : ne peut pas contenir de <a>
  16. 16. en ligne <em>/<strong> Mise en exergue (ajoute de l’importance). <strong> est plus important que <em> <p>Attention, c’est <em>important</em> !</p> <p>Faites <strong>très</strong> attention !</p>
  17. 17. en ligne <abbr>/<acronym> Représente une abréviation (HTML, SNCF) Représente un acronyme (Laser, Sida). <p>Aujourd’hui, c’est cours de <abbr title="HyperText Markup Language">HTML</abbr>.</p> <p>Attention au <acronym title="RAdio Detection And Ranging">Radar</acronym> !</p>
  18. 18. bloc <blockquote> en ligne <q>/<cite> Représente une citation. <blockquote> <p>Je voudrais donner, prodiguer ma sagesse, jusqu’au jour où les sages d’entre les hommes se sentiront heureux de leur folie, les pauvres heureux de leur richesse.</p> </blockquote> <p>Hamlet commença son monologue : <q>Être ou ne pas être ?</q></p> Note : <blockquote> ne peut pas contenir de en ligne directement.
  19. 19. en ligne <sup>/<sub> Mise en exposant. Mise en indice. <p>C’était ma 1<sup>ère<sup> fois…</p> <p>J’aime l’<abbr title="Eau">H<sub>2</sub>O</abbr>.</p>
  20. 20. en ligne <ins>/<del> Représente un texte inséré. Représente un texte supprimé. <p>Jean-Claude Vandamme est un <del>philosophe<del> <ins>acteur<ins> d’origine belge.</p>
  21. 21. bloc <pre> Représente du texte pré-formaté. <pre> (__) (oo) /-------/ / | || * ||----|| ~~ ~~ </pre> Note : ne peut pas contenir de <sup>, <sub>, <img/>, <object>
  22. 22. en ligne <code>/<var> <kbd>/<samp> Représente du contenu lié à l’informatique. <pre><code> <var>$x</var> = 3; echo <var>$x</var>; // Affiche <samp>3</samp> </code></pre> <p>Tapez <kbd>1</kbd> pour voter pour Cunégonde, et <kbd>2</kbd> pour voter pour Pierre-Alfred.</p>
  23. 23. Images
  24. 24. en ligne <img/> Représente une image. Attributs obligatoires : • src : adresse du fichier • alt : texte alternatif <img src="images/chatons.jpg" alt="De mignons lolcats" />
  25. 25. bloc <map> Représente des zones pour une image. Attributs obligatoires : • id : nom de l’ensemble de zones <map id="monde"> <area shape="rect" coords="0,0,100,90" href="france.html" alt="France" /> </map>
  26. 26. en ligne <area/> Représente une zone. Attributs obligatoires : • alt : texte alternatif Attributs : • shape : forme de la zone • coords : coordonnées de la zone • href : adresse du lien <map id="monde"> <area shape="rect" coords="0,0,100,90" href="france.html" alt="France" /> </map>
  27. 27. Listes
  28. 28. bloc <ul>/<ol>/<li> Représente une liste. <p>Liste de courses :</p> <p>À faire aujourd’hui :</p> <ul> <ol> <li>Pizza</li> <li>Sortir le chien</li> <li>Patates</li> <li>Manger</li> <li>Boissons <li>Cours HTML <ul> <ul> <li>Bière</li> <li>Finir le cours !</li> <li>Vodka</li> <li>Donner le cours</li> </ul> </ul> </li> </li> </ul> </ol> Note : <ul> et <ol> ne peuvent contenir que des <li> directement.
  29. 29. bloc <dl>/<dt>/<dd> Représente une liste de définitions. <dl> <dt>Le kiwi</dt> <dd>C’est un fruit, mais aussi un animal</dd> <dt>Le litchi</dt> <dd>Un excellent fruit exotique</dd> </dl> Note : <dt> ne peut pas contenir de bloc
  30. 30. Formulaires
  31. 31. bloc <form> Représente un formulaire. Attributs obligatoires : • action : adresse de soumission Attributs : • method : type de requête • enctype : content-type pour la soumission <form method="post" action="inscription.php"> … </form> Note : ne doit pas contenir d’autres <form>.
  32. 32. en ligne <input/> Représente un champ de formulaire. Attributs : • type : type de champ • name : nom de la donnée (utilisé pour traiter le formulaire) • value : valeur du champ • maxlength : taille maximale de la saisie (en caractères) • checked : coché ? • disabled : désactivé ? • readonly : en lecture seule ?
  33. 33. en ligne <input/> Représente un champ de formulaire.
  34. 34. en ligne <input/> Représente un champ de formulaire. <input type="text" name="prenom" />
  35. 35. en ligne <input/> Représente un champ de formulaire. <input type="text" name="prenom" /> <input type="password" name="mot-de-passe" />
  36. 36. en ligne <input/> Représente un champ de formulaire. <input type="text" name="prenom" /> <input type="password" name="mot-de-passe" /> <input type="checkbox" name="accepte" />
  37. 37. en ligne <input/> Représente un champ de formulaire. <input type="text" name="prenom" /> <input type="password" name="mot-de-passe" /> <input type="checkbox" name="accepte" /> <input type="radio" name="sexe" />
  38. 38. en ligne <input/> Représente un champ de formulaire. <input type="text" name="prenom" /> <input type="password" name="mot-de-passe" /> <input type="checkbox" name="accepte" /> <input type="radio" name="sexe" /> <input type="file" name="avatar" />
  39. 39. en ligne <input/> Représente un champ de formulaire. <input type="text" name="prenom" /> <input type="password" name="mot-de-passe" /> <input type="checkbox" name="accepte" /> <input type="radio" name="sexe" /> <input type="file" name="avatar" /> <input type="submit" />
  40. 40. en ligne <input/> Représente un champ de formulaire. <input type="text" name="prenom" /> <input type="password" name="mot-de-passe" /> <input type="checkbox" name="accepte" /> <input type="radio" name="sexe" /> <input type="file" name="avatar" /> <input type="submit" /> <input type="reset" />
  41. 41. en ligne <input/> Représente un champ de formulaire. <input type="text" name="prenom" /> <input type="password" name="mot-de-passe" /> <input type="checkbox" name="accepte" /> <input type="radio" name="sexe" /> <input type="file" name="avatar" /> <input type="submit" /> <input type="reset" /> <input type="button" value="Bouton inutile" />
  42. 42. en ligne <input/> Représente un champ de formulaire. <input type="text" name="prenom" /> <input type="password" name="mot-de-passe" /> <input type="checkbox" name="accepte" /> <input type="radio" name="sexe" /> <input type="file" name="avatar" /> <input type="submit" /> <input type="reset" /> <input type="button" value="Bouton inutile" /> <input type="hidden" name="sid" value="123" />
  43. 43. en ligne <select> <optgroup>/<option> Représente une liste déroulante. Attributs (<select>) : • name : nom de la donnée (utilisé pour traiter le formulaire) • multiple : permet de choisir plusieurs options • disabled : désactivé ? Attributs (<optgroup>) : • label : nom du groupe d’options • disabled : désactivé ? Attributs (<option>) : • value : valeur du champ • selected : sélectionné ? • disabled : désactivé ?
  44. 44. en ligne <select> <optgroup>/<option> Représente une liste déroulante. <select name="pays"> <option value="ca">Canada</option> <option value="jp" selected="selected">Japon</option> <optgroup label="Europe"> <option value="fr">France</option> <option value="de">Allemagne</option> </optgroup> </select>
  45. 45. en ligne <textarea> Représente un champ de saisie de texte. Attributs obligatoires : • rows : nombre de lignes • cols : nombre de colonnes Attributs : • name : nom de la donnée (utilisé pour traiter le formulaire) • disabled : désactivé ? <textarea name="description" rows="3" cols="80">…</textarea> Note : <textarea> ne peut contenir que du texte.
  46. 46. en ligne <button> Représente un bouton. Attributs : • type : type de bouton • disabled : désactivé ? <button type="submit">Envoyer</button> <button type="reset">Recommencer</button> <button type="button">Bouton inutile</button> Note : ne doit pas contenir <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe>.
  47. 47. en ligne <label> Représente une étiquette associée à un champ. Attributs : • for : cible de l’étiquette <label for="email">Adresse mail :</label> <input type="text" id="email" name= "mail" /> Note : ne peut pas contenir d’autres <label>.
  48. 48. bloc <fieldset> Représente une section de formulaire. <fieldset> <legend>Informations personnelles</legend> <input type="text" id="email" name= "mail" /> </fieldset> Note : doit contenir <legend> directement.
  49. 49. en ligne <legend> Représente un titre de section de formulaire. <fieldset> <legend>Informations personnelles</legend> <input type="text" id="email" name= "mail" /> </fieldset>
  50. 50. Je vous déconseille… <b>, <i>, <u>, <s>, <strike>, <big>, <small>, <tt>, <center>, <basefont>, <font>, <frame>, <frameset>, <noframes>, <applet>, <noscript> (<br/>)
  51. 51. Il en reste… <script>, <style>, <object>, <param/>, <iframe>, <address>, <hr/>, <bdo>, <dfn>
  52. 52. Commentaires <!-- Commentaire --> <!--<ul> <li>…</li> <li>…</li> </ul>-->
  53. 53. Contact Nicolas Le Gall slides@neovov.com twitter.com/neovov
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×