How to Create an Infobox: Difference between revisions

m
Text replacement - "\{\{[\s_]+([^•].)" to "{{$1"
m (Text replacement - "\{\{[\s_]+([^•].)" to "{{$1")
(3 intermediate revisions by 2 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 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.
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 are difficult.
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.   
Line 193: 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.


Line 242: 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 quit a few items listed.   
*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 253: 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 260: 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 363: Line 363:
====Footnotes====
====Footnotes====
{{reflist}}
{{reflist}}
[[Category:Writing wiki articles]] [[Category:Additional wikitext help]]
[[Category:Writing Wiki Articles]] [[Category:Additional wikitext help]]
Approver, Batcheditor, Moderator, Patroller, Protector, Reviewer, Bots, Bureaucrats, editor, Interface administrators, pagecreator, pagedeleter, Page Ownership admin, Push subscription managers, Suppressors, Administrators, Upload Wizard campaign editors, Widget editors
321,763

edits