Example of webpage created from a docx file

You can use several character formats:

You can write emojis 😄

You can insert links to other pages of your website using relative paths, from the folder of the current file towards the target file: e.g. manual or about. Thus links in your files are also valid and allow to navigate between your files, within your word processor.

You can insert links to external web pages, like www.google.com. For this you _need_ to write the protocol at the beginning: usually https:// or http://.

You can write emails and phone numbers:

john@doe.com

(+33).6.12.34.56.78

You can insert a link targeting a section of a webpage using yourwebpage.html#the-section. Note that you need to write the-section in lower case, with hyphens (-) between words. You will also need to remove all backslashes (\) and all simple quotes (').

For instance this is a link to the section named “Inline/Character formatting”, of this page.

Fortunately, it is often possible to find the link. Some ways: (i) A first solution is to get the link thanks to automatically displayed anchor links. On websites built with our services, an anchor link usually becomes visible when you move your mouse in front of the title of a section.
Then make a right-click on the anchor and copy the corresponding link. (ii) Second solution, use the link of a table of contents. (iii) A last solution is to inspect the source code of the targeted page, looking for a putative“id” of the target.

A paragraph (styled or not) may contain embedded character styles, e.g. coloured inline text obtained with the character style color-red, color-green and color-#0000ff.

The example file contains predefined paragraph styles and character styles. Custom styles can also be created, based on generic syntaxes: e.g. color-#8f4600, color-coral, or whatever name with either (i) a CSS color name or (ii) a hexadecimal color format. All available CSS color and color names can be previewed online.

A paragraph is a set of lines without any ¶ (a "pilcrow"), inserted with the key Enter. In other words, any ¶ ends a paragraph.

In your document, if you do not see the symbol ¶: you can usually “toggle the formatting marks” in your text editor.

If you want a new line in a paragraph, finish the line with ↲: the symbol of new line, inserted with Maj+Enter.
After a ¶ its a new paragraph.

By default all paragraphs are left-aligned. But you can also enforce a left-alignment yourself with the paragraph style align-left.

A centered paragraph with the paragraph style align-center.
This line belongs of the centered paragraph. It is thus centered too.

Here is a justified paragraph, with the paragraph style align-justify, that does its best to distribute words horizontally between the text borders. Unfortunately, sometimes, this alignment causes big spaces between words of the same line.

And a right-aligned paragraph with align-right.

You can insert notes

You can use bulleted lists,

or numbered lists

You can insert standard bitmap or raster images (jpeg, png, etc.) with a simple drag-and-drop...

… and control the size of images from the word processor.

You can insert vector images in your text editor and control their size. The vector image is usually converted into a bitmap image.

You can insert animated images (GIF) and control their size within the editor

You can insert tables

When you want to insert a media (e.g. a pdf, a video or an audio) in your webpage:

1. Create a folder next to your docx file

2. Rename the folder and give it the name of your docx file.

For instance, given that your docx file is myfile.docx, in this case rename the folder into myfile.

3. Put your media inside the folder: e.g. simple.pdf.

4. In the docx file, insert the pdf using <embed src="markdown-formatting/simple.pdf" type="application/pdf">

Possibilities are endless since you can even write in html inside your file !

You can define columns, insert an image – animated or not – from a web URL and control image positions.

You can embed pdf files ...

… or insert a link to download the pdf file.

You can play sounds from an uploaded mp3 file

You can play a video from an uploaded video file. Either using the WebM encoding (flower.webm) ...

… or with a MPEG-4 encoding (beach.mp4).

You can insert iframes and control their size, with an aspect-ratio constraint

This document format does not allow to set metadata of the computed webpage – like the title of the page – within the file itself. Thus metadata are defined by writing a metadata file next to this document. A metadata file, is a text file, with a yaml extension.

For instance, if your file is myfile.docx, create a file myfile.yaml.

Here is an example of a metadata file content

---
title: 'Pambda.com: Example of webpage created from a docx file'
author: 'Joseph Lucas'
date: '2020-03-12'
description: 'Example of webpage created from a docx file'
keywords: 'Pambda, Pambda.com, pandoc, docx, html, website'
header-includes: |
<meta property="og:type" content="website" />
<meta property="og:description" content="Pambda.com: Example of webpage created from a docx file" />
<meta property="og:url" content="https://pambda.com/Documentation/docx-formatting.html" />
<meta property="og:image" content="https://pambda.com/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="en_US" />
<meta name="twitter:card" content="summary\_large\_image">
...

Be careful, if you use single quotes (') within the value field, then write the values with double quotes (") rather than single quotes. Edit the values at the right of `:` with the values you want.

Metadata aren't mandatory but they have some utility: The title is displayed in the browser tab of the webpage. The title, the description and key-words help search engines (like Google) to index your page. For more information about the long value of the field named "header-includes", see The Essential Meta Tags for Social Media.

If you want a table of contents, add this in the metadata block

toc: true
toc-title: 'Title of your table of Contents'
toc-depth: 2