Mises en forme textuelles pour JetPunk : HTML

+9

Introduction

Que ce soit lors de la création d'un quiz, dans l'écriture d'un commentaire ou dans la conception d'un blog sur JetPunk, les textes peuvent être mis en forme à l'aide de balises HTML.

Dans ce blog, je commencerai par vous présenter très brièvement ce langage qu'est le HTML ainsi que la rège d'ouverture et fermeture des balises.

Ensuite, je vous proposerai une liste de balises simples, qui vous permettront de mettre en forme facilement vos commentaires et quiz.

Vous avez dit HTML ?

Le HTML, acronyme de HyperText Markup Language, est un langage de balisage pour les pages web. C'est un format ouvert inventé en 1993 qui a connu plusieurs versions depuis sa création. Aujourd'hui, nous en sommes à la cinquième révision : HTML5.

Ce langage permet (entre autre) :
  • de mettre en forme le contenu d'un document ;
  • de structurer le document ;
  • d’écrire de l'hypertexte (d’où le nom du langage) ;
  • d’inclure des ressources multimédias comme des images...

Le HTML peut être complété par d'autres langages comme le JavaScript ou encore le CSS (feuilles de style en cascade) que l'on retrouve notamment dans l'élaboration des SVG, très répandus sur JetPunk.

Comme tout langage informatique, le HTML obéit à une syntaxe stricte qui doit être impérativement respectée pour fonctionner.

Balises de mises en formes

Mise en formes classiques :

Pour mettre en forme du texte, il est nécessaire d'utiliser une balise d'ouverture et une balise de fermeture (avec son slash), afin d'encadrer le texte assujetti à la mise en forme voulue.
La syntaxe est la suivante :

<balise> texte </balise>

Voyons maintenant une sélection de balises simples, qui pourraient vous être utiles sur JetPunk.

BaliseDescriptionVisualisation
<b>Texte grasTest
<i>Texte italiqueTest
<u>Texte soulignéTest
<del>Texte barréTest
<sup>Texte en exposantTestTest
<sub>Texte en indiceTestTest
<font color="FF0000">Couleur du texteTest

Exemple pour mettre un texte en gras :
<b>Texte gras</b>
Résultat :
Texte gras

Faire défiler du texte :

La balise de défilement <marquee> peut être complétée à l'aide d'attributs qui permettent de gérer les propriétés du défilement souhaité : comportement, direction, vitesse, zone.
Voici des possibilités de défilement, en jouant sur les attributs :

BaliseDescriptionVisualisation
<marquee direction="left">Texte défilant vers la gaucheTest
<marquee direction="up">Texte défilant vers le hautTest
<marquee behavior="alternate">Texte défilant en va-et-vientTest
<marquee scrollamount="10">Texte défilant rapidementTest
<marquee width="40">Texte défilant sur une zone étroiteTest

Pour l'attribut "direction", les valeurs possibles sont :"left", "right", "up" ou "down".
Pour l'attribut "behavior", les valeurs possibles sont :"scroll", "alternate" ou "slide".
Pour l'attribut "scrollamount", les valeurs sont exprimées en pixels.
Pour les attributs "width" et "height", les valeurs de la zone de défilement sont données en pixels.

Encadrer du texte :

La balise <span>, permet d'ajouter un cadre à votre texte. Tout comme pour la balise de défilement, celle-ci peut personnalisée à l'aide d'attributs.
Il est ainsi possible de régler l'épaisseur des bordures du cadre, l'éloignement du texte et y ajouter un fond, respectivement à l'aide des attributs "border"; "padding" et "background".
Voici quelques possibilités de cadres, en jouant sur ces attributs :

BaliseVisualisation
<span style="border:3px black solid; padding:2px">Test
<span style="border:1px black solid; padding:2px; background:#00DFD6">Test


Les balises données ici peuvent être combinées afin de donner l'effet que vous souhaitez. Par exemple, un texte gras italique souligné barré encadré et surligné en jaune. Ouf, ça fait beaucoup !

Balises de structuration du document

Le HTML étant le langage de base des pages web, il sert à en structurer les contenus.

Les titres :

Il existe 6 niveaux de Titres, h1 à h6. h1 étant traditionnellement utilisé pour les titres de plus grande importance.
Pour définir un titre, les balises sont les suivantes : <h1>; <h2>, etc.

Les paragraphes:

Chaque paragraphe doit être défini par la balise <p>

Les sauts de lignes:

Ils sont définis par la balise orpheline (pas besoin de balise de fermeture) <br />

Ligne de séparation horizontale :

Pour créer un séparateur horizontale, il suffit d'utiliser la balise orpheline <hr />

Les listes :

Il exite plusieurs listes en HTML : les listes à puces (non ordonnées), les listes numérotées et les listes de définitions. En voici les balises correspondantes :

BaliseDescription
<ul>Définir une liste à puce
<ol>Définir une liste numérotée
<li>Element de la liste
<dl>Définir une liste de définitions
<dt>Terme à définir
<dd>Définition du terme


Exemple de liste à puce :
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Qui donne :
  • Item 1
  • Item 2
  • Item 3

Insertion de liens hypertextes et de contenus multimédia

Le H de HTML signifiant Hypertexte, il n'est pas possible de passer à côté des balises permettant la navigation hypertextuelle.

Les liens hypertextes :

Pour créer un lien vers une autre page ou une image, c'est la balise <a> qu'il faut utiliser.
Celle-ci obéit à la syntaxe suivante :
<a href="https://www.jetpunk.com/">Lien</a>
Cela permet de générer le Lien suivant, pointant vers l'url "www.jetpunk.com" avec comme texte "Lien".

Une variante est d'ajouter la destination "blank" (page vierge en français) pour indiquer au lien que son ouverture se fera dans une nouvelle page.
Syntaxe :
<a target="_blank" href="https://www.jetpunk.com/">Lien vers une nouvelle page</a>
On obtient : Lien vers une nouvelle page

Insertion d'image :

Voyons maintenant comment insérer une image dans un document. Rien de plus simple grâce à la balise suivante :

<img style="border:3px solid black;" src="https://www.jetpunk.com/img/user-photo-library/52/5226d7bc0b-450.jpg" height="100" width="100"/>

Regardons de plus près ce que contient cette ligne : elle permet d'afficher une image grâce à son url. Un attribut de style permet de définir une bordure de 3 pixels et de couleur noire autour de cette image. Enfin, les hauteurs et largeurs de l'image sont fixées à 100px.

Résultat :

Le mot de la fin

Voici donc quelques rudiments en HTML qui, je l'espère, vous seront utiles pour mettre en forme vos textes et documents.
N'hésitez pas à poster des commentaires ci-dessous pour vous amuser à faire des "tests" des différentes balises présentées dans ce blog.

Par ailleurs, les balises proposées ci-dessus ne sont qu'une petite partie de ce que le langage HTML a à offrir. Qui sait, un jour aurez-vous l'envie d'en découvrir plus pour concevoir vos propres pages web ?
+2
Niveau 3
5 jan 2022
Très bien! Excellent travail avec le formatage HTML du blog en soi (Am I right? Lol)
+1
Niveau 59
6 jan 2022
Ahah vous avez donc remarqué ?

Effectivement, tout ce blog est lui-même formaté en HTML, ce qui donne un peu plus de liberté.

+2
Niveau 22
6 jan 2022
+1
Niveau 59
20 jan 2022
Super ! Vous vous débrouillez bien !
+1
Niveau 22
28 jan 2022
Merci !