DON'S FREEWARE CORNER -- DEC 2014
USING BLUE GRIFFON TO WRITE HTML WEBSITES
This page was last updated 2015-01-07
Underlined titles are links.
To Google search these notes and subpages CLICK
HERE and enter your search terms.
Return to Don's
Freeware Corner Page or Don's
Family History Class Notes Page .
=============================================================================================
DON'S FREEWARE CORNER 2014-12
USING BLUE GRIFFON TO WRITE HTML WEBSITES
©2014 Donald R. Snow
These Freeware Corner notes are published in TAGGology, our Utah
Valley Technology and Genealogy Group (UVTAGG) monthly newsletter,
and are posted on http://uvtagg.org/classes/dons/dons-classes.html
where there may be updates, corrections, or additions.
HTML (= Hypertext Markup Language)
HTML is the computer code that is used to tell browsers how to
display webpages. Why would you want to learn and use
it? Because when you set up your own website you will need to
know some of the basics. And, without even posting your
information online, if you write it in html format you can see it in
any browser and use all the properties of the browser. For
example, you can "print" a web book (html) from your genealogy
database program, copy that to your smart phone or tablet, and view
it in a browser there. Hence, you can have your entire
database with you when you travel and it will be searchable using
the browser's features. You can also download webpages to read
offline with a browser and you need to know a little about html for
that. It's easy to get started and you can learn more as you
need it. html files usually have the extension .html or
.htm. To avoid confusion I always use .html for all the
webpages I write. There are free lessons on the Internet to
learn html and there are many lists of html commands. You can
find them by Googling "html commands", "html lists", or "html
tutorials" (without the quotes). And there are several free
programs that allow you to type in the information and then they
produce the html code for it without you having to write it in html
first. We will discuss one of these, BLUE GRIFFON.
HTML WYSIWYG PROGRAMS AND BLUE GRIFFON
WYSIWYG means "what you see is what you get" and refers to programs
where you type the information the way you want it to be on the
webpage and the program produces the html code to display it.
The program I use for my online articles and notes is BLUE GRIFFON
which is available free from http://bluegriffon.org/
. There are Windows, MAC, and Linux versions and it comes in
many different languages. There is a commercial version, but
the free version does everything I need. You open an existing
webpage in BLUE GRIFFON by clicking File > Open and navigate to
where the webpage is stored on your computer. Or you start a
new webpage by clicking File > New and type in anything you want
and in the format you want and BLUE GRIFFON writes the source code
as you type. At the bottom of the BLUE GRIFFON page in the
middle are two buttons which toggle between the WYSIWYG and the html
source code. To write a webpage by piggy-backing off of
another html page, open the original one, edit it the way you want,
and save it with a different name. I always include the date I
have written or updated the page somewhere near the top and add that
date in International Date format, YYYY-MM-DD, at the end of the
file name. That way they all sort in chronological order and
the latest is at the bottom. If you are just starting out with
html, you might want to just open BLUE GRIFFON, click File > New,
and type something in the WYSIWYG window. Then click on the
Source button at the bottom of the screen to see what the html code
looks like for it. The File > New sets up the commands for
the heading and the body so when you click on Source you see code
like
<html> <--- This tells the
browser that the next part is to be interpreted as html code.
<head> ... <--- This says the next part is the head which
includes the name, date, information about it, etc.
</head> <--- This signals the end of the
head.
<body> ... <--- This is the start of the main part of
the file.
</body> <--- This signals the end
of the main part of the file.
</html> <--- This tells the browser
it is the end of the html code.
Most of the text is just typed in English (or other language)
words. The format commands in html are indicated by the
inequality symbols, < and >. The forward slash
/ in a command means that's where that command ends. A
few of the basic commands are
<ul>...</ul> -- produces a bulleted list
<ol>...</ol> -- produces a numbered list
<ol type="A">...</ol> -- produces a lettered list with
A, B, C, ...
<li>...</li> -- the elements in the list
<font size="4">...</font> -- produces a fairly large
font; change the number for other sizes
<br> -- makes the text go on to the next line with a blank
line between
</br> -- makes the text go on to the next line without a blank
line between
<hr> -- produces a horizontal line across the page
You can experiment with these few commands by writing something in
the Source part of BLUE GRIFFON and then click on Wysiwyg to see
what it looks like. You don't need very many commands to start
with. Here are the URL's of some html lists of commands and
tutorials.
http://www.bios.niu.edu/johns/bioinform/htmlcom.html
-- Basic commands with examples
http://www.transaction.net/web/tutor/cmdtable.html
-- Purpose and Placement of html Commands
http://www.htmlcodetutorial.com/quicklist.html
-- html QuickList
http://www.htmlgoodies.com/beyond/reference/article.php/3472981/All-HTML-Commands.htm
-- html Goodies tutorials and lists
http://html.net/tutorials/css/
-- Tutorials for html and CSS
http://learn.shayhowe.com/html-css/
-- Learning to code html and CSS
URL's to other html pages can be included by inserting hyperlinks
into phrases. Here's an example.
To go to the UVTAGG
webpage click on http://uvtagg.org
.
This makes it so that clicking on the hyperlink takes you to the
other website. BLUE GRIFFON generates the hypertext html code
for you by you highlighting the phrase you want to become a link,
right-clicking on it to open a menu, selecting Insert Hyperlink, and
entering the target URL in the popup window. If you have saved
the target URL to the clipboard, it will already be in the proper
box there. If you haven't already saved it to the clipboard,
you can type it in or edit what's there already. This is
exactly the same way you include links in PowerPoint presentations,
by highlighting the text and right-clicking. Here is what the
html code looks like for this, but you don't have to know any of
this since BLUE GRIFFON does it for you.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;
charset=windows-1252" http-equiv="content-type">
<title></title>
<meta content="DRS" name="author">
</head>
<body>
To go to the UVTAGG webpage click on
<a
href="http://uvtagg.org/">http://uvtagg.org</a> .
</body>
</html>
BACKGROUND AND FONT COLORS AND HYPERLINKS
BLUE GRIFFON allows you to change the text and background colors for
your webpage by highlighting the text you want to recolor, or the
entire page, and clicking on the color buttons in the middle near
the top. You can include links to pdf's and some other types
of files by including the URL's this way. All you have to know
is the path to where the pdf is stored online, e.g.
http://uvtagg.org/classes/dons/dons-evernote-2013-09-09-onepagesummary.pdf
and enter that as a hyperlink for the text.
There are ways to make all links relative which means that it
already knows the overall path to get to where the added files are
and you don't need to give it the full absolute reference. I
find it convenient in editing to use absolute (full) URL's so I can
check it before uploading it to the website. To test my work
and see how it will look in a browser I click on the Globe at the
top right of BLUE GRIFFON. That opens the webpage on my own
computer in the browser that I have specified as the default browser
in BLUE GRIFFON and I can check how it looks, see if the links work,
etc. This is all before I upload it to my webpage on the
UVTAGG website.
COMMENTS AND OBSERVATIONS
There are many other things you can do with html, including showing
images by specifying where you want them on the page and where the
image is located, showing videos, playing audio, using CSS to format
so it can be changed on all pages with just changing the CSS, etc.,
but we won't discuss any of that today.
By placing a webpage online somewhere without having it linked to a
"visible" website, i.e., one that is findable with a search engine
such as Google, you can have information online that is private, but
can be used in classes, etc. You, or anyone else, can only get
to it if they know the URL. I frequently use this for Church
classes where there are examples with personal information of people
in the class and I don't want it to be available beyond the class
members. Such webpages are not findable by Google, DuckDuckGo,
or other search engines. An example of this was my "Helps For
Senior Missionaries in the England London Mission" which I posted
privately on the Hyde Park FHC webpage and gave the URL to all the
senior missionaries that were called there. Of course, that
was all deleted when they changed the website after we left the
Mission, but, fortunately, I still had a copy of the original file
on my computer at home to send to other recently called senior
missionaries there.
By placing notes and articles online it is easy to update them the
next time you teach that class and people always have access to the
latest version. I have found that many websites change between
the times that I teach a given class, so I update the notes to add
the latest information. As an example, these Freeware Corner
notes are printed in our monthly TAGGology and are "fixed" there,
but I can change and update them in the online versions on my
website.
I hope this has given you some ideas that will help with your own
family history and data. Gerhard Ruf, our UVTAGG President,
first taught me how to use html many years ago and it has been very
helpful ever since. Thanks, Gerhard.
Return to Don's
Freeware Corner Page or Don's
Family History Class Notes Page .