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.

  3. Supprimer le dossier téléchargé.


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++, ouvrir le fichier mini_site_mbot.html.

  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>

  5. 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 Leia

  1. Compresser votre dossiermini_site_mbot : Clic droit sur le dossier puis 7-Zip puisAjouter à l'archive etOK.

  2. Charger le dans Vos fichiers personnels de Leia

  3. aide

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.