Donner de la beauté à votre texte avec Markdown et HTML

anon83885791 · mai 15, 2018, 1:21pm

Bonsoir

Profiter des nouvelles façon de rédiger un texte pour changer vos gros pavé en chose jolie,

Markdown (mon préféré)

j’utilise beaucoup markdown car je suis un utilisateur de github , dé que j’ai un projet à faire à plusieurs j’ai un .git qui se crée dans mon arborescence

Un éditeur pour faire du Markdown en ligne
https://stackedit.io/
dans mes début je l’utilisait, il offre une interface d’édition, une cheatsheet (une page d’aide) et une page de preview (aperçu).

En gras
**En gras** ou __En gras__

en italique
_en italique_ ou *en italique*

du code
`du code `

un titre

un titre <prochaine ligne> ====

un sous titre

un sous titre <prochaine ligne> ----

ceci est une puce

- ceci est une puce

ceci est une citation ou un bloc Note

> ceci est une citation ou un bloc Note
prenez soin de passer une ligne avant de reprendre votre texte.

--------

Un magnifique	Tableau
coucou	hallo
Hello	annyeong
une autre ligne	une ligne

Un magnifique | Tableau
-------- | ---
coucou| hallo
Hello | annyeong
une autre ligne | une ligne

un chapitre

# un chapitre

un plus petit chapitre

## un plus petit chapitre

plus petit

### plus petit

encore plus petit

#### encore plus petit

toujours plus petit

##### toujours plus petit

on peut utiliser les éléments en cascade

un item en gars dans une quote

> - un item en **gars** dans une quote

On peut crée des listes en cascades, tout se joue sur le nombre d’espace entre la marge et le tirait (-):

Un item
- un autre item
  - encore un autre item
- présentons un autre item
  - et en voilà un autre
  - et un autre autre

Il existe bien plus de balise Markdown mais je ne met que ceux que vous serez probablement amené à utiliser, inutile de vous montrer comment on écrit des formules mathématique avec des intégral sur un forum de jeu vidéo Ou encore pour faire des graph UML. etc…

La partie HTML maintenant

Pour moi je l’html ne sera utilisé que si je ne peux pas le faire en markdown car entre nous vous allez le voir, écrire en markdown est bien plus rapide qu’en HTML.
Mais avec html on peut se donner quelques balises de positionnement plutôt intéressantes.

Quelques conventions d’écriture en HTML:

HTML est un lagunage de balisage une balise est crée en placer une mot clef entre chevrons,

ceci est un chevron ouvrant <
ceci est un chevron fermant >
voici une balise normalement constitué <p>

voilà pour ouvrir une balise, pour la fermer il faut juste la ré-écrire en ajoutant un / avant le mot clef comme ceci </p>.

Un texte sera transformé selon le mot clef qui l’entour, exemple pour rendre une partit d’un texte en italique je fais comme suit:
Voici ma petite phrase <em>avec de l’écriture </em> italique.

Les balises ouvert les plus profonde dans un texte doivent être fermé en premier, exemple:

Bonne pratique
<p><strong>Bonne pratique</strong></p> la balise la plus profonde et strong donc elle est fermé avant p

~~mauvaise pratique~~
<p><strong>Bonne pratique</p></strong>

Laissez votre curseur sur cette phrase et vous devrez voir quelque chose apparaître:
ici votre sourie!
<abbr title="Je suis un abréviation"> ici votre sourie!</abbr>

Pour augmenter la visibilité d’un mot dans un texte:
je suis plus grand que vous
je suis <big>plus grand</big> que vous

Pour baisser la visibilité d’un mot dans un texte:
je suis plus petit que vous
je suis <small>plus petit</small> que vous

Pour barrer un texte
Je suis un ~~texte barré~~ !
Je suis un <strike>texte barré</strike> !

Énumérons les différents mot clef:

Textes en Gras avec la balise strong
En gras
<strong>En gras</strong>

Textes en italique avec les balises i ou em
en italique
<i>en italique</i> ou <em>en italique</em>

Vous pouvez déclarer une liste à puces avec la balise <ul> ou
une liste numéroté avec la balise <ol>.
Chaque lignes de votre liste devra être placé entre cette balise <li>, exemple:

<ul>

<li>ceci est une liste à puce </li>
<li> avec des points </li>

</ul>

<ol>

<li>ceci est une liste à puce </li>
<li> avec des points </li>

</ol>

ces listes peuvent être inclut dans d’autres:

<ul>

<li> un niveau de liste</li>
<li> <ol>
1. <li> un autre niveau de liste </li>
</ol>

</ul>

Pour faire des traits de séparation , ces longes barres que vous voyez entre deux mots clef:

<hr>

Une liste de termes définition utiles pour énumérer des type clef valeur:

Pour déclarer une liste de termes définition on utilise la balise <dl>
Pour indiquer que l’on définit un terme on utilise la balise <dt>
Et enfin pour indiquer çà définition <dd>, exemple:

<dl>

<dt> Ceci est un Terme </dt>: <dd> Ceci est une définition</dd>
<dt> Ceci est un autre Terme </dt>: <dd> ceci est une autre définition </dd>

</dl>

On peut même écrire des tableau tout beau

La balise <table> est obligatoire, elle indique qu’on crée un tableau.
La balise <tr> indique un début de ligne.
La balise <th> marque un nom de colonne ou ligne (selon çà position).
La balise <td> marque un item.

Table Header	Table item
Table Header	Table item
Table Header	Table item	coucou

<table>
<tr><th>Table Header</th><td>Table item</td></tr>
<tr><th>Table Header</th><td>Table item</td></tr>
<tr><th>Table Header</th><td>Table item</td><td> coucou </td></tr>
</table>

Voici un tableau complet (en accord avec les conventions du HTML):

Voiçi quelque rangs

Nom des rang	Côte minimal	Côte maximal
Bronze	0	1499
Argent	1500	1999
Gold	2000	2499
Nom des rang	Côte minimal	Côte maximal

<table>
<caption>Voiçi quelque rangs</caption>
<thead>
    <tr><th>Nom des rang</th>
    <th>Côte minimal</th>
    <th>Côte maximal</th>    </tr>
</thead>
<tbody>
    <tr><td>Bronze</td><td>0</td><td>1499</td></tr>
    <tr><td>Argent</td><td>1500</td><td>1999</td></tr>
    <tr><td>Gold</td><td>2000</td><td>2499</td></tr>
</tbody>
<tfoot>
     <tr><th>Nom des rang</th><th>Côte minimal</th><th>Côte     maximal</th></tr>
</tfoot>
</table>

Mais c’est trop long de faire comme ceci.

Les balises images fonctionne mais je ne peux pas en faire,

La balise <img> indique d’une image , ATTENTION inutil de placer </img> sur celle ci.

<img src="ICI LE LIEN DE VOTRE IMAGE" alt="UN TITRE">

un titre

<h1>un titre</h1>

un plus petit titre

<h2>un plus petit titre</h2>

encore plus petit titre

<h3>encore plus petit titre</h3>

toujours plus petit

<h4>toujours plus petit</h4>

un très petit titre

<h5>un très petit titre</h5>

merci iNoOxTV pour ces balises

Mettre des trucs comme ça
<ins>Mettre des trucs comme ça</ins>

~~Ou comme ça…~~
<del>Ou comme ça…</del>

On peut être très créatif, c’est cool !
<kbd>On peut être très créatif, c’est cool !</kbd>

On peut _{écrire de pleins de façons} ^{différentes maintenant.}
On peut <sub>écrire de pleins de façons</sub> <sup>différentes maintenant.</sup>

Normalement j’ai donné ce que vous allez probablement utiliser, il en existe plein d’autre mais il n’y a aucune utilité de les utiliser sur un forum de jeu vidéo.

Edit:

Pour les liens vers d’autre site, si vous ne pouvez pas écrire http tout collé
passé par les balises de code
https://masteroverwatch.com/
`https://masteroverwatch.com/`

Riful-21437 · mai 15, 2018, 1:48pm

On peut aussi faire des listes en cascade.

Titre
- Sous-titre
  - Sous-sous-titre
    - …

Pour ça, vous faites juste ça :
- Titre
__- Sous-titre
____- Sous-sous-titre
______- …

Evidemment, les “_” sont des espaces.

sorG-21317 · mai 15, 2018, 2:40pm

On peut _{écrire de pleins de façons} ^{différentes maintenant.}
Mettre des trucs comme ça
~~Ou comme ça…~~
On peut être très créatif, c’est cool !

Merci Blizzard.

(Je viens de remarquer qu’en augmentant notre réputation, on pourra mettre des liens directs avec la balise < a href=“XX”>lien</ a> et même des images avec < img src=“XX”/> mais bon, là je peux pas )

dArtagnan-21296 · mai 15, 2018, 4:04pm

C’est pas mal comme fonctionnalités.
Après, soyons honnêtes, on ne s’en servira jamais, mais bon.

anon83885791 · mai 15, 2018, 4:13pm

si c’est jean kevin qui veut rager un bon coup sur son -50 point il va probablement le marquer

comme çà

Ou

Le gars comme de très bon posters qui veut raconter un paver bien ordonné et complet, il aura besoin de quelques une de ces balises.

Caedus-21530 · mai 15, 2018, 5:03pm

Pourquoi vouloir absolument tout compliquer avec des systèmes de niveau ? La prochaine ils compte ajouter un mode Premium ?
En plus, c’est ridicule d’avoir supprimé le “je n’aime pas”, on fera comment quand Jean-Kévin Fandegenji viendra râler sur le prochain héros ?

anon83885791 · mai 15, 2018, 5:29pm

on aimera comme çà il se sentira apprécié

LaF-21901 · mai 15, 2018, 6:37pm

bon en meme temps, ca n’apporte rien les petits pouces rouge a part une auto satisfaction diabolique d’avoir été comme César cad : mécchhaannntttt

anon83885791 · mai 16, 2018, 7:05pm

le fait que les gens ne sont pas d’accord avec ton poste.
car ne pas mettre de pouce c’est être neutre

c’est bien comme pouce rouge çà

sorG-21317 · mai 16, 2018, 7:09pm

Ouais, faut utiliser ça du coup…

~~Pouce rouge~~
<del>Pouce rouge</del>

Ou ton petit triangle rouge

Magus-2498 · mai 16, 2018, 7:19pm

Il y a plein de smiley pour dire qu’on est pas d’accord :

J’ai quand même une petite préférence pour le

Jackal-21381 · mai 16, 2018, 7:27pm

Petite question de néophyte. Le [quote] [quote/] ça fonctionne toujours ou il y a un nouveau moyen de “citer” un passage précis de tout un message ?

sorG-21317 · mai 16, 2018, 7:29pm

Oui le [quote][/quote] fonctionne toujours (tu peux simplement surligner ce que tu veux citer et cliquer sur « Citer »).

Jackal-21381 · mai 16, 2018, 7:32pm

Hey, nice merci

Daïtô-2580 · mai 17, 2018, 6:05am

je cherchais justement cette commande, merci

Magus-2498 · mai 17, 2018, 6:27am

Va falloir tester toutes les balises html pour voir celles qui fonctionnent.

sorG-21317 · mai 17, 2018, 6:45am

J’ai pratiquement tout testé, y’en a plein qui sont bloquées

anon83885791 · mai 17, 2018, 6:52am

du genre les quels?
20 caractère minimum un message lmao

sorG-21317 · mai 17, 2018, 6:53am

Du genre tout ça

http://www.codeshttp.com/baliseh.htm xD

anon83885791 · mai 17, 2018, 6:54am

Après c’est plutôt normal, on n’est pas sensé crée des bouton ou des formulaires ou encore ajouter des éléments js ou css