How to Create an Infobox: Difference between revisions
mNo edit summary |
|||
| Line 4: | Line 4: | ||
===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 HTLM you will 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 HTLM you will 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. It is recommended that you create infobox table in HTML as there few problems as you will see. | 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. It is recommended that you create infobox table in HTML as there few problems as you will see. | ||
| Line 19: | Line 19: | ||
</table> | </table> | ||
Again, if you are familiar with Wikitext or HTML programming, you should notice this coding: <em>class="infobox"</em> in the table tag . This code tells the browser that a infobox is being created and to place it in the upper right hand corner of the article. | Again, if you are familiar with Wikitext or HTML programming, you should notice this coding: <em>class="infobox"</em> in the table tag . This code tells the browser that a infobox is being created and to place it in the upper right hand corner of the article. | ||
====Step Two - Add Styling to Infobox==== | |||
Next if we want to give the infobox some style considerations such as width, borders, padding, font size, and maybe background color: | Next if we want to give the infobox some style considerations such as width, borders, padding, font size, and maybe background color: | ||
<table style="width:99%; border:1px solid blue; "> | <table style="width:99%; border:1px solid blue; "> | ||
| Line 31: | Line 31: | ||
</tr> | </tr> | ||
</table> | </table> | ||
Again if you know Wikitext or HTML you can see the style that is being added to the infobox. | |||
====Step Three - Create Main Header==== | |||
Revision as of 09:35, 10 September 2014
What are Infoboxes[edit | edit source]
Infoboxes are nothing more than a table saved as a template. Infoboxes are usually in the upper right hand corner of an article and for an organization, it might have the leadership, times and places of meetings, etc.
How to create an Infobox[edit | edit source]
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 HTLM you will need someone who does to help you. If you would like to learn these two programs, see Wikitext or HTML Programming. Neither of these programming languages are difficult.
Step One - Create the table[edit | edit source]
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. It is recommended that you create infobox table in HTML as there few problems as you will see.
So let us create a infobox for an organization:
| Wikitext | HTML |
| {| class=infobox....|} | <table class=infobox>...</table> |
Again, if you are familiar with Wikitext or HTML programming, you should notice this coding: class="infobox" in the table tag . This code tells the browser that a infobox is being created and to place it in the upper right hand corner of the article.
Step Two - Add Styling to Infobox[edit | edit source]
Next if we want to give the infobox some style considerations such as width, borders, padding, font size, and maybe background color:
| Wikitext | HTML |
| {| class=infobox style="width:200px; text-align:left; padding:0px; font-size:8pt; border:1px solid black; border-right-width:2px; border-bottom-width:2px; background-color:white;"....|} | <table class=infobox style="width:200px; text-align:left; padding:0px; font-size:8pt; border:1px solid black; border-right-width:2px; border-bottom-width:2px; background-color:white;">...</table> |
Again if you know Wikitext or HTML you can see the style that is being added to the infobox.