Création d'un document HTML

Par Yeazus, il y a 4 ans

Les bases HTML/CSS

Bonjour à tous,

Je cherche à me former en tant qu'autodidacte sur le HMTL. Pour cela, je désire réaliser un document en html portant sur les IA composé des éléments suivants :

Note : le contenu du document n'est aucun cas le sujet de ma demande.

Le fichier que j'ai réalisé : https://www.cjoint.com/c/KKhthdgHhoE

Ce que je veux

J'aimerais savoir si le document ci-joint comporte des erreurs et si oui, lesquelles ?

Merci d'avance.

3 réponses

Vincent_LETB, il y a 4 ans

Bonjour ,
C''est vraiment tres bien ce que tu as fait
Les seules remarques que je peux te faire c'est de mettre une balise <ul> regroupant l'ensemble de tes <li> dans ta navigation et mettre les liens des ancres dans le titre et pas à l'exterieur.

Yeazus, il y a 4 ans

Bonjour,

Merci de votre retour. Voici le document modifié selon vos recommandations.

https://www.cjoint.com/c/KKji1koTLYL

Le document ne comporte aucune autre erreur ?

Merci d'avance

popotte, il y a 4 ans

Alors c'est pas mal

Il y'a quelques erreurs:
https://validator.w3.org/nu/?showsource=yes&showoutline=yes&showimagereport=yes&doc=https%3A%2F%2Fwww.cjoint.com%2Fdoc%2F21_11%2FKKji1koTLYL_document-html.html

Ensuite il y a la structure du code a revoir

  • La balise title, sur une seule ligne
  • La nav doit se trouver dans le header
  • Pour tes liens, n'utilises pas la balises <br> (d'ailleurs tant que tu n'y est pas obligé, n'utilise JAMAIS la balise <br> :p)

Utilises une liste:

<nav> <ul> <li><a href="#">Rubrique 1</a></li> <li><a href="#">Rubrique 2</a></li> <li><a href="#">Rubrique 3</a></li> </ul> </nav>

(avec le css tu pourras retirer le point tout moche ;))

  • Il ne faut pas de balise <section> dans une balise <article>, il y'a trois balises qui sont toujours des enfants de <main>:

section

article

aside

Bref remplaces tes section par des div ^^

  • Ne met pas les balises inline à la ligne, ce ne sont pas des blocks, tout ce qui est <span>, <abbr>, <b>, <i> etc... ça s'écrit inline

Bref faut pas faire:

L' <abbr title="Intelligence Artificielle">IA</abbr> (ou...

Faut faire:

L'<abbr title="Intelligence Artificielle">IA</abbr> (ou...
  • Pour la structure générale, alors ce ne sont pas des standards donc t'es pas obligé de le faire, mais je te conseilles de formatter ton code comme ça pour une meilleure lisibilité ^^ :

Les block du même niveau doivent avoir un saut de ligne

Les block parent-enfant doivent etres collées

Les balises inlines doivent etre collées

Par exemple:

<!-- Un block et un deuxieme au même niveau --> <div> <div></div> </div> <div> <div></div> </div> <!-- Un block parent et un enfant, qui est parent d'un autre block enfant --> <div> <div> <div></div> </div> </div> <!-- Deux balises inlines --> <p>Lorem</p> <p>Ipsoume</p> <!-- Un petit mix de tout --> <div> <h2>Lorem ipsoume</h2> <h3>Part one</h3> <div> <p>Lorem</p> <p>Ipsoume</p> </div> <div> <p>Ipsoume</p> <p>Lorem</p> </div> </div> <div> <h2>Lorem ipsoume</h2> <h3>Part two</h3> <div> <p>Lorem</p> <p>Ipsoume</p> </div> <div> <p>Ipsoume</p> <p>Lorem</p> </div> <div> <p>Ipsoume</p> <p> Texte trèèèèèèèèèèèèèèèèèèèèèèèèèèèès long qui tien pas sur une ligne </p> </div> </div>

  • Les balises <a> avec l'attribut name n'est supporté que dans les document HTML, en HTML5 ça a été retiré (bon... dans ton cas c'est un document... on va dire que c'est bon x), mais pour un site en HTML5 laisses tomber le <a name="rubrique1"> et utilises <h2 id="rubrique1">)

  • Dans ta section (qui devrait etre une div comme dit dans un point plus haut) tu as deux élements qui se répètent, isoles les dans des div:

<article> <h2>Lorem</h2> <!-- div, pas section :p --> <div> <div> <h3>Une notion aux champ d'application nombreux</h3> <p> L'<abbr>IA</abbr> ... </p> <ul> <li></li> <li></li> </ul> </div> <div> <h3>L'intelligence artificielle appliquée à notre société actuelle</h3> <!-- Etc... --> </div> </div> </article>

Mmmh voila tout ce que j'ai pu trouver :)