Interface administrators, smwadministrator, smwcurator, smweditor
82,369
edits
m (moved How to Create Navigation Boxes to How to Create a Navbox) |
|||
Line 3: | Line 3: | ||
Navboxes are nothing more than a table saved as a template. Navboxes are usually at the bottom of the article and usually contain only links to topics or locations. See the example at the bottom of this article. | Navboxes are nothing more than a table saved as a template. Navboxes are usually at the bottom of the article and usually contain only links to topics or locations. See the example at the bottom of this article. | ||
==How to create | ==How to create a Navbox== | ||
Again an | Again an Navbox 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 HTLM, 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. | ||
===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. | ||
* | *Since navboxes usually extend from one side to the other, we have set the width for our navbox to 100%. | ||
*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 a navbox as shown below. So let us create a navbox for a location: | |||
<table style="border:1px solid blue; "> | |||
<tr> | |||
<td style="border:1px solid blue; text-align:center; font-size:16pt; ">Wikitext</td> | |||
<td style="border:1px solid blue; text-align:center; font-size:16pt; ">HTML</td> | |||
</tr> | |||
<tr> | |||
<td style="border:1px solid blue; "> | |||
<nowiki>{| class="infobox"</nowiki> style="width:200px;" <br> | |||
<nowiki>|-</nowiki><br> | |||
<nowiki>|colspan="2"|organization</nowiki><br><br> | |||
<nowiki>|-</nowiki><br> | |||
<nowiki>|colspan="2"|image</nowiki><br><br> | |||
<nowiki>|-</nowiki><br> | |||
<nowiki>|President:</nowiki><br> | |||
<nowiki>|president</nowiki><br><br> | |||
<nowiki>|-</nowiki><br> | |||
<nowiki>|Address:</nowiki><br> | |||
<nowiki>|address</nowiki><br><br> | |||
<nowiki>|-</nowiki><br> | |||
<nowiki>|Phone:</nowiki><br> | |||
<nowiki>|phone</nowiki><br><br> | |||
<nowiki>|-</nowiki><br> | |||
<nowiki>|Hours Open:</nowiki><br> | |||
<nowiki>|hours open</nowiki><br><br> | |||
<nowiki>|}</nowiki> | |||
</td> | |||
<td style="border:1px solid blue; "> | |||
<nowiki><table class="infobox" style="width:200px;"></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td colspan="2"></nowiki>organization<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td colspan="2"></nowiki>image<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td>President:</td></nowiki><br> | |||
<nowiki><td></nowiki>president<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td>Address:</td></nowiki><br> | |||
<nowiki><td></nowiki>address<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td>Phone:</td></nowiki><br> | |||
<nowiki><td></nowiki>phone<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki><tr></nowiki><br> | |||
<nowiki><td>Hours Open:</td></nowiki><br> | |||
<nowiki><td></nowiki>hours open<nowiki></td></nowiki><br> | |||
<nowiki></tr></nowiki><br> | |||
<nowiki></table></nowiki> | |||
</td> | |||
</tr> | |||
</table> | |||
*Now pay close attention to the table tags. You should notice this coding: <font color="red"><nowiki>class="infobox"</nowiki></font color> in the table tag . This code tells the browser that a infobox is being created and to place it on the right hand side of the article. | |||
*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> in the organization and image coding. | |||
*When you save your infobox be sure include the word "infobox" in the title so people will know what kind of template it is for example: <font color="red"><nowiki>{{template:infobox sample}}</nowiki></font color>. | |||
---- | |||
{{Missouri|Missouri}} | {{Missouri|Missouri}} |