Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème liaison de mes fichiers html et css

Sujet résolu
    21 juillet 2024 à 18:58:05

    Bonjour, je travaille sur le cours "html,css" d'Openclassrooms et je rencontre un problème avec mon fichier html nommé "Index" et mon fichier css nommé "style.css":les modifications que je voudrais apporter à l'aide de mon fichier "style.css" n'apparaissent pas sur mon fichier "Index". Quand j'ouvre la page "Index" sur mon navigateur Edge, tout en haut apparaît ceci: "< link href="style.css" rel="stylesheet" >". Je précise que mes 2 fichiers se trouvent dans le même dossier. L'éditeur de code que j'utilise est Visual studio code et je travaille sur Windows. Autre chose: mes images n'apparaissent pas(c'est les textes alternatifs qui apparaissent sur mon navigateur) mais je n'avais pas réussi à résoudre ce problème et j'avais laissé tomber.

    Voici le contenu de mon fichier "Index":

    <!DOCTYPE html>
    
    <html lang="fr">
        <head>
            <meta charset="UTF-8">
            <title>Accueil - Robbie Lens Photographie</title>
            <link href="style.css" rel="stylesheet" >
        </head>
        <body>
            <div>
            <img src="images/logo.png" alt="Logo Robbie Lens">
            <a href="a-propos.html">À propos</a>
            </div>
    
            <h1>Photographie</h1>
            <p>
                Où <span class="important"> professionalisme </span> s’allie avec <span class="important"> passion </span>. Depuis plus de 5 ans maintenant, j’exerce mon métier avec la passion
                qui m’anime : capturer l’essence de chaque instant.
            </p>
            <img src="images/robbie-lens.png" alt="Portrait avec effet de la photographe Robbie Lens">
    
            <div>
            <img src="images/logo.png" alt="Logo Robbie Lens">
            <a target="_blank" href="https://twitter.com/">
                <img src="images/twitter.png" alt="Logo Twitter">
            </a>
            <a target="_blank" href="https://www.instagram.com/">
                <img src="images/instagram.png" alt="Logo Instagram">
            </a>
            </div>
        </body>
        </html>
    Et voici le contenu de mon fichier "style.css":
    a {
        color:black;
    }
    
    .important {
        color:#A5B4FC;
    
    }
    Est-ce qu' on pourrait m'aider svp?
    Merci d'avance

    -
    Edité par Topalg 21 juillet 2024 à 21:14:47

    • Partager sur Facebook
    • Partager sur Twitter
      21 juillet 2024 à 20:47:02

      Bonjour, Merci de lire les règles du forum AVANT de créer un sujet.

      Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
      Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.

      Pour plus d'informations, nous vous invitons à lire les règles générales du forum

      Merci de colorer votre code à l'aide du bouton Code </>

      Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton  </> de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: php;">Votre code ici</pre>.

      Merci de modifier votre message d'origine en fonction.

      Liens conseillés


      Bonsoir, ton fichier s'appelle bien index.html (avec l'extension .html)?

      Supprime l'espace entre le chevron ouvrant et le nom de la balise "link" : 

      <link rel="stylesheet" href="style.css">

      Pour ce qui est des images, pourrais tu poster une capture écran de ton répertoire de travail et du répertoire images?

      Dernière chose passe ton code HTML au validateur pour voir et corriger les erreurs de syntaxes => https://validator.w3.org/#validate_by_input

      L'attribut classe n'existe pas, c'est l'attribut class (sans le e).

      • Partager sur Facebook
      • Partager sur Twitter
        21 juillet 2024 à 21:44:27

        Merci beaucoup pour ton aide AbcAbc6, après avoir modifié mon code selon tes recommandations, mon fichier css "s'applique"(j'avais préalablement renommé mon fichier css en "style"). De plus mon fichier html s'appelle "Index". 

        Pour les images, j'ai essayé d'insérer une des images d'abord et le chargement de l'image est très long (mon image n'avait pas terminé de se charger et j'ai abandonné à cause de la lenteur), en conséquence je n'y suis pas arrivé. Si tu as une suggestion pour que le chargement des images soient plus rapides, je t'écouterai.

        • Partager sur Facebook
        • Partager sur Twitter
          21 juillet 2024 à 22:03:15

          Bonsoir,

          >> Si tu as une suggestion pour que le chargement des images soient plus rapides, je t'écouterai.

          Ne pas avoir une image de 4000pixels pour un affichage de 400px de large. Travailler la taille des images et leur poids dans un logiciel d'image pour les optimiser pour le web.

          Autre solution les attributs srcset et size.

          https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html

          • Partager sur Facebook
          • Partager sur Twitter

          Problème liaison de mes fichiers html et css

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur
          • Markdown