By David Hawgood, 26 Cloister Road, Acton, London W3 0DE. email hawgood@one-name.org
I described my 1881 census correlation in an article in the PUG newsletter June 1999 (p8-14). I have been wanting to put the results on my web site. I had various possibilities - putting a database on the web site, transferring GEDCOM into a genealogy package like Family Origins that has GEDCOM output available. In the event I am doing a direct transfer from Pedigree output "printed" using file document, using Pedigree pictures to put HTML codes into this output, and adding the result into the HTML source of web pages.
I put a draft of this article on a web page and invited comment through the PUG email list. I made some changes as a result. I have put notes at the end of the article about different methods suggested by Murray Kennedy using printer drivers to provide an HTML header and convert line drawing characters, by Martin Hagger using GED2HTML, and by David Guillaume who developed a method similar to mine (and told the PUG list about it over 2 years ago).
My Pedigree database is very non-standard so the details of the procedure won't be applicable to other people's systems. But the methods are generally applicable. To use it yourself you will have to learn how to edit HTML source, and how to write Pedigree picture scripts. What I am doing is very simple HTML, just links, named targets, and tables. But I do all the manipulation on the HTML source, either using a text editor "Textpad" or else using Front Page Express and choosing "HTML" from the "View" menu. (And that's Front Page Express - which is free with Internet Explorer and generates simple and efficient HTML - not Front Page, which is not free and generates complex and inefficient HTML.)
The result is at www.hawgood.co.uk/ons/ . I am still working on these pages. There are pages with Hawgood births, marriages and deaths extracted from GRO indexes; pages with households containing Hawgoods from the 1881 UK census index; and pages with full detail of individuals from many sources, showing how the individuals link into families.
I have allocated numbers from 1000 up to individuals, and put this in the "refnum" field. I have a person record for each document about a person, then a record with all the pieces of information for that person with links to other family members. This allows me to progress from unlinked and unidentified records to linked families. I have given the source records a "call number" which is the number of the document within my own records at home. In fact it is usually the same as the source rin in my Pedigree database, but I wanted to make the numbers stay the same if I split or combine databases in future.
I will precede each example with "Paragraph on web page" or "HTML source" or "Pedigree picture script" or other similar captions to make it clear what you are looking at.
A link may lead to a directory (giving the default page within that directory), to a particular page, or to a target location within a page. www.hawgood.co.uk/ons/ links to the directory for my one name study, and gives the contents page within it. The web page for the Hawgood family of Rutland and Derby is at www.hawgood.co.uk/ons/f1212.htm- they are not my relatives so far as I know, but they are part of my one-name study. The page includes information about Julia Davies Hawgood, whose reference number is 1122. The link direct to the part of the page for her is www.hawgood.co.uk/ons/f1212.htm#1122 .
A simplified version of the information about her is:
Paragraph on web page
Julia Davies HAWGOOD b.24 Dec 1877 at Victoria Rd, East Barnet,
Herts (source 131)
The link accessed if you click on the underlined (source 131) is sources.htm#131 - the target or bookmark named 131 on the web page sources.htm in the same directory. To link to this from a webpage on another site I would need the full web address http://www.hawgood.co.uk/ons/sources.htm#131. Her birth certificate is number 131 of my Pedigree source records.
To work out how to generate this from Pedigree picture scripts, first "view source" or "view HTML" in your browser or web page publishing package. For the web page paragraph above this gives:
HTML source <p>Julia Davies HAWGOOD b.24 Dec 1877 at Victoria Rd, East Barnet, Herts <a href="sources.htm#131"> (source 131) </a> </p>
<p> at the beginning and </p> at the end are HTML tags for a paragraph. <a shows the beginning of an anchor - which can be a link or the name of a target. href= shows it is a link - an HTML reference. sources.htm is the page name, 131 is the target name within the page, the # shows it is a target name not a page name. Note that the page name and target name together are enclosed in double quotes. The closing angle bracket > shows the end of the hidden part of the anchor, which doesn't appear on the screen but is acted on when you click on the link. The next part between > and </a> is what is actually displayed - usually underlined to show it is an active link. In this case it is: (source 131).
The quotes around the link address give me a problem in generating HTML from a Pedigree picture as I can't generate these double quotes. What I do is to put a couple of characters which are unlikely to appear in data - I have chosen two backward slashes, \\. I do a "file document" in Pedigree, open that file in a text editor, and do a search and replace so every occurrence of \\ becomes a double quote ". (There are other approaches to this generation of double quotes, see end of article for a note about printer drivers. HTML recognises pairs of similar single quotes as being the same as pairs of double quotes, but I found various practical problems using single quotes, including the generation of spaces by the Pedigree picture script processor).
The simplest version of the picture to generate that line on a web page would be:
Pedigree picture script "<p>" forenames SURNAME "b." birth.date [ "at" birth.place ] "<a href=\\sources.htm#" birth.source.callnumber "\\> (source" birth.source.callnumber ")</a></p>"
For those not familiar with Pedigree picture scripts, or wanting a reminder:
Continuing the mini-tutorial, I have shown a picture script for birth date, place and source - but I will also need similar picture scripts for christening, marriage, death and burial. This is where the named Pedigree picture scripts within the "event" group come in. In the FAMILIES database there are pictures "brief", "normal" and "detailed" for the "event" group. In the database I was starting from (much modified by me over the years), the "detail" picture was as follows:
Pedigree picture script "detail" for an event group date ["at" place] notes ["source:" source]
I change this to have an HTML source link, and create an event picture, in fact called htmfam because I call it from a descendants chart. (I should have called it htmdetail - sorry about that!).
Pedigree picture script htmfam for an event group date [ "at" place ] notes [ "<a href=\\sources.htm#" source.callnumber "\\> (source " source.callnumber ")</a>" ]
I also use standard named Pedigree pictures, for example name() rather than forenames SURNAME.
I will now add more to the same paragraph on the web page. At the beginning is my reference number for the person, the Pedigree refnum field. I want to be able to link to this place on the page from elsewhere on my web site, so that I link direct to the person rather than just the page. To do this I have to name a target - in Front Page Express the process is called "edit bookmark".
Paragraph on web page
1122 Julia Davies HAWGOOD b. 24 Dec 1877 at
Victoria Rd, East Barnet, Herts (source
131 )
HTML of paragraph <p> <a name="1122"> 1122 </a>Julia Davies HAWGOOD b. 24 Dec 1877 at Victoria Rd, East Barnet, Herts <a href="sources.htm#131"> (source 131) </a></p>
HTML to name a target (part of the paragraph above) <a name="1122"> 1122 </a>
Pedigree picture script to generate this: (\\ is replaced later by double quote ") "<a name=\\" refnum "\\>" refnum "</a>"
In the line above the first refnum provides the name of the target, the second provides the visible number on the web page. Note that the target does not appear different from ordinary text - it is not an underlined and coloured link. You will often find when browsing that the system takes you to a particular place in a page - the named target is the mechanism for this.
This section is a summary of the steps needed in my procedure to get a web page paragraph from a Pedigree database to a web page.
In Pedigree:
In text editor:
In web page editor:
Some people just use a text editor to create or modify web pages - if you know how to do that, I am sure you can see how to use my system!
There are three approaches to laying out information in set places on web pages - formatted (monospaced) text, HTML tables, and frames. (Note that just using tab characters does not work in HTML, and multiple space characters are ignored in normal proportional-spaced text). I won't describe frames - I have not used them. The one I have used myself is HTML tables, and I will describe the (fairly complex) procedure later in this article. But first here is the relatively simple way to turn any Pedigree output into formatted text on a web page. (I have completely ignored all mention of line drawing characters - but see the section at the end of the article about using "print to file" with modified printer drivers.)
As an example, here is a little table from Pedigree - entries from the GRO index of births.
Formatted (monospaced) text on web page Date Forenames Place Sep 1877 Charles William Kensington Mar 1878 Julia Danes Barnet
Here is the HTML source for that as formatted text on a web page:
HTML source <pre>Date Forenames Place Sep 1877 Charles William Kensington Mar 1878 Julia Danes Barnet </pre>
All that is necessary to turn a Pedigree report or tree or table into formatted text on the web page is to put <pre> at the beginning of the title of the report or tree or table. (The <pre> does not need any quotes around it). I turn off lines, so there are no line drawing characters in the Pedigree output. For a Pedigree table, an alternative is to put the tag <pre> at the start of the first column title. Generate the report, output using "file document", open in a text editor and copy from <pre> onwards to Windows clipboard (e.g. with Control and C). Open a page in the web page editor, "view source", put cursor after a </p> tag, close the "view source" and save the file. The steps in that last sentence are exacly the same as those described previously. Strictly the formatted text should start with <pre> and finish with </pre> but I find that my web page editors assume the ending tag </pre>. You might have to type in </pre> at the end of the text if your web page editor demands it.
There are some possible extensions to this method, to reduce the font size for example. The simplest example is to set the smallest font size by putting <pre><font size="1"> at the beginning of the title. Don't forget that people looking at your web page may have quite different settings on their browsers from yours. It may be better to suggest that they view using a small font size, or print using landscape instead of portrait.
Note that this method does not use Pedigree picture scripts at all. You just change the report title - usually f6 from the formatting screen.
The method I have used myself to produce columnar output from Pedigree onto web pages is the generation of an HTML table. This is more complicated, more flexible, and is more efficient if the lengths of the field contents varies substantially. I will start with an example to show the principles. Below are a table on a web page, the HTML source for a complete table, the source for one row of the table, and the Pedigree picture script to produce one row for each record in the current Pedigree list. The method I use is to generate a web page table using Front Page Express, choosing appropriate headings and widths for the columns - just one row is enough, the table expands when you insert the data into the HTML source.
Table on web page:
| Date | Forenames | Place |
| Sep 1877 | Charles William | Kensington |
| Mar 1878 | Julia Danes | Barnet |
HTML source for the table <table border="0" cellpadding="2" cellspacing="0" width="100%"> <tr> <td valign="top" width="18%">Date</td> <td valign="top" width="15%">Forenames </td> <td valign="top" width="20%">Place</td> </tr> <tr> <td>Sep 1877 </td> <td>Charles William </td> <td>Kensington </td> </tr> <tr> <td>Mar 1878 </td> <td>Julia Danes </td> <td>Barnet </td> </tr> </table>
HTML source for one row of a table <tr> <td>Sep 1877 </td> <td>Charles William </td> <td>Kensington </td> </tr>
Pedigree report to HTML table
The simplest way is to use a Pedigree report, putting one column of an HTML table into each field of a Pedigree report. I will start with a reminder of a Pedigree report definition screen. I have put the report background, the fixed text, in bold. The report fields are rectanglar areas, given letters A B C D etc as you define them. So here is part of a report definition screen where the background provides field captions:
Pedigree report definition, background and fields
NAME AAAAAAAAAAAAAAAAAAAAAAAAAAAA
FATHER BBBBBBBBBBBBBBBBBBBBBBBBBBBB
MOTHER CCCCCCCCCCCCCCCCCCCCCCCCCCCC
SPOUSES DDDDDDDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDDDDDDD
What I have done is to use the background of the Pedigree report definition to generate my HTML tags.
Pedigree report definition, background and fields <tr><td> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA </td><td>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB </td><td>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC </td></tr>
Field A has picture birth.date, field B has picture forenames, field C has picture birth.place.
The example above should work with any web page editor. It can be made simpler with a web editor such as Front Page Express that tries to supply the second tag of a pair. With this, if I have a <td> to start a cell of a table, then some text, then another <td> to start another cell of the table, the system supplies the missing </td>. (But be very careful if doing this, it is probably not good practice, and might go wrong on a new version of the web page editor, or a different editor). The report generation screen then looks like this:
Pedigree report definition, background and fields <tr><td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA <td>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB <td>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
Pedigree table to HTML table
When I started developing web page tables from Pedigree output, I used a Pedigree table. I found that I had to make a Pedigree table with one wide column, then make a picture containing all the data fields I wanted in the eventual HTML table. (This is also the method developed two years before by David Guillaume, see note at end of article).
Pedigree picture script to generate one row of an HTML
table
"<tr><td>" birth.date
"</td><td>" forenames
"</td><td>" birth.place
"</td></tr>"
I think in retrospect that the "Pedigree report" method is better than the "Pedigree table" method. But the Pedigree table method is what I have used in practice so far - I didn't think of the report method until I was writing this article.
Pedigree output to HTML table - procedure
Whether the Pedigree output is from a Pedigree report or a Pedigree table, the method for putting it into an HTML table is similar to that for putting paragraphs into a web page. But now we are putting rows into a table. Make a small table using a web page editor; it must have the correct number of columns. You can adjust the width of columns now, or later on when there is data in the table. Make a Pedigree table with just one wide column; the picture script for that column is the one to generate one complete row of an HTML table. As for the previous examples, generate the table, output by File Document, and open the file in a text editor. The section copied into the Windows clip-board must be a number of complete rows - it must start with <tr> and finish with </tr>. In the web page editor with your small table, "view source", put the cursor after a </tr> tag, and paste in from the Windows clip-board using Control and V. Close the "view source" and you should have a table with the extra rows in it.
For the descriptions of methods of producing an HTML table I used a three column table, with just text in the table. What I use in practice is a six or seven column table. Some fields are targets, links or both. So the Pedigree picture script becomes quite complex. The method I describe for this starts from a Pedigree table.
My aim is to have web pages with lists of Hawgood births, marriages and deaths from GRO indexes. I will describe the list of births: the others are similar. Where possible I want to link the entry to person's details on the family web page, using the four digit reference number I have described above.
Where I have a certificate as well as a GRO reference I want to include the precise date and more detail on the place in the GRO index table. In the Pedigree database a person for whom I have a GRO index reference and a certificate has the relevant group repeated - so I have a birth entry with the last month and the year of the quarter in which the birth was registered, e.g. Mar 1878, and the group repeated with the actual date of birth, e.g. 24 Dec 1877. In the Pedigree picture script I put a separator to make these repeats easy to spot - I use a curly bracket { with a space after it - but I do a lot of hand editing to move the birth certificate data into a separate row. I insert an empty row following the one with repeating data, use "merge cells" on my web page editor, then move the information for the birth certificate down into the merged cell. For a GRO index entry the birth.notes field contains the volume and page reference; if there are other relevant notes from the birth certificate I copy them into the merged cell in the row below. The birth source for all GRO index entries is the same (in fact source 2) so I don't want those in each row. But if there is a certificate that has a separate source, I want a link to that source. So I have a picture script to give a link to the web page of sources if the source number is greater than 2. All of this means I end up with a complicated picture script, and a fair amount of hand editing. One reason I have to do hand editing is that my data entry is not consistent enough to mechanise the process of dealing with birth certificate information.
Table on web page:
| link to family | Quarter | Forenames (surname is Hawgood) | Registration District | Ref or note | Mother's maiden name |
| 1031 | Sep 1877 | Charles William | Kensington | 1a 87 | |
| 1122 | Mar 1878 | Julia Danes | Barnet | 3a 174 | |
| 24 Dec 1877 at Victoria Rd, East Barnet, Herts, cert 131 ; name Julia Davies Hawgood | Dixon | ||||
HTML source of table
<table border="0" cellpadding="2"
cellspacing="0" width="100%">
<tr>
<td valign="top" width="5%">link to
family</td>
<td valign="top"
width="18%">Quarter</td>
<td valign="top" width="15%">Forenames
(surname is
Hawgood)</td>
<td valign="top"
width="20%">Registration District</td>
<td valign="top" width="8%">Ref or
note</td>
<td valign="top" width="5%">Mother's
maiden name</td>
</tr>
<tr>
<td><a href="f1031.htm#1031"
name="1031">1031 </a></td>
<td>Sep 1877 </td>
<td>Charles William </td>
<td>Kensington </td>
<td>1a 87 </td>
<td> </td>
</tr>
<tr>
<td><a href="f1212.htm#1122"
name="1122">1122 </a></td>
<td>Mar 1878 </td>
<td>Julia Danes </td>
<td>Barnet </td>
<td>3a 174 </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="4">24 Dec 1877 at Victoria Rd, East
Barnet, Herts,
<a href="sources.htm#131"> cert 131 </a>;
name
Julia Davies Hawgood</td>
<td>Dixon</td>
</tr>
</table>
Pedigree picture script to generate the HTML for data rows
separator = "{ "
"<tr><td> <a href=\\f.htm#" refnum "\\ name=\\" refnum "\\>" refnum "</a>"
"</td>" "<td>" birth.date "</td><td>" forenames
"</td><td>" birth.place "</td><td>"
if birth.source.rin > 2 then birth.source.type birth.source.callnumber end
birth.notes "</td><td>"
mother.surname "</td></tr>"
Replace \\ by " in a text editor
At present I do one more piece of hand editing. I only decide who goes on a family web page when I come to that particular family. There may be four generations of a small family, there might just be parents and one set of children if several of the children have their own families. So the picture script shown above generates a link to f.htm#1122 initially. I later change this to the relevant family number - in this case it becomes f1212.htm#1122. I could probably have found a better solution to this getting this link to the correct page - maybe I should have a web page with a list of individuals and their links to families.
But I am beginning to stray from describing the principles to describing my rather messy application of them. So I will conclude by hoping that my struggles through this process will help other PUG members.
When I sent a message to the Pugglers in October with a link to a draft of this article, David Guillaume pointed out that he sent a message to PUG-L on 14th February 1998 giving the same method for producing HTML tables from Pedigree output. He created a "Tables" report with one line that had the following Pedigree picture:
"<tr> <td>" forenames SURNAME "</td> <td>" birth.date "</td> <td>" death.date "</td> <td>" If sex=m then Wife(marriages) else Husband(marriages) end "</td> </tr>"
He went on to add links between people, adding the links manually.
Also after reading my draft article, Martin Hagger (PUG-L on 19th Oct 2000) said he had partly used a similar method, in that he used Pedigree output, Front Page Express, and manual editing. But he also used a quite different method. He took GEDCOM output from Pedigree and used Ged2html, a program for converting Gedcom to Web pages. This gave him most of the information on web pages - and he had the advantage over my method of an alphabetic index with links to individual pages, I still have to generate that. From his Ged2html produced pages he then added a lot more information, with tables, links,etc. His web pages are at http://website.lineone.net/~martin.j.a.hagger/index.htm
My technique for putting Pedigree charts onto web pages just uses formatted (mono-spaced) text, and I turn off the lines. Murray Kennedy did some tests a long time ago putting a descendants chart onto a web-page, using a special printer driver html.prn which put in an HTML header and also converted line drawing characters to ! + - symbols (exclamation mark, plus sign and hyphen). I will give Murray's printer driver, his original comments, then a couple of comments that arose later.
Make a printer driver called html.prn using notepad to paste the following:
0 PREPRINT "<HTML><HEAD><TITLE><H2>" 0 EOL "<BR>" LF 0 EOP "<P>" 0 TRANSLATE 156,"#" 0 TRANSLATE $B3, "!" 0 TRANSLATE $B4, "+" 0 TRANSLATE $BF, "+" 0 TRANSLATE $C0, "+" 0 TRANSLATE $C1, "+" 0 TRANSLATE $C2, "+" 0 TRANSLATE $C3, "+" 0 TRANSLATE $C4, "-" 0 TRANSLATE $C5, "+" 0 TRANSLATE $D9, "+" 0 TRANSLATE $DA, "+" 0 TRANSLATE 16,"+" 0 EOF "</HTML>"
GBP sign ASCII 156 becomes #, truncated ASCII 16 becomes +, (avoid >). You can have up to 30 characters in a printer sequence. Pedigree can only use 20 .prn files in a directory, so you may have to move unused .prn files to another directory.
Later comments
Murray suggested that a solution to Pedigree picture scripts not
being able to produce "double quotes" is to use a
symbol unlikely to occur in data like a tilde ~ symbol then use
the printer driver to convert this to double quotes - so add
another translate line:
0 TRANSLATE "~",34
Murray's idea in putting <HEAD><TITLE><H2> in the first line was that the report title generated by Pedigree would become both the page title as seen in search engines and at the top of the browser screen and also would be displayed in large type in the body of the web page. I found this didn't work - using Front Page Express the title was empty, but I did get the large type visible heading. Malcolm Austen commented that it needs </TITLE></HEAD> before an <H2> is allowed - but I think he was putting too many characters into the print sequence.
We really need someone to experiment with the printer driver method of producing web pages - or maybe one of you has done so. If you produce any web pages using this technique, please let me or the PUG list know.
This is an article for Pedigree Users Group Newsletter
Amended by David Hawgood, 19 April 2004 and checked by W3C Validation