Mini site mbot

Télécharger le dossier de travail

  1. Enregistrer sous le dossier ----> mini_site_mbot dans votre espaceprivé.

  2. Décompressez ce dossier (double clic sur le dossier puis extraire) dans votre espaceprivé.

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


Création de la page d'accueil

  1. Lancer le logicielNotepad++. Double clic sur l'iconeNotepad++ 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)