CroftSoft / Library / Tutorials

Family Web and XSLT

David Wallace Croft



This tutorial teaches you how to create genealogy webpages using XML and XSLT. The organization of the webpages is described as a "family web". A family web differs from a family tree in that each webpage is dedicated to a single individual with hyperlinks to the webpages of the parents and children. Webmasters who wish to maintain their websites using XSLT will also find this tutorial useful.


Here is an example family web webpage for an individual:

Here is the XML data file that was used as the source. Since the XML file has an XSLT stylesheet instruction in it, your browser will convert it to XHTML. In order for you to see the XML data in its orginal form, you will need to select the View/Source option in your browser:

Please note that I have placed the XML source file (index.xml) and the XHTML output file (index.html) in a subdirectory (david_wallace_croft/). I gave the subdirectory the same name as the individual (David Wallace Croft) using all lowercase letters and underscores for spaces.

Example And Template

Here is a family web webpage and XML data file for a hypothetical individual named Example And Template:

The XML data file (index.xml) for Example And Template has example data for all of the data fields currently supported by the XSLT transformation code. To create your own family web webpage for an individual in your family, first create the subdirectory then copy the example and template index.xml file into it. Fill in the data fields where you have data using a plain text editor and then delete the rest.


At this point you should have a subdirectory with one data file in it, index.xml. To create the index.html file, you will need to apply the XSLT transform code. Here is the code I use:

I am not going to explain the XSLT code except for its reference to an XHTML file, familyweb.html. Whereas some of the look and feel of the transform is coded as XHTML embedded in the XSLT code, I have placed the majority of the XHTML code in the external file so that it can be customized separately. I recommend that you modify the XHTML file so that it adds your contact information to each webpage so that other genealogy researchers can reach you: familyweb.html


I like to use the build tool Ant to run the transform. Here is the Ant build file that I use:

Please note that the Ant build code will transform all index.xml files in subdirectories of the base directory but it will not transform the index.xml file in the base directory itself. This is because I assume you will want to reserve the base directory for a master index file with links to the subdirectories of each individual in your family web. Here is an example of what a master index file might look like:


I have created a zip file containing the examples and code. I recommend that you maintain the directory structure in the zip file, i.e., a subdirectory for each individual:


CroftSoft Web

Creative Commons License
© 2005 CroftSoft Inc.
You may copy this webpage under the terms of the
Creative Commons Attribution License.