Problèmes de tout début de cours ?

et autres problèmes

1 février 2024 à 20:43:12

Bonjour

Je suis arrivée au début du cours, intégrer le CSS dans la page HML, mais je pense que je me suis mal engagée..

- J'ai bien créé les fichiers index.html, à propos.html et style.css avec Visual Studio. Mais je pense que ces fichiers doivent se trouver dans un dossier et celui-ci doit-il etre enregistré sous HTML dans l'ordinateur en local ?

- Le fichier images.html est vide car je n'ai pas réussi à importer les images logo Robbie lens ou instagram... à partir de Github....

- à partir de Visual Studio peut-on voir le résultat sur le navigateur?

Je m'excuse du nombre de questions de super débutante.

merci d'avance

AbcAbc6

1 février 2024 à 21:31:57

Bonjour, vous utilisez Visual Studio ou Visual Sudio Code? Ce n'est pas la même chose!

Pour débuter en HTML/CSS un projet doit ce trouver dans un répertoire nommer comme vous le voulez et placer à l'endroit de votre choix dans votre disque.

Pourquoi placer votre projet dans un répertoire? Le jour ou vous souhaitez partager votre travail en le placent sur un serveur c'est ce répertoire que vous allez uploader, et tout ce qui est à l’extérieur de ce répertoire ne fait pas partie de votre site.

Je recommande la structure de travail suivante :

/ (la racine de votre site)

/index.html (la page d'accueil de votre site)

/autre.html (autre page html)

/css/ (le répertoire contenant vos feuilles de style)

/css/styles.css (le fichier contenant vos styles)

/images/ (le répertoire contenant vos images)

/images/bateau.png (une image)

/js/ (le répertoire contenant vos fichier JavaScript)

En ce qui concerne un projet sur github pour le récupérer un git clone dans un terminal et vous récupérer tous les fichiers du projet distant.

La documentation : https://git-scm.com/docs/git-clone/fr#_exemples

Le cours : https://openclassrooms.com/fr/courses/7162856-gerez-du-code-avec-git-et-github/7165692-travaillez-avec-un-depot-distant#/id/r-7481307

-
Edité par AbcAbc6 1 février 2024 à 21:34:44

bymo

13 février 2024 à 22:22:48

Bonsoir, Je suis à 36%du cours P2C2 . Merci pour vos réponses

J'ai donc sous le répertoire 'essai site'

index.html

a propos.html

dossier images: logo.png etc...;

dossier CSS: style.css

dossier JS:

Le résultat est proche de ce qui doit être, sauf la photo de Robbie Lens qui apparait "superposée"?

mais cela ne m'empêche pas de continuer.

 A partir de Visual Studio Code peut-on aller direct sur le web où faut il toujours passer par le répertoire sur l'ordi ?

et mes 2 pages HTML son reliées avec Microsoft Edge je pense que c'est normal...

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Accueil - Robbie Lens Photographie</title>
    <link href="CSS/style.css"rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Manrope&family=Montserrat&display=swap" rel="stylesheet">
</head>

<body>
     <!-- essai site -->

    <div>
        <img src="images/logo .png"logo.png" alt="Logo Robbie Lens">
        
        <a href="a propos.html">À propos</a>



</div>
    <h1>Photographie</h1>

    <p>  
        Où <em>professionalisme</em> s’allie avec <em>passion</em> 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"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>

AbcAbc6

15 février 2024 à 17:10:09

Bonjour, désolé pour ma réponse tardive.

Passez votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/#validate_by_input

L17 et L32 vous avez des incohérences avec les ouvertures et fermeture des guillemets indiquant les valeurs des attributs de ces balises.

Évitez les espaces et caractères spéciaux dans les noms de fichiers et de répertoires.

Quel est le CSS correspondant?

-
Edité par AbcAbc6 15 février 2024 à 17:10:29

bymo

20 février 2024 à 18:19:04

Bonjour,

Si j'ai mis logo .png et non logo.png c'est parce que il ne s'affiche pas si je ne mets pas d'espace. Peut être parce que j'ai "cafouillé" pour le télécharger et j'ai eu logo(3).png et j'ai supprimé (3) ?

le validator.w3.org m'a bien servi merci

je transmets ma page de style

body {
  /* Ici on utilise le sélecteur body pour appliquer une police et une taille par défaut pour les éléments */
  font-family: 'Manrope', sans-serif;
  font-size: 1em;
}

a {
  color:black;
  text-decoration: none;
}


em {
  color: #a5b4fc;
  font-style: normal;
}

h1 {
  font-size: 3.5em;
  color: #a5b4fc;
  font-family: 'Montserrat', sans-serif;
}

p {
  font-size: 1.1em;
font-family: 'Manrope', sans-serif;
} 



  ul {
    font-size:1em;
    font-family: 'Manrope', sans-serif;
  }

AbcAbc6

20 février 2024 à 19:24:26

Bonsoir, Pour les L26 et L33 c'est une duplication de code, en effet la propriété font-family est hérité (de body dans ce cas ci), donc tous les éléments enfant de body auront cette valeur pour cette propriété.

https://developer.mozilla.org/fr/docs/Web/CSS/font-family#d%C3%A9finition_formelle

bymo

18 mars 2024 à 22:49:48 - Message modéré pour le motif suivant : Merci d’utiliser le bouton code pour insérer un code sur le forum

AbcAbc6

18 mars 2024 à 23:18:18

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,

>> border-radius:50px; ne fonctionne pas. (l'auteur dit que le rendu n'est pas trop beau... ) est-ce normal qu'il n'y ait aucun effet ?

Oui c'est normal car vous n'avez pas vérifié votre syntaxe via le validateur CSS => https://jigsaw.w3.org/css-validator/#validate_by_input

Ce n'est pas border-radius qui pose problème c'est la propriété background-color qui n’accepte que des couleurs et pas des images comme le crée linear-gradient => https://developer.mozilla.org/fr/docs/Web/CSS/gradient/linear-gradient

Changer background-color pour un background-image ou la propriété raccourcie background.