Added_images_at_correctplace (#3395)

* Added_images_at_correctplace

* changed_alt_tags

* missed_links_corrected

documentation/index.html

@@ -48,13 +48,13 @@ <h1 id="using-music-blocks">Using Music Blocks</h1>
 </tbody>
 </table>
 <p>You can run from <a href="https://musicblocks.sugarlabs.org">https://musicblocks.sugarlabs.org</a>.</p>
-<p><img src="https://raw.githubusercontent.com/sugarlabs/musicblocks/master/documentation/getting-started.png" alt="alt tag" title="Music Blocks in a browser" width="100%"></p>
+<p><img src="getting-started.png" alt="getting-started.png" title="Music Blocks in a browser" width="100%"></p>
 <h2 id="getting-started">Getting Started</h2>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/default.svg" alt="alt tag" title="default blocks"></p>
+<p><img src="default_block.svg" alt="default_block.svg" title="default blocks"></p>
 <p>When you first launch Music Blocks in your browser, you&#39;ll see a stack
-of blocks representing three notes: <code>Sol 4</code>, <code>Mi 4</code>, and <code>Sol 4</code>. The
+of blocks representing three notes: <code>Sol 4</code>, <code>Mi 4</code>, and <code>Sol 2</code>. The
 first two notes are <code>1/4</code> notes; the third note is a <code>1/2</code> note.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/header-icons/play-button.svg" alt="alt tag" title="play button"></p>
+<p><img src="../header-icons/play-button.svg" alt="play-button.svg" title="play button"></p>
 <p>Try clicking on the <em>Start</em> block or click on the <em>Play</em> button. You should hear the notes play in succession: <code>Sol</code> <code>Mi</code> <code>Sol</code>.</p>
 <p>To write your own programs, drag blocks from their respective palettes
 on the left side of the screen. Use multiple blocks in stack(s) to
@@ -116,7 +116,7 @@ <h2 id="block-palettes">Block Palettes</h2>
 <p>All of the other palettes are described in the 
 <a href="http://github.com/sugarlabs/turtleblocksjs/tree/master/documentation">Turtle Blocks documentation pages</a>.</p>
 <h2 id="defining-a-note">Defining a note</h2>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/notevalue.svg" alt="alt tag" title="the note"></p>
+<p><img src="notecounter_block.svg" alt="notecounter_block.svg" title="the note"></p>
 <p>At the heart of Music Blocks is the concept of a note. A note, defined
 by the <em>Note value</em> block defines a length of time and a set of
 actions to occur in that time. Typically the action is to play a
@@ -131,7 +131,7 @@ <h2 id="defining-a-note">Defining a note</h2>
 quarter note is half as long as a half note. By default, Music Blocks
 will play 90 quarter notes per second, so each quarter note is <code>2/3</code>
 seconds (<code>666</code> microseconds) in duration.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/pitch.svg" alt="alt tag" title="Pitch block"></p>
+<p><img src="pitch_block.svg" alt="pitch_block.svg" title="Pitch block"></p>
 <p>The <em>Pitch</em> block (found on the Pitch Palette) is used to specify the
 pitch of a note. By default, we use traditional western Solfege, i.e.,
 <code>Do</code>, <code>Re</code>, <code>Mi</code>, <code>Fa</code>, <code>Sol</code>, <code>La</code>, <code>Ti</code>, where <code>Do</code> is mapped to
@@ -144,8 +144,8 @@ <h2 id="defining-a-note">Defining a note</h2>
 <p>In addition to specifying the note name, you must also specify an
 octave. The frequency of a note doubles as the octave increases. <code>A2</code> is
 <code>110 Hertz</code>; <code>A3</code> is <code>220 Hertz</code>; <code>A4</code> is <code>440 Hertz</code>; etc.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/solfege.svg" alt="alt tag" title="Solfege block"></p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/pitchname.svg" alt="alt tag" title="Pitch-Name block"></p>
+<p><img src="solfege_block.svg" alt="solfege_block.svg" title="Solfege block"></p>
+<p><img src="pitchdrummatrix_block.svg" alt="pitchdrummatrix_block.svg" title="Pitch-Name block"></p>
 <p>Two special blocks can be used with a <em>Pitch</em> block to specify the
 name of the pitch: the <em>Solfege</em> block and the <em>Pitch-Name</em> block. The
 <em>Solfege</em> block uses selectors to scroll through <code>Do</code>, <code>Re</code>, <code>Mi</code>,
@@ -159,31 +159,31 @@ <h2 id="defining-a-note">Defining a note</h2>
 will play together as a chord. You can also insert graphics blocks
 inside a note in order to create sound-sync animations.</p>
 <h2 id="a-quick-tour-of-selected-blocks">A quick tour of selected blocks</h2>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/settimbre.svg" alt="alt tag" title="Set timbre block"></p>
+<p><img src="settimbre_block.svg" alt="settimbre_block.svg" title="Set timbre block"></p>
 <p>The <em>Set timbre</em> block, found on the <em>Tone</em> palette, lets you choose a
 timbre for a note. In the above example, a guitar model is used to
 make any notes contained within the block&#39;s clamp will sound as if
 they are being played on a guitar.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/setsynthvolume.svg" alt="alt tag" title="Set synth volume"></p>
+<p><img src="setsynthvolume_block.svg" alt="setsynthvolume_block.svg" title="Set synth volume"></p>
 <p>The <em>Set synth volume</em> block, found on the <em>Volume</em> palette, lets you
 change the volume, which ranges from <code>0</code> (silent) to <code>100</code> (full
 volume), of any notes contained with the block&#39;s clamp.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/settimbre.svg" alt="alt tag" title="Set drum block"></p>
+<p><img src="settimbre_block.svg" alt="settimbre_block.svg" title="Set drum block"></p>
 <p>The <em>Set drum</em> block, which is used inside of the clamp of a <em>Note
 value</em> block is used to add drum sounds to a note. It is found on the
 <em>Drum</em> palette.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/repeat.svg" alt="alt tag" title="Repeat"></p>
+<p><img src="repeat_block.svg" alt="repeat_block.svg" title="Repeat"></p>
 <p>The <em>Repeat</em> block, found on the <em>Flow</em> palette, is used to create
 loops. Whatever stack of blocks are placed inside its clamp will be
 repeated. It can be used to repeat individual notes, or entire phrases
 of music.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/duplicate-notes.svg" alt="alt tag" title="Duplicate block"></p>
+<p><img src="duplicatenotes_block.svg" alt="duplicatenotes_block.svg" title="Duplicate block"></p>
 <p>The <em>Duplicate</em> block, found on the <em>Rhythms</em> palette, is used to
 repeat any contained notes. Similar to using a <em>Repeat</em> block, but
 rather than repeating a sequence of notes multiple times, each note is
 repeated in turn, e.g. duplicate x2 of <code>4 4 8</code> would result in <code>4 4 4
 4 8 8</code>, where as repeat x2 of <code>4 4 8</code> would result in <code>4 4 8 4 4 8</code>.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/start.svg" alt="alt tag" title="Start"></p>
+<p><img src="start_block.svg" alt="start_block.svg" title="Start"></p>
 <p>The <em>Start</em> block, found on the <em>Action</em> palette, is tied to the <em>Run</em>
 button. Anything inside of the clamp of the <em>Start</em> button will be run
 when the button is pressed.</p>
@@ -194,8 +194,8 @@ <h2 id="a-quick-tour-of-selected-blocks">A quick tour of selected blocks</h2>
 one mouse cannot draw two lines at the same time. If you want
 counterpoint, pull out an additional <em>Start</em> block, which will create
 a new mouse that can now perform a new voice.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/action.svg" alt="alt tag" title="Action"></p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/chunk.svg" alt="alt tag" title="chunk"></p>
+<p><img src="action_block.svg" alt="action_block.svg" title="Action"></p>
+<p><img src="time_block.svg" alt="time_block.svg" title="chunk"></p>
 <p>The <em>Action</em> block, also found on the <em>Action</em> palette, is used to
 create a collection of blocks that can be run as a group. Whenever you
 create an <em>Action</em> block, a new block corresponding to that action is
@@ -208,69 +208,69 @@ <h2 id="a-quick-tour-of-selected-blocks">A quick tour of selected blocks</h2>
 an event, such as an on beat or off beat or mouse click. See
 <a href="http://github.com/sugarlabs/musicblocks/tree/master/guide/README.md">Music Blocks Programming Guide</a>,
 for further details and examples.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/storein.svg" alt="alt tag" title="storein"></p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/box.svg" alt="alt tag" title="box"></p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/add1.svg" alt="alt tag" title="add one"></p>
+<p><img src="storein_block.svg" alt="storein_block.svg" title="storein"></p>
+<p><img src="box_block.svg" alt="box_block.svg" title="box"></p>
+<p><img src="incrementOne_block.svg" alt="incrementOne_block.svg" title="add one"></p>
 <p>The <em>Store in</em> block, found on the <em>Boxes</em> palette, is used to store a
 value. That value can be retrieved using the <em>Box</em> block. The value
 can be modified using the <em>Add one</em> block. These blocks are the
 typical way in which variables are stored and retrieved in Music
 Blocks.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/forward.svg" alt="alt tag" title="forward"></p>
+<p><img src="forward_block.svg" alt="forward_block.svg" title="forward"></p>
 <p>The <em>Forward</em> block, found on the <em>Mouse</em> palette, is used to draw straight lines. (Note that if this block is used inside of a <em>Note value</em> block&mdash;the line will be drawn as the note plays; otherwise the line is drawn &quot;instantly&quot;.)</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/right.svg" alt="alt tag" title="right"></p>
+<p><img src="right_block.svg" alt="right_block.svg" title="right"></p>
 <p>The <em>Right</em> block, found on the <em>Mouse</em> palette, is used to rotate the
 mouse heading. (Note that if this block is used inside of a <em>Note
 value</em> block&mdash;the heading will change as the note plays;
 otherwise the heading is changed &quot;instantly&quot;.)</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/penup.svg" alt="alt tag" title="pen up"></p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/pendown.svg" alt="alt tag" title="pen down"></p>
+<p><img src="penup_block.svg" alt="penup_block.svg" title="pen up"></p>
+<p><img src="pendown_block.svg" alt="pendown_block.svg" title="pen down"></p>
 <p>The <em>Pen up</em> and <em>Pen down</em> blocks, found on the <em>Pen</em> palette,
 determine whether or not the mouse draws as it moves.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/setshade.svg" alt="alt tag" title="set shade"></p>
+<p><img src="setshade_block.svg" alt="setshade_block.svg" title="set shade"></p>
 <p>The <em>Set shade</em> block, also found on the <em>Pen</em> palette, is used to set
 the lightness or darkness of the &quot;ink&quot; used in the mouse pen. <code>set
 shade 0</code> is black. <code>set shade 100</code> is white.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/setcolor.svg" alt="alt tag" title="set color"></p>
+<p><img src="setcolor_block.svg" alt="setcolor_block.svg" title="set color"></p>
 <p>The <em>Set color</em> block, also found on the <em>Pen</em> palette, is used to set
 the color of the &quot;ink&quot; used in the mouse pen. <code>set color 0</code> is
 red. <code>set color 70</code> is blue.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/random.svg" alt="alt tag" title="random"></p>
+<p><img src="random_block.svg" alt="random_block.svg" title="random"></p>
 <p>The <em>Random</em> block, found on the <em>Numbers</em> palette, is used to
 generate a random number, because sometimes being unpredictable is
 nice.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/oneof.svg" alt="alt tag" title="on of this or that"></p>
+<p><img src="oneOf_block.svg" alt="oneOf_block.svg" title="on of this or that"></p>
 <p>The <em>One of</em> block, also found on the <em>Numbers</em> palette, is used to
 generate a binary choice, one of &quot;this&quot; or &quot;that&quot;, because sometimes
 being unpredictable is nice.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/show.svg" alt="alt tag" title="show media"></p>
+<p><img src="show_block.svg" alt="show_block.svg" title="show media"></p>
 <p>The <em>Show</em> block, found on the <em>Media</em> palette, is used to display
 text and images.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/shell.svg" alt="alt tag" title="shell"></p>
+<p><img src="showblocks_block.svg" alt="showblocks_block.svg" title="shell"></p>
 <p>The <em>Shell</em> block, also found on the <em>Media</em> palette, is used to
 change the appearance of a mouse, which can then act like a &quot;sprite&quot;
 in an animation.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/mousebutton.svg" alt="alt tag" title="mousebutton"></p>
+<p><img src="mousebutton_block.svg" alt="mousebutton_block.svg" title="mousebutton"></p>
 <p>The <em>Mouse button</em> block, found on the <em>Sensors</em> palette, returns true
 if the mouse button is clicked. The mouse button block can be used to
 create some interactivity in your program.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/cursorx.svg" alt="alt tag" title="cursorx"></p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/cursory.svg" alt="alt tag" title="cursory"></p>
+<p><img src="x_block.svg" alt="x_block.svg" title="cursorx"></p>
+<p><img src="y_block.svg" alt="y_block.svg" title="cursory"></p>
 <p>The <em>Cursor x</em> and <em>Cursor y</em> blocks, also found on the <em>Sensors</em> palette, return the X and Y coordinates of the cursor. These blocks can also be used to create interactive programs.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/push.svg" alt="alt tag" title="push"></p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/pop.svg" alt="alt tag" title="pop"></p>
+<p><img src="push_block.svg" alt="push_block.svg" title="push"></p>
+<p><img src="pop_block.svg" alt="pop_block.svg" title="pop"></p>
 <p>The <em>Push</em> and <em>Pop</em> blocks, found on the <em>Heap</em> palette, are used to
 store and retrieve values on/from a first-in, last-out (FILO) program
 heap.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/documentation/print.svg" alt="alt tag" title="print"></p>
+<p><img src="print_block.svg" alt="print_block.svg" title="print"></p>
 <p>The <em>Print</em> block, found on the <em>Extras</em> palette, is used to print
 messages during program execution. It is very useful as a debugging
 tool and also as a means of adding lyrics to your music&mdash;think
 karaoke.</p>
 <h2 id="widget-palette">Widget Palette</h2>
 <p>Music Blocks has various Widgets that can be used within Music Blocks
 to enhance your experience. The <em>Pitch-time matrix</em> is described here.</p>
-<p><img src="https://raw.githubusercontent.com/sugarlabs/musicblocks/master/documentation/chords.png" alt="alt tag" title="The Pitch-Time Matrix" width="100%"></p>
+<p><img src="matrix_block.svg" alt="matrix_block.svg" title="The Pitch-Time Matrix" width="100%"></p>
 <p>Many of the blocks on this palette are used to create a matrix of
 &quot;pitch&quot; and &quot;note value&quot;. The matrix is a convenient and intuitive way
 for generating short musical gestures, which can be regenerated as a
@@ -281,12 +281,12 @@ <h2 id="widget-palette">Widget Palette</h2>
 &quot;rhythmic tablature&quot; that should be readable by both those familiar
 with the concepts of rhythm in music and those unfamiliar (but
 familiar with math).</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/guide/matrix1.svg" alt="alt tag" title="Pitch-time Matrix blocks"></p>
+<p><img src="../guide/matrix1.svg" alt="matrix1.svg" title="Pitch-time Matrix blocks"></p>
 <p><em>Pitch-time Matrix</em> blocks clamp is used to define the matrix:
 A row in the matrix is created for each <em>Pitch</em> block and columns are
 created for individual notes, which are created by using <em>Rhythm</em>
 blocks, individual note blocks, or the <em>Tuplet</em> block.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/guide/matrix6.svg" alt="alt tag" title="Rhythm block"></p>
+<p><img src="../guide/matrix6.svg" alt="matrix6.svg" title="Rhythm block"></p>
 <p>The <em>Rhythm</em> block is used to specify a series of notes of the same
 duration (e.g., three quarter notes or seven eighth notes). The number
 of notes is the top argument; the bottom argument is the the note
@@ -308,8 +308,8 @@ <h2 id="widget-palette">Widget Palette</h2>
 create columns in the matrix.</p>
 <p>If you would like multiple note values in a row, simply use the
 <em>Repeat</em> block clamp or <em>Duplicate</em> block clamp.</p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/guide/matrix9.svg" alt="alt tag" title="simple Tuplet block"></p>
-<p><img src="https://rawgithub.com/sugarlabs/musicblocks/master/guide/matrix11.svg" alt="alt tag" title="Tuplet clamp"></p>
+<p><img src="../guide/matrix9.svg" alt="matrix9.svg" title="simple Tuplet block"></p>
+<p><img src="../guide/matrix11.svg" alt="matrix11.svg" title="Tuplet clamp"></p>
 <p>The <em>Tuplet</em> block is how we create rhythms that do not fit into a
 simple &quot;power of two&quot; rhythmic space. A tuplet, mathematically, is a
 collection of notes that are scaled to map into a specified