jeannette 08082008 le 19 Sep 2020 à 22h21

Bonjour ! Alors en ce moment je m'entraine a coder des pages internet avec VS Code (visible que par moi) et Galad El ma donner un petit défi de réaliser une page internet sur les chevaux avec un titre, une image de cheval, un petit texte descriptif justifié et de largeur 800px, et ensuite quelques citations en italiques !
Bon vu que je commence le code est pas ouf du tout mais la page est bien je trouve xD
Voilà n'hésitez pas a me donner des conseils sur le code ! (ce que j'ai mis dedans qui est inutule ou chose que j'ai oublier, ou mal fait, ext...)

Commentaires

Avatar de jeannette 08082008
jeannette 08082008 le 20 Sep 2020 à 09h54

Alors, euh Galad ma corrigé et j'ai fait plein d'erreur s'il vous plaît ne vous moquez pas, donnez juste votre avis ! :'D

Avatar de Hozber
Hozber le 20 Sep 2020 à 17h27

Salut !

Pour un début c'est vraiment pas mal, il y a quelques coquilles mais c'est normal donc je vais essayer d'expliquer ça :

• au niveau de l'écriture c'est super (DOCTYPE, html, séparation du head et du body, etc) : comme dit sur ta ligne de commentaire concernant la balise head, c'est là qu'on stocke des informations qui n'apparaîtront pas sur ta page (l'encodage, les données meta, les liens pour des fichiers externes, etc) et c'est également dans ce champ que tu peux insérer tes balises "style" ainsi que leur contenu > du coup tes lignes de CSS en haut devraient se retrouver entre ces balises "style" dans le head

• pour une page internet on différencie trois niveaux dans le body : header, main, footer
- header : c'est là où on trouvera principalement le titre de la page, le logo du site, le menu
- main : tout le contenu de la page
- footer : le pied de la page (généralement des liens comme les mentions légales, le plan du site, etc)
• si ce n'est qu'une simple fiche, pas besoin de se casser la tête avec ces trois sections bien entendu !

• afin d'obtenir une page plus optimisée, il faut (dans l'idéal) utiliser des balises sémantiques : ce sont des balises universelles qui donnent une indication sur leur contenu
• si on reprend ce que j'ai dit dans le point précédent avec header/main/footer : ce sont des balises sémantiques, le "header" est ce qu'on pourrait traduire par "entête" et elle permet donc de délimiter tout ce qui fait partie du haut de ta page (pareil pour "main" qui sert à délimiter une grande partie pour ton contenu et "footer" pour le bas de la page)
++ tu pourras trouver plus d'informations <a href="https://ronan-hello.fr/series/html/balises-semantiques-html" target="_blank">ici</a> !

• l'utilisation des balises sémantiques est importante pour mieux comprendre et mieux structurer son code (et c'est aussi nécessaire pour une meilleure accessibilité pour les personnes aveugles par exemple)
• la div et la span ne sont pas des balises sémantiques puisqu'elles n'indiquent en rien leur contenu, on les considère plutôt comme des "boîtes" dans lesquelles on peut tout fourrer :B
• concernant ton code, il faudrait que tu remplaces ta seconde "div" par un "p" : la balise "p" est une balise de paragraphe et également une balise sémantique
• à la fin pour tes citations, il est préférable d'utiliser des balises sémantiques comme "blockquote" pour des citations longues, "q" pour des citations en incise (coupée avec des guillemets) et "cite" pour des citations en italique (utilisée notamment pour donner des références comme des titres de livres, de films, etc)

• en général on évitera d'insérer du CSS dans du HTML, parfois t'as pas trop le choix mais quand on peut, mieux vaut tout écrire dans ta feuille de style plutôt que d'injecter dans ton HTML > ça rendra ton code plus lisible et compréhensible !
• comme dit plus haut, la balise "div" est comme une boîte fourre-tout et ce n'est pas une balise sémantique, il n'est pas déconseiller de l'utiliser mais parfois elle n'est juste pas utile, comme pour ton début de code avec l'image, si tu l'enlèves ça ne changera rien mis à part que ton image ne sera plus centrée (mais ça s'arrange dans le CSS)



POUR CONCLURE (rapidement) :

- il faudrait enlever ta première "div" et retirer les balises vides
- changer la deuxième "div" par un "p" pour optimiser ton code
- retirer la dernière "div" et mettre tes citations dans des balises de citation (blockquote, q ou cite)


Je me suis permise de te faire un exemple afin d'illustrer clairement mes propos (j'espère) :
https://codepen.io/osblk/pen/rNeQBRN


N'hésite pas si tu as des questions, c'est peut-être pas clair tout ce que je dis et ça fait beaucoup à avaler aussi, désolée. °3°

Je te souhaite donc une bonne continuation, en espérant que mes remarques ne te décourageront pas !

Avatar de jeannette 08082008
jeannette 08082008 le 20 Sep 2020 à 17h39

@Hozber
Wow merci d'avoir pris le temps de mieux m'expliquer ! *^*
Bien évidement vu que je débute je ne comprend pas tous ce que tu viens de me dire mais c'est pas grave !
Encore merci beaucoup de m'avoir donner ton avis et tes conseils !
Et non elles ne me décourage pas du tout, ça me donne encore plus envie de coder !

Avatar de Hozber
Hozber le 20 Sep 2020 à 17h53

Avec grand plaisir !

Et surtout n'hésite pas si tu as un problème ou des questions, tu peux me contacter par MP ça ne me dérange pas du tout

Page :

Vous devez être inscrit et connecté pour pouvoir poster un commentaire.