Difference between revisions of "Sandbox"

From Creolista!
Jump to: navigation, search
(Using the edit box buttons)
(Two Modes: read / edit)
 
(21 intermediate revisions by 2 users not shown)
Line 4: Line 4:
 
<br /><br />
 
<br /><br />
  
=Two Modes:  page / edit=
+
=Two Modes:  read / edit=
  
<p>In ''page mode'', you see what a visitor sees.  Nothing can be changed in ''page mode''.<br /><br />
+
<p>In ''read mode'', you see what a visitor sees.  Nothing can be changed in ''read mode''.<br /><br />
 
In ''edit mode'' you see the page with formatting codes.  Everything can be changed in ''edit mode''.<br /><br />
 
In ''edit mode'' you see the page with formatting codes.  Everything can be changed in ''edit mode''.<br /><br />
  
Please enter <b><u>edit mode</u></b> by changing tabs from "page" to "edit" above (next to the picture, at the top).  You may look at history mode too, if you wish. <br /><br />
+
Please enter <b><u>edit mode</u></b> by changing tabs from "read" to "edit" above (near the star above, at the top of the page.  You may look at history mode too, if you wish. <br /><br />
  
 
If you see "<span style="color:darkblue;">view source</span>" instead of "<span style="color:darkblue;">edit</span>" you are not logged in.<br /><br />
 
If you see "<span style="color:darkblue;">view source</span>" instead of "<span style="color:darkblue;">edit</span>" you are not logged in.<br /><br />
  
It is often easier to find [<span style="color:darkblue;">edit</span>] on the right hand side of the page.  This permits editing section by section in structured documents.<br /><br />
+
It is often easier to find [<span style="color:darkblue;">edit</span>] next to each section title.  This permits editing section by section in structured documents.<br /><br />
  
  
 
</p>
 
</p>
  
*NB:  to make changes you must "save" the page (''enregistrer'').  This brings you back to ''page mode'' where you can see the changed text.<br /><br />
+
*NB:  to make changes you must "save" the page, though it is '''always''' best to preview first.  This brings you back to ''read mode'' where you can see the changed text.<br /><br />
 
==Edit mode==
 
==Edit mode==
  
To understand the next part you '''must''' find the buttons in <span style="color:darkblue;"><b><u>edit</u></b>  
+
To understand the next part switch to <span style="color:darkblue;"><b><u>edit</u></b>  
</span>mode! This text is easier to <span style="color:darkblue;">read</span> in '''page''' mode.  ^^  <br /><br />
+
</span>mode. This text is easier to <span style="color:darkblue;">read</span> in '''read''' mode.  ^^  <br /><br />
  
 
===Using the edit box buttons===
 
===Using the edit box buttons===
 
<br />
 
<br />
<p>Under the title of the page '''Sandbox''' (''bac à sable'') you should see 11 buttons (the first two are '''B''' and ''I'')</p>
+
<p>Under the title of the page '''Editing Sandbox''' you should see 11 buttons (the first two are '''B''' and ''I'')</p>
 
 
 
 
<p>Feel free to play, don't worry if you make a mistake.</p><br />
 
  
  
Line 44: Line 41:
 
*can you delete this line and add <i><b>your</b></i> signature?   
 
*can you delete this line and add <i><b>your</b></i> signature?   
 
*'''—''' = horizontal line...
 
*'''—''' = horizontal line...
<br />
 
<p>Again, feel free to play, don't worry if you make a mistake.<br />
 
::You <i>can't</i> break the wiki.  <br />
 
::::::Well, ok, maybe you <i>could</i> break it if you really tried.
 
:::::::::: But that wouldn't be very nice.  :^ö <br /><br />
 
  
You can type some text in the box below and modify it (click on [<span style="color:darkblue;">edit</span>] on the right): </p><br /><br />
+
 
 +
You can type some text in the box below and modify it (click on [<span style="color:darkblue;">edit</span>] on the right): </p>
 
====TESTING GROUND====
 
====TESTING GROUND====
<br />
+
 
 
<p style="border: 6px dashed darkred;">
 
<p style="border: 6px dashed darkred;">
  
Line 80: Line 73:
 
*<span style="color:darkblue;">&lt;span&gt;</span> = opening tag for a chunk of text,  <span style="color:darkblue;">&lt;/span&gt;</span> = closing tag for a chunk of text   
 
*<span style="color:darkblue;">&lt;span&gt;</span> = opening tag for a chunk of text,  <span style="color:darkblue;">&lt;/span&gt;</span> = closing tag for a chunk of text   
 
*<span style="color:darkblue;">&lt;span style="color:darkgreen;"&gt;</span> = opening tag to <span style="color:darkgreen;">color a chunk of text green</span>,  <span style="color:darkblue;">&lt;/span&gt;</span> = closing tag for the chunk of green text  <br />
 
*<span style="color:darkblue;">&lt;span style="color:darkgreen;"&gt;</span> = opening tag to <span style="color:darkgreen;">color a chunk of text green</span>,  <span style="color:darkblue;">&lt;/span&gt;</span> = closing tag for the chunk of green text  <br />
 +
:::NB:  You can also mix your own colors, if you wish. 
 +
:::*&lt;span style="color:#000;"&gt; is <span style="color:#000;">black</span>
 +
:::*&lt;span style="color:#FFF;"&gt; is <span style="color:#FFF;">white</span>
 +
:::*&lt;span style="color:#888;"&gt; is <span style="color:#888;">gray</span> (or <span style="color:#888;">grey</span>)
 +
:::*&lt;span style="color:#400;"&gt; is <span style="color:#400;">dark red</span>
  
 
*<span style="color:darkblue;">&lt;br /&gt;</span> = opening '''and''' closing tag for a line break.
 
*<span style="color:darkblue;">&lt;br /&gt;</span> = opening '''and''' closing tag for a line break.
Line 88: Line 86:
  
  
<span style="color:hotpink;">Feel free to <b>switch</b> back and forth between <u>Edit</u>  and <u>Page</u> mode for the next sections.</span>  <br /> ( just click on [<span style="color:darkblue;">edit</span>] on the right, if you don't want to edit the whole page.)
+
<span style="color:darkred;">Feel free to <b>switch</b> back and forth between</span> <u>Edit</u>  <span style="color:darkred;">and</span> <u>Page</u> <span style="color:darkred;">mode for the next sections.</span>  <br /> <br /> ( just click on [<span style="color:darkblue;">edit</span>] on the right, if you don't want to edit the whole page.)
  
  
Line 97: Line 95:
 
with two <u>line breaks</u> and twenty-two <i>pink dots</i>.</p>
 
with two <u>line breaks</u> and twenty-two <i>pink dots</i>.</p>
  
<!-- this is an invisible comment, and below are two more linebreaks and a horizontal rule <hr> (line) -->
+
<!-- this is an invisible comment, and below are two more linebreaks, a horizontal rule <hr> (line), and a textbox. -->
  
 
<hr>
 
<hr>
Line 103: Line 101:
 
<br /><br />
 
<br /><br />
  
===Using MediaWiki / Wikipedia syntax===
+
<span style="color:hotpink;border:3px dotted darkred;padding:2px;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  ! PLEASE EDIT THIS SECTION !  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  
 
<br /><br />
 
<br /><br />
  
 
+
===Using MediaWiki / Wikipedia syntax===
 
====The number (#) sign ====
 
====The number (#) sign ====
 
 
# To make a numbered list...  
 
# To make a numbered list...  
 
# Use # at the beginning of the line.
 
# Use # at the beginning of the line.
Line 116: Line 113:
 
### or even three times
 
### or even three times
 
# That's how you make a numbered list.
 
# That's how you make a numbered list.
 +
#beware! if you
 +
#skip a line,
  
 
+
#this happens,
<br /><br />
+
#and your numbering starts over.
  
 
====The asterisk (*)====
 
====The asterisk (*)====
 
 
* To make a "bullet" list..
 
* To make a "bullet" list..
 
* Use an asterisk (*) at the start of the line.
 
* Use an asterisk (*) at the start of the line.
 
** To add a layer, use two!
 
** To add a layer, use two!
 
*** or three.
 
*** or three.
 +
***# You can even mix things up!
 +
***# That's ***#.
 
*  Pretty simple, huh?
 
*  Pretty simple, huh?
 
<br /><br />
 
  
 
====The equal (=) sign ====
 
====The equal (=) sign ====
 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  equal sign = <span style="color:darkgreen;">''''i:''' &nbsp; kwəl &nbsp; '''saɪn'''</span>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; equality = <span style="color:darkgreen;">i: ''''kwal''' ɪ ti</span>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  equal sign = <span style="color:darkgreen;">''''i:''' &nbsp; kwəl &nbsp; '''saɪn'''</span>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; equality = <span style="color:darkgreen;">i: ''''kwal''' ɪ ti</span>
  
*The equal sign (=) is '''not''' used to mark equality in wiki syntax.   
+
*The equal sign (=) is '''not''' used to mark equality in wiki syntax.  It marks a header level.   
 
**Just as the # and * signs are used to mark hierarchical levels in a list
 
**Just as the # and * signs are used to mark hierarchical levels in a list
 
** = is used to add structure to the document.
 
** = is used to add structure to the document.
**Each and every heading is a section.
+
**Each and every heading is a section which can be edited separately
  
* Please look at the <span style="color:darkblue;">table of '''contents'''</span> in "page" mode.  Click on <b><i>hide</i></b>, then <b><i>show</i></b>.
+
* Please look at the <span style="color:darkblue;">table of '''contents'''</span> in "read" mode.  Click on <b><i>hide</i></b>, then <b><i>show</i></b>.
 
* Return to <span style="color:hotpink;"><b>edit mode</b></span> and delete the asterisks at the beginning of the six lines below, then press <b>save page</b>:
 
* Return to <span style="color:hotpink;"><b>edit mode</b></span> and delete the asterisks at the beginning of the six lines below, then press <b>save page</b>:
 
  
 
*  =Heading 1=
 
*  =Heading 1=
Line 150: Line 146:
 
*  =Heading 1=
 
*  =Heading 1=
  
 
+
<p>You return to <span style="color:hotpink;"><b>read mode</b></span> when you press <b>save</b>. How does the <span style="color:darkblue;">table of '''contents'''</span> look now?</p>
<p>You return to <span style="color:hotpink;"><b>page mode</b></span> when you press <b>save</b>. How does the <span style="color:darkblue;">table of '''contents'''</span> look now?</p>
 
 
 
<br /> <br />
 
  
 
====The apostrophe (')====
 
====The apostrophe (')====
<br />
 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a'''po'''strophe(s) = <span style="color:green;">ə ''''pa:''' strə fi:(z)</span>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a'''po'''strophe(s) = <span style="color:green;">ə ''''pa:''' strə fi:(z)</span>
 
<br /><br /><br />
 
<br /><br /><br />
Line 163: Line 155:
 
*''italic'' (2 apostrophes before <u>and</u> after)
 
*''italic'' (2 apostrophes before <u>and</u> after)
 
*'''''bold italic''''' (5 apostrophes before <u>and</u> after)
 
*'''''bold italic''''' (5 apostrophes before <u>and</u> after)
<br /> <br />
+
 
 +
=ABBR pop-up, dotted underlining=
 +
&lt;abbr title="superb!"&gt;<abbr title="superb!">excellent!</abbr>&lt;abbr&gt;
 +
:Cf.  [https://www.w3schools.com/tags/tag_abbr.asp W3 Schools]
  
 
=Further information=
 
=Further information=
Line 169: Line 164:
 
* On [http://www.mediawiki.org/wiki/Help:Contents media-wiki]
 
* On [http://www.mediawiki.org/wiki/Help:Contents media-wiki]
 
* On [http://www.w3schools.com/html/default.asp HTML]
 
* On [http://www.w3schools.com/html/default.asp HTML]
 +
 +
[[Category: en.wiki]]

Latest revision as of 18:44, 17 March 2020

The goal of this page is to help you edit a media-wiki page. (Media-wiki is the software used on this page and at Wikipedia.)

      PLEASE EDIT THIS PAGE.      

Two Modes: read / edit

In read mode, you see what a visitor sees. Nothing can be changed in read mode.

In edit mode you see the page with formatting codes. Everything can be changed in edit mode.

Please enter edit mode by changing tabs from "read" to "edit" above (near the star above, at the top of the page. You may look at history mode too, if you wish.

If you see "view source" instead of "edit" you are not logged in.

It is often easier to find [edit] next to each section title. This permits editing section by section in structured documents.

  • NB: to make changes you must "save" the page, though it is always best to preview first. This brings you back to read mode where you can see the changed text.

Edit mode

To understand the next part switch to edit mode. This text is easier to read in read mode. ^^

Using the edit box buttons


Under the title of the page Editing Sandbox you should see 11 buttons (the first two are B and I)


  • B = bold (French gras)
  • I = italic
  • Ab = internal link to a page like Poetry
  • earth = external link to a page like State Quarters
  • A = an automatic heading: not very useful if you master the = sign (see below)
  • picture = to add a file (may not work yet)
  • trumpet = media file (may not work yet)
  • square root of n = math (formulae, special symbols)
  • canceled W = unformatted text: not very useful.
  • (signature) = Here's mine: --teacher 16:59, 30 March 2015 (CEST)
  • can you delete this line and add your signature?
  • = horizontal line...


You can type some text in the box below and modify it (click on [edit] on the right): </p>

TESTING GROUND







Can you add a link to the wikipedia page about the scholar Al Kindi to this sentence?



Understanding the next part is easier in page mode!




Using HTML(5)



  • <p> = opening tag for a paragraph, </p> = closing tag for a paragraph
  • <span> = opening tag for a chunk of text, </span> = closing tag for a chunk of text
  • <span style="color:darkgreen;"> = opening tag to color a chunk of text green, </span> = closing tag for the chunk of green text
NB: You can also mix your own colors, if you wish.
  • <span style="color:#000;"> is black
  • <span style="color:#FFF;"> is white
  • <span style="color:#888;"> is gray (or grey)
  • <span style="color:#400;"> is dark red
  • <br /> = opening and closing tag for a line break.


  • <b> <i> <u> = opening tags for boldface, italics, underline . . . </b> </i> </u> = closing tags for boldface, italics, underline


Feel free to switch back and forth between Edit and Page mode for the next sections.

( just click on [edit] on the right, if you don't want to edit the whole page.)


example

This is a very short paragraph
. . . . . . . . . . . . . . . . . . . . . .
with two line breaks and twenty-two pink dots.





       ! PLEASE EDIT THIS SECTION !      



Using MediaWiki / Wikipedia syntax

The number (#) sign

  1. To make a numbered list...
  2. Use # at the beginning of the line.
    1. To add a layer, use two!
    2. You can even do it twice.
      1. or even three times
  3. That's how you make a numbered list.
  4. beware! if you
  5. skip a line,
  1. this happens,
  2. and your numbering starts over.

The asterisk (*)

  • To make a "bullet" list..
  • Use an asterisk (*) at the start of the line.
    • To add a layer, use two!
      • or three.
        1. You can even mix things up!
        2. That's ***#.
  • Pretty simple, huh?

The equal (=) sign

                              equal sign = 'i:   kwəl   saɪn           equality = i: 'kwal ɪ ti

  • The equal sign (=) is not used to mark equality in wiki syntax. It marks a header level.
    • Just as the # and * signs are used to mark hierarchical levels in a list
    • = is used to add structure to the document.
    • Each and every heading is a section which can be edited separately
  • Please look at the table of contents in "read" mode. Click on hide, then show.
  • Return to edit mode and delete the asterisks at the beginning of the six lines below, then press save page:
  • =Heading 1=
  • ==Heading 2==
  • ===Heading 3===
  • ====Heading 4====
  • =Heading 1=
  • =Heading 1=

You return to read mode when you press save. How does the table of contents look now?

The apostrophe (')

                     apostrophe(s) = ə 'pa: strə fi:(z)


can also be used for

  • bold (3 apostrophes before and after)
  • italic (2 apostrophes before and after)
  • bold italic (5 apostrophes before and after)

ABBR pop-up, dotted underlining

<abbr title="superb!">excellent!<abbr>

Cf. W3 Schools

Further information