The FTDNA textboxes have a capable editor allowing simple modifications without any knowledge of web design or HTML (HyperText Markup Language), the programming language of the web.  However, knowledge of some HTML basics can allow a project admin to significantly enhance their project's web site on the FTDNA server.  And, of course, if an admin hosts a project on their own web site, any increase in web skills will allow improvement of that site, too.  So, I will be gradually adding sections to this web page describing various things that can be done at your GAP to improve your project web site.

These descriptions are modifications of messages originally posted to the Y-DNA-PROJECTS mailing list, which Y-DNA project administrators and members are most welcome to join, whether the project is based at FTDNA, or not, and whether the individual was tested at FTDNA,  elsewhere, or at all.

There are basically two kinds of HTML editors, ones that are WYSIWYG and ones that are not.  WYSIWYG is the acronym for "What You See Is What You Get."  With a WYSIWYG editor, the codes are automatically inserted behind the scenes by the software, so as you work on the page, it looks to you as it will look when viewed online with a web browser.  With a non-WYSIWYG editor, you see all the tags and coding as you enter them — and the page looks nothing like it will when viewed online with a browser.  There are advantages to both, and I have and use both on my personal web site.  When entering text in the textboxes at your GAP, you will be using the editor supplied by FTDNA.

[Contents]

When entering text at your GAP, it may appear that you are using a simple ASCII text editor, like Windows Notepad, but in fact, you are using an HTML editor.  The FTDNA editor allows those with knowledge of HTML to make use of it entering code, but it also allows simple text entry for users with no knowledge of HTML programming, and it does so by inserting hidden codes, which makes it a "semi-WYSIWYG" editor.  We can view this hidden code only by going to our project page online and doing a View > Source with our browser. 

The code the FTDNA editor is inserting is a hidden line break tag every time you hit Enter.  This behavior has consequences for some other HTML tags, so it's important to be aware of it.

[Contents]

HTML programming is accomplished partly by the use of "tags," which are programming commands enclosed in angle brackets.  While some HTML commands can simply be issued with a single <tagname>, many tags must be both opened <tagname> and closed </tagname>.  Failure to close an open tag often results in unpredictable behavior and may be the most common reason for a web page "breaking."  When applying multiple tags to the same object, be certain to "nest" the tags.  For an example of nested tags, see the Font Styles section.

[Contents]

If you go to your project page at FTDNA and do a View > Source with your browser, you are going to see all the code for the entire page, which is quite complicated.  Just ignore the intial text and, depending on which page you are viewing, scroll down (or do a Find) to the heading of the section you seek.  For example, if you are looking at the home page and you want to view the text in the "Project Background" section, do a Find on that heading.  Your browser should take you to lines of code that look like this:

The Source Code page is where you can see how the FTDNA editor may have modified or expanded upon what you have entered, which will likely be essential for uncovering the reason something you've entered doesn't turn out to display as expected, in other words, for debugging the page.

[Contents]

One of the easiest things to do on your site is to enhance the text with style tags.  Each tag opened must then be closed, so it affects only the included text.

If you want to apply multiple styles to the same text, be certain to "nest" the tags.  In other words...

[Contents]

The paragraph tag <p> is equivalent to CR-LF-LF, that is, to one carriage return (moving your cursor back to the left margin) and two line feeds (dropping you down two rows).  Most web design software automatically inserts a <p> tag when you hit the Enter key (whether you actually see the <p> tag depends on whether or not you're using a WYSIWYG editor).  As long as you keep typing text without hitting Enter again, the text will be single-spaced and word-wrapped, as is this paragraph here.  As soon as you hit Enter again, another <p> tag is inserted which causes a browser viewing the page to skip a line and start a new paragraph. 

The FTDNA editor does not enter a <p> tag when you hit Enter, it enters a line break tag.  If you hit the Enter key twice in succession, it enters two line break tags, not a <p> tag.

Unless you are using a kind of web design called "Cascading Style Sheets" (CSS), you do not need to follow opening paragraph tags <p> with closing ones </p>.  You will note that the FTDNA web site does use CSS and that your textboxes are immediately preceded by a <p> and followed by a </p>.  So far, I have used unclosed <p> tags in my GAP textboxes without any unintended consequences.

[Contents]

The line break tag <br> is equivalent to CR-LF, that is, to one carriage return and one line feed.  Some software will insert a <br> tag if you type Ctrl-Enter; some software uses Shift-Enter.  As mentioned above, the FTDNA editor inserts a <br> tag every time you hit Enter, which is the reason you see all those <br> tags lined up against the left margin when you View your Source Code with your browser.

The <br> tag is important for typing lists that you want single-spaced.  Otherwise, if your software is inserting a <p> tag every time you hit Enter, which is the behavior of most HTML editors, your list will be double-spaced.  The FTDNA editor does not create this problem because it's already entering a <br> tag, not a <p> tag.

[Contents]

...

In attempting to debug someone else's page, my HTML validator (HomeSite) considers this condition an error because you're not supposed to put a <table> tag between <p> and </p>.  The table should be in-between paragraphs, not within one: