// xHTML : principes d'écriture. 1_____

à jour le
20 mars 2007

Eric Pichon  

 

suite...voir lien en bas de page

 

Un contenu HTML s'identifie avec la balise <html> et se termine par la balise </html>

Un document HTML comprend deux grandes parties : l'en-tête placé entre les balises <head> et </head>, suivi du corps du document placé entre <body> et </body>.

Remarques

  • NB : en HTML on peut écrire indifféremment le nom des balises en minuscules ou en majuscules, mais il est préférable d'être conforme aux recommandations du xHTML (écriture du HTML selon les recommandations XML), il est préférable d'utiliser les minuscules

  • Nous ne citerons que les balises ouvrantes <>, mais il est sous entendu que la balise fermante correspondante </> est nécessaire pour marquer la fin de la mise en forme souhaitée. "Utilisez <p> pour créer un nouveau paragraphe" signifiera "Utilisez <p> pour ... et </p> à la fin du paragraphe"

  • De même nous irons à la ligne pour la clarté du texte, mais le code html pourrait s'écrire théoriquement "au kilomètre"

Déclaration du type de document

Pour signifier au navigateur que c'est du HTML et de quelle version il s'agit (les éditeurs génèrent ce code...)

Exemple : pour du xhtml "transitoire"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" / >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

En tête <head>

l'en-tête contient notamment le titre <title> et d'autres éléments tels que les mots clés ou la description que nous verrons plus loin.

Corps du document <body>

Le corps de page contient le texte qui s'affichera dans la fenêtre du navigateur, il est structuré notamment par :

des titres de différents niveaux <h1>,<h2>,<h3>,<h4>,<h5>,<h6>

correspondant à son organisation logique <h1>: titre principal), <h2> : titres des sous-parties...etc. NE PAS les utiliser pour faire joli !,

des paragraphes <p>

chaque paragraphe est séparé du précédent par un saut de ligne. un retour à la ligne simple s'obtient avec <br /> (sans balise fermante)

des listes, numérotées <ol> ou non <ul>

chaque élément d'une liste est encadré par <li></li>

<p>Cette liste contient : </p>

<ol>
<li>un premier</li>
<li>un deuxième élément</li>
</ol>

Cette liste contient :

  1. un premier
  2. un deuxième élément

<p>Cette liste contient : </p>

<ul>
<li>un premier</li>
<li>un deuxième élément</li>
</ul>

Cette liste contient :

  • un premier
  • un deuxième élément

des listes avec définitions <dl>

le terme à définir est encadré par <dt></dt>
sa définition par <dd></dd>

<p>Cette liste contient : </p>

<dl>
<dt>un premier terme</dt>
<dd>qui signifie ceci</dd>
<dt>un deuxieme terme</dt>
<dd>qui signifie celà</dd>
</dl>

Cette liste contient :

un premier terme
qui signifie ceci
un deuxieme terme
qui signifie celà

 

des tableaux <table>

un tableau contient des lignes <tr> d'une ou plusieurs cellules chacune.

<table>
<tr>
<td>nord-ouest</td>
<td>nord-est</td>
</tr>
<tr>
<td>sud-ouest</td>
<td>sud-est</td>
</tr>
</table>

 

nord-ouest

nord-est

sud-ouest

sud-est

Fin du document

</html>

retour en haut de la page


Creative Commons.. BY:NC:SA: -Paternité : ce site peut être reproduit et distribué à condition que l'auteur initial, eric pichon, soit cité.- Non commercial : aucune adaptation, reproduction ou utilisation de ce site ne peut être faite à des fins commerciales, sans accord de l'offrant ('licensor') - Partage à l'identique : des adaptations de ce site ne peuvent être diffusées que sous une autorisation identique. A chaque réutilisation ou distribution, vous devez faire apparaître clairement aux autres les conditions contractuelles de mise à disposition de cette création.

retour en haut de la page - une autre page >