m (Text replacement - "\{\{[\s_]+([^•].)" to "{{$1") |
|||
| (16 intermediate revisions by 5 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. They usually deal with organizations and | 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 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 | 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 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 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: | ||
| Line 362: | Line 363: | ||
====Footnotes==== | ====Footnotes==== | ||
{{reflist}} | {{reflist}} | ||
[[Category: | [[Category:Writing Wiki Articles]] [[Category:Additional wikitext help]] | ||
edits