Difference between revisions of "Help:Wiki University HTML--Infobox - Creating"

From FamilySearch Wiki
Jump to navigation Jump to search
m
m
 
(11 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{HTML School}}{{HTML Tutorial Sidebar}}
+
<div style="display:grid; grid-template-columns:10% 10% 20% 20% 20% 20%">
<div style=" float:right; width:73%;  margin-bottom:0px; margin-top:-30px">
+
<!--------------row 1-------------------------->
<!--first table links at top of page---------------------------------------------->
+
<!--tool bar--------------------------------------------------->
<table style="width:100%; margin-bottom:-10px; ">
+
{{HTML School}}
<tr><td>
+
<!----------------row 2---------------------------->
<div style="font-size:1.2em; font-family:arial">[[Help:Wiki University HTML-- Tables - Row Spans|<< Previous Chapter]] </div>
+
<!-------------------menu-------------------------------->
</td>
+
<div style="grid-column:1/3; background-color:#FFEDCC; box-shadow:1px 1px 5px #888888">{{HTML Tutorial Sidebar}}</div>
<td>
+
<!-----------------------main------------------------>
<div style="font-size:1.2em; font-family:arial; text-align:right">[[Help:Wiki University HTML--Infobox - Placing|Next Chapter >>]] </div>
+
<!-------------------------------chapters top row---------------------------------->
</td></tr>
+
<div style="grid-column:3/8; padding-left:0.5em">
</table>
+
<!-------------------------------chapters top row---------------------------------->
----
+
<div style="display:flex; justify-content:space-between; padding:10px; margin-bottom:-1em">
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">WHAT ARE INFOBOXES</h2>
+
<div style="font-size:1.3em">[[Help:Wiki University HTML-- Tables - Row Spans|<< Previous Chapter]]</div>
 +
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University HTML--Infobox - Placing|Next Chapter >>]]</span></div>
 +
</div>
 +
<div style="margin-left:0.5em">
 +
<!-----------------------MAIN MATERIAL BELOW THIS LINE-------------------------------------------->
 +
==WHAT ARE INFOBOXES==
 
<p>Infoboxes are used to display brief information typically about organizations and/or administrative divisions like US counties, but in a table form.  They allow quick reference to people and locations.  </p>
 
<p>Infoboxes are used to display brief information typically about organizations and/or administrative divisions like US counties, but in a table form.  They allow quick reference to people and locations.  </p>
 
*We usually place them near the top of the page on the right side.  Here is an example of one:
 
*We usually place them near the top of the page on the right side.  Here is an example of one:
Line 26: Line 31:
 
| building image =  
 
| building image =  
 
| building address = Oregon County Courthouse<br>PO Box 324<br>Alton, MO 65606<br>Phone: 417.778.7475<br>[http://publicrecords.onlinesearches.com/MO_Oregon.htm '''Oregon County Website'''] }}
 
| building address = Oregon County Courthouse<br>PO Box 324<br>Alton, MO 65606<br>Phone: 417.778.7475<br>[http://publicrecords.onlinesearches.com/MO_Oregon.htm '''Oregon County Website'''] }}
<div style="clear:both"></div>
 
----
 
  
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">ADVANTAGES OF INFOBOXES</h2>
+
==ADVANTAGES OF INFOBOXES==
 
*What makes infoboxes useful is the ability to add or change information within them without having to edit the template itself.   
 
*What makes infoboxes useful is the ability to add or change information within them without having to edit the template itself.   
 
*Templates can be changed on a particular page if you use the "subst:" procedure as taught in the lesson on Templates.  However, infoboxes are coded so as to be edited only for the page they are on.
 
*Templates can be changed on a particular page if you use the "subst:" procedure as taught in the lesson on Templates.  However, infoboxes are coded so as to be edited only for the page they are on.
  
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">LET'S CREATE AN INFOBOX FOR AN ORGANIZATION</h2>
+
==LET'S CREATE AN INFOBOX FOR AN ORGANIZATION==
  
 
<table style="width:200px; border:1px solid black; float:right">  
 
<table style="width:200px; border:1px solid black; float:right">  
 
<tr>
 
<tr>
<td colspan="2" style="text-align:center">organization name</td>
+
<td colspan="2" style="text-align:center; background-color:lightgray">organization name</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td colspan="2" style="text-align:center">image</td>
+
<td colspan="2" style="text-align:center; border:1px solid black">image</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td>President:</td>
+
<td style="border:1px solid black">President:</td>
 
<td>president</td>
 
<td>president</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td>Address:</td>
+
<td style="border:1px solid black">Address:</td>
 
<td>address</td>
 
<td>address</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td>Phone:</td>
+
<td style="border:1px solid black">Phone:</td>
 
<td>phone</td>
 
<td>phone</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td>Hours Open:</td>
+
<td style="border:1px solid black">Hours Open:</td>
 
<td>hours open</td>
 
<td>hours open</td>
 
</tr>
 
</tr>
Line 62: Line 65:
 
<div style="clear:both"></div>
 
<div style="clear:both"></div>
 
<p>Here is the coding:</p>
 
<p>Here is the coding:</p>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New">
+
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:50%; font-size:10pt; font-family:Courier New">
 
<nowiki><table</nowiki> style="width:200px; border:1px solid black; float:right"> <br>
 
<nowiki><table</nowiki> style="width:200px; border:1px solid black; float:right"> <br>
 
<nowiki><tr></nowiki><br>
 
<nowiki><tr></nowiki><br>
Line 95: Line 98:
 
*Nothing really unusual in the coding so far.  However, now we are going to introduce a new concept called <font color="red"><em>parameters</em></font color>.
 
*Nothing really unusual in the coding so far.  However, now we are going to introduce a new concept called <font color="red"><em>parameters</em></font color>.
  
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">PARAMETERS</h2>
+
==PARAMETERS==
 
*Parameters are formed by three opening and closing curly brackets:
 
*Parameters are formed by three opening and closing curly brackets:
 
<div style="font-size:14pt; color:red; padding:10px"><nowiki>{{{name of parameter}}}</nowiki></div>
 
<div style="font-size:14pt; color:red; padding:10px"><nowiki>{{{name of parameter}}}</nowiki></div>
Line 101: Line 104:
 
<div style="border:2px solid green; width:100%; padding:10px; ">In our infobox, it is in the cells where the parameters are located that we want to post our data such as the name of the president next to the cell with the title "President."</div>
 
<div style="border:2px solid green; width:100%; padding:10px; ">In our infobox, it is in the cells where the parameters are located that we want to post our data such as the name of the president next to the cell with the title "President."</div>
  
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">INFOBOX PARAMETERS</h2>
+
==INFOBOX PARAMETERS==
 
<p>We will place three opening and closing curly brackets around the items in the location the names, addresses, etc. are to appear in our infobox.  We will turn the name of the organization, president, address, etc. into parameters:<br>
 
<p>We will place three opening and closing curly brackets around the items in the location the names, addresses, etc. are to appear in our infobox.  We will turn the name of the organization, president, address, etc. into parameters:<br>
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New">
+
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:50%; font-size:10pt; font-family:Courier New">
 
<nowiki><table</nowiki> style="width:200px; border:1px solid black; float:right"><br>
 
<nowiki><table</nowiki> style="width:200px; border:1px solid black; float:right"><br>
 
<nowiki><tr></nowiki><br>
 
<nowiki><tr></nowiki><br>
Line 132: Line 135:
 
<table style="width:200px; border:1px solid black">
 
<table style="width:200px; border:1px solid black">
 
<tr>
 
<tr>
<td colspan="2" style="text-align:center">organization name</td>
+
<td colspan="2" style="text-align:center; background-color:lightgray">organization name</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td colspan="2" style="text-align:center">image</td>
+
<td colspan="2" style="text-align:center; border:1px solid black">image</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td>President:</td>
+
<td style="border:1px solid black">President:</td>
 
<td>{{{president}}}</td>
 
<td>{{{president}}}</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td>Address:</td>
+
<td style="border:1px solid black">Address:</td>
 
<td>{{{address}}}</td>
 
<td>{{{address}}}</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td>Phone:</td>
+
<td style="border:1px solid black">Phone:</td>
 
<td>{{{phone}}}</td>
 
<td>{{{phone}}}</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td>Hours Open:</td>
+
<td style="border:1px solid black">Hours Open:</td>
 
<td>{{{hours open}}}</td>
 
<td>{{{hours open}}}</td>
 
</tr>
 
</tr>
 
</table>
 
</table>
 
<p>Now save the template and use the word "infobox" somewhere in the title like so:
 
<p>Now save the template and use the word "infobox" somewhere in the title like so:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%"><nowiki>{{template:Name of Society infobox}}</nowiki></div><br>
+
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:50%"><nowiki>{{template:Name of Society infobox}}</nowiki></div><br>
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-10px; padding:0px">RENAME PARAMETERS</h2>
+
 
 +
==RENAME PARAMETERS==
 
*<font color="blue"><b>NOTICE</b></font color> that the parameter code shows in the infobox.  Some people might not understand what <nowiki>{{{president}}}</nowiki> means, so to make what goes into that cell more understandable add a pipe after the word "president" with a better explanation such as: <nowiki>{{{president|Name of President}}}</nowiki>
 
*<font color="blue"><b>NOTICE</b></font color> that the parameter code shows in the infobox.  Some people might not understand what <nowiki>{{{president}}}</nowiki> means, so to make what goes into that cell more understandable add a pipe after the word "president" with a better explanation such as: <nowiki>{{{president|Name of President}}}</nowiki>
  
 
Here's what the coding will look like now:
 
Here's what the coding will look like now:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New">
+
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:50%; font-size:10pt; font-family:Courier New">
 
<nowiki><table</nowiki> style="width:200px; border:1px solid black; float:right"><br>
 
<nowiki><table</nowiki> style="width:200px; border:1px solid black; float:right"><br>
 
<nowiki><tr></nowiki><br>
 
<nowiki><tr></nowiki><br>
Line 190: Line 194:
 
<table style="width:200px; border:1px solid black">
 
<table style="width:200px; border:1px solid black">
 
<tr>
 
<tr>
<td colspan="2" style="text-align:center">{{{organization|Name of Organization}}}</td>
+
<td colspan="2" style="text-align:center; background-color:lightgray">{{{organization|Name of Organization}}}</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td colspan="2" style="text-align:center">{{{image|Image goes here}}}</td>
+
<td colspan="2" style="text-align:center; border:1px solid black">{{{image|Image goes here}}}</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td> President:</td>
+
<td style="border:1px solid black"> President:</td>
 
<td> {{{president|President's name}}}</td>
 
<td> {{{president|President's name}}}</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td> Address:</td>
+
<td style="border:1px solid black"> Address:</td>
 
<td> {{{address|Address}}}</td>
 
<td> {{{address|Address}}}</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td> Phone:</td>
+
<td style="border:1px solid black"> Phone:</td>
 
<td> {{{phone|Phone number}}}</td>
 
<td> {{{phone|Phone number}}}</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td> Hours Open:</td>
+
<td style="border:1px solid black"> Hours Open:</td>
 
<td> {{{hours open|Hours opened}}}</td>
 
<td> {{{hours open|Hours opened}}}</td>
 
</table>
 
</table>
 
<p>That is all there is to creating an infobox.  The next chapter will cover how to embed the infobox and where the parameters come into play.
 
<p>That is all there is to creating an infobox.  The next chapter will cover how to embed the infobox and where the parameters come into play.
  
<h2 style="color:#007300; font-family:Tw Cen MT Condensed; font-size:2.3em; margin-bottom:-5px; margin-top:-20px; padding:0px">TRY THESE OUT . . . . . </h2>
+
==TRY THESE OUT . . . . . ==
 
[[File:Tests.gif|100px|right]]
 
[[File:Tests.gif|100px|right]]
 
<!--Exercises -------------------------------------------------------------->
 
<!--Exercises -------------------------------------------------------------->
Line 271: Line 275:
 
</div>
 
</div>
 
</div>
 
</div>
 
+
<!---------------------------------END OF MATERIAL------------------------------------------->
<!--Links to next and preceding chapters bottom of page ----------------------------->
+
</div>
<table style="width:100%; ">
+
<!-------------------------------chapters bottom---------------------------------------------------->
<tr><td>
+
<div style="clear:both"></div>
<div style="font-size:1.2em; font-family:arial">[[Help:Wiki University HTML-- Tables - Row Spans|<< Previous Chapter]] </div>
+
<div style="display:flex; justify-content:space-between; padding:10px">
</td>
+
<div style="font-size:1.3em">[[Help:Wiki University HTML-- Tables - Row Spans|<< Previous Chapter]]</div>
<td>
+
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University HTML--Infobox - Placing|Next Chapter >>]]</span></div>
<div style="font-size:1.2em; font-family:arial; text-align:right">[[Help:Wiki University HTML--Infobox - Placing|Next Chapter >>]] </div>
+
</div>
</td></tr>
 
</table>
 
----
 
 
{{reflist}}
 
{{reflist}}
 
</div>
 
</div>
 
__NOTOC__
 
__NOTOC__
[[Category:Wikitext Lessons]]
+
[[Category:Wiki Lessons]]

Latest revision as of 08:53, 27 February 2018

WHAT ARE INFOBOXES[edit | edit source]

Infoboxes are used to display brief information typically about organizations and/or administrative divisions like US counties, but in a table form. They allow quick reference to people and locations.

  • We usually place them near the top of the page on the right side. Here is an example of one:
Oregon County, Missouri
Map
Map of Missouri highlighting Oregon County
Location in the state of Missouri, United States Genealogy
Map of the U.S. highlighting Missouri
Location of Missouri in the U.S.
Facts
Founded February 14, 1845
County Seat Alton
Courthouse
Address Oregon County Courthouse
PO Box 324
Alton, MO 65606
Phone: 417.778.7475
Oregon County Website


ADVANTAGES OF INFOBOXES[edit | edit source]

  • What makes infoboxes useful is the ability to add or change information within them without having to edit the template itself.
  • Templates can be changed on a particular page if you use the "subst:" procedure as taught in the lesson on Templates. However, infoboxes are coded so as to be edited only for the page they are on.

LET'S CREATE AN INFOBOX FOR AN ORGANIZATION[edit | edit source]

organization name
image
President: president
Address: address
Phone: phone
Hours Open: hours open

Here is the coding:

<table style="width:200px; border:1px solid black; float:right">
<tr>
<td colspan="2" style="text-align:center">organization name</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">image</td>
</tr>
<tr>
<td>President:</td>
<td>president</td>
</tr>
<tr>
<td>Address:</td>
<td>address</td>
</tr>
<tr>
<td>Phone:</td>
<td>phone</td>
</tr>
<tr>
<td>Hours Open:</td>
<td>hours open</td>
</tr>
</table>


  • NOTICE we used colspan in the first two rows.
  • NOTICE we have centered the name "organization" and "image."
  • NOTICE the float:right so the infobox will appear on the right side of the page.
  • Nothing really unusual in the coding so far. However, now we are going to introduce a new concept called parameters.

PARAMETERS[edit | edit source]

  • Parameters are formed by three opening and closing curly brackets:
{{{name of parameter}}}
In our infobox, it is in the cells where the parameters are located that we want to post our data such as the name of the president next to the cell with the title "President."

INFOBOX PARAMETERS[edit | edit source]

We will place three opening and closing curly brackets around the items in the location the names, addresses, etc. are to appear in our infobox. We will turn the name of the organization, president, address, etc. into parameters:

<table style="width:200px; border:1px solid black; float:right">
<tr>
<td colspan="2" style="text-align:center">organization name</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">image</td>
</tr>
<tr>
<td>President:</td>
<td>{{{president}}}</td>
</tr>
<tr>
<td>Address:</td>
<td>{{{address}}}</td>
</tr>
<tr>
<td>Phone:</td>
<td>{{{phone}}}</td>
</tr>
<tr>
<td>Hours Open:</td>
<td>{{{hours open}}}</td>
</tr>
</table>


  • NOTICE all you have to do to turn an item into a "parameter" is surround it with three curly brackets.
organization name
image
President: {{{president}}}
Address: {{{address}}}
Phone: {{{phone}}}
Hours Open: {{{hours open}}}

Now save the template and use the word "infobox" somewhere in the title like so:

{{template:Name of Society infobox}}

RENAME PARAMETERS[edit | edit source]

  • NOTICE that the parameter code shows in the infobox. Some people might not understand what {{{president}}} means, so to make what goes into that cell more understandable add a pipe after the word "president" with a better explanation such as: {{{president|Name of President}}}

Here's what the coding will look like now:

<table style="width:200px; border:1px solid black; float:right">
<tr>
<td colspan="2" style="text-align:center">{{{organization|Name of Organization}}}</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">{{{image|Image goes here}}}</td>
</tr>
<tr>
<td> President:</td>
<td> {{{president|President's name}}}</td>
</tr>
<tr>
<td> Address:</td>
<td> {{{address|Address}}}</td>
</tr>
<tr>
<td> Phone:</td>
<td> {{{phone|Phone number}}}</td>
</tr>
<tr>
<td> Hours Open:</td>
<td> {{{hours open|Hours opened}}}</td>
</table>


  • So when we save it now, it is a little more self explanatory:
Name of Organization
Image goes here
President: President's name
Address: Address
Phone: Phone number
Hours Open: Hours opened

That is all there is to creating an infobox. The next chapter will cover how to embed the infobox and where the parameters come into play.

TRY THESE OUT . . . . .[edit | edit source]

Tests.gif
Exercises

Use this coding for the exercise:

{|
|-
|organization
|-
|image
|-
|President:
|president
|-
|Address:
|address
|-
|Phone:
|phone
|-
|Hours Open:
|hours open
|}

Lets make this into a infobox:

  1. Add a border around the infobox, limit the width to 190 pixels and place it on the right side of the page.
  2. Add borders around each of the cells.
  3. Have the cells containing the words organization and image span both columns.
  4. Center the name of the organization and the image in their cells.
  5. Make the items in the right hand cells into parameters.
  6. Change the parameter to a name that is more understandable.


Quick Quiz
  • Parameters have two opening and closing curly brackets surrounding them.
A. True
B. False
  • Infoboxes are usually located at the top of the page on the right side.
A. True
B. False
  • Infoboxes are saved just like other templates but it is good practice to include the word "infobox" in the title.
A. True
B. False