Help:Wiki University HTML--Infobox - Creating

From FamilySearch Wiki
Revision as of 17:25, 13 October 2015 by Ccsmith (talk | contribs)
Jump to navigation Jump to search

Lessons

Flexbox/CSS Grid

Additional Helps

WHAT ARE INFOBOXES

Infoboxes are used to display brief information typically about organizations and/or administrative divisions like US counties, but in a table form. They allow quick reference to people and locations.

  • We usually place them near the top of the page on the right side. Here is an example of one:
Oregon County, Missouri
Map
Map of Missouri highlighting Oregon County
Location in the state of Missouri, United States Genealogy
Map of the U.S. highlighting Missouri
Location of Missouri in the U.S.
Facts
Founded February 14, 1845
County Seat Alton
Courthouse
Address Oregon County Courthouse
PO Box 324
Alton, MO 65606
Phone: 417.778.7475
Oregon County Website


ADVANTAGES OF INFOBOXES

  • What makes infoboxes useful is the ability to add or change information within them without having to edit the template itself.
  • Templates can be changed on a particular page if you use the "subst:" procedure as taught in the lesson on Templates. However, infoboxes are coded so as to be edited only for the page they are on.

LET'S CREATE AN INFOBOX FOR AN ORGANIZATION

organization name
image
President: president
Address: address
Phone: phone
Hours Open: hours open

Here is the coding:

<table style="width:200px; border:1px solid black; float:right">
<tr>
<td colspan="2" style="text-align:center">organization name</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">image</td>
</tr>
<tr>
<td>President:</td>
<td>president</td>
</tr>
<tr>
<td>Address:</td>
<td>address</td>
</tr>
<tr>
<td>Phone:</td>
<td>phone</td>
</tr>
<tr>
<td>Hours Open:</td>
<td>hours open</td>
</tr>
</table>


  • NOTICE we used colspan in the first two rows.
  • NOTICE we have centered the name "organization" and "image."
  • NOTICE the float:right so the infobox will appear on the right side of the page.
  • Nothing really unusual in the coding so far. However, now we are going to introduce a new concept called parameters.

PARAMETERS

  • Parameters are formed by three opening and closing curly brackets:
{{{name of parameter}}}
In our infobox, it is in the cells where the parameters are located that we want to post our data such as the name of the president next to the cell with the title "President."

INFOBOX PARAMETERS

We will place three opening and closing curly brackets around the items in the location the names, addresses, etc. are to appear in our infobox. We will turn the name of the organization, president, address, etc. into parameters:

<table style="width:200px; border:1px solid black; float:right">
<tr>
<td colspan="2" style="text-align:center">organization name</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">image</td>
</tr>
<tr>
<td>President:</td>
<td>{{{president}}}</td>
</tr>
<tr>
<td>Address:</td>
<td>{{{address}}}</td>
</tr>
<tr>
<td>Phone:</td>
<td>{{{phone}}}</td>
</tr>
<tr>
<td>Hours Open:</td>
<td>{{{hours open}}}</td>
</tr>
</table>


  • NOTICE all you have to do to turn an item into a "parameter" is surround it with three curly brackets.
organization name
image
President: {{{president}}}
Address: {{{address}}}
Phone: {{{phone}}}
Hours Open: {{{hours open}}}

Now save the template and use the word "infobox" somewhere in the title like so:

{{template:Name of Society infobox}}

RENAME PARAMETERS

  • NOTICE that the parameter code shows in the infobox. Some people might not understand what {{{president}}} means, so to make what goes into that cell more understandable add a pipe after the word "president" with a better explanation such as: {{{president|Name of President}}}

Here's what the coding will look like now:

<table style="width:200px; border:1px solid black; float:right">
<tr>
<td colspan="2" style="text-align:center">{{{organization|Name of Organization}}}</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">{{{image|Image goes here}}}</td>
</tr>
<tr>
<td> President:</td>
<td> {{{president|President's name}}}</td>
</tr>
<tr>
<td> Address:</td>
<td> {{{address|Address}}}</td>
</tr>
<tr>
<td> Phone:</td>
<td> {{{phone|Phone number}}}</td>
</tr>
<tr>
<td> Hours Open:</td>
<td> {{{hours open|Hours opened}}}</td>
</table>


  • So when we save it now, it is a little more self explanatory:
Name of Organization
Image goes here
President: President's name
Address: Address
Phone: Phone number
Hours Open: Hours opened

That is all there is to creating an infobox. The next chapter will cover how to embed the infobox and where the parameters come into play.

TRY THESE OUT . . . . .

Tests.gif
Exercises

Use this coding for the exercise:

{|
|-
|organization
|-
|image
|-
|President:
|president
|-
|Address:
|address
|-
|Phone:
|phone
|-
|Hours Open:
|hours open
|}

Lets make this into a infobox:

  1. Add a border around the infobox, limit the width to 190 pixels and place it on the right side of the page.
  2. Add borders around each of the cells.
  3. Have the cells containing the words organization and image span both columns.
  4. Center the name of the organization and the image in their cells.
  5. Make the items in the right hand cells into parameters.
  6. Change the parameter to a name that is more understandable.


Quick Quiz
  • Parameters have two opening and closing curly brackets surrounding them.
A. True
B. False
  • Infoboxes are usually located at the top of the page on the right side.
A. True
B. False
  • Infoboxes are saved just like other templates but it is good practice to include the word "infobox" in the title.
A. True
B. False
Retrieved from "https://paas-loadb-dhtaff8ujtdt-1826058300.us-east-1.elb.amazonaws.com/wiki/en/index.php?title=Help:Wiki_University_HTML--Infobox_-_Creating&oldid=2306557"