1 HTML Memento

Mémento HTML - Balises courantes
La structure HTML 5 Entête

<!DOCTYPE html> <head>
<html lang="fr"> 
<head> <title>Titre du document</title>
<title>TITRE DU DOCUMENT</title> <meta charset="utf-8" />
<meta charset="utf-8" /> <meta name="author" content="Albert Dupont" />
</head> <meta name="description" content="Description du contenu de la
<body> page Web en 150 caractères maximum." />
 <meta name="date" content="2008-12-31T05:00:00+01:00">
<p>VOTRE TEXTE</p>
</body> 
</html> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />


<link type="text/css" rel="stylesheet" media="all" href="style.css" />
<style type="text/css">

</style>


<script src="script.js" language="javascript"
type="text/javascript"></script>
Texte courant <script type="text/javascript">

<h2>Titre de 2e niveau</h2> <title> en section </script>
<h3>Titre de 3e niveau</h3> Entête
... </head>
<h6>Titre de 6e niveau</h6> Autre encodage courant :
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
Paragraphe p
<p>Un simple paragraphe.</p> Entités obligatoires
Emphase simple et forte em, strong < → < > → > " → " & → &
<p><strong>Attention</strong>, le texte est protégé par un Entités courantes

<em lang="en">copyright</em>.</p>
→ Espace insécable « → « » → »
Retour de ligne br € → € © → © ® → ®
<p>Les programmes de Windows se trouvent dans : <br />
<code>C:\Program files</code></p> Hyperliens
Abréviation abbr Lien a
<p>La <abbr title="Société nationale des chemins de 
fer">SNCF</abbr> existe depuis 1938</p> <a href="http://www.example.com" title="Explication
du lien">Texte cliquable</a>
Indice et exposant sub, sup

<p>Le 2<sup>e</sup> élément de l'H<sub>2</sub>O est <a href="mailto:adupont@example.com">Envoyez-nous un email</a>
l'oxygène.</p>
Définition d'un terme dfn Ancre nommée a

<p>L'<dfn>eau</dfn> est un composé chimique, très courant <a id="identifiant_unique" name="identifiant_unique">Texte</a>
sur le Terre, [...]</p>
Orientation du texte bdo Images

<p dir="ltr">Il a dit : <q><bdo dir="rtl">‫<ﺍﻝﺱﻝﻡ ﻉﻝﻱﻙﻡ‬/bdo> (<em>Was- Image img
salaam alaykum</em>)</q>.</p>
<img src="images/photo.jpg" alt="Texte pour les aveugles" />
Commentaires

Mémento HTML - Balises courantes

➊
Citations et références Listes
Citations longues blockquote Listes ordonnées ol, li
<blockquote cite="http://abu.cnam.fr/"> <ol>
<p>Une embuscade était probable.</p> <li>1er élément de la liste</li>
<p>Trente grenadiers, détachés en éclaireurs et <li>2e élément de la liste</li>
commandés par un sergent, marchaient [...]</p> <li>3e élément de la liste</li>
<cite>Victor HUGO, Quatre-vingt Treize.</cite> </ol>
</blockquote>
OL CSS - list-style-type : none|decimal|lower-roman|upper-
Citation courtes q roman|lower-alpha|upper-alpha
Listes non-ordonnées (puces) ul, li
<p>Il dit : <q>Fermez la porte !</q></p>
<ul>
Référence à un document cite <li>1er élément de la liste</li>
<li>2e élément de la liste</li>
<p>C'est V. Hugo qui a écrit <cite>Ruy Blas</cite>.</p>
<li>3e élément de la liste</li>
Auteur de la page Web address </ul>
<address> UL CSS - list-style-type : none|disc|circle|square

Albert Dupont,<br /> Listes de termes dl, dt, dd
<em>Journaliste, spécialiste Web 2.0</em>,<br />
<a href="mailto:adupont@monjournal.com"> <dl>
adupont@monjournal.com</a> <dt>Terme 1</dt>
</address> <dd>Définition du terme 1</dd>
<dt>Terme 2</dt>
<dd>Définition du terme 2</dd>
Texte technique <dt>Terme 3</dt>
Texte préformaté pre <dd>Définition du terme 3</dd>
</dl>
<pre>$a = "fr_FR"; setlocale(LC_ALL, $a);
date_default_timezone_set('Europe/Paris');
</pre>
Tableaux
Tableaux simples table, tr, th, td, caption
Code source et variable code, var
<table width="240" border="1">
<p>La commande <code>$a="fr_FR"</code> permet d'affecter <caption>Légende du tableau</caption>
une valeur à la variable <var>$a</var>.</p> <tr>
<th width="40%">Titre col. 1</th>
Commandes keyb, samp
<th width="30%">Titre col. 2</th>
<p>Si vous tapez la commande <keyb>del mydir</keyb>, le <th width="30%">Titre col. 3</th>
programme répondra <samp>C:\mydir\*, êtes-vous sûr </tr>
(O/N) ?</samp>. Répondez : <keyb>N</keyb>.</p> <tr>
<td>Données l1 : col1</td>
<td>Données l1 : col2</td>
Balises génériques <td>Données l1 : col3</td>
Elément Bloc générique div </tr>
<tr>
<div class="avertissement"> <td>Données l2 : col1</td>
<p><strong>Attention</strong></p> <td>Données l2 : col2</td>
<p>Le formatage peut causer la perte de données.</p> <td>Données l2 : col3</td>
</div> </tr>
</table>
Elément en-ligne générique span
Fusion des cellules dans un tableau:
<p>La fonction <span class="fonction">trim</span> retire les <td colspan="2"> Cellule fusionnée sur 2 colonnes</td>
espaces des extrémités de chaine.</p> <td rowspan="2"> Cellule fusionnée sur 2 lignes</td>
‣‣
Attributs génériques Balises obsolètes
<p class="classe_css" id="id_unique" title="etiquette" ... ou en passe de le devenir
style="color:#FF0000" >Texte de la balise</p> tt, i, b, big, small, hr, frame, frameset
Balises non décrites dans ce document

Cadre incorporé
map et area (zones cliquables)
<iframe src="page.html" width="480" height="240" name="inclusion1"> object, embed et param (incorporation de médias)
<p>Votre navigateur ne peut malheureusement pas afficher form, input, select, textarea, etc. (formulaires)
de cadre incorporé. Vous pouvez appeler la page incorporée par del et ins (versionning)
ce lien : <a href="page.html">Titre de la page</a>
</p>
</iframe> 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

1 HTML Memento

Transféré par

Droits d'auteur :

Formats disponibles

1 HTML Memento

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

1 HTML Memento

Transféré par

Droits d'auteur :

Formats disponibles

Mémento HTML - Balises courantes

La structure HTML 5 Entête

<p><strong>Attention</strong>, le texte est protégé par un Entités courantes

Définition d'un terme dfn Ancre nommée a

Orientation du texte bdo Images

Mémento HTML - Balises courantes

<address> UL CSS - list-style-type : none|disc|circle|square

Balises non décrites dans ce document

Vous aimerez peut-être aussi