Introduction to Web Page Editing

Quick Links


BlueGriffon is a free, open-source web page editor that anyone can use to design and build the website. It is a WYSIWYG (What You See Is What You Get) web editor, providing a GUI interface for making webpage in an easy way even though users have less experience or knowledge in web programming.

This online tutorial allows you to get started on using the free version of BlueGriffon ( for writing your first web page.

Learning Objective

  • Create a web page using BlueGriffon
  • Learn the fundamental aspects of HTML editing
  • Enter and format text in BlueGriffon
  • Create and maintain hyperlinks to pages on other sites
  • Using tables to arrange data
  • Insert, resize and position images

Software Requirement


You will need BlueGriffon for creating and editing your web page. BlueGriffon is a WYSIWYG – “What You See Is What You Get” HTML editor as well as graphical web design software from Disruptive Innovations SAS, a French Company founded in Oct 2003.

BlueGriffon 3.1: Free Version available at

Supporting platforms: Microsoft Windows (7, 8, 10); Mac OS X ver.10.10 or above and Ubuntu 16.04, it only support 64bits Operating System

Supporting Languages: English (USA), Čeština, Deutsch, Español (Castellano), Suomi, Français (France), Galego, עברית, Italiano, 日本語, 한국어, Nederlands, Polski, Русский, Slovenščina, Svenska, 中文 (简化字), 中文 (繁體字), Magyar, српски

Getting Started with BlueGriffon

Installation of BlueGriffon (demonstrated with Windows platform)

  1. Double click the installer which is downloaded from the site
  2. BlueGriffon installer
  3. In the Setup Wizard, click Next.
  4. BlueGriffon 01
  5. Select Destination Location (suggested to use the default location), click Next.
  6. BlueGriffon 02
  7. Check the box Create a desktop shortcut and click Next
  8. BlueGriffon 03
  9. Confirm the installation details and click Install.
  10. BlueGriffon 04
  11. Wait for the installation in progress.
  12. blueGriffon 05
  13. After the completion of installation, check the box Launch BlueGriffon and click Finish.
  14. BlueGriffon 06
  15. Launch BlueGriffon
  16. BlueGriffon 07

To start BlueGriffon

  • Double click the short cut of BlueGriffon on the Desktop
  • BlueGriffon 08
  • When you first launch the program, you’ll find a number of task panes, toolbars, and dialogs with a wide range of features. Your BlueGriffon windows should look something like this:
  • BlueGriffon 09

Creating a New Web Page

A fundamental function of BlueGriffon is to allow you to create a web page (*.htm; *.html etc)

To create a new page, please click the PLUS symbol on the top left corner of BlueGriffon

BlueGriffon 10

For more options of setting up the new page, click the BLACK Arrow besides the PLUS symbol. You will see the windows for more options.

BlueGriffon 11

You will have a blank page displayed in the Editor Pane. The Editor Pane has basically three views:
  • Wysiwyg (What You See Is What You Get): the editor view where you input text
  • Source: reveals the HTML codes of the page you are editing
  • Print Preview: display the preview of the printed version of your editing page
You could also choose Dual View to split the display into Wysiwyg and Source views at the same time.

BlueGriffon 12

Page Properties

Go to Format > Page Properties

BlueGriffon 13

It allows you to edit the Title, Author, Description, Keywords of your web Page

BlueGriffon 14

The Text Language and Character Set allow you to change the HTML encoding to Unicode (UTF-8), Simplified Chinese or Traditional Chinese (Big-5)

When you have finished making changes, click the OK button.



Multi-Factor Authentication

February 2024
February 2024

Mandatory for all staff accounts

May 2024
May 2024

Mandatory for all student accounts