En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour assurer le bon fonctionnement de nos services.
En savoir plus

Site WEB présentation robots

Par VALERIE MORDASINI-CARIVEN, publié le jeudi 25 janvier 2018 14:54 - Mis à jour le jeudi 11 avril 2019 06:16

Présentation des activités réalisées avec les robots

 

1ère partie séance. Créer la page d'accueil de votre site :

1. Se connecter à l'espace sur le serveur :
 
Rappel : dans gestionnaire de fichiers, se connecter à un lecteur réseau :
davs://pbellevue.libreedu.ovh/devpub/mpsicn
2. Repérer le dossier robots et à l'intérieur le sous-dossier qui correspond au votre.
3. Y créer un dossier images et un dossier css
4. Repérer le dossier Bootstrap qui contient toutes les données nécessaires à la création du site
5. Ouvrir Bluefish puis la page index.html dan sle dossier bootstrap.
6. L'enregistrer sans changer le nom dans votre dossier robotX
7. Pour ouvrir la page dans le navigateur, dans la barre d'URL : taper
https://pbellevue.libreedu.ovh/mpsicn/robots/robotX
8.  Les feuilles de style ne fonctionnent pas, c'est normal, elles sont mal adressées, le corriger.

 

 

2ème partie. Préparer la page d’accueil

Modifier la page d'accueil pour présenter le projet robots

 

 

Si vous voulez personnaliser lle style de votre site:

Dans bluefish, nouveau, fichier/enregistrez sous …dans le dossier css, nommez le notrestyle.css

Pour tester que cela fonctionne taper (ou copier/coller) le code ci-dessous dans notrestyle.css et l’enregistrer

body {

   background : #0000FF ;

}

Dans le fichier index.html, rajouter à la fin de la partie <head> le lien vers votre feuille de style.

Enregistrer et vérifier le résultat dans le navigateur.

 

Par la suite :

Pour les images :

Au plus simple :

<img  src="chemin  vers l'image .extension fichier" alt="texte alternatif si l'image ne s'affiche pas">

C'est mieux de travailler la taille de l'image avant avec un logiciel de traitement d'images comme Gimp sinon rajouter dans la balise height="valeur en pixels" width ="valeurs en pixels"

Plus complet, la balise <figure> qui permet de créer une boîte pour l'image et ce qui va avec comme une légende :

<figure>

<img src="image.jpg" alt="" >

<figcaption>Légende associée</figcaption>

</figure>

Pour insérer une vidéo, sur le même principe :

<video controls src="video.ogv">  Ici la description alternative </video>

Vous pouvez spécifier aussi la taille de la vidéo

Proposer les codes en téléchargement :

Essayez :

 <a href="https://pbellevevue.libreedu.ovh/dev/mpsicn/à compléter selon le lieu où se trouve le programme + nom programme + extension"
   download="programme">  Télécharger le fichier</a>

Catégories
  • robots