Les balises (X)HTML
Langage

Sémantique + Syntaxe = Communication
             <balise>
   Mot         <balise attribut="valeur">Contenu</bali...
Principes d’XHTML
•   Une balise doit être fermée
•   Les balises et attributs doivent s’écrire en minuscules
•   La valeu...
Bloc / en ligne


• Bloc : Peut contenir des bloc et des en ligne
  bloc

• En ligne : Peut contenir des en ligne
  en



...
Attributs globaux
   Attributs que l’on va pouvoir
   utiliser sur toutes les balises

 • Core
  • id : nom
  • class : no...
Structure
bloc

                           <html>
                Représente un document HTML.

       <html xmlns="http://www.w3.or...
bloc

                           <head>
       Représente les méta-informations du document.


       <head>
         <met...
bloc

                           <body>
                Représente le corps du document.



       <body>
         <h1>Bie...
bloc

                             <div>
                            Neutre.
                       Permet de regrouper.

...
en ligne

                         <span>
                          Neutre.
                     Permet de regrouper.



 ...
bloc

                   <h1…6>
              Représentent des titres,
       permettent de hiérarchiser le document.

   ...
Textes
bloc

                               <p>
              Représente un paragraphe de texte.



       <p>Je voudrais donner,...
en ligne

                               <a>
                 Représente un lien hypertexte.

           Attributs :
     ...
en ligne

                <em>/<strong>
           Mise en exergue (ajoute de l’importance).
             <strong> est plu...
en ligne

            <abbr>/<acronym>
           Représente une abréviation (HTML, SNCF)
             Représente un acron...
bloc  <blockquote>
           en ligne <q>/<cite>

                    Représente une citation.

<blockquote>
  <p>Je voud...
en ligne

                 <sup>/<sub>
                         Mise en exposant.
                          Mise en indice...
en ligne

                   <ins>/<del>
                   Représente un texte inséré.
                  Représente un te...
bloc

                      <pre>
            Représente du texte pré-formaté.

                       <pre>
             ...
en ligne
                 <code>/<var>
                 <kbd>/<samp>
           Représente du contenu lié à l’informatique...
Images
en ligne

                        <img/>
                    Représente une image.

                    Attributs obligato...
bloc

                             <map>
             Représente des zones pour une image.

                  Attributs ob...
en ligne

                        <area/>
                     Représente une zone.
               Attributs obligatoires ...
Listes
bloc

            <ul>/<ol>/<li>
                     Représente une liste.
   <p>Liste de courses :</p>   <p>À faire aujo...
bloc

          <dl>/<dt>/<dd>
          Représente une liste de définitions.


       <dl>
         <dt>Le kiwi</dt>
     ...
Formulaires
bloc

                       <form>
                Représente un formulaire.
          Attributs obligatoires :
         ...
en ligne

                       <input/>
              Représente un champ de formulaire.

   Attributs :
    • type : ty...
en ligne

                  <input/>
           Représente un champ de formulaire.
en ligne

                      <input/>
            Représente un champ de formulaire.

           <input type="text" nam...
en ligne

                      <input/>
            Représente un champ de formulaire.

           <input type="text" nam...
en ligne

                      <input/>
            Représente un champ de formulaire.

           <input type="text" nam...
en ligne

                      <input/>
            Représente un champ de formulaire.

           <input type="text" nam...
en ligne

                      <input/>
            Représente un champ de formulaire.

           <input type="text" nam...
en ligne

                      <input/>
            Représente un champ de formulaire.

           <input type="text" nam...
en ligne

                      <input/>
            Représente un champ de formulaire.

           <input type="text" nam...
en ligne

                      <input/>
            Représente un champ de formulaire.

           <input type="text" nam...
en ligne

                      <input/>
            Représente un champ de formulaire.

           <input type="text" nam...
en ligne
                 <select>
            <optgroup>/<option>
               Représente une liste déroulante.
   Attr...
en ligne
                <select>
           <optgroup>/<option>
              Représente une liste déroulante.


      <s...
en ligne

                   <textarea>
           Représente un champ de saisie de texte.
   Attributs obligatoires :
   ...
en ligne

                      <button>
                    Représente un bouton.

                    Attributs :
      ...
en ligne

                       <label>
      Représente une étiquette associée à un champ.

                    Attribut...
bloc

                   <fieldset>
         Représente une section de formulaire.


         <fieldset>
           <legen...
en ligne

                       <legend>
       Représente un titre de section de formulaire.


           <fieldset>
   ...
Je vous déconseille…
<b>, <i>, <u>, <s>, <strike>, <big>, <small>, <tt>,
                     <center>,
                <b...
Il en reste…

      <script>, <style>,
     <object>, <param/>,
           <iframe>,
<address>, <hr/>, <bdo>, <dfn>
Commentaires

<!-- Commentaire -->

     <!--<ul>
       <li>…</li>
       <li>…</li>
     </ul>-->
Contact


   Nicolas Le Gall
slides@neovov.com
twitter.com/neovov
Les balises HTML
Prochain SlideShare
Chargement dans…5
×

Les balises HTML

2 232 vues

Publié le

Cours sur les balises HTML.

Publié dans : Formation
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 232
Sur SlideShare
0
Issues des intégrations
0
Intégrations
38
Actions
Partages
0
Téléchargements
73
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×