Mini site mbot

Télécharger le dossier de travail

  1. Télécharger le dossier : mini_site_mbot.

  2. Décompressez ce dossier : double clic sur le dossier puis extraire puis cliquez sur OK.

  3. Déplacer le dossier décompressé dans votre espace privé.


Création de la page d'accueil

  1. Lancer le logicielNotepad++ : Double clic sur l'iconeNotepad++ dans le dossier Tous les logiciels, sur le bureau de Windows.

  2. A partir du logiciel Notepad++ ouvert, ouvrir le fichier mini_site_mbot.html qui est dans votre espace privé dans le dossier mini_site_mbot.

  3. Ecrire entre les 2 balises <body> et </body> comme ci dessous : (vous pouvez copier/coller!)

    <body>

    <h1>Mini site robot</h1>
    <h3>Robot suiveur</h3>
    <h3>Labyrhinte</h3>
    <h3>Match de foot</h3>

     </body>

  4. Enregistrez vous

Visualiser votre page dans le navigateur en double-cliquant sur votre fichier mini_site_mbot.html

Insérer une image

  1. A partir du logiciel Notepad++, ouvrir le fichier robot_suiveur.html.

  2. Code source à copier-coller : <img src="images/robot_suiveur.png"> entre les 2 balises <body> et </body>

  3. Faire la mème chose pour les pages :

    labyrhinte.html avec le code <img src="images/labyrhinte.png">

    match_de_foot.html avec le code <img src="images/match_de_foot.png">

  4. Enregistrer vos pages.

Visualiser vos pages dans le navigateur. (Actualiser votre écran en appuyant sur la touche F5 du clavier)

Création des liens hypertextes

  1. A partir du logiciel Notepad++, ouvrir le fichier mini_site_mbot.html.

  2. Remplacer <h3>Robot suiveur</h3> par <a href="robot_suiveur.html">Robot suiveur</a>

  3. Faire la mème chose pour :

    <h3>Labyrhinte</h3> avec <a href="labyrhinte.html">Labyrhinte</a>

    4. <h3>Match de foot</h3> avec <a href="match_de_foot.html">Match de foot</a>

  4. Enregistrer vos 3 pages.

Visualiser vos pages dans le navigateur. (Actualiser votre écran en appuyant sur la touche F5 du clavier)

Création des liens hypertextes amenant aux vidéos.

  1. A partir du logiciel Notepad++, ouvrir le fichier robot_suiveur.html.

  2. Code source à copier-coller : <a href="images/robot_suiveur.mp4">Vidéo robot suiveur</a> entre les 2 balises <body> et </body>

  3. Faire la mème chose pour :

    labyrhinte.html avec <a href="images/labyrhinte.mp4">Vidéo labyrhinte</a>

    match_de_foot.html avec <a href="images/match_de_foot.mp4">Vidéo match de foot</a>

  4. Enregistrer vos 3 pages.

Visualiser vos pages dans le navigateur. (Actualiser votre écran en appuyant sur la touche F5 du clavier)

Création du style CSS

  1. A partir du logiciel Notepad++, ouvrir le fichier stylecss.css.

  2. A partir de la page ressources, copier coller, sur la page stylecss.css, les codes CSS pour avoir h1 en rouge et centré

  3. Enregistrer votre page.

  4. Arrangez le style de vos pages à votre goût sur le fichier stylecss.css avec : ressources.

Visualiser vos pages dans le navigateur. (Actualiser votre écran en appuyant sur la touche F5 du clavier)

Sauvegarder votre travail dans votre espace privé sur le réseau du collège

Travail en plus :

  • Télécharger le dossier : site_ponts.

  • Faire une page d'accueil avec les noms des 4 types de ponts.

  • Faire des liens hypertexte sur les 4 noms des types de ponts amenant à des pages avec la photo du pont.