HTML and Wikitext - Lesson Six

From FamilySearch Wiki
Jump to: navigation, search

Lesson One > Lesson Two > Lesson Three > Lesson Four > Lesson Five > HTML and Wikitext - Lesson Six > Lesson Seven > Lesson Eight

Attributes go inside Element tags

This is the HTML code

FamilySearch Wiki

What you will learn in this lesson

  • Review of Headers
  • How to create Templates
  • How to create Sidebars
  • How to create Breadcrumb trails
  • How to create References


Here are the different header sizes:

Header One

Header Two

Header Three

Header Four

Header Five

Header Six

Uses of the various sizes

  • h1 is reserved for titles of articles. Do not use as headers in articles. Occasionally, you will see h1 headers used as headings for announcements, but that is not what they should be used for.
  • h2 is used as primary headers. However they will not wrap around images or other objects that have been floated. Suggest you use h3 headers.
  • h3 is used for subsections under h2. H3 headers will wrap. Suggest you use h3 as your primary headers instead of h2 headers because of the wrapping issue. However this will not be a problem with the wider format.
  • h4 is used for subsections under h3.
  • h5 is used for subsections under h4. Rarely used.
  • h6 is used for subsection under h4. Again rarely used.
  • Keep in mind that when you want to add sub headers that there should be a least two. A header with one sub header is poor formatting.

Here are the codes for HTML and Wikitext for headers:

HTML Wikitext

<h1>Header One</h1>
<h2>Header Two</h2>
<h3>Header Three</h3>
<h4>Header Four</h4>
<h5>Header Five</h5>
<h6>Header Six</h6>

=Header One=
==Header Two==
===Header Three===
====Header Four====
=====Header Five=====
======Header Six======


  • Please Note: Using HTML coding for headers DOES NOT create anchors to be use for links. If you want to be sure that you can link to a specific section of an article, use wikitext coding or the = signs for headers.


What is a template?

  • A container of such things as text, images, etc that can be embedded anywhere on a page.
  • It is material that you want to put on many pages without having to type it in or copy and paste it.
  • Whatever is in the template, it will be the same in whatever article you embed it.
  • Here is an example of an image template: {{CommunityTree}}
A FamilySearch Community Tree is available for this place.
  • This attribute of not changing regardless of where the template is placed is very useful if you want to create a number of articles using the same layout or appearance.

How to create a templates

  • It is created just like an ordinary article, but to save it as a template you type it like so:
Template:Template name

How to embed a template

  • To embed a template, you type the following code where you want the template to appear:
{{Template name}}

Editing templates


  • IMPORTANT: when you edit a template, any changes you make to it will show up in the all the copies of the template, no matter where it is embedded.
  • If you think you might want to edit a template in a particular article but you don't want the changes show up in the template in the other articles where it is embedded, use the follow code to embed the template:

{{subst:Template name}}
  • The word "subst" turn the template into a copy that can be edited without affecting the template in other articles.


  • To find what templates are on a page, click on "Edit This Page" and check below the edit box. You will see a complete list of Templates on the page.

Creating Whole Page Templates

If you have a page that is a format you want to use over and over again, create a template. Obviously you will be making changes to these pages so you save them with the subst method.

Useful templates

  • {{PAGENAME}} allows you to place the name of an article you are editing without having to type it. Example: You can repeat the name of this article using the {{PAGENAME}} template without having to type it.
  • For more information on templates see; Help:Templates


What is a sidebar?

  • A sidebar is a template.
  • It behaves just like a template.
  • Normally a narrow container with links, announcements, etc to appear on one side of an article.
  • The sidebar on this page is, of course, an example of a sidebar.
  • It is designed to be placed in a number of other articles as any template was created for.
  • It is usually information you want to isolate from the rest of the material on the page just like a regular template.
  • It can be placed anywhere on a page.
  • It can be text, images, tables, etc.
  • Sidebars are often used for announcements. Because it is isolated from the rest of the article, you can update the sidebar and it will be updated on all the pages on which it appears. In this way you do not have to go to each page the sidebar is on to update it. This is one of the real reasons the sidebar was created in the first place.
  • It is helpful to use the word sidebar in naming the sidebar, for example: Template:Sidebar Name.
  • If you want the sidebar to be on one side or the other in the article, use a float attribute.
  • It will appear wherever you place it.
  • Normally, sidebars are narrow objects, about 150px or less in width, to hold lists and/or links.
  • You might think of adding a border and/ or very light color as a background.

How is a sidebar created

  • It is created just like any template.
  • For the most part sidebars are tables with any number of rows but only one cell in each row as follows:

<td>News and Events</td>
<td>{{{News and Events}}}</td>
*Link One
*Link Two
*Link Three</td>

| News and Events

| {{{News and Events}}}

*Link One
*Link Two
*Link Three


  • NOTICE the {{{News and Events}}} parameter. It is in a row by itself.

How is a sidebar placed on a page

  • It is placed on the page with this coding:
{{name of sidebar

| News and Events=


  • It can be placed anywhere.
  • NOTICE the pipe and "News and Events" with an equal sign. It is after the equal sign you type in a very short announcement.


  • Keep entries short. The sidebar is normally only about 150px wide so lengthy items take up a lot or room and force the links further down the sidebar if your entry is at the top of the sidebar.

Infoboxes and Navboxes

These are also templates, special use templates.

  • Infoboxes are usually in the upper right hand corner of an article about 200 pixels wide giving information is a list form. They are usually about an organization giving information such as officers, address, contact information, etc. For details on how to create them see: How to Create an Infobox.
  • Navboxes are usually at the bottom of the article and cover the full width of the page. They usually contain links as apposed to information. They might contain links to various topics and to subtopics, such as links to county pages from a state page. For detail on how to create them see: Navboxes.


Breadcrumbs are trails at the top of a page which show the patron the main topic from where the article came from.

  • They are basically internal links separated by an arrows.
  • Here is the coding for the breadcrumb at the top of this lesson:

[[HTML and Wikitext - Lesson One| Lesson 1]] > [[HTML and Wikitext - Lesson Two|Lesson 2]] > [[HTML and Wikitext - Lesson Three|Lesson 3]] > [[HTML and Wikitext - Lesson Four|Lesson 4]] > [[HTML and Wikitext - Lesson Five|Lesson 5]] > [[{{PAGENAME}}]]

  • Notice the a > was used to separate each internal link. There are some custom arrows in the image data base you can use as well.
  • If you are wondering about the [[{{PAGENAME}}]], it is a small template which automatically puts the name of the article in the spot this template is embedded which in this case is in the breadcrumb at the top of the article in black font. It saves a little typing and also in making a mistake in typing if it is a long title.
  • For more information on breadcrumbs see: Breadcrumb Trails.


References are nothing more than footnotes.

  • The coding <ref>Reference</ref> is installed just after the word you want to put a footnote on like so:

Who said; "No other success can compensate for failure in the home."<ref>Quoted from J. E> McCullough, Home: The Savior of Civilization [1924], 42; Conference Report Apr. 1935, 116.</ref>

  • The sentence with the ref will look like so in the article:

Who said; "No other success can compensate for failure in the home."[1]

  • Notice a superscript number inside brackets.
  • Click on the number and you will be taken to the reference at the bottom of the page or wherever you have placed the footnotes.
  • At the bottom of the page or wherever you want the footnotes to appear you install this coding:


  • Although footnotes are usually for references to where quotes are found or other material that can be searched, they can be a great place to place additional information about the topic at hand. If it is additional details that some might be interested in while others would not, a footnote is a great place to put additional comments or details. See How to Create an Infobox#Footnotes.

What you have learned in this lesson

  • Review of Headers
  • How to create Templates
  • How to create Sidebars
  • Arrange large amount of text into Columns without tables
  • How to create Breadcrumb trails
  • How to create References


Problem One - Lesson 6

  • Use the nested list from previous lesson and create the same with headers. The first set of list as h3 headers, the second set as h4 headers and the third set as h5 headers.

Problem Two - Lesson 6

  • Create a sidebar in your sandbox that is an unordered list of five of the countries or counties your ancestors came from and a link to the article about these countries or counties.
  • It can only be 150px wide.
  • It has to have a black border 1px wide.
  • It has to have a background color, you pick.

Problem Three - Lesson 6

  • Create template saying that you have edited this page. An example: "John Doe edited this page. If you don't like it see Robin Foster" or something like that.
  • Put a boarder around it.
  • Give it a background color.
  • Install float:right in the template.

On to Lesson 7

  1. Quoted from J. E&gt; McCullough, Home: The Savior of Civilization [1924}, 42; Conference Report Apr. 1935, 116.