You are on page 1of 3

e-sidoc

dcembre 2011

Le langage HTML : mise en page dun article avec Nvu

Le recours NVU nest absolument pas indispensable pour rdiger un article sous e-sidoc. Ce logiciel est propos, ici, comme outil de formation pour ceux qui souhaite se familiariser avec le code HTML. Quest-ce que cest ?
Le HTML ( HyperText Mark-Up Language ) est un langage dit de marquage (de structuration ou de balisage ) dont le rle est de formaliser l'criture d'un document avec des balises de formatage. Les balises indiquent au navigateur comment afficher le contenu de la page. (mise en valeur des paragraphes, titre de la page, titre d'une partie, d'une sous-partie, caractres en gras, retour la ligne, etc) et quels sont les liens qu'il tablit avec d'autres documents.
Balises <html>Texte</html> <h1>Texte</h1> <h2>Texte</h2> <h6>Texte</h6> <i> Texte </i> <strong> Texte </strong> ou <b>Texte</b> <u>Texte </u> <font face="Police de caractre">Texte</font> exemple : <font face="Arial">Texte</font> <font color="couleur">Texte</font> ou color=#RRVVBB>Texte</font> <font color="brown"> Texte </font> ou <font color=#330000>Texte</font> <font size=4>Texte</font> Utilisation Obligatoire au dbut et la fin du fichier HTML Titre de niveau 1, 2 et 6 Texte en italique Texte en gras Texte soulign Spcifie la police de caractres <font exemples : Spcifie la couleur de la police (nom de la couleur en anglais ou paramtrage de la couleur en hexadcimal (voir http://www.code-couleur.net/) Spcifie la taille de la police, valeur allant de 1 7. Ces tailles peuvent varier suivant le navigateur. Il est possible de modifier ces valeurs de faon relative : La valeur "+1" indique une augmentation de la police la taille suprieure. Les tailles varient de 1 7. Combinaison des 3 balises prcdentes : spcifie la police de caractres, la couleur et la taille Centrer le texte d'un titre ou d'un paragraphe ou <p align="center">Texte</p> <p align="justify">Texte</p> <br> <hr> <hr color="couleur"> Justifier un paragraphe Saut de ligne Barre horizontale Barre horizontale de couleur

<font face="Comic Sans MS" color="brown" size=4>Texte</font> <center>Texte</center>

Ces balises fonctionnent par paire, l'une dfinit le dbut d'un bloc et l'autre la fin. Remarquez que ces deux balises ne se diffrencient que par un slash "/" mais il est indispensable. Par exemple, le titre d'une page est cod grce la balise <title>, et ce de la manire suivante dans votre diteur de texte : <title>Ceci sera le titre de la page</title>.

http://jlorenne.net/initiation-html.php

S a r a h B e m e r & P r i s c i l l a M o m m e s s i n accompagnement BCDI/E-sidoc Orlans-Tours

e-sidoc

dcembre 2011

A q u o i a s e r t : lexemple dun article publi avec le CMS de - s i d o c et mis en page avec NVU

Possder quelques rudiments dHTML permet de mieux matriser la rdaction des articles dans le CMS d E-sidoc. Notamment quand il sagit dintgrer des documents hbergs. Le logiciel libre Nvu (prononcez n-view) qui propose un diteur de page graphique, du type WYSIWYG peut tre dune aide prcieuse pour sinitier ce langage et peut tre utilis pour mettre en page un article.

Comment procder

Il faut au pralable tlcharger et installer Nvu. On prpare ensuite la mise en page en mode normal puis on copie, en mode source, le code HTML obtenu.

En affichage Source, il faut copier le code


contenu entre les balises qui dterminent le corps de la page : <body> et </body>

En affichage normal, apparat lcran la


page html telle quelle sera vue par un usager.
(exception faite des cadres roses qui seront invisibles)

S a r a h B e m e r & P r i s c i l l a M o m m e s s i n accompagnement BCDI/E-sidoc Orlans-Tours

e-sidoc

dcembre 2011

Il faut ensuite, sous E-sidoc, coller ce code source dans lditeur de source HTML.

Pour obtenir , en mode rdaction d e - s i d o c

puis en affichage final avec vignette

S a r a h B e m e r & P r i s c i l l a M o m m e s s i n accompagnement BCDI/E-sidoc Orlans-Tours

You might also like