Difference between revisions of "HTML and Wikitext - Lesson Six"

From FamilySearch Wiki
Jump to: navigation, search
m (Undo revision 1556965 by Sandralpond (talk))
Line 179: Line 179:
[[HTML and Wikitext - Lesson Seven| On to Lesson 7]]
[[HTML and Wikitext - Lesson Seven| On to Lesson 7]]

Revision as of 17:47, 3 February 2014

Lesson 1 > Lesson 2 > Lesson 3 > Lesson 4 > Lesson 5 > HTML and Wikitext - Lesson Six

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.
  • 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 each article.
  • Whatever is in the template, it will be the same in whatever article you embed the template.
  • 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 of template}}

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 effecting the template in other articles.

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.


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 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.

How is a sidebar created

  • It is just like creating a page, but you add the word "Template:" in front of the name of the article like so: 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 very light color as a background.

How is a sidebar placed on a page

  • It is set on the page with this coding:
{{name of sidebar}}
  • It can be placed anywhere.
  • For more information on sidebars see: Help:Sidebar


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 on 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 compansate 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 compansate 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:


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 ten 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> McCullough, Home: The Savior of Civilization [1924}, 42; Conference Report Apr. 1935, 116.