Exemple de page internet crée à partir d'un fichier docx

Vous pouvez utiliser plusieurs mises en forme des caractères :

Vous pouvez insérer des smileys 😄

Vous pouvez insérer des liens vers d’autres pages de votre site en utilisant des chemins relatifs, à partir du dossier du fichier courant, vers le fichier cible : p. ex. un lien vers le manuel ou un lien vers la page "À propos". Ainsi, dans les fichiers docx, les liens sont eux-aussi valides et vous pouvez les utiliser pour naviguer entre vos fichiers, grâce à votre logiciel de traitement de texte.

Vous pouvez insérer des liens qui pointent vers des pages web externes, comme www.google.com. Pour cela vous devez écrire le protocole, en tête de l’URL du lien. La plupart du temps c’est https:// ou http://.

Vous pouvez écrire des adresses mail et des numéros de téléphone :

john@doe.com

(+33).6.12.34.56.78

Vous pouvez insérer un lien vers une section d’une page web en utilisant votrepage.html#la-section. Notez bien que vous devez écrire la-section en lettres minuscules, avec des traits d’unions (-) entre les mots. Vous devrez aussi retirer tous les backslash (\) et toutes les apostrophes (').

Les lettres accentuées doivent être converties en suivant l’encodage pour url utf8. Par exemple “é” correspond à %C3%A9.

Par exemple ceci est un lien vers la section nommée “Liens vers l’extérieur”, de cette page.

Heureusement, il est souvent possible de trouver le lien. Plusieurs solutions : (i) Une première solution est de récupérer le lien grâce à l’affichage automatique des liens d’ancrage. Sur les sites générés avec notre service un lien d’ancrage devient, généralement, visible lorsque vous bougez votre souris devant le titre d’une section.
Faites ensuite un clic droit sur l’ancre et copiez le lien correspondant. (ii) La deuxième solution est d’utiliser le lien d’une table des matières. (iii) Une dernière solution est d’inspecter le code source de la page que vous ciblez, à la recherche d’un éventuel identifiant ("id") de la cible.

Un paragraphe (stylisé ou non) peut contenir des caractères stylisés, par ex. du texte coloré obtenu avec le style de caractère color-red, color-green et color-#0000ff.

Le fichier d’exemple contient des styles de paragraphes et des styles de caractères prédéfinis. Des styles personnalisés peuvent être créés, en se basant sur la syntaxe générique : par exemple color-#8f4600, color-coral, ou n’importe quelle nom avec soit (i) le nom d’une couleur de CSS ou (ii) un format de couleur hexadécimal. Toutes couleurs, ainsi que leurs noms, peuvent être visualisés en ligne.

Un paragraphe est un ensemble de lignes sans ¶ ("pied-de-mouche") inséré avec la touche Entrée. En d’autres mots, un ¶ marque la fin de tout paragraphe.

Dans votre fichier, si vous ne voyez pas le symbole ¶ : vous pouvez généralement “activer les symboles de mise en page” dans votre éditeur de texte.

Dans un paragraphe, si vous voulez faire un retour à la ligne, finissez la ligne avec ↲ : le symbole de fin de ligne, inséré avec Maj+Entrée.
Après un ¶ c’est un nouveau paragraphe.

Par défaut, tous les paragraphes sont alignés à gauche. Mais vous pouvez aussi forcer cet alignement vous-même avec le style de paragraphe personnalisé align-left.

Un paragraphe centré avec le style de paragraphe align-center.
Cette ligne appartient également au paragraphe centré. Elle est donc centrée aussi.

Voici un paragraphe justifié, avec le style align-justify, qui tente au mieux de répartir les mots horizontalement entre les deux bordures du texte. Malheureusement, parfois, cet alignement génère de grands écarts entre les mots d’une même ligne.

Et un paragraphe aligné à droite avec align-right.

Vous pouvez insérer des notes

Vous pouvez insérer des listes à puces

ou des listes numérotées

Vous pouvez insérer des images standards bitmap ou matricielle (jpeg, png, …) avec un simple glissé-déposé

et contrôler la taille de vos images à partir de l’éditeur de texte.

Vous pouvez insérer des images vectorielles à partir de votre éditeur et contrôler leur taille. Durant ce processus l’image vectorielle est généralement convertie en image bitmap.

Vous pouvez insérer des images (GIF) et contrôler leur taille au sein de votre éditeur.

Vous pouvez insérer des tableaux

Quand vous voulez insérer un média (p. ex. un pdf, une vidéo ou de l’audio) dans votre page web :

1. Créez un dossier à côté de votre fichier docx

2. Renommez le dossier et donnez lui le nom de votre fichier docx.

Par exemple, si votre fichier docx est monfichier.docx, renommez le dossier en monfichier.

3. Mettez votre média à l’intérieur de ce dossier : p. ex. simple.pdf.

4. Dans le fichier docx, insérez le pdf avec <embed src="markdown-formatting/simple.pdf" type="application/pdf">

Les possibilités sont infinies vu que vous pouvez même écrire directement en html dans votre fichier !

Vous pouvez définir des colonnes, insérer une image (animée ou non) à partir d’une URL et contrôler les positions et les tailles des images.

Vous pouvez inclure des pdf

ou insérer un lien pour télécharger le fichier pdf.

Vous pouvez jouer des sons à partir d’un fichier audio mp3

Vous pouvez afficher des vidéos à partir d’un fichier vidéo uploadé. Soir en utilisant l’encodage WebM (flower.webm) ...

… soit en utilisant l’encodage MPEG-4 (beach.mp4)

Vous pouvez insérer des iframes et contrôler leurs tailles facilement grâce à une contrainte de forme (« aspect ratio »)

Ce format de fichier ne vous permet pas de définir les métadonnées de la page web correspondante (p. ex. le titre de la page web) dans le fichier lui-même. C’est pourquoi les métadonnées sont définies dans un fichier de métadonnées, à côté. Un fichier de métadonnées, est un fichier texte, avec l’extension yaml.

Par exemple, si votre fichier se nomme monfichier.docx, créez un fichier monfichier.yaml.

Voici un exemple de ce que peut contenir votre fichier de métadonnées

---
title: "Votresiteweb.com: Exemple de page internet crée à partir d'un fichier docx"
author: 'Prénom Nom'
date: '2020-11-10'
description: 'Exemple de page internet crée à partir d'un fichier docx'
keywords: 'Pambda, Pambda.fr, pandoc, docx, html, site internet'
header-includes: |
<meta property="og:type" content="website" />
<meta property="og:description" content="Pambda.fr: Exemple de page internet crée à partir d'un fichier docx" />
<meta property="og:url" content="https://pambda.fr/Documentation/docx-formatting.html" />
<meta property="og:image" content="https://pambda.fr/index/logo-social-networks.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Pambda" />
<meta property="og:locale" content="fr_FR" />
<meta name="twitter:card" content="summary\_large\_image">
...

Attention, si vous utilisez des apostrophes (') dans les champs de valeurs, écrivez les valeurs entre des guillemets (") plutôt qu’entre des apostrophes.

Éditez les valeurs à droite des “:” avec les valeurs que vous souhaitez.

Les métadonnées ne sont pas nécessaires, mais elles ont les utilités suivantes : Le titre est affiché dans l’onglet de la page de votre navigateur internet. Le titre, la description et les keywords (mots clefs) aident les moteurs de recherche (comme Google) à indexer votre page. Pour plus d’informations à propos des valeurs du champs “header-includes” allez voir The Essential Meta Tags for Social Media.

Si vous voulez une table des matières, ajoutez ceci au bloc de metadonnées

toc: true
toc-title: 'Titre de votre table des matières'
toc-depth: 2