20 janvier 2015 Table des matières 1 Introduction 2 2 Structure de document 2 3 Eléments 3 3.1 Entête, pied de page, section, titres................. 3 3.2 Eléments simples........................... 3 3.2.1 Paragraphe, saut de ligne, ligne horizontale........ 3 3.2.2 Phrase tags.......................... 3 3.2.3 Lien.............................. 3 3.2.4 Image............................. 3 3.3 Tableaux............................... 4 3.4 Formulaires.............................. 4 3.4.1 Form, fieldset, legend.................... 4 3.5 Labels................................. 4 3.5.1 Champs texte......................... 5 3.5.2 Radio............................. 5 3.5.3 Checkbox........................... 5 3.5.4 Select............................. 5 3.5.5 Textarea............................ 6 3.5.6 Button............................. 6 3.6 div et span.............................. 6 4 Conclusion 6 1
1 Introduction Ce document vous permet de rapidement retrouver une portion de code pour un élément précis. Aucune explication n est fournie ici. Si vous ne comprenez pas quelque chose, merci de vous référer à Un document en HTML, voire au guide CSS si nécessaire. 2 Structure de document 1 <!doctype html> 2 <html> 3 <head> 4 <!-- Titre --> 5 <title>titre</title> 6 <!-- Encodage --> 7 <meta charset="utf-8"> 8 <!-- Les autres meta --> 9 <meta name="description" content="description de la page"> 10 <meta name="keywords" content="les, key, words"> 11 <meta name="author" content="auteur du document"> 12 <!-- Lien vers une feuille de style --> 13 <link rel="stylesheet" type="text/css" href="style.css"> 14 <!-- Style en ligne --> 15 <style> 16 body { background-color: #297BAB; } 17 </style> 18 </head> 19 <body> 20 <!-- Contenu de page --> 21 </body> 22 </html> 2
3 Eléments 3.1 Entête, pied de page, section, titres 1 <header>entete</header> 2 <section> 3 <h1>titre I</h1> 4 <h2>titre I-a</h2> 5 <h3>titre I-a.1</h3> 6 <h4>etc.</h4> 7 </section> 8 <footer>pied de page</footer> 3.2 Eléments simples 3.2.1 Paragraphe, saut de ligne, ligne horizontale 1 <p>paragraphe<br>avec un saut de ligne</p> 2 <hr> 3 <p>olala le joli trait juste au dessus</p> 3.2.2 Phrase tags 1 <em>insistons sur ce point (souvent en italique)</em><br> 2 <strong>celui-ci est important (souvent en gras)</strong><br> 3 <code>ca c'est une portion de code!</code> 3.2.3 Lien 1 <a target="_blank" href="http://" title="aller sur dutiq (nouvel onglet)">mon site trop cool</a> 3.2.4 Image 1 <img src="../adresse/vers/image.png" alt="texte alternatif" title ="Titre image" width="42" height="42"> 3
3.3 Tableaux 1 <table> 2 <thead> 3 <tr> 4 <th>titre col1</th> 5 <th>titre col2</th> 6 <th>titre col3</th> 7 <th>titre col4</th> 8 </tr> 9 </thead> 10 <tbody> 11 <tr> 12 <td>contenu a1</td> 13 <td rowspan="2">contenu a2 et b2</td> 14 <td>contenu a3</td> 15 <td>contenu a4</td> 16 </tr> 17 <tr> 18 <td>contenu b1</td> 19 <td colspan="2">contenu b3 et b4</td> 20 </tr> 21 </tbody> 22 </table> 3.4 Formulaires 3.4.1 Form, fieldset, legend 1 <form> 2 <!-- Tout le formulaire entre les balises form --> 3 <fieldset> 4 <legend>légende du groupe de champs</legend> 5 <!-- Autres champs --> 6 </fieldset> 7 </form> 3.5 Labels 1 <label for="elementid">mon label:</label> 2 <input id="elementid" type="text" name="truc"> 4
3.5.1 Champs texte 1 <input type="text" name="texte" value="defaut" maxlength="18"> 2 <input type="password" name="motdepasse" placeholder="intitule"> 3 <input type="number" name="nombre" min="10" max="30" disabled> 4 <input type="email" name="adresseemail" readonly> 3.5.2 Radio Même nom pour un groupe de radio 1 <input type="radio" name="choix" value="oui" checked> Oui<br> 2 <input type="radio" name="choix" value="non"> Non 3 <input type="radio" name="choix" value="nsp"> Qui sait? 3.5.3 Checkbox Même nom pour un groupe de checkbox 1 <input type="checkbox" name="couleur" value="rouge" checked>rouge <br> 2 <input type="checkbox" name="couleur" value="vert">vert<br> 3 <input type="checkbox" name="couleur" value="bleu" checked>bleu< br> 3.5.4 Select 1 <select name="couleur"> 2 <optgroup label="couleurs primaires"> 3 <option value="rouge" selected>rouge comme le feu</option> 4 <option value="vert">vert comme la nature</option> 5 <option value="bleu">bleu comme le ciel</option> 6 </optgroup> 7 <optgroup label="couleurs secondaires"> 8 <option value="jaune">jaune comme le soleil</option> 9 <option value="cyan">cyan comme un néon</option> 10 <option value="magenta">magenta comme un autre...</option> 11 </optgroup> 12 </select> 5
3.5.5 Textarea 1 <textarea name="nomzone" cols="40" rows="8" readonly disabled> 2 Contenu initial 3 </textarea> 3.5.6 Button 1 <button type="button">je fais rien</button> 2 <button type="submit">envoyer le formulaire</button> 3 <button type="reset">tout effacer</button> 3.6 div et span Div : bloc ; span : en ligne. 1 <div> 2 Conteneur generique avec <span>contenu generique</span>! 3 </div> 4 Conclusion :) 6