LibreOffice Writer HTML
How to create a web page with LibreOffice.
A guide for quickly adding pages to a GitHub Pages site.
Start
Create a new writer document.
Switch to web view: View → Web
Add a title: File → Properties → Description → type in the title
The title will be shown in the browser title bar or tab.
Save the document, avoid using spaces in the filename so they don’t have to be encoded as %20 in the URL.
Add Header
Put “Home” at the very top. Add a link later.
Put a title and format it using the Title paragraph style.
Add a new line before the title.
Keep this consistent across all pages so the content doesn’t shift around.
Add Content
For this website, 4 paragraph styles are used to set the font size:
Default for the link to the home page
Title for the largest
Subtitle for medium
Text Body for everything else
All paragraphs are left-aligned.
Adding Links
HTML file must exist beforehand
Insert → Hyperlink or Ctrl-K
Type the text for the link.
Or select the text first then insert hyperlink.
Document → Document → Path: → Click Open File → Choose HTML file
Note: Keep all documents in the same folder for simplicity.
Adjust Text and Background Color
Do this after adding all content.
Format → Page Style → Area → Color → Choose a background color
Select All (Ctrl-A) → Right click → Character → Character → Font Effects → Font Color → Choose a font color
Note: Links may need to be formatted separately.
Right click the link → Character → Character → Font Effects – Font Color → Choose a font color
Note: Visited links will stay the same color.
For this website:
The font is changed to Arial.
Background color is Dark Blue 3
Font color is Light Gray 5
Link color is Light Blue 1
Adjust Margins
Do after adjusting all the text.
Select All → Right click → Paragraph → Paragraph → Indents & Spacing
Under Indent: change Before text and After text to 8
Save as HTML
Do this last.
Save the document.
File → Save A Copy → Change Save as type to HTML → Type the filename (or leave it as is) and save.
Note: It’s easy to accidentally choose Save As instead of Save a Copy and the Save As type needs to be changed to HTML every time.
Keep the original .odt or else the paragraph styles will be lost when editing with just the HTML file.
Why not use Save As? LibreOffice will be editing the HTML document after using Save As. Save a Copy will keep the .odt open.
Test by Opening in a Browser
Open the new HTML file in a web browser.
Optionally, test the mobile view:
Press F12
Click the second icon from the upper-left (looks like a phone in front of a tablet).
Close when done.
Optional: Prevent Sending of Referrer When Clicking on Links
Open the HTML file in a text editor.
Add rel=”noreferrer” in the href tags: <a rel=”noreferrer” href=”…”>
Changes will be lost after opening in LibreOffice and saving as HTML.