Partage

Correction des "Pratiquez" du cours HTML 5/CSS 3

Une aide pour tous.

24 octobre 2016 à 19:26:00

Bonjour, je poste ce message ici, qui est en fait une proposition pour aider ceux bloqué sur les pratiquez du cours sur l'HTML 5 et le CSS 3.

En effet à chaque fin de chapitre il est proposé un petit test concret pour voir si les étudiants ont bien compris les notions. Seul hic, des fois si on est bloqué, même en relisant le cours certains ne comprennent pas leur erreur, et sans correction disponible, passe à autre chose peut être sans avoir les notions précédentes et une fois bloqués plus tard seront définitivement bloqués voir décourager.

Je vous appelles donc à essayer des les faire et une fois que vous les avec tous fait(les coches ont été validées par Codey), de poster le code du .html et du .css ici pour que cela reste un petit répertoire pour ces élèves.

Voici la liste cliquable des 4 "Pratiquez" :

Merci !

Correction du premier " Pratiquez" disponible ici.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Ma passion pour les animaux</title>
  </head>

  <body>
    <h1>Les animaux</h1>
    
    <p>Voici mes 3 animaux préférés :</p>
    
    <ol>
      <li><strong>Le chien</strong></li>
      <li>Le chat</li>
      <li>Le panda</li>
    </ol>
  </body>
</html>

-
Edité par Nathanaël A. 24 octobre 2016 à 19:33:52

8 février 2017 à 12:17:10

Bonjour,

Je suis justement bloquee dans le 'pratiquez 2' :


 Concernant le premier point 
Ajoutez une balise pour lier le fichier CSS au fichier HTML

J ai pourtant ajoute : <link rel="stylesheet" href="style.css">
Voir ci dessous : 

Et il ne le valide pas...

Codey

Il n'y a pas de lien entre le fichier CSS et le fichier HTML !

 D autres part, l image cupcake ne s affiche pas..

Et pour finir,

je ne retrouve pas dans les cours la solution pour cette notion = Centrez la figure (image) et sa description

Donc je suis bloquee...

Merci de m aider!

Elodie

13 février 2017 à 21:47:16

1) Pour lier le fichier HTML avec celui de CSS il faut bel et bien écrire: 

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

Mais des fois il faut préciser à l'émulation la fin de la balise avec:

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

2) Pour centrer la figure(l'image) et sa description, c'est facile:

    +Sur CSS:

<div class="image">
 <figure>
  TON IMAGE ET SA DESCRIPTION..
 </figure>
</div>


    +Sur HTML:

.image{
     text-align: center;
}




 (Quand à moi, je suis bloqué au "Pratiquez" de la troisième semaine, donc si quelqu'un pourrait m'aider ça serait génial)

-
Edité par SakroXSakro 13 février 2017 à 21:48:57

14 février 2017 à 14:49:17

Voilà j'ai réussi à faire le 3ème "Pratiquez":

 -En HTML ça donne:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Le blog trotter</title>
    </head>

    <body>
      <div id="topsection">
        <header>
          <h1>Le blog trotter</h1>
          <p>Je parcours la planète... et vous la fais découvrir !</p>
        </header>
        <nav>
         <ul id="menu">
          <li><a href="#">Accueil</a></li>
          <li><a href="#">Archives</a></li>
          <li><a href="#">Contact</a></li>
         </ul>
        </nav> 
      </div>

      <h1>La Chine</h1>
      <p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

      <p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
      
      <h1>L'Espagne</h1>
      <p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

      <p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
        
      <footer>
        <p>Copyright Le Blog Trotter<br />
      </footer>
        
    </body>
</html>



 -En CSS ça donne:

#menu{
  list-style-type: none;
}

#topsection{
  display: flex;
}

p{
  text-align: justify;
  width: 80%;
  margin: 0px auto;
}

Voilà voilà :)

18 février 2017 à 18:32:37

Bonjour ;

j'ai un probleme pour faire le deuxieme "pratiquez" (utilisation de base du css), la page d'exercice s'affiche bien, sauf que la partie centrale reste avec la roue crantée qui tourne :(

Que faire ???

19 février 2017 à 16:20:14

Si tu ouvres l'exercice dans un nouvel onglet ça peut arriver, tente de l'ouvrir sur le même onglet de base, normalement, au pire, avec quelques "actualiser" ça peut marcher.
21 février 2017 à 17:25:04

Salut ;

visiblement, c'est juste dû à firefox, en ouvrant dans chrome ça fonctionne :(

8 juillet 2017 à 0:07:19

Bonsoir,

Je viens vous partager ma réussite pour la seconde épreuve de "Pratiquez: Utilisation de base du CSS", testé sous Mozilla Firefox et Google Chrome:

Le code HTML:

<!DOCTYPE html>
<html>
     <head>
         <meta charset="utf-8" />
         <link rel="stylesheet" type="text/css" href="style.css"/>
         <title>Les cupcakes</title>
     </head>

     <body>
         <h1>Vive les cupcakes</h1>
      
         <p>J'ai découvert les cupcakes lors d'un voyage à <a href="https://fr.wikipedia.org/wiki/New_York">New York</a>... et depuis c'est une véritable passion. Sur mon site, vous saurez <strong>tout</strong> sur les cupcakes !</p>
      
         <p>Un cupcake ? C'est ça :</p>

 
<!--Pour centrer l'image et sa légende, on met le tout dans un conteneur div de type block afin de lui appliquer le style "text-align:center", ce qui aura pour effet de centrer tout son contenu-->
         <div class="image">
             <figure>
                 <img src="cupcake.jpg" alt="Cupcake" />
                 <figcaption>Un cupcake</figcaption>
             </figure>
         </div>
         
         <p>Délicieux non ? Sur mon site, je vous présenterai :</p>
      
<!--De même que plus haut, il faut un conteneur div pour créer un cadre autour de la liste non ordonnée avant de le styliser-->
         <div class="liste">
             <ul>
                 <li>Les différentes variétés de cupcakes</li>
                 <li>Leur histoire</li>
                 <li>Leurs recettes</li>
             </ul>
         </div>
    
    </body>
</html>


Le CSS:

/* Feuille de styles CSS */

h1 {

/*Couleur du titre h1 en rouge*/
  color:red;

/*Taille de la police du titre à 2em*/
 font-size:2em; 
}
/*--------------------------------------------*/



/*div qui aura son contenu centré*/
.image {
  text-align:center;
}
/*--------------------------------------------*/


ul {

/*bordure continue, d'épaisseur 1px et de couleur noire*/
  border: 1px solid black;

/*Ombre de la liste non ordonnée, décalée horizontalement de 6px et verticalement de 6px, avec un "fondu" de 10px, de couleur grise*/
  box-shadow:6px 6px 10px grey;
}
/*--------------------------------------------*/



a {
/*Liens en gras (ET NON AU SURVOL EN GRAS)*/
  font-weight:bolder; 
}

Pour les liens en gras au survol, cette consigne n'est pas la bonne. Il faut juste mettre les liens en gras.

En espérant que cela serve à d'autres.

++

18 juillet 2017 à 15:14:04

Alors pour ma part, je n'arrive pas à passer la dernière étape, même avec ces aides... est-ce que je dois changer quelque chose dans le ficher HTML? J'ai carrément copié le texte au dessus, mais rien à faire je suis coincé...
18 juillet 2017 à 18:07:09

Alors soit tu dois respecter la consigne qui est: "Affichez les liens en gras lorsqu'on les survole" et dans ce cas, les consignes ont été corrigées, soit la consigne est toujours erronée et il faut juste mettre les liens en gras (pas au survol donc, mais dans leur état de base).
5 décembre 2017 à 19:58:08

SALUT TT LE MONDE je suis bloqué sur le partique 1 gnere j peux rien  ecrire sur la console interactive du site?????

Correction des "Pratiquez" du cours HTML 5/CSS 3

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown