Fiche référence HTML

Dimension: px

Commencer à balayer dès la page:

Download "Fiche référence HTML"

Maurice Ricard
il y a 6 ans
Total affichages :

1 20 janvier 2015 Table des matières 1 Introduction 2 2 Structure de document 2 3 Eléments Entête, pied de page, section, titres Eléments simples Paragraphe, saut de ligne, ligne horizontale Phrase tags Lien Image Tableaux Formulaires Form, fieldset, legend Labels Champs texte Radio Checkbox Select Textarea Button div et span Conclusion 6 1

2 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  5 <title>titre</title> 6  7 <meta charset="utf-8"> 8  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  13 <link rel="stylesheet" type="text/css" href="style.css"> 14  15 <style> 16 body { background-color: #297BAB; } 17 </style> 18 </head> 19 <body> 20  21 </body> 22 </html> 2

3 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 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> 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> Lien 1 <a target="_blank" href=" title="aller sur dutiq (nouvel onglet)">mon site trop cool</a> Image 1 <img src="../adresse/vers/image.png" alt="texte alternatif" title ="Titre image" width="42" height="42"> 3

4 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 Form, fieldset, legend 1 <form> 2  3 <fieldset> 4 <legend>légende du groupe de champs</legend> 5  6 </fieldset> 7 </form> 3.5 Labels 1 <label for="elementid">mon label:</label> 2 <input id="elementid" type="text" name="truc"> 4

5 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=" " name="adresse " readonly> 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? 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> 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 3.5.5 Textarea 1 <textarea name="nomzone" cols="40" rows="8" readonly disabled> 2 Contenu initial 3 </textarea> 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

Documents pareils

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