Help:MediaWiki basics/Intermediate training - Revision history

Shawndouglas: Text replacement - "LIMS vendor" to "LIMS vendor"

2024-03-29T19:18:10Z

Text replacement - "LIMS vendor" to "LIMS vendor"

← Older revision		Revision as of 19:18, 29 March 2024
Line 176:		Line 176:
	===Tables===		===Tables===

	If you haven't noticed, tables are used in many places throughout this wiki. Some tables are obvious, as found in the [[LIMS vendor]] page. If you open that link in another tab, you'll notice several burly tables containing [[laboratory information management system]] (LIMS) vendors and their offerings. Other tables are not so obvious. Does the following look like a table?		If you haven't noticed, tables are used in many places throughout this wiki. Some tables are obvious, as found in the [[Vendor:LIMS vendor\|LIMS vendor]] page. If you open that link in another tab, you'll notice several burly tables containing [[laboratory information management system]] (LIMS) vendors and their offerings. Other tables are not so obvious. Does the following look like a table?

	{\| cellspacing="0" cellpadding="0" style="margin:0em 0em 1em 0em; width:260px"		{\| cellspacing="0" cellpadding="0" style="margin:0em 0em 1em 0em; width:260px"

Shawndouglas: /* Advanced tables */ URL tweak

2024-02-14T20:26:04Z

Advanced tables: URL tweak

← Older revision		Revision as of 20:26, 14 February 2024
Line 296:		Line 296:
	* The table features one grand column header spanning five columns, then in the next row there are four separate column headers, each preceded by the ! character.		* The table features one grand column header spanning five columns, then in the next row there are four separate column headers, each preceded by the ! character.

	For learning more about CSS and inline styles, visit [~~http~~://www.w3schools.com/css/css_howto.asp w3schools.com].		For learning more about CSS and inline styles, visit [https://www.w3schools.com/css/css_howto.asp w3schools.com].

	For more on tables and their parameters, see the [https://www.mediawiki.org/wiki/Help:Tables MediaWiki help page] on the topic.		For more on tables and their parameters, see the [https://www.mediawiki.org/wiki/Help:Tables MediaWiki help page] on the topic.

Shawndouglas: Fixed Other media spacing issues.

2013-11-04T19:31:32Z

Fixed Other media spacing issues.

← Older revision		Revision as of 19:31, 4 November 2013
Line 129:		Line 129:
	Here's an example of a Wikimedia Commons sound file in .ogg format:		Here's an example of a Wikimedia Commons sound file in .ogg format:

	[[File:Accordion chords-01.ogg\|noicon]] ...using the code <code><nowiki>[[File:Accordion chords-01.ogg\|noicon]]</nowiki></code>		[[File:Accordion chords-01.ogg\|noicon]]

			...using the code <code><nowiki>[[File:Accordion chords-01.ogg\|noicon]]</nowiki></code>

	And here's an example using a Wikimedia Commons video file in .ogg format:		And here's an example using a Wikimedia Commons video file in .ogg format:

	[[File:Open research.ogg\|thumb\|left\|~~200px~~\|Open science]] ...using the code <code><nowiki>[[File:Open research.ogg\|thumb\|left\|~~200px~~\|Open science]]</nowiki></code>		[[File:Open research.ogg\|thumb\|left\|160px\|Open science]]

			<br /> <br /> <br />

			...using the code <code><nowiki>[[File:Open research.ogg\|thumb\|left\|160px\|Open science]]</nowiki></code>

			<br /> <br /> <br /> <br />

	For more information about the parameters you can use with audio and video files:		For more information about the parameters you can use with audio and video files:

Shawndouglas: Fixed pre tags

2013-10-28T17:31:35Z

Fixed pre tags

← Older revision		Revision as of 17:31, 28 October 2013
Line 17:		Line 17:
	If you viewed the beginner training guide, you likely noticed several instances of gray boxes with wiki code and other text in them. How do you display that content like that without the system running any associated code? You do it by using the preformatted text tag <nowiki><pre></nowiki> to display the code without rendering it. For example, here is the code used to create that box at the top of this page, displayed (but not run) using the <nowiki><pre></nowiki> tag, the content, and then the closing <nowiki></pre></nowiki>:		If you viewed the beginner training guide, you likely noticed several instances of gray boxes with wiki code and other text in them. How do you display that content like that without the system running any associated code? You do it by using the preformatted text tag <nowiki><pre></nowiki> to display the code without rendering it. For example, here is the code used to create that box at the top of this page, displayed (but not run) using the <nowiki><pre></nowiki> tag, the content, and then the closing <nowiki></pre></nowiki>:

	<pre style="~~overflow~~: ~~auto~~">		<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;">
	{{ombox		{{ombox
	\| type = notice		\| type = notice
Line 39:		Line 39:
	We achieve that by doing the following:		We achieve that by doing the following:

	<pre style="~~overflow~~: ~~auto~~">		<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;">
	<code><nowiki>		<code><nowiki>
	{{ombox		{{ombox

Shawndouglas: Added ombox

2013-10-23T20:07:06Z

Added ombox

← Older revision		Revision as of 20:07, 23 October 2013
Line 311:		Line 311:

	5. Go to [[User talk:Shawndouglas]], select "edit", and under your original header you started from the beginner exercise leave a comment stating you've completed the intermediate exercise. Be sure to sign your comment!		5. Go to [[User talk:Shawndouglas]], select "edit", and under your original header you started from the beginner exercise leave a comment stating you've completed the intermediate exercise. Be sure to sign your comment!

			{{ombox
			\| type = notice
			\| image = [[Image:Blue check.svg\|30px]]
			\| style = width: 500px; margin: 4px 0%;
			\| text = Ready to move on? Then head to [[Help:MediaWiki basics/Advanced training\|the advanced training]] or go back to [[Help:MediaWiki basics/Beginner training\|the beginner training]].<p></p>
			}}

	<!---Place all category tags here-->		<!---Place all category tags here-->
	[[Category:LIMSwiki training]]		[[Category:LIMSwiki training]]

Shawndouglas: /* Tables */ Fixed colspan

2013-10-23T01:11:40Z

Tables: Fixed colspan

← Older revision		Revision as of 01:11, 23 October 2013
Line 238:		Line 238:
	{\| class="wikitable collapsible"		{\| class="wikitable collapsible"
	\|-		\|-
	! colspan="5"\| SuperWidgets Product Price List		! colspan="4"\| SuperWidgets Product Price List
	\|-		\|-
	! style="color:brown; background-color:#ffffee;"\| License or add-on		! style="color:brown; background-color:#ffffee;"\| License or add-on
Line 262:		Line 262:
	{\| class="wikitable collapsible"		{\| class="wikitable collapsible"
	\|-		\|-
	! colspan="5"\| SuperWidgets Product Price List		! colspan="4"\| SuperWidgets Product Price List
	\|-		\|-
	! style="color:brown; background-color:#ffffee;"\| License or add-on		! style="color:brown; background-color:#ffffee;"\| License or add-on

Shawndouglas: Added subheader.

2013-10-22T00:11:16Z

Added subheader.

← Older revision		Revision as of 00:11, 22 October 2013
Line 231:		Line 231:
	* You can span multiple columns and rows using the <code>colspan=</code> and <code>rowspan=</code> designators. Note the value is placed inside opening and closing quotes.		* You can span multiple columns and rows using the <code>colspan=</code> and <code>rowspan=</code> designators. Note the value is placed inside opening and closing quotes.
	* Finally, if you modify the cell with something like <code>colspan=</code> or use the <code>style=</code> code to stylize the cell, you'll need to add a second pipe after those elements, followed by the desired content.		* Finally, if you modify the cell with something like <code>colspan=</code> or use the <code>style=</code> code to stylize the cell, you'll need to add a second pipe after those elements, followed by the desired content.

			====Advanced tables====

	Here's a slightly more complicated example for you to ponder over:		Here's a slightly more complicated example for you to ponder over:

Shawndouglas: /* Intermediate exercise */ Clarified exercise.

2013-10-21T23:49:04Z

Intermediate exercise: Clarified exercise.

← Older revision		Revision as of 23:49, 21 October 2013
Line 306:		Line 306:
	* (optional) a WC sound or video file if applicable to your topic		* (optional) a WC sound or video file if applicable to your topic

	4. Save your work. ~~Then go~~ to [[User talk:Shawndouglas]], select "edit", and under your original header you started from the beginner exercise leave a comment stating you've completed the intermediate exercise. Be sure to sign your comment!		4. Save your work. Also, ''note the exact source'' of the quote you pulled for this exercise. You're going to need that information for the [[Help:MediaWiki basics/Advanced training\|advanced training]] exercise.

			5. Go to [[User talk:Shawndouglas]], select "edit", and under your original header you started from the beginner exercise leave a comment stating you've completed the intermediate exercise. Be sure to sign your comment!

	<!---Place all category tags here-->		<!---Place all category tags here-->
	[[Category:LIMSwiki training]]		[[Category:LIMSwiki training]]

Shawndouglas: Added exercise.

2013-10-21T23:46:28Z

Added exercise.

← Older revision		Revision as of 23:46, 21 October 2013
Line 179:		Line 179:
	* internal borders		* internal borders
	* multiple columns and rows		* multiple columns and rows
			</div>
	\|}		\|}

Line 286:		Line 287:

	For learning more about CSS and inline styles, visit [http://www.w3schools.com/css/css_howto.asp w3schools.com].		For learning more about CSS and inline styles, visit [http://www.w3schools.com/css/css_howto.asp w3schools.com].

			For more on tables and their parameters, see the [https://www.mediawiki.org/wiki/Help:Tables MediaWiki help page] on the topic.

			==Intermediate exercise==

			Let's put what you've learned in this training section to practice. You'll want to go to the sandbox you created on your profile page, where you've hopefully already completed the [[Help:MediaWiki basics/Beginner training#Beginner exercise\|beginner exercise]].

			1. Open your sandbox for editing. Read over your previously written material concerning your favorite subject in grade school or university. We're going to modify this content a bit.

			2. After re-reading your content, think of what additional words, numbers, facts, multimedia, etc. you could add to your topic that would utilize what you learned from this training document. You may have to write a new paragraph, rearrange content, etc. See item three for the specifics of what you should be adding.

			3. Integrate the following items into your existing content, modifying the text and its organization as needed:

			* at least two examples of intermediate non-blockquote text formatting described on this page
			* at least one blockquote of text; preferably use a quote from a book, journal, or web page with content relevant to your topic (use [http://books.google.com/ Google Books], [http://scholar.google.com/ Google Scholar], etc. if you need help)
			* at least one relevant to semi-relevant image from [[commons:Main Page\|Wikimedia Commons]] (WC); if you can't find such an image, choose the closest thing you can find from there
			* a table with at least a header row, two normal rows, and three normal columns; use the class "wikitable" and at least one example of <code>colspan=</code> or <code>rowspan=</code>
			* (optional) a WC sound or video file if applicable to your topic

			4. Save your work. Then go to [[User talk:Shawndouglas]], select "edit", and under your original header you started from the beginner exercise leave a comment stating you've completed the intermediate exercise. Be sure to sign your comment!

	<!---Place all category tags here-->		<!---Place all category tags here-->
	[[Category:LIMSwiki training]]		[[Category:LIMSwiki training]]

Shawndouglas: Added content.

2013-10-21T23:17:11Z

Added content.

← Older revision		Revision as of 23:17, 21 October 2013
Line 88:		Line 88:
	Essentially you find an image you want to use on WC and place the name (File:Filename.format) between two opening and closing brackets (as you would an internal link). Of course, there are many additional parameters you can add to the image.		Essentially you find an image you want to use on WC and place the name (File:Filename.format) between two opening and closing brackets (as you would an internal link). Of course, there are many additional parameters you can add to the image.

	[[File:Sm-Wikipuzzlepiece.png\|right]]For example, you can float the image to the right:		[[File:Sm-Wikipuzzlepiece.png\|right]]For example, you can float the image to the right.

	The code: <code><nowiki>[[File:Sm-Wikipuzzlepiece.png\|right]]</nowiki></code> and the image --->		The code: <code><nowiki>[[File:Sm-Wikipuzzlepiece.png\|right]]</nowiki></code> ...and the image --->

	<br />		<br />
Line 134:		Line 134:

	[[File:Open research.ogg\|thumb\|left\|200px\|Open science]] ...using the code <code><nowiki>[[File:Open research.ogg\|thumb\|left\|200px\|Open science]]</nowiki></code>		[[File:Open research.ogg\|thumb\|left\|200px\|Open science]] ...using the code <code><nowiki>[[File:Open research.ogg\|thumb\|left\|200px\|Open science]]</nowiki></code>

			For more information about the parameters you can use with audio and video files:

			* Wikimedia Commons: [[commons:Commons:Video\|Commons:Video]]
			* Wikipedia: [https://en.wikipedia.org/wiki/Wikipedia:Extended_image_syntax#Multimedia_syntax Wikipedia:Extended image syntax#Multimedia syntax]

	'''Templating'''		'''Templating'''
Line 154:		Line 159:
	}}		}}
	</pre>		</pre>

			"But what is a template anyway?" you may ask. We'll talk more about templates in the [[Help:MediaWiki basics/Advanced training\|advanced training]] section. Hopefully the above will make even more sense after that.

	'''Troubleshooting'''		'''Troubleshooting'''

	Some LIMSwiki articles include sound or video files, playable on almost all digital devices. However, your device must have the right software. If your computer or hand-held device does not automatically play these files when you click on them, downloading and installing applicable free software and codecs from the Internet will likely allow you to do so. [http://www.videolan.org/vlc/ VLC Player] is highly recommended for its open-source, non-profit status and its ability to handle most any file type. If you're still having difficulties, consulting Wikipedia's [https://en.wikipedia.org/wiki/Wikipedia:Media_help media help] section may prove useful.		Some LIMSwiki articles include sound or video files, playable on almost all digital devices. However, your device must have the right software. If your computer or hand-held device does not automatically play these files when you click on them, downloading and installing applicable free software and codecs from the Internet will likely allow you to do so. [http://www.videolan.org/vlc/ VLC Player] is highly recommended for its open-source, non-profit status and its ability to handle most any file type. If you're still having difficulties, consulting Wikipedia's [https://en.wikipedia.org/wiki/Wikipedia:Media_help media help] section may prove useful.

			===Tables===

			If you haven't noticed, tables are used in many places throughout this wiki. Some tables are obvious, as found in the [[LIMS vendor]] page. If you open that link in another tab, you'll notice several burly tables containing [[laboratory information management system]] (LIMS) vendors and their offerings. Other tables are not so obvious. Does the following look like a table?

			{\| cellspacing="0" cellpadding="0" style="margin:0em 0em 1em 0em; width:260px"
			\| style="width:90%; vertical-align:top; border:1px solid #aae6ef; background-color: Ivory;-moz-border-radius:10px; border-radius:10px;" rowspan="1"\|
			<div style="border-bottom:1px solid #aae6ef; background-color:#aae6ef; padding:0.2em 0.5em 0.2em 0.5em; font-size:110%; font-weight:bold;-moz-border-radius:10px 10px 0 0; border-radius:10px 10px 0 0;">Hi! I'm a table.</div>
			<div style="padding:0.4em 1em 0.3em 1em;">
			No, really! I'm a table! But I don't have:

			* headers
			* internal borders
			* multiple columns and rows
			\|}

			This is probably more what you were thinking of:

			{\| class="wikitable"
			\|-
			! colspan="6" \| Shopping List
			\|-
			\| rowspan="2" \| Cheese and<br />crackers
			\| Brats
			\| Buns
			\| BBQ sauce
			\| colspan="2" \| Ice cream
			\|-
			\| Wine
			\| colspan="2" \| Beer
			\| Potato chips
			\| Sriracha
			\|-
			\|}

			Let's take a look at the code for that second table:

			<pre>
			{\| class="wikitable"
			\|-
			! colspan="6" \| Shopping List
			\|-
			\| rowspan="2" \| Cheese and<br />crackers
			\| Brats
			\| Buns
			\| BBQ sauce
			\| colspan="2" \| Ice cream
			\|-
			\| Wine
			\| colspan="2" \| Beer
			\| Potato chips
			\| Sriracha
			\|-
			\|}
			</pre>

			Time to point out the important elements...

			* You begin and end a table much like you do with links: an opening tag and a closing tag. In this case, the characters are <code><nowiki>{\|</nowiki></code> and <code><nowiki>\|}</nowiki></code>, the curly brace and the pipe.
			* A default table "style" already exists in the wiki. To add the default style, you simply include <code>class="wikitable"</code> after the opening curly brace and pipe, same line.
			* You can create headers with the ! character followed by the text you want in the header. For each column you want with a header, add an additional ! followed by text.
			* You start and end a row with a pipe followed by a dash (\|-). If a new row follows, you can reuse the previous pipe-dash combo. In the above example, each row of cells technically starts and ends with the <code>\|-</code>.
			* You start a new cell in that row with a pipe followed by a space and the stuff you want in the cell.
			* You can span multiple columns and rows using the <code>colspan=</code> and <code>rowspan=</code> designators. Note the value is placed inside opening and closing quotes.
			* Finally, if you modify the cell with something like <code>colspan=</code> or use the <code>style=</code> code to stylize the cell, you'll need to add a second pipe after those elements, followed by the desired content.

			Here's a slightly more complicated example for you to ponder over:

			{\| class="wikitable collapsible"
			\|-
			! colspan="5"\| SuperWidgets Product Price List
			\|-
			! style="color:brown; background-color:#ffffee;"\| License or add-on
			! style="color:brown; background-color:#ffffee;"\| Number of<br />concurrent users
			! style="color:brown; background-color:#ffffee;"\| Academic price
			! style="color:brown; background-color:#ffffee;"\| Private industrial price
			\|-
			\| '''SuperWidgets full license Super 5'''
			\| style="background-color:white;" align="center"\| 5
			\| style="background-color:white;" \| €1200
			\| style="background-color:white;" \| €2100
			\|-
			\| '''SuperWidgets full license Super 25'''
			\| style="background-color:white;" align="center"\| 25
			\| style="background-color:white;" \| €2300
			\| style="background-color:white;" \| €3800
			\|-
			\|}

			And the code:

			<pre>
			{\| class="wikitable collapsible"
			\|-
			! colspan="5"\| SuperWidgets Product Price List
			\|-
			! style="color:brown; background-color:#ffffee;"\| License or add-on
			! style="color:brown; background-color:#ffffee;"\| Number of<br />concurrent users
			! style="color:brown; background-color:#ffffee;"\| Academic price
			! style="color:brown; background-color:#ffffee;"\| Private industrial price
			\|-
			\| '''SuperWidgets full license Super 5'''
			\| style="background-color:white;" align="center"\| 5
			\| style="background-color:white;" \| €1200
			\| style="background-color:white;" \| €2100
			\|-
			\| '''SuperWidgets full license Super 25'''
			\| style="background-color:white;" align="center"\| 25
			\| style="background-color:white;" \| €2300
			\| style="background-color:white;" \| €3800
			\|-
			\|}
			</pre>

			A lot of that should look familiar after looking at the previous example. But some new elements were introduced, yes?

			* The "collapsible" designator was added in the class quotation marks. This creates the "hide" link you see in the top header. This allows you to hide the rest of the table.
			* Some CSS styling shows up in cells using the <code>style=</code> code, allowing finer control over the way a cell looks.
			* The table features one grand column header spanning five columns, then in the next row there are four separate column headers, each preceded by the ! character.

			For learning more about CSS and inline styles, visit [http://www.w3schools.com/css/css_howto.asp w3schools.com].

	<!---Place all category tags here-->		<!---Place all category tags here-->
	[[Category:LIMSwiki training]]		[[Category:LIMSwiki training]]