Structure HTML

Sur mon site Fireworks Zone je présente des tutoriaux de Fireworks. Exemple d'un tutorial: http://www.fireworkszone.com/Devicecentralintegration_589.html

Ma question: quelle serait la meilleure structure HTML à adopter pour obtenir ceci? en utilisant <p>, <ol> etc.

1- titre
texte texte texte texte 

texte texte texte texte 

1-sous titre
texte texte texte texte 
2-sous titre
texte texte texte texte 
3-sous titre
texte texte texte texte 

2- titre
texte texte texte texte 

texte texte texte texte 

1-sous titre
texte texte texte texte 
2-sous titre
texte texte texte texte 
3-sous titre
texte texte texte texte 

3- titre
texte texte texte texte 

texte texte texte texte 

Merci

Hello,

Je pense que tu t'emmêles les pinceaux. Là suivant ton exemple, ce serait un truc du style :

<h1>titre 1</h1>
<p>du texte dans un paragraphe</p>
<p>encore du texte dans un paragraphe</p>
<p>encore un paragraphe</p>
<h1>titre 1</h1>
<p>du texte dans un paragraphe</p>
<h2>titre 2</h2>
<p>du texte dans un paragraphe</p>
<p>encore du texte dans un paragraphe</p>
<h3>titre 3</h3>
<p>du texte dans un paragraphe</p>
<h2>titre 2</h2>
<p>du texte dans un paragraphe</p>
<!-- etc. -->

les listes numérotées servent à énumérer des éléments du contenu suivant un ordre bien défini.

<h1>recette quatre quart</h1>
<h2>ingrédients</h2>
<p>il vous faut :</p>
<ol>
	<li>250 g. de beurre</li>
	<li>250 g. de farine</li>
	<li>250 g. de sucre</li>
	<li>3 oeufs</li>
	<li>une pincée de sel</li>
</ol>
<h2>préparation</h2>
<p>Préchauffez le four à 200 °C.
Melanger le beurre mou et le sucre, ajouter les oeufs battus et un peu de farine (si ça commence a former des caillots), puis le reste de la farine avec la levure et le rhum a la fin. </p>
<!-- etc. -->

A noter que nous pourrions remplacer les listes numérotés par des liste à puce.

Bonne journée
Modifié par Nolem (14 May 2010 - 13:06)

Bonjour Nolem,


Dans ton exemple, il n'y a pas de sous-titre comme dans mon exemple. Est ce que ça veut dire que ce n'est pas possible?

fireworkszone a écrit :
Dans ton exemple, il n'y a pas de sous-titre comme dans mon exemple. Est ce que ça veut dire que ce n'est pas possible?

Ce sont les éléments h1 à h6 qui permettent d'indiquer du texte comme étant des titres et sous-titres. Il existe une astuce à ce sujet.

mais comment je fais pour avoir un sous-titre décalé avec le texte?

<h1>Titre 1</h1>

<p>du texte du texte du texte</p>
<p>du texte du texte du texte</p>

  décalé-><h2>Sous titre 1 </h2>
  décalé-><p>du texte du texte du texte</p>
  décalé-> <p>du texte du texte du texte</p>

    décalé-><h2>Sous titre 1 </h2>
    décalé-> <p>du texte du texte du texte</p>
    décalé-><p>du texte du texte du texte</p>

<h1>Titre 2</h1>

Modifié par fireworkszone (14 May 2010 - 14:04)

fireworkszone a écrit :
mais comment je fais pour avoir un sous-titre décalé avec le texte?

Tu confonds le rendu visuel par défaut d'une liste (où les éléments de la liste sont effectivement décalés), avec leur signification.

Les éléments HTML ol et ul représentent des listes d'éléments. Par exemple, la liste des liens d'un menu de navigation, ou bien encore la liste des ingrédients d'une recette de cuisine. Dans ton cas, une liste est inappropriée, et la solution proposée par Nolem correspond à ce que tu souhaite.

Quant à la mise en page, elle est effectuée par les CSS. Pour décaler tes sous-titres, tu pourra par exemple utiliser la propriété margin, appliquée aux éléments que tu souhaites décaler.

Je peux essayer ceci:

<h1>Titre 1</h1>

<p>du texte du texte du texte</p>

<p>du texte du texte du texte</p>

<dl>
<dt><h2>Sous titre 1 </h2></dt>
<dd>du texte du texte </dd>

</dl>

Non, les éléments dl, dt et dd n'ont pas lieu d'être ici. Les balises HTML ne doivent pas être utilisées en fonction de leur rendu visuel. Il te faut conserver la structure donnée par Nolem :

<h1>titre 1</h1>
<p>du texte dans un paragraphe</p>
<p>encore du texte dans un paragraphe</p>
<p>encore un paragraphe</p>
<h1>titre 1</h1>
<p>du texte dans un paragraphe</p>
<h2>titre 2</h2>
<p>du texte dans un paragraphe</p>
<p>encore du texte dans un paragraphe</p>
<h3>titre 3</h3>
<p>du texte dans un paragraphe</p>
<h2>titre 2</h2>
<p>du texte dans un paragraphe</p>

A laquelle tu joindra une feuille de style de ce type :

h2{
  margin-left: 20px;
}
h3{
  margin-left: 40px;
}

Modifié par octopus984 (14 May 2010 - 17:20)