Téléchargé 92 fois
Contenu connexe
Les balises HTML
- 1.
- 2. Langage Sémantique + Syntaxe= Communication <balise> Mot <balise attribut="valeur">Contenu</balise> <balise/> </balise> Document = <!DOCTYPE> + <html> + <head> + <body>
- 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. Bloc / enligne • Bloc : Peut contenir des bloc et des en ligne bloc • En ligne : Peut contenir des en ligne en + des données !
- 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.
- 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. 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. 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. 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. 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. 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.
- 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. 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. 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. 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. 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. 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. 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. bloc <pre> Représente du texte pré-formaté. <pre> (__) (oo) /-------/ / | || * ||----|| ~~ ~~ </pre> Note : ne peut pas contenir de <sup>, <sub>, <img/>, <object>
- 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.
- 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. 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. 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.
- 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. 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.
- 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. 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. 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" />
- 34. 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é ?
- 35. 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>
- 36. 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.
- 37. 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>.
- 38. 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>.
- 39. 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.
- 40. en ligne <legend> Représente un titre de section de formulaire. <fieldset> <legend>Informations personnelles</legend> <input type="text" id="email" name= "mail" /> </fieldset>
- 41.
- 42. bloc <table> Représente un tableau de données. Attributs : • summary : résumé du tableau <table summary="…"> <thead> <tr> <th>Nom<th> <th>Prénom</th> </tr> </thead> … </table>
- 43. bloc <thead>/<tfoot> <tbody> Représente des sections de tableau. <table summary="…"> <thead> <tr> <th>Nom<th> <th>Prénom</th> </tr> </thead> <tfoot>…</tfoot> <tbody> <tr> <td>Abitbol</td> <td>Georges</td> </tr> </tbody> </table>
- 44. bloc <tr> <th>/<td> Représente une ligne de tableau. Représente une cellule d’en-tête. Représente une cellule. Attribut (<th>) : • scope : spécifie les données qui doivent être associées à ce <th> (col ou row) Attributs (toutes) : • rowspan : nombre de cellules à fusionner sur la ligne • colspan : nombre de cellules à fusionner sur la colonne
- 45. en ligne <caption> Représente une légende de tableau. <table> <caption>Tableau très intéressant</caption> … </table> Note : doit se trouver directement après <table>.
- 46.
- 47. en ligne <title> Représente le titre du document. <title>La page web de ma vie</title>
- 48. en ligne <meta/> Représente une méta-information du document. Attribut obligatoire : • content : l’information Attributs : • name : nom de la méta-information • http-equiv : nom de l’en-tête HTTP <meta name="auteur" content="Nicolas Le Gall" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
- 49. en ligne <link/> Représente une relation entre documents. Attributs : • type : type MIME du contenu • href : adresse du document • media : support pour lequel la relation est faite <link rel="stylesheet" type="text/css" href="…" media="screen" />
- 50. en ligne <base/> Définis l’adresse de base à utiliser pour les adresses relatives. Attribut obligatoire : • href : adresse de base <base href="http://example.org/site/" />
- 51. Je vous déconseille… <b>,<i>, <u>, <s>, <strike>, <big>, <small>, <tt>, <center>, <basefont>, <font>, <frame>, <frameset>, <noframes>, <applet>, <noscript> (<br/>)
- 52. Il en reste… <script>, <style>, <object>, <param/>, <iframe>, <address>, <hr/>, <bdo>, <dfn>
- 53. Commentaires <!-- Commentaire --> <!--<ul> <li>…</li> <li>…</li> </ul>-->
- 54. Contact NicolasLe Gall me@neovov.com twitter.com/neovov