5568 sujets

Sémantique web et HTML

[Résolu] La question nulle du jour (XHTML)

Bonjour à tous...

Toujours en quêtes d'infos avant de me mettre au travail sérieusement Smiley idee

je me pose la question suivante :

il est dit un ici et la que le code XHTML doit être totalement disoccié de la présentation dans le cas de l'usage d'une feuille de style CSS, mais je vois à droite à gauche pas mal d'exemple de code ou les balises DIV sont imbriqués afin de permettre de mettre en page par exemple un menu dans une boite situé sur la gauche d'une page... (il s'agit bien d'une information de présentation ? non ?)

Donc la question est : est-t'il possible d'écrire une page XHTML en spécifiant les blocs les uns derières les autres sans ce souccier de rien, puis de définir à n'importe quel moment qu'un des blocs sera imbriqué dans un autre via CSS sans pour autant revenir au code XHTML ?

je sais c'est pas très clair...

merci d'avance Smiley cligne
Modifié le 13 Nov 2004 - 21:23
Administrateur
a écrit :
les balises DIV sont imbriqués afin de permettre de mettre en page

Les balises n'ont pas à être imbriquées pour des questions de mise en page, mais pour des questions de structure si le besoin s'en fait sentir.

a écrit :
par exemple un menu dans une boite situé sur la gauche d'une page..

Là encore, il ne s'agit que de la "présentation" par défaut, la structure telle qu'elle apparait par défaut.
La mise en page, elle, sera dictée par les CSS et le menu sera placé à droite, à gauche, etc.

a écrit :
Donc la question est : est-t'il possible d'écrire une page XHTML en spécifiant les blocs les uns derières les autres sans ce souccier de rien

OUi, c'est ce qu'il faut faire : un document doit être tout à fait lisible si les feuilles de styles sont désactivées.

a écrit :
puis de définir à n'importe quel moment qu'un des blocs sera imbriqué dans un autre via CSS sans pour autant revenir au code XHTML ?

Non, l'imbrication des éléments n'a rien à voir avec la mise en page mais avec la structure.

Je prend un exemple : J'ai un document <body>, qui contient un paragraphe <p> avec un texte dont une partie est en emphase <em> :


<body>
<p>Texte courant bla bla bla avec une partie <em>importante</em></p>
</body>


Nous voyons que les balises sont imbriquées : <em> est dans <p> qui est dans <body>.

Ce n'est pas une question de mise en page mais de structure.

Si j'avais structuré mon document ainsi, pour ne pas imbriquer les balises, cela aurait donné une structure bancale :

<body>
<p>Texte courant bla bla bla avec une partie</p>
<em>importante</em>
</body>


Donc les imbricarions sont parfois nécessaires car c'est elles qui structurent la hiérarchie du document... et il en est de même pour tous les éléments.

Attention : bien-sûr qu'il y'aura toujours une "présentation" par défaut (par exemple ici, notre paragraphe sera affiché à gauche), mais cela n'est pas de la mise en page, juste l'affichage brut de ton document avant l'emploi des CSS.
OK, merci je suis rassuré.

J’ai donc quelques lacunes niveau structure (aux sens strict Smiley smile ) mais je commence à avoir une meilleure vision d'ensemble...

Çà parait aussi simple que c'est puissant et sain. Mais je suis super dérouté sur quelques principes.

À vrai dire j'ai du mal me mettre en route, même si je suis convaincu que la voix des standards et l'unique moyen de développer une site aujourd'hui.

Je bute sur le fait de désapprendre les mauvaises habitudes, puis de revoir toute ma méthodologie....

J'espère qu'il ne me faudra pas trop de temps pour basculer.
Un minimum de structure dans le document est nécessaire si l'on veux avoir un minimum de flexibilité dans la présentation.

Le code HTML

<body id="accueil">
 <div id="entete"><h1>Accueil</h1></div>
 <div id="navigation">
  <ul>
   <li id="actif"><a href="">Accueil</a></li>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
   <li><a href=""></a></li>
  </ul>
 </div>
 <div id="contenu"><p>Paragraphe dans le contenu</p></div>
 <div id="pieddepage"><p>Paragraphe dans le pied de page</p></div>
</body>


Le code CSS

#accueil #entete h1 { 
   background-image: url(accueil.gif); /* La balise <h1> contenue dans l'en-tête de la page d'accueil */
}

/* edit pour correction */
[#red]
#actif li a { 
   font-weight: bold; /* Pour mettre en relief l'ancrage <a> de la page courante */
}
[/#][#blue]
#actif a { 
   font-weight: bold; /* Pour mettre en relief l'ancrage <a> de la page courante */
}
[/#]
/* fin edit pour correction */

#contenu p { 
   text-align: left; /* Les paragraphes <p> de <div id="contenu"> */
}

#pieddepage p { 
   text-align: center; /* Les paragraphes <p> de <div id="pieddepage"> */
}

Les applications sont multiples, voir infinies.
Modifié le 13 Nov 2004 - 16:56
C'est clair, je comprends la philosophie qu'il y a derrière ta méthode...

Je vais m'appliquer à en faire de même....

Merci pour le conseil.
@Stephan> tu utilises un peu trop de balises à mon gout, en limitant les div, il est possible d'en faire autant, tout en conservant une bonne fléxibilité.

<body id="accueil">
 <h1 id="entete">Accueil</h1>
 <ul id="navigation">
  <li id="actif"><a href="">Accueil</a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
 </ul>

 <div id="contenu"><p>Paragraphe dans le contenu</p></div>
 <p id="pieddepage">Paragraphe dans le pied de page</p>
</body>
Le principe à retenir si je ne me trompe pas, est de toute façon d'en faire le minimum tout en veillant à définir des id sur les groupes d'éléments devants être manipulés par la suite ?

@ ElMoustiko

Dans ton exemple la balise <UL> n'est pas intégré dans un <DIV>, dois-je en déduire que les propriétés de positionnement de ces deux balises sont identiques ?

je pourrais faire la même choses avec l'une et l'autre en terme de background, alignement ou je ne sais quoi ?
ElMoustiko a écrit :
@Stephan> tu utilises un peu trop de balises à mon gout, en limitant les div, il est possible d'en faire autant, tout en conservant une bonne fléxibilité.


4 div pour une page entière, je ne crois pas que ce soit exagéré ! Smiley biggol
<div> et <ul> sont des balises de type bloc, c'est à dire qu'elles sont dimensionable, par défaut elles prennent toute la largeur possible, etc...
La <div> n'est dans la plupart des cas pas indispensable pour mettre en forme, peut être dans certains cas pour un truc plus complexe (ou utilisation des <hN> en plus des <ul> pour titrer les rubriques.
Donc pour les alignement, background etc c'est pareil Smiley cligne

Pour ce qui est des id et class, le moins possible, par exemple si tu as un élément qui en contient d'autre, pas besoin de définir de class pour chacun de ses élément, un id sur l'élément parent revient au même et est moins lourd d'implémentation. (ce n'etait qu'un exemple ! )

-edit-
@Stephan> bah non, c'est pas trop, mais si c'est inutile, pas la peine de les laisser sous prétexte qu'on a vu pire !!! surtout que généralement pour les mises en page classique il n'y a pas besoin de tant de balisage.
Modifié le 13 Nov 2004 - 16:59
Administrateur
ernstein a écrit :

Dans ton exemple la balise <UL> n'est pas intégré dans un <DIV>, dois-je en déduire que les propriétés de positionnement de ces deux balises sont identiques ?

Pourquoi vouloir mettre des div partout ? Il n'y a pas que les div qui peuvent être positionnés : TOUS les éléments peuvent l'être.
<ul> se suffit à elle-même, inutile de lui rajouter un conteneur supplémentaire :
http://www.alsacreations.com/articles/economie/
Bon et bien c'est cool....

Je vais pouvoir me mettre à la tâche....

Merci à vous...
à bientôt.
ernstein a écrit :
Le principe à retenir si je ne me trompe pas, est de toute façon d'en faire le minimum tout en veillant à définir des id sur les groupes d'éléments devants être manipulés par la suite ?


Voilà !
Par rapport au post de départ

ernstein a écrit :

Donc la question est : est-t'il possible d'écrire une page XHTML en spécifiant les blocs les uns derières les autres sans ce souccier de rien, puis de définir à n'importe quel moment qu'un des blocs sera imbriqué dans un autre via CSS sans pour autant revenir au code XHTML ?


Je dirais que non seulement c'est possible mais que pour les débutants en css c'est indispensable comme méthode d'apprentissage.

1. faire un document (et même plusieurs, une esquisse de site en quelque sorte) bien réalisé d'un point de vue structuration sans rien présupposer d'une quelconque mise en page.

Le résultat doit être tout à fait présentable et lisible, c'est le niveau nostyle. Très important car il permet de se rendre compte que le couple (x)html/css n'existe que du point de vue des css, le document html est par lui même complêtement autosuffisant. C'est très utile aussi pour un travail sur l'accessibilité.

à ce stade les balises neutres div et span n'ont pas à apparaitre (sauf dans un usage de balises par défaut, par exemple : <div><a href="#">lien isolé</a></div>)

2. partir de ce(s) document(s) pour tester "des" possibilités de mise en page. Sans rien toucher !

3. commencer à introduire des div pour élargir le champ des possibilités.

4. ensuite lire "tous" les modèles de mise en page proposés par alsacréations (le faire avant c'est peut être prendre le risque de ne pas comprendre de quoi il en retourne exactement.)
Sujet clos
Aller à