Aperçu des sections

  • Généralités

    Tout replier Tout déplier

  • Support de présentation et replay

  • Ce qu'il est déjà possible très simplement


    • Très Simplement

      Les modèles

      Pour aller plus loin

      Aide-mémoire

    • Niveaux de titre, couleurs, bold, italic...

    • Ceci est un grand titre

      Ceci est un titre moyen

      Ceci est un petit titre

    • Ceci est un grand titre de couleur rouge

      Ceci est un titre moyen de couleur verte en gras et en italique

      ceci est un petit titre de couleur bleue


    • Les retraits

    • Titre de mon chapitre

    • Sous-titre de mon chapitre

    • 1er paragraphe

  • Avec les styles programmés

    • <div class="XXXXXXX">Ceci est mon activité</div>

    • Classes EncadreRouge; EncadreVert; EncadreBleu; EncadreGris; EncadreNoir

      Ceci est mon activité
      Ceci est mon activité
      Ceci est mon activité
      Ceci est mon activité
      Ceci est mon activité

    • Classes FondRouge; FondVert; FondBleu; FondGris; FondNoir

      Ceci est mon activité
      Ceci est mon activité
      Ceci est mon activité
      Ceci est mon activité
      Ceci est mon activité

    • Classe TexteCentre

      Ceci est mon activité
      Ceci est mon activité

    • Les Icônes

      <i class="fa fa-book" aria-hidden="true"></i>

      • fa-book
      • fa-plus-square-o
      • fa-asterisk
      • fa-bullhorn
      • fa-comment-o
      • fa-check-circle-o
      • fa-envelope
      • fa-gift
      • fa-group
      • fa-info
      • fa-lightbulb-o
      • fa-map-marker
      • fa-pencil
      • fa-star
      • fa-tags
      • fa-warning
      • fa-bookmark
      • fa-cogs
      • fa-laptop
      • fa-pencil
      • fa-youtube-play

      <div class="EncadreRouge"><i class="fa fa-book" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreVert"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreBleu"><i class="fa fa-asterisk" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreGris"><i class="fa fa-bullhorn" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreNoir"><i class="fa fa-comment-o" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="FondRouge"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="FondVert"><i class="fa fa-envelope" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="FondBleu"><i class="fa fa-gift" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="FondGris"><i class="fa fa-group" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="FondNoir"><i class="fa fa-info" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      Etc...

    • Mixer les classes et ajouter bold/italic

      Ceci est mon activité
      Ceci est mon activité

  • Accès au workshop

  • Avec quelques connaissances

    • Sous-titre 1 Section 1 de niveau 2

      <h2 style="background-color:#46b29d; color:#fff; text-align:center; padding:0.5rem">Sous-titre 1 Section 1 de niveau 2</h2>

      Sous-titre 1 Section 1 de niveau 3

      <h3 style="background-color:#46b29d; color:#fff; text-align:center; padding:0.5rem">Sous-titre 1 Section 1 de niveau 3</h3>

      Sous-titre 1 Section 1 de niveau 4

      <h4 style="background-color:#46b29d; color:#fff; text-align:center; padding:0.5rem">Sous-titre 1 Section 1 de niveau 4</h4>

    • Pour l'usage de ce code : 

      h2 h3 h4 -> niveau de titre (taille de police)
      background-color -> couleur de l'arrière-plan de l'étiquette
      color -> couleur du texte (blanc : #fff  - noir : #000)
      padding -> espace autour du texte

      Pour les couleurs le format est hexadécimal. Vous pouvez consulter ce site pour trouver la couleur qui vous convient : htmlcolorcodes.com/fr/

      Si vous voulez reprendre une couleur d'une page Internet : l'extension Colorzilla pour Chrome  https://www.colorzilla.com/chrome/ et pour firefox : https://addons.mozilla.org/fr/firefox/addon/colorzilla/ est très pratique.

  • Aide-mémoire

    • Ceci est mon activité

      <div class="EncadreRouge">Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreVert">Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreBleu">Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreGris">Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreNoir">Ceci est mon activité</div>

      Ceci est mon activité

      <div class="FondRouge">Ceci est mon activité</div>

      Ceci est mon activité

      <div class="FondVert">Ceci est mon activité</div>

      Ceci est mon activité

      <div class="FondBleu">Ceci est mon activité</div>

      Ceci est mon activité

      <div class="FondGris">Ceci est mon activité</div>

      Ceci est mon activité

      <div class="FondNoir">Ceci est mon activité</div>

      Les Icônes

      Je choisis mon style : EncadreRouge, EncadreVert, EncadreBleu, EncadreGris, EncadreNoir, FondRouge, FondVert, FondBleu, FondGris, FondNoir puis mon icône.

      Ici, pour l'exemple, EncadreRouge. Il suffit lors du copier-coller de remplacer "EncadreRouge" par le nom du style qui vous convient.

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-book" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-asterisk" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-bullhorn" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-comment-o" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-envelope" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-gift" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-group" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-info" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-map-marker" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-pencil" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-star" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-tags" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-warning" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-bookmark" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-cogs" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-laptop" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-pencil" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge"><i class="fa fa-youtube-play" aria-hidden="true"></i> Ceci est mon activité</div>

      Bonus: TexteCentre

      Je choisis mon style : EncadreRouge, EncadreVert, EncadreBleu, EncadreGris, EncadreNoir, FondRouge, FondVert, FondBleu, FondGris, FondNoir puis UN ESPACE et TexteCentre.

      Ici, pour l'exemple, EncadreRouge. Il suffit lors du copier-coller de remplacer "EncadreRouge" par le nom du style qui vous convient.

      Ceci est mon activité

      <div class="EncadreRouge TexteCentre"><i class="fa fa-youtube-play" aria-hidden="true"></i> Ceci est mon activité</div>

      Ceci est mon activité

      <div class="EncadreRouge TexteCentre">Ceci est mon activité</div>

  • Blocs de navigation

    • Très Simplement

      Les modèles

      Pour aller plus loin

      Aide-mémoire

    • <div class="container" id="scolarite">

        <div class="row">

              <div class="col-xs-12 col-md-6">

                  <div class="card">

                      <div class="titre">

                          <h2>Très Simplement</h2>

                      </div>


                      <div class="icone">

                          <a href="/moodle/upjv/course/view.php?id=8975#section-3" style="color:#46b29d;"><span class="fa fa-circle-o"></span></a>

                      </div>

                      <div class="bouton" style="background-color: #46b29d;">

                          <a href="/moodle/upjv/course/view.php?id=8975#section-3"><span class="fa fa-plus-circle"></span></a>

                      </div>

                  </div>

              </div>

              <div class="col-xs-12 col-md-6">

                  <div class="card">

                      <div class="titre">

                          <h2>Les modèles</h2>

                      </div>

                      <div class="icone">

                          <a href="/moodle/upjv/course/view.php?id=8975#section-4" style="color:#e37b40;"><span class="fa fa-cogs"></span></a>

                      </div>

                      <div class="bouton" style="background-color: #e37b40;">

                          <a href="/moodle/upjv/course/view.php?id=8975#section-4"><span class="fa fa-plus-circle"></span></a>

                      </div>

                  </div>

              </div>


              <div class="col-xs-12 col-md-6">

                  <div class="card">

                      <div class="titre">

                          <h2>Pour aller plus loin</h2>

                      </div>


                      <div class="icone">

                          <a href="/moodle/upjv/course/view.php?id=8975#section-5" style="color:#f53855;"><span class="fa fa-plus-square-o"></span></a>

                      </div>

                      <div class="bouton" style="background-color: #f53855;">

                          <a href="/moodle/upjv/course/view.php?id=8975#section-5"><span class="fa fa-plus-circle"></span></a>

                      </div>

                  </div>

              </div>

              <div class="col-xs-12 col-md-6">

                  <div class="card">

                      <div class="titre">

                          <h2>Aide-mémoire</h2>

                      </div>

                      <div class="icone">

                          <a href="/moodle/upjv/course/view.php?id=8975#section-6" style="color:#2e83a9;"><span class="fa fa-graduation-cap"></span></a>

                      </div>

                      <div class="bouton" style="background-color: #2e83a9;">

                          <a href="/moodle/upjv/course/view.php?id=8975#section-6"><span class="fa fa-plus-circle"></span></a>

                      </div>

                  </div>

              </div>

          </div>

      </div>

      Pour utiliser les blocs de navigation :

      1) Copier-coller ce code dans une étiquette située de préférence dans la première partie du cours c'est-à-dire là où il y a le forum "Annonces";

      2) Modifier les titres (en rouge);

      3) Modifier les liens (en vert) avec l'identifiant de votre cours (dans la barre d'adresse de votre navigateur : id=....) ainsi que le numéro de la section en comptant 1 à partir de votre première section avec l'en-tête bleu;

      4) Modifier les icônes  (en bleu): choisissez celles qui vous conviennent sur le site Font awesome et copier coller le nom de l'icône (fa-XXXX).