Exercice 1/26

  • Dans le fichier index.html, retirez les balises de commentaires ‹!-- et --› autour de la balise ‹link› à la ligne 4 puis regardez ce que vous serez bientôt capable de faire en CSS !
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 1/26

Regardez le fichier index.html. Plutôt standard, non ? Vous connaissez tout ça : titres, paragraphes, images, listes et tableaux.

Regardez le fichier stylesheet.css. Il contient toutes les informations de style CSS pour mettre en page les éléments HTML (leur position, leur couleur, leur taille, etc.).

Nous avons commenté une ligne cruciale (ligne 4) dans l'onglet index.html. Si vous enlevez les balises ‹!-- et --› au début et à la fin de cette ligne, vous verrez alors la magie du CSS opérer. Attention ! Ne supprimez surtout pas la balise ‹link›.

Commentaires les mieux notés

  • mram Administrateur

    En effet, parce que là votre code est juste donc ça doit passer.

  • jeanbaptiste.bapst

    je viens de m apercevoir que le problème était causé par mon navigateur... sorry !

  • raphael.choisi

    Bjr, croix rouge à la ligne 25: ne manquerait-il pas la ligne <thead></thead> ?

  • mram Administrateur

    @dexter.1400 : oui en effet, le code HTML de base devrait apparaître. Peut-être un bug.

26 Commentaires

  • mram

    mram Administrateur

    En effet, parce que là votre code est juste donc ça doit passer.

    le 09/12/2016 à 22h53

  • jeanbaptiste.bapst

    jeanbaptiste.bapst

    je viens de m apercevoir que le problème était causé par mon navigateur... sorry !

    le 08/12/2016 à 14h59

  • raphael.choisi

    raphael.choisi

    Bjr, croix rouge à la ligne 25: ne manquerait-il pas la ligne <thead></thead> ?

    le 28/11/2016 à 11h53

  • mram

    mram Administrateur

    @dexter.1400 : oui en effet, le code HTML de base devrait apparaître. Peut-être un bug.

    le 21/05/2017 à 22h47

  • mram

    mram Administrateur

    Même avec <thead> il y a toujours le message, il faut au moins une ligne <tr> par contre en effet. Merci.

    le 28/11/2016 à 16h17

  • mram

    mram Administrateur

    Bonjour, voilà : <!--<link type="text/css" rel="stylesheet" href="stylesheet.css" />--> Sinon, dans ce type de situation il suffit de se déconnecter et d'aller sur l'exercice en tant qu'invité pour récupérer le code par défaut.

    le 26/06/2016 à 13h14

  • patricerameaux

    patricerameaux

    bon : les balises de commentaire n'y étaient pas, il n'y avais donc pas lieu d'être de les retirer je ne comprends pas vraiment le sens de ces exercices où vous nous demandez des actions insignifiantes alors que vous augmentez la complexité du code saisi de façon considérablesans donner d'explications : c'est une bien curieuse pédagogie !

    le 22/09/2016 à 10h56

  • syarova_tsonka

    syarova_tsonka

    Bonjour, Est-ce que vous pourriez me renvoyer la balise link que je viens de supprimer et je ne peux pas faire marche arrière? Merci

    le 26/06/2016 à 12h52

  • mram

    mram Administrateur

    Si vous faites l'exercice pour la première fois, le code HTML par défaut contient bien les balises de commentaires et l'exercice prend tout son sens...

    le 22/09/2016 à 23h33

  • mram

    mram Administrateur

    A quelles actions insignifiantes faites-vous allusion ??

    le 22/09/2016 à 23h35

  • mram

    mram Administrateur

    Dans cet exercice, on ne vous demande pas de comprendre la signification du code HTML ou CSS qui est en place. Juste de comprendre le sens de la balise <link> qui fait le lien entre les 2 fichiers et qui active le code CSS qui permet de styliser le HTML.

    le 22/09/2016 à 23h37

  • jeanbaptiste.bapst

    jeanbaptiste.bapst

    Bonjour, je ne vois rien dans la fenêtre "Résultats" ! pouvez vous corriger le problème svp ?

    le 07/12/2016 à 11h59

  • jeanbaptiste.bapst

    jeanbaptiste.bapst

    après tabulation sur la ligne 4, je n'ai toujours rien qui s'affiche.

    le 08/12/2016 à 14h34

  • mram

    mram Administrateur

    De mon côté ça fonctionne, ajoutez une tabulation à la ligne 4 pour bien indenter votre code.

    le 08/12/2016 à 12h52

  • ezzeddineh

    ezzeddineh

    Bonjour a l'équipe 3WA je suis sur vos cours depuis 3 jours !! JE M'AMUSE c'est tout simplement GÉNIAL merci merci merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii.

    le 21/11/2016 à 12h18

  • mram

    mram Administrateur

    Bonjour, merci et bon courage pour la suite des exercices...

    le 21/11/2016 à 13h28

  • Carine1972

    Carine1972

    Bonjour. J'adore cette pédagogie ! Non seulement elle me correspond bien mais en plus elle est drôle. Bravo à vous ! Je me pose une question : quand la balise link est en commentaire et donc que le css n'est pas activé, pourquoi ne voit-on tout de même pas les éléments dans la fenêtre de navigation ? Dans ma logique, ils devraient apparaitre, en pas aussi joli, mais apparaitre tout de même non ?

    le 18/05/2017 à 17h29

  • mabellil

    mabellil

    je ne vois pas de résultats dans ma console ,j'avance à l'aveugle

    le 05/10/2016 à 17h48

  • Marodheure

    Marodheure

    Site sympa, bon courage à tous.

    le 19/05/2017 à 15h16

  • mram

    mram Administrateur

    En effet, je fais remonter l'information.

    le 05/10/2016 à 21h23

  • olivier-agueda-60

    olivier-agueda-60

    Si faut trouver l'intrus, j'ai trouvé c'est l'ewok ! MDR.

    le 16/07/2018 à 22h42

  • lquentin008

    lquentin008

    j'aime ce site parce que cela me permet de parfaire mes connaissances,j'aimerai tout connaitre sur html5,css3,javascript,jquery,mysql et php

    le 16/06/2017 à 16h22

  • VUTHY

    VUTHY

    Grand merci a celui qui a creer ce site gratuit, quand tu pense de codeacademie est a partir de 30euros

    le 19/07/2019 à 16h36

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <!--<link type="text/css" rel="stylesheet" href="stylesheet.css">--> <title>Le voir, c'est le croire</title> </head> <body> <div id="header"> <div id="navbar"> <ul> <li>Accueil</li> <li>A propos de moi</li> <li>Mon plan pour dominer le monde</li> <li>Contact</li> </ul> </div> <h2>A propos de moi</h2> </div> <div id="left"> <img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-main_zps26d178c5.jpg"/> <p>Je suis le petit chien le plus méchant du monde. C'est un fait, prouvé scientifiquement.</p> </div> <div id="right"> <table> <tr> <th colspan="3">Mes potes</th> </tr> <tr> <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-1_zps5666b8e7.jpg"/></td> <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-2_zps1539e6b2.jpg"/></td> <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-3_zps4692eafa.png"/></td> </tr> <tr> <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-4_zps63ff5aa8.jpg"/></td> <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-5_zps0ee0d2c8.jpg"/></td> <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-6_zpsc4450a60.jpg"/></td> </tr> <tr> <td><img id="bottom_left" src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-7_zps26e8a8d9.jpg"/></td> <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-8_zps9a1469be.jpg"></td> <td><img id="bottom_right" src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-9_zps3bab7732.jpg"/></td> </tr> </table> </div> <div id="footer"> <div id="button"> <p>Envoyez-moi un <span class="bold">e-mail</span>!</p> </div> </div> </body> </html>
body { background-color: #b7d1c4 } h2 { font-family: Verdana; font-weight: bold; text-align: center; padding-top: 25px; padding-bottom: 25px; color: #acd1b2; } img { height: 170px; width: 170px; box-shadow: rgba(0,0,0,0.2) 10px 10px; } #navbar { position: fixed; top:10px; left:50%; margin-left:-254px; } #header { position: relative; top: -10px; background-color: #3c4543; border-top-left-radius: 15px; border-top-right-radius: 15px; } ul{ list-style-type: none; position: fixed; margin: -10px; } li { display: inline; border: 2px solid #000000; font-family: Futura, Tahoma, sans-serif; color: #ffffff; padding: 5px; border-radius: 5px 5px; background-color: #cc0323 } #left{ width: 45%; float: left; } p { font-family: Tahoma; font-size: 1em; } #right{ width: 45%; float: right; } table { border: #000000 1px solid; background-color: #acd1b2; float: right; margin-right: 10px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } td { height: 75px; width: 75px; } td img { height: 75px; width: 75px; box-shadow: none; } th { font-family: Verdana; font-size: 1em; font-weight: normal; color: #3c4543 } #bottom_left{ border-bottom-left-radius: 15px; } #bottom_right{ border-bottom-right-radius: 15px; } #footer{ clear: both; position: relative; bottom: -20px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; height: 75px; background-color: #3c4543; } #button{ border: 2px solid #000000; float:left; position: relative; left: 229px; bottom: -20px; border-radius: 5px; background-color: #cc0323; height: 30px; width: 150px; } #button p{ position: relative; bottom: 10px; font-size: 0.8em; color: #acd1b2; text-align: center; } .bold{ font-family: tahoma; font-weight: bold; font-size: 1.2em; font-variant: small-caps; color: #ffffff; }