Mises en forme textuelles pour JetPunk : 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.

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.

Balise	Description	Visualisation
<b>	Texte gras	Test
<i>	Texte italique	Test
<u>	Texte souligné	Test
<del>	Texte barré	Test
<sup>	Texte en exposant	TestTest
<sub>	Texte en indice	TestTest
<font color="FF0000">	Couleur du texte	Test

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 :

Balise	Description	Visualisation
<marquee direction="left">	Texte défilant vers la gauche	Test
<marquee direction="up">	Texte défilant vers le haut	Test
<marquee behavior="alternate">	Texte défilant en va-et-vient	Test
<marquee scrollamount="10">	Texte défilant rapidement	Test
<marquee width="40">	Texte défilant sur une zone étroite	Test

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 :

Balise	Visualisation
<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 !

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 :

Balise	Description
<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

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 :

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 ?