Difference between revisions of "SgWiki:Guidebook/Editing & Formatting"
(→HTML & CSS: New sgWiki common CSS class code) |
m |
||
| Line 21: | Line 21: | ||
====Example 1==== | ====Example 1==== | ||
To bold the word "sgWiki" in the following sentence: "Welcome to sgWiki", all you need is to type in the following code.<br> | To bold the word "sgWiki" in the following sentence: "Welcome to sgWiki", all you need to do is to type in the following code.<br> | ||
{{dottedbox|@=Code|#=<nowiki>Welcome to '''sgWiki'''</nowiki>}} | {{dottedbox|@=Code|#=<nowiki>Welcome to '''sgWiki'''</nowiki>}} | ||
{{dottedbox|@=Result|#=Welcome to '''sgWiki'''}} | {{dottedbox|@=Result|#=Welcome to '''sgWiki'''}} | ||
====Example 2==== | ====Example 2==== | ||
To italic the word "sgWiki" in the following sentence: "Welcome to sgWiki", all you need is to type in the following code.<br> | To italic the word "sgWiki" in the following sentence: "Welcome to sgWiki", all you need to do is to type in the following code.<br> | ||
{{dottedbox|@=Code|#=<nowiki>Welcome to ''sgWiki''</nowiki>}} | {{dottedbox|@=Code|#=<nowiki>Welcome to ''sgWiki''</nowiki>}} | ||
{{dottedbox|@=Result|#=Welcome to ''sgWiki''}} | {{dottedbox|@=Result|#=Welcome to ''sgWiki''}} | ||
===Headers=== | ===Headers=== | ||
Headers are | Headers are used to create sections of an article. This helps by keeping articles neater and allowing information without an article to be found more quickly. To put it simply, treat 'Headers' as your textbook/story book chapters. Just like how your textbook chapters have sub-chapters, there is also sub-headers. | ||
To create a header, simply add "<nowiki>=</nowiki>" before and after the text. Do note that the amount of "<nowiki>=</nowiki>" before the text must match the amount of "<nowiki>=</nowiki>" after the text. | To create a header, simply add "<nowiki>=</nowiki>" before and after the text. Do note that the amount of "<nowiki>=</nowiki>" before the text must match the amount of "<nowiki>=</nowiki>" after the text. | ||
| Line 46: | Line 46: | ||
Tables are meant to display information in rows and columns like an excel spreadsheet. It is greatly useful for data as this will present a neater presentation and a glance of a single data can pinpoint to two different information. | Tables are meant to display information in rows and columns like an excel spreadsheet. It is greatly useful for data as this will present a neater presentation and a glance of a single data can pinpoint to two different information. | ||
To create a table, simply add "<nowiki>{|</nowiki>" to | To create a table, simply add "<nowiki>{|</nowiki>" to start a table and "<nowiki>|}</nowiki>" at the end of the table. | ||
A table | A table may consist of rows (horizontal bar) and columns (vertical bar). | ||
To add a row, just add "<nowiki>|-</nowiki> before the table row on a new line. | To add a row, just add "<nowiki>|-</nowiki>" before the table row on a new line. | ||
There are 2 types of columns, or table cells. | There are 2 types of columns, or table cells. One is called header cell, the other is data cell. A header cell is a data cell, but typically, header cells are bolded. | ||
To add a header cell | To add a header cell, just add "<nowiki>!</nowiki>" before the cell on a new line. | ||
To add a data cell | To add a data cell, just add "<nowiki>|</nowiki>" before the cell on a new line. | ||
To style a cell | To style a cell, you may use CSS inline-styling. For more information on the available CSS inline-stylings, you may wish to read [http://www.w3schools.com/cssref/pr_tab_table-layout.asp W3Schools]. | ||
It is a common practice to use a | It is a common practice to use a collapsible table than a non-collapsible table for neater viewing. | ||
====Example 4==== | ====Example 4==== | ||
To create a | To create a collapsible table with 2 rows and 2 columns, the first row is a header row and styled with red background. All you need to do is to type in the following code.<br> | ||
{{dottedbox|@=Code|#=<nowiki>{| style="border-collapse:collapse"</nowiki><br><nowiki>|- style="background-color:#FF000;"</nowiki><br><nowiki>!Column 1</nowiki><br><nowiki>!Column 2</nowiki><br><nowiki>|-</nowiki><br><nowiki>|Column 1</nowiki><br><nowiki>|Column 2</nowiki><br><nowiki>|}</nowiki>}} | {{dottedbox|@=Code|#=<nowiki>{| style="border-collapse:collapse"</nowiki><br><nowiki>|- style="background-color:#FF000;"</nowiki><br><nowiki>!Column 1</nowiki><br><nowiki>!Column 2</nowiki><br><nowiki>|-</nowiki><br><nowiki>|Column 1</nowiki><br><nowiki>|Column 2</nowiki><br><nowiki>|}</nowiki>}} | ||
===HTML & CSS=== | ===HTML & CSS=== | ||
sgWiki | sgWiki supports both HTML and CSS codes. sgWiki utilises the more powerful HTML5 and CSS3 codes provided that your internet browser supports it. However, please limit the usage of certain commands as it may not be compatible with older PCs which some users may be using. For more information about HTML5 and CSS3, you may wish to read [http://www.w3schools.com/ W3Schools]. | ||
For common background colours and font colours used regularly in sgWiki, we | For common background colours and font colours used regularly in sgWiki, we have added in new HTML element classes with specified codes. The following are some of the examples: | ||
*Operators | *Operators | ||
**class="LTA" - Background - #004250, Text - #FFFFFF | **class="LTA" - Background - #004250, Text - #FFFFFF | ||
Revision as of 07:38, 26 December 2019
| Introductions | Editing & Formatting | Links | Citing sources | sgWiki Buses | sgWiki Trains | Ban & Warning Points | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Editing and Formatting of sgWiki articles are much more simpler than html codes. To simply edit an article, just click 'Edit' button/tab on the Top Left-hand button. If the article is not yet created, press 'Create'.
Basic FormattingTo apply basic formatting to text - such as bold and italic, you just need to add "'" before and after the text. Do note that the amount of "'" before the text must match the amount of "'" after the text. Example 1To bold the word "sgWiki" in the following sentence: "Welcome to sgWiki", all you need to do is to type in the following code.
Result
Example 2To italic the word "sgWiki" in the following sentence: "Welcome to sgWiki", all you need to do is to type in the following code.
Result
HeadersHeaders are used to create sections of an article. This helps by keeping articles neater and allowing information without an article to be found more quickly. To put it simply, treat 'Headers' as your textbook/story book chapters. Just like how your textbook chapters have sub-chapters, there is also sub-headers. To create a header, simply add "=" before and after the text. Do note that the amount of "=" before the text must match the amount of "=" after the text. To create a sub-header, simply add an additional "=" before and after the text. Do note that the amount of "=" before the text must match the amount of "=" after the text. Do take note that the number of "=" refers to the type of headers. 1 "=" represents Header 1 which is the biggest header while 6 "="s represents Header 6 which is the smallest header. Example 3To create a header with the text "Hi" and a sub-header with the text "Welcome", all you need is to type in the following code.
TablesTables are meant to display information in rows and columns like an excel spreadsheet. It is greatly useful for data as this will present a neater presentation and a glance of a single data can pinpoint to two different information. To create a table, simply add "{|" to start a table and "|}" at the end of the table. A table may consist of rows (horizontal bar) and columns (vertical bar). To add a row, just add "|-" before the table row on a new line. There are 2 types of columns, or table cells. One is called header cell, the other is data cell. A header cell is a data cell, but typically, header cells are bolded. To add a header cell, just add "!" before the cell on a new line. To add a data cell, just add "|" before the cell on a new line. To style a cell, you may use CSS inline-styling. For more information on the available CSS inline-stylings, you may wish to read W3Schools. It is a common practice to use a collapsible table than a non-collapsible table for neater viewing. Example 4To create a collapsible table with 2 rows and 2 columns, the first row is a header row and styled with red background. All you need to do is to type in the following code.
HTML & CSSsgWiki supports both HTML and CSS codes. sgWiki utilises the more powerful HTML5 and CSS3 codes provided that your internet browser supports it. However, please limit the usage of certain commands as it may not be compatible with older PCs which some users may be using. For more information about HTML5 and CSS3, you may wish to read W3Schools. For common background colours and font colours used regularly in sgWiki, we have added in new HTML element classes with specified codes. The following are some of the examples:
| |||||||||||||||||||||||||