En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour assurer le bon fonctionnement de nos services.
En savoir plus

Mise en forme - CSS

01- Articles dans l'ENT

Publié le mercredi 3 octobre 2012 13:52 - Mis à jour le mercredi 17 octobre 2012 16:04

Les articles dans l'ENT sont des pages HTML simples, ils ne comportent la plupart du temps que le texte que l'on y tape et un minimum de mise en forme. Cette mise en forme s'appuie sur les balises de mise en forme classiques du HTML. On peut aposer une mise en forme grâce aux icones présents au dessus du texte et qui ne fait qu'insérer des balises paritculiéres à la mise en forme souhaitée. Sans vouloir être exaustif, on peut retrouver dans ces mises en forme simple le fait :

  • de faire une liste d'items (comme c'est le cas dès maintenant).
  • d'écrire en gras
  • d'écrire en italique
  • d'écrire en souligné
  • de changer la police de caractéres
  • de changer la couleur

etc...

si vous cliquez sur le bouton "source" dans l'éditeur de l'ENT vous y trouverez un texte (ci dessous) qui décrit comment le navigateur internet que vous utilisez doit mettre en forme les textes pour avoir le rendu souhaité (ci dessus) :

 

 Je sais, je sais, il y en a qui pousseront de haut cris en disant : c'est trop compliqué. Mais aujourd'hui, quotidiennement pour la plupart d'entre nous, c'est sous cette forme que nos ordinateurs recoivent les informations qu'ils affichent si agréablement sur nos écrans. Il n'est pas question de voir toutes les normes HTML, cela ferait beaucoup trop mais en y regardant de près ce n'est pas bien compliqué, les règles qui s'appliquent sont simple et systématiques :

  1. les mises en forme sont posées là ou il y en a besoin.
  2. Elles sont marquées par des "balises HTML" qui sont toujours délimitées par un signe "inférieur à" et un signe "supérieur à" que je remplace ici par des crochets car mon texte dans l'ENT est interprété. Entre ces deux signes on retrouvera le nom de la balise. 
  3. il y a des balises dites uniques mais la plupart des balises marchent par deux,par exemple une balise [p] (pour paragraphe) se trouve en début de paragraphe et une balise [/p] (pour fin de paragraphe) se trouve posé après le texte contenu dans le paragraphe. le signe "/" utilisé avant le nom de la balise veut toujours dire "fin de".
  4. Les balises sont inclues les unes dans les autres mais ne se chevauchent jamais par exemple on ne peut pas avoir "  [li] ceci est un [strong] item [/li] [/strong] "  mais  " [li] ceci est un [strong] item [/strong] [/li] " .

Une fois que l'on sait cela, il ne reste plus qu'a connaitre le sens des balises :

[p] pour paragraphe
[strong] pour gras
[u] pour underline (souligné en francais)
[em] pour emphase, c'est a dire italique. 

Listes :
[ul] pour unordred list (liste non ordonnée).
[ol] pour ordred list (liste ordonnée).
ensuite chaque item de la liste est encadré par la balise [li] (pour list item)
...

Il y a néanmoins dans notre exemple un cas particulier sur lequel je souhaite attirer votre attention. la balise [span]. Elle encadre bien du texte mais la première balise, celle qui ouvre le bloc posséde des attributs supplémentaires comme dans  cette déclaration :
[span style="color: #ff0000"]de changer la couleur[/span] 
ou dans celle ci :
[span style="font-family: Comic Sans MS"]de changer la police de caractères[/span].

C'est l'attribu "style" qui permet de déterminer des éléments particuliers d'apparence de ce qui  est a l'intérieur du bloc comme de passer le contenu en rouge ou de changer sa police en "Comic Sans MS".
Cet attribu style n'est pas du HTML comme pour le reste des balises. C'est du CSS dont la fonction n'est pas de structurer un contenu mais d'effectuer une mise en page.

Les balises utilisées dans l'ENT, vous pouvez facilement vous familiariser avec elles en demandant la source des pages que vous avez déja écrit, on en a rapidement fait le tour.
Vous pouvez, si vous le souhaitez écrire vos pages directement en HTML (vous aurez accés a plus de balises que celles comprises dans les petits icones au dessus de votre texte).

Catégories
  • fonctionnement