Les bases du HTML
Section : Les bases du HTML | Éditeur HTML Bootstrap | RECITSED
-
Les bases du HTML
Présentation des bases du HTML par le formateur
Durée : 10 minutes -> 9 h 20
Avertissement, le contenu de cette section peut donner des « vertiges » !
Les explications vont vous aider à comprendre l'usage des panneaux de l'éditeur. Les bases du HTML vont vous permettre de comprendre que vous devez agir au niveau de la balise, de la classe Bootstrap ou du style pour obtenir le résultat désiré. L'éditeur fera le travail de codage à votre place. Analogie : Lorsque vous prenez un cours de conduite, il y a une portion qui porte sur la mécanique. Le but consiste par exemple à distinguer les différents liquides présents sous le capot. Il ne s'agit pas de faire la tâche du mécanicien.
Les bases du HTML
Les balises HTML
- Comprendre la fonction de la balise.
Liens pour en savoir plus
Par défaut, les balises engendrent l'affichage des éléments à la manière de blocs qui s'empilent. Nous retrouvons habituellement le <h3> titre </h3> suivi de plusieurs <p> paragraphes </p> et également des <img> images ou des <a> liens. Lorsque nous créons des contenus riches, d'autres balises <div> sont ajoutées au code afin de disposer les éléments de manière plus structurée. Ces divisions contiennent les classes Bootstrap. Les divisions étant imbriquées, nous observerons la relation parent-enfant.
À retenir
- Les balises de titre h1 à h6 déterminent la structure du document. Il est important de respecter la hiérarchie afin que les lecteurs puissent parcourir correctement le document (accessibilité)
- Pour augmenter la clarté, nous pouvons appliquer les classes h1 à h6 afin d'augmenter les tailles des polices sans pour autant modifier la structure du document
- Lorsque vous modifiez une balise dans le code source, si celle-ci est fermée, assurez-vous que la balise de fermeture correspond à la balise d'ouverture
Les styles HTML
- Modifier un style pour changer l'apparence
- Comprendre la relation parent-enfant à travers les balises
Liens pour en savoir plus
Les navigateurs internet tels que Chrome permettent de visualiser les styles à l'aide de l'inspecteur. Vous devez faire la sélection d'un élément (titre, paragraphe,...) et ensuite faire un clic droit à l'aide de la souris. Vous cliquez ensuite sur Inspecter pour faire afficher le panneau du code HTML et les propriétés associées.
À expérimenter
Si vous copiez le code ci-dessous en rouge, vous devez le coller à l'intérieur de la balise <body> </body> dans W3Schools.
Utilisez le lien W3Schools et tentez d'inclure le titre et le paragraphe à l'intérieur d'une <div> </div><div style="background-color:DodgerBlue;">
<h1>Hello World</h1>
<p style="color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
Les classes Bootstrap
- Définir les styles par des classes Bootstrap
Le framework Boostrap est constitué d'un ensemble de classes très élaborées qui ont été conçues pour interagir entre elles de manière structurée. Par exemple, des classes offrent des palettes de couleurs harmonisées. Nous retrouvons la classe "bg-primary" qui procure un arrière-plan bleu, une classe "text-primary" qui génère un texte du même bleu, un bouton "btn-primary",...
À expérimenter
Utilisez le lien W3Schools - Grid et tentez de prédire le rendu à l'écran en substituant la portion de code <div class="container-fluid"> </div> par le code ci-dessous.
<div class="container-fluid">
<h1>Test de la grille</h1>
<p>Question :</p>
<p>Comment la grille va-t-elle être rendue à l'écran ?</p>
<div class="row">
<div class="col-md-6 bg-primary">.col-md-6</div>
<div class="col-md-6 bg-danger">.col-md-6</div>
</div>
</div>
Fontawesome
- Ajouter des icônes Fontawesome
Les icônes Fontawesome disponibles sur le Web sont intégrées à Moodle. Moodle 4.1 utilise la version Fontawesome 4.7. L'éditeur Boostrap vous propose cette version héritée de Moodle. L'équipe du RÉCIT a également développé une série d'icônes disponible à l'intérieur du thème RÉCIT. Celles-ci sont également proposées lorsque le thème est sélectionné.
À expérimenter
Utilisez le lien W3Schools - Fontawesome 4 et tentez de prédire le rendu à l'écran en utilisant le code ci-dessous.
<h1>
<i class="fa fa-car"></i> Titre
</h1>
