CZ:How To: Difference between revisions
imported>Robert W King |
imported>J. Noel Chiappa (→Page content: Complex and less frequently used ones toward the rear, I would suggest?) |
||
Line 4: | Line 4: | ||
== Page content == | == Page content == | ||
=== How to add footnotes to an article === | |||
To insert footnotes in an article, put the material you want in the footnote between <nowiki><ref> and </ref></nowiki>. That will create an automatically-ordered superscript numerical reference (i.e. if you add a new footnote between existing footnotes #'s 1 and 2, it will be numbered 2, and the old #2 will be automatically renumbered #3, etc), and saves away the content of the footnote. | |||
Next, at the bottom of the article, where you want the text of the footnotes to appear, put <nowiki>==Notes==</nowiki>, and on the next line, put <nowiki><references/></nowiki> (note the '''/''' ''after'' the keyword). When the page is displayed, the content of the footnote(s) will be displayed in the '''Notes''' section. | |||
=== How to make subscripts === | |||
Note that buttons for superscripts and subscripts are located immediately above and below the edit text box when editing a page. To subscript something, just hi-light the text and click the subscript button. | |||
Or, you can type the code yourself, thus <nowiki>X<sub>2</sub></nowiki> yields X<sub>2</sub>. | |||
Alternatively, you can use the template {{tl|d}} (as in "down"). | |||
<code><nowiki> | |||
X{{d|2}} | |||
</nowiki></code> | |||
produces | |||
X{{d|2}} | |||
=== How to make superscripts === | |||
Note that buttons for superscripts and subscripts are located immediately above and below the edit text box when editing a page. To subscript something, just hi-light the text and click the subscript button. | |||
Or, you can type the code yourself, thus <nowiki>X<sup>2</sup></nowiki> yields X<sup>2</sup>. | |||
Alternatively, you can use the template {{tl|u}} (as in "up"). | |||
<code><nowiki> | |||
X{{u|2}} | |||
</nowiki></code> | |||
produces | |||
X{{u|2}} | |||
=== How to create a basic table (manually) === | |||
The table creation process uses the syntax below: | |||
To create the actual table, use | |||
<pre>{|</pre> | |||
At this point, you can specificy specific style elements about your table, such as | |||
* having a border (by adding border="1") | |||
* setting border colors | |||
* setting table width | |||
* other CSS elements | |||
After the table has been established, use | |||
<pre>|</pre> | |||
to create your first data cell. This also begins a new column. At this point, you can also | |||
* specify it's alignment | |||
* specify how many columns it will cover | |||
* apply other CSS style elements | |||
To create a new row, simply use | |||
<pre>|-</pre> | |||
After creating as many columns and rows you wish, close your table by using | |||
<pre>|}</pre> | |||
A sample table code is below | |||
<pre> | |||
{|border="1" width=40px | |||
|column 1, row 1 | |||
|align="center"|column 2, row 1 | |||
|- | |||
|align="left"|column 1, row 2 | |||
|align="right"|column 2, row 2 | |||
|} | |||
</pre> | |||
The table looks like this: | |||
{|border="1" width=40px | |||
|column 1, row 1 | |||
|align="center"|column 2, row 1 | |||
|- | |||
|align="left"|column 1, row 2 | |||
|align="right"|column 2, row 2 | |||
|} | |||
=== How to make arrows === | |||
Some arrows can be inserted by clicking on the appropriate arrow located on the bottom of edit pages. They can also be typed as shown by the examples below. Note that the math begin (<nowiki><math></nowiki>) and math end (<nowiki></math></nowiki>) tags do not need to immediately surround the arrow functions, they only need to be at the beginning and end of equations. | |||
<b><math>\rightarrow</math></b> is made from <b><nowiki><math>\rightarrow</math></nowiki></b> or <b><nowiki><math>\rarr</math></nowiki></b> or <b><nowiki>&rarr;</nowiki></b><br> | |||
<b><math>\leftarrow</math></b> is made from this <b><nowiki><math>\leftarrow</math></nowiki></b> or <b><nowiki><math>\larr</math></nowiki></b> or <b><nowiki>&larr;</nowiki></b><br> | |||
<b><math>\harr</math></b> is made from this <b><nowiki><math>\leftrightarrow</math></nowiki></b> or <b><nowiki><math>\harr</math></nowiki></b> or <b><nowiki>&harr;</nowiki></b><br> | |||
<math>\stackrel{\textstyle \leftarrow}{\rightarrow} </math> is made from <b><nowiki><math>\stackrel{\textstyle \leftarrow}{\rightarrow} </math></nowiki></b><br> | |||
<b><math>\uparrow</math></b> is made from this <b><nowiki><math>\uparrow</math></nowiki></b><br> | |||
<b><math>\downarrow</math></b> is made from this <b><nowiki><math>\downarrow</math></nowiki></b><br> | |||
=== How to make chemical equations === | |||
Note that buttons for superscripts and subscripts are located immediately above and below the edit text box when editing a page. To subscript something, just hi-light the text and click the subscript button. | |||
This text<br> | |||
<code><nowiki>: 4NaPO<sub>3</sub> + 2SiO<sub>2</sub> + 10C → 2Na<sub>2</sub>SiO<sub>3</sub> + 10CO + P<sub>4</sub></nowiki></code><br> | |||
OR THIS TEXT<br> | |||
<code><nowiki>:<math> 4 \mathrm{NaPO}_3 + 2 \mathrm{SiO}_2 + 10\mathrm{C} \rarr 2 \mathrm{Na}_2\mathrm{SiO}_3 + 10\mathrm{CO} + \mathrm{P}_4 </math></nowiki></code> | |||
provides the following equation (note that colons indent the equation) <br> | |||
:4NaPO<sub>3</sub> + 2SiO<sub>2</sub> + 10C → 2Na<sub>2</sub>SiO<sub>3</sub> + 10CO + P<sub>4</sub><br> | |||
<br> | |||
=== How to make math equations (italic variables) === | |||
==== Simple algebraic equations ==== | |||
This text<br> | |||
<code><nowiki>:<math>\left(p + \frac{n^2 a}{V^2}\right)\left(V-nb\right) = nRT</math></nowiki></code><br> | |||
provides this mathematic formula<br> | |||
:<math>\left(p + \frac{n^2 a}{V^2}\right)\left(V-nb\right) = nRT</math> | |||
==== How to make integral equations ==== | |||
<code><nowiki>:<math>F(t) = \int_0^t f(x) \, dx.</math></nowiki></code> gives this equation:<br> | |||
:<math>F(t) = \int_0^t f(x) \, dx.</math> | |||
and this text, <code><nowiki>:<math>\int_a^b f(x) \, dx = F(b) - F(a).</math></nowiki></code>, gives this equation:<br> | |||
:<math>\int_a^b f(x) \, dx = F(b) - F(a).</math> | |||
==== How to make differential equations in dot notation ==== | |||
This text, <code><nowiki>:<math>\dot{x} = \sigma(y - x)\ ,</math></nowiki></code> give this equation in dot notation | |||
:<math>\dot{x} = \sigma(y - x)\ ,</math> | |||
This text, <code><nowiki>:<math>\dot{x}=\frac{dx(t)}{dt}\ .</math></nowiki></code> gives this equation<br> | |||
:<math>\dot{x}=\frac{dx(t)}{dt}\ .</math> | |||
==== How to make summation equations ==== | |||
This text<br> | |||
<code><nowiki> | |||
:<math> | |||
X = \sum_{J=1|}^{n} \ c_JV_J. | |||
</math> | |||
</nowiki></code> | |||
provides this equation: <br> | |||
:<math> | |||
X = \sum_{J=1|}^{n} \ c_JV_J. | |||
</math> | |||
==== How to make matrix equations ==== | |||
This text<br> | |||
<code><nowiki> | |||
:<math>M = \begin{pmatrix} | |||
7 & 4.3 & 9 & -3 \\ | |||
0 & 6 & 18 & 42 \\ | |||
-10 & 9.5 & 16 & 0 | |||
\end{pmatrix}</math> | |||
</nowiki></code> | |||
provides this matrix equation: <br> | |||
:<math>M = \begin{pmatrix} | |||
7 & 4.3 & 9 & -3 \\ | |||
0 & 6 & 18 & 42 \\ | |||
-10 & 9.5 & 16 & 0 | |||
\end{pmatrix}</math> | |||
=== How to use the timeline template === | === How to use the timeline template === | ||
Line 185: | Line 364: | ||
Perfect! If you want to change other aspects of the timeline, including width, adding images, bullets, etc., please look at [[Template:Timeline/Sample]] and consult the {{tl|Timeline}} and {{tl|tlevent}} templates for technical updates. | Perfect! If you want to change other aspects of the timeline, including width, adding images, bullets, etc., please look at [[Template:Timeline/Sample]] and consult the {{tl|Timeline}} and {{tl|tlevent}} templates for technical updates. | ||
=== How to use the imagemap extension === | === How to use the imagemap extension === |
Revision as of 10:56, 12 April 2008
This CZ:How To page illustrates the wiki code needed to perform certain tasks and also lists many useful articles.
Page content
How to add footnotes to an article
To insert footnotes in an article, put the material you want in the footnote between <ref> and </ref>. That will create an automatically-ordered superscript numerical reference (i.e. if you add a new footnote between existing footnotes #'s 1 and 2, it will be numbered 2, and the old #2 will be automatically renumbered #3, etc), and saves away the content of the footnote.
Next, at the bottom of the article, where you want the text of the footnotes to appear, put ==Notes==, and on the next line, put <references/> (note the / after the keyword). When the page is displayed, the content of the footnote(s) will be displayed in the Notes section.
How to make subscripts
Note that buttons for superscripts and subscripts are located immediately above and below the edit text box when editing a page. To subscript something, just hi-light the text and click the subscript button.
Or, you can type the code yourself, thus X<sub>2</sub> yields X2.
Alternatively, you can use the template {{
}} (as in "down").
X{{d|2}}
produces
How to make superscripts
Note that buttons for superscripts and subscripts are located immediately above and below the edit text box when editing a page. To subscript something, just hi-light the text and click the subscript button.
Or, you can type the code yourself, thus X<sup>2</sup> yields X2.
Alternatively, you can use the template {{u}} (as in "up").
X{{u|2}}
produces
X2
How to create a basic table (manually)
The table creation process uses the syntax below:
To create the actual table, use
{|
At this point, you can specificy specific style elements about your table, such as
- having a border (by adding border="1")
- setting border colors
- setting table width
- other CSS elements
After the table has been established, use
|
to create your first data cell. This also begins a new column. At this point, you can also
- specify it's alignment
- specify how many columns it will cover
- apply other CSS style elements
To create a new row, simply use
|-
After creating as many columns and rows you wish, close your table by using
|}
A sample table code is below
{|border="1" width=40px |column 1, row 1 |align="center"|column 2, row 1 |- |align="left"|column 1, row 2 |align="right"|column 2, row 2 |}
The table looks like this:
column 1, row 1 | column 2, row 1 |
column 1, row 2 | column 2, row 2 |
How to make arrows
Some arrows can be inserted by clicking on the appropriate arrow located on the bottom of edit pages. They can also be typed as shown by the examples below. Note that the math begin (<math>) and math end (</math>) tags do not need to immediately surround the arrow functions, they only need to be at the beginning and end of equations.
is made from <math>\rightarrow</math> or <math>\rarr</math> or →
is made from this <math>\leftarrow</math> or <math>\larr</math> or ←
is made from this <math>\leftrightarrow</math> or <math>\harr</math> or ↔
is made from <math>\stackrel{\textstyle \leftarrow}{\rightarrow} </math>
is made from this <math>\uparrow</math>
is made from this <math>\downarrow</math>
How to make chemical equations
Note that buttons for superscripts and subscripts are located immediately above and below the edit text box when editing a page. To subscript something, just hi-light the text and click the subscript button.
This text
: 4NaPO<sub>3</sub> + 2SiO<sub>2</sub> + 10C → 2Na<sub>2</sub>SiO<sub>3</sub> + 10CO + P<sub>4</sub>
OR THIS TEXT
:<math> 4 \mathrm{NaPO}_3 + 2 \mathrm{SiO}_2 + 10\mathrm{C} \rarr 2 \mathrm{Na}_2\mathrm{SiO}_3 + 10\mathrm{CO} + \mathrm{P}_4 </math>
provides the following equation (note that colons indent the equation)
- 4NaPO3 + 2SiO2 + 10C → 2Na2SiO3 + 10CO + P4
How to make math equations (italic variables)
Simple algebraic equations
This text
:<math>\left(p + \frac{n^2 a}{V^2}\right)\left(V-nb\right) = nRT</math>
provides this mathematic formula
How to make integral equations
:<math>F(t) = \int_0^t f(x) \, dx.</math>
gives this equation:
and this text, :<math>\int_a^b f(x) \, dx = F(b) - F(a).</math>
, gives this equation:
How to make differential equations in dot notation
This text, :<math>\dot{x} = \sigma(y - x)\ ,</math>
give this equation in dot notation
This text, :<math>\dot{x}=\frac{dx(t)}{dt}\ .</math>
gives this equation
How to make summation equations
This text
:<math>
X = \sum_{J=1|}^{n} \ c_JV_J.
</math>
provides this equation:
How to make matrix equations
This text
:<math>M = \begin{pmatrix}
7 & 4.3 & 9 & -3 \\
0 & 6 & 18 & 42 \\
-10 & 9.5 & 16 & 0
\end{pmatrix}</math>
provides this matrix equation:
How to use the timeline template
Within a few of the subpage clusters, you might find a section titled "Timelines", that represent a chronological list of items that pertain to the main article.
Within that page, is the use of a graphical {{Timeline}} template. This is how it's used!
First, create the timeline subpage. This can be done by going into the talk page of the article, clicking "show" to reveal the unused (available) subpage types, and clicking on "Timeline".
Next, add {{subpages}}
to the top of the page. Then you're ready to begin the timeline.
Starting the timeline
The first template is called {{timeline}}
. It currently has two variables, "title" and "height". Although the title is not currently implemented, eventually it will be, so be sure to fill in a title for your timeline there. The second variable, "height" specifies the height of the timeline "stem". Executing the template looks something like this:
{{timeline |title=Your title here. |height=10}}
Adding the first event
The second template is called {{tlevent}}
, short for "timeline event". It currently has three variables that must be filled in:
- The first is the event. This is the body of text that will appear in the tab.
- The second is the width. This determines how wide the tab will be on the page. It is recommended that you pick a static width (either in em units, or pixels), mainly because using a percent based width will cause variable word-wrapping within each tab.
- The third is the color. This determines the background color of the tab itself. You can use either "plain-english" colors (e.g. "white", or "blue"), hex-shorthand (e.g. #FFF for all white) or full hex values (e.g. #FFFFFF).
Everything put together looks like this:
{{tlevent |event=Something happened first |width=100px |color=#FFFFFF }}
You will use this format for each event that you want to add to the timeline. After all events have been written, you must place |}
at the end in order to close off the internal table function of the timeline.
Here is the sample script followed by the execution:
{{timeline |title=The title will eventually show up. |height=10}} {{tlevent |event='''9:41 AM''': First event. |width=100px |color=#FFF }} {{tlevent |event='''9:42 AM''': Second event. |width=100px |color=#FFF }} {{tlevent |event='''9:43 AM''': Third event. |width=100px |color=#FFF }} |} <br/> <br/> <br/> <br/>
And the demonstration:
9:41 AM: First event.
9:42 AM: Second event.
9:43 AM: Third event.
|
Notice we added a few <br/>
s at the bottom of the template. This is to avoid any potential overlapping issues with the graphical layer implemented in the template.
Making adjustments
Notice how the timeline "stem" is too short. This is because 10 units was not long enough to go all the way to the bottom. We can fix this by either increasing the number of units, or making the tabs wider. Let's first try making the tabs wider in order to prevent word-wrapping:
... ... ... {{tlevent |event='''9:41 AM''': First event. |width=200px |color=#FFF }} {{tlevent |event='''9:42 AM''': Second event. |width=200px |color=#FFF }} {{tlevent |event='''9:43 AM''': Third event. |width=200px |color=#FFF }} ... ... ...
9:41 AM: First event.
9:42 AM: Second event.
9:43 AM: Third event.
|
By increasing the width of the tabs to 200px to avoid word-wrap, we were able to decrease the total height they took up. It almost made the stem go all the way down, but let's add 3 units just to "pretty it up":
{{timeline |title=The title will eventually show up. |height=13}} ... ... ...
9:41 AM: First event.
9:42 AM: Second event.
9:43 AM: Third event.
|
Perfect! If you want to change other aspects of the timeline, including width, adding images, bullets, etc., please look at Template:Timeline/Sample and consult the {{Timeline}} and {{tlevent}} templates for technical updates.
How to use the imagemap extension
Imagemaps are a way to deliniate a part of or an entire image into a reference link. It is usually incorporated into such languages as HTML, Java/Script, Ajax, but a mediawiki extension has been added that does the bulk of the complicated work, enabling you to use it with just a few parameters.
The first thing to do is to choose your image. In this case, we'll use "Image:Crystal_Clear_action_bookmark.png" or
Before you apply the imagemap code, you have to know the size of the image in pixels, and the size you're going to use. For example, clicking on the image above takes you to the image wiki page, where it says the image size is "128 x 128" pixels.
You can actually resize the image to any size you'd like by using the regular wikimarkup for image tags:
[[Image:Crystal_Clear_action_bookmark.png|100px|left|thumb|This is a thumbnail with a caption]]
produces
[[Image:Crystal_Clear_action_bookmark.png|75px|left]]
produces
In this case, we don't want to use the thumbnail version (a.k.a. the "polaroid" frame). To begin, we use
<imagemap> Image:Crystal_Clear_action_bookmark.png|left|100px rect 1 1 128 128 [[star]] desc none </imagemap>
- The
<imagemap>
tag begins the script for imagemap. - Next, you specify the image location, along with its orientation and size. In this case, we chose "left" justification and 100 pixels.
- Now, you specify the imagemap shape. For most square images, you simply use "rect", and define the "rectangle" size. Geometrically, a rectangle has practically the same properties of a square, but we simply redefine the rectangle height and width to make it into a square-shape. It's important to note here that you use the exact same dimensions as the original image size, and not the image size you specify. If you try to use "rect 1 1 100 100" for the imagemap, you will only get a portion of the picture as a clickable region since its been shrunk down from its original 128x128 by the image specification. Think of it like a "Shrinky dink" (you may have to look that one up!)
- After defining the area, place the link that it should point to next to the size. It's important that everything is spaced correctly. Not leaving spaces between each argument will make this not work.
Let's see what happens when we put this all together:
Notice when you use the cursor to "hover" over the image, it will say "Star" and clicking it will send you to Star
By changing the "desc" area, you will modify where the imagemap starts and ends. It's best not to change this unless you really know what you're doing or making extremely complicated areas, in which case you're on your own!
Doing things in Citizendium
How to start a new article
Instructions for all methods are located at CZ:How to start a new article.
How to make lowercase article titles
Some pages, like pH and e (mathematics) require lower case titles, which are done like this:
{{lowercase|title=pH}} gives the correct title form for pH
{{lowercase|title=e (mathematics}} gives the correct title form of e (mathematics).
How to checklist articles
The basic instructions are located at CZ:Using the Subpages template. A weekly list of unchecklisted articles needing attendtion can be found at CZ:Unchecklisted_Articles.
How to rename an article
Always use the "move" tab at the top of the page, but...
- It's generally unwise to rename an article created and worked on by others without some discussion; use the "Discussion" page.
- If you get an error message for some reason, ask a more experienced used to help you.
- Never move a page by 'cutting and pasting' the contents in the new location - that divorces the text and its 'History', which we need to keep together for copyright reasons.
- It the article you are moving is a cluster, and has subpages, see the instructions here. If those instructions are too daunting, ask for help from an experienced user; we are happy to help.
How to delete an article
You can ask a constable to delete a junk page, or an article you created, by using the speedydelete template. You can simply add {{speedydelete|Insert some reason here}} to the article/image space.
How to start a new proposal
Instructions for starting a new proposal can be found at CZ:Proposals/New.
How to find editors
To find a list of editors in a particular Workgroup, go to the CZ:Workgroups page and clink on the editors link for the workgroup.
How to make a new template
Before creating a new template, there are several things that must be taken into consideration:
- How will it be used?
- Where will it be used?
- How should it look?
- How flexible will it be?
- Is it needed?
- What need is it fufilling?
Templates are extremely powerful tools for creating dynamic content that you want reproduced or changed with very little effort across a large number of pages. Templates can also be very data sensitive; that is, what kind of data you want to present may determine how your template looks and feels.
The best templates are very flexible, very dynamic, and present information in a "clean" way. This increases their reusability. Templates that limit the information you can change are usually very poor, and have limited use.
Starting a template
The first step in starting a template is determine what it should be called. This is more important than you think! After all, if you create a template called {{
}} NOBODY will use it. It's too much of a hassle to implement.Additionally, if you misname your template, it confuses people upon its use. For example, if you create a template called {{
}} and it actually shows paper dimensions, you will also confuse users (and possibly incite arguments!)Once you have predetermined these factors, you start your template by creating a new document within the template namespace. Let's call this example "add". It will be used to add two numbers. The location is as follows:
http://en.citizendium.org/wiki/Template:add , or Template:Add
Making the template work
After you've created the new page, it's now ready for programming. After all, a blank template will do nothing.
Let's consider what we want the template to do. We're going to take two values, X and Y, and combine their values to produce a third value Z. In order to do this, we have to define these two variables, X and Y. We do this below:
{{{X}}} {{{Y}}}
Now, we have to input the logic to add the numbers. To make mathematical evaluations in wiki software, you must use the {{#expr:}}
or "expression" template. It is implemented as such:
{{#expr: {{{X}}} + {{{Y}}} }}
This tells the template to evaluate the expression "{{{X}}} added to {{{Y}}}". Once this is complete, the template can be called as such:
{{add |X=3 |Y=7 }}
Using the template, we should see the answer below is ten.
Of course, we could have just used the following within the template:
{{#expr: 3 + 7}}
But the problem with this design, is that using the template {{
}} will then always have produced "10", which isn't very flexible, is it? This way, any user can use the Add template to add any two numbers they'd like!From here on, templates can get more complex. There is a great potential for their use. In fact, you can combine many of the elements found in the CZ:How to page to create some fantastic and highly dynamic templates. Be aware though, that the more complex and dynamic your template becomes, the more difficult it may be to implement. Balancing function with design and usability is a tricky feat, as is with all elements of programming.
Please feel encouraged to test out our new template below, by clicking the "edit" next to the subheading. (Note: You don't have to save the page to see the results of your experiment: just click the Show preview button and you will get a look at it.)
Test add template below this line!
How to write a BAD article
There are a number of items that can make an otherwise good article seem awful. Aside from the usual list of making fictituous claims, falsifying information, not presenting an accurate picture, there are other mechcanics that can make an article unreadable and uninteresting. A few of them are listed below:
- Incorrect grammar use and poor sentence structure
- Unncessary over-complication of the scope of an article
- Confusing and or mixing up tenses
- Lack of clear explanations for concepts
- Excessive use of technical terms without explanations
- Throwing facts together with no clear relations between them
- Making incorrect conclusions based on provided information
- Not writing about the core subject but explaining fringe concepts
- Including rhetoric and heresay instead of facts
- Misjudgement of your audience
Citizendium Technical Help | ||
---|---|---|
How to edit an article | Searching | Start article with subpages The Article Checklist | Subpage template |
|width=10% align=center style="background:#F5F5F5"| |}