5568 sujets

Sémantique web et HTML

[correction] 1ere page HTML, juste HTML.

Bonjour tous le monde!

Je suis nouveau sur le forum, je commence juste a apprendre la création de site.

Après avoir suivi des tutos, j'ai commencer a codé un page HTML très simple avec un titre de page, un menu avec lien fictif, du contenu avec titre de différent niveau et paragraphe, tout ça dans des <div>.

J'ai passer la page sur le validateur W3C est tout est OK.

Mais je voulais savoir si dan ce code il n'y a pas d'erreurs? le placement des <div> par exemple, ou l’indentation du code est il lisible? ai-je fait des erreur a éviter?

Voila je demande conseil svp.

Je ne sais pas si je suis dans la bonne section du forum et si ce genre de demande est tolérer?
Si c'est possible, Merci d'avance!^^

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>Un Site Web</title>

  <link rel="stylesheet" media="screen" href="ecran.css" />
</head>


<body>

  <h1>Titre du site ou Logo</h1>

    <p>Phrase sous logo ou pas</p>

<div id="menu">
  <ul>
  
    <li><a href="">Lien Menu 1</a></li>
    <li><a href="">Lien Menu 2</a></li>
    <li><a href="">Lien Menu 3</a></li>
    <li><a href="">Lien Menu 4</a></li>
    <li><a href="">Lien Menu 5</a></li>
  
  </ul>
</div><!-- #menu -->


<div id="contenu-acceuil">

  <div id="colonne-haut">
    <h2>Titre de contenu colonne haut</h2>
    
      <p>Paragraphe 1 contenu colonne haut. Paragraphe 1 contenu colonne haut. Paragraphe 1 contenu colonne haut. Paragraphe 1 contenu colonne haut. Paragraphe 1 contenu colonne haut. Paragraphe 1 contenu colonne haut.Paragraphe 1 contenu colonne haut. Paragraphe 1 contenu colonne haut. Paragraphe 1 contenu colonne haut. Paragraphe 1 contenu colonne haut.</p>
      
      <p>Paragraphe 2 contenu colonne haut. Paragraphe 2 contenu colonne haut. Paragraphe 2 contenu colonne haut. Paragraphe 2 contenu colonne haut.</p>
      
      <p>Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut.Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut.  Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut.Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut.  Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut.Paragraphe 3 contenu colonne haut. Paragraphe 3 contenu colonne haut.</p>
  </div><!-- #colonne-haut -->
  
  
  <div id="colonne-bas">
    <h2>Titre de contenu colonne bas</h2>
    
      <p>Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas. Paragraphe 1 contenu colonne bas.</p>
      
      <p>Paragraphe 2 contenu colonne bas. Paragraphe 2 contenu colonne bas.Paragraphe 2 contenu colonne bas. Paragraphe 2 contenu colonne bas. Paragraphe 2 contenu colonne bas. </p>
  </div><!-- #colonne-bas -->
  
  <div id="colonne-droite">
    <h3>Titre de contenu colonne droite</h3>
    
      <p>Paragraphe 1 contenu colonne droite. Paragraphe 1 contenu colonne droite.Paragraphe 1 contenu colonne droite. Paragraphe 1 contenu colonne droite. Paragraphe 1 contenu colonne droite. Paragraphe 1 contenu colonne droite. Paragraphe 1 contenu colonne droite. Paragraphe 1 contenu colonne droite.</p>
  </div><!-- #colonne-droite -->

</div><!-- #contenu-d'accueil -->



</body>

</html>
Bonjour,

Quelques remarques:

Essaye de nommer tes classes et tes ids d'après leurs fonctions et non d'après leurs positions ou leurs apparences. Par exemple 
<div id="menu">
est ok, mais pour 
<div id="colonne-droite">
suppose que tu décides de changer le design et d'intervertir les colonnes gauche et droite ?

Evite de créer plus de div que nécessaire. Pour ton menu, j'écrirais plutôt

<ul id="menu"> 
    <li><a href="">Lien Menu 1</a></li> 
    <li><a href="">Lien Menu 2</a></li> 
</ul>

Pour les menus, une bonne pratique est de styler différemment le lien correspondant à la page où se trouve le visiteur
<li id="active"><a href="">Lien Menu 2</a></li>

Sinon pour les faux-textes destinés à tester les mises en formes, utilise un générateur comme http://www.blindtextgenerator.com/fr . Ce sera plus efficace.

Enfin, chaque page doit avoir une balise META "Description" à mettre dans ton <head>.

<meta name="description" content="Description du contenu de la page. Utilisée par les moteurs de recherche pour les snippets dans les pages de résultats, elle doit donner envie à l'internaute de cliquer sur le lien." />


Bon apprentissage.
Modifié par Eol (09 Aug 2011 - 13:37)
d'accord je met pour le moment un seul <div> pour le contenu! puis j'en r'ajouterai si besoin pour séparer les éléments.

Bon je vais tester les différents conseils que tu m'a donner et ensuite essayer de styler la page^^

Merci beaucoup!
Bonjour,

La meta description n'est pas obligatoire... Smiley rolleyes Elle est fortement conseillée pour ceux qui savent comment la remplir (nuance).

Pour moi, les div colonne-haut et colonne-bas ne se justifient pas dans le code seul ; s'il y a un impératif de design, cela peut les justifier.

Ton h3 n'est pas correcte, ce devrait être un h2 ("Titre de contenu colonne droite" ne fait pas partie de "contenu colonne bas").
Salut,

Pour l'appel de la feuille de style, j'ajouterais l'attribut type indiquant le type MIME du fichier CSS, comme suit :
<link rel="stylesheet" media="screen" href="ecran.css" type="text/css" />
a écrit :
Pour moi, les div colonne-haut et colonne-bas ne se justifient pas dans le code seul ; s'il y a un impératif de design, cela peut les justifier.


+1 vu que je doit styler les contenu.
Pour un Gabarit simple de code HTML les div colonnes sont inutiles.

pour le h3 c'est une erreur pas volontaire.^^


victor: Je n'est pas encore tout assimiler sur les choses qu'on peut faire avec la partie <head>.

Le contenu du link vient de "Squelettor" donc je n'est pas penser a le retoucher pour le moment.


Merci a vous. Smiley cligne
Sujet clos
Aller à