Getting Started Guide
 

Chapter 12  
Creating Web Pages

Saving Documents as HTML Files

Copyright

This document is Copyright © 2010–2016 by the LibreOffice Documentation Team. Contributors are listed below. You may distribute it and/or modify it under the terms of either the GNU General Public License (http://www.gnu.org/licenses/gpl.html), version 3 or later, or the Creative Commons Attribution License (http://creativecommons.org/licenses/by/4.0/), version 4.0 or later.

All trademarks within this guide belong to their legitimate owners.

Contributors

Jean Hollis Weber

Peter Schofield

Ron Faile Jr.

Olivier Hallot

 

 

Feedback

Please direct any comments or suggestions about this document to the Documentation Team’s mailing list: documentation@global.libreoffice.org

Note: Everything you send to a mailing list, including your email address and any other personal information that is written in the message, is publicly archived and cannot be deleted.

Acknowledgments

This chapter is adapted and updated from Chapter 12 of Getting Started with OpenOffice.org 3.3. The contributors to that chapter are:

Agnes Belzunce

Peter Hillier-Brook

Ian Laurenson

Peter Kupfer

Jean Hollis Weber

Linda Worthington

Publication date and software version

Published 22 June 2016. Based on LibreOffice 5.1.

Note for Mac users

Some keystrokes and menu items are different on a Mac from those used in Windows and Linux. The table below gives some common substitutions for the instructions in this chapter. For a more detailed list, see the application Help.

Windows or Linux

Mac equivalent

Effect

Tools > Options menu selection

LibreOffice > Preferences

Access setup options   

Right-click

Control+click and/or right-click depending on computer setup

Open a context menu

Ctrl (Control)

⌘ (Command)

Used with other keys

F5

Shift+⌘+F5

Open the Navigator

F11

⌘+T

Open the Styles and Formatting window

 

Contents

Copyright

Contributors

Feedback

Acknowledgments

Publication date and software version

Note for Mac users

Introduction

Relative and absolute hyperlinks

Creating hyperlinks

Using the Navigator

Using the Hyperlink dialog

Editing hyperlinks

Removing hyperlinks

Exporting web pages using the Web Wizard

Saving and exporting documents as web pages

Writer documents

Single web page

Series of web pages

Calc spreadsheets

Impress presentations

Draw documents

Creating, editing, and saving web pages using Writer/Web

Writer/Web display modes

Creating and editing an HTML document

Checking a web page in a browser

 

Introduction

HTML capabilities in LibreOffice include saving and exporting existing documents in HTML format.

This chapter describes how to do the following in Writer, Calc, Impress, and Draw:

When creating a document that you plan to deliver as a web page, you need to consider the following:

Relative and absolute hyperlinks

Hyperlinks stored within a file can be either relative or absolute.

A relative hyperlink says, Here is how to get there starting from where you are now (meaning from the folder in which your current document is saved) while an absolute hyperlink says, Here is how to get there no matter where you start from.

An absolute link will stop working if the target is moved. A relative link will stop working if the start and target locations change relative to each other. For instance, if you have two spreadsheets in the same folder linked to each other and you move the entire folder to a new location, an absolute hyperlink will break but a relative one will not.

To change the way that LibreOffice stores the hyperlinks in your file, select Tools > Options > Load/Save > General and choose if you want URLs saved relatively when referencing the File System, or the Internet, or both.

Calc will always display an absolute hyperlink. Do not be alarmed when it does this even when you have saved a relative hyperlink. This ‘absolute’ target address will be updated if you move the file.

Make sure that the folder structure on your computer is the same as the file structure on your web server if you save your links as relative to the file system and you are going to upload pages to the Internet.

When you rest the mouse pointer on a hyperlink, a help tip displays the absolute reference, because LibreOffice uses absolute path names internally. The complete path and address can only be seen when you view the result of the HTML export (saving the spreadsheet as an HTML file), by loading the HTML file as text, or by opening it with a text editor.

Creating hyperlinks

When you type text (such as a website addresses or URL) that can be used as a hyperlink, and then press the spacebar or the Enter key, LibreOffice automatically creates the hyperlink and applies formatting to the text (usually a color and underlining). If this does not happen, you can enable this feature by going to Tools > AutoCorrect Options > Options on the menu bar and selecting the URL Recognition option.

If you do not want LibreOffice to convert a specific URL to a hyperlink, go to Edit > Undo Insert on the menu bar, or press Ctrl+Z immediately after the formatting has been applied, or place the cursor in the hyperlink, right-click, and select Remove Hyperlink from the context menu.

To change the color of hyperlinks, go to Tools > Options > LibreOffice > Application colors, scroll to Unvisited links and/or Visited links, pick the new colors and click OK. Caution: this will change the color for all hyperlinks in all components of LibreOffice; this may not be what you want.

In Writer and Calc (but not Draw or Impress), you can also change the Internet link character style or define and apply new styles to selected links.

Using the Navigator

You can insert hyperlinks using the Navigator and this is an easy way to insert a hyperlink to another part of the same document.

  1. 1)Open the documents containing the items you want to cross-reference. 

  2. 2)Click on the Navigator icon in the Sidebar or press F5. 

  3. 3)Click the triangle to right of the Drag Mode icon and select Insert as Hyperlink (Figure 1). Note that the Drag Mode icon changes shape depending on the type of insert that was previously selected. The default icon for Drag Mode is to show the Hyperlink icon . 
 

Figure 1: Inserting hyperlink using the Navigator

 
  1. 4)Select the document from the drop-down list at the bottom of the Navigator that contains the item that you want to link to. 

  2. 5)In the Navigator list, select the item that you want to insert as a hyperlink. 

  3. 6)Drag the item to where you want to insert the hyperlink in the document. The name of the item is inserted in the document as an active hyperlink. 

When using the Navigator to insert a hyperlink to an object such as a graphic, it is recommended to have the hyperlink show a useful name, for example 2009 Sales Graph. You need to give such objects useful names instead of leaving them as the default names, for example Graphics6, or you will have to edit the name of the resulting link using the Hyperlink dialog, as described below.

You can also use the Navigator to insert a hyperlink from one document (the source) to a specific place in another document (the target). Open the Navigator in the target document and drag the item to the position in the source document where you want the hyperlink to appear.

Using the Hyperlink dialog

You can use the Hyperlink dialog to insert a hyperlink and modify all hyperlinks.

  1. 1)Highlight the existing text you want to use as a link. 

  2. 2)Click the Hyperlink icon on the Standard toolbar or go to Insert > Hyperlink on the menu bar to open the Hyperlink dialog (Figure 2). 

  3. 3)On the left side, select one of the four categories of hyperlink: 

  1. 4)The Hyperlink dialog changes depending on the type of hyperlink selected. Enter all necessary details to create the hyperlink. 

  2. 5)Click Apply to create the hyperlink and the Hyperlink dialog remains open allowing you to create another hyperlink. 

  3. 6)Click Close to close the Hyperlink dialog. 

 

Figure 2: Hyperlink dialog showing details for Internet links

 

The dialog changes according to the choice made for the hyperlink category in the left panel. A full description of all the choices and their interactions is beyond the scope of this chapter. Here is a summary of the most common choices.

The Further settings section in the bottom right part of the dialog is common to all the hyperlink categories, although some choices are more relevant to some types of links.

Editing hyperlinks

To edit an existing link:

  1. 1)Click anywhere in the hyperlink text. 

  2. 2)Click the Hyperlink icon on the Standard toolbar, or go to Edit > Hyperlink on the menu bar, or right-click and select Edit Hyperlink from the context menu. The Hyperlink dialog opens. 

  3. 3)Make your changes and click Apply to save your changes. The Hyperlink dialog remains open, allowing you to continue editing hyperlinks. Click Apply after editing each hyperlink. 

  4. 4)When you are finished editing hyperlinks, click Close. 

The standard (default) behavior for activating hyperlinks within LibreOffice is to use Ctrl+click. This behavior can be changed in Tools > Options > LibreOffice > Security > Options by deselecting the option Ctrl-click required to follow hyperlinks. If clicking in your links activates them, check that page to see if the option has been deselected.

Removing hyperlinks

You can remove the link from hyperlink text and leave just the text by right-clicking on the link and selecting Remove Hyperlink from the context menu. You may then need to re-apply some formatting to match the text with the rest of your document.

To erase the link text or button from the document completely, select it and press the Backspace or Delete key.

Exporting web pages using the Web Wizard

You can use the Web Wizard to create several types of standard web pages from all LibreOffice components except Math. Each time you start the Web Wizard in a LibreOffice component, Writer automatically starts before the Web Wizard opens. The Web Wizard is linked to Writer and is normally used in Writer for creating web pages.

  1. 1)Go to File > Wizards > Web Page on the menu bar to open the Web Wizard dialog. 

 

Figure 3: Introduction page of Web Wizard dialog

 
  1. 2)On the first page of the Wizard, choose settings and click Next >. If this is your first web page, the only choice is <default>. 

  2. 3)Select or browse to the document you would like to format. The information for Title, Summary and Author is taken from the document properties. If necessary, edit this information (Figure 4). 

 

Figure 4: Documents page of Web Wizard dialog

 
  1. 4)Click Next > and select a layout for the web site by clicking on the layout boxes (Figure 5). 

 

Figure 5: Main layout page of Web Wizard dialog

 
  1. 5)Click Next > to customize the layout and select the information to be listed and screen resolution (Figure 6). 

 

Figure 6: Layout details page of Web Wizard dialog

 
  1. 6)Click Next > and select a style for the page. Use the drop-down list to choose different styles and color combinations. Browse to select a background image and icon set from the Gallery (Figure 7). 

  2. 7)Click Next > and enter general information for the web site, such as Title and HTML Metadata information (Figure 8). 

  3. 8)Click Next > and enter the information of where to publish your new web site (Figure 9). 

  4. 9)Click Finish to save the file and close the Web Wizard. 

 

Figure 7: Style page of Web Wizard dialog

 
 

Figure 8: Web site information page of Web Wizard dialog