m (Text replacement - "\{\{[\s_]+([^•].)" to "{{$1") |
|||
| (22 intermediate revisions by 6 users not shown) | |||
| Line 8: | Line 8: | ||
}} | }} | ||
==What are Infoboxes?== | ==What are Infoboxes?== | ||
Infoboxes are nothing more than a table saved as a template. Infoboxes are usually in the upper right hand corner of an article. | Infoboxes are nothing more than a table saved as a template. Infoboxes are usually in the upper right-hand corner of an article. They usually deal with organizations and or administrative divisions like US counties and may contain information on leadership, meeting times and its goals, etc. They are designed to give a lot of information at a glance. | ||
==How to create an Infobox== | ==How to create an Infobox== | ||
Again an infobox is a table. If you know how to create tables in Wikitext or HTML, it is not difficult. If you do not know Wikitext or | Again, an infobox is a table. If you know how to create tables in Wikitext or HTML, it is not difficult. If you do not know Wikitext or HTML, you will probably need someone who does to help you. If you would like to learn these two programs, see [[Wikitext - Lesson One|Wikitext]] or [[HTML and Wikitext - Lesson One|HTML Programming]]. Neither of these programming languages is difficult. | ||
===Step One - Create the table=== | ===Step One - Create the table=== | ||
*We are going to assume you know a little Wikitext and HTML in this tutorial. We will begin by creating a simple table. The coding will be displayed in both Wikitext and HTML side by side so can see the difference. | *We are going to assume you know a little Wikitext and HTML in this tutorial. We will begin by creating a simple table. The coding will be displayed in both Wikitext and HTML side by side so can see the difference. | ||
*For this lesson, we have set the width for our infobox to 200 pixels. It could be any width, but infoboxes are usually kept thin and 200 pixels is about right. | *For this lesson, we have set the width for our infobox to 200 pixels. It could be any width, but infoboxes are usually kept thin and 200 pixels is about right. | ||
*It is recommended that you create infobox tables in HTML as there fewer problems as you will see. | *It is recommended that you create infobox tables in HTML as there fewer problems as you will see. | ||
*We will be creating an infobox as shown above. So let us create a infobox for an organization: | *We will be creating an infobox as shown above. We will include a border and float it on the right side. | ||
So let us create a infobox for an organization: | |||
<table style="border:1px solid blue; "> | <table style="border:1px solid blue; "> | ||
<tr> | <tr> | ||
| Line 24: | Line 25: | ||
<tr> | <tr> | ||
<td style="border:1px solid blue; "> | <td style="border:1px solid blue; "> | ||
<nowiki>{| | <nowiki>{|</nowiki> style="width:200px; border:1px solid black; float:right; " <br> | ||
<nowiki>|-</nowiki><br> | <nowiki>|-</nowiki><br> | ||
<nowiki>|colspan="2" style="background-color:yellow;"|organization</nowiki><br><br> | <nowiki>|colspan="2" style="background-color:yellow;"|organization</nowiki><br><br> | ||
| Line 45: | Line 46: | ||
<td style="border:1px solid blue; "> | <td style="border:1px solid blue; "> | ||
<nowiki><table | <nowiki><table style="width:200px; border:1px solid black; float:right; "></nowiki><br> | ||
<nowiki><tr></nowiki><br> | <nowiki><tr></nowiki><br> | ||
<nowiki><td colspan="2"></nowiki>organization<nowiki></td></nowiki><br> | <nowiki><td colspan="2"></nowiki>organization<nowiki></td></nowiki><br> | ||
| Line 72: | Line 73: | ||
</tr> | </tr> | ||
</table> | </table> | ||
*Now pay close attention to the table tags. You should notice | *Now pay close attention to the table tags. You should notice that we have placed an one pixel border around the table and floated it to the right</nowiki></font color> in the table tag . | ||
*Since the name of the organization and the image will extend over the two columns which contain the information about the organization we will install <font color="red">colspan="2"</font color> | *Since the name of the organization and the image will extend over the two columns which contain the information about the organization, we will install <font color="red">colspan="2"</font color> and center the name of the organization as well as the image. | ||
*When you save your infobox be sure include the word "infobox" in the title so people will know what kind of template | *When you save your infobox be sure include the word "infobox" in the title so people will know what kind of template at a glance. For example: <font color="red"><nowiki>{{template:infobox sample}}</nowiki></font color>. | ||
---- | ---- | ||
*As it stands, the HTML coding is ok at this point, but the Wikitext has a problem. Normally the Wikitext as is will work for any table, however, we are going to be installing <em>parameters</em> which require us to replace the |'s in the Wikitext with <font color="red"><nowiki>{{{!}}}</nowiki></font color>. The reason is a bit beyond the scope of this article but if you are interested [[Template:!|click here]] | *As it stands, the HTML coding is ok at this point, but the Wikitext has a problem. Normally the Wikitext as is will work for any table, however, we are going to be installing <em>parameters</em> which require us to replace the |'s in the Wikitext with <font color="red"><nowiki>{{{!}}}</nowiki></font color>. The reason is a bit beyond the scope of this article but if you are interested [[Template:!|click here]] | ||
| Line 130: | Line 131: | ||
</tr> | </tr> | ||
</table> | </table> | ||
*The Wikitext looks a bit messy right now, but the substitution of the <font color="red"><nowiki>{{{!}}}</nowiki></font color> for the | will save a lot of headaches later. Notice that nothing had to be done to the HTML coding. Even though it looks like the Wikitext has less programming, it is a lot trickier to program infoboxes than in | *The Wikitext looks a bit messy right now, but the substitution of the <font color="red"><nowiki>{{{!}}}</nowiki></font color> for the | will save a lot of headaches later. Notice that nothing had to be done to the HTML coding. Even though it looks like the Wikitext has less programming, it is a lot trickier to program infoboxes than in HTML. That's why it is recommended to program infoboxes in HTML rather than Wikitext. | ||
===Step Two - More Coding=== | ===Step Two - More Coding=== | ||
| Line 192: | Line 193: | ||
</tr> | </tr> | ||
</table> | </table> | ||
*Notice all we have done to create the parameters is enclose the item with opening and closing <font color="red">{{{ }}}</font color>. That is all. | *Notice all we have done to create the parameters is enclose the item with opening and closing <font color="red">{{{}}}</font color>. That is all. | ||
*In the wikitext, things are really getting hard to differentiate. There are a lot of curly brackets on the code. Again showing that using HTML is less messy than Wikitext. | *In the wikitext, things are really getting hard to differentiate. There are a lot of curly brackets on the code. Again showing that using HTML is less messy than Wikitext. | ||
===Step Three - Placing the Infobox=== | ===Step Three - Placing the Infobox=== | ||
*To place this infobox we type the usual coding we use to place templates, which in our example is <font color="red"><nowiki>{{Infobox sample}}</nowiki></font color>. However, it will be displayed as such:{{Infobox sample}} | *To place this infobox we type the usual coding we use to place templates, which in our example is <font color="red"><nowiki>{{Infobox sample}}</nowiki></font color>. However, it will be displayed as such:{{Infobox sample}} | ||
*Notice no information appears except the parameter for the name of the organization inside the curly brackets. We now have to add the following code inside the placement coding<br><br> | *Notice no information appears except the parameter for the name of the organization inside the curly brackets. We now have to add the following code inside the placement coding<br><br> | ||
<nowiki>{{Infobox sample</nowiki><br> | <nowiki>{{Infobox sample</nowiki><br> | ||
| Line 232: | Line 233: | ||
*In addition it does not matter the order of the items on the placement codes. You could have the image at the bottom of the list, but the image will still show at the top where the infobox template has it position. | *In addition it does not matter the order of the items on the placement codes. You could have the image at the bottom of the list, but the image will still show at the top where the infobox template has it position. | ||
===Step Four - Limiting Parameters=== | ===Step Four - Limiting Number of Parameters=== | ||
{{Infobox sample | {{Infobox sample | ||
|organization=Genealogy Society | |organization=Genealogy Society | ||
| Line 241: | Line 242: | ||
|hours open=Mon 1pm - 6pm | |hours open=Mon 1pm - 6pm | ||
}} | }} | ||
*Some infoboxes can get very long. If you list all the attributes of an organization can possibly there can be | *Some infoboxes can get very long. If you list all the attributes of an organization can possibly there can be quite a few items listed. | ||
*If the infobox is long but you only have a small organization, you could end up with an infobox taking up a lot of room on the page but with little information in it. Maybe the organization does not even have a phone number like in our example here. | *If the infobox is long but you only have a small organization, you could end up with an infobox taking up a lot of room on the page but with little information in it. Maybe the organization does not even have a phone number like in our example here. | ||
*Well it is possible to code the infobox so that the item "phone" does not appear if there is none. It is done simply by adding this coding to the parameter. | *Well, it is possible to code the infobox so that the item "phone" does not appear if there is none. It is done simply by adding this coding to the parameter. | ||
*This is an example of adding the additional code to the President line:<br><br> | *This is an example of adding the additional code to the President line:<br><br> | ||
:*Wikitext: | :*Wikitext: | ||
| Line 252: | Line 253: | ||
<br><br> | <br><br> | ||
This coding looks a bit intimidating but it is really not hard<ref>The coding is called Parser functions. You can read more about them at [[Help:Magic words#Parser functions]] and [http://www.mediawiki.org/wiki/Help:Extension:ParserFunctions Parser Functions]</ref>. | This coding looks a bit intimidating but it is really not hard<ref>The coding is called Parser functions. You can read more about them at [[Help:Magic words#Parser functions]] and [http://www.mediawiki.org/wiki/Help:Extension:ParserFunctions Parser Functions]</ref>. | ||
*Notice that there are <font color="red">{{ }}</font color> at each end of the expression. | *Notice that there are <font color="red">{{}}</font color> at each end of the expression. | ||
*After the first set of <font color="red">{{</font color> notice <font color="red">#if:</font color> which consists of a pound sign <font color="red">#</font color>, the word <font color="red">if</font color> and a colon <font color="red">:</font color>. | *After the first set of <font color="red">{{</font color> notice <font color="red">#if:</font color> which consists of a pound sign <font color="red">#</font color>, the word <font color="red">if</font color> and a colon <font color="red">:</font color>. | ||
*After the colon you see the parameter repeated with the addition of a pipe after the word inside the <font color="red">{{{}}}</font color> and a pipe on the outside like so:<font color="red"><nowiki>{{{parameter|}}}|</nowiki></font color>. We will not take the time to explain what all this code means but if you are interested see the footnote<ref>The coding looks complicated but it is really not. First this is an “if” statement. In essence, it says “if” you have A do B or if you do not, do C. Or another way to put it, if you have peanut butter, make a sandwich otherwise starve. | *After the colon you see the parameter repeated with the addition of a pipe after the word inside the <font color="red">{{{}}}</font color> and a pipe on the outside like so:<font color="red"><nowiki>{{{parameter|}}}|</nowiki></font color>. We will not take the time to explain what all this code means but if you are interested see the footnote<ref>The coding looks complicated but it is really not. First this is an “if” statement. In essence, it says “if” you have A do B or if you do not, do C. Or another way to put it, if you have peanut butter, make a sandwich otherwise starve. | ||
| Line 259: | Line 260: | ||
*To explain the code: | *To explain the code: | ||
*First, this bit of code is enclosed with <nowiki>{{}}</nowiki>. | *First, this bit of code is enclosed with <nowiki>{{}}</nowiki>. | ||
*Following the first <nowiki>{{ is #if:</nowiki>. This code tells the browser that a “if” statement is coming. For our peanut butter example, the question is, do we have any peanut butter? This test statement or called a “test string,” is separated from our two options with a pipe. Our first option is to “make a sandwich.” The second option is to “starve.” The two options themselves are separated by a pipe. | *Following the first <nowiki>{{is #if:</nowiki>. This code tells the browser that a “if” statement is coming. For our peanut butter example, the question is, do we have any peanut butter? This test statement or called a “test string,” is separated from our two options with a pipe. Our first option is to “make a sandwich.” The second option is to “starve.” The two options themselves are separated by a pipe. | ||
*This coding is testing to see if there is a positive value in the test string or if there is any peanut butter. If there is a positive value, the browser picks the first option, “make sandwich” if there is no value or no peanut butter, it picks the second option “starve.” | *This coding is testing to see if there is a positive value in the test string or if there is any peanut butter. If there is a positive value, the browser picks the first option, “make sandwich” if there is no value or no peanut butter, it picks the second option “starve.” | ||
*So if there really is NO peanut butter, you can leave the space is blank like so: | *So if there really is NO peanut butter, you can leave the space is blank like so: | ||
<nowiki>{{#if(blank)|make sandwich|starve}}</nowiki> and it picks the second option which is starvation. | <nowiki>{{#if:(blank)|make sandwich|starve}}</nowiki> and it picks the second option which is starvation. | ||
*Now what if we do not want the word “starve” to show at all? What if we do not even want to mention peanut butter if there isn’t any. Well, enter the code in this manner: | *Now what if we do not want the word “starve” to show at all? What if we do not even want to mention peanut butter if there isn’t any. Well, enter the code in this manner: | ||
<nowiki>{{#if(blank)|make sandwich}}</nowiki> result: (blank line). | <nowiki>{{#if:(blank)|make sandwich}}</nowiki> result: (blank line). | ||
*Notice the second option is left out. With the second option missing the browser’s only choice is to ignore the whole line of code and give us a blank line. | *Notice the second option is left out. With the second option missing the browser’s only choice is to ignore the whole line of code and give us a blank line. | ||
*In our coding for creating this infobox, we are using parameters which are enclosed by <nowiki>{{{}}}</nowiki>. To show a non value for peanut butter instead of leaving a blank space, we add the pipe after the word “peanut butter” like so: | *In our coding for creating this infobox, we are using parameters which are enclosed by <nowiki>{{{}}}</nowiki>. To show a non value for peanut butter instead of leaving a blank space, we add the pipe after the word “peanut butter” like so: | ||
| Line 358: | Line 359: | ||
*[[Help:Magic words#Parser functions]] | *[[Help:Magic words#Parser functions]] | ||
*[[Help:Infobox|Help:Infobox]] | *[[Help:Infobox|Help:Infobox]] | ||
*[[Help:Advanced templates]] | |||
---- | ---- | ||
====Footnotes==== | ====Footnotes==== | ||
{{reflist}} | {{reflist}} | ||
[[Category: | [[Category:Writing Wiki Articles]] [[Category:Additional wikitext help]] | ||
edits