Accueil site Tableur Programmation Outils XML Tic en stock Téléchargement Informations



Outils Xml

Xml to Html

GenXML 
 
Xml to Html
  Présentation
  GenXML
  OutilXml
  Page de décors
  Feuille de style (UI.css)
Gestion du site
  Fichiers à recopier
 
Document Xml
Les documents xml produits par l'outil GenXML répondent à un à modèle particulier qui impose une certaine forme de document et d'utiliser certaines balises et dans un certains ordre.
Un document XML est composé d'un entête et d'un corps de texte. L'entête est générique (version, encodage texte, ...). Le corps du texte peut contenir différents éléments indépendants les uns des autres : des sections, des titres, des paragraphes, des paragraphes en retrait, des sauts de ligne, des encadrés, des listes, des images, des tableaux.
Le texte structuré
Il est conseillé de structurer ses pages avec des sections (pouvant comporter des titres). On dispose de 4 sections différentes à appliquer au corps du texte qui permettent d'avoir 4 niveaux de titres (les titres sont facultatifs) de taille décroissante. La taille et la couleur des titres sont définis dans le fichier UI.css
Les Balises autorisées
La balise Paragraphe est la balise de base qui permet d'écrire du texte, d'appliquer à une partie des styles (gras, italique, gras et italique, en exposant, en indice et même choisir une couleur). On peut également dans un paragraphe insérer différents types de liens par la balise Lien et des images dans une ligne de texte par la balise Image.
La balise Retrait met simplement le texte entre ces balises en retrait d'un certain nombre de pixels et permet les mêmes enrichissements et insertions qu'un paragraphe ordinaire.
La balise Saut de ligne permet de placer une ligne vide lentre deux éléments du corps de texte en particulier entre deux paragraphes.

La balise Encadré met tout ce qui est entre ces balises avec un fond grisé (couleur #EEEEEE)
La balise Liste insère une liste dans le corps du texte avec des puces ou des numéros. Une boîte de dialogue permet ce choix ainsi que pour une liste numérotée le numéro de départ. On peut également insérer des liens dans une liste
Les traitements particuliers
Les liens
En cliquant dans un paragraphe ou au point d'insertion, on peut ajouter un lien en cliquant sur le bouton Lien situé dans la barre d'outils horizontale au dessus du texte. Une boîte de dialogue apparaît :


Dans cette boîte de dialogue, il faut indiquer : le type de fenêtre voulue, le texte du lien, la bulle d'information souhaitée (qui apparaitra lorsque le pointeur de la souris est au-dessus du lien) et l'adresse web d'une page d'un site ou le fichier d'une page html à afficher ou le fichier d'un document à télécharger.
Les images
Une boîte de dialogue permet de choisir entre plusieurs types d'insertion d'image uniquement au format jpg ou png


Dans cette boîte de dialogue, la liste des images jpg ou png présentes dans le dossier Images du dossier traité s'affiche. En cliquant sur le nom d'une image, ses dimensions s'inscrivent en dessous de la liste et l'image apparaît au centre. On peut modifier les dimensions, elles seront prisent en compte pour l'affichage dans la page Html.
La liste en bas à gauche permet de choisir le mode d'insertion :


Les trois premiers modes (Centre, Gauche, Droite) sont classiques : insertion de l'image dans le corps du texte à gauche, au centre (comme ci-dessus) ou à droite.
Le mode Ligne affiche l'image dans la ligne de texte à la position du curseur. Il s'agit en principe d'une possibilité réservée à une image de petite taille (taille d'une icône).
Les modes Gauche + texte et Droite + texte permettent d'afficher l'image à gauche ou à droite comme dans un tableau à deux colonnes avec le texte à côté. Ces deux modes utilise les balises Tab. La boîte de dialogue offre la possibilité de taper le texte à côté de l'image mais on peut aussi le faire de retour dans le document Xml et ajouter des paragraphes avant la balise de fin (avec les enrichissements possibles pour un paragraphe)
Les deux derniers modes (Gauche dans texte et Droite dans texte) positionne l'image à gauche ou à droite et l'habille avec le texte qui sera taper de retour dans le document Xml à la place du texte marqué "à remplacer". Dans ce texte, on peut utiliser les enrichissement des paragraphes et la balise Html <BR> pour un simple retour à la ligne mais pas de saut de ligne. Le texte ne peut habiller l'image que s'il est assez long pour le faire. S'il n'est pas assez long c'est la suite du document qui habillera l'image mais pas aussi bien.

Exemple d'une image encadrée par du texte :
La boîte de dialogue n'offre pas la possibilité de taper le texte à côté de l'image
mais on peut le faire de retour dans le document Xml
Le texte à remplacer dans le paragraphe de l'image
permet de mieux entourer l'image.
On peut utiliser la balise Html <BR> pour un retour à la ligne.
et appliquer tous les enrichissements des paragraphes.
Si le texte n'est pas assez long,
c'est le reste du document qui vient habiller l'image mais moins bien.
En effet, il y aura un saut de ligne avant la suite du document,
et un saut de ligne sous l'image.
Dans cet exemple, des retours à la ligne ont été utilsés
pour que le texte soit assez long.
Ainsi on peut voir l'habillage optimum.


Lien sur une image :
Après avoir choisi une image, on peut également mettre un lien sur une image en cliquant sur le bouton Lien de la boîte de dialogue d'insertion d'Images. La boîte de dialogue pour les liens se supperpose à la boîte de dialogue précédente et permet de choisir : le type de fenêtre, la bulle d'information et la page Web à afficher ou le fichier à télécharger. Dans ce cas, il n'y a pas de texte du lien à renseigner puisqu'il est remplacé par l'image.
Les tableaux
Une boîte de dialogue offre une aide pour la création d'un tableau de 5 colonnes et 10 lignes au maximum.


Dans cette boîte de dialogue, on peut choisir le nombre de lignes et de colonnes, la largeur du tableau en pixels ou en pourcentage par rapport à la largeur de la page ainsi que la largeur de chaque colonne du tableau (en pourcentage par rapport à la largeur du tableau).
La hauteur du tableau ne dépend que du nombre de lignes et du contenu des cellules
On peut choisir la position du tableau dans la page (à gauche, au centre ou à droite), donner un titre au tableau (facultatif) qui sera centré juste au-dessus du tableau, indiquer la première ligne pour les titres des colonnes, appliquer un quadrillage à toutes les cellules du tableau.
Au départ chaque cellule contient un texte qui repère sa position dans le tableau (numéro de ligne - numéro de colonne). On peut dans la boîte de dialogue taper le texte des cellules (si necessaire mettre en plein écran la boîte de dialogue) ou le faire de retour dans le document Xml.
Par défaut, l'alignement dans chaque cellule est "Left" mais on peut changer cet alignement en "Center" ou "Right" pour les cellules que l'on veut une fois de retour dans le document Xml.
Remarque : la position du tableau par défaut est "Centre" et le tableau apparaît au centre de la page avec le texte au-dessus et en dessous du tableau. Par contre dans les positions "Gauche" et "Droite", le tableau apparaît en desssous du texte qui le précède mais habillé avec le texte qui suit

Exemple de tableau avec titres :
Bilan du premier trimestre
MoisRecettesDépensesBilan
Janvier3000,00 €1700,00 €1300,00 €
Février3500,00 €2300,00 €1200,00 €
Mars2800,00 €2500,00 €300,00 €

Image dans une cellule du tableau :
De retour dans la page Xml, on peut appliquer des styles (Gras, Italique,...), insérer des images (tous les types d'image énumérés plus haut) dans les cellules du tableau par la boîte de dialogue d'insertion d'images et aussi créer des liens sur ces images. Par exemple (ici images sans lien) :
Texte cellule1-1
Image à gauche
Texte cellule1-2
Image au centre
Texte cellule1-3
Image à droite
Texte cellule2-1. L'image est sur la ligne et si sa hauteur est inférieure à 15 pixels, l'interligne n'est pas changé. Texte cellule2-2
Image à gauche et Texte à côté.
Texte cellule2-3 :
le texte s'il est assez long entoure l'image. Ce texte est à taper de retour dans la page Xml à la place du texte existant (Texte à remplacer).
La balise SourceHtml
Cette balise permet d'intégrer tout texte Html dans le document Xml sans que ce texte soit interprété par la transformation en Html.
Autrement dit tout ce qui se trouve entre les balises <SourceHtml> et </SourceHtml> sera directement intégré dans la page Html finale. Ces balises sont utilisées implicitement pour les tableaux (la boîte de dialogue des tableaux génére un code Html qui est ainsi inséré dans le document Xml).

© SiteFormTice avril 2020 - Tous droits réservés. Limitation à l'usage non commercial, privé ou scolaire.