Exercice 1/15

On commence facile :

  • Dans le fichier index.html à droite, mettez le titre en <h1> en Arial et en rouge.
  • Insérez une image au-dessous du titre
  • Ajoutez une seconde image et rendez-la cliquable avec un lien.

En cas de confusion, lisez l'astuce.

Leçon 1/15

Avant de poursuivre sur un nouveau chapitre, faisons un rappel des notions abordées :

  1. Elaborer la structure d'un document HTML.
  2. Utiliser des en-têtes, des paragraphes, des images et des liens.
  3. Gérer des couleurs, tailles et familles de police.
  4. Aligner du texte, mettre en gras et en italique des mots.

Dans ce cours, nous allons apprendre de nouvelles balises : <table>, <div> et <span> !

_

La balise <img> (image) doit être imbriquée dans une balise <a> (lien), comme ceci :

<a href="URL cible du lien">
    <img src="URL de la source de l'image"/>
</a>

_

Commentaires les mieux notés

  • takfa

    takfa

    mon code est correte je vois ou est la faute ,il m'indique Avez-vous bien ajouté la police Arial à la balise <h1> ?

    le 19/10/2019 à 21h43

  • meriam

    meriam Admin

    Bonjour, au niveau de titre h1, corrigez la propriété font-familly par font-family.

    le 21/10/2019 à 13h24

  • thomaskasini-17

    thomaskasini-17

    <!DOCTYPE html> <html> <head> <title>Les tableaux</title> </head> <body> <h1 style="font-family:Arial;color:red">La mise en page avec des tableaux est-elle une méthode convenable ? (sujet de l'épreuve de philo pour le bac option HTML)</h1> <a href="https://www.facebook.com/MediaIndependantDesGiletsGaunes/videos/2219394448081937/?t=6"> <img src="https://scontent-mrs1-1.xx.fbcdn.net/v/t1.0-9/47680984_10215772367973715_5769909969398792192_n.jpg?_nc_cat=105&_nc_ht=scontent-mrs1-1.xx&oh=16c8c824abc0cea057ebde8cc290670a&oe=5D048226"/> </a> </body> </html> bonjour je ne trouve pas le probleme svp

    le 03/04/2019 à 14h52

  • mounicou

    mounicou

    Faites plutot des exercices sur CodePen car votre correcteur de code bug a fond

    le 08/11/2018 à 18h21

  • mram

    mram Admin

    Vos codes sont corrects, la vérification de l'indentation bug, nous cherchons d'où ça vient...

    le 05/10/2016 à 21h43

  • syarova_tsonka

    syarova_tsonka

    Bonjour, Est-ce que vous pouvez m'indiquer qu'est-ce qui ne va pas dans mon code? J'ai suivi tous les conseils, rien ne marche. <!DOCTYPE html> <html> <head> <title>Les tableaux</title> </head> <body> <h1 style="font-family:Arial; color:red">Les tableaux, c'est vraiment cool</h1> <img src="http://www.edgar-degas.org/71647/Dancers-in-Pink.jpg"> <a href ="https://fr.wikipedia.org/wiki/Edgar_Degas"><img src="https://www.histoire-image.org/sites/default/asa07_degas_003f.jpg"> </a> </body> </html> ou <!DOCTYPE html> <html> <head> <title>Les tableaux</title> </head> <body> <h1 style="font-family:Arial; color:red">Les tableaux, c'est vraiment cool</h1> <img src="http://www.edgar-degas.org/71647/Dancers-in-Pink.jpg"> <a href ="https://fr.wikipedia.org/wiki/Edgar_Degas"><img src="https://www.histoire-image.org/sites/default/asa07_degas_003f.jpg"></a> </body> </html>

    le 25/06/2016 à 19h04

20 Commentaires

  • nazihachabir-26

    nazihachabir-26

    j'ai pu resoudre cet exercice; quelle est la difference entre le lien de la source et la reference de l image

    le 30/04/2020 à 13h49

  • meriam

    meriam Admin

    Bonjour, votre code n'est pas correct, on peut pas ajouter une image dans la partie head. Il faut attribuer un style pour le titre h1 et non pas pour la balise title. La référence d'un lien c'est l'adresse du site vers lequel le lien renvoi, la source de l'image permet d'indiquer l'emplaceement de l'image.

    le 30/04/2020 à 14h33

  • contact.info.pourtout-77

    contact.info.pourtout-77

    Je comprends pas ou est mon erreur

    le 06/04/2020 à 15h50

  • meriam

    meriam Admin

    Bonjour, vous devez ajouter une seconde image (relisez bien l'énoncé);

    le 06/04/2020 à 16h36

  • takfa

    takfa

    mon code est correte je vois ou est la faute ,il m'indique Avez-vous bien ajouté la police Arial à la balise <h1> ?

    le 19/10/2019 à 21h43

  • meriam

    meriam Admin

    Bonjour, au niveau de titre h1, corrigez la propriété font-familly par font-family.

    le 21/10/2019 à 13h24

index.html
<!DOCTYPE html> <html> <head> <title>Les tableaux</title> </head> <body> <h1>La mise en page avec des tableaux est-elle une méthode convenable ? (sujet de l'épreuve de philo pour le bac option HTML)</h1> </body> </html>