Rédiger un article sur nsi.xyz

Tutoriels

Cet article est un tutoriel exemple. Ceci est le paragraphe introductif de l’article, il faut particulièrement le soigner car il s’affiche dans l’article et dans les pages qui listent les articles. Ce paragraphe doit faire 3 à 4 lignes maximum, sur un écran en full HD sans zoom excessif. Il ne doit contenir que texte, pas de titre ni d’image et on évitera de mettre des liens, du gras ou de italique dans ce paragraphe .

Structurer son article avec des titres

Les titres de niveau 2 en html sont encadré par une balise <h2> ouvrante et une balise </h2> fermante. WordPress génère automatiquement le code html requis, il suffit de modifier le type ou le style du bloc, et pour cela la barre d’outil de mise en forme des blocs de WordPress est d’une grande utilité.

La technique pour aligner à droite des images vous sera expliqué un petit peu plus bas, mais elle n’est pas sans poser des problèmes.

Une fois de texte transformé en titre, on peut ajuster le niveau de titre.
On notera d’ailleurs qui est possible de positionner des images à droite d’un paragraphe de texte, image qui ont pu être importé au moyen d’un simple copier / coller.

Sous titres d’un article

Les articles seront structurés uniquement avec des titres de niveau 2 et éventuellement des titres de niveau 3.
Il est exclu d’utiliser des éléments tels que la coloration du texte pour ne pas détruire la charte graphique du site.
On évitera d’abuser des styles tels que le gras ou l’italique.

On peut utiliser le bloc citation simple

La beauté est dans les yeux de celui qui regarde.

Oscar Wilde

ou le bloc citation en exergue

Tout le monde dans ce pays devrait apprendre à programmer un ordinateur, parce que ça vous apprend à penser.

Steve Jobs

mais il ne faut abuser ni de l’un, ni de l’autre. Le style CSS de ces blocs est de la responsabilité du webmester, qui l’ajuste en écrivant du code CSS dans une feuille de style. Il ne faut donc utiliser aucune astuce manuelle pour forcer un rendu artificiel qui casserait la charte graphique.

Publier un code avec coloration syntaxique

Il me suffit de cliquer sur le signe +, et de chercher et choisir Code Mrror Block dans la liste des blocs proposés.
Le thème graphique ne doit pas être modifié, par contre il faut indiquer le langage sur lequel appliquer la coloration syntaxique.

Un exemple avec du code HTML

<! -- La coloration syntaxique  -->
Un site internet de référence poue débuter en HTML <a href="https://www.w3schools.com/">w3schools.com</a>

Sur la version publique de cette article, un clic sur le bouton lecture interprétera le code HTML.

Un exemple avec du code CSS

body{
	margin: 0;
	padding : 0;
	font: 18px "Lucida Sans Unicode", sans-serif;
	color: #424242;
}

Un exemple avec du code python

print("Hello, World!")

Pour l’instant, le code python ne peut être exécuté, mais des recherches sont menées pour y arriver à terme.

Du code en ligne, dans le texte

Le code python ci-dessus utilise la fonction print() native de python, celle ci permet d’afficher dans la console d’exécution un texte, en l’occurrence ici le traditionnel Hello, World!.

Ainsi, en utilisant la fonction en savoir plus de la barre d’outil de wordpress, on peut ajouter du code en ligne, comme dans l’exemple ci-dessus.

Insérer des images

Respecter la législation en vigueur

Il est interdit de copier et d’insérer une image :

  • trouvée sur google
  • copiée sur un autre site
  • dont on ne connait pas le copyright exact.

Il est souhaitable de :

Texte à transformer en titre