Format : comodal
Durée : une demi-journée
Cette formation en présence de type « mains sur les touches » vise à initier les utilisateur à l'éditeur HTML Bootstrap . Dans le cadre de la formation, nous aborderons dans un premier temps les particularités language HTML ainsi que les considérations liées à la création et à la mise en page de documents. Dans un deuxième temps, nous examinerons l'interface de l'éditeur, soit les panneaux latéraux ainsi que les différents modes d'affichage. Ensuite, une première activité « mains sur les touches » proposera aux participants la modification du contenu d'un gabarit choisi par le participant (titre, paragraphe, image, url vidéo,...). Nous distinguerons les 3 aspects généraux de la programmation HTML affectant les contenus soit : la balise, la classe et le style. Nous analyserons en groupe un gabarit existant afin d'en comprendre la structure. Nous abordreons la création de la grille qui permet de déterminer la disposition des éléments de la page. Une deuxième activité « mains sur les touches » proposera aux participants la création d'un « layout » à partir d'une esquisse déterminée en groupe. Lors de la création, les particpants devront convenir :
- du niveau du titre (distinguer balise et classe et les requis pour l'accessibilité)
- de l'alignement horizontal ou de la couleur de texte hérité de l'élément parent
- de la couleur d'un arrière plan (classe ou style)
- des marges de la page
- de l'image d'arrière plan (classe vs style) et source de l'image (picsum, pixabay ou fichier local)
- du nombres de colonnes
- des espacements entre les éléments (titres, paragraphes, images,...)
- des ombres et bordures pour agrémenter l'apparence (taille et couleur)
- des liens de navigation (liens et boutons)
Lors de la création par les participants, plusieurs défis se présenteront :
- autolink (des liens qui pointent vers une section ou une activité)
- le positionnement et la taille des images
- L'alignement vertical des éléments
- la taille des colonnes et le comportement sur les appareils mobiles
- l'intégration d'éléments provenant du web (Iframe)
Si le temps le permet, nous aborderons les particularités et les composants avancés :
- intégration H5P
- intégration d'une balise «cahier de traces »
- intégration d'un tableau
- intégration d'onglets
