Mini site mbot

Création de la page d'accueil

  1. Copier le dossier mini_site_mbot qui est dans Poste de travail/Ma classe/Documents en consultation.
    et coller le dans : Poste de travail/Espace personnel/Documents.

  2. Lancer le logiciel Bloc-notes : Démarrer ----> Tous les programmes ----> Accessoires----> Blocnote.

  3. A partir du logiciel Bloc-notes ouvert, ouvrir le fichier mini_site_mbot.html.
    ATTENTION dans Fichiers de type sélectionner Tous les fichiers

  4. 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>

    Enregistrez sous : mini_site_mbot.html. ATTENTION : Ne pas oublier l'extension : .html

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

Création des pages annexes

  1. A partir du logiciel Bloc-notes ouvert, ouvrir le fichier robot_suiveur.html
  2. ATTENTION dans Fichiers de type sélectionner Tous les fichiers

  3. Insérer une image :

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 Bloc-notes ouvert, ouvrir le fichier mini_site_mbot.html.
  2. ATTENTION dans Fichiers de type sélectionner Tous les fichiers

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

  4. Faire la mème chose pour :
  5. Enregistrer vos 3 pages. ATTENTION à ne pas oublier l'extension : .html

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

Création des liens hypertextes amenant sur les vidéos.

  1. A partir du logiciel Bloc-notes ouvert, ouvrir le fichier robot_suiveur.html.
  2. ATTENTION dans Fichiers de type sélectionner Tous les fichiers

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

  4. Faire la mème chose pour :
  5. Enregistrer vos 3 pages. ATTENTION à ne pas oublier l'extension : .html

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 Bloc-notes, ouvrir le fichier stylecss.css.

  2. A partir de la page ressources, copier coller, sur la page stylecss.css, les codes CSS pour avoir :
  3. Enregistrer votre page. ATTENTION à ne pas oublier l'extension : .css
  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)