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 &nbsp;<a href="http://uvtagg.org/">http://uvtagg.org</a>&nbsp;.
   
  </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 .