diff options
Diffstat (limited to 'lessons/fisika/atom')
| -rw-r--r-- | lessons/fisika/atom/atom.html | 34 | ||||
| -rw-r--r-- | lessons/fisika/atom/electron-config.html | 74 |
2 files changed, 104 insertions, 4 deletions
diff --git a/lessons/fisika/atom/atom.html b/lessons/fisika/atom/atom.html index bc75271..a15d8dc 100644 --- a/lessons/fisika/atom/atom.html +++ b/lessons/fisika/atom/atom.html @@ -66,14 +66,46 @@ <strong>Atomic Mass</strong> - <strong>Atomic Number</strong> = Neutron Number <h2 id="proton-electron-neutron-count--example">Examples</h2> <div class="flex" style="width: 100%;"> - <img src="/assets/images/atoms/natrium_symbol.svg" alt="" style="max-width: 200px; margin: 20px;"> + <img src="/assets/images/atoms/natrium_symbol.svg" alt="" + style="max-width: 200px !important; margin: 20px;"> <p> <strong>Proton:</strong> 11<br> <strong>Electron:</strong> 11<br> <strong>Neutron:</strong> 23 - 11 = 12 </p> </div> + <div class="flex" style="width: 100%;"> + <img src="/assets/images/atoms/carbon_symbol.svg" alt="" + style="max-width: 200px !important; margin: 20px;"> + <p> + <strong>Proton:</strong> 6<br> + <strong>Electron:</strong> 6<br> + <strong>Neutron:</strong> 12 - 6 = 6 + </p> + </div> <h1 id="ions">Ions</h1> + Electron count will be added or subtracted by ion charge. <br> + If the ion charge is positive, subtract the electron count. <br> + If the ion charge is negative, add the electron count. For example: + <div class="flex" style="width: 100%;"> + <img src="/assets/images/atoms/carbon_symbol_ion.svg" alt="" + style="max-width: 200px !important; margin: 20px;"> + <p> + <strong>Proton:</strong> 6<br> + <strong>Electron:</strong> 6 + 4 = 10<br> + <strong>Neutron:</strong> 12 - 6 = 6 + </p> + </div> + <div class="flex" style="width: 100%;"> + <img src="/assets/images/atoms/magnesium_symbol_ion.svg" alt="" + style="max-width: 200px !important; margin: 20px;"> + <p> + <strong>Proton:</strong> 6<br> + <strong>Electron:</strong> 6 - 2 = 4<br> + <strong>Neutron:</strong> 24 - 12 = 12 + </p> + </div> + </section> </div> diff --git a/lessons/fisika/atom/electron-config.html b/lessons/fisika/atom/electron-config.html index 02120f8..31111d9 100644 --- a/lessons/fisika/atom/electron-config.html +++ b/lessons/fisika/atom/electron-config.html @@ -48,6 +48,29 @@ <div class="flex flex-center"> <img src="/assets/images/atoms/electron_configuration.svg" alt=""> </div> + <h2 id="electron-config--max-electron">Sub-Shell and Maximum Electron</h2> + <table> + <tr> + <th>Sub-Shell</th> + <th>Maximum Electron</th> + </tr> + <tr> + <td>s</td> + <td>2</td> + </tr> + <tr> + <td>p</td> + <td>6</td> + </tr> + <tr> + <td>d</td> + <td>10</td> + </tr> + <tr> + <td>f</td> + <td>14</td> + </tr> + </table> <h2 id="electron-config--how-to-read">How to Read / Order</h2> <ol> <li>Start from the top-most arrow</li> @@ -55,18 +78,63 @@ <ol> <li>1s, 2s, 2p, 3s</li> </ol> - <li>Exponent the electron with maximum number of electron until the total of exponents is equals to Atom Number.</li> - <li>If the total is more than Atom Number, subtract the the last electron's exponent to make the total equals to the atom number.</li> + <li>Exponent the electron with maximum number of sub-shell until the total of exponents is equals to + Atom Number.</li> + <li>If the total is more than Atom Number, subtract the the last electron's exponent to make the total + equals to the atom number.</li> </ol> <h2 id="electron-config--examples">Examples</h2> + <div class="flex flex-center" style="width: 100%;"> + <div class="flex column"> + <img src="/assets/images/atoms/magnesium_symbol.svg" alt="" + style="max-width: 200px !important; margin: 20px;"> + <span>1s<sup>2</sup>, 2s<sup>2</sup>, 2p<sup>6</sup>, 3s<sup>2</sup>, 3p<sup>2</sup></span> + </div> + <div class="flex column" style="padding-left: 30px;"> + <img src="/assets/images/atoms/lead_symbol.svg" alt="" + style="max-width: 200px !important; margin: 20px;"> + <span>1s<sup>2</sup>, 2s<sup>2</sup>, 2p<sup>6</sup>, 3s<sup>2</sup>, 3p<sup>6</sup>, + 4s<sup>2</sup>, 3d<sup>10</sup>, 4p<sup>3</sup></span> + </div> + </div> <h1 id="electron-config-based-on-shell">Electron Configuration Based on Shell</h1> <div class="flex flex-center"> <img src="/assets/images/atoms/oxygen.svg" alt="" style="max-width: 300px;"> </div> <p class="subtitle">an atom figure with shell labels (Oxygen)</p> + <h2 id="electron-config-based-on-shell--max">Maximum Electron</h2> + <table> + <tr> + <th>Shell</th> + <th>Maximum Electron</th> + </tr> + <tr> + <td>K</td> + <td>2</td> + </tr> + <tr> + <td>L</td> + <td>8</td> + </tr> + <tr> + <td>M</td> + <td>18</td> + </tr> + <tr> + <td>N</td> + <td>32</td> + </tr> + <tr> + <td>...</td> + <td>...</td> + </tr> + </table> <h2 id="electron-config-based-on-shell--example">How to Determine Electron Count</h2> - <table></table> + <ol> + <li>Coming soon!</li> + </ol> <h2 id="electron-config-based-on-shell--examples">Examples</h2> + </section> </div> |