Help:Wiki University HTML--Infobox - Creating





<< Previous Chapter Next Chapter >>

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:

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
Here is the coding: 


 * 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:

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:  Now save the template and use the word "infobox" somewhere in the title like so:
 * NOTICE all you have to do to turn an item into a "parameter" is surround it with three curly brackets.

RENAME PARAMETERS

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

Here's what the coding will look like now: 


 * So when we save it now, it is a little more self explanatory:

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


 Exercises

Use this coding for the exercise: Lets make this into a infobox: Check your answers
 * 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

Check your answers

<< Previous Chapter Next Chapter >>