Web Publishing for Genealogy

Creating the Pages

Home
LINKS to Web site mentioned in the text
REVIEWS
Where and how to ORDER
Finding Genealogy on the Internet The Genealogist's Internet
Valid HTML 4.01!
Valid CSS!

Basic Page Design: Organizing Your Page

While you could offer on your Web pages lumps of undifferentiated text, this is not very considerate to your readers: they will find it hard to read, and it will not be easy for them to see quickly what the page contains. html provides three general ways of giving the content of your page an obvious structure:

  • paragraphs
  • headings
  • rules

Paragraphs

The paragraph tags <P> and </P> enclose paragraphs. When a browser comes to a new paragraph it will start a new line, and will also leave an extra blank line at the end before the following paragraph.

The browser will automatically word-wrap the text, and it will adapt the line length to the width of the browser window, so that the reader will not miss any text. Long paragraphs can be very hard to read on-screen - 6 to 10 lines at full screen widthis probably enough for one paragraph.

Headings

There are 6 levels of heading available, with 1 being the most important, 6 the least important. Each heading is indicated by a pair of tags enclosing the text of the heading, and the browser will automatically put each heading on a line by itself, separate from any paragraph text. The tags are <H1>…</H1> to <H6>…</H6>.

These tags are best used in a strictly hierarchical manner, <H1> for the main heading at the top of the page, <H2> for the first level of sub-heading, etc. A typical beginner's mistake is to choose which ever level of heading looks best on your browser, forgetting that on another browser, with different user options, it may look significantly larger or smaller.

Browsers will automatically end a paragraph before a heading and start a new one after, so you do not need to use the <P> tag with headings.

Rules

It is often useful to break up the text into sections, and HTML provides a Horizontal Rule (the tag is <HR>) which can be used for this purpose. You can also specify the thickness of the rule, the width, and the alignment. This is done by inserting additional information (called attributes into the tag after the identifier (almost all tags can have attributes). You can see an example of this in Fig. 13, but you'll need to consult reference material for full details.

<HTML>
<HEAD>
<TITLE>Nosnibor</TITLE>
</HEAD>
<BODY>
<H1>Nosnibor One Name Study</H1>
<HR>
<H2>The English Nosnibors</H2>
<p>The origins of the Nosnibor surname...</p>
<P>In the Middle Ages...</p>
<H2>The Irish Nosnibors</H2>
<p>The earliest mention... </P>
<HR SIZE=“10” WIDTH=“50%” ALIGN=“CENTER”>
<p>You can e-mail me at j.nosnibor@cix.compulink.co.uk</p>
</P></BODY></HEAD>

View the sample page

--> NEXT: Character Formatting

5. Creating the Pages