Correction du code

1 mars 2021 à 20:45:49

Hello à tous !

Je me suis lancé dans l’apprentissage du langage HTML5 depuis quelques jours et j'ai finit l'élaboration d'un premier petite site web pour m'exercer. Là encore je voulais exposer mon code source afin d'avoir de vos avis sur d'éventuels améliorations que je pourrais apporter à mon site.
Je tiens à préciser que j'ai un niveau débutant mais je prends part de vos conseils avec plaisir.
A bientôt sur le forum !

AnttonDev

1 mars 2021 à 20:49:05

Bonjour,

D'accord, mais sans code ni lien, c'est un peu compliqué de te conseiller ! 😉

Si ton site est en ligne, tu peux nous poster le lien,

si ton site n'est pas en ligne, soit tu postes tout le code sur le forum en utilisant le bouton </> du forum, soit tu upload tout sur github, soit tu fais un codepen ou un codesandbox

-
Edité par AnttonDev 1 mars 2021 à 20:54:32

article sur les cookies walls • validator html • validator css • Doc MDN • SweetAlert2• Lorem Ipsum • lorem Picsum • html color codes • Caractères spéciaux et entités HTML

Mon site : BLOG | anttondev (wixsite.com)

Massinissa B.

1 mars 2021 à 20:52:14

Merci Antton, justement j'insère le code de suite

<!DOCTYPE html>

<html>
    <head>
    <meta charset="utf-8">
    <title>Page de test</title>
    
    </head>
    
    <body>
    	<h1>In the light we walking, in the darkness we to dodge</h1>

    	<p> <br>Best Nhz's productions: ABSOLUTION, DOWNFALL, UFO (that's the best production, it's legendary)</p><br>

    <img src="https://cdn.pixilart.com/photos/orginal/7c36543ed6a5465.gif">

    <h2>La liste illustré de ce qu'il faut faire pour réussir dans le métier</h2>
    <ul>
    	<li>Work and Hustlin, travailler dûr pour atteindre ses objectifs <br>
    		<img src="https://media.tenor.com/images/2355c94be9470f5d15b2040b931b7bc7/tenor.gif"></li>
    	<li>Ne reculer devant rien, quel que soit l'obstacle et toujours y croire <br>
    		<img src="https://media1.tenor.com/images/0807e6fa85d2730c9ac62ebc5a819fe8/tenor.gif?itemid=5650515"></li>
    	<li>Et enfin la porte de l'acsenceur du toit du monde s'ouvre à nous  <br>
    		<img src="https://media0.giphy.com/media/i4jKndRm8gnI5TpFJu/200.gif"></li>
    </ul>
    

    </body>




    </html>

Voici le code de la première page (faites pas trop attention aux conneries que j'ai écris c'était surtout histoire d'insérer du texte et de l'image :lol: )

-Et enfin voici le code de la dernière page, sur celle-ci je me suis entrainé à rajouter des balises contenant des liens afin de varier le contenu

<!DOCTYPE html>

<html>
    <head>
    <meta charset="utf-8">
    <title>Les Secrets d'une réussite</title>
    <link rel="stylesheet" href="style.css">
 </head>

 <body>

     <div id="carte">
          <a href="https://www.youtube.com/watch?v=JU9TouRnO84"><h1> CLIQUE ICI POUR DECOUVRIR TON AVENIR<h1><a/a>

          	<a href=tuto2.html><img src="https://parapharmaciealgerie.com/wp-content/uploads/2016/07/cliquez-ici.png"></a>

     </div>

 </body>

 </html>

-
Edité par Massinissa B. 1 mars 2021 à 20:52:34

AnttonDev

1 mars 2021 à 21:09:22

Bon, bein c'est plutôt pas mal, néanmoins, il y a quelques erreurs que font beaucoup de débutant :

Le classique, le <br> placé à tout vas : Un <br> sert uniquement à faire des sauts de lignes dans un paragraphe, pas à faire des espacements.
une image doit toujours avoir un attribut alt (documentation sur cet attribut)
Ligne 13 de la deuxième partie, il y a un soucis : tu ouvres une balise h1 qui n'est pas fermée ensuite (tu as oublié le slash). Et la balise a n'est pas correctement fermée.
Ligne 15, l'attribut href doit être entre guillemets.

N'hésite pas si tu as besoin de plus de précisions

-
Edité par AnttonDev 2 mars 2021 à 18:22:47

article sur les cookies walls • validator html • validator css • Doc MDN • SweetAlert2• Lorem Ipsum • lorem Picsum • html color codes • Caractères spéciaux et entités HTML

Mon site : BLOG | anttondev (wixsite.com)

Massinissa B.

1 mars 2021 à 21:22:41

Merci pour tes conseils Antton j'ouvre SublimeText tout de suite pour corriger tout ça. Sinon après cela j'aimerais bien passer à une étape supérieur, exemple rajouter des animations sur mon site, avoir un design plus propre et pro. Toujours en HTML5 ou je dois m'orienter vers un autre langage ? J'ai l'impression d'être un peu perdu maintenant.

AbcAbc6

1 mars 2021 à 21:35:49

Bonsoir, je complèterais ce que dit AnttonDev par le fait que les erreurs de syntaxe vous pouvez les corriger à l'aide du validateur

=> https://validator.w3.org/#validate_by_input

Cela facilite la vie

Pour les animations tu as ce cours https://openclassrooms.com/fr/courses/5919246-creez-des-animations-css-modernes

et la doc sur les @keyframe https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations

PS : @AnttonDev Pour moi les <br> sont bien placé.

Massinissa B.

1 mars 2021 à 21:45:45

Wow je viens de découvrir ce corrigeur, merci de m'avoir fait partagé le lien

AnttonDev

2 mars 2021 à 17:46:26

@AbcAbc6 ligne 13, le br est en dehors du paragraphe, pour moi ils doivent être à l'intérieur des paragraphes, non ?

-
Edité par AnttonDev 2 mars 2021 à 18:23:10

article sur les cookies walls • validator html • validator css • Doc MDN • SweetAlert2• Lorem Ipsum • lorem Picsum • html color codes • Caractères spéciaux et entités HTML

Mon site : BLOG | anttondev (wixsite.com)

AbcAbc6

2 mars 2021 à 21:40:04

@AnttonDev Bonjour, exact je n'avais pas bien vu cette ligne 13, mille excuses :'(

Tu as raisons.