5568 sujets

Sémantique web et HTML

Besoin d'avis, organisation html/css

Bonjour tout le monde !

Je suis en train de réaliser un version statique de ce qui deviendra (en principe) un blog, c'est une réalisation demandée dans un cadre scolaire.

En gros je veux styliser mes "articles".

Voilà le style en image, histoire que vous compreniez un peu plus facilement Smiley biggrin
upload/46831-Maquettear.jpg

Je ne suis pas une machine en Html/css et débute vraiment en sémantique..

Pour l'instant j'ai mit en forme l'html ce cette façon..


<article>
			<div class="contenu">
				<div class="image_contenu"><img src="bonhomme_amazon.png"></div>					
						<div class="contenu_droit">
							<div class="titre_contenu">Titre article 1 très très long on sait jamais ce qu’il peut arriver !</div>
								<div class="nb_conmments">20</div>
									<div class="texte">
										<p>Desciption de l’article où l’on apprend pleins de trucs hyper intéressant.<br><br>

						 					"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididu...."
										</p>
									</div>
						</div>
					
				<div class="sous_contenu">
					<div class="trait_couleur"></div>
					<div class="categories">Catégorie Tags Une autre catégorie</div>
				</div>
			</div>
			</article>


Es-ce que a votre avis la structure est "bonne"... J'ai l'impression d'être atteint de divite aiguë.. Avec cette structure je me bat avec le nombres de commentaires (en haut a droite) il ne veut pas prendre sa place avec l'image etc... Et mon trait se retrouve en tout en haut.. Enfin bref sa me force a croire que ce que je fait n'est pas bon. j'ai besoin de conseils j'imagine !


Merci d'avance a ceux qui prendront le temps d'y jeter un coup d'oeil ! Smiley ravi
Modifié par lucas73 (02 Nov 2012 - 02:12)
Salut

Voici une structure simplifiée (presque celle que j'utilise sur mon site) :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Titre du billet – Nom du site</title>
	</head>
	<body>
		<header role="banner">
			<h1>Nom du Blog</h1>
		</header>
		<article role="article">
			<header>
				<img src="image.jpg" alt="">
				<h2>Titre du billet</h2>
			</header>
			<div id="content">
				<p><strong>Chapeau</strong></p>
				
				<p>blablabla</p>
				<h3>Sous-titre</h3>
				
				<p>blablabla</p>
			</div>
			<footer>
				<p>Catégorie&nbsp;: <a href="categorie/machin">Machin</a></p>
				<p>Tags&nbsp;:</p>
				<ul>
					<li><a href="/tag/truc">Truc</a></li>
					<li><a href="/tag/bazar">Bazar</a></li>
				</ul>			
			</footer>
			<section id="comments">
				<article>
					<header>
						<h2 id="co1"><a href="#co1">1</a>. Commentaire de Truc</h2>
					</header>
					<div>
						<p>super billet</p>
					</div>
				</article>
				<article>
					<header>
						<h2 id="co2"><a href="#co2">2</a>. Commentaire de Machin</h2>
					</header>
					<div>
						<p>J'adore</p>
					</div>
				</article>
			</section>
		
		</article>
		<footer role="contentinfo">
			copyright
		</footer>
	</body>
</html>

Modifié par Patidou (05 Nov 2012 - 00:37)
Pour tout les autres, si ça vous intéresse voici la structure que j'ai utiliser =) 

<body>
	<article>
		<div class="contenu">
			<div class="image"><img src="image.png" alt="image_amazon"></div>
				<div class="titre">Titre article 1 </div>
					<div class="commentaire">20</div>
						<div class="texte">
							<p>Desciption de l’article <br><br>

	"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor."
							</p><!---->
						</div>		
			</div>
			<div id="bandeau">
				<div class="categorie"><a class="cat" >Catégorie</a>&nbsp;&nbsp;<a class="tag" >Tag</a>&nbsp;&nbsp;<a class="cat_2" >Une autre catégorie</a></div>
				<div class="bt_social">Bouton fb et Twitter</div>
			</div>
		</article>
	</body>



Voilà =) !
Ben ça a servi à grand chose que je me casse la tête. Smiley ohwell

Ton code manque de sémantique html, notamment au niveau des titres (h1, h2, etc).

Dans mon code j'ai oublié la date de publication avec <time>.
Modifié par Patidou (03 Nov 2012 - 13:48)
Patidou a écrit :
Ben ça a servi à grand chose que je me casse la tête. Smiley ohwell

Ton code manque de sémantique html, notamment au niveau des titres (h1, h2, etc).

Dans mon code j'ai oublié la date de publication avec &lt;time&gt;.

+1. On pourrait tout de même avoir un h2 (ou un h1 s'il d'agit vraiment du seul titre de la page) à la place de la div class="titre", quitte à appliquer une class sur ce h2 pour éviter son comportement par défaut (une bonne pratique).
Non, ce n'est pas le seul titre de la page, disons que si je suis la sémantique je vais me retrouver avec du H3... Rien de grave mais bon ...

C'était uniquement pour styliser la maquette HTML/CSS en vue d'une réalisation du site avec Cake PHP , donc j'imagine que j'aurais tout le loisir de repenser un petit peut ma construction quand il faudra intégrer tout ça =)

Pour l'instant je me fait les dents sur CakePhp ! Smiley biggrin
lucas73 a écrit :
Pour l'instant je me fait les dents sur CakePhp ! Smiley biggrin

Ça c'est du bon boulot! Perso j'aimerais passer sur un framework de ce type, genre Symfony2. Mais ça ne sera pas pour tout de suite...
On dérive du sujet mais à ce que j'ai entendu, CakePhP est bien plus simple que Zend et Synphony, en tout cas la période de prise en main est plus mince, comparée à celle de Zend et Symphony ^^
lucas73 a écrit :
On dérive du sujet mais à ce que j'ai entendu, CakePhP est bien plus simple que Zend et Synphony, en tout cas la période de prise en main est plus mince, comparée à celle de Zend et Symphony ^^

... surtout que pour CakePHP il existe d'excellents tutos videos proposés par Grafik Art. À consommer sans modération.

De toute façon je n'ai pas encore pris de décision : le système de cheat code (moteur de template Twig) proposés pour composer les thèmes sous symphony2, ça m'énerve. Quand je pense à ce que certains osent dire sur le code propriétaire de WordPress...
Sujet clos
Aller à