Mémento HTML - Balises courantes La structure HTML 5 <!DOCTYPE html> <html lang

Mémento HTML - Balises courantes La structure HTML 5 <!DOCTYPE html> <html lang="fr"> <head> <title>TITRE DU DOCUMENT</title> <meta charset="utf-8" /> </head> <body> <!-- Commentaire --> <p>VOTRE TEXTE</p> </body> </html> Texte courant Titres h1, h2, ..., h6 Entête <head> <!-- DESCRIPTION DU DOCUMENT --> <title>Titre du document</title> <meta charset="utf-8" /> <meta name="author" content="Albert Dupont" /> <meta name="description" content="Description du contenu de la page Web en 150 caractères maximum." /> <meta name="date" content="2008-12-31T05:00:00+01:00"> <!-- ICONE DE FAVORIS --> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <!-- FEUILLES DE STYLES CSS --> <link type="text/css" rel="stylesheet" media="all" href="style.css" /> <style type="text/css"> <!-- /* Placez ici les directives CSS */ --> </style> <!-- JAVASCRIPT --> <script src="script.js" language="javascript" type="text/javascript"></script> <script type="text/javascript"> <!-- // Placez ici le code Javascript <h1>Titre de la page</h1> <h2>Titre de 2e niveau</h2> <h3>Titre de 3e niveau</h3> ... <h6>Titre de 6e niveau</h6> Voir aussi la balise <title> en section Entête //--> </script> </head> Autre encodage courant : Paragraphe p <p>Un simple paragraphe.</p> Emphase simple et forte em, strong <p><strong>Attention</strong>, le texte est protégé par un <em lang="en">copyright</em>.</p> Retour de ligne br <p>Les programmes de Windows se trouvent dans : <br /> <code>C:\Program files</code></p> Abréviation abbr <p>La <abbr title="Société nationale des chemins de fer">SNCF</abbr> existe depuis 1938</p> Indice et exposant sub, sup <p>Le 2<sup>e</sup> élément de l'H<sub>2</sub>O est l'oxygène.</p> Définition d'un terme dfn <p>L'<dfn>eau</dfn> est un composé chimique, très courant sur le T erre, [...]</p> Orientation du texte bdo <p dir="ltr">Il a dit : <q><bdo dir="rtl">ﺍﻝﺱﻝﻡ ﻉﻝﻱﻙﻡ</bdo> (<em>Was- salaam alaykum</em>)</q>.</p> Commentaires <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> Entités obligatoires < → < > → > " → " & → & Entités courantes   → Espace insécable « → « » → » € → € © → © ® → ® Hyperliens Lien a <!-- Hyperlien vers une page Web --> <a href="http://www.example.com" title="Explication du lien">T exte cliquable</a> <!-- Hyperlien vers une adresse email --> <a href="mailto:adupont@example.com">Envoyez-nous un email</a> Ancre nommée a <a id="identifiant_unique" name="identifiant_unique">T exte</a> Images Image img <img src="images/photo.jpg" alt="T exte pour les aveugles" /> <!-- Commentaire --> Mémento HTML - Balises courantes ➊ ➊ ➊ ➊ Citations et références Citations longues blockquote <blockquote cite="http://abu.cnam.fr/"> <p>Une embuscade était probable.</p> <p>Trente grenadiers, détachés en éclaireurs et commandés par un sergent, marchaient [...]</p> <cite>Victor HUGO, Quatre-vingt T reize.</cite> </blockquote> Citation courtes q <p>Il dit : <q>Fermez la porte !</q></p> Référence à un document cite <p>C'est V. Hugo qui a écrit <cite>Ruy Blas</cite>.</p> Auteur de la page Web address <address> Albert Dupont,<br /> <em>Journaliste, spécialiste Web 2.0</em>,<br /> <a href="mailto:adupont@monjournal.com"> adupont@monjournal.com</a> </address> Texte technique Texte préformaté pre <pre>$a = "fr_FR"; setlocale(LC_ALL, $a); date_default_timezone_set('Europe/Paris'); </pre> Code source et variable code, var <p>La commande <code>$a="fr_FR"</code> permet d'affecter une valeur à la variable <var>$a</var>.</p> Commandes keyb, samp <p>Si vous tapez la commande <keyb>del mydir</keyb>, le programme répondra <samp>C:\mydir\*, êtes-vous sûr (O/N) ?</samp>. Répondez : <keyb>N</keyb>.</p> Balises génériques Elément Bloc générique div <div class="avertissement"> <p><strong>Attention</strong></p> <p>Le formatage peut causer la perte de données.</p> </div> Elément en-ligne générique span <p>La fonction <span class="fonction">trim</span> retire les espaces des extrémités de chaine.</p> Attributs génériques <p class="classe_css" id="id_unique" title="etiquette" style="color:#FF0000" >T exte de la balise</p> Cadre incorporé <iframe src="page.html" width="480" height="240" name="inclusion1"> <p>Votre navigateur ne peut malheureusement pas afficher de cadre incorporé. Vous pouvez appeler la page incorporée par ce lien : <a href="page.html">Titre de la page</a> </p> </iframe> Listes Listes ordonnées ol, li <ol> <li>1er élément de la liste</li> <li>2e élément de la liste</li> <li>3e élément de la liste</li> </ol> OL CSS - list-style-type : none|decimal|lower-roman|upper- roman|lower-alpha|upper-alpha Listes non-ordonnées (puces) ul, li <ul> <li>1er élément de la liste</li> <li>2e élément de la liste</li> <li>3e élément de la liste</li> </ul> UL CSS - list-style-type : none|disc|circle|square Listes de termes dl, dt, dd <dl> <dt>T erme 1</dt> <dd>Définition du terme 1</dd> <dt>T erme 2</dt> <dd>Définition du terme 2</dd> <dt>T erme 3</dt> <dd>Définition du terme 3</dd> </dl> Tableaux Tableaux simples table, tr, th, td, caption <table width="240" border="1"> <caption>Légende du tableau</caption> <tr> <th width="40%">Titre col. 1</th> <th width="30%">Titre col. 2</th> <th width="30%">Titre col. 3</th> </tr> <tr> <td>Données l1 : col1</td> <td>Données l1 : col2</td> <td>Données l1 : col3</td> </tr> <tr> <td>Données l2 : col1</td> <td>Données l2 : col2</td> <td>Données l2 : col3</td> </tr> </table> Fusion des cellules dans un tableau: <td colspan="2"> Cellule fusionnée sur 2 colonnes</td> <td rowspan="2"> Cellule fusionnée sur 2 lignes</td> Balises obsolètes ... ou en passe de le devenir tt, i, b, big, small, hr, frame, frameset Balises non décrites dans ce document ‣ map et area (zones cliquables) ‣ object, embed et param (incorporation de médias) ‣ form, input, select, textarea, etc. (formulaires) ‣ del et ins (versionning) Auteur : Eric Bellot. Mis à jour le 2010-01-24 Document publié selon les termes de la licence Creative Commons CC-BY-SA : http://creativecommons.org/licenses/by-sa/2.0/fr/ 2/2 ➋ ➋ ➋ ➋ Mémento HTML - Balises courantes uploads/s3/ 1-html-memento.pdf

  • 33
  • 0
  • 0
Afficher les détails des licences
Licence et utilisation
Gratuit pour un usage personnel Attribution requise
Partager