<?xml version="1.0" encoding="UTF-8" standalone="no"?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0"><channel><title>Elementary Technology</title><description>Membahas Seputar Teknologi </description><managingEditor>noreply@blogger.com (Unknown)</managingEditor><pubDate>Tue, 8 Sep 2026 03:07:26 -1000</pubDate><generator>Blogger http://www.blogger.com</generator><openSearch:totalResults xmlns:openSearch="http://a9.com/-/spec/opensearchrss/1.0/">41</openSearch:totalResults><openSearch:startIndex xmlns:openSearch="http://a9.com/-/spec/opensearchrss/1.0/">1</openSearch:startIndex><openSearch:itemsPerPage xmlns:openSearch="http://a9.com/-/spec/opensearchrss/1.0/">25</openSearch:itemsPerPage><link>https://elementertech.blogspot.com/</link><language>en-us</language><itunes:explicit>no</itunes:explicit><itunes:subtitle>Membahas Seputar Teknologi </itunes:subtitle><itunes:owner><itunes:email>noreply@blogger.com</itunes:email></itunes:owner><item><title>CSS Biginner </title><link>https://elementertech.blogspot.com/2026/02/css-biginner.html</link><category>belajar CSS</category><author>noreply@blogger.com (Unknown)</author><pubDate>Thu, 19 Feb 2026 17:36:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-4604770958604664668</guid><description>&lt;h1 style="text-align: left;"&gt;&lt;br /&gt;&lt;/h1&gt;&lt;h1 style="text-align: left;"&gt;CSS BIGINNER&lt;/h1&gt;&lt;h2 style="text-align: left;"&gt;I. Langkah pertama Menguasai CSS&lt;/h2&gt;&lt;h3 style="text-align: left;"&gt;apa itu CSS&lt;/h3&gt;&lt;p style="text-align: left;"&gt;&lt;a data-preview="" href="https://www.google.com/search?ved=1t:260882&amp;amp;q=define+CSS&amp;amp;bbid=6596883567189788124&amp;amp;bpid=4604770958604664668" target="_blank"&gt;CSS&lt;/a&gt;
 adalah bahasa untuk menggambarkan bagaimana dokumen HTML ditampilkan 
secara vissual. bagaimana mereka diatur dan ditata, CSS singaktan dari &lt;a data-preview="" href="https://www.google.com/search?ved=1t:260882&amp;amp;q=define+Cascading+Style+Sheets&amp;amp;bbid=6596883567189788124&amp;amp;bpid=4604770958604664668" target="_blank"&gt;Cascading Style Sheets&lt;/a&gt;, CSS ini mempermudah untuk mendesain halamaan. tapi semakin properti yang digunakan , bisa jadi bingung cara pakainya.&lt;/p&gt;&lt;h3 style="text-align: left;"&gt;Aturan CSS&lt;/h3&gt;&lt;p style="text-align: left;"&gt;Hampir seluruhnya ditulis dengan cara seperti ini:&lt;/p&gt;&lt;p style="text-align: left;"&gt;elector {&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;span&gt;&amp;nbsp; &amp;nbsp; property: value;&lt;/span&gt;&lt;br /&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;span&gt;}&lt;/span&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;beberapa contoh penulisan CSS :&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;membuat semua h1 berwarna biru&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;div&gt;h1 {&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;nbsp; &amp;nbsp; &lt;a data-preview="" href="https://www.google.com/search?ved=1t:260882&amp;amp;q=CSS+color+property&amp;amp;bbid=6596883567189788124&amp;amp;bpid=4604770958604664668" target="_blank"&gt;color&lt;/a&gt;: blue;&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;}&lt;/span&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;&lt;span&gt;&amp;nbsp;membuat semua ukuran element gambar dengan lebar 100 px dan tinggi 200 px&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;img {&lt;/div&gt;&lt;div&gt;&lt;span&gt;&amp;nbsp; &amp;nbsp; width: 100px;&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;&amp;nbsp; &amp;nbsp; height: 200px;&lt;/span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;jangan mengfal sintaxnya dulu&lt;br /&gt;tapi cari dulu apa yang di butuhkan dalam kebutuhan web&amp;nbsp;&lt;br /&gt;bisa cari googling banyak sintax CSS yang bisa di cari untuk di pelajari.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;h3 style="text-align: left;"&gt;Menggunakan CSS dengan benar&lt;/h3&gt;&lt;p style="text-align: left;"&gt;ada 3 cara penulian CSS yang bisa di gunakan tetapi yang benar dan paling di rekomendasikan dan sesuai tandart adalah menggunakan &lt;a data-preview="" href="https://www.google.com/search?ved=1t:260882&amp;amp;q=External+StyleSheet+CSS&amp;amp;bbid=6596883567189788124&amp;amp;bpid=4604770958604664668" target="_blank"&gt;External StyleSheet&lt;/a&gt;.&amp;nbsp;&lt;br /&gt;berikut contoh dari beberapa cara menulisan CSS :&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;h4 style="text-align: left;"&gt;Inline style&amp;nbsp;&lt;/h4&gt;&lt;p&gt;yaitu penulisan style css yang langsung pada element yang dituju. (sangat tidak disarankan)&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;div&gt;&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxsmpS3cgPcy5Orqzb4FOSrwb_P6B6lXxoTpZylybA3ibInMZ8r1DQ5Ew3j-jb4crJCDMNNE1CB8WtK_ztLjNjzsMlrfcw8KbkMr9ofrB2NMQnLLATn4Uz88tOSYY3Kg3RUR5mNFAndhWAEpmpIMw3M-OB9yRkXgXbry_fDSl1FajwG6S2hIcumA3ai24/s1143/Jepretan%20layar_20260202_100544.png" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="153" data-original-width="1143" height="69" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxsmpS3cgPcy5Orqzb4FOSrwb_P6B6lXxoTpZylybA3ibInMZ8r1DQ5Ew3j-jb4crJCDMNNE1CB8WtK_ztLjNjzsMlrfcw8KbkMr9ofrB2NMQnLLATn4Uz88tOSYY3Kg3RUR5mNFAndhWAEpmpIMw3M-OB9yRkXgXbry_fDSl1FajwG6S2hIcumA3ai24/w510-h69/Jepretan%20layar_20260202_100544.png" width="510" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 style="text-align: left;"&gt;&amp;nbsp;&lt;/h3&gt;&lt;h4 style="text-align: left;"&gt;&amp;lt;style&amp;gt; element&lt;/h4&gt;yaitu menggunakan element style di element. lebih baik, tetapi tidak bisa digunakan di banyak dokumen. (Tidak di sarankan)&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg66lVP6xJkC3VbsU225PBKs61f4oZFyOFj5ex0koPnQLPZB9cLuVB4_hduvy50glC6QCUxqCbyPAgetSfn5yfQhgTIO8efrf0qdEBTgNjmwZfSdCoztMJVL8r3-s_Kb3hJbPPNGl-ZejpAgvPcV0dGS4-cUjnA3ttfcVoIHt8tPdp06k4XUCfNb5aD-HA/s461/Jepretan%20layar_20260202_102134.png" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="461" data-original-width="448" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg66lVP6xJkC3VbsU225PBKs61f4oZFyOFj5ex0koPnQLPZB9cLuVB4_hduvy50glC6QCUxqCbyPAgetSfn5yfQhgTIO8efrf0qdEBTgNjmwZfSdCoztMJVL8r3-s_Kb3hJbPPNGl-ZejpAgvPcV0dGS4-cUjnA3ttfcVoIHt8tPdp06k4XUCfNb5aD-HA/s320/Jepretan%20layar_20260202_102134.png" width="311" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;&lt;div style="text-align: left;"&gt;&lt;h4 style="text-align: left;"&gt;External Stylesheet&lt;/h4&gt;yaitu memisahkan file css dari html. (direkomendasikan)&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrWJUpUl8kMN_hSEXrerYWbFpX_Q5NbPjXMev-eQwZHKwSxSqElF_4ARaHRrT_dUN9M8gAXek67RbFSrwSVMI6MJ9CPY9mDXZsGTGHc64xa7d1iK_20Cm6BApvEpW0Cmrri8perQjAu-GZfB4HThK-1v7w_CQPvdL2i6DpDFNg3xjBbkqYllUMDg8QhpE/s1773/Jepretan%20layar_20260202_111654.png" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="489" data-original-width="1773" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrWJUpUl8kMN_hSEXrerYWbFpX_Q5NbPjXMev-eQwZHKwSxSqElF_4ARaHRrT_dUN9M8gAXek67RbFSrwSVMI6MJ9CPY9mDXZsGTGHc64xa7d1iK_20Cm6BApvEpW0Cmrri8perQjAu-GZfB4HThK-1v7w_CQPvdL2i6DpDFNg3xjBbkqYllUMDg8QhpE/w589-h162/Jepretan%20layar_20260202_111654.png" width="589" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;h3 style="text-align: left;"&gt;Mengenal Properti Color dan Background Color&lt;/h3&gt;&lt;p style="text-align: left;"&gt;dalam propert CSSyang paling umum sebernya ada 3 properti warna yaitu color, &lt;a data-preview="" href="https://www.google.com/search?ved=1t:260882&amp;amp;q=CSS+background-color+property&amp;amp;bbid=6596883567189788124&amp;amp;bpid=4604770958604664668" target="_blank"&gt;background-color&lt;/a&gt; dan &lt;a data-preview="" href="https://www.google.com/search?ved=1t:260882&amp;amp;q=CSS+border-color+property&amp;amp;bbid=6596883567189788124&amp;amp;bpid=4604770958604664668" target="_blank"&gt;border-color&lt;/a&gt;. masing-masing properti memiliki fungsinya masing-masing contoh:&lt;/p&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;button&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt;  &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  color&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;darkviolet;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  background-color&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;#&lt;/span&gt;&lt;span style="color: #b48ead;"&gt;f5deb3&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #eceff4;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p style="text-align: left;"&gt;&amp;nbsp;didalam gambartersebut saya menggunakan color untuk tulisan pada button dengan warna darkviolet dengan penulisan code nama warnanya sedangkan untuk merubah background-color buttonnya saya menggunakan warna wheat (gandum) dengan penulisan code menggunakan code warna #f5deb3; ,sedangkan border color digunakan untuk mewarnai garis tepi.&lt;/p&gt;&lt;div&gt;&lt;span&gt;&lt;span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;h3 style="text-align: left;"&gt;&lt;span&gt;&lt;span&gt;Sistem warna RGB dan Sistem warna Hexadesimal&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;p style="text-align: left;"&gt;&lt;span&gt;&lt;span&gt;&amp;nbsp;ada 3 jenis penulisan dalam pewarnaan CSS&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;ol style="text-align: left;"&gt;&lt;li style="text-align: left;"&gt;&lt;span&gt;&lt;span&gt;memanggil dengan nama warnanya&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;h1&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  color &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;darkred;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #eceff4;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;br /&gt;&lt;/li&gt;&lt;li style="text-align: left;"&gt;&lt;span&gt;&lt;span&gt;pewarnaan dengan &lt;a data-preview="" href="https://www.google.com/search?ved=1t:260882&amp;amp;q=RGB+color+CSS&amp;amp;bbid=6596883567189788124&amp;amp;bpid=4604770958604664668" target="_blank"&gt;RGB&lt;/a&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;p&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  color&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #88c0d0;"&gt;rgb&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;(&lt;/span&gt;&lt;span style="color: #b48ead;"&gt;0&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;,&lt;/span&gt;&lt;span style="color: #88c0d0;"&gt; &lt;/span&gt;&lt;span style="color: #b48ead;"&gt;99&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;,&lt;/span&gt;&lt;span style="color: #88c0d0;"&gt; &lt;/span&gt;&lt;span style="color: #b48ead;"&gt;0&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;)&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #eceff4;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;br /&gt;&lt;/li&gt;&lt;li style="text-align: left;"&gt;&lt;span&gt;&lt;span&gt;menggunakan &lt;a data-preview="" href="https://www.google.com/search?ved=1t:260882&amp;amp;q=hexadecimal+color+CSS&amp;amp;bbid=6596883567189788124&amp;amp;bpid=4604770958604664668" target="_blank"&gt;hexadesimal&lt;/a&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;h2&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  color &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:#&lt;/span&gt;&lt;span style="color: #b48ead;"&gt;00008b&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #eceff4;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h3 style="text-align: left;"&gt;&lt;span&gt;&lt;span&gt;&amp;nbsp;Jangan Lupa, Titik Koma (semi colon)&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;&lt;p style="text-align: left;"&gt;&lt;span&gt;&lt;span&gt;kebanyakan programmer frontend saat melakukan stylis pada HTML sering kali terlupakan dengan semi colon (;), semi colon ini penting karena jika properti tidak ada ; maka style akan eror tidak terbaca.&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;span&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;h3 style="text-align: left;"&gt;&lt;span&gt;&lt;span&gt;&amp;nbsp;Properti Text umum&lt;/span&gt;&lt;/span&gt;&amp;nbsp;&amp;nbsp;&lt;/h3&gt;&lt;p style="text-align: left;"&gt;&amp;nbsp;CCS properti untuk text umumnya memiliki 5 bagian yaitu:&lt;/p&gt;&lt;p style="text-align: left;"&gt;- Text-align&lt;br /&gt;digunakan untuk menaruh dimana text itu ingin di tempatkan untuk perintahnya memiliki beberapa yaitu:&lt;br /&gt;* Start : untuk di awal line&lt;br /&gt;* End : untuk di akhir line&lt;br /&gt;* center : untuk di tengah line&lt;br /&gt;* justify : untuk meratakan paragraf&amp;nbsp;&lt;/p&gt;&lt;p style="text-align: left;"&gt;- font-weight&lt;br /&gt;&amp;nbsp;digunakan untuk mempertebal ketebalan huruf atau angka agar tidak menggunakan banyak &amp;lt;h1&amp;gt; sehingga menyalahi aturan semantix HTML&lt;/p&gt;&lt;p style="text-align: left;"&gt;- text-decoration&lt;br /&gt;digunakan untuk membuat garis di huruf atau angka yang di inginkan. bisa juga digunakan untuk mematikan decoration di elemen angker &amp;lt;a&amp;gt;.&lt;/p&gt;&lt;p style="text-align: left;"&gt;- line-height&lt;br /&gt;ini digunakan untuk jarak ketinggian antar paragrafnya.&lt;/p&gt;&lt;p style="text-align: left;"&gt;- letter-spacing&lt;br /&gt;ini digunakan untuk mengatur jarak antar huruf spasi&lt;/p&gt;&lt;p style="text-align: left;"&gt;&amp;nbsp;&lt;/p&gt;&lt;h3 style="text-align: left;"&gt;&amp;nbsp;Mengenal ukuran pada css dengan Font&lt;/h3&gt;&lt;p style="text-align: left;"&gt;&amp;nbsp;font size adalah satuan ukuran yang biasa di gunakan untuk mengatur suatu ukuran di element di dalam web, ada dua jenis penggunaan dalam CSS yaitu:&lt;/p&gt;&lt;h4 style="text-align: left;"&gt;Relative&lt;/h4&gt;&lt;p style="text-align: left;"&gt;relative digunakan pada website yang responsive jadi ukurannya dari suatu gambar tidak baku atau tidak fix disitu saja tetapi bisa berubah menyesuaikan ukuran layar penggunanya. format dari ukuran ini itu ada :&lt;/p&gt;&lt;ol style="text-align: left;"&gt;&lt;li style="text-align: left;"&gt;em&lt;/li&gt;&lt;li style="text-align: left;"&gt;rem&lt;/li&gt;&lt;li style="text-align: left;"&gt;vh&lt;/li&gt;&lt;li style="text-align: left;"&gt;wm&lt;/li&gt;&lt;li style="text-align: left;"&gt;%&lt;/li&gt;&lt;li style="text-align: left;"&gt;etc&lt;/li&gt;&lt;/ol&gt;&lt;h4 style="text-align: left;"&gt;Absolute&lt;/h4&gt;&lt;p style="text-align: left;"&gt;absolute benar benar di gunakan di fix hitungannya pas tidak berubah. format dari ukuran ini itu ada :&lt;/p&gt;&lt;ol style="text-align: left;"&gt;&lt;li style="text-align: left;"&gt;px&lt;/li&gt;&lt;li style="text-align: left;"&gt;pt&lt;/li&gt;&lt;li style="text-align: left;"&gt;cm&lt;/li&gt;&lt;li style="text-align: left;"&gt;in&lt;/li&gt;&lt;li style="text-align: left;"&gt;mm&lt;/li&gt;&lt;/ol&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;&lt;h2 style="text-align: left;"&gt;II. Mengenal apa itu selector dan cara kerjanya di CSS&lt;/h2&gt;&lt;h3 style="text-align: left;"&gt;Selector Menggunakan Element HTML&lt;/h3&gt;&lt;p style="text-align: left;"&gt;elemen selector adalah selector yang&amp;nbsp; menggunakan tag dari HTMLnya jadi kita panggil elemen HTML untuk di ubah di CSS.&lt;/p&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;p&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  color&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;aliceblue;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #eceff4;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p style="text-align: left;"&gt;&amp;nbsp;&lt;/p&gt;&lt;h3 style="text-align: left;"&gt;selector menggunakan Attribute ID&lt;/h3&gt;&lt;p style="text-align: left;"&gt;atribut selector yaitu mengaikan css dengan atribut Id&amp;nbsp;&lt;/p&gt;&lt;h3 style="text-align: left;"&gt;&amp;nbsp;&lt;/h3&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;button&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #8fbcbb;"&gt;id&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;="&lt;/span&gt;&lt;span style="color: #a3be8c;"&gt;kirim&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;"&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;gt;&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt;Kirim&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;/button&amp;gt;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #eceff4;"&gt;#&lt;/span&gt;&lt;span style="color: #8fbcbb;"&gt;kirim&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  background-color&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;aquamarine;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  color&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;black;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #eceff4;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;h3 style="text-align: left;"&gt;&amp;nbsp;&lt;/h3&gt;&lt;h3 style="text-align: left;"&gt;&amp;nbsp;selector menggunakan atribut class&lt;/h3&gt;&lt;p style="text-align: left;"&gt;atribut selector yang menggunakan class untuk mengaitkannya&lt;/p&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;strong&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #8fbcbb;"&gt;class&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;="&lt;/span&gt;&lt;span style="color: #a3be8c;"&gt;mark&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;"&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;gt;&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt;tebal&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;/strong&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;&amp;nbsp;&lt;/span&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #eceff4;"&gt;.&lt;/span&gt;&lt;span style="color: #8fbcbb;"&gt;mark&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  background-color&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;greenyellow;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  color&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;black&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #eceff4;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p style="text-align: left;"&gt;&amp;nbsp;&lt;/p&gt;&lt;h3 style="text-align: left;"&gt;&amp;nbsp;Mengenal Descendant Selector&lt;/h3&gt;&lt;p style="text-align: left;"&gt;Selector ini hanya memililih elemen yang merupakan anak langsung dari induk elemennya. elemen cucu atau keturunan yang lebih dalam tidak akan terkena efeknya.&lt;/p&gt;&lt;p style="text-align: left;"&gt;li a {&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;color: blue;&lt;/p&gt;&lt;p style="text-align: left;"&gt;}&lt;/p&gt;&lt;p style="text-align: left;"&gt;&amp;nbsp;&lt;/p&gt;&lt;h3 style="text-align: left;"&gt;Mengenal Direct Descendant dan Ajdacent Selctor&lt;/h3&gt;&lt;p style="text-align: left;"&gt;selector ini digunakan untuk memilih sebuah elemen yang letaknya tepat setelah elemen lain, selama keduanya memiliki induk yang sama&amp;nbsp;&lt;/p&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;a&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #8fbcbb;"&gt;href&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;="&lt;/span&gt;&lt;span style="color: #a3be8c;"&gt;#&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;"&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;gt;&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt;ini elemen angker&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;button&amp;gt;&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt;gass&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;a&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;+&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;button&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  color&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;brown;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #eceff4;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p style="text-align: left;"&gt;&amp;nbsp;&lt;/p&gt;&lt;h3 style="text-align: left;"&gt;Mengenal Attribute Selector&amp;nbsp;&lt;/h3&gt;&lt;p style="text-align: left;"&gt;Attribute selector itu adalah cara memilih elemen berdasarkan "apa yang ada di dalam tag-nya",&amp;nbsp; bukan cuma nama tag atau class-nya&lt;/p&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;input&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #8fbcbb;"&gt;type&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;="&lt;/span&gt;&lt;span style="color: #a3be8c;"&gt;text&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;"&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #8fbcbb;"&gt;placeholder&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;="&lt;/span&gt;&lt;span style="color: #a3be8c;"&gt;search&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;"&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;button&amp;gt;&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt;search&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;input&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;[&lt;/span&gt;&lt;span style="color: #8fbcbb;"&gt;type&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;=&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;"&lt;/span&gt;&lt;span style="color: #a3be8c;"&gt;text&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;"&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;]&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  color&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;white;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #eceff4;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p style="text-align: left;"&gt;&amp;nbsp;&lt;/p&gt;&lt;h3 style="text-align: left;"&gt;Mengenal Pseudo Classes&lt;/h3&gt;&lt;p style="text-align: left;"&gt;kata kunci yang ditambahkan pada selector untuk memilih element secara spesifik pada kondisi tertentu&lt;br /&gt;&lt;/p&gt;&lt;ol style="text-align: left;"&gt;&lt;li&gt;:active&lt;/li&gt;&lt;li&gt;:checked&lt;/li&gt;&lt;li&gt;:first&lt;/li&gt;&lt;li&gt;:hover&lt;/li&gt;&lt;li&gt;:nth-child()&lt;/li&gt;&lt;li&gt;:nth-of-type()&lt;/li&gt;&lt;/ol&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt;selanjutnya saya buat paragraf di mana bagian ini saya&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;buat menjadi &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;strong&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #8fbcbb;"&gt;class&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;="&lt;/span&gt;&lt;span style="color: #a3be8c;"&gt;mark&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;"&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;gt;&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt;tebal&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;/strong&amp;gt;&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; dan&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;selanjutnya akan menjadi &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;em&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #8fbcbb;"&gt;class&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;="&lt;/span&gt;&lt;span style="color: #a3be8c;"&gt;mark&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;"&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;gt;&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt;miring&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;/em&amp;gt;&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt;dan&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;jika ada hal penting bisa ditambahkan garis &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;u&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #8fbcbb;"&gt;class&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;="&lt;/span&gt;&lt;span style="color: #a3be8c;"&gt;mark&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;"&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;gt;&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt;bawah&lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;lt;/u&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #eceff4;"&gt;.&lt;/span&gt;&lt;span style="color: #8fbcbb;"&gt;jokes&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;&amp;gt;&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;p&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #8fbcbb;"&gt;hover&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  cursor&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;pointer;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  text-decoration&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;underline;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #eceff4;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h3 style="text-align: left;"&gt;Mengenal Pseudo Elements&lt;/h3&gt;&lt;p style="text-align: left;"&gt;&amp;nbsp;kata kunci yang ditambahkan pada selector untuk memilih bagian element yang dipilih:&lt;/p&gt;&lt;ol style="text-align: left;"&gt;&lt;li style="text-align: left;"&gt;:after&lt;/li&gt;&lt;li style="text-align: left;"&gt;:before&lt;/li&gt;&lt;li style="text-align: left;"&gt;:first-letter&lt;/li&gt;&lt;li style="text-align: left;"&gt;:first-line&lt;/li&gt;&lt;li style="text-align: left;"&gt;:selection&lt;/li&gt;&lt;/ol&gt;&lt;div style="background-color: #2e3440; color: #d8dee9; font-family: Hack, &amp;quot;Droid Sans Mono&amp;quot;, &amp;quot;monospace&amp;quot;, monospace, &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 19px; font-weight: normal; line-height: 42px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #81a1c1;"&gt;h3&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;::&lt;/span&gt;&lt;span style="color: #8fbcbb;"&gt;first-letter&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #eceff4;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #d8dee9;"&gt;  font-size&lt;/span&gt;&lt;span style="color: #eceff4;"&gt;:&lt;/span&gt;&lt;span style="color: #d8dee9;"&gt; &lt;/span&gt;&lt;span style="color: #81a1c1;"&gt;x-large;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #eceff4;"&gt;}&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="text-align: left;"&gt;Box Model CSS - Menubah Ukuran Element dengan CSS&amp;nbsp;&lt;/h2&gt;&lt;h3 style="text-align: left;"&gt;Mengenal Bagian Box Model pada Element&lt;/h3&gt;&lt;p style="text-align: left;"&gt;ini materi paling penting di CSS, jika sudah memahami materi ini nantinya kita bisa dengan mudah mengatur tata letak (layout) apa pun dengan gampang.&lt;br /&gt;bayangkan setiap element HTML (seperti div, h1, atau p) adalah sebuah paket kado kotak.&lt;/p&gt;&lt;p style="text-align: left;"&gt;terdapat 4 lapisan box model yaitu:&amp;nbsp;&lt;br /&gt;&lt;/p&gt;&lt;ol style="text-align: left;"&gt;&lt;li&gt;&lt;b&gt;konten/isi&amp;nbsp;&lt;/b&gt;&lt;br /&gt;ini dalah bagian isi konten. bisa berupa teks, gambar, atau video.&lt;br /&gt;&lt;br /&gt;&lt;/li&gt;&lt;li&gt;&lt;b&gt;Padding/bantalan&lt;/b&gt;&lt;br /&gt;ini seperti bubble wrap di dalam kardus. jarak antara isi dengan pinggiran kardus. kalau padding ditambah, ruang di dalam elemen jadi lebih lega.&lt;br /&gt;&lt;br /&gt;&lt;/li&gt;&lt;li&gt;&lt;b&gt;border/kardus&lt;/b&gt;&lt;br /&gt;ini adalah garis tepi atau dinding pembatas elemen. kamu bisa atur ketebalan dan warnanya.&lt;br /&gt;&lt;br /&gt;&lt;/li&gt;&lt;li&gt;&lt;b&gt;Margin/jarak luar&lt;br /&gt;&lt;/b&gt;ini adalah jarak antara kardus kamu dengan kardus tetangga. margin tidak punya warna, gunanya cuma buat kasih jarak antar elemen supaya enggak dempet-dempetan.&lt;/li&gt;&lt;/ol&gt;&lt;br /&gt;&lt;br /&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt; &lt;span style="color: #919288;"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;div&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;        &lt;span style="color: #919288;"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;p&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&lt;/span&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
Doloribus nesciunt unde nihil illum officia quos pariatur quae voluptas 
esse quibusdam aut sapiente quod, reiciendis beatae vel recusandae cum 
iure earum.&lt;span style="color: #919288;"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;p&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="color: #919288;"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;div&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;

&lt;div style="color: #fdfff1; line-height: 19px;"&gt;&lt;div&gt;&lt;span style="color: #8fa876;"&gt;div&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;width&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;300&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;padding&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;50&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;margin&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;20&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div class="separator" style="clear: both; text-align: left;"&gt;&lt;br /&gt;&lt;/div&gt;&lt;h3 style="clear: both; text-align: left;"&gt;Mengenal properti border pada CSS&lt;/h3&gt;&lt;p style="clear: both; text-align: left;"&gt;border itu initinya adalah "garis tepi" dari sebuah elemen. ada 3 elemen utama untuk membuat berder yaitu :&lt;br /&gt;&lt;/p&gt;&lt;p style="clear: both; text-align: left;"&gt;&lt;/p&gt;&lt;ol style="text-align: left;"&gt;&lt;li&gt;&lt;b&gt;width / tebal&lt;br /&gt;&lt;/b&gt;digunakan utuk ketebalan garis bordernya&lt;br /&gt;&lt;br /&gt;&lt;/li&gt;&lt;li&gt;&lt;b&gt;Style / bentuk&amp;nbsp;&lt;/b&gt;&lt;br /&gt;digunakan untuk berbentuk apa bordernya ada solid untuk garis lurus, dashed untuk putus-putus, dotted untuk titik-titik.&lt;br /&gt;&lt;br /&gt;&lt;/li&gt;&lt;li&gt;&lt;b&gt;Color / warna&lt;/b&gt;&lt;br /&gt;digunakan untuk mewarnai garis bordernya&lt;/li&gt;&lt;/ol&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #8fa876;"&gt;div&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;border-style&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt;&lt;span style="color: #66d9ef;"&gt;dashed&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;border-top-style&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt;&lt;span style="color: #66d9ef;"&gt;double&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;border-bottom-style&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt;&lt;span style="color: #66d9ef;"&gt;double&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;border-width&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;5&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;border-top-width&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;10&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;border-bottom-width&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;10&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;br /&gt;&lt;h3 style="text-align: left;"&gt;Mengenal properti padding pada CSS&lt;/h3&gt;&lt;/div&gt;&lt;p style="text-align: left;"&gt;jika border adalah kardus maka padding adalah bantalan jarak antara kardus tersebut dengan isian didalamnya. padding digunakan untuk memberikan"ruang napas" di dalam sebuah elemen. Tanpa padding, teks atau gambar akan menempel ketat di pinggiran border elemen tersebut, yang biasanya membuat desain terlihat sesak dan tidak rapi.&lt;br /&gt;&lt;/p&gt;&lt;h4 style="text-align: left;"&gt;Cara kerja Padding&lt;br /&gt;&lt;p style="text-align: left;"&gt;&lt;span style="font-weight: normal;"&gt;padding bersifat internal. Dia menambah ruang di bagian dalam elemen, sehingga jika elemen tersebut memiliki warna latar belakang, warna itu juga akan mengisi area padding tersebut.&lt;br /&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; font-weight: normal; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #8fa876;"&gt;div&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;padding-top&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;10&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;padding-right&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;20&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;padding-bottom&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;10&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;padding-left&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;20&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;bisa juga di tulis dengan :&lt;/div&gt;&lt;div&gt;padding: 10px 20px;&lt;/div&gt;&lt;div&gt;
atau bisa juga :
&lt;/div&gt;&lt;div&gt;padding 10px 20px 10px 20px&lt;/div&gt;&lt;/div&gt;&lt;p style="text-align: left;"&gt;&lt;br /&gt;&lt;/p&gt;&lt;/h4&gt;&lt;h3 style="text-align: left;"&gt;Mengenal Properti Margin pada CSS&lt;/h3&gt;&lt;p&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;span&gt;margin adalah jarak antara kardus kamu dengan kardus tetangga, margin ini diibratkan "ruang kosong" di luar kardus. Gunanya supaya kardus-kardus elemen di website kamu enggak saling bertabrakan atau nempel banget.&lt;br /&gt;&lt;br /&gt;sifat Utama margin :&lt;br /&gt;&lt;b&gt;- Transparan:&lt;/b&gt;&lt;/span&gt;&lt;span style="font-weight: normal;"&gt; Margin nggak punya warna, dan tidak bisa diberikan warna. dia cuman ruang hampa.&lt;br /&gt;- &lt;/span&gt;&lt;span&gt;&lt;b&gt;Mendorong: &lt;/b&gt;Margin fungsinya mendorong kardus lain supaya menjauh.&lt;br /&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;h4 style="text-align: left;"&gt;&lt;span&gt;Cara Mengatur Jarak Margin&lt;/span&gt;&lt;/h4&gt;&lt;span&gt;Sama persis dengan cara pasang padding, kita bisa pakai rumus jarum jam :&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;Cara satu persatu&amp;nbsp;&lt;/li&gt;&lt;/ul&gt;&lt;ol style="text-align: left;"&gt;&lt;li&gt;margin-top: Kasih jarak ke tetangga atas.&lt;/li&gt;&lt;li&gt;margin-bottom: kasih jarak ke tetangga bawah.&lt;/li&gt;&lt;li&gt;margin-left: kasih jarak ke tetangga kiri.&lt;/li&gt;&lt;li&gt;margin-right: kasih jarak ke tetangga kanan.&lt;/li&gt;&lt;/ol&gt;&lt;div&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;Cara Cepat&amp;nbsp;&lt;/li&gt;&lt;/ul&gt;&lt;ol style="text-align: left;"&gt;&lt;li&gt;margin: 50px; semua sisi menjauh 50px dari tetangganya.&lt;/li&gt;&lt;li&gt;margin: 10px 20px: Atas-Bawah jaraknya 10px, kiri-kanan jaraknya 20px&lt;/li&gt;&lt;/ol&gt;&lt;div&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;Trik Spesial&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;.kardus {&lt;/div&gt;&lt;div&gt;&amp;nbsp; width: 300px;&lt;/div&gt;&lt;div&gt;&amp;nbsp; margin: 0 auto;&lt;/div&gt;&lt;div&gt;}&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;jarak atas-bawahnya 0, tetapi jarak kiri-kanannya dibagi rata secara otomatis. Hasilnya kardus bakal berada tepat di tengah-tengah halaman.&lt;/div&gt;&lt;h3 style="text-align: left;"&gt;&lt;br /&gt;&lt;/h3&gt;&lt;h3 style="text-align: left;"&gt;Mengenal Properti Display&lt;/h3&gt;&lt;p style="text-align: left;"&gt;Materi Display ini adalah "pengatur sifat" kardus kamu. properti ini menentukan bagaimana kardus tersebut berbaris dan berperilaku terhadap kardus di sebelahnya.&lt;/p&gt;&lt;p style="text-align: left;"&gt;Dalam CSS, ada tiga nilai display yang paling dasar dan wajib kamu tahu:&lt;/p&gt;&lt;h4 style="text-align: left;"&gt;display: block;&lt;/h4&gt;&lt;p style="text-align: left;"&gt;ini sifat bawaan (default) dari tag seperti &amp;lt;div&amp;gt;, &amp;lt;h1&amp;gt;, atau &amp;lt;p&amp;gt;.&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;sifatnya maruk. dia akan memakan seluruh lebar satu baris dari kiri sampai kanan, meskipun isinya cuma sedikit.&lt;/li&gt;&lt;li&gt;hasilnya kardusnya dipaksa turun ke baris baru di bawahnya.&lt;/li&gt;&lt;li&gt;bisa diatur bebas mengatur width, height, margin dan paddingnya.&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;&lt;/p&gt;&lt;h4 style="text-align: left;"&gt;display: inline;&lt;/h4&gt;&lt;p style="text-align: left;"&gt;ini adalah sifat bawaan tag seperti &amp;lt;span&amp;gt; atau &amp;lt;a&amp;gt;.&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;sifatnya ngirit dia hanya memakan lebar sesuai ukuran isinya saja.&lt;/li&gt;&lt;li&gt;hasilnya kardus lain bisa ikut berbaris di sebelahnya selama ruangnya masih cukup.&lt;/li&gt;&lt;li&gt;kekurangannya tidak bisa diatur widht dan height. margin atas-bawah juga sering tidak berfungsi normal.&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="text-align: left;"&gt;display: inline-block;&lt;/h4&gt;&lt;p style="text-align: left;"&gt;ini adalah gabungan kekuatan dari keduanya.&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;sifatnya dia bisa berbaris ke samping seperti inline tetapi tetap bisa diatur width, height, margin, dan paddingnya secara penuh seperti block.&lt;br /&gt;&lt;/li&gt;&lt;li&gt;sangat cocok untuk membuat elemen seperti tombol atau kartu produk yang ingin kamu susun berjajar ke samping namun ukurannya tetap presisi.&lt;br /&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="text-align: left;"&gt;display: none;&lt;/h4&gt;&lt;p style="text-align: left;"&gt;Jangan lupakan nilai ini karena fungsinya sangat krusial untuk interaksi pengguna.&lt;br /&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;sifatnya elemen akan benar-benar hilang dari halaman.&lt;/li&gt;&lt;li&gt;efeknya berbeda dengan hanya transparan, display: none; membuat elemen tersebut tidak lagi memakan ruang. kardus di bawahnya akan naik mengisi posisi yang kosong tersebut.&lt;br /&gt;&lt;/li&gt;&lt;li&gt;digunakan untuk membuat menu dropdown yang hanya muncul saat dilik atau pop-up peringatan.&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;h2 style="text-align: left;"&gt;Flexbox Dasar&lt;/h2&gt;&lt;h3 style="text-align: left;"&gt;Apa itu Flexbox&lt;/h3&gt;&lt;p style="text-align: left;"&gt;Flexible Box Layout adalah model layout 1-dimensi dalam CSS yang dirancang untuk mendistribusikan ruang antar elemen di dalam sebuah container, bahkan ketika ukurannya tidak diketahui atau dinamis.&lt;br /&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;h4&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;Konsep Parent &amp;amp; Child&amp;nbsp;&lt;/li&gt;&lt;/ul&gt;&lt;/h4&gt;&lt;div&gt;flexbox bekerja dengan hubungan flex container dan flex items&lt;/div&gt;&lt;div&gt;&lt;ol style="text-align: left;"&gt;&lt;li&gt;Flex Container: Elemen yang diberi properti display: flex; atau display: inline-flex;&lt;/li&gt;&lt;li&gt;Flex Items: Semua elemen yang menjadi anak langsung direct children dari Flex Container.&lt;/li&gt;&lt;/ol&gt;&lt;div&gt;&lt;h4&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;Sumbu Utama (Main Axis dan Cross Axis)&lt;/li&gt;&lt;/ul&gt;&lt;/h4&gt;&lt;div&gt;Tidak seperti layout biasa yang terpaku pada blok vertikal/horizontal, flexbox bekerja berdasarkan sumbu:&amp;nbsp;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;ol style="text-align: left;"&gt;&lt;li&gt;Main Axis: Sumbu Utama (defaultnya horizontal/baris). Diatur dengan flex-direction.&lt;/li&gt;&lt;li&gt;Cross Axis: Sumbu yang tegak lurus dengan Main Axis (defaultnya Vertikal/kolom)&lt;/li&gt;&lt;/ol&gt;&lt;div&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;Properti Utama pada container (Parent)&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;ini adalah kontroler untuk mengatur prilaku anak-anaknya:&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;ol style="text-align: left;"&gt;&lt;li&gt;flex-direction: Menentukan arah main axis (row, row-reverse, colom, column-reverse).&lt;/li&gt;&lt;li&gt;Justify-Content: Mengatur perataan elemen di sepanjang Main Axis (flex-start, flex-end, space-between, space-around, space-evenly).&lt;/li&gt;&lt;li&gt;align-items : Mengatur perataan elemen di sepanjang Cross Axis (stretch, flex-start, flex-end, center, baseline).&lt;br /&gt;&lt;/li&gt;&lt;li&gt;flex-wrap : Menentukan apakah elemen harus dipaksa dalam satu baris atau boleh pindah ke baris baru jika ruang tidak cukup (nowrap, wrap, wrap-reverse).&lt;/li&gt;&lt;/ol&gt;&lt;h4 style="text-align: left;"&gt;&lt;/h4&gt;&lt;h4&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;Properti Pada Items (child)&lt;/li&gt;&lt;/ul&gt;&lt;p style="text-align: left;"&gt;&lt;span style="font-weight: normal;"&gt;Setiap anak bisa mengatur ukurannya sendiri secara dinamis :&lt;/span&gt;&lt;/p&gt;&lt;/h4&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;ol style="text-align: left;"&gt;&lt;li&gt;flex-grow : Kemampuan elemen untuk melebar mengisi sisa ruang (nilai angka, default 0).&lt;/li&gt;&lt;li&gt;flex-shrink : Kemampuan elemen untuk menyusut jika ruang kontainer lebih kecil dari ukuran elemen (default 1).&lt;/li&gt;&lt;li&gt;flex-basis : Ukuran awal elemen sebelum sisa ruang didistribusikan.&lt;/li&gt;&lt;li&gt;align-self : Meng-Override properti align-items dari parent untuk elemen spesifik tersebut.&lt;/li&gt;&lt;/ol&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;h3 style="text-align: left;"&gt;Mengatur Urutan Elemen Dengan Flex Direction&lt;br /&gt;&lt;p style="text-align: left;"&gt;&lt;span style="font-weight: normal;"&gt;Properti flex-direction digunakan untuk menentukan arah sumbu utama (Main Axis) di dalam sebuah flex container. Properti ini secara otomatis mengatur&amp;nbsp; urutan visual elemen tanpa mengubah struktur kode HTML&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;&lt;/h3&gt;&lt;h4&gt;&lt;/h4&gt;&lt;h4&gt;&lt;/h4&gt;&lt;h4&gt;&lt;/h4&gt;&lt;h4&gt;&lt;p&gt;&lt;/p&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;Row&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;span style="font-weight: normal;"&gt;Elemen Berjejer dari kiri ke kanan.&lt;/span&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; font-weight: normal; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;flex-direction&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;row&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;Row Reverse&amp;nbsp;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;span style="font-weight: normal;"&gt;Elemen berjejer dari kanan ke kiri. Elemen pertama di HTML akan beranda di posisi paling kanan.&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; font-weight: normal; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;flex-direction&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;row-reverse&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;Column&lt;/li&gt;&lt;/ul&gt;&lt;p style="text-align: left;"&gt;&lt;span style="font-weight: normal;"&gt;Elemen disusun menumpuk dari atas ke bawah&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; font-weight: normal; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;flex-direction&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;column&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p style="text-align: left;"&gt;&lt;span style="font-weight: normal;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;Column Reverse&amp;nbsp;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;span style="font-weight: normal;"&gt;Elemen disusun menumpuk dari bawah ke atas. Elemen pertama di HTML akan berada di posisi paling bawah.&lt;/span&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; font-weight: normal; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;flex-direction&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;column-reverse&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p style="text-align: left;"&gt;&lt;span style="font-weight: normal;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;&lt;h3 style="text-align: left;"&gt;Membagi Rata jarak Horizontal Dengan Justify Content&lt;/h3&gt;&lt;div&gt;&lt;span style="font-weight: normal;"&gt;Properti justify-content bertanggung jawab atas distribusi ruang kosong di sepanjang Main Axis. Dalam konteks flex-direction: row, properti ini menentukan bagaimana flex items diposisikan secara horizontal di dalam flex container.&lt;br /&gt;&lt;br /&gt;berikut adalah breakdown teknis nilai-nilai untuk pembagian jarak:&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: normal;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;h4 style="text-align: left;"&gt;1. space-between&lt;/h4&gt;&lt;p style="text-align: left;"&gt;&lt;span style="font-weight: normal;"&gt;&amp;nbsp;Elemen didistribusikan secara merata di dalam kontainer.&lt;/span&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;&lt;span style="font-weight: 400;"&gt;Item pertama dipaksa menempel ke awal / start line.&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style="font-weight: 400;"&gt;item terakhir dipaksa menempel ke akhir / end line.&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style="font-weight: 400;"&gt;sisa ruang dibagikan hanya di antara elemen-elemen yang ada.&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;span style="font-weight: normal;"&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: 'Droid Sans Mono', monospace; font-size: 14px; font-weight: normal; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;  &lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;justify-content&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;space-between&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;/h4&gt;&lt;h4 style="text-align: left;"&gt;2. space-around&lt;/h4&gt;&lt;p style="text-align: left;"&gt;&lt;span style="font-weight: normal;"&gt;Elemen didistribusikan sehingga setiap item memiliki ruang yang sama di kedua sisinya.&lt;/span&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;&lt;span style="font-weight: 400;"&gt;jarak antar elemen adalah 2 unit&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style="font-weight: 400;"&gt;jarak antara tepi kontainer dengan elemen pertama/terakhir adalah 1 unit&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style="font-weight: 400;"&gt;Secara visual, jarak di tengah terlihat lebih lebar dari pada jarak di pinggir.&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: 'Droid Sans Mono', monospace; font-size: 14px; font-weight: normal; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;justify-content&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;space-around&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;h4 style="text-align: left;"&gt;3. space-evenly&lt;/h4&gt;&lt;p style="text-align: left;"&gt;&lt;span style="font-weight: normal;"&gt;Elemen didistribusikan sehingga jarak antara dua item mana pun, serta jarak ke tepi kontainer adalah sama persis.&lt;/span&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;&lt;span style="font-weight: 400;"&gt;Semua celah memiliki lebar yang identik&amp;nbsp;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;&lt;/p&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: 'Droid Sans Mono', monospace; font-size: 14px; font-weight: normal; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;justify-content&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;space-evenly&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;h3 style="text-align: left;"&gt;Menampilkan Elemen Dengan Ukuran Sebenarnya Pada Flex&lt;/h3&gt;&lt;p style="text-align: left;"&gt;&lt;span style="font-weight: normal;"&gt;Secara teknis, elemen didalam FlexBox sering kali dipaksa menyusut atau melebar untuk menyesuaikan ruang kontainer. Untuk memastikan elemen tampil dengan ukuran sebenarnya, kamu perlu mengontrol 3 properti pada level Flex Item (child)&lt;/span&gt;&lt;/p&gt;&lt;h4 style="text-align: left;"&gt;1. Mematikan Fitur Penyusutan (flex-shrink: 0)&lt;/h4&gt;&lt;div&gt;&lt;span style="font-weight: normal;"&gt;Secara default, nilai flex-shrink adalah 1. Artinya jika kontainer lebih kecil dari total ukuran item, elemen akan dipaksa mengkerut. Untuk mempertahankan Ukuran asli:&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: normal;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: 'Droid Sans Mono', monospace; font-size: 14px; font-weight: normal; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;item&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;flex-shrink&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;0&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Elemen dilarang menyusut, ukuran akan tetap stabil */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;h4 style="text-align: left;"&gt;2. Mematikan Fitur Pelebaran (flex-grow: 0)&lt;/h4&gt;&lt;div&gt;&lt;span style="font-weight: normal;"&gt;Nilai default flex-grow adalah 0. Namun, jika kamu tidak ingin elemen mengambil sisa ruang kosong dan tetap pada ukuran aslinya, pastikan nilainya tetap 0.&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: normal;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: 'Droid Sans Mono', monospace; font-size: 14px; font-weight: normal; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;item&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;flex-grow&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;0&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Elemen dilarang mengambil sisa ruang */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;h4 style="text-align: left;"&gt;3. Mengatur Ukuran Dasar (flex-basis)&lt;/h4&gt;&lt;div&gt;&lt;span style="font-weight: normal;"&gt;flex-basis menentukan ukuran awal elemen sebelum didistribusikan ke dalam kontainer. Kamu bisa mengisinya dengan nilai absolut (px) atau auto.&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;&lt;span style="font-weight: 400;"&gt;flex-basis: auto; :mengambil ukuran dari properti width/height atau ukuran konten asli.&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style="font-weight: 400;"&gt;flex-basis: content; :Menyesuaikan ukuran berdasarkan konten di dalamnya (tidak peduli pada width).&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h4 style="text-align: left;"&gt;Cara tercepat: Shorthand (flex: none)&lt;/h4&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: normal;"&gt;Jika ingin elemen benar-benar kaku dan tampil sesuai ukuran aslinya (berdasarkan width, height, atau isi konten), gunakan perintah singkat:&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: normal;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;item&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;none&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #6e7066; font-style: italic;"&gt;/* Kode di atas sama dengan: */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #6e7066; font-style: italic;"&gt;/* flex-grow: 0; flex-shrink: 0; flex-basis: auto; */&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;h3 style="text-align: left;"&gt;Mengatur Perataan Secara Vertikal Dengan Align Item&lt;/h3&gt;&lt;div&gt;Properti align-items digunakan untuk mengatur perataan elemen di sepanjang Cross Axis. Jika flex-direction bernilai row (default), maka align-items akan mengatur posisi elemen secara vertikal.&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;h4 style="text-align: left;"&gt;1. stretch (default)&lt;/h4&gt;&lt;div&gt;Elemen akan ditarik hingga memenuhi tinggi kontainer (jika dalam mode row)&lt;/div&gt;&lt;div&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;Syaratnya Elemen tidak boleh memiliki height yang ditentukan secara manual agar efek stretch terlihat.&lt;br /&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;align-items&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;stretch&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;h4 style="text-align: left;"&gt;2. flex-start&lt;/h4&gt;&lt;div&gt;Elemen akan diletakkan di bagian paling atas (pangkal cross axis) kontainer. Ukuran elemen hanya akan setinggi konten di dalamnya.&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;align-items&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex-start&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;h4 style="text-align: left;"&gt;3. flex-end&lt;/h4&gt;&lt;div&gt;Elemen akan diletakkan di bagian paling bawah (ujung cross axis) kontainer.&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;align-items&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex-end&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;h4 style="text-align: left;"&gt;4. Center&lt;/h4&gt;&lt;p style="text-align: left;"&gt;Salah satu nilai yang paling sering digunakan. Elemen akan diposisikan tepat di tengah-tengah antara batas atas dan batas bawah kontainer.&lt;/p&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;align-items&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;center&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;h4 style="text-align: left;"&gt;5. baseline&amp;nbsp;&lt;/h4&gt;&lt;div&gt;Elemen disejajarkan berdasarkan garis dasar teks (baseline). ini berguna jika lemen-elemen di dalamnya memiliki ukuran font atau tinggi yang berbeda, tetapi kamu ingin teksnya tetap sejajar secara horizontal.&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;align-items&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;baseline&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;h4 style="text-align: left;"&gt;Perbedaan Teknis antara align-items dengan align-content&lt;/h4&gt;&lt;div&gt;align-items digunakan untuk Mengatur elemen di dalam satu baris flex&lt;/div&gt;&lt;div&gt;align-content digunakan untuk mengatur jarak antar baris-baris flex (hanya berfungsi jika ada lebih dari satu baris, alias menggunakan flex-wrap: wrap; ).&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;Contoh kasus membuat sebuah elemen tepat berada di tengah-tengah kontainer baik secara horizontal maupun vertikal (Perfect Center), gunakan kombinasi ini:&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;parent&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;justify-content&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;center&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Tengah horizontal */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;align-items&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;center&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;     &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Tengah vertikal */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;height&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;300&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;           &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Butuh tinggi pada parent */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;h2 style="text-align: left;"&gt;Mengatur Jarak Cross Axis dengan Align Content dan align self&lt;/h2&gt;&lt;h4 style="text-align: left;"&gt;1. Align content : Mengatur baris-baris flex&lt;/h4&gt;&lt;div&gt;Properti align-content digunkan untuk mengatur distribusi ruang antar baris di dalam flex container.&lt;/div&gt;&lt;div&gt;&lt;ul data-path-to-node="4"&gt;&lt;li&gt;&lt;p data-path-to-node="4,0,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="4,0,0"&gt;Syarat Utama:&lt;/span&gt; Properti ini hanya berfungsi jika &lt;code data-index-in-node="48" data-path-to-node="4,0,0"&gt;flex-wrap&lt;/code&gt; bernilai &lt;code data-index-in-node="67" data-path-to-node="4,0,0"&gt;wrap&lt;/code&gt; atau &lt;code data-index-in-node="77" data-path-to-node="4,0,0"&gt;wrap-reverse&lt;/code&gt; DAN terdapat lebih dari satu baris elemen.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="4,1,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="4,1,0"&gt;Analogi Teknis:&lt;/span&gt; Jika &lt;code data-index-in-node="21" data-path-to-node="4,1,0"&gt;justify-content&lt;/code&gt; mengatur jarak antar elemen dalam satu baris, maka &lt;code data-index-in-node="88" data-path-to-node="4,1,0"&gt;align-content&lt;/code&gt; mengatur jarak antar baris dalam satu kotak.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p data-path-to-node="5"&gt;&lt;span data-index-in-node="0" data-path-to-node="5"&gt;Nilai-Nilai Utama:&lt;/span&gt;&lt;/p&gt;&lt;ul data-path-to-node="6"&gt;&lt;li&gt;&lt;p data-path-to-node="6,0,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="6,0,0"&gt;&lt;code data-index-in-node="0" data-path-to-node="6,0,0"&gt;flex-start&lt;/code&gt;&lt;/span&gt;: Baris-baris ditumpuk ke awal kontainer.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="6,1,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="6,1,0"&gt;&lt;code data-index-in-node="0" data-path-to-node="6,1,0"&gt;flex-end&lt;/code&gt;&lt;/span&gt;: Baris-baris ditumpuk ke akhir kontainer.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="6,2,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="6,2,0"&gt;&lt;code data-index-in-node="0" data-path-to-node="6,2,0"&gt;center&lt;/code&gt;&lt;/span&gt;: Baris-baris dikelompokkan di tengah kontainer.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="6,3,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="6,3,0"&gt;&lt;code data-index-in-node="0" data-path-to-node="6,3,0"&gt;space-between&lt;/code&gt;&lt;/span&gt;: Baris pertama di atas, baris terakhir di bawah, sisanya dibagi rata.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="6,4,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="6,4,0"&gt;&lt;code data-index-in-node="0" data-path-to-node="6,4,0"&gt;space-around&lt;/code&gt;&lt;/span&gt;: Memberi ruang rata di sekitar setiap baris.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="6,5,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="6,5,0"&gt;&lt;code data-index-in-node="0" data-path-to-node="6,5,0"&gt;stretch&lt;/code&gt; (Default)&lt;/span&gt;: Baris-baris ditarik untuk mengisi sisa ruang yang ada.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;flex-wrap&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;wrap&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;align-content&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;space-between&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Mengatur jarak antar baris */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;height&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;500&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h4 style="text-align: left;"&gt;2. Align Self: Mengatur Individu (Anak)&lt;/h4&gt;&lt;p data-path-to-node="10"&gt;&lt;code data-index-in-node="0" data-path-to-node="10"&gt;align-self&lt;/code&gt; adalah properti yang dipasang pada &lt;span data-index-in-node="46" data-path-to-node="10"&gt;Flex Item (Child)&lt;/span&gt;, bukan pada container. Ini memungkinkan satu elemen spesifik untuk "memberontak" dari aturan &lt;code data-index-in-node="157" data-path-to-node="10"&gt;align-items&lt;/code&gt; yang ditetapkan oleh induknya.&lt;/p&gt;&lt;ul data-path-to-node="11"&gt;&lt;li&gt;&lt;p data-path-to-node="11,0,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="11,0,0"&gt;Fungsi:&lt;/span&gt; Meng-override (menindih) perintah perataan vertikal dari parent hanya untuk elemen itu sendiri.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p data-path-to-node="12"&gt;&lt;span data-index-in-node="0" data-path-to-node="12"&gt;Nilai-Nilai Utama:&lt;/span&gt;
Nilainya sama persis dengan &lt;code data-index-in-node="47" data-path-to-node="12"&gt;align-items&lt;/code&gt; (&lt;code data-index-in-node="60" data-path-to-node="12"&gt;flex-start&lt;/code&gt;, &lt;code data-index-in-node="72" data-path-to-node="12"&gt;flex-end&lt;/code&gt;, &lt;code data-index-in-node="82" data-path-to-node="12"&gt;center&lt;/code&gt;, &lt;code data-index-in-node="90" data-path-to-node="12"&gt;baseline&lt;/code&gt;, &lt;code data-index-in-node="100" data-path-to-node="12"&gt;stretch&lt;/code&gt;), ditambah nilai &lt;code data-index-in-node="125" data-path-to-node="12"&gt;auto&lt;/code&gt; (mengikuti induk).&lt;/p&gt;&lt;p data-path-to-node="13"&gt;&lt;span data-index-in-node="0" data-path-to-node="13"&gt;Contoh Kasus:&lt;/span&gt;
Bayangkan induknya menyuruh semua anak rata atas (&lt;code data-index-in-node="64" data-path-to-node="13"&gt;flex-start&lt;/code&gt;), tapi kamu ingin satu tombol tetap di tengah secara vertikal.&lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;align-items&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex-start&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Semua anak rata atas */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;height&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;100&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;item-spesifik&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;align-self&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;center&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Hanya elemen ini yang pindah ke tengah */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;h2 style="text-align: left;"&gt;Mengubah ukuran elemen Flex&lt;/h2&gt;&lt;div&gt;&lt;p data-path-to-node="0"&gt;Untuk mengubah ukuran elemen di dalam Flexbox secara dinamis dan presisi, kamu harus menguasai tiga properti utama yang bekerja pada level &lt;span data-index-in-node="139" data-path-to-node="0"&gt;Flex Item (anak)&lt;/span&gt;.&lt;/p&gt;&lt;p data-path-to-node="1"&gt;Ketiga properti ini biasanya disingkat dalam satu baris kode yaitu properti &lt;code data-index-in-node="76" data-path-to-node="1"&gt;flex&lt;/code&gt;.&lt;/p&gt;&lt;h3 data-path-to-node="3"&gt;1. flex-grow (Kemampuan Melebar)&lt;/h3&gt;&lt;p data-path-to-node="4"&gt;Properti ini menentukan berapa besar elemen akan "tumbuh" untuk mengisi sisa ruang kosong di dalam kontainer.&lt;/p&gt;&lt;ul data-path-to-node="5"&gt;&lt;li&gt;&lt;p data-path-to-node="5,0,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="5,0,0"&gt;Nilai default: &lt;code data-index-in-node="15" data-path-to-node="5,0,0"&gt;0&lt;/code&gt;&lt;/span&gt; (elemen tidak akan melebar meskipun ada sisa ruang).&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="5,1,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="5,1,0"&gt;Nilai angka (1, 2, dst):&lt;/span&gt; Jika semua item diberi &lt;code data-index-in-node="48" data-path-to-node="5,1,0"&gt;flex-grow: 1&lt;/code&gt;, mereka akan membagi sisa ruang secara merata. Jika satu item diberi &lt;code data-index-in-node="130" data-path-to-node="5,1,0"&gt;flex-grow: 2&lt;/code&gt;, maka item tersebut akan mengambil sisa ruang dua kali lebih banyak dibanding yang lain.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;item-1&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt; &lt;span style="font-style: italic;"&gt;flex-grow&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;1&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;item-2&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt; &lt;span style="font-style: italic;"&gt;flex-grow&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;2&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #919288;"&gt;}&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Mengambil sisa ruang lebih besar */&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="7"&gt;2. flex-shrink (Kemampuan Menyusut)&lt;/h3&gt;&lt;p data-path-to-node="8"&gt;Properti ini menentukan bagaimana elemen menyusut jika total ukuran semua item lebih besar daripada ukuran kontainer (terjadi &lt;i data-index-in-node="126" data-path-to-node="8"&gt;overflow&lt;/i&gt;).&lt;/p&gt;&lt;ul data-path-to-node="9"&gt;&lt;li&gt;&lt;p data-path-to-node="9,0,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="9,0,0"&gt;Nilai default: &lt;code data-index-in-node="15" data-path-to-node="9,0,0"&gt;1&lt;/code&gt;&lt;/span&gt; (elemen akan otomatis menyusut agar muat di dalam kontainer).&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="9,1,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="9,1,0"&gt;Nilai &lt;code data-index-in-node="6" data-path-to-node="9,1,0"&gt;0&lt;/code&gt;:&lt;/span&gt; Elemen dipaksa &lt;span data-index-in-node="24" data-path-to-node="9,1,0"&gt;tidak menyusut&lt;/span&gt; dan mempertahankan ukuran aslinya (bisa menyebabkan elemen keluar dari kontainer).&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;item-fixed&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt; &lt;span style="font-style: italic;"&gt;flex-shrink&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;0&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #919288;"&gt;}&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Ukuran tetap kaku, anti penyusutan */&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="11"&gt;3. flex-basis (Ukuran Dasar)&lt;/h3&gt;&lt;p data-path-to-node="12"&gt;Ini adalah ukuran ideal elemen sebelum sisa ruang didistribusikan oleh &lt;code data-index-in-node="71" data-path-to-node="12"&gt;grow&lt;/code&gt; atau &lt;code data-index-in-node="81" data-path-to-node="12"&gt;shrink&lt;/code&gt;.&lt;/p&gt;&lt;ul data-path-to-node="13"&gt;&lt;li&gt;&lt;p data-path-to-node="13,0,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="13,0,0"&gt;Nilai default: &lt;code data-index-in-node="15" data-path-to-node="13,0,0"&gt;auto&lt;/code&gt;&lt;/span&gt; (mengambil ukuran dari &lt;code data-index-in-node="43" data-path-to-node="13,0,0"&gt;width&lt;/code&gt;/&lt;code data-index-in-node="49" data-path-to-node="13,0,0"&gt;height&lt;/code&gt; atau konten).&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="13,1,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="13,1,0"&gt;Nilai absolut:&lt;/span&gt; Bisa diisi &lt;code data-index-in-node="26" data-path-to-node="13,1,0"&gt;px&lt;/code&gt;, &lt;code data-index-in-node="30" data-path-to-node="13,1,0"&gt;%&lt;/code&gt;, &lt;code data-index-in-node="33" data-path-to-node="13,1,0"&gt;em&lt;/code&gt;, atau &lt;code data-index-in-node="42" data-path-to-node="13,1,0"&gt;rem&lt;/code&gt;.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;item&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt; &lt;span style="font-style: italic;"&gt;flex-basis&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;200&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #919288;"&gt;}&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Ukuran awal diset ke 200px */&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="16"&gt;Properti Shorthand: &lt;code data-index-in-node="20" data-path-to-node="16"&gt;flex&lt;/code&gt;&lt;/h3&gt;&lt;p data-path-to-node="17"&gt;Sangat disarankan untuk menggunakan properti gabungan agar kode lebih bersih dan menghindari &lt;i data-index-in-node="93" data-path-to-node="17"&gt;bug&lt;/i&gt; kalkulasi manual.&lt;/p&gt;&lt;p data-path-to-node="18"&gt;&lt;span data-index-in-node="0" data-path-to-node="18"&gt;Sintaks:&lt;/span&gt; &lt;code data-index-in-node="9" data-path-to-node="18"&gt;flex: [flex-grow] [flex-shrink] [flex-basis];&lt;/code&gt;&lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;table data-path-to-node="19" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 32px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;thead style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(239, 239, 239); border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;strong style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Kode&lt;/strong&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(239, 239, 239); border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;strong style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Penjelasan Teknis&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="19,1,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="19,1,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="19,1,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;flex: 1;&lt;/code&gt;&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="19,1,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Sama dengan &lt;code data-index-in-node="12" data-path-to-node="19,1,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;flex: 1 1 0;&lt;/code&gt;. Elemen akan melebar dan menyusut secara fleksibel.&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="19,2,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="19,2,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="19,2,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;flex: 0 0 200px;&lt;/code&gt;&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="19,2,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Elemen kaku. Tidak bisa melebar, tidak bisa menyusut, ukuran tepat 200px.&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="19,3,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="19,3,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="19,3,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;flex: none;&lt;/code&gt;&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="19,3,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Sama dengan &lt;code data-index-in-node="12" data-path-to-node="19,3,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;flex: 0 0 auto;&lt;/code&gt;. Elemen menggunakan ukuran konten asli dan tidak fleksibel.&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="19,4,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="19,4,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="19,4,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;flex: auto;&lt;/code&gt;&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="19,4,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Sama dengan &lt;code data-index-in-node="12" data-path-to-node="19,4,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;flex: 1 1 auto;&lt;/code&gt;. Elemen fleksibel dengan basis ukuran konten.&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="21"&gt;Contoh Implementasi: Sidebar &amp;amp; Main Content&lt;/h3&gt;&lt;p data-path-to-node="22"&gt;Skenario umum di mana &lt;i data-index-in-node="22" data-path-to-node="22"&gt;sidebar&lt;/i&gt; memiliki lebar tetap, dan &lt;i data-index-in-node="56" data-path-to-node="22"&gt;konten utama&lt;/i&gt; mengambil sisa layar yang tersedia:&lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;sidebar&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;0&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;0&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;250&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Tidak melebar, tidak menyusut, lebar tetap 250px */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;background&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #919288;"&gt;#&lt;/span&gt;&lt;span style="color: #ae81ff;"&gt;ccc&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;main-content&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;1&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* flex-grow: 1, otomatis menghabiskan sisa ruang */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;background&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #919288;"&gt;#&lt;/span&gt;&lt;span style="color: #ae81ff;"&gt;eee&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;h2 style="text-align: left;"&gt;Flex Dengan sintaks yang lebih ringkas&lt;/h2&gt;&lt;div&gt;Dalam CSS Flexbox, penggunaan properti individual (&lt;code data-index-in-node="51" data-path-to-node="0"&gt;flex-grow&lt;/code&gt;, &lt;code data-index-in-node="62" data-path-to-node="0"&gt;flex-shrink&lt;/code&gt;, dan &lt;code data-index-in-node="79" data-path-to-node="0"&gt;flex-basis&lt;/code&gt;) secara terpisah sering kali dianggap tidak efisien. Praktik terbaik (&lt;i data-index-in-node="160" data-path-to-node="0"&gt;best practice&lt;/i&gt;) secara teknis adalah menggunakan properti gabungan yaitu &lt;span data-index-in-node="232" data-path-to-node="0"&gt;&lt;code data-index-in-node="232" data-path-to-node="0"&gt;flex&lt;/code&gt;&lt;/span&gt;.&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="3"&gt;1. Sintaks Shorthand &lt;code data-index-in-node="21" data-path-to-node="3"&gt;flex&lt;/code&gt;&lt;/h3&gt;&lt;p data-path-to-node="4"&gt;Sintaks ini menggabungkan tiga properti menjadi satu baris:
&lt;code data-index-in-node="60" data-path-to-node="4"&gt;flex: [flex-grow] [flex-shrink] [flex-basis];&lt;/code&gt;&lt;/p&gt;&lt;h3 data-path-to-node="5"&gt;2. Nilai Preset yang Sering Digunakan&lt;/h3&gt;&lt;p data-path-to-node="6"&gt;CSS menyediakan beberapa kata kunci (&lt;i data-index-in-node="37" data-path-to-node="6"&gt;keywords&lt;/i&gt;) sebagai jalan pintas untuk kebutuhan layout yang paling umum:&lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;table data-path-to-node="7" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 32px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;thead style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(239, 239, 239); border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;strong style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Sintaks Ringkas&lt;/strong&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(239, 239, 239); border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;strong style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Ekivalen Teknis&lt;/strong&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(239, 239, 239); border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;strong style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Perilaku Elemen&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="7,1,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="7,1,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="7,1,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;flex: initial;&lt;/code&gt;&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="7,1,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="7,1,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;0 1 auto&lt;/code&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="7,1,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="7,1,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Default.&lt;/b&gt; Tidak melebar, bisa menyusut jika kontainer sempit, ukuran sesuai konten.&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="7,2,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="7,2,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="7,2,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;flex: 1;&lt;/code&gt;&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="7,2,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="7,2,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;1 1 0&lt;/code&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="7,2,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="7,2,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Fleksibel.&lt;/b&gt; Melebar mengisi sisa ruang, bisa menyusut, ukuran awal dianggap 0.&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="7,3,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="7,3,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="7,3,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;flex: auto;&lt;/code&gt;&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="7,3,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="7,3,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;1 1 auto&lt;/code&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="7,3,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="7,3,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Fleksibel + Content.&lt;/b&gt; Melebar dan menyusut, tapi ukuran awal didasarkan pada konten/lebar elemen.&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="7,4,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="7,4,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="7,4,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;flex: none;&lt;/code&gt;&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="7,4,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="7,4,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;0 0 auto&lt;/code&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="7,4,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="7,4,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Kaku.&lt;/b&gt; Tidak bisa melebar maupun menyusut. Ukuran tetap sesuai lebar asli/konten.&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="9"&gt;3. Contoh Kasus Implementasi&lt;/h3&gt;&lt;h4 data-path-to-node="10"&gt;&lt;span style="font-weight: normal;"&gt;Membagi Ruang Sama Rata&lt;/span&gt;&lt;/h4&gt;&lt;p data-path-to-node="11"&gt;Jika kamu ingin semua item memiliki lebar yang sama persis tanpa mempedulikan isi konten di dalamnya:&lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;item&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;1&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Semua anak akan mengambil porsi 1 yang sama adil */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;Komponen Layout "Fixed &amp;amp; Fluid"&lt;/div&gt;&lt;div&gt;&lt;p data-path-to-node="14"&gt;Skenario di mana ada satu kolom tetap (seperti sidebar atau icon) dan satu kolom yang menghabiskan sisa ruang:&lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #6e7066; font-style: italic;"&gt;/* Kolom Tetap */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;icon&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;0&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;0&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;50&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Grow 0, Shrink 0, Basis 50px */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;span style="color: #6e7066; font-style: italic;"&gt;/* Kolom Fleksibel */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;search-bar&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;1&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Menghabiskan sisa ruang yang ada */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="17"&gt;4. Mengapa Harus Pakai Sintaks Ringkas?&lt;/h3&gt;&lt;ol data-path-to-node="18" start="1"&gt;&lt;li&gt;&lt;p data-path-to-node="18,0,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="18,0,0"&gt;Reset Otomatis:&lt;/span&gt; Saat kamu menulis &lt;code data-index-in-node="34" data-path-to-node="18,0,0"&gt;flex: 1;&lt;/code&gt;, CSS secara otomatis mengatur &lt;code data-index-in-node="73" data-path-to-node="18,0,0"&gt;flex-shrink: 1&lt;/code&gt; dan &lt;code data-index-in-node="92" data-path-to-node="18,0,0"&gt;flex-basis: 0&lt;/code&gt;. Ini mencegah &lt;i data-index-in-node="120" data-path-to-node="18,0,0"&gt;bug&lt;/i&gt; layout yang tidak diinginkan.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="18,1,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="18,1,0"&gt;Keterbacaan:&lt;/span&gt; Memudahkan &lt;i data-index-in-node="24" data-path-to-node="18,1,0"&gt;debugging&lt;/i&gt; saat inspeksi kode di browser (DevTools).&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="18,2,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="18,2,0"&gt;Standar W3C:&lt;/span&gt; W3C merekomendasikan penggunaan shorthand &lt;code data-index-in-node="55" data-path-to-node="18,2,0"&gt;flex&lt;/code&gt; karena lebih efektif menangani kalkulasi distribusi ruang oleh browser.&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;h2 style="text-align: left;"&gt;Pengetahuan Responsinve Design dan Media Query&lt;/h2&gt;&lt;div&gt;&lt;h2 _ngcontent-ng-c1976333933="" class="cdk-visually-hidden ng-star-inserted" style="appearance: none; background-color: white; border: 0px; clip: rect(0px, 0px, 0px, 0px); color: #1f1f1f; height: 1px; left: 0px; margin: -1px; outline: 0px; overflow: hidden; padding: 0px; position: absolute; text-wrap-mode: nowrap; width: 1px;"&gt;Gemini berkata&lt;/h2&gt;&lt;structured-content-container _ngcontent-ng-c1976333933="" _nghost-ng-c1888044263="" class="model-response-text is-mobile processing-state-visible ng-star-inserted" style="background-color: white; color: #1f1f1f; display: block; font-variant-ligatures: none; height: auto; overflow-x: visible; width: 748px;"&gt;&lt;div _ngcontent-ng-c1888044263="" class="container" style="padding: 8px;"&gt;&lt;message-content _ngcontent-ng-c1888044263="" _nghost-ng-c3542723104="" class="ng-star-inserted" id="message-content-id-r_b07d1e10227fda4d"&gt;&lt;div _ngcontent-ng-c3542723104="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel enable-updated-hr-color preserve-whitespaces-in-response" dir="ltr" id="model-response-message-contentr_b07d1e10227fda4d" inline-copy-host="" style="--animation-duration: 400ms; --fade-animation-function: linear; --gds-type-scale-default-wdth: &amp;quot;wdth&amp;quot; 95; font-family: &amp;quot;Google Sans Flex&amp;quot;, &amp;quot;Google Sans&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, sans-serif; font-size: 16px; font-variation-settings: &amp;quot;ROND&amp;quot; 0, &amp;quot;slnt&amp;quot; 0, &amp;quot;wdth&amp;quot; 95; line-height: 1.75rem; margin-inline-end: 0px; overflow-wrap: break-word; white-space-collapse: preserve;"&gt;&lt;p data-path-to-node="0" style="margin: 0px 0px 16px; overflow-wrap: anywhere;"&gt;Dalam pengembangan web modern, &lt;span data-index-in-node="31" data-path-to-node="0"&gt;Responsive Web Design (RWD)&lt;/span&gt; adalah pendekatan teknis agar tampilan situs web dapat beradaptasi secara otomatis pada berbagai ukuran layar (desktop, tablet, hingga smartphone) tanpa mengubah basis kode HTML.&lt;/p&gt;&lt;p data-path-to-node="1" style="margin: 0px 0px 16px; overflow-wrap: anywhere;"&gt;Senjata utama untuk mencapai hal ini adalah &lt;span data-index-in-node="44" data-path-to-node="1"&gt;Media Query&lt;/span&gt;.&lt;/p&gt;&lt;hr data-path-to-node="2" style="border-bottom: none; border-image: initial; border-left: none; border-right: none; border-top-color: rgb(196, 199, 197); border-top-style: solid;" /&gt;&lt;h3 data-path-to-node="3" style="--gds-type-scale-default-wdth: &amp;quot;wdth&amp;quot; 95; font-size: 16px; font-variation-settings: &amp;quot;ROND&amp;quot; 0, &amp;quot;slnt&amp;quot; 0, &amp;quot;wdth&amp;quot; 95; line-height: 24px; margin: 28px 0px 8px;"&gt;1. Dasar Konsep Media Query&lt;/h3&gt;&lt;p data-path-to-node="4" style="margin: 0px 0px 16px; overflow-wrap: anywhere;"&gt;Media Query adalah modul CSS yang memungkinkan penerapan blok gaya (&lt;i data-index-in-node="68" data-path-to-node="4" style="--gds-type-scale-default-slnt: &amp;quot;slnt&amp;quot; 0; font-variation-settings: &amp;quot;ROND&amp;quot; 0, &amp;quot;slnt&amp;quot; 0, &amp;quot;wdth&amp;quot; 95;"&gt;style&lt;/i&gt;) hanya jika kondisi perangkat tertentu terpenuhi, seperti lebar layar (&lt;i data-index-in-node="145" data-path-to-node="4" style="--gds-type-scale-default-slnt: &amp;quot;slnt&amp;quot; 0; font-variation-settings: &amp;quot;ROND&amp;quot; 0, &amp;quot;slnt&amp;quot; 0, &amp;quot;wdth&amp;quot; 95;"&gt;viewport&lt;/i&gt;), orientasi (landscape/portrait), atau resolusi.&lt;/p&gt;&lt;p data-path-to-node="5" style="margin: 0px 0px 16px; overflow-wrap: anywhere;"&gt;&lt;span data-index-in-node="0" data-path-to-node="5"&gt;Sintaks Dasar:&lt;/span&gt;&lt;/p&gt;&lt;p data-path-to-node="5" style="margin: 0px 0px 16px; overflow-wrap: anywhere;"&gt;&lt;span data-index-in-node="0" data-path-to-node="5"&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; text-wrap-mode: nowrap;"&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;@&lt;/span&gt;&lt;span style="color: #f92672;"&gt;media&lt;/span&gt; media-type &lt;span style="color: #f92672;"&gt;and&lt;/span&gt; &lt;span style="color: #919288;"&gt;(&lt;/span&gt;condition&lt;span style="color: #919288;"&gt;)&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #6e7066; font-style: italic;"&gt;/* CSS rules di sini hanya jalan jika kondisi terpenuhi */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/message-content&gt;&lt;/div&gt;&lt;/structured-content-container&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;b data-index-in-node="0" data-path-to-node="7,0,0"&gt;Media Type:&lt;/b&gt; Biasanya menggunakan &lt;code data-index-in-node="33" data-path-to-node="7,0,0"&gt;screen&lt;/code&gt; (untuk layar digital).&lt;/div&gt;&lt;div&gt;&lt;b data-index-in-node="0" data-path-to-node="7,1,0"&gt;Condition:&lt;/b&gt; Paling umum menggunakan &lt;code data-index-in-node="35" data-path-to-node="7,1,0"&gt;max-width&lt;/code&gt; atau &lt;code data-index-in-node="50" data-path-to-node="7,1,0"&gt;min-width&lt;/code&gt;.&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="9"&gt;2. Strategi: Mobile First vs. Desktop First&lt;/h3&gt;&lt;p data-path-to-node="10"&gt;Dalam alur kerja teknis, ada dua pendekatan utama:&lt;/p&gt;&lt;h4 data-path-to-node="11"&gt;&lt;span style="font-weight: normal;"&gt;A. Mobile First (Rekomendasi Modern)&lt;/span&gt;&lt;/h4&gt;&lt;p data-path-to-node="12"&gt;Menulis kode untuk layar kecil terlebih dahulu, lalu menggunakan &lt;code data-index-in-node="65" data-path-to-node="12"&gt;min-width&lt;/code&gt; untuk menambahkan fitur pada layar yang lebih besar.&lt;/p&gt;&lt;ul data-path-to-node="13"&gt;&lt;li&gt;&lt;p data-path-to-node="13,0,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="13,0,0"&gt;Keuntungan:&lt;/span&gt; Performa lebih ringan di HP karena CSS yang dimuat lebih sedikit di awal.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #6e7066; font-style: italic;"&gt;/* Gaya dasar untuk Mobile */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt; &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="font-style: italic;"&gt;flex-direction&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;column&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;span style="color: #6e7066; font-style: italic;"&gt;/* Untuk Tablet ke atas (600px+) */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;@&lt;/span&gt;&lt;span style="color: #f92672;"&gt;media&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;screen&lt;/span&gt; &lt;span style="color: #f92672;"&gt;and&lt;/span&gt; &lt;span style="color: #919288;"&gt;(&lt;/span&gt;&lt;span style="font-style: italic;"&gt;min-width&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;600&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;)&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt; &lt;span style="font-style: italic;"&gt;flex-direction&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;row&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h4 data-path-to-node="15"&gt;B. Desktop First&lt;/h4&gt;&lt;p data-path-to-node="16"&gt;Menulis kode untuk layar besar dahulu, lalu menggunakan &lt;code data-index-in-node="56" data-path-to-node="16"&gt;max-width&lt;/code&gt; untuk "merampingkan" tampilan saat layar mengecil.&lt;/p&gt;&lt;response-element class="" ng-version="0.0.0-PLACEHOLDER"&gt;&lt;!----&gt;&lt;!----&gt;&lt;!----&gt;&lt;!----&gt;&lt;!----&gt;&lt;!----&gt;&lt;code-block _nghost-ng-c1890576237="" class="ng-tns-c1890576237-282 ng-star-inserted"&gt;&lt;!----&gt;&lt;!----&gt;&lt;div _ngcontent-ng-c1890576237="" class="code-block ng-tns-c1890576237-282 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwiw8uS0_uaSAxUAAAAAHQAAAAAQ2wI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&amp;quot;r_b07d1e10227fda4d&amp;quot;,&amp;quot;c_0882e36ec9fc4660&amp;quot;,null,&amp;quot;rc_47a3620f1c6e3170&amp;quot;,null,null,&amp;quot;id&amp;quot;,null,1,null,null,1,0]]"&gt;&lt;div _ngcontent-ng-c1890576237="" class="code-block-decoration header-formatted gds-title-s ng-tns-c1890576237-282 ng-star-inserted"&gt;&lt;span _ngcontent-ng-c1890576237="" class="ng-tns-c1890576237-282"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code-block&gt;&lt;/response-element&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #6e7066; font-style: italic;"&gt;/* Gaya dasar untuk Desktop */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt; &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="font-style: italic;"&gt;flex-direction&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;row&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;span style="color: #6e7066; font-style: italic;"&gt;/* Untuk Mobile (600px ke bawah) */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;@&lt;/span&gt;&lt;span style="color: #f92672;"&gt;media&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;screen&lt;/span&gt; &lt;span style="color: #f92672;"&gt;and&lt;/span&gt; &lt;span style="color: #919288;"&gt;(&lt;/span&gt;&lt;span style="font-style: italic;"&gt;max-width&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;600&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;)&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;container&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt; &lt;span style="font-style: italic;"&gt;flex-direction&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;column&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="19"&gt;3. Breakpoints Standar&lt;/h3&gt;&lt;p data-path-to-node="20"&gt;&lt;i data-index-in-node="0" data-path-to-node="20"&gt;Breakpoints&lt;/i&gt; adalah titik batas lebar layar di mana layout akan berubah. Tidak ada aturan baku, tetapi berikut adalah standar yang sering digunakan (mengikuti &lt;i data-index-in-node="158" data-path-to-node="20"&gt;framework&lt;/i&gt; seperti Bootstrap/Tailwind):&lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;table data-path-to-node="21" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 32px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;thead style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(239, 239, 239); border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;strong style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Perangkat&lt;/strong&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(239, 239, 239); border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;strong style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Range Lebar&lt;/strong&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(239, 239, 239); border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;strong style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Breakpoint (Min-width)&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="21,1,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="21,1,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Mobile&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="21,1,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&amp;lt; 576px&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="21,1,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;(Default/Base)&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="21,2,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="21,2,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Tablet&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="21,2,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;≥ 768px&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="21,2,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="21,2,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;@media (min-width: 768px)&lt;/code&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="21,3,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="21,3,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Laptop/Desktop&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="21,3,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;≥ 992px&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="21,3,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="21,3,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;@media (min-width: 992px)&lt;/code&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="21,4,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="21,4,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Large Monitor&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="21,4,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;≥ 1200px&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="21,4,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="21,4,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;@media (min-width: 1200px)&lt;/code&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="23"&gt;4. Meta Tag Viewport (Wajib)&lt;/h3&gt;&lt;p data-path-to-node="24"&gt;Media Query tidak akan bekerja secara akurat di perangkat mobile jika kamu tidak menyertakan meta tag berikut di dalam bagian &lt;code data-index-in-node="126" data-path-to-node="24"&gt;&amp;lt;head&amp;gt;&lt;/code&gt; HTML kamu:&lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&amp;lt;&lt;span style="color: #8fa876;"&gt;meta&lt;/span&gt; name="viewport" content="width=&lt;span style="color: #8fa876;"&gt;device-width&lt;/span&gt;&lt;span style="color: #919288;"&gt;,&lt;/span&gt; &lt;span style="color: #8fa876;"&gt;initial-scale&lt;/span&gt;=1.0"&lt;span style="color: #f92672;"&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span data-index-in-node="0" data-path-to-node="26,0,0"&gt;width=device-width:&lt;/span&gt; Mengatur lebar halaman mengikuti lebar layar perangkat.&lt;/div&gt;&lt;div&gt;&lt;span data-index-in-node="0" data-path-to-node="26,1,0"&gt;initial-scale=1.0:&lt;/span&gt; Mengatur level zoom awal saat halaman dimuat.&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="28"&gt;5. Best Practice Teknis&lt;/h3&gt;&lt;ol data-path-to-node="29" start="1"&gt;&lt;li&gt;&lt;p data-path-to-node="29,0,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="29,0,0"&gt;Gunakan Unit Relatif:&lt;/span&gt; Hindari &lt;code data-index-in-node="30" data-path-to-node="29,0,0"&gt;px&lt;/code&gt; untuk lebar kontainer besar. Gunakan &lt;code data-index-in-node="70" data-path-to-node="29,0,0"&gt;%&lt;/code&gt;, &lt;code data-index-in-node="73" data-path-to-node="29,0,0"&gt;vw&lt;/code&gt;, atau &lt;code data-index-in-node="82" data-path-to-node="29,0,0"&gt;rem&lt;/code&gt; agar lebih fleksibel sebelum terkena breakpoint.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="29,1,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="29,1,0"&gt;Jangan Terpaku pada Device:&lt;/span&gt; Buatlah breakpoint berdasarkan &lt;span data-index-in-node="59" data-path-to-node="29,1,0"&gt;kapan konten terlihat berantakan&lt;/span&gt;, bukan berdasarkan seri iPhone atau Samsung tertentu.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="29,2,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="29,2,0"&gt;Kombinasikan dengan Flexbox/Grid:&lt;/span&gt; Media Query berfungsi sebagai pemicu, sedangkan Flexbox/Grid berfungsi sebagai pengatur alirannya.&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;h2 style="text-align: left;"&gt;Memulai Kehebatan Media Query&lt;/h2&gt;&lt;div&gt;&lt;p data-path-to-node="0"&gt;Setelah memahami dasar-dasar responsif, saatnya masuk ke implementasi teknis bagaimana &lt;span data-index-in-node="87" data-path-to-node="0"&gt;Media Query&lt;/span&gt; bekerja sebagai pengendali logika &lt;i data-index-in-node="133" data-path-to-node="0"&gt;layout&lt;/i&gt; berdasarkan spesifikasi perangkat.&lt;/p&gt;&lt;p data-path-to-node="1"&gt;Berikut adalah langkah-langkah teknis untuk memulai implementasi Media Query secara efektif:&lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="3"&gt;1. Menentukan Target Spesifikasi&lt;/h3&gt;&lt;p data-path-to-node="4"&gt;Media Query bekerja dengan memeriksa fitur media perangkat. Properti yang paling sering digunakan dalam pengembangan web adalah:&lt;/p&gt;&lt;ul data-path-to-node="5"&gt;&lt;li&gt;&lt;p data-path-to-node="5,0,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="5,0,0"&gt;&lt;code data-index-in-node="0" data-path-to-node="5,0,0"&gt;width&lt;/code&gt; / &lt;code data-index-in-node="8" data-path-to-node="5,0,0"&gt;height&lt;/code&gt;&lt;/span&gt;: Lebar atau tinggi &lt;i data-index-in-node="34" data-path-to-node="5,0,0"&gt;viewport&lt;/i&gt;.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="5,1,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="5,1,0"&gt;&lt;code data-index-in-node="0" data-path-to-node="5,1,0"&gt;min-width&lt;/code&gt; / &lt;code data-index-in-node="12" data-path-to-node="5,1,0"&gt;max-width&lt;/code&gt;&lt;/span&gt;: Ambang batas minimal atau maksimal lebar layar (paling umum digunakan).&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="5,2,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="5,2,0"&gt;&lt;code data-index-in-node="0" data-path-to-node="5,2,0"&gt;orientation&lt;/code&gt;&lt;/span&gt;: Mendeteksi apakah perangkat dalam posisi &lt;code data-index-in-node="54" data-path-to-node="5,2,0"&gt;portrait&lt;/code&gt; atau &lt;code data-index-in-node="68" data-path-to-node="5,2,0"&gt;landscape&lt;/code&gt;.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="5,3,0"&gt;&lt;span data-index-in-node="0" data-path-to-node="5,3,0"&gt;&lt;code data-index-in-node="0" data-path-to-node="5,3,0"&gt;resolution&lt;/code&gt;&lt;/span&gt;: Untuk menangani layar dengan kepadatan pixel tinggi (Retina Display).&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;hr data-path-to-node="6" /&gt;&lt;h3 data-path-to-node="7"&gt;2. Struktur Penulisan di Dalam File CSS&lt;/h3&gt;&lt;p data-path-to-node="8"&gt;Ada dua cara teknis untuk memisahkan gaya responsif:&lt;/p&gt;&lt;h4 data-path-to-node="9"&gt;&lt;span style="font-weight: normal;"&gt;A. Internal Media Query (Disarankan)&lt;/span&gt;&lt;/h4&gt;&lt;p data-path-to-node="10"&gt;Menuliskan query di bawah gaya standar dalam satu file CSS yang sama agar lebih mudah dipantau.&lt;/p&gt;&lt;response-element class="" ng-version="0.0.0-PLACEHOLDER"&gt;&lt;!----&gt;&lt;!----&gt;&lt;!----&gt;&lt;!----&gt;&lt;!----&gt;&lt;!----&gt;&lt;code-block _nghost-ng-c1890576237="" class="ng-tns-c1890576237-298 ng-star-inserted"&gt;&lt;!----&gt;&lt;!----&gt;&lt;div _ngcontent-ng-c1890576237="" class="code-block ng-tns-c1890576237-298 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwiw8uS0_uaSAxUAAAAAHQAAAAAQ-gI" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&amp;quot;r_21c3f8328e67e479&amp;quot;,&amp;quot;c_0882e36ec9fc4660&amp;quot;,null,&amp;quot;rc_ff95897fe557d42d&amp;quot;,null,null,&amp;quot;id&amp;quot;,null,1,null,null,1,0]]"&gt;&lt;div _ngcontent-ng-c1890576237="" class="code-block-decoration header-formatted gds-title-s ng-tns-c1890576237-298 ng-star-inserted"&gt;&lt;span _ngcontent-ng-c1890576237="" class="ng-tns-c1890576237-298"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code-block&gt;&lt;/response-element&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #6e7066; font-style: italic;"&gt;/* Gaya Utama (Mobile-First) */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;card&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;width&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;100&lt;/span&gt;&lt;span style="color: #f92672;"&gt;%&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;block&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;span style="color: #6e7066; font-style: italic;"&gt;/* Logic untuk Layar Desktop */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;@&lt;/span&gt;&lt;span style="color: #f92672;"&gt;media&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;screen&lt;/span&gt; &lt;span style="color: #f92672;"&gt;and&lt;/span&gt; &lt;span style="color: #919288;"&gt;(&lt;/span&gt;&lt;span style="font-style: italic;"&gt;min-width&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;1024&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;)&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;card&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;width&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;30&lt;/span&gt;&lt;span style="color: #f92672;"&gt;%&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;inline-block&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h4 data-path-to-node="12"&gt;B. External Media Query&lt;/h4&gt;&lt;p data-path-to-node="13"&gt;Memisahkan file CSS berdasarkan perangkat. Browser akan mengunduh semua file, tetapi hanya menerapkan yang sesuai kondisi.&lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&amp;lt;&lt;span style="color: #8fa876;"&gt;link&lt;/span&gt; rel="stylesheet" media="screen and (&lt;span style="color: #8fa876;"&gt;max-width&lt;/span&gt;: 600px)" href="mobile.css"&lt;span style="color: #f92672;"&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&amp;lt;&lt;span style="color: #8fa876;"&gt;link&lt;/span&gt; rel="stylesheet" media="screen and (&lt;span style="color: #8fa876;"&gt;min-width&lt;/span&gt;: 601px)" href="desktop.css"&lt;span style="color: #f92672;"&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="16"&gt;3. Logika Operator (And, Or, Not)&lt;/h3&gt;&lt;p data-path-to-node="17"&gt;Kamu bisa membuat kondisi yang lebih spesifik menggunakan operator logika:&lt;/p&gt;&lt;ul data-path-to-node="18"&gt;&lt;li&gt;&lt;p data-path-to-node="18,0,0"&gt;&lt;b data-index-in-node="0" data-path-to-node="18,0,0"&gt;&lt;code data-index-in-node="0" data-path-to-node="18,0,0"&gt;and&lt;/code&gt;&lt;/b&gt;: Menggabungkan beberapa kondisi.&lt;/p&gt;&lt;ul data-path-to-node="18,0,1"&gt;&lt;li&gt;&lt;p data-path-to-node="18,0,1,0,0"&gt;Contoh: &lt;code data-index-in-node="8" data-path-to-node="18,0,1,0,0"&gt;@media (min-width: 768px) and (max-width: 1024px)&lt;/code&gt; (Hanya untuk tablet).&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="18,1,0"&gt;&lt;b data-index-in-node="0" data-path-to-node="18,1,0"&gt;&lt;code data-index-in-node="0" data-path-to-node="18,1,0"&gt;,&lt;/code&gt; (Comma/Or)&lt;/b&gt;: Salah satu kondisi terpenuhi.&lt;/p&gt;&lt;ul data-path-to-node="18,1,1"&gt;&lt;li&gt;&lt;p data-path-to-node="18,1,1,0,0"&gt;Contoh: &lt;code data-index-in-node="8" data-path-to-node="18,1,1,0,0"&gt;@media (max-width: 600px), (orientation: portrait)&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="18,2,0"&gt;&lt;b data-index-in-node="0" data-path-to-node="18,2,0"&gt;&lt;code data-index-in-node="0" data-path-to-node="18,2,0"&gt;not&lt;/code&gt;&lt;/b&gt;: Membalikkan kondisi.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="20"&gt;4. Implementasi Praktis: Transformasi Layout Flexbox&lt;/h3&gt;&lt;p data-path-to-node="21"&gt;Mari kita terapkan logika ini pada struktur &lt;i data-index-in-node="44" data-path-to-node="21"&gt;kardus&lt;/i&gt; Flexbox yang sudah kita pelajari sebelumnya.&lt;/p&gt;&lt;p data-path-to-node="22"&gt;&lt;span data-index-in-node="0" data-path-to-node="22"&gt;Skenario:&lt;/span&gt; Sebuah &lt;i data-index-in-node="17" data-path-to-node="22"&gt;container&lt;/i&gt; yang berisi 3 elemen. Di HP mereka menumpuk (column), di Desktop mereka berjejer (row).&lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #6e7066; font-style: italic;"&gt;/* 1. Base Style: Mobile First */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;parent&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;flex-direction&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;column&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Menumpuk vertikal */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;gap&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;15&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;span style="color: #6e7066; font-style: italic;"&gt;/* 2. Breakpoint: Desktop (992px ke atas) */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;@&lt;/span&gt;&lt;span style="color: #f92672;"&gt;media&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;screen&lt;/span&gt; &lt;span style="color: #f92672;"&gt;and&lt;/span&gt; &lt;span style="color: #919288;"&gt;(&lt;/span&gt;&lt;span style="font-style: italic;"&gt;min-width&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;992&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;)&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;parent&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;flex-direction&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;row&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Berubah jadi horizontal */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;justify-content&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;space-between&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;/div&gt;&lt;div&gt;  &lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;child&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;1&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Membagi rata ruang */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="25"&gt;5. Tips Teknis untuk Mahasiswa&lt;/h3&gt;&lt;ul data-path-to-node="26"&gt;&lt;li&gt;&lt;p data-path-to-node="26,0,0"&gt;&lt;b data-index-in-node="0" data-path-to-node="26,0,0"&gt;Gunakan DevTools&lt;/b&gt;: Tekan &lt;code data-index-in-node="24" data-path-to-node="26,0,0"&gt;F12&lt;/code&gt; di browser, klik ikon &lt;i data-index-in-node="50" data-path-to-node="26,0,0"&gt;Device Toggle Toolbar&lt;/i&gt; untuk mensimulasikan berbagai ukuran layar saat melakukan &lt;i data-index-in-node="130" data-path-to-node="26,0,0"&gt;debugging&lt;/i&gt; Media Query.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="26,1,0"&gt;&lt;b data-index-in-node="0" data-path-to-node="26,1,0"&gt;Unit &lt;code data-index-in-node="5" data-path-to-node="26,1,0"&gt;em&lt;/code&gt; atau &lt;code data-index-in-node="13" data-path-to-node="26,1,0"&gt;rem&lt;/code&gt; untuk Breakpoints&lt;/b&gt;: Pakar CSS menyarankan penggunaan &lt;code data-index-in-node="69" data-path-to-node="26,1,0"&gt;em&lt;/code&gt; untuk &lt;i data-index-in-node="78" data-path-to-node="26,1,0"&gt;breakpoints&lt;/i&gt; (misal: &lt;code data-index-in-node="98" data-path-to-node="26,1,0"&gt;48em&lt;/code&gt; daripada &lt;code data-index-in-node="112" data-path-to-node="26,1,0"&gt;768px&lt;/code&gt;) agar &lt;i data-index-in-node="124" data-path-to-node="26,1,0"&gt;layout&lt;/i&gt; lebih konsisten saat pengguna mengubah skala font di browser mereka.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="26,2,0"&gt;&lt;b data-index-in-node="0" data-path-to-node="26,2,0"&gt;Visualisasikan Breakpoint&lt;/b&gt;: Gunakan warna latar belakang yang berbeda pada &lt;code data-index-in-node="74" data-path-to-node="26,2,0"&gt;body&lt;/code&gt; di setiap breakpoint saat tahap pengembangan untuk memastikan query kamu sudah "terbakar" (aktif).&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;h2 style="text-align: left;"&gt;Membuat Responsive Navigation&lt;/h2&gt;&lt;p data-path-to-node="0"&gt;Membuat &lt;span data-index-in-node="8" data-path-to-node="0"&gt;Responsive Navigation&lt;/span&gt; adalah penerapan teknis yang menggabungkan struktur HTML semantik, Flexbox untuk perataan, dan Media Query untuk perubahan &lt;i data-index-in-node="153" data-path-to-node="0"&gt;layout&lt;/i&gt; antar perangkat.&lt;/p&gt;&lt;p data-path-to-node="1"&gt;Berikut adalah langkah-langkah teknis untuk membangun &lt;i data-index-in-node="54" data-path-to-node="1"&gt;navbar&lt;/i&gt; yang berubah dari mode horizontal (Desktop) menjadi mode vertikal/tersembunyi (Mobile).&lt;/p&gt;&lt;div&gt;&lt;h3 data-path-to-node="3"&gt;1. Struktur HTML Semantik&lt;/h3&gt;&lt;p data-path-to-node="4"&gt;Gunakan tag &lt;code data-index-in-node="12" data-path-to-node="4"&gt;&amp;lt;nav&amp;gt;&lt;/code&gt; dan &lt;code data-index-in-node="22" data-path-to-node="4"&gt;&amp;lt;ul&amp;gt;&lt;/code&gt; untuk memastikan aksesibilitas (SEO &amp;amp; Screen Reader) yang baik.&lt;/p&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;nav&lt;/span&gt; &lt;span style="color: white; font-style: italic;"&gt;class&lt;/span&gt;&lt;span style="color: #919288;"&gt;="&lt;/span&gt;&lt;span style="color: #a876a8;"&gt;navbar&lt;/span&gt;&lt;span style="color: #919288;"&gt;"&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #919288;"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;div&lt;/span&gt; &lt;span style="color: white; font-style: italic;"&gt;class&lt;/span&gt;&lt;span style="color: #919288;"&gt;="&lt;/span&gt;&lt;span style="color: #a876a8;"&gt;logo&lt;/span&gt;&lt;span style="color: #919288;"&gt;"&amp;gt;&lt;/span&gt;MyBrand&lt;span style="color: #919288;"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;div&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #919288;"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;ul&lt;/span&gt; &lt;span style="color: white; font-style: italic;"&gt;class&lt;/span&gt;&lt;span style="color: #919288;"&gt;="&lt;/span&gt;&lt;span style="color: #a876a8;"&gt;nav-links&lt;/span&gt;&lt;span style="color: #919288;"&gt;"&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="color: #919288;"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;li&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;a&lt;/span&gt; &lt;span style="color: white; font-style: italic;"&gt;href&lt;/span&gt;&lt;span style="color: #919288;"&gt;="&lt;/span&gt;&lt;span style="color: #a876a8;"&gt;#&lt;/span&gt;&lt;span style="color: #919288;"&gt;"&amp;gt;&lt;/span&gt;Home&lt;span style="color: #919288;"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;a&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;li&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="color: #919288;"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;li&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;a&lt;/span&gt; &lt;span style="color: white; font-style: italic;"&gt;href&lt;/span&gt;&lt;span style="color: #919288;"&gt;="&lt;/span&gt;&lt;span style="color: #a876a8;"&gt;#&lt;/span&gt;&lt;span style="color: #919288;"&gt;"&amp;gt;&lt;/span&gt;Projects&lt;span style="color: #919288;"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;a&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;li&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="color: #919288;"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;li&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;a&lt;/span&gt; &lt;span style="color: white; font-style: italic;"&gt;href&lt;/span&gt;&lt;span style="color: #919288;"&gt;="&lt;/span&gt;&lt;span style="color: #a876a8;"&gt;#&lt;/span&gt;&lt;span style="color: #919288;"&gt;"&amp;gt;&lt;/span&gt;Blog&lt;span style="color: #919288;"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;a&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;li&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="color: #919288;"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;li&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;a&lt;/span&gt; &lt;span style="color: white; font-style: italic;"&gt;href&lt;/span&gt;&lt;span style="color: #919288;"&gt;="&lt;/span&gt;&lt;span style="color: #a876a8;"&gt;#&lt;/span&gt;&lt;span style="color: #919288;"&gt;"&amp;gt;&lt;/span&gt;Contact&lt;span style="color: #919288;"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;a&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;li&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #919288;"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;ul&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #919288;"&gt;&amp;lt;&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;div&lt;/span&gt; &lt;span style="color: white; font-style: italic;"&gt;class&lt;/span&gt;&lt;span style="color: #919288;"&gt;="&lt;/span&gt;&lt;span style="color: #a876a8;"&gt;menu-toggle&lt;/span&gt;&lt;span style="color: #919288;"&gt;"&amp;gt;&lt;/span&gt;☰&lt;span style="color: #919288;"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;div&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&lt;/span&gt; &lt;span style="color: #919288;"&gt;&amp;lt;/&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;nav&lt;/span&gt;&lt;span style="color: #919288;"&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="7"&gt;2. Base Style: Desktop First (Gaya Dasar)&lt;/h3&gt;&lt;p data-path-to-node="8"&gt;Pada layar lebar, kita menggunakan Flexbox untuk menata logo di kiri dan menu di kanan secara horizontal.&lt;/p&gt;&lt;response-element class="" ng-version="0.0.0-PLACEHOLDER"&gt;&lt;!----&gt;&lt;!----&gt;&lt;!----&gt;&lt;!----&gt;&lt;!----&gt;&lt;!----&gt;&lt;code-block _nghost-ng-c1890576237="" class="ng-tns-c1890576237-318 ng-star-inserted"&gt;&lt;!----&gt;&lt;!----&gt;&lt;div _ngcontent-ng-c1890576237="" class="code-block ng-tns-c1890576237-318 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwiw8uS0_uaSAxUAAAAAHQAAAAAQmwM" decode-data-ved="1" jslog="223238;track:impression,attention;BardVeMetadataKey:[[&amp;quot;r_b4c5b18bd59383ea&amp;quot;,&amp;quot;c_0882e36ec9fc4660&amp;quot;,null,&amp;quot;rc_7b99825a002d3e68&amp;quot;,null,null,&amp;quot;id&amp;quot;,null,1,null,null,1,0]]"&gt;&lt;div _ngcontent-ng-c1890576237="" class="code-block-decoration header-formatted gds-title-s ng-tns-c1890576237-318 ng-star-inserted"&gt;&lt;span _ngcontent-ng-c1890576237="" class="ng-tns-c1890576237-318"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/code-block&gt;&lt;/response-element&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;navbar&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;justify-content&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;space-between&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;align-items&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;center&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;padding&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;1&lt;/span&gt;&lt;span style="color: #f92672;"&gt;rem&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;5&lt;/span&gt;&lt;span style="color: #f92672;"&gt;%&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;background-color&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #919288;"&gt;#&lt;/span&gt;&lt;span style="color: #ae81ff;"&gt;333&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;color&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;white&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;nav-links&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;gap&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;20&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;list-style&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;none&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;nav-links&lt;/span&gt; &lt;span style="color: #8fa876;"&gt;a&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;color&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;white&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;text-decoration&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;none&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;menu-toggle&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;none&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Sembunyikan icon hamburger di desktop */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;cursor&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;pointer&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="font-style: italic;"&gt;font-size&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;1.5&lt;/span&gt;&lt;span style="color: #f92672;"&gt;rem&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="11"&gt;3. Implementasi Media Query (Mobile Mode)&lt;/h3&gt;&lt;p data-path-to-node="12"&gt;Saat layar di bawah &lt;b data-index-in-node="20" data-path-to-node="12"&gt;768px&lt;/b&gt;, kita ubah perilaku &lt;i data-index-in-node="46" data-path-to-node="12"&gt;flex container&lt;/i&gt; dan posisi menu.&lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;@&lt;/span&gt;&lt;span style="color: #f92672;"&gt;media&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;screen&lt;/span&gt; &lt;span style="color: #f92672;"&gt;and&lt;/span&gt; &lt;span style="color: #919288;"&gt;(&lt;/span&gt;&lt;span style="font-style: italic;"&gt;max-width&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;768&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;)&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;menu-toggle&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;block&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Tampilkan hamburger */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;  &lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;nav-links&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;none&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Sembunyikan menu asli */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;flex-direction&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;column&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt; &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Ubah arah jadi vertikal */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;position&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;absolute&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;top&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;60&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;left&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;0&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;width&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;100&lt;/span&gt;&lt;span style="color: #f92672;"&gt;%&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;background-color&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #919288;"&gt;#&lt;/span&gt;&lt;span style="color: #ae81ff;"&gt;444&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;text-align&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;center&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;padding&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;20&lt;/span&gt;&lt;span style="color: #f92672;"&gt;px&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;0&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;  &lt;span style="color: #6e7066; font-style: italic;"&gt;/* Class tambahan untuk menampilkan menu (via JavaScript) */&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;nav-links&lt;/span&gt;&lt;span style="color: #c0c1b5; font-style: italic;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876; font-style: italic;"&gt;active&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;    &lt;span style="font-style: italic;"&gt;display&lt;/span&gt;&lt;span style="color: #919288;"&gt;:&lt;/span&gt; &lt;span style="color: #66d9ef;"&gt;flex&lt;/span&gt;&lt;span style="color: #919288;"&gt;;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  &lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;}&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="15"&gt;4. Logika Interaksi (JavaScript Ringkas)&lt;/h3&gt;&lt;p data-path-to-node="16"&gt;Karena CSS Media Query hanya mengatur tampilan, kita butuh sedikit JavaScript untuk memicu perubahan &lt;i data-index-in-node="101" data-path-to-node="16"&gt;class&lt;/i&gt; saat tombol hamburger diklik.&lt;/p&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;div style="background-color: #2b2b2b; color: #fdfff1; font-family: &amp;quot;Droid Sans Mono&amp;quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"&gt;&lt;div&gt;&lt;span style="color: #66d9ef; font-style: italic;"&gt;const&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;menuToggle&lt;/span&gt; &lt;span style="color: #f92672;"&gt;=&lt;/span&gt; document&lt;span style="color: #919288;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;querySelector&lt;/span&gt;&lt;span style="color: #919288;"&gt;(&lt;/span&gt;&lt;span style="color: #919288;"&gt;'&lt;/span&gt;&lt;span style="color: #a876a8;"&gt;.menu-toggle&lt;/span&gt;&lt;span style="color: #919288;"&gt;'&lt;/span&gt;&lt;span style="color: #919288;"&gt;);&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #66d9ef; font-style: italic;"&gt;const&lt;/span&gt; &lt;span style="color: #ae81ff;"&gt;navLinks&lt;/span&gt; &lt;span style="color: #f92672;"&gt;=&lt;/span&gt; document&lt;span style="color: #919288;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;querySelector&lt;/span&gt;&lt;span style="color: #919288;"&gt;(&lt;/span&gt;&lt;span style="color: #919288;"&gt;'&lt;/span&gt;&lt;span style="color: #a876a8;"&gt;.nav-links&lt;/span&gt;&lt;span style="color: #919288;"&gt;'&lt;/span&gt;&lt;span style="color: #919288;"&gt;);&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;&lt;div&gt;menuToggle&lt;span style="color: #919288;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;addEventListener&lt;/span&gt;&lt;span style="color: #919288;"&gt;(&lt;/span&gt;&lt;span style="color: #919288;"&gt;'&lt;/span&gt;&lt;span style="color: #a876a8;"&gt;click&lt;/span&gt;&lt;span style="color: #919288;"&gt;'&lt;/span&gt;&lt;span style="color: #919288;"&gt;,&lt;/span&gt; &lt;span style="color: #919288;"&gt;()&lt;/span&gt; &lt;span style="color: #f92672; font-style: italic;"&gt;=&amp;gt;&lt;/span&gt; &lt;span style="color: #919288;"&gt;{&lt;/span&gt;&lt;/div&gt;&lt;div&gt;  navLinks&lt;span style="color: #919288;"&gt;.&lt;/span&gt;classList&lt;span style="color: #919288;"&gt;.&lt;/span&gt;&lt;span style="color: #8fa876;"&gt;toggle&lt;/span&gt;&lt;span style="color: #919288;"&gt;(&lt;/span&gt;&lt;span style="color: #919288;"&gt;'&lt;/span&gt;&lt;span style="color: #a876a8;"&gt;active&lt;/span&gt;&lt;span style="color: #919288;"&gt;'&lt;/span&gt;&lt;span style="color: #919288;"&gt;);&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="color: #919288;"&gt;});&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;Analisis Teknis Perubahan Layout&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;table data-path-to-node="20" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; color: #1f1f1f; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 32px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;thead style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(239, 239, 239); border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;strong style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Komponen&lt;/strong&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(239, 239, 239); border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;strong style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Desktop (Base)&lt;/strong&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(239, 239, 239); border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;strong style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px !important; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;Mobile (&amp;lt; 768px)&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="20,1,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="20,1,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="20,1,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;flex-direction&lt;/code&gt;&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="20,1,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="20,1,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;row&lt;/code&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="20,1,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="20,1,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;column&lt;/code&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="20,2,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="20,2,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="20,2,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;position&lt;/code&gt;&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="20,2,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="20,2,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;static&lt;/code&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="20,2,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="20,2,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;absolute&lt;/code&gt; (untuk &lt;i data-index-in-node="16" data-path-to-node="20,2,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;overlay&lt;/i&gt;)&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="20,3,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="20,3,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="20,3,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;display&lt;/code&gt; (Menu)&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="20,3,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="20,3,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;flex&lt;/code&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="20,3,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="20,3,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;none&lt;/code&gt; (sampai di-toggle)&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="20,4,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;b data-index-in-node="0" data-path-to-node="20,4,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="20,4,0,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;width&lt;/code&gt;&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="20,4,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="20,4,1,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;auto&lt;/code&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 1px solid; clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 8px 12px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;span data-path-to-node="20,4,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border: 0px none rgb(31, 31, 31); clear: none; clip: auto; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(31, 31, 31) none 0px; overlay: none; padding: 0px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;&lt;code data-index-in-node="0" data-path-to-node="20,4,2,0" style="animation: auto ease 0s 1 normal none running none; appearance: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(233, 238, 246); border: 0px none rgb(68, 71, 70); clear: none; clip: auto; color: #444746; columns: auto; contain: none; container: none; content: normal; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline; fill: rgb(0, 0, 0); filter: none; flex: 0 1 auto; float: none; font-family: &amp;quot;Google Sans Text&amp;quot;, sans-serif !important; gap: normal; hyphens: manual; inset: auto; interactivity: auto; isolation: auto; line-height: 1.15 !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; marker: none; mask: none; offset: normal; opacity: 1; order: 0; outline: rgb(68, 71, 70) none 0px; overlay: none; padding: 1px 6px; page: auto; perspective: none; position: static; quotes: auto; r: 0px; resize: none; rotate: none; rx: auto; ry: auto; scale: none; speak: normal; stroke: none; transform: none; transition: all; translate: none; visibility: visible; x: 0px; y: 0px; zoom: 1;"&gt;100%&lt;/code&gt; (memenuhi layar)&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;div&gt;&lt;h3 data-path-to-node="22"&gt;Tips Optimasi:&lt;/h3&gt;&lt;ul data-path-to-node="23"&gt;&lt;li&gt;&lt;p data-path-to-node="23,0,0"&gt;&lt;b data-index-in-node="0" data-path-to-node="23,0,0"&gt;Transition:&lt;/b&gt; Tambahkan &lt;code data-index-in-node="22" data-path-to-node="23,0,0"&gt;transition: 0.3s ease;&lt;/code&gt; pada &lt;code data-index-in-node="50" data-path-to-node="23,0,0"&gt;.nav-links&lt;/code&gt; jika kamu menggunakan properti seperti &lt;code data-index-in-node="100" data-path-to-node="23,0,0"&gt;max-height&lt;/code&gt; atau &lt;code data-index-in-node="116" data-path-to-node="23,0,0"&gt;opacity&lt;/code&gt; untuk memberikan efek animasi saat menu muncul.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p data-path-to-node="23,1,0"&gt;&lt;b data-index-in-node="0" data-path-to-node="23,1,0"&gt;Accessibility:&lt;/b&gt; Pastikan tombol hamburger memiliki atribut &lt;code data-index-in-node="58" data-path-to-node="23,1,0"&gt;aria-label="Toggle navigation"&lt;/code&gt; untuk pengguna tuna netra.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxsmpS3cgPcy5Orqzb4FOSrwb_P6B6lXxoTpZylybA3ibInMZ8r1DQ5Ew3j-jb4crJCDMNNE1CB8WtK_ztLjNjzsMlrfcw8KbkMr9ofrB2NMQnLLATn4Uz88tOSYY3Kg3RUR5mNFAndhWAEpmpIMw3M-OB9yRkXgXbry_fDSl1FajwG6S2hIcumA3ai24/s72-w510-h69-c/Jepretan%20layar_20260202_100544.png" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total><georss:featurename xmlns:georss="http://www.georss.org/georss">Cirebon, Kota Cirebon, Jawa Barat, Indonesia</georss:featurename><georss:point xmlns:georss="http://www.georss.org/georss">-6.7320229 108.5523164</georss:point><georss:box xmlns:georss="http://www.georss.org/georss">-35.042256736178842 73.3960664 21.578210936178845 143.7085664</georss:box></item><item><title>HTML Beginner</title><link>https://elementertech.blogspot.com/2026/01/html-beginner.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Wed, 7 Jan 2026 18:38:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-7307592830601005781</guid><description>&lt;h1 style="text-align: left;"&gt;&amp;nbsp;HTML untuk Pemula&lt;/h1&gt;&lt;h1 style="text-align: left;"&gt;&amp;nbsp;&lt;/h1&gt;&lt;h2 style="text-align: left;"&gt;&amp;nbsp;Perkenalan tentang web developer&amp;nbsp;&lt;/h2&gt;&lt;h2 style="text-align: left;"&gt;&amp;nbsp;Internet&lt;/h2&gt;&lt;p style="text-align: left;"&gt;adalah sistem jaringan komputer yang saling terhubung secara global dengan menggunakan paket protokol internet (TCP/IP) untuk menghubungkan perangkat di seluruh dunia.&lt;br /&gt;&lt;br /&gt;Manfaat Internet&amp;nbsp;&lt;br /&gt;berbagai hal yang bisa dilakukan dengan internet&lt;br /&gt;- berbgai data seperti Dokumen, Gambar, Suara, dan video&lt;br /&gt;- Menikmati layanan hiburan streaming multimedia&lt;br /&gt;- Pemasaran melalui Internet&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;&lt;h3 style="text-align: left;"&gt;Hubungan Web dengan Internet&lt;/h3&gt;&lt;p style="text-align: left;"&gt;- Jaringan global&lt;br /&gt;Tercipta karena banyaknya perangkat komputer saling terhubung&lt;br /&gt;&lt;br /&gt;- Media transportasi&lt;br /&gt;untuk berbagi data dan informasi&lt;br /&gt;&lt;br /&gt;- TCP/IP&lt;br /&gt;Protokol yang digunakan oleh internet&lt;br /&gt;&lt;br /&gt;- Sebuah Sistem&lt;br /&gt;Aplikasi yang memanfaatkan internet&lt;br /&gt;&lt;br /&gt;- Sumber Informasi&lt;br /&gt;sebagai wadah untuk melampirkan data&lt;br /&gt;&lt;br /&gt;- HTTP&lt;br /&gt;HyperText Transfer protocol&lt;br /&gt;&lt;img alt="" src="https://blogger.googleusercontent.com/img/a/AVvXsEhYLWSpK4sbJtfiuIovhxtgr516M_BV9f1glgiOAK83iz_k3xQ6TzeAA6VsfjXEdjQpnnLWsypd3xyyVFD7TOPjB88baRT9lOn1SJDqg9Veh0gpdtoVBPXWdWezglf-IF5360qaF-maVB87UoC9YPyRbb7S74vNfzrwIWNfvRuREp_YVLB6YT4G4PxRibg" /&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="text-align: left;"&gt;&amp;nbsp;Frontend Dan Backend&lt;br /&gt;&lt;/h2&gt;&lt;p style="text-align: left;"&gt;Front-end&lt;br /&gt;lebih fokus kedalam tampilan web&lt;/p&gt;&lt;p style="text-align: left;"&gt;markup dan bahasa web:&lt;br /&gt;HTML, CSS, Javascript&lt;br /&gt;Asynchronous request&lt;br /&gt;Accessibility&lt;br /&gt;cross-Browser&lt;br /&gt;Search Engine optimisastion&lt;br /&gt;&lt;br /&gt;Back-end&lt;br /&gt;lebih fokus ke server data base administration&lt;/p&gt;&lt;p style="text-align: left;"&gt;Programming dan scripting:&lt;br /&gt;Python, PHP, Java, Node.Js&lt;br /&gt;Server Architecture&lt;br /&gt;Database Administration&lt;br /&gt;Scalability&lt;br /&gt;Security&lt;br /&gt;Data Transformation&lt;br /&gt;Backup&lt;br /&gt;&lt;br /&gt;&amp;nbsp;&lt;br /&gt;&lt;/p&gt;&lt;h2 style="text-align: left;"&gt;Pengenalan HTML&amp;nbsp;&lt;/h2&gt;&lt;p style="text-align: left;"&gt;HTML itu Structure&amp;nbsp;&lt;br /&gt;CSS itu Style&amp;nbsp;&lt;br /&gt;JS itu Behaviour&lt;/p&gt;&lt;p style="text-align: left;"&gt;&amp;nbsp;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;b&gt;HTML&amp;nbsp;&lt;/b&gt;&lt;br /&gt;HyperText Markup Language digunakan untuk membuat struktur sebuah paper agar mudah di baca dan dibagikan melalui internet pada masanya.&lt;br /&gt;&lt;br /&gt;HTML dari sebuah halaman wibsite merupakan sekumpulan element yang dimengerti oleh browser.&lt;/p&gt;&lt;p style="text-align: left;"&gt;beberapa element yang umum digunakan :&lt;br /&gt;- &amp;lt;p&amp;gt; element - digunakan untuk paragraph&lt;br /&gt;- &amp;lt;h1&amp;gt; element - menggabarkan judul utama&lt;br /&gt;- &amp;lt;img&amp;gt; element - digunakan untuk memuat gambar&lt;br /&gt;- &amp;lt;form&amp;gt; element - berfungsi sebagai formulir&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;&lt;h2 style="text-align: left;"&gt;Mengenal kerangka Utuh Dokumen HTML&lt;/h2&gt;&lt;p style="text-align: left;"&gt;kerangka HTML standar itu berisi :&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;br /&gt;&amp;lt;!Doctype html&amp;gt;&amp;nbsp;&lt;br /&gt;&amp;lt;html lang="en"&amp;gt;&lt;br /&gt;&amp;lt;head&amp;gt;&lt;br /&gt;&lt;span&gt;&amp;nbsp; &amp;nbsp; &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;&lt;br /&gt;&lt;/span&gt;&amp;lt;/head&amp;gt;&lt;br /&gt;&amp;lt;/html&amp;gt;&lt;br /&gt;&lt;br /&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&amp;nbsp;&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/a/AVvXsEhYLWSpK4sbJtfiuIovhxtgr516M_BV9f1glgiOAK83iz_k3xQ6TzeAA6VsfjXEdjQpnnLWsypd3xyyVFD7TOPjB88baRT9lOn1SJDqg9Veh0gpdtoVBPXWdWezglf-IF5360qaF-maVB87UoC9YPyRbb7S74vNfzrwIWNfvRuREp_YVLB6YT4G4PxRibg=s72-c" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>UI/UX Untuk Developer</title><link>https://elementertech.blogspot.com/2026/01/definisi-uiux.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Tue, 6 Jan 2026 03:00:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-7880443287384371305</guid><description>&lt;h1 style="text-align: left;"&gt;&amp;nbsp;User Interface Design&lt;/h1&gt;&lt;p style="text-align: left;"&gt;&lt;br /&gt;Desain antermuka dari sebuah produk seperti aplikasi atau website agar terlihat menarik, intiuitif, dan konsisten&amp;nbsp;&lt;br /&gt;&lt;br /&gt;Tujuan Utama dari UI Design adalah untuk menciptakan antarmuka yang mudah digunakan, menarik secara estetika, dan mencerminkan identitas merek.&lt;br /&gt;&lt;br /&gt;key : Visual, Estetika, dan Interaksi&amp;nbsp;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;&lt;h2 style="text-align: left;"&gt;&lt;b&gt;User Experience Design&lt;/b&gt;&lt;/h2&gt;&lt;p style="text-align: left;"&gt;&lt;br /&gt;Desain pengalaman pengguna secara keseluruhan saat merka berinteraksi dengan produk atau layanan.&lt;br /&gt;&lt;br /&gt;proses UX Design mencakup penelitian pengguna, pengembangan alur kerja(user flow),prototipe, hingga pengujian untuk memastikan produk mudah digunakan dan bermanfaat.&lt;br /&gt;&lt;br /&gt;Key : User Flow, Navigasi, dan Analisis&lt;br /&gt;&lt;br /&gt;&amp;nbsp;&lt;br /&gt;&lt;/p&gt;&lt;h2 style="text-align: left;"&gt;&lt;b&gt;UI &amp;amp; UX apa bedanya ?&lt;/b&gt;&lt;/h2&gt;&lt;p style="text-align: left;"&gt;&lt;br /&gt;&lt;/p&gt;&lt;h4 style="text-align: left;"&gt;&lt;b&gt;UI Design&lt;/b&gt;&lt;/h4&gt;&lt;p style="text-align: left;"&gt;anatrmuka yang berfokus pada elemen-elemen visual pada suatu produk.&lt;br /&gt;UI design memastikan tampilan produk menarik secara visual dan konsisten di berbagai layar atau perangkat.&lt;br /&gt;&lt;br /&gt;yg dikerjakan : Warna, Tipografi, Icon, Layout, Gaya Brand, Animasi, Sistem Desain.&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;&lt;h4 style="text-align: left;"&gt;&lt;b&gt;UX Design&amp;nbsp;&lt;/b&gt;&lt;/h4&gt;&lt;p style="text-align: left;"&gt;Fokus pada pengalaman pengguna saat berintraksi denganproduk, dan bagaimana produk tersebut memenuhi kebutuhan pengguna dan seberapa mudah bernavigasi di dalamnya.&lt;br /&gt;&lt;br /&gt;yg dikerjakan : Riset, User Flow, Wireframe, Testing, Persona, Feedback, Insight&lt;br /&gt;&lt;img alt="" src="https://blogger.googleusercontent.com/img/a/AVvXsEjXwsh8J15M5SgJRNmCLryS8o1vrKEDA3OqeP-sRNydRg7AekpgPIO-P7zTlktbd-EYTSH9bscHJDQfzLF-m6W0bvxGWpF705_fYxDGjIaVoUPm8Ir20oHI9U3_LlSPUB_Mh9CeJaP77CE9IV4hzeAPMV4jKNZmTCdFvjHhpHQAHyUQv44OWY51Cv60K-o" /&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;br /&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/p&gt;&lt;h2 style="text-align: left;"&gt;&lt;b&gt;UI/UX untuk Penting untuk programmer ?&lt;/b&gt;&lt;/h2&gt;&lt;p style="text-align: left;"&gt;&lt;br /&gt;Tujuan utama dari komunikasi yang baik antara UI/UX Designer dan Programmer adalah untuk menghasilkan produk yang tepat dan sesuai dengan keinginan pasar.&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;&lt;h2 style="text-align: left;"&gt;Peran UI/UX untuk Programmer&lt;/h2&gt;&lt;ul style="text-align: left;"&gt;&lt;li&gt;UI/IX sebagai pedoman visual dari produk yang akan dikembangkan&lt;/li&gt;&lt;li&gt;Cakupan proses pengembangan akan lebih jelas&lt;/li&gt;&lt;li&gt;Programmer dapat fokus untuk pengembangan&lt;/li&gt;&lt;li&gt;Membantu memprioritaskan fitur apa saja yang akan dikembangkan&lt;/li&gt;&lt;li&gt;meningkatkan kualitas akhir dari produk&lt;/li&gt;&lt;li&gt;Membantu dalam pembaruan fitur untuk ke depan&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="text-align: left;"&gt;Tools UI/UX Designer&amp;nbsp;&lt;br /&gt;&lt;/h2&gt;&lt;ol style="text-align: left;"&gt;&lt;li&gt;Sketch&lt;br /&gt;lahir pada tahun 2010, digunakan khusus untuk men-desain Produk Interface dan User Experience, Komunitas yang luas dari pengguna, melahirkan banyak integrasi plugin, Hanya dapat diakses untuk pengguna MacOS&lt;br /&gt;&lt;br /&gt;&lt;/li&gt;&lt;li&gt;&amp;nbsp;Adobe XD&lt;br /&gt;&amp;nbsp;lahir pada tahun 2016, dibuat oleh Adobe sebagai alternatif bagi para UI Designer yang sudah dalam ekosistem Adobe, Pengguna Windows dapat menggunakan tool ini tanpa harus berpindah ke MacOS, Intergrasi antar produk Adobe lainnya seperti Photoshop, Ilustrator, Dll, Sinkronisasi via&amp;nbsp; Cloud memudahkan Designer bekerja dimana saja.&lt;br /&gt;&lt;br /&gt;&lt;/li&gt;&lt;li&gt;&amp;nbsp;Figma&lt;br /&gt;lahir pada tahun 2016 akhir tanpa harus membayar di depan, Aplikasi berbasis web, Secara fitur hampir sama dengan Adobe XD, Fokus pada fitur kolaboratif, terlebih pada zaman pademi 2020, komunitas yang terus berkembang, banyak merilis plugin dan files untuk dapat dipakai bersama, Dapat mengintegrasikan vector, image, ilustrasi, 3d, font, vidio.&lt;br /&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="text-align: left;"&gt;Keunggulan Figma dibandingkan software lain&amp;nbsp;&lt;/h2&gt;&lt;p style="text-align: left;"&gt;&amp;nbsp;Figma memiliki keunggulan :&lt;/p&gt;&lt;ul style="text-align: left;"&gt;&lt;li style="text-align: left;"&gt;Kolaborasi real-time&lt;/li&gt;&lt;li style="text-align: left;"&gt;Prototyping interaktif&lt;/li&gt;&lt;li style="text-align: left;"&gt;Ekspor elemen ke format yang bisa digunakan oleh developer (seperti PNG, SCG, CSS, dll)&lt;/li&gt;&lt;li style="text-align: left;"&gt;Dukungan library dan plugin dari komunitas pengguna&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;&lt;/p&gt;&lt;h2 style="text-align: left;"&gt;Perinsip UX Konsistensi dalam Design&amp;nbsp;&lt;/h2&gt;&lt;h4 style="text-align: left;"&gt;&lt;/h4&gt;&lt;h3 style="text-align: left;"&gt;konsistensi dalam Design&amp;nbsp;&lt;/h3&gt;&lt;p style="text-align: left;"&gt;&lt;span style="font-weight: 400;"&gt;konsistensi adalah salah satu pilar utama dalam pengalaman pengguna yang baik. Dengan menjaga konsistensi, pengguna dapat dengan mudah memahami dan mengingat cara kerja aplikasi.&lt;br /&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;&lt;h4 style="text-align: left;"&gt;&lt;span style="font-weight: 400;"&gt;1. Elemen Visual&lt;br /&gt;- Gunakan palet warna yang konsisten di seluruh aplikasi.&lt;br /&gt;- Terapkan tipografi yang seragam untuk heading, subheading, dan teks biasa,&lt;br /&gt;&lt;br /&gt;2. Interaksi&lt;br /&gt;- Gunakan pola yang sama untuk elemen interaktif seperti tombol, link, dan menu.&lt;br /&gt;- pastikan fungsi tombol atau elemen navigasi serupa selalu memiliki posisi yang sama di seluruh halaman.&lt;/span&gt;&lt;/h4&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;3. Manfaat&lt;br /&gt;- Membantu pengguna merasa "dirumah" saat menjelajah aplikasi&lt;br /&gt;- Mengurangi waktu belajar pengguna.&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;h3 style="text-align: left;"&gt;Prinsip UX Feedback dan Responsiveness&lt;br /&gt;&lt;p style="text-align: left;"&gt;&lt;span style="font-weight: normal;"&gt;Pengguna perlu merasa bahwa aplikasi merespon tindakan mereka. feedback yang baik meningkatkan rasa percaya dan kenyamanan pengguna.&lt;br /&gt;&lt;br /&gt;1. Visual&lt;br /&gt;- Gunakan Animasi atau perubahan warna untuk menunjukan elemen aktif (contoh: tombol yang berubah warna saat di klik)&lt;br /&gt;&lt;br /&gt;2. Pesan&amp;nbsp;&lt;br /&gt;- Tampilan pesan keberhasilan, kesalahan, atau informasi tambahan saat pengguna menyelesaikan tindakan (contoh: "Form berhasil dikirim")&lt;br /&gt;&lt;br /&gt;3. Responsiveness&lt;br /&gt;- Pastikan aplikasi merespon dengan cepat setiap input pengguna.&lt;br /&gt;- Gunakan loading indicator jika tindakan memerlukan waktu lebih lama.&lt;br /&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;&lt;/h3&gt;&lt;h3 style="text-align: left;"&gt;Prinsip UX Pengujian Usabilty Sederhana&lt;br /&gt;&lt;/h3&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;Pengujian usability membantu memastikan bahwa desain yang telah diterapkan benar-benar mudah digunakan oleh pengguna.&lt;br /&gt;&lt;br /&gt;1. Tes Lima Pengguna&lt;br /&gt;- Lakukan interview pada lima pengguna untuk mencoba aplikasi Anda.&lt;br /&gt;- Catat hambatan yang mereka alami dan perbaiki berdasarkan temuan tersebut.&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;2. Tes A/B&lt;br /&gt;- Bandingkan dua versi desain untuk melihat mana yang lebih efektif.&lt;br /&gt;&lt;br /&gt;3. Walkthrough&lt;br /&gt;- Amati pengguna saat mereka mencoba menyelesaikan tugas tertentu&amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;- Ajukan pertanyaan seperti "Apa yang anda pikirkan saat melihat layar ini?"&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style="font-weight: 400;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;&lt;h3 style="text-align: left;"&gt;Best Practices Developer &amp;amp; UIUX Designer&lt;br /&gt;&lt;/h3&gt;&lt;div&gt;Mengintergrasikan praktik terbaik antara UI/UX Designer dan Developer dapat memastikan hasil akhir produk yang berkualitas tinggi dan sesuai dengan kebutuhan pengguna.&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;1. Komunikasikan Dengan Tim Desain:&lt;div&gt;- lakukan diskusi rutin dengan tim desain untuk memahami maksud di balik elemen desain&lt;br /&gt;- Dapatkan feedback secara terus-menerus untuk memperbaiki implementasi desain.&lt;br /&gt;&lt;br /&gt;2. Handover yang efektif:&lt;br /&gt;- patikan desain yang diberikan kepada programmer dilengkapi dengan dokumentasi lengkap.&lt;br /&gt;- Gunakan anotasi untuk menjelaskan margin, padding, dan interaksi elemen.&lt;br /&gt;&lt;p&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;3. Penggunaan Tools baru&lt;br /&gt;- Gunakan versi terbaru dari tools desain untuk memastikan kompabilitas.&lt;br /&gt;- Terapkan sistem design token untuk menjaga konsistensi antara desain dan pengembangan&lt;br /&gt;&lt;br /&gt;4. kelelarasan antara Desain dan Pengembangan:&lt;br /&gt;- Gunakan library komponen yang sama antara desainer dan developer&lt;br /&gt;- Pastikan setiap perubahan desain segera dikomunikasikan kepada tim pengembang.&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;br /&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;br /&gt;&lt;/p&gt;&lt;p style="text-align: left;"&gt;&lt;br /&gt;&lt;/p&gt;&lt;/div&gt;&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/a/AVvXsEjXwsh8J15M5SgJRNmCLryS8o1vrKEDA3OqeP-sRNydRg7AekpgPIO-P7zTlktbd-EYTSH9bscHJDQfzLF-m6W0bvxGWpF705_fYxDGjIaVoUPm8Ir20oHI9U3_LlSPUB_Mh9CeJaP77CE9IV4hzeAPMV4jKNZmTCdFvjHhpHQAHyUQv44OWY51Cv60K-o=s72-c" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>git lanjutan </title><link>https://elementertech.blogspot.com/2026/01/git-lanjutan.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Mon, 5 Jan 2026 23:51:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-1378171466220173395</guid><description>&lt;p&gt;&amp;nbsp; Keunggulan menggunakan version control&amp;nbsp;&lt;/p&gt;&lt;p&gt;- Melacak perubahan pada source code&amp;nbsp;&lt;br /&gt;- kolaborasi&amp;nbsp;&amp;nbsp;&lt;/p&gt;&lt;p&gt;Jenis Version Control System&amp;nbsp;&lt;/p&gt;&lt;p&gt;1. GIT&lt;br /&gt;2. CVS -Concurrent Versions System&lt;br /&gt;3. Subversion&lt;br /&gt;4. Mercurial&lt;br /&gt;5. Dan lain-lainnya...&lt;/p&gt;&lt;p&gt;PErsiapan BElajar&amp;nbsp;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;1. Sudah menginstall GIT&lt;br /&gt;2. Visual Studio Code&lt;br /&gt;3. Terminal&lt;/p&gt;&lt;p&gt;&lt;br /&gt;1. Hal pertama yang perlu dilakukan adalah configurasi&amp;nbsp;&lt;br /&gt;git config --global user.name "nama"&lt;br /&gt;git config --global user.email "alamatemail"&lt;/p&gt;&lt;p&gt;2. membuat repository git dengan melakukan git init nantinya akan ada repository .git biasanya ditandai dengan adanya master atau main dalam terminal&lt;/p&gt;&lt;p&gt;3. memasukan file ke repository git dengan cara ketik git add . (untuk mesukan semua)&amp;nbsp;&lt;br /&gt;&lt;br /&gt;4. selanjutnya kita bisa melakukan git commit -m "comman" (untuk melakukan commit siap melakukan push)&lt;/p&gt;&lt;p&gt;5. mengubah file , kita gunakan git diff untuk melihat perubahan pada file.&lt;br /&gt;gunakan git status untuk melihat status apakah ada file baru atau adakah file yg di ubah.&lt;/p&gt;&lt;p&gt;&amp;nbsp;6. melihat perubahan history dengan git log , yg di online bisa menggunakan git log --online&lt;/p&gt;&lt;p&gt;7. membatalkan perubahan&amp;nbsp;&lt;br /&gt;- git restore&amp;nbsp;&lt;br /&gt;Digunakan untuk membatalkan perubahan yang belum di-stage(masih di working area)&lt;br /&gt;mengembalikan isi file ke kondisi terakhir yang ada di staging area atau commit terakhir&lt;/p&gt;&lt;p&gt;-git restore --staged&lt;br /&gt;Digunakan untuk mengeluarkan file dari staging Area&lt;br /&gt;fungsi jika sudah melakukan git add, tapi berubah pikiran dan belum ingin commit, gunakan perintah ini.&lt;br /&gt;&lt;br /&gt;-git restore -s (--source)&lt;br /&gt;Digunakan untuk memulihkan file dari sumber (commit) tertentu.&lt;br /&gt;kamu bisa mengambil isi file dari commit lama atau branch lain tampa berpindah branch.&lt;br /&gt;&lt;br /&gt;- git reset&lt;br /&gt;ini adlah perintah serbabisa yang lebih berbahaya karena bisa mengubah history commit&lt;br /&gt;memindahkan penanda branch (head) ke commit tertentu.&lt;/p&gt;&lt;p&gt;- branch dan merge&lt;br /&gt;seperti yang dibahas sebelumnya branche adalah percabangan pohon untuk membuat fitur, jadi lebih terarah&lt;br /&gt;sementara merge yaitu untuk menyatukan branch, dan yg menyatukan branch adalah orang yg bertanggung jawab pada sebuah projek itu.&lt;br /&gt;&lt;br /&gt;Cara merefisi commit&amp;nbsp;&lt;br /&gt;1. Menggunakan Checkout&amp;nbsp;&lt;br /&gt;git checkout sudah di update di pecahkan karena fungsinya sudah terlalu banyak. diganti dengan git switch ataau git restore. jika digunakan untuk kembali ke commit lama, git akan masuk mode detached HEAD.&lt;br /&gt;Sangat aman hanya untuk melihat kode lama (read-only) tampa meruak apapun,&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;2. Revert&lt;br /&gt;printah ini tidak menghapus history, melainkan membuat commit baru yang isinya adalah kebalikan dari commit yang ingin dibatalkan.&lt;br /&gt;paling aman untuk kerja tim, histori tetep utuh, sehingga rekan tim lain tidak mengalami error diverged history.&lt;br /&gt;bisa terjadi konflik jika file yang ingin kamu revert sudah diubah lagi secara signifikan di commit-commit setelahnya. kamu harus menyelesaikan konflik tersebut secara manual lalu melakukan giot revert --continue&lt;br /&gt;&lt;br /&gt;3. Reset&amp;nbsp;&lt;br /&gt;ini adalah cara yang paling keras karena benar-benar memindahkan posisi branch kembali ke masa lalu&amp;nbsp;&lt;br /&gt;variasi :&lt;br /&gt;--soft commit dibatalkan tetapi file editan tetap ada di staging area (siap di-commit ulang).&lt;br /&gt;--mixed (default)L commit dibatalkan, file editan ada di working Directory (belum di add).&lt;br /&gt;--hard: Dihapus total file akan kembali ke kondisi commit lama, semua editan hilang.&lt;br /&gt;kelebihan histori jadi sangat bersih seolah-olah kesalahan tidak pernah terjadi.&lt;br /&gt;sangat berbahaya jika commit sudah di push ke server (github/gitlab). jika kamu reset dan push ulang, tim lain akan mengalami error berat.&lt;br /&gt;akan memicu konflik besar bagi anggota tim lain saat mereka melakukan git pull&lt;br /&gt;&lt;br /&gt;git commit --amend&lt;br /&gt;jika hanya salah tulis pesan commit atau ada satu file tertinggal di commit paling baru.&lt;br /&gt;memperbaiki commit terakhir tampa membuat commit baru.&lt;br /&gt;cara :&lt;br /&gt;git add .&amp;nbsp;&lt;br /&gt;git commit -- amend -m "pesan baru"&lt;br /&gt;&lt;br /&gt;jika kamu bekerja sendirian di komputer lokal, gunakan git reset. tetapi jika kamu bekerja dalam tim dan sudah melakukan push, selalu gunakan git revert&lt;br /&gt;&lt;br /&gt;4. Git Clone&amp;nbsp;&lt;br /&gt;Digunakan untuk mengunduh atau mengclone repository milik orang lain yang open source di internet&lt;br /&gt;&lt;br /&gt;5. Git push&lt;br /&gt;Digunakan untuk mengunggah atau push repository lokal kita ke publik bisa di github atau gitlab dan sebagainya. untuk melakukan git push ini kita perlu sudah sampai git commit dahulu ya...&amp;nbsp;&lt;br /&gt;&lt;br /&gt;6. github pull request&lt;br /&gt;ini fiturnya jelas ya ada di github di webnya github, gunakan adalah untuk memberitahu anggota tim lain bahwa kita telah selesai dan siap mengerjakan suatu fitur atau perbaikan kode, dan ingin menggabungkan kode tersebut ke repository utama.&lt;br /&gt;&lt;br /&gt;7. Aturan menulis Commit&lt;br /&gt;- struktur standar pesan commit&amp;nbsp;&lt;br /&gt;&amp;lt;type&amp;gt;: &amp;lt;subject&amp;gt;&lt;br /&gt;&amp;lt;body&amp;gt; (opsional)&lt;br /&gt;&amp;lt;footer&amp;gt; (opsional)&lt;br /&gt;&lt;br /&gt;-Conventional Commit&lt;br /&gt;&lt;/p&gt;&lt;table data-path-to-node="8" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-bottom: 32px; margin-top: 0px !important;"&gt;&lt;thead style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;tr style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;strong style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-bottom: 0px !important; margin-top: 0px !important;"&gt;Tipe&lt;/strong&gt;&lt;/td&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;strong style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-bottom: 0px !important; margin-top: 0px !important;"&gt;Deskripsi&lt;/strong&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;tr style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;span data-path-to-node="8,1,0,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;b data-index-in-node="0" data-path-to-node="8,1,0,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;feat&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;span data-path-to-node="8,1,1,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;Menambahkan fitur baru ke dalam kode.&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;span data-path-to-node="8,2,0,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;b data-index-in-node="0" data-path-to-node="8,2,0,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;fix&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;span data-path-to-node="8,2,1,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;Memperbaiki &lt;i data-index-in-node="12" data-path-to-node="8,2,1,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;bug&lt;/i&gt; atau kesalahan.&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;span data-path-to-node="8,3,0,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;b data-index-in-node="0" data-path-to-node="8,3,0,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;docs&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;span data-path-to-node="8,3,1,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;Perubahan pada dokumentasi (seperti README).&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;span data-path-to-node="8,4,0,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;b data-index-in-node="0" data-path-to-node="8,4,0,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;style&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;span data-path-to-node="8,4,1,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;Perubahan format (spasi, titik koma) tanpa mengubah logika kode.&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;span data-path-to-node="8,5,0,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;b data-index-in-node="0" data-path-to-node="8,5,0,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;refactor&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;span data-path-to-node="8,5,1,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;Mengubah kode untuk perbaikan struktur, bukan fitur atau bug.&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;span data-path-to-node="8,6,0,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;b data-index-in-node="0" data-path-to-node="8,6,0,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;test&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;span data-path-to-node="8,6,1,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;Menambah atau memperbaiki unit test.&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;span data-path-to-node="8,7,0,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;b data-index-in-node="0" data-path-to-node="8,7,0,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;chore&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;&lt;td style="border: 1px solid; font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;&lt;span data-path-to-node="8,7,1,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;Tugas rutin seperti memperbarui &lt;i data-index-in-node="32" data-path-to-node="8,7,1,0" style="font-family: Google Sans Text, sans-serif !important; line-height: 1.15 !important; margin-top: 0px !important;"&gt;library&lt;/i&gt; atau konfigurasi build.&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>GIT DASAR 1</title><link>https://elementertech.blogspot.com/2026/01/git-dasar-1.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Sun, 4 Jan 2026 08:17:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-6534333033249221917</guid><description>&lt;p&gt;&amp;nbsp;BELAJAR GIT DASAR&amp;nbsp;&lt;/p&gt;&lt;p&gt;Git merupakan sistem kontrol versi terdistribusi yang digunakan untuk melacak perubahan dalam kode sumber selama pengembangan perangkat lunak. Dengan Git, beberapa pengembang dapat bekerja secara bersamaan pada proyek yang sama tanpa konflik, memungkinkan kolaborasi yang lebih efisien dan mengelolaan versi kode yang lebih baik.&lt;br /&gt;&lt;br /&gt;Cara Intall Git Di Linux Debian |&lt;br /&gt;&lt;br /&gt;&amp;gt;&amp;gt;&amp;gt; sudo apt update&amp;nbsp;&lt;br /&gt;&amp;gt;&amp;gt;&amp;gt; sudo apt upgrade&lt;br /&gt;&amp;gt;&amp;gt;&amp;gt; sudo apt install git&lt;br /&gt;&amp;gt;&amp;gt;&amp;gt; git --version (cek sudah terinstall / belum)&lt;br /&gt;&lt;br /&gt;&lt;a href="https://git-scm.com/cheat-sheet"&gt;Git Cheat Sheet&lt;/a&gt;&amp;nbsp;untuk melihat command promp jika lupa&amp;nbsp;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;&lt;br /&gt;Github dan Gitlab adalah salah satu platform GIT Siap pakai.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;Cheat seet simple yang akan di pelajari :&lt;br /&gt;&lt;/p&gt;&lt;p&gt;&amp;gt; Create&lt;br /&gt;- git init&amp;nbsp;&lt;br /&gt;- git clone&lt;br /&gt;&lt;br /&gt;&amp;gt; Make A Change&lt;br /&gt;- git add &amp;lt;file&amp;gt;&lt;br /&gt;- git add .&lt;br /&gt;- git commit -m "&amp;lt;Message&amp;gt;"&lt;br /&gt;- git reset &amp;lt;File&amp;gt;&lt;br /&gt;- git reset --hard&lt;br /&gt;&lt;br /&gt;&amp;gt; Observe&lt;br /&gt;- git status&lt;br /&gt;- git diff&lt;br /&gt;-git show&lt;br /&gt;- git log&lt;br /&gt;&lt;br /&gt;&amp;gt; Sync&lt;br /&gt;- git push&lt;br /&gt;- git diff&lt;br /&gt;- git show&lt;br /&gt;- git log&lt;br /&gt;&lt;br /&gt;&amp;gt; Branch&lt;br /&gt;- git branch&lt;br /&gt;- git checkout&lt;br /&gt;- git merge&lt;br /&gt;- git tag.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;GIT INIT&lt;br /&gt;perintah awal git untuk creat projek di lokal&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="https://blogger.googleusercontent.com/img/a/AVvXsEgXMYVPp-THG_hKwEQNJBP3bJYqnJBtBANN9G-lBoSb_dGI1QMYHs_IwLs7RQeULNFuRsdSiEvRU11zlUrehls3v4zpG1xSXjLAyY1ETfHnPrkkSHI2sh5rKLOH4yW6kpqDr1b4JDb1iLiy--FL1sCGQXb9KsVWfAlGM-m46XEb8x3k1jROFamHR2AiCUw" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"&gt;&lt;img alt="" data-original-height="394" data-original-width="875" height="144" src="https://blogger.googleusercontent.com/img/a/AVvXsEgXMYVPp-THG_hKwEQNJBP3bJYqnJBtBANN9G-lBoSb_dGI1QMYHs_IwLs7RQeULNFuRsdSiEvRU11zlUrehls3v4zpG1xSXjLAyY1ETfHnPrkkSHI2sh5rKLOH4yW6kpqDr1b4JDb1iLiy--FL1sCGQXb9KsVWfAlGM-m46XEb8x3k1jROFamHR2AiCUw" width="320" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;br /&gt;git init printah untuk menginisialisai code kita.&lt;br /&gt;ls -al perintah linux untuk melihat semua direktori yg ada termaksud file hidden&lt;/p&gt;&lt;p&gt;semua folder perubahan kita akan ada di file .git&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;GIT CLONE&lt;span&gt;&amp;nbsp; &lt;br /&gt;ini untuk mengclone github repository milik orang lain dengan code sumber terbuka&amp;nbsp;&lt;br /&gt;1. buka browser dan cari projek open source&amp;nbsp;&lt;br /&gt;2. cari tombol hijau &amp;lt; &amp;gt; code&amp;nbsp;&lt;br /&gt;3. lalu ada &amp;gt;_ clone&amp;nbsp;&lt;br /&gt;4. Copy Link Clone&lt;br /&gt;5. buka terminal yg sudah ada di folder baru&lt;br /&gt;6. git clone https//:projekgithub.page.git&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;div class="separator" style="clear: both; text-align: center;"&gt;&lt;a href="https://blogger.googleusercontent.com/img/a/AVvXsEg0SFwpaAKLaA6bc8FNeiqVUuYS2Fke_WERRheg-_8Xw_T9u9-tS5P1UpOmgB3RcTq5FmH1__DcewUKycWI4B8EcSu72dW9FVC8DU3G8gAzvOZIk43t6xkGvB2g2RDu5EqEJyxaWOw0QocSFb87BeF0uKR91hhZX2UuAT9h-kh_9s3XyqhHqWDMm9D0zX0" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"&gt;&lt;img alt="" data-original-height="295" data-original-width="967" height="98" src="https://blogger.googleusercontent.com/img/a/AVvXsEg0SFwpaAKLaA6bc8FNeiqVUuYS2Fke_WERRheg-_8Xw_T9u9-tS5P1UpOmgB3RcTq5FmH1__DcewUKycWI4B8EcSu72dW9FVC8DU3G8gAzvOZIk43t6xkGvB2g2RDu5EqEJyxaWOw0QocSFb87BeF0uKR91hhZX2UuAT9h-kh_9s3XyqhHqWDMm9D0zX0" width="320" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;span&gt;&lt;br /&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&amp;nbsp;GIT ADD&amp;nbsp;&lt;br /&gt;digunakan untuk memasukan file menuju sebelum tahap commit&lt;br /&gt;&lt;br /&gt;git add index.html (jika pakai 1 file)&lt;br /&gt;git add . (jika yang dipakai semua file)&lt;br /&gt;cek kembali di git status apakah sudah berhasil atau belum&amp;nbsp;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;GIT RESET&amp;nbsp;&lt;br /&gt;digunakan untuk membatalkan ke tahap commit&lt;br /&gt;&lt;br /&gt;git reset index/html&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;GIT COMMIT&lt;br /&gt;fungsinya untuk mengcommit :p&lt;br /&gt;&lt;br /&gt;git commit -m "tulisankan perubahan atau kaliamat yang jelas"&lt;br /&gt;gunakan git log untuk memastikan commit berhasil&lt;br /&gt;&lt;br /&gt;GIT DIFF&lt;br /&gt;Digunakan untuk melihat perubahan pada source code&lt;br /&gt;&lt;br /&gt;GIT CONFIG&lt;br /&gt;digunakan untuk login ke git&amp;nbsp;&lt;br /&gt;&lt;br /&gt;git config --global user.name "usernamemu"&lt;br /&gt;git config --global user.mail&amp;nbsp; "usermailmu"&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;GIT REMOTE&lt;br /&gt;nah untuk ini kita akan melakukan sinkronisasi ke repositori disini saya pake github&lt;br /&gt;&lt;br /&gt;kalian buat dulu repository githubnya&lt;br /&gt;lalu kalian copy alamat repositorynya&lt;br /&gt;&lt;br /&gt;lalu di source code kalian ketik&amp;nbsp;&lt;br /&gt;git remote add origin &amp;lt;alamathttpsgithubrepository&amp;gt;&lt;br /&gt;lalu klik enter&lt;br /&gt;&lt;br /&gt;GIT PUSH&lt;br /&gt;setelah git lokal terhubung ke github (public) disini baru kita bisa push code nya.&lt;br /&gt;&lt;br /&gt;git push origin master&lt;br /&gt;nantinya akan melakukan proses upload menuju repositori yg di tuju&lt;br /&gt;&lt;br /&gt;&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;GIT PULL&lt;br /&gt;ini untuk mengambil codemu dari repository jika push upload , maka pull download.&lt;br /&gt;git pull origin master&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;GIT FETCH&lt;br /&gt;ini fungsinya untuk mengambil branch atau mencheck update baru dari online tampa mengganggu source code kita yang di local&lt;br /&gt;&lt;br /&gt;brance itu seperti cabang pohon, dia akan menjadi cabang baru dari projek kita, jadi misal ada projek dalam projek yaitu fitur baru tidak jadi di develop maka tinggal hapus ajah brance nya, nah untuk melihat si branch ini kita perlu melaukan git fetch&amp;nbsp;&lt;br /&gt;&lt;br /&gt;git fetch (melihat update fitur terbaru)&lt;br /&gt;git chekout (untuk pindah ke branch lain)&lt;br /&gt;git branch -d (untuk menghapus branch yg tidak jadi di dev)&lt;br /&gt;&lt;br /&gt;jika fitur sudah complite sudah fix maka akan di satukan branch nya dengan cara&amp;nbsp;&lt;br /&gt;git merge (untuk menggabungkan) ini hanya dilakukan penanggung jawab projek&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;GIT TAG&lt;br /&gt;berfungsi menandai milestone, ini berguna jika kita punya banyak versi pada source code&amp;nbsp;&lt;br /&gt;&lt;br /&gt;git tag -a "versi 1.0" (membuat tag)&lt;br /&gt;git tag (melihat tag)&lt;br /&gt;git push origin master --tag (mengpush tag)&lt;br /&gt;git tag -d (untuk menghapus tag)&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;&lt;/div&gt;&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/a/AVvXsEgXMYVPp-THG_hKwEQNJBP3bJYqnJBtBANN9G-lBoSb_dGI1QMYHs_IwLs7RQeULNFuRsdSiEvRU11zlUrehls3v4zpG1xSXjLAyY1ETfHnPrkkSHI2sh5rKLOH4yW6kpqDr1b4JDb1iLiy--FL1sCGQXb9KsVWfAlGM-m46XEb8x3k1jROFamHR2AiCUw=s72-c" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>Algoritma dan pemrograman dasar 4 (Penerapan Algoritma)</title><link>https://elementertech.blogspot.com/2026/01/algoritma-dan-pemrograman-dasar-4.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Thu, 1 Jan 2026 15:49:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-6958422340775301446</guid><description>&lt;div class="separator"&gt;&lt;p style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"&gt;Karakteristik: Merupakan salah satu metode pengurutan tertua dan paling sederhana dalam dunia pemrograman&lt;br /&gt;&lt;br /&gt;mengurutkan lima nama secara acak (Januar, Febri, Agus, Novi, Desi) Secara Ascending (dari A ke Z):&amp;nbsp;&lt;/p&gt;&lt;/div&gt;&lt;p&gt;&lt;img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAABDCAIAAAB89LkRAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAgAElEQVR4nO2dd1xTV//Hv1lkGBIIZIGAEFCsOB4BxYkErGBVXLhaZ33qxN2nP2uttU+nu1hbrdZqHUURrIBYwUfFVbetu7JkKZqwwgxZvz+uxjTJvdkhPs99v3z5upx77/d8zuBwc+45nxBEnbsAJgwik0AgNqlk2JfpQiMy6KQOTSpZm1pu/l1mQiAQ3EkcNagalXV2D44BjURnkJl1bdVqjdrMW6gkGpPCkrXVKxxRD0CY3e2DK89O35ZeNXoBhUjRACjVCr10MpFCAIJC3fbyMjeWm0eLqqVZ0WA0DolAVmvUGjC31GhYmq/5uLt5qNTKZmWj0bNm6icTKWw3Tn1bjWGNWdeOeuXFwGh8DD10cgelWmFOZCt0YuRrFIx+aLRdyEQK282zTl6t0qhsVG603qz4PbUver93BJMjLI4L4sMM6OzRI4wTvv3u52b+JuDg2B28H5qE3N4CcKyhOyfCjURPK9iJd2ucdgTvhybBn2FxcHBwHAX+DGsrY0YnkskU5PhIerpGo2lfPTg4OA7Cg80Wi2OQ45qa2rP5+SZvIXG8vB2syhr27927cOGC6dOmXbz0e01Njd7ZfXv3KJWKR48KzAlFJBL7REZWVlY6QCYAQOqBA01NTUQikeXufvXaNe0IO2Xy5JqamgB//969excWFWmvj4kZMjwhPjIyIjIy4s/bt1UqW+f7bQRNp13iREZGjE4chRTWnCJv25oCAAWFhRZlbbQ/OLRcCLNmzggICHj4119WB7cuXxvjuLu7z353FoPBKC0tBYCAAP/x48beuvWH1Vk4uf4R/RER4V1DQ4lEYlXVM6uDW6qfxWJFR0d7enr2i4oaPHBg2pF0k8GJNopzEDNnz054a4SAzyeTjTxlX79+48mTp2aG6tunz/qvv7KrOn1SDx/akpKyJSVFrX71+nLm9Gm+vr69evUcNXKE7sUcT09fH5/uYWGLk5NpNJpDhZkDmk67xBnQr//bk6f4+vho/xGJWF2Ox+V26NDB0qyN9geHlgsARCLRkkWLPvl4NZVKtSW+pfnaHofNYi1OTv70kzUkEgkAggID582ZY0sWTq5/RL8oSNQvKmrn9u27fthhYxOYr/+5RLJx0+aNmzbn5p0yMzgZADwpPIVa3qiq1ztnaToaVCqVTqMx3d1JJGJFReUbXbuWlZXVy2Q0Go3l7v5cItFeyePx6uvr5XK5QmF84pxKpXp6eh5KS6uv18/dzc0ttEsXCoVSVFxcV1cHACQSicvlcjgcIokkEAgAoKmpqaHB1rVBNpKecTQ942jPnj3EMTG66Twez9/Pr6GhobCoSPuUx+FwmpqamExmYGBgYUFB3ctSe7DZrXJ5a2srADAYDDKZLJPJMOIQiUQul/vs2TM+n+/v71dQUIhUkRMoKy9btfpjw3QSidQ1NFSj0RQUFra1/W3hkY+P0NfX98GDh42NLxb6oOnH6A+OJk4sPpuf3zU0tF9UlO6nRTqdHhbW7enTqqqqKjqdjvQ3jPYy7LfOQalUDomO/s/p03rpbm5uIcHBbW1txSUlSP+h0WjuTKZEKtVeIxAIJBKJSqVqx/r/fvv2ouJirrd36sEDs2bO+H77DiQdrV8ZrWcn6CcDgD8tpL9HQlnro/uN1x+3PNSuHLQ0HY1BAweuXvVheXlFjx7dL166xOVyWe6sYcOHcziep06efDM+oaKyEgCCAgOzM49Fx4glctRVh2Hduq36cGVgp04bN2/ef+CgNj2wU6e9P+1+LpHI5fLOISETJk0uefzY19d3y6aNDAbD08Pju2+3AsCxY5l79+2zrcYcwvJlS5PGjSsqKmJ7eADAguTk0tIyANi2NaW0tKxXr55KpZLL5U6aPKXk8WMA+P67bZlZWb+kHgKAWTNndA7pvGjJEow4bDb73JnTaz/995Ili6urq1nurAGDB7dfcSEgwH/7d9+pVKqGhgZvL6+5CxYWvfwgNnLEWzOnT2tqbhYKhVOnTUfKi6YfrT84AXFMzJGMDKlUKo6J0Y6w/v7++/b8VFdXRyaTS8vKBALB2PFJgN5eRvutc/QfTjsyZfIkvRG2c0jIju+/l8nq6XRGQ2PDe3PnVVdXC/j841mZAwZHIwPTP3r12rlj+4DB0SqVqh3rH0EilR7LyhqekICMsGj9Cq2enaCfDACPmv8kEcidO/Qczn2nSdXwsPHG/abrMmWNpekY2bTK5e9Mn/79tm+fPn06f2HyjatXfH18KiorL166NGb06K3btgHA6MTE/HPndP9UGnLj5s2x45P2792rlz5xQtL1GzeWrXgfADp06KBWqwCgrKxs7Pik/v36ffXF50hHx2ZCUtLi5GS9xMVLl16/ccPkvYaMGjOmrU1x89YtcyZrMjKObvkmBXlk2LRh/exZs1av+QQ5FRQYODJxtEKh2L1z59ixYzZu2mxdHAAYPGhQdExMS0urUCi0TicGaHEEfMH8eXOR44KCwrxTpwDgy88/v379OqJt/ry5q1aunDV7NnINm81OHDtOoVB8/eUXK5YvW5C8CEM/Wn9wdLm8vLx69Oi+dMVyqVTy6dq1hLUEZP59xbJll69c+WDlh2QyOS01VQMmXnsa7bdO0A8AuXl506ZO9ff31038aNWHFy5eWL3mExKJ9POen+bNmfPZF188Li198PDhsDeHHjqcBgAjR7x1Mi9PLpdD+9W/LmVl5Z0CApBjtH6FVs9O0E8GgBZV401Z/k1ZvrebsDOjVygzvDc7+uizH57KSy1NR8tGKpUi/z+XSDQaTW1trTuLBZWVaUeOfPCvf3373XcEAiFx1Mi1//7MumLU1dfHxcYOiY6+cfOm1fMAuXl5t27d0kussPYVWUtLK3KgVCpNXvy4tLT3P/7RpXNnD08PFovFZrO1p/JOnULmTG7fuePn52d1HADY+eOPiKqnT1/NOlmkEwO0OBQ3Cp/HR46fP5cAAI/LDe/de8/evaGhoQBQVFQ89733CIQXg9RvJ08i5c3Mytq29VuT+i3VY5dyxQwZUlJS8uTJ09raOg82u3tY2O07dwBg0MABCxcvRi7OOXEiISEeOzhGv3V0uygUivSjGROTkq7fuI6kkMnkyIiIDZs2A4BKpTr667GZ06chp7Kzj781fPihw2kkEil+2LDl7//L6nztpV9LW1sbhUIhEAhcb2+0fmXF+GAv/a/eIxEJJHeSJ4vsQSPS29StCo3CunSjaNQaAFCrNS8P1CQiEQBOnzm7ZvXHfSIjyRQyiUzOP3fOumL8tGcvhUxZvmypKCjo98uXl694v87yiRU2mxUUFKSXWFNb29LSYp0qk2gXHmzeuKFLly7Z2cfrZfVyuVz3bU9j04u5SKVKSaFQsANixAEb/lrYQnl5+Zq1a3VTOF5eADBxwgRtyrXr12k0GlLP2jmy6ppaOp1GpVLlL2eN2kW/UeLEYoVSuXDBfACol8lixeLbd+6QyWQGg9Ege/ELLGswvdHcLv3Wag4fTjuc+svtO7eRHz09PIhEYm1tLfJjTU2Nl5cXcnw8J+f9Fct5XG5I5xCVWn3lqvGN2u2CB5tdW1ur0Wgw+lU71jMZADzI3r1Yg4IZYVQi/an88ZmaX4ua7yg1CkvTrcheqVQePfbr+HFjCQTir8eO6a3jUSqVJGOvnhVKBYlI0k2Ry+Vbt23bum2br4/PTz/+OG7c2B93/4ScUqvVBALBHDFdQ7tOnzZVL7GysrK6utqCIplHB0YHAEDGFC8vr4T4+GhxbFVVFQCIgoJEIhH27cjfbeTYg+2BHJiMo7ZwZRifz5e3ttq9Lz598gQAVq9ZY3RBiPfL5YM8LrexsVGuMymPpt+wP2BjY7loNFq/flHHc04gr7Dv3bsXGyve/M03SqWyurpaKBQiz7N8Pl97i9H2Asx+6zj9WioqK+/dvx8/bBjyY01trUql4nG55eXlACDg86Uve75EKr167VpCfHxoaGhOTo7umhlwev3rERER/ueftwGzX2HXs6X6LYIIAAH0LiLGGw+bbhx8ujnj2Q9/Nd1EhktL063jyJH0oXFxcbGx6ekZeqdKSkqiovoa3lJcXNK3bx/ddT89evRgMpkAIJFKm5qampubtackEgmHw9GdeUTjt5MnJ7/9jt6/u/fuWVkwAyLCwxPi45ElMoMHDSwuKUE+gDQ3N6vVah+hEAD8/PxGjhhhcsVSeXl5VN++BAKBw+HExYqRRCviYECn03NP5KSnHbY6Ahr1MtnZ/PwlixYhgw6dThs8aJD27PDhCQwGg0AgTJyQdDbfrM80hv0BA9vLNaB/f41Gs2btWmThzroNG0OCg5EJnJO5uTOmT2MymTweb3RiovYWo+0FmP3Wcfp1OZia+ubQocixSqW6cPHitKnvEIlEOp2WNH687hqJrOzs0YmJQ+NiM7Oy9YI4uf4RaDRaUGBg8oIFbw4d+sOuXYDZr7Dr2SL9lkIEgMLm2z9VfnWhNqdWIdE9Z2m6dTwuLb179979B/cN36J+/uVXM6ZNu3nt6oZ163TTd+3eLRQIb167dubUi1VpcWLxhfyzOVmZ58+ekUglGUd/1V5cVFx8OC0t69ejF8+dWzh/vu2CrUYul3/w/oqrv1+6dP7chKSkdevXI+ktLS2bt3yze9eu45mZO3ds35KSEiwSYU8I7P15X3jv3ufOnD64f592GLIiDgatra37Dxz09vZ2c3OzLgIGH63+mMPhXL54IffEiSuXLg0b9qb21N27d0/n5f5+4bxIJFq3YYM50Qz7Awa2l0ssjrl85ap2QWFRUVHlkyexMTEAsH7jpsbGxiuXLv5yYH9+fr7q5RSe0fYCzH7rOP265OefQybHET774sugoKDzZ8+eO3Omtq7uh527tKdy806JREHS6up79+/rBXFy/SNkHEk7cvhQZGTEu/987+bL1ydo/Qq7ni3Sbynt70tAIBCOZ2X+uHt3esZRoxfQ6TS1WiM3WMJFpVKJRKJ2kpROpwsFgnqZDO1DvZubm0qlsvseqj9uXF+z9tO/Hj0CgIcPH2JfTCAQ+Hx+BwajorJSr0RsFovD4ZSVl5upkEql+vr4lFdU6K0dtjQOBjweb/eunSNGJZq+1CqYTCaPy6169kzvmYLJZPJ5vMelpRYVQa8/YODocpFIJJVKtXD+/JCQ4MVLl2nlGW0vk/3WEEfrFwgEbW1thnspsXGd+jfar0zWszn6aTRap06dAGBoXOzggQOTJk02KaadfQl69uwxNC7OncnMPp6Ddo32pZ4eeiNUS0tLcUkJRl56y9rtxcVLl7S7Pv45Z67eFJUeGo0GmSQ1pF4mq5dZYMIrl8uNltfSOGgEBPiv/+rrL7504Ha4xsZG7Z4Cc9KxMfwbbBSHlis4ODiqb5+bt26x3FlvT5m8ctVHuvKMtpfJfquHE9oFrYti4wr1j2C0/5isZ3P0c7nc95e/+JN58w+z9hm38zPsmtUfMd3df/xxt4M2d+NYjVAoJJFIFRUV7S3Ezji0XD4+wsXJyf7+/jU1NZlZWSdz8+yexeveLq+7fktp/1kCHBwcnP9WXNT5BQcHB+e/gNdvhCUSiX379LHixrlz3lu+bCn2Nfv37j19Ku/0qbzg4GDDs/v27hk54i0zs7Nap5OxY31OnJC0YN48W8Q4p/43rFvXJzLSepU4OGbz+o2wVrsRsllsjqcn9jWvl2uiXbBXfTKZzEULkzN+Nb3eCAPn1H9WdvaH//eB9SpxcMyGCACeFB6TxDY8Z2k6Nm5ubj26dw/v3dvDw0Mvvdsbb4QEByNL8V/IIhKRLTF8Pj8yMgK5hUQiCQQCrRuhQCBwd3fX3kIikcK6dev2xht66+yYTGZ4797e3l7miFQoFEZfKVKpVIFAcCgt7f6DBybLha3TXrhafY4ZnXj/wX1dxwAqlerBZnfs2DEgwJ9EInUPC2OzWABAo9F4XK7uvTweD9kf5Zz6P3/hgqenJ/4Yi+MEnOFeCOjuYUbd0gDFrQ7DjRDNtaxvnz5bU7559NcjHo9XW1tbWGSZeb4WV3NNdMH6TIiPzzlxQleky7pWqtXqc+fPJyTEX712zS7NgYODhpPcC9Hcw4y6pWnv0nOrw3AjNOpaRiAQPlnz8Y4ffvhx90/e3l452dlWj7Cu5proavVJIpF6dO++fsNGPZ0u61r54MHDiRMnGD2Fg2NHnOReaNQ9DMMtDcFMtzo0Nzw+nx8UGIjsZZBKqy9evGhrbZlXLkuxwjXR1erT09ODQqFUG+wCclnXyuqaar2ZChwcR+Ak90Kj7mEYbmkIZrrVobmWeXp6go4bnlRazWDQzQloPu3lmuhq9alSqQHA0AjNZV0rSSSyCnP3HQ6OXXCSe6FR9zAMtzQEo251hm6EaK5l1VIpAHC9vZGRhc/nN5hh2Qmvg2uiq9VnfX19c3Mzl8s180tQ2t21ksflmmPjjYNjI05yLzTqHobtloaGoRshmmvZc4nk/v0HSePHA0DHjh0HDuhvZqW4vmuiq9WnWq2+cfNmr549TWanpX1dK7uFdbt+3ZovB8LBsQgnuReiuYdhuKWhYdSNEM217MPVqydOSDp/9swv+/ddvPS7mWpd3zXRBeszMzMrLjbW/CK0o2ulm5tb9ODBx7KyzFeLg2MdzvMlwHAPs84tzdCN0KhrGY1GQ95fm+n9oyPYpV0TXa0+KRTKb8ezFyQvMtPEpx1dK0eNHDlmdOLMd2eboxMHxxb+F51fYsXi2e/O0ktcveaTwkIr13LhIMTEDAnw89/z888mr0RcKxNHjowbFm/pXz7bWbVy5ZH0dMTSFwfHofwvjrA47Q7uWonzPwI+wuLg4OA4itfP+QUHBwfndcGlR1h7udXZ7qpnXb7YuI6bIu7mh4PjIFx6hLWLW51dXPWsyNckruOmiLv54eA4CCe5F3p5ebm5uXXs2LFnzx6IT92L7I256gG6Wx2Hw6FSqV5eXhERER7sFxqw3eoMXfUQXM39zyi4mx8OzmuNk9wLd+7YLpFIgkWiepnMw8Njxqx3y8rKAMVVD9Dd6rZtTSktLevVq6dSqeRyuZMmTzHpVmfoqgcu6f5nEbibHw7Oa4GT3AsBQCgUDh85Si6Xf/7Zv5cuXrR0+QrtKT1XPUB3qwOAoMDAkYmjFQrF7p07x44ds3HTZgy3OjRXPVdz/7MU3M0PB+e1gAgv3QtTn6Ycqtr6qOmPUGb4Oz7LhdQAS9Oxc8o5cQL5wPvbbyf7RUXpnjLTVQ8h79QphUIBALfv3PER+mBfjOaqV1df36N79yHR0e7u7k1NTUjuiPtfWnoGvHT/6/f33fEWuf+dv3AhNDQ0NDS0qKg4Iry309wUDctlDribHw6OI3CSeyEA1NS8cNWrr69ns9lEIlH90j7OTFc9hMamRuRAqVIi1iQYoLnquZr7n73A3fxwcFwKJ7kXAgCfx0MOvLw40upqtc7vs1FXPTDmVoeBUbc6NFc9V3P/wwZ388PBeU1xknshAIwcMYLFYhEIhLFjxp49e9YccYZudRgYdatDc9VzNfc/bHA3Pxyc1xQnuRcCQFFxUe6JnHNnz/h19E3Z+q05txi61WHGN+5WZ9RVzwXd/zDA3fxwcF5TnORLkHEkbf+BA6f+c5rl7m7RrCsYuNWZRM+tDs1Vz9Xc/0yCu/nh4Lx2GNkp5DhkMplMZtbMoy6WjkRtbW26PyoUis++/DKqb1+9EbalpaW4pMRohKqqKktFGuYLAI2NjY2NjXqJra2tRcXFuilmuimiLQzQqx+McqHp7B4W9tXX64xejIODYwtOeoZd+X8fnD2b//vly07ICwcHB8dFwN0LcXBwcBzFq1mCMaMTyeQXy0uPpKdrNJp2koSDg+NYPNhssTgGOa6pqTVnzQyOdZA4Xt7IUeqBA01NTUQikeXufvXaNd0RNlYsZrHcnz17pnfzrJkzAgICHGdTj5avjXHc3d1nvzsrIiK8a2gokUisqrI1/r69e5RKxaNHBdj5Wo1hnMjIiNGJoyIjI7T//rx9G+OrwLZtTQGAAgu/Jsf55QKAmJghwxPizSmU03BoP2QwGKWlpQAQEOA/ftzYW7f+sDq++e3FYrGio6M9PT37RUUNHjgw7Ui61ZniYPO3paaphw9tSUnZkpKi/vv2nvj4YRHh4Xp3ikSiJYsWffLxal2vLPtiNF/b47BZrMXJyaIgUb+oqJ3bt+/6YYeNRUBzEXSQfgAY0K//25On+Pr4aP9hrxrmcbkdOnSwNF/nlwsAOJ6evj4+3cPCFicn02g023OxHYf2w08/WYO4uAUFBs6bM8eW+Oa313OJZOOmzRs3bc7NM70OEscWrF9LECcWn83P7xoa2i8qSvdTBp1ODwvr9vRpVVVVFZ1Ob2hoAAAPNrtVLm9tbQUABoNBJpO1iwrc3NxCu3ShUChFxcXaHaVO4Pvt24uKi7ne3qkHD8yaOeP77TuQdBKJ1DU0VKPRFBQW6r52N6qTSqV6enoeSkurN29zqh0pKy9btfpjw3Q0/QDg4yP09fV98OChdoUDkUjkcrnPnj3j8/n+/n4FBYVI0dqxXOkZR9Mzjvbs2UMcE6ObzuPx/P38GhoaCouKtA+2HA6nqamJyWQGBgYWFhRotwhj9DejcdDqwQkolcoh0dH/OX1aL93NzS0kOLitra24pATRSaPR3JlMiVSqvUYgEEgkEpVK1Y7thYON9SOsOCbmSEaGVCoVx8RoR1h/f/99e36qq6sjk8mlZWUCgQAxc/r+u22ZWVm/pB4CgFkzZ3QO6bxoyRJAdxF0GhKp9FhW1vCEBGSERXMdRNOJ5iLYXqDpB4CRI96aOX1aU3OzUCicOm06ot9S98j2YvmypUnjxhUVFbE9PABgQXJyaWkZoLhZAnp/Q4uDVg9O4HDakSmTJ+mNsEZdNAV8/vGszAGDo5HR/x+9eu3csX3A4GiVSuVq7YWjxawRdtVHq/XmDby8vHr06L50xXKpVPLp2rWEtQRk3nbFsmWXr1z5YOWHZDI5LTVVAyZel6G5CKLlax3YccrKyjsFvDAGM+o6iKETw2XR0foFfMH8eXOR44KCwrxTpzD0AwCbzU4cO06hUHz95Rcrli9bkLxIG8oi90hHl8soGRlHt3yTgjzKbdqwfvasWUgZwZibpXVxwFg9WKoTG6NxcvPypk2d6u/vr5to1EXzcWnpg4cPh7059NDhNAAYOeKtk3l5yGpo57QXjhWYteW/ra1NqVTqpsQMGVJSUvLkydPLV656sNndw8KQ9EEDB2RmZwOAUqk09L02BNttzzBf68CO09bWRqFQCAQCmuugSZ3W5Wujfoobhc/jI//YbDaguyYi1/928iTi+piZlTWg/wDdUBa5Rzq6XEZ5XFraq2fPKZMmzZ83l8Vi+fi8cq20yM0SIw6g14NDy6tQKNKPZkxMeuXbi+GimZ19/K3hwwGARCLFDxuWnX3c6nxxnIOVswRxYrFCqVy4YD4A1MtksWLx7Tt3yGQyg8FokDUg18jMMI6y2m3Pjniw2bW1tRqNBs11sKWlxRV06lFeXr5m7VrdFAz9oOOaWF1TS6fTqFSqdjOYpfuYnYZ2QcvmjRu6dOmSnX28XlYvl8t139pZ5GaJEQfarx4OH047nPrL7Tu3kR8xXDSP5+S8v2I5j8sN6RyiUquvXL3aLoJxzMeaEZZGo/XrF3U85wTyCv7evXuxseLN33yjVCqrq6uFQuHtO3cAAPliKwTkORE59mC/+l4sDLc9DPh8vry11V5jXERE+J9/3gZ010GTOi1yWQR769eCoR8AvF8uy+NxuY2Njbp7be3iHgl2LVcHRgcAQP42eHl5JcTHR4tjkd3MoqAgkUiEfbvR/mYyDlo9oGGv8lZUVt67fz9+2DDkRwwXTYlUevXatYT4+NDQ0JycHL3P/pa2F44TsOa7Zgf076/RaNasXYss+Fi3YWNIcLCfnx8AnMzNnTF9GpPJ5PF4oxMTtbeUl5dH9e1LIBA4HE5crFibjuG2hwadTs89kZOedtgK5brQaLSgwMDkBQveHDr0h127AN110KROi1wW7aXfEAz9ADB8eAKDwSAQCBMnJJ3NP2dOQCeXKyI8PCE+Hlm6NHjQwOKSEuSzbXNzs1qt9hEKAcDPz2/kiBEmV54Z7W9WxMHAvu14MDX1zaFDkWNsF82s7OzRiYlD42Izs7L1gljUXjjOwZrGEItjLl+5ikx+AUBRUVHlkyexMTEAsH7jpsbGxiuXLv5yYH9+fr7q5ezP3p/3hffufe7M6YP79+n+emO47aHR2tq6/8BBb29vve9wtZSMI2lHDh+KjIx495/v3bx1C0lEcx3E1mmRy6K99BsFTT8A3L1793Re7u8XzotEonUbNpgTzcnlksvlH7y/4urvly6dPzchKWnd+vVIektLy+Yt3+zetet4ZubOHdu3pKQEi0TYEwJG+5sVcTCwbzvm5597/vyVFyiGi2Zu3imRKEhaXX3v/n29IBa1F45zeOVL8MeN62vWfvrXo0cA8PDhQ1uCkkgklUq1cP78kJDgxUuXIYlUKtXXx6e8okI7NCOYdNszhMfj7d61c8SoRNOXWoVR10GTOs13WWwX/Ug6n8d7XFpq0UYpZ5YL+TazDgyGobsjm8XicDhl5eVmikfrb5bGwcDR7Widi6Y57UWj0Tp16gQAQ+NiBw8cmDRpsi06cTB4NQ978dKlUSNHIMf/nDPXuuUdwcHBUX373Lx1i+XOenvK5JWrPtKeksvlRl31TLrt6REQ4L/+q6+/+PIrK+SZiVHXQZM6zXRZbC/9GOnYOLNcGo0GzTqyXiart8T6Eq2/WRoHDSe0o3Uumua0F5fLfX/5i0efm39Yv08XxyR29tby8REuTk729/evqanJzMo6mZtnx+AIQqGQRCJVVFTYPbJzeN31o/HfWi40/tfKi2MduHshDg4OjqNwxncc7Nu7p09kpF7i1WvXpk6f4Wlwi4sAAAAuSURBVITccXBwcNoLZ4ywfSIju7zRTS/xr/v3nJA1Dg4OTjuCL53DwcHBcRT/D3E2d3vo+w6VAAAAAElFTkSuQmCC" /&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;&amp;nbsp; &amp;nbsp;&lt;/span&gt;ALGORITMA PENGURURTAN DATA&lt;br /&gt;&lt;br /&gt;Metode pengurutan data yang bekerja dengan membandingkan dua elemen yang berurutan dan menukarnya jika urutannya tidak sesuai. misal: dari rendah ke tinggi. Merupakan salah satu metode pengurutan tertua dan paling sederhana dalam dunia pemrograman.&lt;br /&gt;&lt;br /&gt;Mekanisme Kerja&lt;br /&gt;contoh ini memebrikan mengurutkan lima nama secara acak (Januar, Febri, Agus, Novi, Desi) secara Ascending (dari A ke Z):&lt;br /&gt;1. Perbandingan: Nama dibandingkan satu persatu berdasarkan huruf awalnya.&lt;br /&gt;2. Penukaran: Jika huruf awal nama pertama lebih tinggi abjadnya dari nama kedua, maka posisi mereka ditukar.&lt;br /&gt;3. Iterasi: Proses ini dilakukan berulang kali hingga elemen dengan nilai terbesar "mengapung" ke posisi paling belakang. Setelah posisi benar, elemen tersebut "dikunci" dan proses diulang untuk elemen sisanya.&lt;br /&gt;&lt;br /&gt;Metode ini membantu kita memahami bagaimana logika dasar komputer bekerja dalam mengatur sekumpulan informasi yang acak menjadi teratur.&lt;span&gt;&amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;TEKNIK SELECTION SORT&lt;/p&gt;&lt;p&gt;Kekurangan teknik sebelumnya yaitu bubble sort yang dinilai kurang efisien karena membandingkan data satu per satu dari awal hingga akhir dan memakan waktu lama untuk jumlah data yang besar.&amp;nbsp;&lt;br /&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;sementara selection sort itu Memilih elemen dengan nilai paling rendah (atau paling tinggi) dan menukarnya dengan elemen pada posisi yang sedang diproses (indeks ke-i)&lt;br /&gt;&lt;br /&gt;Cara Kerja:&lt;br /&gt;1. Mencari nilai terkecil dari seluruh daya yang belum terururt&lt;br /&gt;2. menandai nilai tersebut sebagai nilai terkecil sementara selama pemindaian&lt;br /&gt;3. setelah pemindaian satu putaran selesai, nilai terkecil yang ditemukan ditukar ke posisi paling kiri yang tersedia.&lt;br /&gt;4. Posisi tersebut dikunci, dan proses pencarian nilai terkecil berikutnya diulang untuk sisa datang yang belum terkunci.&lt;br /&gt;&lt;br /&gt;Contoh Ilustrasi&amp;nbsp;&lt;br /&gt;[4, 0 ,5, 3, 2]&lt;/p&gt;&lt;p&gt;1. pada iterasi pertama, angka 0 ditemukan sebagai yang terkecil dan ditukar ke posisi pertama.&lt;br /&gt;2. pada iterasi ke 2, dari sisa data, angka 2 ditemukan terkecil dan ditukar ke posisi ke 2.&lt;br /&gt;3. Proses berlanjut hingga seluruh deretan angka menjadi terurut (0, 2, 3, 4, 5)&lt;br /&gt;&lt;br /&gt;Implementasi&lt;br /&gt;Deklarasi: menyiapkan variabel untuk menampung data (array) dan vvariabel bantu untuk peroses penukaran.&lt;br /&gt;Logika: Menggunakan perulangan untuk memindai data dan mencari nilai minimum, kemudian melakukan penukaran posisi setelah nilai minimum ditemukan.&lt;br /&gt;&lt;br /&gt;Teknik ini lebih terarah dibandingkan Bubble Sort karena jumlah penukarannya lebih sedikit, meskipun jumlah perbandingannya masih relatif banyak.&lt;br /&gt;&lt;br /&gt;TEKNIK INSERTION SORT&lt;/p&gt;&lt;p&gt;teknik ini membagi dua bagian, bagian yang sudah terurut (DB) dan bagian yang belum terurut (DTB). Algoritma ini mengambil elemen satu per satu dari bagian yang belum terurut (DTB) dan menyisipkannya ke posisi yang tepat di dalam bagian yang sudah terurut (DB). Proses ini dilakukan berulang kali sampai semua data di DTB habis.&lt;br /&gt;&lt;br /&gt;Contoh Ilustrasi&amp;nbsp;&lt;br /&gt;[4, 0, 5, 3, 2,]&lt;br /&gt;&lt;br /&gt;1. Iterasi 1: Angka 4 masuk ke DB karena DB masih kosong.&lt;br /&gt;2. Iterasi 2: Angka 0 dibandingkan dengan 4. karena 0 lebih kecil, 4 digeser ke kanan dan &lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;0 disisipkan ke kiri 4.&lt;br /&gt;3. Iterasi 3: Angka 5 dibandingkan dengan 4. Karena 5 lebih besar, 5 diletakkan di &lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;disebelah kanan 4.&lt;br /&gt;4. Iterasi 4: Angka 3 dibandinghkan dengan 5 dan 4. Karena lebih kecil dari keduanya &lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;tapi lebih besar dari 0, angka 3 disisipkan di antara 0 dan 4.&lt;br /&gt;5.&amp;nbsp; Interasi 5: Angka 2 dibandingkan terus ke arah kiri hingga menemukan posisi yang &lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;tepatm, yaitu di antara 0 dan 3.&lt;/p&gt;&lt;p&gt;Implementasi&amp;nbsp;&lt;br /&gt;Deklarasi: Menyiapkan variabel array untuk data dan variabel pendukung lainya.&lt;br /&gt;Logika Program: Menggunakan perulangan untuk mengambil data dari DTB dan perulangan di dalamnya untuk mencari posisi sisipan yang tepat di DB.&lt;br /&gt;&lt;br /&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;ALGORITMA PENCARIAN DATA&amp;nbsp;&lt;br /&gt;Algoritma pencarian data adalah metode atau langkah-langkah sistematis untuk menemukan data tertentu di dalam sebuah kumpulan data. contoh nyatanya adalah mesin pencarian Google yang menggunakan algoritma canggih untuk menyaring data yang sangat besar dengan cepat dan tepat.&lt;br /&gt;&lt;br /&gt;1. Pencarian Skuensial&lt;br /&gt;metode ini memeriksa data satu persatu dari paling kiri (awal) hingga paling kanan (akhir) contohnya : Liner Search&amp;nbsp;&lt;br /&gt;kekurangan: sangat ditak efisien jika data berjumlah besar dan data yang dicari berada di bagian akhir&lt;br /&gt;&lt;br /&gt;2. Pencarian Interval&lt;br /&gt;syarat utama pencarian ini adalah data sudah terurut sebelumnya.&amp;nbsp;&lt;br /&gt;contoh binary search dan jump search.&lt;/p&gt;&lt;p&gt;Metode pencarian yg di bahas:&lt;br /&gt;&lt;br /&gt;A. Pencarian binner&amp;nbsp;&lt;br /&gt;cara kerjanya membagi rentang data menjadi dua bagian secara berulang, Nilai tengah dicari, lalu dibandingkan dengan nilai yang dicari. jika nilai yang dicari lebih besar, pencarian belajanjut ke interval kanan, jika lebih kecil ke interval kiri. Hal ini dilakukan sampai data ditemukan.&lt;/p&gt;&lt;p&gt;B. Pencarian Lompat&lt;br /&gt;cara kerjanya melompati elemen-lemen data dengan jarak tertentu&lt;br /&gt;proses 1. Tentukan besar lompatan (biasanya akar kuadrat dari jumlah data).&lt;br /&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&amp;nbsp;2. Lakukan lompatan antar pijakan. jika nilai dipijakan sudah melebhi nilai yang &lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;dicari, algoritma akan kembali ke pijakan sebelumnya.&lt;br /&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt; 3. Lakukan pencarian secara linier di dalam rentang tersebut sampai data &lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;ditemukan.&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;&amp;nbsp;Kesimpulannya adalah pemilihan algoritma pencarian sangat bergantung pada kondisi data (apakah sudah terurut atau belum) dan efisiensi waktu yang dibutuhkan.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;ALGORITMA REKURSIF&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;Rekursif adalah suatu proses atau fungsi yang memanggil dirinya sendiri.&lt;br /&gt;dalam pemrograman, algoritma rekursif memecah masalah besar menjadi sub-masalah yang lebih kecil dengan tipe yang sama, lalu memanggil fungsi tersebut berulang kali hingga mencapai kondisi dasar (stop)&lt;br /&gt;&lt;br /&gt;Studi kasus: Tower Of Hanoi&amp;nbsp;&lt;br /&gt;Permaninan ini melibatkan pemindahan tumpukan cakram dari satu tiang ke tiang lain dengan aturan tertentu.&lt;br /&gt;1. Hanya satu cakram yang boleh dipindahkan dalam satu waktu.&lt;br /&gt;2. Cakram yang dipindahkan harus diambil dari posisi teratas.&lt;br /&gt;3. Cakram yang lebih besar tidak boleh diletakkan di atas cakram yang lebih kecil.&lt;br /&gt;&lt;br /&gt;Logika Rekursif dalam Tower Of Hanoi&amp;nbsp;&lt;br /&gt;bahwa untuk memindahkan cakram, kita bisa menyederhanakan langkahnya dengan menganggap tumpukan tersebut berisi n - 1 cakram yang juga memiliki proses penyelesaiannya sendiri di dalamnya.&lt;br /&gt;contohnya untuk memindahkan 4 cakram, kita perlu menyelesaikan pemindahan 3 cakram terlebih dahulu, yang di dalamnya juga melibatkan pemindahan 2 cakram, dan seterusnya.&lt;br /&gt;&lt;br /&gt;Implementasi Kode&lt;br /&gt;- proses ini dapat dituliskan dalam bahasa pemrograman (sperti java) dengan membuat fungsi yang menerima parameter jumlah cakram, tiang asal, tiang bantu, dan tiang tujuan.&lt;br /&gt;- Fungsi tersebut akan terus memanggil dirinya sendiri dengan jumlah cakram yang berkurang ( n -1 ) sampai tumpukan habis.&lt;br /&gt;&lt;br /&gt;Algoritma rekusif sangat berguna untuk menyelesaikan masalah yang di miliki pola berulang dan struktur yang serupa di setiap tingkatannya.&lt;br /&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>Algoritma Pemprograman dasar 3 (Struktur Data)</title><link>https://elementertech.blogspot.com/2025/12/algoritma-pemprograman-dasar-3-struktur.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Wed, 31 Dec 2025 21:03:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-6655370128871936769</guid><description>&lt;p&gt;STRUKTUR DATA ARRAY (LARIK)&lt;br /&gt;&lt;br /&gt;Array adalah tipe data yang terdiri dari sejumlah komponen dengan tipe data yang sama. Bayangkan seperti sebuah hotel yang memiliki banyak kamar, Hotelnya adalah variable array, dan nomer kamarnya adalah indeks.&lt;/p&gt;&lt;p&gt;&amp;nbsp;Jika kita memiliki ribuan data akan sangat sulit jika harus membuat variabel satu per satu. Dengan array, kita cukup membuat satu variabel saja.&lt;/p&gt;&lt;p&gt;&amp;nbsp;didalam pemrograman, penomoran atau indeks array biasanya dimulai dari 0, bukan 1.&lt;/p&gt;&lt;p&gt;Cara penulisan (Deklarasi)&lt;br /&gt;Formatnya : namaVariabel: array [indeks_awal . . indeks_akhir] of tipe_data.&lt;br /&gt;contoh X: array [0. . 5] of integer , berarti kita membuat variabel x yang bisa menampung 6 angka bulat.&lt;/p&gt;&lt;p&gt;Mengisi dan mengakses Array: untuk mengisi atau meilhat isi array, kita harus menyebutkan indeksnya di dalam kurung siku, misalnya x[0] = 10 untuk mengisi kamar pertama dengan angka 10.&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;LINKED LIST&lt;/p&gt;&lt;p&gt;Linked list adalah kumpulan data yang tersusun secara sekuensial, saling terhubung, dan bersifat dinamis.&lt;/p&gt;&lt;p&gt;&amp;nbsp;berbeda dengan array yang menggunakan indeks, Linked List menggunakan Node. Setiap node terdiri dari dua bagian:&lt;br /&gt;1. Data: Nilai yang disimpan (misal: nama mahasiswa)&lt;br /&gt;2. Pointer/Link: alamat yang menunjuk ke node selanjutnya&lt;/p&gt;&lt;p&gt;&amp;nbsp;Istilah penting :&lt;br /&gt;Head: Node pertama yang menjadi referensi awal.&lt;br /&gt;Null: Penanda bahwa node tersebut adalah elemen terakhir karena tidak menunjuk ke mana pun lagi.&lt;br /&gt;Implementasi: Vidio ini memperlihatkan contoh kode dalam bahasa java, dimana sebuah class node dibuat untuk menghubungkan nama satu ke nama berikutnya secara berantai.&lt;br /&gt;&lt;br /&gt;Perbedaan Utama dengan Array: Jika array seperti kamar hotel yang nomornya berurutan (indeks), Linked List lebih seperti permainan "mencari jeja", di mana setiap petunjuk (node) memberi tahu kamu di mana lokasi petunjuk berikutnya berada.&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;MENGENAL STRUKTUR DATA LINKED LIST&lt;br /&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;Definisisi Linked List: sebuah struktur data yang berisi kumpulan data yang tersusun secara sekuensial, saling terhubung, dinamis, dan terbatas.&lt;br /&gt;&lt;br /&gt;Struktur Node: Elemen dari Linked List disimpan dalam sebuah Node di dalam satu node terdapat dua bagian utama:&lt;br /&gt;1. Data: Memuat nilai yang disimpan.&lt;br /&gt;2. Pointer/Link: Berisi alamat yang menunjuk ke node selanjutnya.&lt;br /&gt;&lt;/p&gt;&lt;p&gt;Rantai Data: Linked List terbentuk ketika banyak node saling tertaut membentuk rantai.&lt;br /&gt;Head: Node pertama yang digunakan sebagai referensi awal&amp;nbsp;&lt;br /&gt;Null : Node terakhir akan menunjuk ke "Null", yang menandakan akhir dari senarai tersebut.&lt;/p&gt;&lt;p&gt;Secara sederhana, jika Araray adalah seperti barisan kamar hotel dengan nomer urut, Linked List lebih seperti "perburuan harta karun" di mana setiap lokasi memberikan petunjuk atau alamat untuk menuju ke lokasi berikutnya.&lt;br /&gt;&amp;nbsp;&lt;br /&gt;MENGENAL STRUKTUR DATA STACK DAN QUEUE&lt;span&gt;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;Stack (tumpukan)&lt;br /&gt;Mengikuti perinsip LIFO (last in frist out), artinya data yang terakhir masuk akan menjadi yang pertama keluar.&lt;br /&gt;&lt;br /&gt;seperti tumpukan piring di atas meja. piring paling atas adalah yang pertama kali diambil.&lt;br /&gt;&lt;br /&gt;Operasi Utama:&lt;br /&gt;Push: menambahkan elemen baru ke posisi paling atas (Top)&lt;br /&gt;Pop: Menghapus atau mengambil elemen yang berada di posisi paling atas.&lt;br /&gt;&lt;br /&gt;Queue (Antrean)&lt;br /&gt;Mengikuti prinsip FIFO (First In First Out), artinya data yang pertama kali masuk akan menjadi yang pertama kali keluar.&lt;br /&gt;seperti antrean orang yang ingin masuk ke wahana permainan. orang yang datang pertama akan dilayani pertama kali.&lt;br /&gt;&lt;br /&gt;Operasi Utama:&lt;br /&gt;- Enqueue: Menambahkan elemen baru dari sisi belakang.&lt;br /&gt;- Dequeue: Menghapus elemen dari sisi depan.&lt;br /&gt;&lt;br /&gt;Perbedaan utama:&lt;br /&gt;Stack hanya memiliki satu pintu akses (atas), sehingga yang terakhir masuk justru yang pertama keluar.&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;Queue memiliki dua pintu akses: masuk dari belakang dan keluar dari depan, sehingga urutannya tetap terjaga&amp;nbsp; sesuai waktu kedatangan.&lt;br /&gt;&lt;br /&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;BINARY TREE AND GRAPH&lt;br /&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;Binary tree&lt;br /&gt;berbeda dengan aray atau Linked List yang bersifat linier, Tree memiliki pola percabangan. Binary Tree khusus memiliki dua "anak" (children) untuk setiap "induk" (parent)&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;Instilah penting :&lt;br /&gt;Root: Elemen paling atas&lt;br /&gt;Leaf: Elemen Paling bawah yang tidak punya anak lagi&lt;br /&gt;Parent &amp;amp; Children: Hubungan antara elemen&amp;nbsp; di atas dan di bawahnya.&lt;br /&gt;&lt;br /&gt;Digunakan untuk menyimpan informasi hierarkis seperti sistem file komputer dan untuk mempercepat proses pencarian data dibandingkan Linked List.&lt;br /&gt;&lt;br /&gt;Graph&amp;nbsp;&lt;br /&gt;Kumpulan objek (simpul/node) yang sering terhubung oleh garis (tepi/edge)&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;Jenis-jenis Graf:&lt;br /&gt;1. Graf Tidak Berarah: Hubungan antar simpul berlaku dua arah (bolak-balik)&lt;br /&gt;2. Graf Berarah : Hubungan antar simpul hanya satu arah.&amp;nbsp;&lt;br /&gt;3. Graf Berbobot: Setiap garis penghubung memiliki nilai atau bobot, yang biasanya mepresentasikan jarak atau biaya.&amp;nbsp;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>Algoritma Pemrograman Dasar 2 (Struktur Algoritma)</title><link>https://elementertech.blogspot.com/2025/12/algoritma-pemrograman-dasar-struktur.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Wed, 31 Dec 2025 20:43:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-5842880064049421440</guid><description>&lt;p&gt;PSEUDOCODE&amp;nbsp;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;Pseudocode adalah cara menuliskan logika program menggunakan bahasa manusia yang baku tapi formatnya mirip bahasa pemrograman. ini bukan kode asli, tapi "sketsa: sebelum mulai ngoding beneran.&lt;/p&gt;&lt;p&gt;Struktur Utama Pseudocode&lt;br /&gt;1. Bagian Judul: Nama program. biasanya diawali kata PROGRAM.&lt;br /&gt;2. Bagian Deklarasi: Tempat mendaftarkan semua variabel dan tipe data yang akan dipakai. Ditandai dengan kata DEKLARASI.&lt;br /&gt;3. Bagian isi (Algoritma): inti dari langkah-langkah program. Ditandai dengan kata ALGORITMA.&lt;br /&gt;&lt;br /&gt;Contoh Praktik: Menghitung Luas Persegi panjang:&lt;/p&gt;&lt;p&gt;JUDUL: PROGAM Cari_Luas_Persegi_Panjang&lt;br /&gt;DEKLARASI:* P, L : Integer (Panjang dan Lebar)&lt;br /&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;Hasil : Float (Luasnya)&lt;br /&gt;ALGORITMA:&lt;br /&gt;1. Read(P, L) (Minta User Masukin Angka)&lt;br /&gt;2. Hasil = P * L (Hitung rumusnya)&lt;br /&gt;3. Weite(Hasil) (Tampilkan Hasilnya ke layar)&lt;/p&gt;&lt;p&gt;Dengan bikin Pseudocode, kita jadi punya gambaran jelas alur programnya. kalau logikanya sudah benar di sini, kamu tinggal "terjemahin" ke bahasa pemrograman apapun (seperti Python atau java) dengan gampang.&lt;br /&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;KONDISI PERCABANGAN&amp;nbsp;&lt;br /&gt;intinya adalah bagaimana komputer mengambil keputusan saat ada beberapa pilihan.&lt;br /&gt;&lt;/p&gt;&lt;p&gt;Percabangan adalah situasi di mana program harus memilih salah satu dari beberapa opsi berdasarkan kondisi tertentu untuk melanjutkan ke proses berikutnya.&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;STRUKTUR PERCABANGAN/PEMILIHAN&lt;br /&gt;Struktur pemilihan adalah cara program mengambil keputusan. program akan menguji sebuah pernyataan apakah bernilai Benar (TRUE) atau Salah (False) menggunakan operator relasi (seperti ==, &amp;gt;, &amp;lt;).&lt;/p&gt;&lt;p&gt;Jenis Intruksi IF&lt;/p&gt;&lt;p&gt;1. IF 1 Kondisi&amp;nbsp;&lt;br /&gt;Intruksi hanya jalan jika kondisi benar, kalau salah, program tidak melakukan apa-apa.&lt;br /&gt;contoh: Cek umur KTP. jika umur &amp;gt; 17, cetak KTP. jika tidak, ya sudah, selesai.&lt;br /&gt;&lt;br /&gt;2. IF 2 Kondisi (IF-ELSE)&lt;br /&gt;Ada pilihan kalau kondisi salah.&lt;br /&gt;- jika benar, jalankan intruksi 1.&lt;br /&gt;- jika Salah, jalankan Intruksi 2.&lt;br /&gt;contoh: Cek kelulusan. jika nilai &amp;gt; 60 cetak "Lulus", jika tidak cetak "Tidak Lulus".&lt;br /&gt;&lt;br /&gt;3. IF Banyak Kondisi (Nested IF / ELIF)&lt;br /&gt;Pilihan intruksinya bamnyak, dicek satu-satu sampai ada yang cocok.&lt;br /&gt;jika kondisi 1 salah -&amp;gt; Cek kondisi 2&lt;br /&gt;jika Kondisi 2 Salah -&amp;gt; Cek Kondisi 3, dan seterusnya.&lt;br /&gt;Contoh: Konversi nilai angka ke huruf&lt;br /&gt;- Nilai &amp;gt; 80 -&amp;gt; A&lt;br /&gt;- Nilai 70 - 80 -&amp;gt; B&lt;br /&gt;- Nilai 60 - 70 -&amp;gt; C&lt;br /&gt;- Selain itu -&amp;gt; D&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;MENGENAL POLA PERULANGAN&lt;br /&gt;Perulangan adalah Aktivitas yang dilakukan secara berulang-ulang sampai kondisi tertentu tercapai (kita merasa cukup)&lt;br /&gt;&lt;/p&gt;&lt;p&gt;Analogi Dunia Nyata: Mengaduk Kopi:&lt;br /&gt;- jika kamu menulis intruksi satu per satu: Aduk kopi, aduk kopi, aduk kopi (sampai 5-10 kali), ini sangat tidak efisien karena banyak kalimat yang sama diulang-ulang&lt;br /&gt;- Cara Efisien: Cukup tulis "Aduk kopi selama kopi belum larut".&lt;br /&gt;&lt;br /&gt;Kenapa Harus pakai perulangan di pemprograman?&lt;br /&gt;- Memangkas Baris kode: Daripada menulis kode yang sama 100 kali, kamu cukup menulisnya 1 kali di dalam struktur perulangan.&lt;br /&gt;- Fleksibel: kamu tinggal mengganti angka jumlah perulangan tanpa harus menambah baris kode baru.&lt;br /&gt;&lt;br /&gt;Logika Pseudocode&lt;br /&gt;1. Syarat: selama jumlah adukan belum sampai 10, lakukan pengadukan.&lt;br /&gt;2. Aksi: Jalankan fungsi aduk.&lt;br /&gt;3. Pencacah (counter): Tambahkan angka adukan setiap kali selesai satu putaran(supaya perulangan tidak berjalan selamanya).&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;STRUKTUR PERULANGAN&lt;/p&gt;&lt;p&gt;&lt;span&gt;1. Pengulangan FOR ( jika jumlahnya sudah pasti)&lt;br /&gt;Digunakan kalau kamu sudah tahu persis mau mengulang berapa kali. Ada dua arah:&lt;br /&gt;For To DO (Positif): Hitung maju, dari kecil ke besar (misal: 1 sampai 100).&lt;br /&gt;For Down To DO (Negatif): Hitung mundur, dari besar ke kecil (misal: 100 ke 1.&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span&gt;2. Pengulangan WHILE DO (Selama Kondisi BENAR)&lt;br /&gt;Penting: kamu harus kasih "pencacah" atau penambah angka (seperti i = i + 1) di dalam kodenya. kalau tidak, programnya bakal muter terus selamanya (Infinite Loop).&lt;br /&gt;&lt;br /&gt;3. Pengulangan REPEAT UNTIL&lt;br /&gt;&lt;/span&gt;kebalikan dari While, dia akan terus mengulang selama syaratnya masih Salah dan baru berhenti begitu syaratnya jadi Benar.&lt;br /&gt;- bedanya dengan While: Di Repeat Until, Intruksi minimal dijalankan satu kali dulu berhenti begitu syaratnya di akhir.&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;Tips Memilih jenis perulangan&amp;nbsp;&lt;br /&gt;FOR&amp;nbsp; kalau kamu tahu pasti berapa kali mau ngulang.&lt;br /&gt;WHILE Kalau kamu tidak tahu pasti jumlah ulangnya, dan ingin mengecek syarat di awal.&lt;br /&gt;REPEAT kalau tidak tahu pasti jumlah ulangnya, dan ingin menjalankan perintahnya minimal sekali dulu sebelum dicek syaratnya.&amp;nbsp;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;br /&gt;PROSEDUR&amp;nbsp;&lt;br /&gt;Prosuder adalah sub-program atau program kecil yang berada di dalam program utama. Tujuannya adalah untuk menyelesaikan masalah atau tugas khusus sehingga program utama tidak terlalu panjang dan lebih mudah dibaca (disebut juga program modular).&lt;br /&gt;&lt;br /&gt;Struktur Penulisan Prosedur&amp;nbsp;&lt;br /&gt;sama seperti program utama, prosedur punya bagiannya sendiri:&lt;br /&gt;1. Nama Prosedur: Diawali kata kunci PROCEDURE&lt;br /&gt;2. Parameter: Data masukan yang akan diproses di dalam proosedur.&lt;br /&gt;4. Algoritma: Langkah-langkah tugas yang dilakukan prosedur.&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;Mengenal Parameter&amp;nbsp;&lt;br /&gt;Parameter adalah nilai masukan yang dikirim ke dalam prosedur untuk diolah. Ada dua jenis:&lt;/p&gt;&lt;p&gt;- Parameter Formal: Variabel yang tertulis saat prosedur dibuat/didefinisikan.&lt;/p&gt;&lt;p&gt;- Parameter Aktual: Nilai nyata yang dimasukkan saat prosedur dipanggil di program utama.&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;Contoh simulasi: Hitung Luas Lingkaran&lt;br /&gt;Daripada menulis rumus luas lingkaran bekali-kali di program utama, kamu cukup:&lt;/p&gt;&lt;p&gt;1. Buat prosedur bernama luas_lkingkaran.&lt;br /&gt;2. Masukkan rumus di dalamnya.&lt;br /&gt;3. Di program utama, kamu tinggal panggil namanya saja:&lt;br /&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;luas_lingkaran(jari_jari).&lt;/p&gt;&lt;p&gt;Intirnya prosedur itu seperti "resep kecil" yang bisa kamu panggil kapan saja tanpa harus menulis ulang langkah-langkahnya dari nol di tengah program utama.&lt;br /&gt;&lt;br /&gt;&amp;nbsp;&amp;nbsp;&lt;/p&gt;&lt;p&gt;FUNGSI&lt;br /&gt;Fungsi adalah sub-sprogram yang mirip dengan prosedur, namun memiliki perbedaan utama: Fungsi mengembalikan sebuah nilan (return Value). Fungsi digunakan untuk menyelesaikan masalah khusus dan memberikan hasilnya kembali ke program utama.&amp;nbsp;&lt;br /&gt;&lt;br /&gt;STRUKTUR PENULISAN FUNGSI&lt;br /&gt;1. Kata Kunci: Diawali dengan function.&lt;br /&gt;2. Tipe Data pengembalian: Di akhir baris judul fungsi, wajib ditentukan tipe data hasil akhirnya (misal: Integer atau Real).&lt;br /&gt;3. Kata Kunci Return: Baris terakhir fungsi wajib menggunakan return untuk mengirimkan hasil perhitungan keluar dari fungsi tersebut.&lt;/p&gt;&lt;p&gt;VARIABEL BERDASARKAN RUANG LINGKUP&lt;br /&gt;Saat menggunakan fungsi atau prosedur, ada dua jenis variabel:&lt;br /&gt;- Variabel Global: Dideklarasikan di program utama dan bisa dikenali/digunakan oleh seluruh bagian program (semua fungsi dan prosedur)&lt;br /&gt;- Variabel local: Hanya dideklarasikan di dalam sebuah fungsi atau prosedur tertentu. Variabel ini tidak bisa diakses oleh program utama atau fungsi lain.&lt;br /&gt;&lt;br /&gt;KEUNTUNGAN MENGGUNAKAN PROSEDUR &amp;amp; FUNGSI&lt;br /&gt;- Modular: Memecah tugas rumit menjadi langkah kecil yang sederhana.&lt;br /&gt;- Hemat kode: Mengurangi duplikasi kode (tidak perlu menulis ulang kode yang sama).&lt;br /&gt;- Reusability: Kode dapat digunakan kembali di berbagai program atau program lain.&lt;br /&gt;- Mudah Debugging: Lebih mudah melacak error karena program sudah terbagi-bagi menjadi blok kecil.&amp;nbsp;&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>Algoritma Pemrograman dasar 1 (ALGORITMA)</title><link>https://elementertech.blogspot.com/2025/12/algoritma-pemrograman-dasar.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Wed, 31 Dec 2025 04:19:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-2125609821495133095</guid><description>&lt;p&gt;ALGORITMA&lt;br /&gt;&lt;br /&gt;kata algoritma berasal dari nama ilmuan matematikawan muslim bernama Abu Ja'far Muhammad bin musa al-Khwarizmi yang nanti nya menjadi algorism, dan seiring berjalannya waktu menjadi algorithm karena sering dikaitkan dengan arithmatika.&lt;/p&gt;&lt;p&gt;algoritma adalah suatu urutan langkah-langkah logis yang disusun secara sistematis untuk menyelesaikan sebuah masalah.&amp;nbsp;&amp;nbsp;&lt;/p&gt;&lt;p&gt;dalam konteks komputer, algoritma pemrograman adalah urutan atau langkah-langkah spesifik untuk menyelesaikan masalah pemrograman komputer.&lt;/p&gt;&lt;p&gt;Pseudocode yaitu penulisan code yang menyerupai bahasa manusia.&lt;/p&gt;&lt;p&gt;Flowchart yaitu penggambaran langkah-langkah menggunakan simbol grafis atau diagram.&lt;/p&gt;&lt;p&gt;&amp;nbsp;Empat Karakteristik Utama Algoritma :&lt;/p&gt;&lt;p&gt;1. Terbatas (Finiteness)&amp;nbsp;&lt;/p&gt;&lt;p&gt;artinya, Proses dalam algoritma harus memiliki akhir dan jumlah langkahnya terbatas. Sebuah algoritma tidak boleh berjalan terus-menerus tanpa henti, ia harus selesai dengan menghasilkan minimal satu buah Output.&lt;/p&gt;&lt;p&gt;2. Tidak Ambigu (Definiteness)&lt;/p&gt;&lt;p&gt;&amp;nbsp;Setiap langkah dalam algoritma harus jelas dan tidak bermakna ganda.&lt;/p&gt;&lt;p&gt;3. Memiliki Input dan Output&lt;/p&gt;&lt;p&gt;input harus berjumlah nol atau lebih.&lt;/p&gt;&lt;p&gt;output minimal harus menghasilkan satu output. setiap proses yang dijalankan harus memberikan hasil akhir yang nyata.&amp;nbsp;&lt;/p&gt;&lt;p&gt;4. Efektif (Effectiveness)&lt;/p&gt;&lt;p&gt;&amp;nbsp;Dalam menyelesaikan masalah, Langkah-langkah yang dipilih harus sesederhana mungkin. Tujuannya adalah agar output yang diharpkan bisa diperoleh dengan cara yang paling cepat dan efesien.&lt;br /&gt;&lt;br /&gt;Dalam penyusunan sebuah algoritma, terdapat tiga bentuk struktur dasar yang digunakan:&amp;nbsp;&lt;/p&gt;&lt;p&gt;1. Struktur Urutan&amp;nbsp;&lt;br /&gt;adalah struktur paling dasar dimana langkah-langkah algortima diproses secara berurutan.&lt;/p&gt;&lt;p&gt;Dimulai dari langkah pertama, Kedua, dan seterusnya hingga selesai.&lt;/p&gt;&lt;p&gt;2. Struktur Pemilihan&amp;nbsp;&lt;br /&gt;Proses atau langkah akan melalui percabangan dan diseleksi berdasarkan kondisi tertentu.&lt;/p&gt;&lt;p&gt;Pengecekan apakah nilai X &amp;gt; 5.&lt;br /&gt;jika benar, lanjut ke langkah A&lt;br /&gt;jika salah, lanjut ke langkah B.&lt;br /&gt;&lt;/p&gt;&lt;p&gt;3. Struktur perulangan (looping)&lt;br /&gt;- Sebuah langkah akan diulang kembali ke langkah sebelumnya jika kondisi yang diinginkan belum terpenuhi.&lt;br /&gt;&lt;br /&gt;- Contoh jika nilai X harus lebih besar dari 5 untuk lanjut, namun nilai saat ini masih di bawah 5, maka sistem akan terus menambah nilai X dan mengeceknya kembali secara berulang hingga syarat terpenuhi,\.&lt;br /&gt;BAHASA PEMROGRAMAN&amp;nbsp;&lt;/p&gt;&lt;p&gt;Bahasa Pemrograman adalah intruksi standar untuk memerintah komputer agar menjalankan fungsi tertentu terdiri dari kumpulan sintaks perintah dasar seperti perhitungan dan penyimpanan data. Hasilnya berupa program atau aplikasi.&lt;br /&gt;&lt;br /&gt;Evolusi Generasi bahasa pemrograman&amp;nbsp;&lt;br /&gt;generasi 1 Machine language&amp;nbsp;&lt;br /&gt;bahasa asli komputer menggunakan bilangan binner (0 dan 1)&amp;nbsp;&lt;/p&gt;&lt;p&gt;Generasi 2 Assembly Language&lt;br /&gt;Menggunakan kode mnemonic seperti MOV, SUB, LOOP.&lt;/p&gt;&lt;p&gt;Generasi 3 Procedural Langguage&amp;nbsp;&lt;br /&gt;menggunakan bahasa manusia dengan campuran simbol&amp;nbsp;&lt;br /&gt;&lt;br /&gt;Generasi 4 (4GL)&lt;br /&gt;Fokus pada bahasa query terstruktur seperti SQL untuk basis data.&lt;/p&gt;&lt;p&gt;&amp;nbsp;Generasi 5 (Object-Oriented &amp;amp; WEB)&lt;br /&gt;Menekankan efesiensi, otomasi, dan kecerdasan (intelligent programming)&lt;/p&gt;&lt;p&gt;Klasifikasi Tingkat Bahasa&lt;br /&gt;Tingkat rendah&amp;nbsp;&lt;br /&gt;bahasa mesin yang langsung diproses CPU tanpa kompilasi.&lt;/p&gt;&lt;p&gt;&amp;nbsp;Tingkat Menengah&amp;nbsp;&lt;br /&gt;Bahasa Assembly yang menjembatani bahasa mesin dan manusia.&lt;/p&gt;&lt;p&gt;Tingkat Tinggi&amp;nbsp;&lt;br /&gt;Bahasa yang mudah dipahami manusia (contoh: C++, Pascal, Visual Basic)&lt;/p&gt;&lt;p&gt;&amp;nbsp;Tingkat sangat tinggi (Very High Level)&lt;br /&gt;Digunakan untuk produktivitas profesional dan scripting&amp;nbsp;&lt;br /&gt;contoh : Java, Python, Ruby)&lt;br /&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;Proses penerjemahan kode (Kompilasi Vs Interpretasi)&amp;nbsp;&lt;br /&gt;untuk mengubah kode menjadi bahasa mesin yang bisa dieksekusi CPU, ada 3 teknik :&lt;/p&gt;&lt;p&gt;1. Kompilasi : Menerjemahkan seluruh kode sumber sekaligus (contoh: C ,C++).&lt;/p&gt;&lt;p&gt;2. Interpretasi : Mengeksekusi kode baris demi baris, program berhenti jika ada kesalahan di satu baris (Contoh: Python, Ruby, Pearl)&amp;nbsp;&lt;/p&gt;&lt;p&gt;3. Gabungan : Menggunakan kompilasi menjadi bytecode lalu dijalankan oleh interpreter (Contoh: Java menggunakan JRE).&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;VARIABEL DAN TIPE DATA&lt;/p&gt;&lt;p&gt;analogi variable dan tipe data, bisa diibaratkan seperti sebuah gelas yang berisi air jeruk. variable adalah gelasnya (wadah/penampungnya, tipe data adalah air jeruknya (isi atau jenis datanya).&lt;/p&gt;&lt;p&gt;Variabel adalah sebuah pengenal (identifier) yang digunakan untuk mewakili nilai tertentu di dalam program. Nilainya dapat diubah-ubah sesuai kebutuhan.&lt;/p&gt;&lt;p&gt;Aturan penambahan variable :&lt;br /&gt;- Boleh gabungkan angka dan huruf, tapi tidak boleh diawali angka.&lt;br /&gt;- Tidak boleh ada spasi&lt;br /&gt;- Tidak boleh ada simbol khusus kecuali underscore ( _ )&lt;br /&gt;- Karakter bebas, namun biasanya hanya 32 karakter pertama yang terbaca.&lt;br /&gt;&lt;br /&gt;Tipe data adalah jenis nilai yang dapat ditampung dan diolah oleh sebuah variabel.&lt;/p&gt;&lt;p&gt;Jenis-jenis tipe data dibagi menjadi dua kategori besar :&lt;br /&gt;&lt;/p&gt;&lt;p&gt;Tipe data Standar (primitif):&lt;br /&gt;1. integer: bilangan bulat (0, 1, -4, Dst).&lt;br /&gt;2. Real: Bilangan desimal (0,1, -3,22).&lt;br /&gt;3. Char: Karakter Tunggal (a, b, x).&lt;br /&gt;4. String: Kumpulan karakter/kata ("buah" , "kambing").&lt;br /&gt;5. Boolean: Nilai logika (True atau False).&lt;/p&gt;&lt;p&gt;Tipe data Struktur&amp;nbsp;&lt;br /&gt;1. Aray: Kumpulan variabel dengan tipe data yang sama dan memiliki indeks.&lt;br /&gt;2. Record: Kumpulan variabel dengan tipe data yang berbeda-beda.&lt;br /&gt;3. File: Untuk menyimpan data dalam bentuk file.&lt;br /&gt;4. Set: Kumpulan nilai.&lt;br /&gt;5. Pointer: Untuk menyimpan alamat memori&lt;br /&gt;&lt;br /&gt;MENGENAL OPRATOR&lt;br /&gt;oprator itu gampangnya adalah simbol yang kita pakai untuk mengelolah atau mengubah nilai di dalam variabel. Ada 3 jenis Utama yang wajib kamu tahu:&lt;/p&gt;&lt;p&gt;1. Oprator Aritmatika&lt;br /&gt;Dipakai khusus untuk angka (bilangan bulat atau desimal).&lt;br /&gt;+ Penjumlaham dan - Pengurangan&lt;br /&gt;* perkalian dan / Pembagian&lt;br /&gt;% Modulus untuk mencari sisa bagi ( 5 dibagi 2 sisanya 1, maka 5 Mod 2 = 1).&lt;/p&gt;&lt;p&gt;2. Oprator Relasional (Buat Banding-Bandingan)&lt;br /&gt;Dipakai untuk membandingkan dua nilai. Hasilnya cuman dua: Benar (True) atau Salah (False).&lt;/p&gt;&lt;p&gt;- sama dengan (==)&lt;br /&gt;- Tidak sama dengan (!=)&lt;br /&gt;- Lebih besar (&amp;gt;) atau Lebih kecil (&amp;lt;)&lt;br /&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;3. Oprator Logika (Buat hubungan kondisi)&lt;br /&gt;Dipakai Untuk menggabungkan beberapa perbandingan&lt;br /&gt;- AND: Semua kondisi harus benar supaya hasilnya Benar&amp;nbsp;&lt;br /&gt;- OR: salah satu saja benar, Hasilnya sudah Benar.&lt;br /&gt;- NOT: Kebalikan. Kalau aslinya Benar, Jadi Salah.&lt;br /&gt;&lt;br /&gt;NILAI VARIABEL&lt;br /&gt;Nilai adalah isi atau besaran dari sebuah variabel atau konstanta. kalau variabel itu gelasnya, nilai adalah air di dalamnya. Algoritma pada dasarnya adalah cara kita memanipulasi nilai-nilai ini.&lt;br /&gt;&lt;br /&gt;Cara memanipulasi Nilai&amp;nbsp;&lt;br /&gt;1. Mengisi nilai Langsung: memasukan nilai ke dalam variabel.&lt;br /&gt;contoh Variabel A diisi angka 5, Sekarang A punya nilai 5.&lt;br /&gt;&lt;br /&gt;2. Menampilkan Nilai (Output): mengeluarkan ini variabel ke layar agar bisa dilihat manusia.&amp;nbsp;&lt;br /&gt;menggunakan fungsi write untuk memunculkan isi variabel ke layar.&lt;br /&gt;&lt;br /&gt;3. Menggunakan Nilai untuk Operasi: memakai isi variabel untuk dihitung dengan variabel lain.&lt;br /&gt;contoh: Variabel Jumlah = Variabel A dikali 5.&lt;br /&gt;&lt;br /&gt;PERBEDAAN NILAI DI VARIABEL VS KONSTANTA&lt;br /&gt;- Konstanta: Nilainya tetap dan tidak berubah selama program jalan.&lt;br /&gt;contoh: Nilai PI yang diisi 3,14.&lt;br /&gt;- Variabel: Nilainya bisa berubah-ubah tergantung proses.&lt;br /&gt;- Hasil Ekspresi: Nilai juga bisa datang dari hasil hitungan.&lt;br /&gt;contoh: jika Variabel 1 isinya 5, lalu dikali 5, maka nilai akhirnya adalah 25.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>PENGERTIAN LINUX </title><link>https://elementertech.blogspot.com/2025/12/pengertian-linux.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Tue, 30 Dec 2025 17:30:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-1390816095748782011</guid><description>&lt;div class="separator"&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img alt="Debian: the 2nd most popular Linux distro" class="sFlh5c FyHeAf iPVvYb" height="166" src="https://www.stackscale.com/wp-content/uploads/2022/08/debian-gnu-linux-distro-stackscale.jpg" style="height: 382px; margin: 0px; max-width: 1470px; width: 551px;" width="239" /&gt;&lt;br /&gt;&lt;br /&gt;APA itu LINUX ?&lt;br /&gt;&lt;br /&gt;Linux adalah sebuah OS lebih tepatnya GNU/LINUX , OS ini memiliki suber terbuka berbasis UNIX yang artinya selain dia gratis dia bisa di kembangkan sendiri, GNU/linux sering digunakan di SERVER tetapi untuk developer LINUX lebih sering di pakai di Sistem Komputer rumahan mereka.&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;Sejak di temukannya linux 1991 sistem oprasi ini telah banyak di gunakan di dunia, memberikan alternatif dari OS eksklusif, microsoft dan macOS.&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;dikembangkan oleh linus torvalds untuk menjadi alternatif yang UNIX LIKE mirip UNiX. Linux sangat bergantung pada kernelnya untuk fungsinya. didalam dunia OS kernel adalah program komputer yang memungkinkan pengguna untuk mengontrol perangkat keras dan perangkat lunak sistem. Linux juga menggunakan berbagai komponen seperti perpustakaan sistem dan utilitas ruang, tetapi bergantung pada kernal untuk berkomunikasi dan menerima perintah dari pengguna.&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;APA ITU KERNEL LINUX ?&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;kernel linux itu suber terbuka gratis yang digunakan oleh semua perangkat dan sistem yang menjalankan sistem oprasi LINUX. kernel adalah program komputer yang menghubungkan perangkat keras dan perangkat lunak, memungkinkan pengguna untuk mengelola komponen sistem yang berbeda, termaksuk jaringan, sistem file, driver dan banyak lagi.&lt;br /&gt;&lt;br /&gt;Desain kernel sangat penting untuk mencegah konflik dan menjaga stabilitas proses penting yang membuat fungsi sestem&amp;nbsp; komputer , seperti input/output (I/0), Penggunaan CPU dan eksekusi aplikasi. kernel linux terkenal karena fleksibilitas, stabilitas dan kinerja tinggi, dan OS linux telah menjadi salah satu OS paling populer didunia sebagaian besar karena edektivitas kernel LINUX.&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;Kernel linux juga ada di system oprasi mobile ANDROID, tetapi android bukanlah GLU/LINUX yang sepenuhnya seperti di dekstop, dia adalah sistem oprasi yang di ciptakan oleh google untuk phonesel pintar dan menggunakan kernel linux sebagai inticorenya.&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;di OS linux, kernel dikombinasikan dengan paker untuk membuat distribusi linux yang memungkinkan pengguna untuk mengoprasikan komputer mereka dengan aman dan efektif.&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;APA ITU DISTRIBUSI KERNEL LINUX ???&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;salah satu aspek linux membuatnya begitu sukses adalah linux terus dikembangkan oleh komunitas pengembang global. setiap 0-10 minggu, versi baru kernel linux dirilis ke dunia dengan pembaruan untuk meningkatkan kinerja, menambah fungsionalitas, dan meningkatkan kompabilitas dengan perangkat baru. Setiap versi baru Linux disebut "kernel stabil", dan ditambahkan ke respository distribusi linux yang disimpan di kenel.org dan GItHUB.&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;Penggunaka linux mengandalka&amp;nbsp; manajer paket untuk mengintegritaskan setiap versi baru. manajer paker adalah alat perangkat lunak yang membantu dengan instalasi, pembaruan dan penghapusan paket perangkat lunak.&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;kebanyakan vendor sangat bergantung pada linux untuk fungsionalitas perangkat lunak mereka sendiri mungkin lebih suka memelihara pohon sumber khusus atau kumpulan kode sumber kernel linux yang dapat mereka terapkan untuk penggunaan mereka sendiri.&amp;nbsp;&lt;br /&gt;&lt;br /&gt;misal DEBIAN menerapkan versi linux yang dikenal sangat stable dengan kinerja tinggi dan tahan terhadap segala serangan. ubuntu termaksut turunan yang memilki sumber terbuka gratis lainya berdasarkan debian. Debian adalah pilihan OS yang dapat disesuaikan dibangun di atas kenel linux yang menggunakan pohon sumbernya secara khusus untuk memelihara ubuntu, kode sumberterbuka yang penting bagi banyak arsitektur IOT.&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;BAGAIMANA CARA KERJA LINUX ?&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;Arsitekrur linux dibangun dengan desain modular, sebuah fitur dari berbagai versi dan banyak distribusi linux yang populer. meskipun semua distro linux didasarkan pada kernel linux, setiap versi dapat berbeda berdasarkan versi dan modul kernel.&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;- versi: setiap OS linux dapat disesuaikan untuk kebutuhan spesifik pengguna. sebagai contoh,&amp;nbsp;&amp;nbsp;seseorang perlu menggunakan Linux dengan teknologi yang lebih baru 
seperti AI, ML, dan komputasi edge, mereka dapat memilih versi yang 
lebih baru. Namun, jika mereka mencari keandalan yang lebih tinggi, 
mereka bisa memilih untuk menggunakan versi kernel yang lebih lama yang 
lebih stabil tetapi kurang kompatibel dengan teknologi yang lebih baru.&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;- modul:&amp;nbsp;&lt;strong&gt;Modul:&amp;nbsp;&lt;/strong&gt;Modul adalah aplikasi perangkat lunak spesifik 
yang dapat dimasukkan ke dalam kernel atau dilepas untuk memperluas 
fungsionalitas tanpa perlu melakukan boot ulang. Pada dasarnya, modul 
kernel membuat OS kompatibel dengan perangkat baru—sering kali 
driver—tanpa harus melakukan boot ulang sistem agar mengenali dan 
mendukung perangkat tersebut. Selain itu, driver sistem berkas 
mengandalkan kode yang menentukan bagaimana kernel beroperasi dengan 
sistem berkas yang berbeda.&lt;br /&gt;&lt;br /&gt;MENJALANKAN KERNEL LINUX&amp;nbsp;&lt;/p&gt;&lt;p style="margin-left: 1em; margin-right: 1em;"&gt;&amp;nbsp;&lt;/p&gt;&lt;ul&gt;&lt;li&gt;&lt;strong&gt;Proses boot:&lt;/strong&gt; Ketika dimulai, BIOS (Basic 
Input/Output System) dari sistem Linux memuat program bootloader, 
biasanya disebut Grub—Grand Unified Bootloader—yang menemukan dan 
memulai gambar kernel Linux dari hard disk ke dalam memori. Hal ini 
memungkinkan kernel untuk mengambil kendali sistem dan mulai menjalankan
 tugas.&lt;/li&gt;&lt;/ul&gt;
&lt;ul&gt;&lt;li&gt;&lt;strong&gt;Mengelola input/output:&lt;/strong&gt; Setelah kernel di-boot,
 kernel mengendalikan sistem dan dapat memulai serta mengontrol semua 
proses terkait. Linux mengelola input/output melalui serangkaian aliran 
(seperti input standar, output dan kesalahan) yang dapat diakses oleh 
aplikasi dasar sistem. Kernel Linux mengontrol semua komunikasi antara 
aplikasi dan perangkat keras eksternal, mengirim permintaan dari 
aplikasi ke perangkat melalui driver.&lt;/li&gt;&lt;/ul&gt;
&lt;ul&gt;&lt;li&gt;&lt;strong&gt;Menggunakan antarmuka baris perintah Linux (CLI):&lt;/strong&gt;&amp;nbsp;Command
 Line Interface (CLI) adalah cara berbasis teks untuk berinteraksi 
dengan sistem operasi menggunakan keyboard. CLI Linux memungkinkan 
pengguna untuk mengontrol dan mengelola sumber daya sistem komputer 
dengan mudah dengan mengetikkan instruksi sederhana menggunakan CLI. 
Setelah sistem di-boot, Linux memulai proses sebagai respons terhadap 
permintaan pengguna.&amp;nbsp;Misalnya, fungsi server jaringan yang penting untuk
 fungsionalitas jaringan komputer bergantung pada Linux yang menjalankan
 “layanan” atau “daemon” —program perangkat lunak yang memproses 
permintaan dari pengguna dan node berdasarkan protokol jaringan yang 
telah ditentukan sebelumnya.&lt;/li&gt;&lt;/ul&gt;&lt;div class="standalone-title enhanced-title text"&gt;

    &lt;h2 class="expressive-heading-05  "&gt;
        Keuntungan dan kerugian Linux
    &lt;/h2&gt;
        
  
    
    &lt;a data-title="Keuntungan dan kerugian Linux" name="Keuntungan+dan+kerugian+Linux"&gt;&lt;/a&gt;
  









    

&lt;/div&gt;
&lt;div class="standalone-title enhanced-title text"&gt;

    &lt;h2 class="expressive-heading-05  "&gt;
        
    &lt;/h2&gt;
        
  









    

&lt;/div&gt;
&lt;div class="rich-text text"&gt;&lt;div class="cms-richtext " data-dynamic-inner-content="description" id="rich-text-72bc5c5826"&gt;
    &lt;p&gt;Sebagai sistem operasi sumber terbuka paling populer di dunia, 
Linux gratis bagi siapa saja untuk menggunakan dan menyesuaikan sesuai 
keinginan. Sistem ini dianggap berkinerja tinggi, fleksibel, stabil ,dan
 aman. Dengan komunitas pengembang khusus yang terus memperbaruinya, ini
 sangat kompatibel dengan teknologi yang lebih baru.&lt;/p&gt;
&lt;p&gt;Bergantung pada contoh penggunaan organisasi atau individu, ada 
banyak keuntungan membangun di Linux. Namun, ada juga beberapa 
kelemahannya. Berikut adalah beberapa poin penting yang perlu 
dipertimbangkan bagi siapa pun yang ingin menggunakan Linux untuk 
kebutuhan bisnis mereka.&lt;/p&gt;

    
    
    
    

&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;/div&gt;&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>cara mengatasi trobleshoot pada Laptop</title><link>https://elementertech.blogspot.com/2018/08/cara-mengatasi-trobleshoot-pada-laptop.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Wed, 15 Aug 2018 21:59:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-7332208460699003010</guid><description>&lt;div dir="ltr" style="text-align: left;" trbidi="on"&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Cara Mengatasi Troubleshoot pada Laptop -&amp;nbsp;&lt;/b&gt;Pada artikel kali ini saya akan menjelaskan bagaimana&amp;nbsp;&lt;span style="border: 0px; box-sizing: border-box; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;mengatasi laptop troubleshoot&lt;/span&gt;.&amp;nbsp;Saat ini banyak tempat umum yang menyediakan jaringan hotspot (wifi) untuk menarik pelanggan, seperti di mall, cafe, bahkan dirumah sakit sudah menggunakan fasilitas wifi , dll. Namun ada kalanya pada saat kita mengkoneksikan ke jaringan tersebut sering terjadi masalah padahal posisi pada laptop sudah&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;connect&amp;nbsp;&lt;/b&gt;dengan jaringan wifi tersebut tetapi kenapa tidak bisa browsing atau mengakses internet?&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;br style="box-sizing: border-box; margin: 0px; padding: 0px;" /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKwfH-tRnHQN6xqxqoD2ONFOy-BGRGS5XQci-596LePyza9Xjz7sIS70o4TAKicC6SeK1PXVkujCcIyeOVJi4UEHFAWoNzx30UkdXlNnJ6zp-wPeXQdC9bl4jIa6RlKUL3rFwKePRUzpE/s1600/sss.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="322" data-original-width="487" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKwfH-tRnHQN6xqxqoD2ONFOy-BGRGS5XQci-596LePyza9Xjz7sIS70o4TAKicC6SeK1PXVkujCcIyeOVJi4UEHFAWoNzx30UkdXlNnJ6zp-wPeXQdC9bl4jIa6RlKUL3rFwKePRUzpE/s320/sss.png" width="320" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="background-color: white; border: 0px; box-sizing: border-box; clear: both; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;/div&gt;
&lt;div class="separator" style="background-color: white; border: 0px; box-sizing: border-box; clear: both; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;br style="box-sizing: border-box; margin: 0px; padding: 0px;" /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;"&gt;
&lt;div style="border: 0px; box-sizing: border-box; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;br style="box-sizing: border-box; margin: 0px; padding: 0px;" /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
Ikuti Langkah-Langkah berikut ini :&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
Langkah pertama cek pada bagian bawah layar pada bagian pojok kanan bawah yang biasanya menunjukan icon untuk koneksi wireless pada laptop,jika terdapat segitiga berwarna kuning dengan tanda seru&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&amp;nbsp;(!)&lt;/b&gt;&amp;nbsp;maka itu berarti anda sama sekali tidak bisa mengakses ke Internet, solusinya adalah :&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;br style="box-sizing: border-box; margin: 0px; padding: 0px;" /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
1. Buka&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Control Panel&lt;/b&gt;&amp;nbsp;kemudian pilih&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&amp;nbsp;Network and sharing center&lt;/b&gt;.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
2. Setelah itu pilih&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Change adapter setting&lt;/b&gt;.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
3. Lalu klik kanan pada&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Wireless Network Connection&amp;nbsp;&lt;/b&gt;dan pilih&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Properties&lt;/b&gt;.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
4. Klik dua kali pada&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Internet Protocol Version 4(TCP/IPV4).&lt;/b&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
5.&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&amp;nbsp;&lt;/b&gt;Setelah itu kita akan melihat tampilan detail IP address pada laptop kita.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
6. Kosongkan semua kontak IP Address dengan klik&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Obtain an IP address automatically&lt;/b&gt;.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
7. Setelah itu klik O&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;k&lt;/b&gt;.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;br style="box-sizing: border-box; margin: 0px; padding: 0px;" /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
Tunggu beberapa saat hingga kita mendapatkan IP address dari DHCP server hotspot,kemudian perhatikan kembali&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&amp;nbsp;Icon wireless connection&lt;/b&gt;&amp;nbsp;yang ada di pojok bawah sebelah kanan apakah tanda seru sudah hilang,jika sudah berarti laptop anda sudah tersambung ke internet.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;br style="box-sizing: border-box; margin: 0px; padding: 0px;" /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
Jika langkah pertama belum berhasil, kemungkinan ada masalah pada&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;wifi card&lt;/b&gt;laptop anda. Biasanya yang sering terjadi adalah masalah dari&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;driver hardware&lt;/b&gt;tersebut maka anda bisa melihatnya di&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;device manager&amp;nbsp;&lt;/b&gt;dengan cara :&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;br style="box-sizing: border-box; margin: 0px; padding: 0px;" /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
1. Klik kanan pada&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;My Computer&lt;/b&gt;&amp;nbsp;kemudian pilih&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Manage&lt;/b&gt;.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
2. Kemudian pilih&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Device Manager&lt;/b&gt;.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
3. Lalu anda perhatikan pada bagian&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Network adapters.&lt;/b&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
4.&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&amp;nbsp;&lt;/b&gt;Klik kanan pada hadware wifi di laptop anda&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
5. Lalu klik&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Uninstall&lt;/b&gt;. jangan khawatir, karena saat terdeteksi oleh sistem drive secara otomatis akan terinstal kembali.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
6. Setelah itu klik kanan pada hardware wifi yang sudah di uninstall dan pilih&amp;nbsp;&lt;b style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;scan for hardware changes&lt;/b&gt;. Agar mendeteksi dan menginstal ulang driver secara otomatis&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
7. Setelah selesai tutup device manager.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
8. Kemudian koneksikan kembali dengan jaringan hotspot (wifi) disekitar anda.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;br style="box-sizing: border-box; margin: 0px; padding: 0px;" /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
Dengan mengikuti langkah-langkah diatas laptop anda sudah bisa terkoneksi dengan jaringan wifi. Sebenarnya masih banyak cara lain, namun dirasa cara diatas sudah mampu mengatasi masalah dan dapat dijadikan cara mengatasi laptop yang troubleshoot&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 22.75px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
Demikian artikel kali ini,,Terima Kasih,, Semoga Bermanfaat :-)&lt;/div&gt;
&lt;/div&gt;
&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKwfH-tRnHQN6xqxqoD2ONFOy-BGRGS5XQci-596LePyza9Xjz7sIS70o4TAKicC6SeK1PXVkujCcIyeOVJi4UEHFAWoNzx30UkdXlNnJ6zp-wPeXQdC9bl4jIa6RlKUL3rFwKePRUzpE/s72-c/sss.png" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>mengenal software</title><link>https://elementertech.blogspot.com/2018/07/mengenal-software.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Sat, 28 Jul 2018 18:43:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-7139182755240783278</guid><description>&lt;div dir="ltr" style="text-align: left;" trbidi="on"&gt;
&lt;h1 class="post-title entry-title" itemprop="headline" style="border: 0px; color: #0072c6; font-family: &amp;quot;Fjalla One&amp;quot;, Helvetica, Arial, sans-serif; font-size: 20px; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-weight: normal; line-height: normal; margin: 0px 0px 0.6em; padding: 0px; vertical-align: baseline;"&gt;
Mengenal Apa Itu Software dan Jenis-Jenisnya&lt;/h1&gt;
&lt;div class="post-header" style="border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;
&lt;div class="post-header-line-1" style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="post-body entry-content" id="post-body-8339295801490000068" itemprop="description articleBody" style="border: 0px; color: #333333; font-family: Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 1.6em; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;
&lt;div id="post18339295801490000068" style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;b style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Mengenal apa itu software dan jenis-jenisnya&lt;/b&gt;&amp;nbsp;- Suatu komputer biasanya disusun berdasarkan tiga penyusun yaitu hardware, software dan brainware. Tanpa ketiga penyusun tersebut, suatu komputer tak dapat digunakan . Sebab ketiganya sangat erat kaitannya.&amp;nbsp;&lt;/span&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Namun, seperti judul di atas, untuk pembahasan kali ini kami akan fokus mengupas secara mendetail mengenai software beserta jenis-jenisnya serta berbagai hal lainnya yang berhubungan dengan software. &amp;nbsp;Nah, berikut ulasan lengkapnya.&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;h3 style="border: 0px; font-family: inherit; font-size: 25.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: normal; margin: 0px 0px 0.6em; padding: 0px; vertical-align: baseline;"&gt;
#Definisi software&lt;/h3&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Software di defenisikan sebagai suatu perangkat lunak pada komputer yang berfungsi untuk mendukung kinerja dari perangkat keras pada komputer. Selain itu, software juga dapat di defenisikan sebagai suatu data yang memang sengaja di program, lalu kemudian di simpan, dalam berbagai macam bentuk aplikasi yang isinya mengenai program,dokumentasi dan suatu suatu informasi yang sifatnya dapat dibaca oleh komputer.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Secara lebih ringkas, Anda dapat menyebutnya sebagai bagian dari suatu sistem pada komputer yang wujudnya tidak dapat dilihat atau lebih tepatnya perangkat lunak yang bekerja hanya dibalik layar. Apabila ditinjau secara fisik, tentu Anda tak akan dapat melihat software, sebab sudah jelas dikatakan bahwa software merupakan suatu perangkat yang sifatnya abstrak akan tetapi memiliki fungsi yang sangat vital pada komputer.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Dengan mengoperasikan software, Anda bisa menikmati berbagai macam fungsi, hiburan seperti main game, surfing, chatting dan lain sebagainya.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Bagaimana, sudah paham kan definisi dari software? Nah berikutnya, dari defenisi software, kita beranjak menuju jenis-jenis dari software. Oke, langsung saja, berikut ulasan lengkapnya.&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;h3 style="border: 0px; font-family: inherit; font-size: 25.6px; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: normal; margin: 0px 0px 0.6em; padding: 0px; vertical-align: baseline;"&gt;
#Jenis-Jenis Software&lt;/h3&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;b style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;1.Shareware&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Jenis software yang satu ini adalah salah satu jenis software yang telah disediakan untuk user &amp;nbsp;tanpa perlu membayar biaya uji cobanya. Akan tetapi kelemahan dari software ini adalah memiliki batasan pada kombinasi dari ketersediaan atau kenyamanan dengan fungsinya. Jadi, ketika Anda merasa tidak puas dengan software yang satu ini, tentu sangat wajar karena software jenis ini memang diperuntukkan sebagai software uji coba.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Biasanya, jenis software yang satu ini sering Anda temukan pada banyak situs web yang biasanya menawarkan suatu aplikasi uji coba agar kemudian Anda tertarik untuk membeli versi aslinya yang memiliki lisensi. Shareware sering digunakan sebagai media atau sarana marketing untuk mengembangkan aplikasi tertentu. Shareware sering disebut sebagai trialware.&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;b style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;2.Freeware&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Ketika Anda membaca nama dari jenis software yang satu ini, Anda pasti sudah bisa menebak jenis software apa ini. Ditinjau dari dua suku katanya saja sudah sangat jelas. Kata free &amp;nbsp;yang bisa diartikan gratis dan kata ware yang bisa diartikan perangkat. Jadi sudah jelas bahwa freeware merupakan jenis perangkat lunak dengan hak ciptanya tidak perlu dibayar dan penggunaannya juga tidak ada batasan waktu.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Hal ini tentu berbeda dengan jenis software sebelumnya yakni shareware &amp;nbsp;yang dapat digunakan dalam jangka waktu tertentu dan harus membayar jika ingin mendapatkan versi yang asli atau lengkapnya. Jenis software ini memang sengaja dibuat yang tujuannya untuk diberikan kepada suatu komunitas tertentu.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="googlepublisherads" style="border: 0px; font: inherit; margin: 20px 0px; padding: 0px; vertical-align: baseline;"&gt;
&lt;center style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;
&lt;ins class="adsbygoogle" data-ad-client="ca-pub-5237046156526063" data-ad-format="fluid" data-ad-layout="in-article" data-ad-slot="8711734394" data-adsbygoogle-status="done" style="border: 0px; display: block; font: inherit; height: 164px; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;ins id="aswift_0_expand" style="border: none; display: inline-table; font: inherit; height: 164px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; visibility: visible; width: 653px;"&gt;&lt;ins id="aswift_0_anchor" style="border: none; display: block; font: inherit; height: 164px; margin: 0px; padding: 0px; position: relative; vertical-align: baseline; visibility: visible; width: 653px;"&gt;&lt;iframe __idm_frm__="560" allowfullscreen="true" allowtransparency="true" frameborder="0" height="164" hspace="0" id="aswift_0" marginheight="0" marginwidth="0" name="aswift_0" scrolling="no" style="border-style: initial; border-width: 0px; font: inherit; height: 164px; left: 0px; margin: 0px; padding: 0px; position: absolute; top: 0px; vertical-align: baseline; width: 653px;" vspace="0" width="653"&gt;&lt;/iframe&gt;&lt;/ins&gt;&lt;/ins&gt;&lt;/ins&gt;&lt;/center&gt;
&lt;/div&gt;
&lt;div id="post28339295801490000068" style="border: 0px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Meskipun demikian para maker &amp;nbsp;tersebut tentu tidak ingin kehilangan haknya sebagai pencipta, oleh karena itu ketika para maker &amp;nbsp;tersebut memilih berhenti untuk mengembangkan freeware, mereka kemudian akan memnerbitkan kode sumber yang bisa ditujukan pada para maker lain atau mungkin juga kepada khalayak umum untuk kemudian dikembangkan bersama.&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;b style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;3.Commercial software&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Jenis software ini adalah jenis software yang berbayar, sudah sangat jelas pada kata commercial. Tujuan dibuatnya jenis software ini memang untuk komersil. Jadi sudah pasti, bagi user yang ingin menggunakan jenis software ini harus melakukan pembelian atau dengan kata lain membayarnya terlebih dulu pada pendistribusinya hingga kepada si pembuatnya secara langsung.&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Biasanya, para user &amp;nbsp;yang diizinkan untuk membeli software ini tidak diperbolehkan untuk menduplikatnya hingga menyebarluaskannya pada khalayak ramai karena dampaknya tentu akan sangat tidak baik pada mereka. Contoh dari jenis software yang satu ini adalah corel draw, adobe photoshop adobe illustrator dan lain sebagainya. Commercial software tentunya memiliki hak cipta yang sifatnya sangat dilindungi oleh undang-undang. Oleh sebab itu, tak semua orang bisa mengaksesnya secara bebas.&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;b style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;4.Firmware&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Firmware merupakan suatu aplikasi yang mengacuh secara jelas pada suatu perangkat lunak yang tersimpan pada memori read-ony, tidak mengalami perubahan meskipun tanpa dialiri arus. Firmware yang tersimpan pada ROM sifatnya tetap(tidak dapat diubah) namun apabila jenis ROM tersebut adalah EPROM atau mungkin flash ROM, firmware-nya masih bisa diubah (sifatnya tidak tetap).&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;b style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;5.Malware&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Kata malware merupakan gabungan dari dua kata yakni malicious dan software. Software jenis ini merupakan jenis software yang memang sengaja diciptakan dengan tujuan merusak suatu sistem pada komputer tanpa perlu meminta izin dari user-nya. Para pencipta jenis software ini sering menggunakan istilah computer virus pada semua jenis software yang dibuat untuk merusak sistem, termasuk juga true virus (virus murni).&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Sebagai catatan untuk Anda, bahwa untuk mengetahui apakah software tersebut termasuk pada jenis malware dapat dilihat dari suatu alasan mengapa maker &amp;nbsp;tersebut menciptakan softwarenya bukan dilihat berdasarkan cirinya. Jenis-jenis malware diantaranya yaitu kuda troya, cacing komputer, spyware,adware, crimeware, virus dan beragam jenis malware lainnya yang memang sengaja dibuat dengan alasan yang tidak baik. Malware bukan defective software, karena defective software merupakan suatu perangkat lunak yang memiliki tujuan yang legal akan tetapi berisi bahasa program yang sangat berbahaya.&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;b style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;6.Free software&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Isitilah free software merupakan suatu istilah yang sengaja diciptakan oleh Richard Stallman dan salah satu organisasi nirlaba yang menjadi sponsor utama pada proyek GNU ini adalah Free Software Foundation. Acuan yang digunakan pada free software ialah sebagai suatu perangkat lunak yang sifatnya bebas digunakan, dipelajari dan juga disalin namun tidak boleh memodifikasinya atau dengan kata lain kebebasan-kebebasan ini tetap harus dapat dinikmati oleh pengguna-pengguna berikutnya. Kata bebas dapat berarti ketika Anda ingin menggunakan, mengubah, mempelajari dan menyalin perangkat lunak tersebut, Anda tidak perlu mendapat izin siapa pun, karena sifatnya bebas.&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Free software movement merupakan suatu gerakan yang pertama kali dicetuskan dan kemudian pada tahun sekitar 1983 dikembangkan dengan visi dan misi memberikan hak untuk mengakses software tersebut bagi seluruh computer user (pengguna komputer). Alasan dikembangkannya gerakan tersebut karena untuk membuat suatu software menjadi perangkat lunak yang bebas akses biasanya harus memiliki lisensi resmi atau setidaknya berada pada domain publik dengan menyediakan akses kode sumber bagi setiap pengguna.&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;b style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;7.Open source software&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="border: 0px; font: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
&lt;span style="border: 0px; font-family: arial, helvetica, sans-serif; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Termasuk ke dalam jenis perangkat lunak dengan kode sumber yang terbuka. Oleh sebab itu, sifat dari software yang satu ini adalah bebas untuk disebarluaskan dan biasanya orang-orang dari paguyuban tertentu yang coba mengembangkannya. Tujuan dari penciptaan software ini adalah agar dapat dinikmati oleh semua pengguna komputer. Perbedaan open source software dengan free software terletak pada cara untuk mendapatkan lisensi software tersebut. Biasanya, produk dari perangkat lunak ini sifatnya bebas tetapi tetap memiliki aturan tertentu.&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>Sejarah Panjang Perjalanan Komputer </title><link>https://elementertech.blogspot.com/2018/07/sejarah-panjang-perjalanan-komputer.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Tue, 24 Jul 2018 05:28:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-1909884896065391422</guid><description>&lt;div dir="ltr" style="text-align: left;" trbidi="on"&gt;
hi guys sekarang kita akan membahas sejarah perkembangan komputer di dunia, kalian penasaran kan kenapa komputer yang sering kita gunakan bisa terlahir di dunia ini, maka dari itu kita di sini untuk membahasnya akan saya ceritakan bagaimana kisah sejarah perjalanan komputer berkembang di dunia hingga menjadi komputer rumahan biasa atau di sebut PC ( personal Komputer)&lt;br /&gt;
&lt;br /&gt;
&lt;h3 style="background-color: white; border: 0px; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 19px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 1.4; margin: 0px 0px 12px; padding: 0px; vertical-align: baseline;"&gt;
&lt;ol style="text-align: left;"&gt;
&lt;li&gt;Komputer Generasi Pertama (1946 – 1959) Tabung Vakum&lt;/li&gt;
&lt;/ol&gt;
&lt;/h3&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwfCyBpa7S4FkS-cZrK58-OrKdPdoeX4WoEPgpDA-hYqQxEg4cqxAJs-b6D8rfyrKKUPDpKtBKZeBeitX0Nc6Wxa4l2h3r-saI7QXlRQfZE82SwKw1FkhRRtwhfU8vu_c7Pv4D5tQ55cY/s1600/sasa.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="397" data-original-width="597" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwfCyBpa7S4FkS-cZrK58-OrKdPdoeX4WoEPgpDA-hYqQxEg4cqxAJs-b6D8rfyrKKUPDpKtBKZeBeitX0Nc6Wxa4l2h3r-saI7QXlRQfZE82SwKw1FkhRRtwhfU8vu_c7Pv4D5tQ55cY/s400/sasa.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Komputer generasi pertama dibuat pada tahun 1946 dengan menggunakan tabung vakum sebagai komponen dasar. Tabung vakum adalah material yang tidak efisien karena menghasilkan panas yang berlebihan dan juga membutuhkan daya listrik yang besar untuk dapat bekerja.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
ENIAC atau&amp;nbsp;&lt;em style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Electronic Numerical Integrator and Computer&lt;/em&gt;&amp;nbsp;merupakan salah satu contoh dari komputer generasi pertama yang dibuat oleh Mauchly dan Echert. ENIAC menggunakan 18.000 tabung vakum dengan ukuran 1800 kaki persegi dan berat hingga 30 ton.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Komputer generasi pertama menggunakan bahasa mesin, yang mana merupakan bahasa pemrograman yang paling dasar yang hanya dapat dipahami oleh komputer. Komputer generasi ini memiliki kemampuan yang terbatas untuk memecahkan suatu masalah dalam satu waktu. Untuk melakukan input digunakan kartu berlubang (punched cards) dan pita kertas. Output yang dihasilkan adalah sebuah print-out. Meski dengan fungsi yang sangat terbatas, namun biaya pembuatan komputer generasi ini terbilang fantastis, yaitu sekitar satu juta dollar.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
&lt;span style="font-size: 19px;"&gt;&lt;span style="color: #444444;"&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp;2. Komputer Generasi Kedua (1959 – 1965) Transistor&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQKt2ysFW7VKf6OmR0cLaw1tBmtNqXJGbYo86ZEXs_id-Ro2uyXbKvFF1YjS7NqdUPXDPBrwlwC41dvao9xPsm-zSXmgl7mrZt02z5NzfentAZWZP3mHwo7pSWnuIJgKhYjs4q3AymWQg/s1600/SASA2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="383" data-original-width="597" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQKt2ysFW7VKf6OmR0cLaw1tBmtNqXJGbYo86ZEXs_id-Ro2uyXbKvFF1YjS7NqdUPXDPBrwlwC41dvao9xPsm-zSXmgl7mrZt02z5NzfentAZWZP3mHwo7pSWnuIJgKhYjs4q3AymWQg/s400/SASA2.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Teknologi transistor menjadi awal kemunculan komputer generasi kedua, yang menggantikan peran dari tabung vakum pada komputer generasi pertama. Perkembangan transistor melambangkan peningkatan teknologi dimasa itu.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Bila dibandingkan dengan tabung vakum, transistor memiliki ukuran yang lebih kecil dan menghasilkan panas yang lebih sedikit, tingkat kegagalannya juga cenderung lebih kecil bila dibandingkan dengan komputer yang dibuat dengan tabung vakum. Sebagai hasilnya, transistor mampu menciptakan komputer yang lebih kecil, lebih cepat dan lebih murah dibandingkan dengan komputer generasi pertama.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Pada komputer generasi ini juga mengalami perkembangan pada bahasa pemrograman yang dimilikinya. Bahasa mesin yang dulunya digunakan kini digantikan dengan bahasa assembly atau yang biasa juga disebut bahasa simbolik. Hal ini berarti programmer dapat memberikan instruksi dengan kata-kata. Disaat yang sama bahasa pemrograman tingkat tinggi juga sedang dikembangkan seperti&amp;nbsp;&lt;em style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Common Business-Oriented Language&lt;/em&gt;&amp;nbsp;(CBOL) dan&amp;nbsp;&lt;em style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Formula Translator&lt;/em&gt;(FORTRAN). Perubahan bahasa pemrograman ini meberikan manfaat komputasi yang lebih cepat dan lebih akurat.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;h3 style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 19px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 1.4; margin: 0px 0px 12px; padding: 0px; vertical-align: baseline;"&gt;
&lt;span style="color: #444444;"&gt;&amp;nbsp; &amp;nbsp; &lt;/span&gt;&amp;nbsp; 3. Komputer Generasi Ketiga (1965 – 1971) Sirkuit Terintegrasi&lt;/h3&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihEjaabhiR9geUgtpbH_Blv6oGtrNVfBysp9JcXwI4Pvh3ygIFfOzGoUZ7LMwG73hmtTFiJSsVvK9gyZ5f7V2vWYr3OmY-jGUT-Z43m5WSIAlbiimFtlnWj4v7NWB80dG-lfWzEmP8RZ8/s1600/SASA3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="483" data-original-width="494" height="390" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihEjaabhiR9geUgtpbH_Blv6oGtrNVfBysp9JcXwI4Pvh3ygIFfOzGoUZ7LMwG73hmtTFiJSsVvK9gyZ5f7V2vWYr3OmY-jGUT-Z43m5WSIAlbiimFtlnWj4v7NWB80dG-lfWzEmP8RZ8/s400/SASA3.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Pada komputer generasi ketiga ini menggunakan&amp;nbsp;&lt;em style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Integrated Circuit (ICs)&lt;/em&gt;&amp;nbsp;menggantikan transistor sebagai komponen komputer. Transistor pada generasi ini telah di miniaturkan dan ditaruh pada IC, satu buah IC terdiri dari beberapa transistor, resistor dan kapasitor.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
IC pertama kali dikembangkan oleh Jack Kilby seorang insinyur listrik yang mana kemudian dianugerahkan hadiah nobel atas penemuannya tersebut. Bagaimana tidak, dengan penemuannya tersebut memberikan peningkatan yang signifikan terhadap kecepatan dan efiesiensi dari sebuah komputer, serta membuat komputer di generasi ini jauh lebih kecil dibanding sebelumnya.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Komputer di generasi ini menjadi komputer pertama yang mana pengguna mampu berinteraksi dengan menggunakan&amp;nbsp;keyboard&amp;nbsp;dan monitor dengan interface&amp;nbsp;sistem operasi, sebuah kemajuan bila dibandingkan dengan kertas berlubang.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Sebagai hasil dari pengembangan teknologi tersebut, komputer pada waktu itu dapat dijangkau untuk publik karena harganya yang lebih murah dan ukuran yang lebih kecil.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;h3 style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 19px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 1.4; margin: 0px 0px 12px; padding: 0px; vertical-align: baseline;"&gt;
&amp;nbsp; 4. Komputer Generasi Keempat (1971 – Sekarang) Microprosesor&lt;/h3&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwUxTa1O01Gh9AVMYtyvMDcPojcI3mAJLxLYDVc3iiYd83LKOwzO4A9WbLuIijjmqZiLSYZMvR2NSUWym13V1rdj-Vl5_1waQMXmNUgqD8ClEEUSgr94r7RTyelKVJX2Q8Qc7hOskLKrY/s1600/SASA4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="406" data-original-width="726" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwUxTa1O01Gh9AVMYtyvMDcPojcI3mAJLxLYDVc3iiYd83LKOwzO4A9WbLuIijjmqZiLSYZMvR2NSUWym13V1rdj-Vl5_1waQMXmNUgqD8ClEEUSgr94r7RTyelKVJX2Q8Qc7hOskLKrY/s400/SASA4.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Ini adalah generasi dimana anda berada sekarang, komputer yang anda lihat disekeliling anda merupakan komputer dari generasi keempat, “Microprosesor” adalah konsep utama dibalik generasi ini. Dalam satu chip, terdiri dari ribuan transistor dan elemen sikuit lainnya yang dihubungkan menjadi satu.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Perkembangan komputer generasi keempat tidak terlepas dari Intel, salah satu perusahaan pembuat chip yang telah menciptakan Intel 4004 Chip yang menjadi langkah awal pada perkembangan teknologi komputer yang kemudian menggantikan&amp;nbsp;komponen komputer&amp;nbsp;yang dulunya sebesar satu ruangan, kini hanya sebesar kepalan tangan.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Di tahun 1971 komputer pertama buatan IBM diciptakan yang didesain khusus untuk penggunaan rumahan dan tahun 1984 Macinthos pertama kali diperkenalkan oleh Apple. Melihat peningkatan yang terjadi pada komputer di generasi ini melahirkan ide untuk meciptakan sebuah&amp;nbsp;jaringan komputer, yang akhirnya mengarah pada perkembangan dan kelahiran&amp;nbsp;internet. Kemajuan besar lainnya yang terjadi di generasi ini adalah diciptakannya&amp;nbsp;&lt;em style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;Graphical User Interface&lt;/em&gt;&amp;nbsp;(GUI),&amp;nbsp;mouse, dan kemajuan yang menakjubkan lainnya hingga menghasilkan komputer jinjing yang bisa dibawa kemana-mana atau yang biasa disebut laptop&lt;/div&gt;
&lt;h3 style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 19px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 1.4; margin: 0px 0px 12px; padding: 0px; vertical-align: baseline;"&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;5. android smartphone (2007 – Sekarang)&amp;nbsp;&lt;/h3&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK48z1_puHf-jF2WX57dmdo9AtTQPY-fj3KpdRabsZTR_dVvBWpx-LDb6x3y4JtKe23eQvX1Sm-MutaexcwIhEFYqyr8RwsPt1Yve5-SuDt2UukE1ZPF-z03dgos1DfbyymJPx_Sa5T9g/s1600/SASA4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="349" data-original-width="701" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK48z1_puHf-jF2WX57dmdo9AtTQPY-fj3KpdRabsZTR_dVvBWpx-LDb6x3y4JtKe23eQvX1Sm-MutaexcwIhEFYqyr8RwsPt1Yve5-SuDt2UukE1ZPF-z03dgos1DfbyymJPx_Sa5T9g/s400/SASA4.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Menurut saya Hand Phone Android sudah menjadi salah satu dari Komputer Family kenapa ? dari fungsinya sajah kita sudah bisa menggunakan apk seperti ms.word family dan kirim email , ngeblog , bahkan game game versi komputer sudah ada di android,&amp;nbsp;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
&lt;b style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;Android&lt;/b&gt;&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;&amp;nbsp;&lt;/span&gt;&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;&amp;nbsp;adalah&amp;nbsp;&lt;/span&gt;sistem operasi&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;&amp;nbsp;berbasis&amp;nbsp;&lt;/span&gt;Linux&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;&amp;nbsp;yang dirancang untuk perangkat bergerak&amp;nbsp;&lt;/span&gt;layar sentuh&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;&amp;nbsp;seperti&amp;nbsp;&lt;/span&gt;telepon pintar&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;&amp;nbsp;dan&amp;nbsp;&lt;/span&gt;komputer tablet&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;.&lt;/span&gt;&lt;sup class="reference" id="cite_ref-AndroidOverview_13-0" style="color: #222222; font-family: sans-serif; line-height: 1em; unicode-bidi: isolate; white-space: nowrap;"&gt;&lt;a href="https://id.wikipedia.org/wiki/Android_(sistem_operasi)#cite_note-AndroidOverview-13" style="background: none; color: #0b0080; text-decoration-line: none;"&gt;[11]&lt;/a&gt;&lt;/sup&gt;&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;&amp;nbsp;Android awalnya dikembangkan oleh Android, Inc., dengan dukungan finansial dari&amp;nbsp;&lt;/span&gt;Google&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;, yang kemudian membelinya pada tahun 2005.&lt;/span&gt;&lt;sup class="reference" id="cite_ref-AndroidInc_14-0" style="color: #222222; font-family: sans-serif; line-height: 1em; unicode-bidi: isolate; white-space: nowrap;"&gt;&lt;a href="https://id.wikipedia.org/wiki/Android_(sistem_operasi)#cite_note-AndroidInc-14" style="background: none; color: #0b0080; text-decoration-line: none;"&gt;[12]&lt;/a&gt;&lt;/sup&gt;&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;&amp;nbsp;Sistem operasi ini dirilis secara resmi pada tahun 2007, bersamaan dengan didirikannya&amp;nbsp;&lt;/span&gt;Open Handset Alliance&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;, konsorsium dari perusahaan-perusahaan&amp;nbsp;&lt;/span&gt;perangkat keras&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;, perangkat lunak, dan telekomunikasi yang bertujuan untuk memajukan&amp;nbsp;&lt;/span&gt;standar terbuka&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;&amp;nbsp;perangkat seluler.&lt;/span&gt;&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;&amp;nbsp;&lt;/span&gt;Ponsel Android pertama&lt;span style="color: #222222; font-family: sans-serif; font-size: 14px;"&gt;&amp;nbsp;mulai dijual pada bulan Oktober 2008&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;h3 style="background-color: white; border: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 19px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 1.4; margin: 0px 0px 12px; padding: 0px; text-align: center; vertical-align: baseline;"&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; 6. Komputer Generasi Kelima (Sekarang – Masa Depan) Kecerdasan Buatan&lt;/h3&gt;
&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcwCYT5meRi-3Wqf_P7rM1jlq7Kia5ebGZsdxpCdzM5WFnyUdUvoLspxNbLMNRsg8rAQzZ1dNlUGoKX48nCdGwXSJl1IlPjZ9ctGksSNPbpJ0IxcZ1LtMWj3-kV7xCXu-sZPM6EZiUKjo/s1600/SASA4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="359" data-original-width="601" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcwCYT5meRi-3Wqf_P7rM1jlq7Kia5ebGZsdxpCdzM5WFnyUdUvoLspxNbLMNRsg8rAQzZ1dNlUGoKX48nCdGwXSJl1IlPjZ9ctGksSNPbpJ0IxcZ1LtMWj3-kV7xCXu-sZPM6EZiUKjo/s400/SASA4.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;div style="background-color: white; border: 0px; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Komputer generasi kelima memiliki teknologi berdasarkan kecerdasan buatan, dan hal ini masih dalam tahap pengembangan. Tujuan dari pengembangan komputer generasi kelima ini adalah menghasilkan sebuah komputer yang mampu merespon dengan input bahasa yang kita ucapkan dan memiliki kemampuan untuk mempelajari lingkungan sekitar dan menyesuaikan dirinya sendiri.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Komputer kuantum, molekuler dan nanoteknologi menjadi kunci dari teknologi komputer generasi ini. Jadi boleh dikatakan bahwa komputer generasi ini akan memiliki kecerdasan layakanya kecerdasan pada manusia.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 20px; padding: 0px; vertical-align: baseline;"&gt;
Setelah membaca sejarah komputer diatas beserta perbandingannya dari tiap generasi tentu membuat anda kagum atas pencapaian yang telah terjadi, maksud saya coba saja anda bayangkan bila komputer saat ini masih sebesar komputer generasi pertama, bisa anda bayangkan seberapa besar bangunan yang dibutuhkan oleh sebuah kantor untuk menyimpan beberapa komputer? Sungguh hal yang tidak masuk diakal!&lt;/div&gt;
&lt;/div&gt;
&lt;div style="text-align: center;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwfCyBpa7S4FkS-cZrK58-OrKdPdoeX4WoEPgpDA-hYqQxEg4cqxAJs-b6D8rfyrKKUPDpKtBKZeBeitX0Nc6Wxa4l2h3r-saI7QXlRQfZE82SwKw1FkhRRtwhfU8vu_c7Pv4D5tQ55cY/s72-c/sasa.png" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>cara install game bajakan</title><link>https://elementertech.blogspot.com/2018/07/cara-install-game-bajakan.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Mon, 23 Jul 2018 15:34:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-3700764407571509844</guid><description>&lt;div dir="ltr" style="text-align: left;" trbidi="on"&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&lt;span style="font-size: small;"&gt;PANDUAN UMUM MENGINSTALL PC GAME&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&lt;b style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;span style="color: red;"&gt;SEBELUM MEMBELI PC GAME&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
Sebelum anda membeli PC Game, ada beberapa hal yang wajib diketahui, agar anda nantinya tidak sia-sia membeli PC game karena game tersebut ternyata tidak bisa dijalankan di komputer anda.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
1.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; PerhatikanKebutuhan minimum spesifikasi suatu game, sesuai dengan spesifikasi komputeryang anda punya. Faktor-faktor penting yang selalu diperhatikan antara lain :&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; OperatingSystem : Apakah kompatibel dengan Windows XP / Vista/ 7 / SP1-SP3 / 32 bit / 64 bit dll&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; Prosesor :Intel Pentium 4 / Dual Core / Core 2 Duo / Core 2 Quad / Core i3 / i5 /&amp;nbsp; i7 atau AMD Athlon / Phenom / 64 / X2 / X4 dll&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; RAM / Memory :1 GB up to 6 GB&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; VGA Card :Apakah berbasis ATI atau nVidia, Support Shader 2.0 atau 3.0&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; Controller :Apakah Support dengan Keyboard / Mouse / Joypad / Steering Wheel dll&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
Untuk lebih jelasnya, apakah Komputer anda bisa menjalankan game-game tertentu, silahkan masuk ke situs&amp;nbsp;&lt;a href="http://www.systemrequirementslab.com/referrer/srtest" rel="nofollow" style="border: 0px; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" target="_blank"&gt;http://www.systemrequirementslab.com/referrer/srtest&lt;/a&gt;&amp;nbsp;(Disini anda butuh koneksi internet yang nyambung dengan komputer yang akananda test), kemudian pilih game yang anda kehendaki, ikuti langkah-langkahdisana, dan klik CAN YOU RUN IT, lihat hasilnya, jika PASS berarti game tersebut bisa jalan dan jika FAIL berarti game tersebut tidak bisa jalan dikomputer anda.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
Atau anda bisamasuk ke&amp;nbsp;&lt;a href="http://www.vgrequirements.info/" rel="nofollow" style="border: 0px; color: black; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; text-decoration-line: none; vertical-align: baseline;" target="_blank"&gt;http://www.vgrequirements.info&lt;/a&gt;&amp;nbsp;masukkan kata kunci game yang diinginkan, lalu akan muncul Kebutuhan Minimum Spek Komputer yang diperlukan.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
2.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; Semua game yang dijual disini adalah Game Copian (baca: Bajakan). Walaupun begitu Game Kopianini bisa jalan di Komputer yang tidak beda dengan Aslinya (Original), Cuma adaperbedaan cara penginstallannya, pastikan selalu apakah game tersebut sudahdilengkapi dengan Software/file pendukung seperti Crack, Patch, SerialNumber/CD Key, Directx, Visual C++ 2005/2008 redistributable, Microsoft .NETFramework, Microsoft Game Live for Windows.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
3.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; Bagi penggunaLaptop dan Netbook tidak direkomendasikan untuk membeli Game PC (terutamaNetbook yang prosesornya berbasis Intel Atom) karena Laptop dan Netbook tidakdikhususkan untuk Main Game (kecuali memang ada laptop yang dikhususkan untukmaen game). Hal ini disebabkan game-game sekarang kebanyakan membutuhkanspesifikase hardware yang cukup berat terutama pada Prosesor dan VGA. Jaditidak semua game bisa jalan mulus di laptop. Selain itu kebanyakan Laptop yangdigunakan untuk main game umurnya lebih pendek.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&lt;span style="color: red;"&gt;&lt;b style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"&gt;CARA-CARA PENGINSTALLAN PC GAME&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
Berikut ini akan kami jelaskan beberapa cara menginstall game ke komputer anda berdasarkan isi dari CD/DVD Game yang anda beli ketika CD/DVD Game tersebutdimasukkan ke CD/DVD-ROM. Biasanya Windows akan otomatis mendeteksi CD/DVD Gametersebut kemudian akan memunculkan layar Pop-Up. (Catatan: Jika tidak ada layarautorun/pop-up yang muncul, anda bisa masuk ke Windows Explorer dan melihat isidari CD/DVD Game tersebut.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
PENTING: Sebelum menginstall suatu game, biasakan dulu melihat isi CD/DVD Game melaluiWindows Explorer, apakah ada Panduan Install yang disertakan di dalam CD/DVDGame tersebut, biasanya berupa File Notepad (Readme.txt), File .NFO (yang bisadi buka pake Notepad), File MS-Word atau File PDF (Acrobat Reader). Apabila adaPanduan Install Game alangkah baiknya anda ikuti langkah-langkah disana.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
1.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; PLAYABLE / PLAY ON CD / LANGSUNG PLAY DARICD&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
a.&amp;nbsp;&amp;nbsp; Game seperti ini biasanya tidak ada file “autorun.exe” / “setup.exe” / “install.exe” dan dapat langsung jalan dari CD, nggak perlu install atau setup&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
b.&amp;nbsp;&amp;nbsp; Caranya : masukkan CD ke dalamCD-ROM Drive, buka Windows Explorer arahkan ke Drive CD-ROM, cari File Executable/ Langsung Play.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
Namun disini kami lebih menyarankan kalau Semua isi File di dalam CD/DVD game tersebut di kopi dulu ke Harddisk (membuat Folder baru) dan dijalankan dari sana, karena selain memudahkan akses Game yang lebih cepat juga menghindari error ketika game tersebut meminta Save untuk Data Game.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
2.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; AUTORUN / DIRECT INSTALL&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
a.&amp;nbsp;&amp;nbsp; Pada saat CD Game di masukkan,di layar monitor akan tampak autorun / tampilan pertama dari Game.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
b.&amp;nbsp;&amp;nbsp; Jika Menu Autorun tidak tampil, buka Windows Explorer arahkan ke CD-ROM Drive jalankan File Autorun.exe atau Setup.exe di Drive CD-ROM&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
c.&amp;nbsp;&amp;nbsp; Pilih Install, ikutipetunjuknya. Jika di minta Serial Number atau CD Key. Masukkan Serial Numberyang biasanya game menyertakannya pada folder utama atau pada Folder Crack / Hodlum/ Skidrow / Razor1911 / Reloaded / Deviance (berupa file SN.txt, *.nfo,Keygen.exe dll) atau bisa juga pada Case/Cover CD tersebut.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
d.&amp;nbsp;&amp;nbsp; Jika Install sudah selesai,Game jangan dimainkan dulu. Periksa Isi Game di CD-ROM Drive, apakah ada folder Crack / Deviance/ Razor1911 / Hodlum / Skidrow. Jika ada, masuk ke Folder tersebut lalu kopi semua isinya (File/Folder) lalu Paste ke Lokasi Game yang sudah diinstal tadi biasanya ada di &amp;nbsp;“C:\Program Files\&amp;lt;Nama Developer Game&amp;gt; \ &amp;lt;Nama Game&amp;gt; “ (Contoh : Misalkan gameAssassin’s Creed 2 itu letaknya ada di c:\Program Files\Ubisoft\Assassins Creed2). Dan Jika Folder crack tidak ada, berarti game tersebut bisa langsungdimainkan.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
CATATAN : Pada saat CopyPaste File di Folder crack PASTIKAN file yang di Copy tersebut punya nama dan lokasinya sama, kemudian File yang lama akan di Replace/Overwrite dengan yang baru, lalu Tekan YES.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
e.&amp;nbsp;&amp;nbsp; Game siap dimainkan melaluiDesktop maupun Start Menu.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
3.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; MOUNT IMAGE / VIRTUAL DRIVE&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
a.&amp;nbsp;&amp;nbsp; Biasanya di dalam CD/DVD Gameter dapat satu file berukuran besar dengan ekstensi *.nrg, *.iso, *.cue, *.bin atau *.mdf/mds dan terdapat Program “Daemon Tools/Alcohol”&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
b.&amp;nbsp;&amp;nbsp; Install dulu Software Image bawaan dari CD/DVD Game (Daemon Tools/Alcohol). Jika disuruh Restart Komputer, Restart aja.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
c.&amp;nbsp;&amp;nbsp; Jalankan program Imagetersebut. Untuk Program Alcohol langsung arahkan ke Drive CD-ROM (Game), pilih file Image Game tersebut di atas, kemudian pilih “Mount Imageto Device”. Sedangkan untuk Daemon Tools akan ada Icon Bulat Merah aktif diTaskbar kanan bawah, klik kanan icon tersebut. Kemudian pilih “VirtualCD/DVD-Rom ---&amp;gt; Device -----&amp;gt; Mount Image” lalu masuk ke DVDGame dan buka File Image disana.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
d.&amp;nbsp;&amp;nbsp; Setelah itu akan muncul Menu Autorun Game yang siap Install, atau jika tidak muncul bisa dilihat di WindowsExplorer maka pada Komputer anda akan ada Virtual Drive Tambahan yang berisikan Game. Jalankan program Install dari sana. Ikuti langkah-langkah seperti pada point 2C sampai 2E di atas.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
e.&amp;nbsp;&amp;nbsp; Jika Game sudah dapat dimainkan dengan sempurna, jangan lupa “Unmount Image” yang ada di ProgramDaemon Tools/Alcohol.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
4.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; EXTRACT FILE (WINRAR / WINZIP)&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
a.&amp;nbsp;&amp;nbsp; Biasanya di dalam CD/DVD Gameterdapat beberapa file dengan ekstensi *.rar, *.r01, *.r02, dst….&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
b.&amp;nbsp;&amp;nbsp; Extract File Game tersebut menggunakan WinZIP atau WinRAR bawaan dari Windows, tentukan target direktori yang diinginkan (misalnya d:\Temp).&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
c.&amp;nbsp;&amp;nbsp; Perhatikan File hasil Extracttadi, jika isi file nya seperti pada kasus POINT 1, maka game bisa langsung dimainkan di Folder tersebut.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
d.&amp;nbsp;&amp;nbsp; Jika Isi File&amp;nbsp; Hasil Extract terdapat file “Install.exe”atau “Setup.exe” maka ikuti langkah-langkah seperti pada POINT 2 di atas.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
e.&amp;nbsp;&amp;nbsp; Jika File Hasil Ekstrak tersebut terdapat file IMAGE, maka ikuti langkah-langkah seperti pada POINT 3di atas.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
f.&amp;nbsp;&amp;nbsp;&amp;nbsp; Untuk POINT 4D dan 4E. JikaGame sudah bisa dimainkan, jangan lupa hapus File yang ada di d:\Temp (lokasiextract) karena tidak digunakan lagi, untuk menghemat ruang harddisk.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
5.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; CARA LAIN / SPESIAL&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
Untuk cara-cara penginstallan selain di atas, biasanya sudah disertakan Panduan Installnya. Ikuti langkah-langkah yang ada di Petunjuk Install tersebut.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
INFORMASI PENTING SEPUTAR INSTALLASI PC GAME&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
1.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; Ikuti selaluPetunjuk / Panduan Install (Step by Step jangan sampai ada yang terlewat) yangada di dalam CD/DVD Game.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #4a4a4a; font-family: Arial, sans-serif; font-size: 12px; line-height: 18px; padding: 0px; vertical-align: baseline;"&gt;
2.&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; Gunakan selalu Software Pendukung yang disertakan di dalam CD/DVD Game (seperti Daemon Tools/Alcohol / Directx / Visual C++ 2005/2008 Redistributable / Microsoft .NETFramework / Microsoft Game Live For Windows dan lain-lain).&lt;/div&gt;
&lt;/div&gt;
&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>CARA MEMASANG IDM DI WIN 64BIT</title><link>https://elementertech.blogspot.com/2018/07/cara-memasang-idm-di-win-64bit.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Sat, 21 Jul 2018 19:20:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-839064761200467494</guid><description>&lt;div dir="ltr" style="text-align: left;" trbidi="on"&gt;
hi guys kali ini kita akan membantu anda cara memasang &lt;b&gt;IDM di CROME&amp;nbsp;&lt;/b&gt;&lt;br /&gt;
&lt;b&gt;&lt;br /&gt;&lt;/b&gt;
bagi yang belum memiliki IDM nya silahkan Download&amp;nbsp;&lt;a href="https://www27.zippyshare.com/v/SiSms0x1/file.html" target="_blank"&gt;di sini&lt;/a&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;h4 style="background-color: white; border: 0px; box-sizing: border-box; color: #232323; font-family: &amp;quot;Roboto Condensed&amp;quot;; font-size: 2.5rem; line-height: 1.4; margin: 0px 0px 10px; outline: 0px; padding: 0px; vertical-align: baseline; word-wrap: break-word;"&gt;
Cara Memasang Ekstensi IDM di Google Chrome&lt;/h4&gt;
&lt;ol style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 28px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 30px 30px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
&lt;li style="border: 0px; box-sizing: border-box; line-height: 28px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;Buka aplikasi Google Chrome yang digunakan.&lt;/li&gt;
&lt;li style="border: 0px; box-sizing: border-box; line-height: 28px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;Lalu ketikan&amp;nbsp;&lt;span style="border: 0px; box-sizing: border-box; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;&lt;em style="border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;chrome://extensions&lt;/em&gt;&lt;/span&gt;&amp;nbsp;di kolom URL untuk membuka pengaturan ekstensi di Google Chrome diakhiri dengan menekan tombol Enter.&lt;/li&gt;
&lt;li style="border: 0px; box-sizing: border-box; line-height: 28px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;Setelah terbuka, pastikan terlebih dulu apakah ekstensi IDM untuk Google Chrome sudah terpasang atau belum, jika sudah copot dulu pemasangannya dengan menekan&amp;nbsp;&lt;span style="border: 0px; box-sizing: border-box; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;ikon tong sampah&lt;/span&gt;&amp;nbsp;di sebelah kanan ekstensi tersebut.&lt;/li&gt;
&lt;li style="border: 0px; box-sizing: border-box; line-height: 28px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;Jika sudah, buka folder tempat instalasi IDM, biasanya terletak di&lt;em style="border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;&amp;nbsp;C:\Program Files (x86)\Internet Download Manager.&lt;/em&gt;&lt;/li&gt;
&lt;li style="border: 0px; box-sizing: border-box; line-height: 28px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;Cari file dengan nama&amp;nbsp;&lt;span style="border: 0px; box-sizing: border-box; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;IDMGCExt.crx&lt;/span&gt;, kemudian seret atau drag file tersebut ke laman pengaturan ekstensi di Google Chrome.&lt;/li&gt;
&lt;li style="border: 0px; box-sizing: border-box; line-height: 28px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;Jika muncul notifikasi berupa konfirmasi, klik&amp;nbsp;&lt;span style="border: 0px; box-sizing: border-box; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;tombol Add Extension.&lt;/span&gt;&lt;/li&gt;
&lt;li style="border: 0px; box-sizing: border-box; line-height: 28px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;Tunggu prosesnya, jika berhasil akan muncul ekstensi IDM di pengaturan ekstensi di Google Chrome.&lt;/li&gt;
&lt;li style="border: 0px; box-sizing: border-box; line-height: 28px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;Jangan lupa mencentang&amp;nbsp;&lt;span style="border: 0px; box-sizing: border-box; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;opsi enable&lt;/span&gt;&amp;nbsp;agar ekstensi tersebut aktif&lt;/li&gt;
&lt;/ol&gt;
&lt;div&gt;
&lt;span style="color: #444444; font-family: Arial, Helvetica, sans-serif;"&gt;&lt;span style="font-size: 18px;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 28px; margin-bottom: 30px; outline: 0px; padding: 0px; vertical-align: baseline; word-wrap: break-word;"&gt;
Cara ini juga dapat digunakan untuk menyelesaikan permasalahan, seperti tombol download IDM tidak muncul atau permasalahan download otomatis yang kerap tiba-tiba muncul.&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; box-sizing: border-box; color: #444444; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 28px; margin-bottom: 30px; outline: 0px; padding: 0px; vertical-align: baseline; word-wrap: break-word;"&gt;
Namun jika belum menyelesaikan permasalahan tersebut, ada baiknya pengguna memperbarui versi IDM yang digunakan tentunya dengan cara resmi agar semua dapat berjalan dengan baik.&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>CARA MEMATIKAN ATAU ME-NONAKTIFKAN WINDOWS DEFENDER DI WINDOWS 8.1 </title><link>https://elementertech.blogspot.com/2018/07/cara-mematikan-atau-me-nonaktifkan.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Wed, 18 Jul 2018 21:03:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-8364949351135906913</guid><description>&lt;div dir="ltr" style="text-align: left;" trbidi="on"&gt;
Hi Guys selamat siang Dengan Saya Blogger Cinta Technlogy, '&lt;br /&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
kali ini kita akan membahas tentang cara men nonaktifkan windows defender di Win 8.1&amp;nbsp;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
saya yakin pasti kalian ini sangat terganggu dengan ada nya windows defender ini&amp;nbsp;&lt;/div&gt;
&lt;div&gt;
soalnya setiap kali kita ingin menginstall game atasu sofware bajakan pasti kena head dan salah satu data software yang di curigai oleh win defender ini akan mati atau hilang ya kan....&amp;nbsp;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
maka dari itu solosi nya adalah dengan meng non atifkan win defender di win 8.1 kalian&amp;nbsp;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
cara nya mudah kok tinggal ikuti sajah langkah langkah saya ini OkY....&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
1. silahkan kalian search  windows defender di menu windows kalian&lt;/div&gt;
&lt;div&gt;
setelah terlihat di aplkasi windows defender, silahkan kalian klick untuk memanggil windows defendernya setelah terbukan silahkan klik &lt;b&gt;Setting &lt;/b&gt;klik item administrator&amp;nbsp;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTha1KpwDCtXv7vs0mEINGITn9zNK49gvwo-oLYR54QJHMyiWblD8SjyLQfaFHMb6zWDM8yAM9TPqXUVzZQmAO7vChZU7r47srIuYcjrEEoibM_c0VKu4cV7-5PjzlDgtKWZ75jbdQE1A/s1600/1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="219" data-original-width="456" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTha1KpwDCtXv7vs0mEINGITn9zNK49gvwo-oLYR54QJHMyiWblD8SjyLQfaFHMb6zWDM8yAM9TPqXUVzZQmAO7vChZU7r47srIuYcjrEEoibM_c0VKu4cV7-5PjzlDgtKWZ75jbdQE1A/s400/1.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
2. kemudian hilangkan tanda centang opsi &lt;b&gt;trun on this app&lt;/b&gt;&amp;nbsp;klick &lt;b&gt;save changes &lt;/b&gt;selesai windows defender telah kalian matikan.&amp;nbsp;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW5PGwPJjAQ6YBmu_f859M-p5AJdk8MWmVaUKfDBI9jsHszbAtYZDbc6DGc58GL71eO1ro5b4d2Ir3pJ76LSSgH3VkJjZXzmf0AZCuNrvXQX36FTm9V85mEtVo5IXCAHQqF4aNB4q-ay0/s1600/2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"&gt;&lt;img border="0" data-original-height="200" data-original-width="405" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW5PGwPJjAQ6YBmu_f859M-p5AJdk8MWmVaUKfDBI9jsHszbAtYZDbc6DGc58GL71eO1ro5b4d2Ir3pJ76LSSgH3VkJjZXzmf0AZCuNrvXQX36FTm9V85mEtVo5IXCAHQqF4aNB4q-ay0/s400/2.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
ya selesai sudah kalian mematikan windows defender nya baiklah sekian dulu tentang ilmunya sekian dari saya pamit undur diri bye bye...&lt;/div&gt;
&lt;/div&gt;
&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTha1KpwDCtXv7vs0mEINGITn9zNK49gvwo-oLYR54QJHMyiWblD8SjyLQfaFHMb6zWDM8yAM9TPqXUVzZQmAO7vChZU7r47srIuYcjrEEoibM_c0VKu4cV7-5PjzlDgtKWZ75jbdQE1A/s72-c/1.png" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>Peneumatic </title><link>https://elementertech.blogspot.com/2017/05/peneumatic.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Tue, 9 May 2017 16:35:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-3993782905954623243</guid><description>Hai Kawan pada hari ini admin akan mengulas tentang apa itu peneumatic , bagaimana cara kerja nya, dan fungsi nya itu untuk apa.....&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
oky dari pada berteletele lebih baik kita bahas ajah langsung ya...&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
Ok kawan jadi peneumatic adalah sebuah alat yang bekerja dengan menggunakan tekanan udara sama seperti hidrolic namun hidrolic menggunakan oli teapi peneumatic menggunakan angin...&lt;/div&gt;
&lt;div&gt;
peneu matic sendiri terdiri dari 3 macam fungsi &amp;nbsp;nya yaitu :&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
1.Peneumatic Murni&amp;nbsp;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDX0O3WPYWJQ1raGiOsdP3aGmq8cE5yJsr6cHeRZe_A5KuKQXPQ2wSc3Txd-0thIte5B5Bt2tc0HoB7l51FcLAGOW-S_R8J7Ezted5MbGO1DnoPh4LZQFwIsueWhwY-UiEeFgbuuudAnI/s1600/140820091376.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDX0O3WPYWJQ1raGiOsdP3aGmq8cE5yJsr6cHeRZe_A5KuKQXPQ2wSc3Txd-0thIte5B5Bt2tc0HoB7l51FcLAGOW-S_R8J7Ezted5MbGO1DnoPh4LZQFwIsueWhwY-UiEeFgbuuudAnI/s320/140820091376.jpg" width="320" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
peneumatic murni ini di cara kerja nya hanya menggunakan angin sajah tampa menggunakan rangkaian electronic .&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
2. Electro Peneumatic&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3H-xJB3TmARirorHCVie0zmgB43H56IzlduF4io633vFQdJ2Gx53hgYM_T6uFsNZiIzLKpe0tgNg5WPeljl_lv-c_y1_g9aKooqCtA-V9DIeVHnBXXPO7n3dNJxyVJj1THNvu9PA0Nmg/s1600/140820091376.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3H-xJB3TmARirorHCVie0zmgB43H56IzlduF4io633vFQdJ2Gx53hgYM_T6uFsNZiIzLKpe0tgNg5WPeljl_lv-c_y1_g9aKooqCtA-V9DIeVHnBXXPO7n3dNJxyVJj1THNvu9PA0Nmg/s320/140820091376.jpg" width="320" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;
Electro peneumatic yaitu peneumatic yang di atur oleh komponen komponen dari peneumatic electro semacam valve , pushbottem , ditten dll&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
3. Peneumatic PLC&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRuYUGZRbEZuyA3-cgfxH0RqWYj7No5BH2srrYtBYfPY0IqBJFNysmBZw9acT_ByTCgNFRsOuJ2guuB95-P7B4dM_adVIL_9yFG81SQPwJpeGK8qxVn5-IBA3FODhw3q9JskKDWwO2PxI/s1600/140820091376.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRuYUGZRbEZuyA3-cgfxH0RqWYj7No5BH2srrYtBYfPY0IqBJFNysmBZw9acT_ByTCgNFRsOuJ2guuB95-P7B4dM_adVIL_9yFG81SQPwJpeGK8qxVn5-IBA3FODhw3q9JskKDWwO2PxI/s320/140820091376.jpg" width="320" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;
Peneu matic PLC yaitu Peneu matic yang cara kerja nya di atur oleh PLC dan hanya Menggunakan valve untuk masukan Kelistrikan nya.&lt;/div&gt;
&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDX0O3WPYWJQ1raGiOsdP3aGmq8cE5yJsr6cHeRZe_A5KuKQXPQ2wSc3Txd-0thIte5B5Bt2tc0HoB7l51FcLAGOW-S_R8J7Ezted5MbGO1DnoPh4LZQFwIsueWhwY-UiEeFgbuuudAnI/s72-c/140820091376.jpg" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>Jenis - Jenis PLC</title><link>https://elementertech.blogspot.com/2017/02/jenis-jenis-plc.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Mon, 6 Feb 2017 01:19:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-1386597905167560352</guid><description>&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 0cm 0cm 4.5pt; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;Jenis-Jenis PLC dan Software Programming PLC&amp;nbsp;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;Allen Bradley adalah bagian dari Rockwell Automation Integrated Architecture yang memproduksi kontroler yang cocok untuk drive, untuk gerakan, dan untuk proses pengontrolan. Aplikasi apapun yang ingin anda buat, jika Anda menginginkan nilai dan kinerja yang tinggi dalam sistem Programmable Logic Conroller&amp;nbsp;&lt;/span&gt;(&lt;span style="font-size: x-small;"&gt;PLC&lt;/span&gt;)&amp;nbsp;&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;, maka&amp;nbsp;&lt;/span&gt;&lt;span style="text-decoration: none;"&gt;&lt;span style="font-size: x-small;"&gt;PLC&lt;/span&gt;&lt;/span&gt;&amp;nbsp;&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt; text-decoration: none;"&gt;&amp;nbsp;Allen Bradley adalah salah satu jawabannya.&lt;br /&gt;Allen Bradley-Rockwell Automation Integration memiliki produk-produk&amp;nbsp;&lt;/span&gt;&lt;span style="font-size: x-small; text-decoration: none;"&gt;PLC&lt;/span&gt;&amp;nbsp;&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt; text-decoration: none;"&gt;yang menawarkan kemampuan yang maksimum, mudah dalam penggunaan, kapasitas pemrograman ulang, fleksibilitas dalam sistem komunikasi dan cepat operasionalnya, sehingga menghemat waktu kerja dan biaya perusahaan dalam proses setup secara keseluruhan.&lt;br /&gt;Ada 5 jenis programmable logic controller keluaran dari Allen Bradley. Masing-masing tipe PLC ini memiliki performa dan fungsi yang berbeda. Itu memudahkan Anda untuk memilih tipe PLC mana yang paling cocok spesifikasinya untuk diimplementasikan sesuai kebutuhan Anda.&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;Tipe-tipe PLC Allen Bradley adalah sebagai berikut:&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;strong style="color: #141823; font-family: Arial, sans-serif; font-size: 11pt;"&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;strong style="color: #141823; font-family: Arial, sans-serif; font-size: 11pt;"&gt;1. Pico Controllers&lt;/strong&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;strong style="color: #141823; font-family: Arial, sans-serif; font-size: 11pt;"&gt;&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiMzSKEkjypUJyN8Hvv4G-CypRC_YK2EagxTMbo7Ye0lgLrvPoWnO31FwWGy8WYqtImbZW0UOGrwDhJFga5z9OWbNs_V61JkVwfSptLbvTPCSfQ6XS6dhEpKUzARgAYARHYMqsPWOQHBQ/s1600/plc+c.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"&gt;&lt;img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiMzSKEkjypUJyN8Hvv4G-CypRC_YK2EagxTMbo7Ye0lgLrvPoWnO31FwWGy8WYqtImbZW0UOGrwDhJFga5z9OWbNs_V61JkVwfSptLbvTPCSfQ6XS6dhEpKUzARgAYARHYMqsPWOQHBQ/s1600/plc+c.png" /&gt;&lt;/a&gt;&lt;/strong&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;PLC Pico Controller ini adalah tipe&amp;nbsp;&lt;/span&gt;&lt;span style="font-size: x-small; text-decoration: none;"&gt;PLC&lt;/span&gt;&amp;nbsp;&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt; text-decoration: none;"&gt;&amp;nbsp;yang sederhana, fleksibel dan kecil, perform logika, menghitung, sistem operasinya time dan clock.&lt;br /&gt;Pico Conroller dioperasikan dan diprogram menggunakan software PicoSoft programming yang mampu membuat, menyimpan, mendokumentasikan dan mentransfer diagram rangkaian Pico™ ke Pico Controller. PicoSoft Pro programming menawarkan fungsionalitas tambahan dan kemudahan pemrograman untuk pengendali PicoGFX ™.&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;2. MicroLogix PLCs&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;strong&gt;&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-eYccQJapououFNsw-nmWy8wjPWODHD72K7GCoalDcFiuZ9KtWNA6A7Hvvd5C3LluR_KaEeCEQDuzV7yboZe5N6cfD5V6fwPJaVl58hOglcN9tJPbYwUfAnWK2OpEj5PpoN4LyKViXHo/s1600/sdsa.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-eYccQJapououFNsw-nmWy8wjPWODHD72K7GCoalDcFiuZ9KtWNA6A7Hvvd5C3LluR_KaEeCEQDuzV7yboZe5N6cfD5V6fwPJaVl58hOglcN9tJPbYwUfAnWK2OpEj5PpoN4LyKViXHo/s320/sdsa.png" width="320" /&gt;&lt;/a&gt;&lt;/strong&gt;&lt;/div&gt;
&lt;br /&gt;
Micrologix PLC adalah solusi efektif untuk mikro kontroller yang ingin dikembangkan fungsinya sesuai dengan kebutuhan.&lt;br /&gt;
Untuk mengkonfigurasi programmable logic controller MicroLogix bisa menggunakan perangkat lunak dari Rockwell Software yaitu:&lt;br /&gt;
• RSLogix 500 programming software&lt;span class="apple-converted-space"&gt;&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
• RSLogix Micro programming software&lt;br /&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;3. SLC 500s&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;strong&gt;&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh11zNLCQMrWuQDAGLZHSpygNzX7ju3upx3tnT7Uklwa7ZrujdmH54ltxmwv5RDRXElwJrokkK4-FrJxZL54HNwJsE9es1yVBtR9FzK_qJk3uJcApOl91NFlftvTa1V7S5pCT09bEbU30U/s1600/plc+ca.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh11zNLCQMrWuQDAGLZHSpygNzX7ju3upx3tnT7Uklwa7ZrujdmH54ltxmwv5RDRXElwJrokkK4-FrJxZL54HNwJsE9es1yVBtR9FzK_qJk3uJcApOl91NFlftvTa1V7S5pCT09bEbU30U/s320/plc+ca.png" style="cursor: move;" width="320" /&gt;&lt;/a&gt;&lt;/strong&gt;&lt;/div&gt;
&lt;br /&gt;
SLC 500s adalah PLC kecil yang merupakan PLC modular berbasis chassis. PLC ini sering digunakan untuk I / O dan fungsi power supply.&lt;span class="apple-converted-space"&gt;&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
Software yang digunakan untuk mengkonfigurasi SLC 500s adalah RSLogix 500 yang merupakan software PLC programming yang menawarkan tingkat produktivitas yang tinggi dan interface pengguna terkemuka. RSLogix 500 selain mampu mensupport Allen-Bradley SLC 500 juga mendukung keluarga prosesor Micrologix.&lt;br /&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;4. PLC-5&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm; padding: 0px;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrtnGxU3eYL6itUt2U8Gd-VkTj5koYT_5qJId7tSOikW86I2Evk8Sd-Bapjy2pG177UHPweDgP0m27otto52FHTQj4W_k1y145D3Zruwlu6NnrIEJfH1GCoipnPbMgWPmOU7kvTpRFlLE/s1600/asddasd.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrtnGxU3eYL6itUt2U8Gd-VkTj5koYT_5qJId7tSOikW86I2Evk8Sd-Bapjy2pG177UHPweDgP0m27otto52FHTQj4W_k1y145D3Zruwlu6NnrIEJfH1GCoipnPbMgWPmOU7kvTpRFlLE/s320/asddasd.png" width="320" /&gt;&lt;/a&gt;&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;PLC-5 adalah PLC yang paling populer dari produk Allen Bradley PLC dan dapat ditemukan di seluruh dunia, memberikan fleksibilitas dalam jaringan, I/O dan pemrograman dan cocok untuk berbagai macam aplikasi.&lt;br /&gt;Software yang digunakan untuk mengkonfigurasi PLC-5 adalah RSLogix™ 5. Paket pemrograman RSLogix 5 kompatibel dengan program yang dibuat dengan paket program berbasis DOS Rockwell Software untuk PLC-5 prosesor, program pemeliharaan seluruh platform perangkat keras yang mudah digunakan.&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm 0.0001pt; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm 0.0001pt; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm 0.0001pt; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm 0.0001pt; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm 0.0001pt; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;5. 1758-RTU&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvM-iJIL1WeSZlPJDVWHk78dEPMDMMNsXOXq0eRIi9pmim7bbrUxTmgkDQIrS5AKYtCcvMMecwZUaMHqER0ZL4nJRURSpa-6wp84PO5WVaBTCriDXNZhP5wT3jHXVymRABdUwu8-tqDKY/s1600/xzxzxz.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvM-iJIL1WeSZlPJDVWHk78dEPMDMMNsXOXq0eRIi9pmim7bbrUxTmgkDQIrS5AKYtCcvMMecwZUaMHqER0ZL4nJRURSpa-6wp84PO5WVaBTCriDXNZhP5wT3jHXVymRABdUwu8-tqDKY/s320/xzxzxz.png" width="320" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm 0.0001pt; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Verdana, Arial, Helvetica; font-size: 12px; line-height: 14.5pt; margin: 4.5pt 0cm 0.0001pt; padding: 0px;"&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;1758-RTU adalah PLC yang didesain untuk lingkungan yang keras sebagai Remote Terminal Unit (RTU). Untuk melakukan pemrograman 1758-RTU menggunakan software DataSite Workbench. Perangkat lunak ini memfasilitasi tugas otomatisasi seluruh sistem, termasuk desain, commissioning, operasi dan maintenance.&lt;/span&gt;&lt;br /&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;LIhat Juga :&lt;/span&gt;&lt;br /&gt;
&lt;span style="color: #141823; font-family: &amp;quot;arial&amp;quot; , sans-serif; font-size: 11pt;"&gt;&lt;a href="https://elementertech.blogspot.co.id/2017/02/pengertian-plc.html" target="_blank"&gt;Pengertian PLC&lt;/a&gt;&lt;/span&gt;&lt;br /&gt;
&lt;a href="https://elementertech.blogspot.co.id/2017/02/sejarah-dan-perkembangan-plc.html" target="_blank"&gt;Sejarah dan Perkembangan PLC&lt;/a&gt;&lt;/div&gt;
&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiMzSKEkjypUJyN8Hvv4G-CypRC_YK2EagxTMbo7Ye0lgLrvPoWnO31FwWGy8WYqtImbZW0UOGrwDhJFga5z9OWbNs_V61JkVwfSptLbvTPCSfQ6XS6dhEpKUzARgAYARHYMqsPWOQHBQ/s72-c/plc+c.png" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>Pengertian PLC</title><link>https://elementertech.blogspot.com/2017/02/pengertian-plc.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Mon, 6 Feb 2017 00:22:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-1884337274355428750</guid><description>&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px;"&gt;
Pengertian PLC (PROGRAMMABLE LOGIC CONTROLLER)&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
Programmable Logic Controllers (PLC) adalah komputer elektronik yang mudah digunakan (user friendly) yang memiliki fungsi kendali untuk berbagai tipe dan tingkat kesulitan yang beraneka ragam .&lt;br /&gt;Definisi Programmable Logic Controller menurut Capiel (1982) adalah :&lt;br /&gt;sistem elektronik yang beroperasi secara dijital dan didisain untuk pemakaian di lingkungan industri, dimana sistem ini menggunakan memori yang dapat diprogram untuk penyimpanan secara internal instruksi-instruksi yang mengimplementasikan fungsi-fungsi spesifik seperti logika, urutan, perwaktuan, pencacahan dan operasi aritmatik untuk mengontrol mesin atau proses melalui modul-modul I/O dijital maupun analog .&lt;br /&gt;Berdasarkan namanya konsep PLC adalah sebagai berikut :&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
1. Programmable&lt;br /&gt;menunjukkan kemampuan dalam hal memori untuk menyimpan program yang telah dibuat yang dengan mudah diubah-ubah fungsi atau kegunaannya.&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
2. Logic&lt;br /&gt;menunjukkan kemampuan dalam memproses input secara aritmatik dan logic (ALU), yakni melakukan operasi membandingkan, menjumlahkan, mengalikan, membagi, mengurangi, negasi, AND, OR, dan lain sebagainya.&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
3. Controller&lt;br /&gt;menunjukkan kemampuan dalam mengontrol dan mengatur proses sehingga menghasilkan output yang diinginkan.&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzpJBmoOIgdSxRtbQSuMjMYBwBL1yCysWoqk7h-U1n13hqH1ZnUFoluCfKfJg3zzmo7ENAhUFTaOrqsXCwL_-8n0f-TdTpJBniFd58hhuE97uvZ3lWfNff_q6eJfwV8Ng_23gG0Xj04cI/s1600/omron.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzpJBmoOIgdSxRtbQSuMjMYBwBL1yCysWoqk7h-U1n13hqH1ZnUFoluCfKfJg3zzmo7ENAhUFTaOrqsXCwL_-8n0f-TdTpJBniFd58hhuE97uvZ3lWfNff_q6eJfwV8Ng_23gG0Xj04cI/s400/omron.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
PLC ini dirancang untuk menggantikan suatu rangkaian relay sequensial dalam suatu sistem kontrol. Selain dapat diprogram, alat ini juga dapat dikendalikan, dan dioperasikan oleh orang yang tidak memiliki pengetahuan di bidang pengoperasian komputer secara khusus. PLC ini memiliki bahasa pemrograman yang mudah dipahami dan dapat dioperasikan bila program yang telah dibuat dengan menggunakan software yang sesuai dengan jenis PLC yang digunakan sudah dimasukkan.&lt;br /&gt;Alat ini bekerja berdasarkan input-input yang ada dan tergantung dari keadaan pada suatu waktu tertentu yang kemudian akan meng-ON atau meng-OFF kan output-output. 1 menunjukkan bahwa keadaan yang diharapkan terpenuhi sedangkan 0 berarti keadaan yang diharapkan tidak terpenuhi. PLC juga dapat diterapkan untuk pengendalian sistem yang memiliki output banyak.&lt;br /&gt;Fungsi dan kegunaan PLC sangat luas. Dalam prakteknya PLC dapat dibagi secara umum dan secara khusus.&lt;br /&gt;Secara umum fungsi PLC adalah sebagai berikut:&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
1. Sekuensial Control&lt;br /&gt;PLC memproses input sinyal biner menjadi output yang digunakan untuk keperluan pemrosesan teknik secara berurutan (sekuensial), disini PLC menjaga agar semua step atau langkah dalam proses sekuensial berlangsung dalam urutan yang tepat.&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
2. Monitoring Plant&lt;br /&gt;PLC secara terus menerus memonitor status suatu sistem (misalnya temperatur, tekanan, tingkat ketinggian) dan mengambil tindakan yang diperlukan sehubungan dengan proses yang dikontrol (misalnya nilai sudah melebihi batas) atau menampilkan pesan tersebut pada operator.&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
Sedangkan fungsi PLC secara khusus adalah dapat memberikan input ke CNC (Computerized Numerical Control). Beberapa PLC dapat memberikan input ke CNC untuk kepentingan pemrosesan lebih lanjut. CNC bila dibandingkan dengan PLC mempunyai ketelitian yang lebih tinggi dan lebih mahal harganya. CNC biasanya dipakai untuk proses finishing, membentuk benda kerja, moulding dan sebagainya.&lt;br /&gt;Prinsip kerja sebuah PLC adalah menerima sinyal masukan proses yang dikendalikan lalu melakukan serangkaian instruksi logika terhadap sinyal masukan tersebut sesuai dengan program yang tersimpan dalam memori lalu menghasilkan sinyal keluaran untuk mengendalikan aktuator atau peralatan lainnya.&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
Pemanfaatan Programmable Logic Controller (PLC) dalam Dunia Industri&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
Perkembangan industri dewasa ini, khususnya dunia industri di negara kita, berjalan amat pesat seiring dengan meluasnya jenis produk-produk industri, mulai dari apa yang digolongkan sebagai industri hulu sampai dengan industri hilir. Kompleksitas pengolahan bahan mentah menjadi bahan baku, yang berproses baik secara fisika maupun secara kimia, telah memacu manusia untuk selalu meningkatkan dan memperbaiki unjuk kerja sistem yang mendukung proses tersebut, agar semakin produktif dan efisien. Salah satu yang menjadi perhatian utama dalam hal ini ialah penggunaan sistem pengendalian proses industri (sistem kontrol industri).&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
Dalam era industri modern, sistem kontrol proses industri biasanya merujuk pada otomatisasi sistem kontrol yang digunakan. Sistem kontrol industri dimana peranan manusia masih amat dominan (misalnya dalam merespon besaran-besaran proses yang diukur oleh sistem kontrol tersebut dengan serangkaian langkah berupa pengaturan panel dan saklar-saklar yang relevan) telah banyak digeser dan digantikan oleh sistem kontrol otomatis.&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
Sebabnya jelas mengacu pada faktor-faktor yang mempengaruhi efisiensi dan produktivitas industri itu sendiri, misalnya faktor human error dan tingkat keunggulan yang ditawarkan sistem kontrol tersebut. Salah satu sistem kontrol yang amat luas pemakaiannya ialah Programmable Logic Controller (PLC). Penerapannya meliputi berbagai jenis industri mulai dari industri rokok, otomotif, petrokimia, kertas, bahkan sampai pada industri tambang, misalnya pada pengendalian turbin gas dan unit industri lanjutan hasil pertambangan. Kemudahan transisi dari sistem kontrol sebelumnya (misalnya dari sistem &lt;/div&gt;
kontrol berbasis relay mekanis) dan kemudahan trouble-shooting dalam konfigurasi sistem merupakan dua faktor utama yang mendorong populernya PLC ini.&lt;br /&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
Apakah Sebenarnya PLC itu? NEMA (The National electrical Manufacturers Association) mendefinisikan PLC sebagai piranti elektronika digital yang menggunakan memori yang bisa diprogram sebagai penyimpan internal dari sekumpulan instruksi dengan mengimplementasikan fungsi-fungsi tertentu, seperti logika, sekuensial, pewaktuan, perhitungan, dan aritmetika, untuk mengendalikan berbagai jenis mesin ataupun proses melalui modul I/O digital dan atau analog.&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
PLC merupakan sistem yang dapat memanipulasi, mengeksekusi, dan atau memonitor keadaan proses pada laju yang amat cepat, dengan dasar data yang bisa diprogram dalam sistem berbasis mikroprosesor integral. PLC menerima masukan dan menghasilkan keluaran sinyal-sinyal listrik untuk mengendalikan suatu sistem. Dengan demikian besaran-besaran fisika dan kimia yang dikendalikan, sebelum diolah oleh PLC, akan diubah menjadi sinyal listrik baik analog maupun digital,yang merupakan data dasarnya.. Karakter proses yang dikendalikan oleh PLC sendiri merupakan proses yang sifatnya bertahap, yakni proses itu berjalan urut untuk mencapai kondisi akhir yang diharapkan. Dengan kata lain proses itu terdiri beberapa subproses, dimana subproses tertentu akan berjalan sesudah subproses sebelumnya terjadi. Istilah umum yang digunakan untuk proses yang berwatak demikian ialah proses sekuensial (sequential process). Sebagai perbandingan, sistem kontrol yang populer selain PLC, misalnya Distributed Control System (DCS), mampu menangani proses-proses yang bersifat sekuensial dan juga kontinyu (continuous process) serta mencakup loop kendali yang relatif banyak.&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background-color: white; color: #1d2129; font-family: Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 6px; margin-top: 6px;"&gt;
BACA JUGA TENTANG PLC :&amp;nbsp;&lt;a href="https://elementertech.blogspot.co.id/2017/02/sejarah-dan-perkembangan-plc.html" target="_blank"&gt;Sejarah dan Perkembangan PLC&lt;/a&gt;&lt;/div&gt;
&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzpJBmoOIgdSxRtbQSuMjMYBwBL1yCysWoqk7h-U1n13hqH1ZnUFoluCfKfJg3zzmo7ENAhUFTaOrqsXCwL_-8n0f-TdTpJBniFd58hhuE97uvZ3lWfNff_q6eJfwV8Ng_23gG0Xj04cI/s72-c/omron.png" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>SEJARAH ARDUINO</title><link>https://elementertech.blogspot.com/2017/02/sejarah-arduino.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Sat, 4 Feb 2017 21:18:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-1291957227767468505</guid><description>&lt;span style="background-color: white; color: #444444; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 14px;"&gt;Sejarah Arduino&amp;nbsp;&lt;/span&gt;&lt;br /&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQBxa7A3iDiX1Vqlz-xq2NXyI4yZb-_ycK1oaF3vQeJG4vv9bJkVtN2bJHGKdqM2f3Zi_L5sgAg5uxopkV5Euc7tTVkPgxxF4PRYh-Aa4iuPfdzonn3J-tzccmqK0UMqTyCfoDlw40Fdc/s1600/duino.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="375" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQBxa7A3iDiX1Vqlz-xq2NXyI4yZb-_ycK1oaF3vQeJG4vv9bJkVtN2bJHGKdqM2f3Zi_L5sgAg5uxopkV5Euc7tTVkPgxxF4PRYh-Aa4iuPfdzonn3J-tzccmqK0UMqTyCfoDlw40Fdc/s400/duino.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div style="background-color: white; border: 0px; color: #444444; font-family: &amp;quot;Open Sans&amp;quot;; font-size: 14px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"&gt;
Pembuatan Arduino dimulai pada tahun 2005, dimana sebuah situs perusahaan komputer Olivetti di Ivrea, Italia membuat perangkat untuk mengendalikan proyek desain interaksi siswa supaya lebih murah dibandingkan sistem yang ada pada saat itu. Dilanjutkan pada bulan Mei 2011, dimana sudah lebih dari 300.000 unit Arduino&amp;nbsp; terjual.&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;Pendiri dari Arduino itu sendiri adalah Massimo Banzi dan David Cuartielles. Awalnya mereka memberi nama proyek itu dengan sebutan Arduin dari Ivrea tetapi seturut dengan perkembangan zaman, maka nama proyek itu diubah menjadi Arduino yang berarti “teman yang kuat” atau dalam versi bahasa Inggrisnya dikenal dengan sebutan “Hardwin”.&lt;br style="margin: 0px; padding: 0px;" /&gt;&lt;br style="margin: 0px; padding: 0px;" /&gt;Awalnya Massimo Banzi membangun disekitar proyek Pengkabelan dari Hernando Barragan. Pengkabelan ini adalah proyek tesis Hernando di Desain Interaksi Institute Ivrea. Hal tersebut dimaksudkan untuk menjadi versi elektronik pengolahan yang digunakan di lingkungan pemrograman dan mengambil pola sintaks Processing tetapi dengan berkembangnya teknologi maka Arduino menjadi sangat popular dikalangan mahasiswa dan pelajar saat ini. Mereka mengembangkan Arduino dengan bootloader dan software yang user friendly sehingga menghasilkan sebuah board mikrokontroler yang bersifat open source yang bisa dipelajari dan dikembangkan oleh mahasiswa, pelajar, professional, pemula, dan penggemar elektronika maupun robotik di seluruh dunia.&lt;/div&gt;
&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQBxa7A3iDiX1Vqlz-xq2NXyI4yZb-_ycK1oaF3vQeJG4vv9bJkVtN2bJHGKdqM2f3Zi_L5sgAg5uxopkV5Euc7tTVkPgxxF4PRYh-Aa4iuPfdzonn3J-tzccmqK0UMqTyCfoDlw40Fdc/s72-c/duino.png" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>SEJARAH MESIN CNC</title><link>https://elementertech.blogspot.com/2017/02/sejarah-mesin-cnc.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Sat, 4 Feb 2017 21:12:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-4428457976705760808</guid><description>&lt;div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;&lt;span class="fullpost"&gt;CNC singkatan dari Computer Numerically Controlled, merupakan mesin perkakas yang dilengkapi dengan sistem kontrol berbasis komputer yang mampu membaca instruksi kode N dan G (G-kode) yang mengatur kerja sistem peralatan mesinnya, yakni sebuah alat mekanik bertenaga mesin yang digunakan untuk membuat komponen/benda kerja. Mesin perkakas CNC merupakan mesin perkakas yang dilengkapi dengan berbagai alat potong yang dapat membuat benda kerja secara presisi dan dapat melakukan interpolasi/sisipan yang diarahkan secara numerik (berdasarkan angka). Parameter sistem operasi/sistem kerja CNC dapat diubah melalui program perangkat lunak (software load program) yang sesuai.&lt;/span&gt;&lt;br /&gt;&lt;span class="fullpost"&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;&lt;span class="fullpost"&gt;Adanya mesin CNC berawal dari berkembangnya sistem Numerically Controlled (NC) pada akhir tahun 1940-an dan awal tahun 1950-an yang ditemukan oleh John T. Parsons dengan bekerja sama dengan Perusahaan Servomechanism MIT. Adanya mesin CNC didahului oleh penemuan mesin NC yang mempunyai ciri parameter sistem pengoperasiannya tidak dapat diubah. Sistem CNC pada awalnya menggunakan jenis perangkat keras&amp;nbsp; (hardware) NC, dan komputer yang digunakan sebagai alat penghitungan kompensasi dan terkadang sebagai alat untuk mengedit.&lt;/span&gt;&lt;br /&gt;&lt;span class="fullpost"&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;&lt;span class="fullpost"&gt;Pada awalnya mesin CNC masih menggunakan kertas berlubang sebagai media untuk mentransfer kode G dan M ke sistem kontrol. Setelah tahun 1950, ditemukan metode baru mentransfer data dengan menggunakan kabel RS232, floppy disks, dan terakhir oleh Komputer Jaringan Kabel (Computer Network Cables) bahkan bisa dikendalikan melalui internet.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;&lt;span class="fullpost"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwrB1otzcJXKRnLsvF_FwvIfz6lmJYE0ZDaNmvIjXJGVkmtifKjC_YdtcV793VGkWWKtX4u6QR0nxUadkJTKTWJs5XAxl1sncRWz2R3lnP8N6aOq8rZncfhpMIwD8WCyK-llpIuVdfLls/s1600/cnc.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwrB1otzcJXKRnLsvF_FwvIfz6lmJYE0ZDaNmvIjXJGVkmtifKjC_YdtcV793VGkWWKtX4u6QR0nxUadkJTKTWJs5XAxl1sncRWz2R3lnP8N6aOq8rZncfhpMIwD8WCyK-llpIuVdfLls/s400/cnc.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;span class="fullpost"&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;&lt;span class="fullpost"&gt;Akhir-akhir ini mesin-mesin CNC telah berkembang secara menakjubkan sehingga mengubah industri pabrik yang selama ini menggunakan tenaga manusia menjadi full otomasi. Berkembangnya Mesin CNC, maka benda kerja yang rumit sekalipun dapat dibuat secara mudah dalam jumlah yang banyak.&lt;/span&gt;&lt;br /&gt;&lt;span class="fullpost"&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: center;"&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: justify;"&gt;
&lt;span class="fullpost" style="background-color: white;"&gt;Telah kita ketahui bersama bahwa pembuatan komponen/suku cadang suatu mesin yang presisi dengan mesin perkakas manual tidaklah mudah, meskipun dilakukan oleh seorang operator mesin perkakas yang mahir sekalipun penyelesaiannya memerlukan waktu lama. Bila ada permintaan konsumen untuk membuat komponen berteknologi tinggi dalam jumlah banyak dengan waktu singkat, dengan kualitas sama baiknya, tentu akan sulit dipenuhi bila menggunakan perkakas manual. Apalagi bila bentuk benda kerja yang dipesan lebih rumit, tentu akan semakin sulit diselesaikan dalam waktu singkat. Penyelesaian produk yang lama secara ekonomis akan meningkatkan biaya produksinya, harga jual produk akan menjadi semakin mahal, sehingga semakin sulit bersaing dengan produk impor.&lt;/span&gt;&lt;/div&gt;
&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwrB1otzcJXKRnLsvF_FwvIfz6lmJYE0ZDaNmvIjXJGVkmtifKjC_YdtcV793VGkWWKtX4u6QR0nxUadkJTKTWJs5XAxl1sncRWz2R3lnP8N6aOq8rZncfhpMIwD8WCyK-llpIuVdfLls/s72-c/cnc.png" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">2</thr:total></item><item><title>Sejarah dan Perkembangan PLC</title><link>https://elementertech.blogspot.com/2017/02/sejarah-dan-perkembangan-plc.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Sat, 4 Feb 2017 21:07:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-4042013889432307046</guid><description>&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
Sejarah PLC&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoOEz0Xjov6TJ_Y4mPg75iHbflVkvTwIhLfv0x0Mk2GfIKogzxr6XP8PwcWhNj_Gd0uMD52D3HI7UYk7Ap5_mfUzfHuW4DrmiJXEQmRPuLL_qNz8QKHF6fTXf9_KV7B0wFYFqf6FbucA/s1600/PLC.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoOEz0Xjov6TJ_Y4mPg75iHbflVkvTwIhLfv0x0Mk2GfIKogzxr6XP8PwcWhNj_Gd0uMD52D3HI7UYk7Ap5_mfUzfHuW4DrmiJXEQmRPuLL_qNz8QKHF6fTXf9_KV7B0wFYFqf6FbucA/s400/PLC.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
PLC pertama kali diperkenalkan pada tahun 1960-an. Alasan utama perancangan PLC adalah untuk menghilangkan beban ongkos perawatan dan penggantian sistem kontrol mesin berbasis relay. Bedford Associate (Bedford, MA) mengajukan usulan yang diberi nama MODICON (kepanjangan Modular Digital controller) untuk perusahaan-perusahaan mobil di Amerika. Sedangkan perusahaan lain mengajukan sistem berbasis komputer (PDP-8). MODICON 084 merupakan PLC pertama didunia.&lt;br /&gt;Saat kebutuhan produksi berubah maka demikian pula dengan sistem kontrol-nya. Hal ini menjadi sangat mahal jika perubahannya terlalu sering. Karena relai merupakan alat mekanik, maka, memiliki umur hidup atau masa penggunaan yang terbatas, yang akhirnya membutuhkan jadwal perawatan yang ketat. Pelacakan kerusakan atau kesalahan menjadi cukup membosankan jika banyak relai yang digunakan. Bayangkakn saja sebuah panel kontrol yang dilengkapi dengan monitor ratusan hingga ribuan relai yang terkandung pada sistem kontrol tersebut. Bagaimana kompleks-nya melakukan pengkabelan pada relai-relai tersebut. Dengan demikian, pengontrol baru ini harus memudahkan para teknisi perawatan dan teknisi lapangan melakukan pemrograman. Umur alat harus menjadi lebih panjang dan program proses dapat dimodifikasi atau dirubah dengan lebih mudah, Serta harus mampu bertahan dalam lingkungan industri yang keras.&lt;br /&gt;Pada pertengahan tahun 1970-an, teknologi PLC yang dominan adalah sekuenser mesin-kondisi dan CPU berbasis bit-slice. Prosesor AMD 2901 dan 2903 cukup populer digunakan dalam MODICON dan PLC A-B. Mikroprosesor konvensional kekurangan daya dalam menyelesaikan secara cepat logika PLC untuk semua PLC, kecuali PLC kecil. Setelah mikroprosesor konvensional mengalami perbaikan dan pengembangan, PLC yang besar-besar mulai banyak menggunakan-nya. Bagaimanapun juga, hingga saat ini ada yang masih berbasis pada AMD 2903. Kemampuan komunikasi pada PLC mulai muncul pada awal-awal tahun 1973. Sistem yang pertama adalah Modbus-nya MODICON. Dengan demikian PLC bisa berkomunikasi dengan PLC lain dan bisa ditempatkan lebih jauh dari lokasi mesin sesungguhnya yang dikontrol. Sayangnya, kurangnya standarisasi mengakibatkan komunikasi PLC menjadi mimpi buruk untuk protokol-protokol dan jaringa-jaringan yang tidak kompatibel. Tetapi bagaimanapun juga, saat itu merupakan tahun yang hebat untuk PLC.&lt;br /&gt;Pada tahun 1980-an dilakukan usaha untuk menstandarisasi komunikasi dengan protokol otomasi pabrik milik General Motor (General Motor’s Manufacturring Automation Protocol (MAP)). Juga merupakan waktu untuk memperkecil ukuran PLC dan pembuatan perangkat lunak pemrograman melalui pemprograman simbolik dengan komputer PC daripada terminal pemprogram atau penggunaan pemrogram genggam ( handled programmer). Sekarang PLC terkecil seukuran dengan sebuah kontrol relai tunggal tahun 1990- dilakukan reduksi protokol baru dan modernisasi lapisan f isik dari protokol-protokol populer yang bertahan pada tahun 1980-an. Standar terakhir (IEC 1131-3).&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
Seiring perkembangan teknologi solid state, saat ini PLC telah mengalami perkembangan luar biasa, baik dari ukuran. kepadatan komponen serta dari segi fungsionalnya. Beberapa peningkatan perangkat keras dan perangkat lunak ini di antaranya adalah:&lt;br /&gt;1. Ukuran semakin kecil dan kompak.&lt;br /&gt;2. Jumlah input output yang semakin banyak dan padat&lt;br /&gt;3. Waktu eksekusi program yang semakin cepat.&lt;br /&gt;4. Pemrograman relatif semakin mudah. Hal ini terkait dengan perangkat lunak pemrograman yang semakin user friendly&lt;br /&gt;5. Memiliki kemampuan komunikasi dan sistem dokumentasi yang semakin baik.&lt;br /&gt;6. Jenis instruksi/fungsi semakin banyak dan lengkap&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
Pengertian PLC&lt;br /&gt;Programmable Logic Controllers (PLC) adalah komputer elektronik yang mudah digunakan dan memiliki fungsi kendali untuk berbagai tipe dan tingkat kesulitan yang beraneka ragam.&lt;br /&gt;Definisi Programmable Logic Controller menurut Capiel (1982) adalah :&lt;br /&gt;sistem elektronik yang beroperasi secara digital dan didesain untuk pemakaian di lingkungan industri, dimana sistem ini menggunakan memori yang dapat diprogram untuk penyimpanan secara internal instruksi-instruksi yang mengimplementasikan fungsi-fungsi spesifik seperti logika, urutan, perwaktuan, pencacahan dan operasi aritmatik untuk mengontrol mesin atau proses melalui modul-modul I/O digital maupun analog .&lt;br /&gt;Berdasarkan namanya, konsep PLC adalah sebagai berikut :&lt;br /&gt;1. Programmable&lt;br /&gt;menunjukkan kemampuan dalam hal memori untuk menyimpan program yang telah dibuat yang dengan mudah diubah-ubah fungsi atau kegunaannya.&lt;br /&gt;2. Logic&lt;br /&gt;menunjukkan kemampuan dalam memproses input secara aritmatik dan logic yakni melakukan operasi membandingkan, menjumlahkan, mengalikan, membagi, mengurangi, negasi, AND, OR, dan lain sebagainya.&lt;br /&gt;3. Controller&lt;br /&gt;menunjukkan kemampuan dalam mengontrol dan mengatur proses sehingga menghasilkan output yang diinginkan.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
PLC ini dirancang untuk menggantikan suatu rangkaian relay sequensial dalam suatu sistem kontrol. Selain dapat diprogram, alat ini juga dapat dikendalikan, dan dioperasikan oleh orang yang tidak memiliki pengetahuan di bidang pengoperasian komputer secara khusus. PLC ini memiliki bahasa pemrograman yang mudah dipahami dan dapat dioperasikan bila program yang telah dibuat dengan menggunakan software yang sesuai dengan jenis PLC yang digunakan sudah dimasukkan.&lt;br /&gt;Alat ini bekerja berdasarkan input-input yang ada dan tergantung dari keadaan pada suatu waktu tertentu yang kemudian akan meng-ON atau meng-OFF kan output-output. 1 menunjukkan bahwa keadaan yang diharapkan terpenuhi sedangkan 0 berarti keadaan yang diharapkan tidak terpenuhi. PLC juga dapat diterapkan untuk pengendalian sistem yang memiliki output banyak.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
Fungsi PLC&lt;br /&gt;Fungsi dan kegunaan PLC sangat luas. Dalam prakteknya PLC dapat dibagi secara umum dan secara khusus .&lt;br /&gt;Secara umum fungsi PLC adalah sebagai berikut:&lt;br /&gt;1. Sekuensial Control&lt;br /&gt;PLC memproses input sinyal biner menjadi output yang digunakan untuk keperluan pemrosesan teknik secara berurutan , disini PLC menjaga agar semua langkah dalam proses berlangsung dalam urutan yang tepat.&lt;br /&gt;2. Monitoring Plant&lt;br /&gt;PLC secara terus menerus memonitor status suatu sistem (misalnya temperatur, tekanan, tingkat ketinggian) dan mengambil tindakan yang diperlukan sehubungan dengan proses yang dikontrol (misalnya nilai sudah melebihi batas) atau menampilkan pesan tersebut pada operator.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
Sedangkan fungsi PLC secara khusus adalah dapat memberikan input ke CNC (Computerized Numerical Control). Beberapa PLC dapat memberikan input ke CNC untuk kepentingan pemrosesan lebih lanjut. CNC bila dibandingkan dengan PLC mempunyai ketelitian yang lebih tinggi dan lebih mahal harganya. CNC biasanya dipakai untuk proses finishing, membentuk benda kerja, moulding dan sebagainya.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
Prinsip Kerja PLC&lt;br /&gt;Prinsip kerja sebuah PLC adalah menerima sinyal masukan proses yang dikendalikan lalu melakukan serangkaian instruksi logika terhadap sinyal masukan tersebut sesuai dengan program yang tersimpan dalam memori lalu menghasilkan sinyal keluaran untuk mengendalikan aktuator atau peralatan lainnya.&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBIDK483XMY6Iz_htm96wEXOCIFA0Ug6HINk77njO6tiajgcRdBzMMFwT-imbfTrL1O1L25tdrzpygMOjkkfywm20iS_7TmhhLFzz2cTFNbBrFINJK_QEhYo1y2-oc0ibmnHKzNvzhis/s1600/PLCv.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="311" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBIDK483XMY6Iz_htm96wEXOCIFA0Ug6HINk77njO6tiajgcRdBzMMFwT-imbfTrL1O1L25tdrzpygMOjkkfywm20iS_7TmhhLFzz2cTFNbBrFINJK_QEhYo1y2-oc0ibmnHKzNvzhis/s400/PLCv.png" width="400" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
Keuntungan dan Kerugian PLC&lt;br /&gt;Dalam industri-industri yang ada sekarang ini, kehadiran PLC sangat dibutuhkan terutama untuk menggantikan sistem wiring atau pengkabelan yang sebelumnya masih digunakan dalam mengendalikan suatu sistem. Dengan menggunakan PLC akan diperoleh banyak keuntungan diantaranya adalah sebagai berikut:&lt;br /&gt;1. Fleksibel&lt;br /&gt;Pada masa lalu, tiap perangkat elektronik yang berbeda dikendalikan dengan pengendalinya masing-masing. Misal sepuluh mesin membutuhkan sepuluh pengendali, tetapi kini hanya dengan satu PLC kesepuluh mesin tersebut dapat dijalankan dengan programnya masing-masing.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
2. Perubahan dan pengkoreksian kesalahan sistem lebih mudah&lt;br /&gt;Bila salah satu sistem akan diubah atau dikoreksi maka pengubahannya hanya dilakukan pada program yang terdapat di komputer, dalam waktu yang relatif singkat, setelah itu didownload ke PLC-nya. Apabila tidak menggunakan PLC, misalnya relay maka perubahannya dilakukan dengan cara mengubah pengkabelannya. Cara ini tentunya memakan waktu yang lama.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
3. Jumlah kontak yang banyak&lt;br /&gt;Jumlah kontak yang dimiliki oleh PLC pada masing-masing coil lebih banyak daripada kontak yang dimiliki oleh sebuah relay.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
4. Harganya lebih murah&lt;br /&gt;PLC mampu menyederhanakan banyak pengkabelan dibandingkan dengan sebuah relay. Maka harga dari sebuah PLC lebih murah dibandingkan dengan harga beberapa buah relay yang mampu melakukan pengkabelan dengan jumlah yang sama dengan sebuah PLC. PLC mencakup relay, timers, counters, sequencers, dan berbagai fungsi lainnya.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
Selain keuntungan yang telah disebutkan di atas maka ada kerugian yang dimiliki oleh PLC, yaitu:&lt;br /&gt;1. Teknologi yang masih baru&lt;br /&gt;Pengubahan sistem kontrol lama yang menggunakan ladder atau relay ke konsep komputer PLC merupakan hal yang sulit bagi sebagian orang&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
2. Buruk untuk aplikasi program yang tetap&lt;br /&gt;Beberapa aplikasi merupakan aplikasi dengan satu fungsi. Sedangkan PLC dapat mencakup beberapa fungsi sekaligus. Pada aplikasi dengan satu fungsi jarang sekali dilakukan perubahan bahkan tidak sama sekali, sehingga penggunaan PLC pada aplikasi dengan satu fungsi akan memboroskan (biaya).&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
3. Pertimbangan lingkungan&lt;br /&gt;Dalam suatu pemrosesan, lingkungan mungkin mengalami pemanasan yang tinggi, vibrasi yang kontak langsung dengan alat-alat elektronik di dalam PLC dan hal ini bila terjadi terus menerus, mengganggu kinerja PLC sehingga tidak berfungsi optimal.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
Bagian-Bagian PLC&lt;br /&gt;Sistem PLC terdiri dari lima bagian pokok, yaitu:&lt;br /&gt;1. Central processing unit (CPU).&lt;br /&gt;Bagian ini merupakan otak atau jantung PLC, karena bagian ini merupakan bagian yang melakukan operasi / pemrosesan program yang tersimpan dalam PLC. Disamping itu CPU juga melakukan pengawasan atas semua operasional kerja PLC, transfer informasi melalui internal bus antara PLC, memory dan unit I/O.&lt;br /&gt;Bagian CPU ini antara lain adalah :&lt;br /&gt;a. Power Supply, power supply mengubah suplai masukan listrik menjadi suplai listrik yang sesuai dengan CPU dan seluruh komputer.&lt;br /&gt;b. Alterable Memory, terdiri dari banyak bagian, intinya bagian ini berupa chip yang isinya di letakkan pada chip RAM (Random Access Memory), tetapi isinya dapat diubah dan dihapus oleh pengguna / pemrogram. Bila tidak ada supplai listrik ke CPU maka isinya akan hilang, oleh sebab itu bagian ini disebut bersifat volatile, tetapi ada juga bagian yang tidak bersifat volatile.&lt;br /&gt;c. Fixed Memory, berisi program yang sudah diset oleh pembuat PLC, dibuat dalam bentuk chip khusus yang dinamakan ROM (Read Only Memory), dan tidak dapat diubah atau dihapus selama operasi CPU, karena itu bagian ini sering dinamakan memori non-volatile yang tidak akan terhapus isinya walaupun tidak ada listrik yang masuk ke dalam CPU. Selain itu dapat juga ditambahkan modul EEPROM atau Electrically Erasable Programmable Read Only Memory yang ditujukan untuk back up program utama RAM prosesor sehingga prosesor dapat diprogram untuk meload program EEPROM ke RAM jika program di RAM hilang atau rusak [6].&lt;br /&gt;d. Processor, adalah bagian yang mengontrol supaya informasi tetap jalan dari bagian yang satu ke bagian yang lain, bagian ini berisi rangkaian clock, sehingga masing-masing transfer informasi ke tempat lain tepat sampai pada waktunya&lt;br /&gt;e. Battery Backup, umumnya CPU memiliki bagian ini. Bagian ini berfungsi menjaga agar tidak ada kehilangan program yang telah dimasukkan ke dalam RAM PLC jika catu daya ke PLC tiba-tiba terputus.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
2. Programmer / monitor (PM).&lt;br /&gt;Pemrograman dilakukan melalui keyboard sehingga alat ini dinamakan Programmer. Dengan adanya Monitor maka dapat dilihat apa yang diketik atau proses yang sedang dijalankan oleh PLC. Bentuk PM ini ada yang besar seperti PC, ada juga yang berukuran kecil yaitu hand-eld programmer dengan jendela tampilan yang kecil, dan ada juga yang berbentuk laptop. PM dihubungkan dengan CPU melalui kabel. Setelah CPU selesai diprogram maka PM tidak dipergunakan lagi untuk operasi proses PLC, sehingga bagian ini hanya dibutuhkan satu buah untuk banyak CPU.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
3. Modul input / output (I/O).&lt;br /&gt;Input merupakan bagian yang menerima sinyal elektrik dari sensor atau komponen lain dan sinyal itu dialirkan ke PLC untuk diproses. Ada banyak jenis modul input yang dapat dipilih dan jenisnya tergantung dari input yang akan digunakan. Jika input adalah limit switches dan pushbutton dapat dipilih kartu input DC. Modul input analog adalah kartu input khusus yang menggunakan ADC (Analog to Digital Conversion) dimana kartu ini digunakan untuk input yang berupa variable seperti temperatur, kecepatan, tekanan dan posisi. Pada umumnya ada 8-32 input point setiap modul inputnya. Setiap point akan ditandai sebagai alamat yang unik oleh prosesor.&lt;br /&gt;Output adalah bagian PLC yang menyalurkan sinyal elektrik hasil pemrosesan PLC ke peralatan output. Besaran informasi / sinyal elektrik itu dinyatakan dengan tegangan listrik antara 5 – 15 volt DC dengan informasi diluar sistem tegangan yang bervariasi antara 24 – 240 volt DC mapun AC. Kartu output biasanya mempunyai 6-32 output point dalam sebuah single module. Kartu output analog adalah tipe khusus dari modul output yang menggunakan DAC (Digital to Analog Conversion). Modul output analog dapat mengambil nilai dalam 12 bit dan mengubahnya ke dalam signal analog. Biasanya signal ini 0-10 volts DC atau 4-20 mA. Signal Analog biasanya digunakan pada peralatan seperti motor yang mengoperasikan katup dan pneumatic position control devices.&lt;br /&gt;Bila dibutuhkan, suatu sistem elektronik dapat ditambahkan untuk menghubungkan modul ini ke tempat yang jauh. Proses operasi sebenarnya di bawah kendali PLC mungkin saja jaraknya jauh, dapat saja ribuan meter.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
4. Printer.&lt;br /&gt;Alat ini memungkinkan program pada CPU dapat di printout atau dicetak. Informasi yang mungkin dicetak adalah diagram ladder, status register, status dan daftar dari kondisi-kondisi yang sedang dijalankan, timing diagram dari kontak, timing diagram dari register, dan lain-lain.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
5. The Program Recorder / Player.&lt;br /&gt;Alat ini digunakan untuk menyimpan program dalam CPU. Pada PLC yang lama digunakan tape, sistem floopy disk. Sekarang ini PLC semakin berkembang dengan adanya hard disk yang digunakan untuk pemrograman dan perekaman. Program yang telah direkam ini nantinya akan direkam kembali ke dalam CPU apabila program aslinya hilang atau mengalami kesalahan.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
Untuk operasi yang besar, kemungkinan lain adalah menghubungkan CPU dengan komputer utama (master computer) yang biasanya digunakan pada pabrik besar atau proses yang mengkoodinasi banyak Sistem PLC .&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
Konsep Perancangan Sistem Kendali dengan PLC&lt;br /&gt;Dalam merancang suatu sistem kendali dibutuhkan pendekatan-pendekatan sistematis dengan prosedure sebagai berikut :&lt;br /&gt;1. Rancangan Sistem Kendali&lt;br /&gt;Dalam tahapan ini si perancang harus menentukan terlebih dahulu sistem apa yang akan dikendalikan dan proses bagaimana yang akan ditempuh. Sistem yang dikendalikan dapat berupa peralatan mesin ataupun proses yang terintegrasi yang sering secara umum disebut dengan controlled system.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
2. Penentuan I/O&lt;br /&gt;Pada tahap ini semua piranti masukan dan keluaran eksternal yang akan dihubungkan PLC harus ditentukan. Piranti masukan dapat berupa saklar, sensor, valve dan lain-lain sedangkan piranti keluaran dapat berupa solenoid katup elektromagnetik dan lain-lain.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
3. Perancangan Program (Program Design)&lt;br /&gt;Setelah ditentukan input dan output maka dilanjutkan dengan proses merancang program dalam bentuk ladder diagram dengan mengikuti aturan dan urutan operasi sistem kendali.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
4. Pemrograman (Programming)&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
5. Menjalankan Sistem (Run The System)&lt;br /&gt;Pada tahapan ini perlu dideteksi adanya kesalahan-kesalahan satu persatu (debug), dan menguji secara cermat sampai kita memastikan bahwa sistem aman untuk dijalankan.&lt;/div&gt;
&lt;div style="background: rgb(255, 255, 255); border: 0px; font-family: Georgia, Times, serif; font-size: 14px; margin-bottom: 15px; outline: 0px; padding: 0px; vertical-align: baseline;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoOEz0Xjov6TJ_Y4mPg75iHbflVkvTwIhLfv0x0Mk2GfIKogzxr6XP8PwcWhNj_Gd0uMD52D3HI7UYk7Ap5_mfUzfHuW4DrmiJXEQmRPuLL_qNz8QKHF6fTXf9_KV7B0wFYFqf6FbucA/s72-c/PLC.png" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>Microcontroler </title><link>https://elementertech.blogspot.com/2017/02/microcontroler.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Sat, 4 Feb 2017 18:55:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-3019271317753808861</guid><description>Hi kawan - kawan Guten Morgen Pada Kesempatan Kali Ini saya Akan Menjelaskan Pengertian Dari Microcontroler Elektronika dasar.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;Pengertian Mikrokontroler&lt;/b&gt;
Mikrokontroler adalah sebuah chip yang berfungsi sebagai pengontrol rangkaian elektronik dan umunya dapat menyimpan program didalamnya. Mikrokontroler umumnya terdiri dari CPU (Central Processing Unit), memori, I/O tertentu dan unit pendukung seperti Analog-to-Digital Converter (ADC) yang sudah terintegrasi di dalamnya.&lt;br /&gt;
&lt;br /&gt;
&lt;span style="background-color: white; color: #333333; font-family: &amp;quot;arial&amp;quot; , &amp;quot;helvetica&amp;quot; , sans-serif; text-align: justify;"&gt;&lt;b&gt;Kelebihan&lt;/b&gt; utama dari mikrokontroler ialah tersedianya RAM dan peralatan I/O pendukung sehingga ukuran board mikrokontroler menjadi sangat ringkas. Mikrokontroler MCS51 ialah mikrokomputer CMOS 8 bit dengan 4 KB Flash PEROM (Programmable and Erasable Only Memory) yang dapat dihapus dan ditulisi sebanyak 1000 kali. Mikrokontroler ini diproduksi dengan menggunakan teknologi high density non-volatile memory. Flash PEROM on-chip tersebut memungkinkan memori program untuk diprogram ulang dalam sistem (in-system programming) atau dengan menggunakan programmer non-volatile memory konvensional. Kombinasi CPU 8 bit serba guna dan Flash PEROM, menjadikan mikrokontroler MCS51 menjadi microcomputer handal yang fleksibel.&lt;/span&gt;&lt;br /&gt;
&lt;span style="background-color: white; color: #333333; font-family: &amp;quot;arial&amp;quot; , &amp;quot;helvetica&amp;quot; , sans-serif; text-align: justify;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQ22KftrCqe6rwVdDySl17PpBnQm98SksmjV4LwbKr3f4ijXwVbhVTUKynaj8nQwHoCru_6rW5hKtQ_UsNhE2SOOxltWm-QRYHr2RykUm4S1mZWaos_3iZ9WtxOFr81Aco_FjMlBKu0I/s1600/microcontroledr.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQ22KftrCqe6rwVdDySl17PpBnQm98SksmjV4LwbKr3f4ijXwVbhVTUKynaj8nQwHoCru_6rW5hKtQ_UsNhE2SOOxltWm-QRYHr2RykUm4S1mZWaos_3iZ9WtxOFr81Aco_FjMlBKu0I/s640/microcontroledr.png" width="640" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;h3 style="color: #393939; font-family: Arial, Helvetica, sans-serif; margin: 20px 0px 0px; padding: 0px; text-align: justify;"&gt;
&lt;span style="font-size: small;"&gt;Kelebihan Sistem Dengan Mikrokontroler&lt;/span&gt;&lt;/h3&gt;
&lt;ul style="color: #333333; display: table; font-family: Arial, Helvetica, sans-serif; list-style-position: outside; margin: 0px 0px 12px 25px; padding: 0px; text-align: justify;"&gt;
&lt;li style="margin: 0px 0px 0px 10px; padding: 3px;"&gt;Penggerak pada mikrokontoler menggunakan bahasa pemograman assembly dengan berpatokan pada kaidah digital dasar sehingga pengoperasian sistem menjadi sangat mudah dikerjakan sesuai dengan logika sistem (bahasa assembly ini mudah dimengerti karena menggunakan bahasa assembly aplikasi dimana parameter input dan output langsung bisa diakses tanpa menggunakan banyak perintah). Desain bahasa assembly ini tidak menggunakan begitu banyak syarat penulisan bahasa pemrograman seperti huruf besar dan huruf kecil untuk bahasa assembly tetap diwajarkan.&lt;/li&gt;
&lt;li style="margin: 0px 0px 0px 10px; padding: 3px;"&gt;Mikrokontroler tersusun dalam satu chip dimana prosesor, memori, dan I/O terintegrasi menjadi satu kesatuan kontrol sistem sehingga mikrokontroler dapat dikatakan sebagai komputer mini yang dapat bekerja secara inovatif sesuai dengan kebutuhan sistem.&lt;/li&gt;
&lt;li style="margin: 0px 0px 0px 10px; padding: 3px;"&gt;Sistem running bersifat berdiri sendiri tanpa tergantung dengan komputer sedangkan parameter komputer hanya digunakan untuk download perintah instruksi atau program. Langkah-langkah untuk download komputer dengan mikrokontroler sangat mudah digunakan karena tidak menggunakan banyak perintah.&lt;/li&gt;
&lt;li style="margin: 0px 0px 0px 10px; padding: 3px;"&gt;Pada mikrokontroler tersedia fasilitas tambahan untuk pengembangan memori dan I/O yang disesuaikan dengan kebutuhan sistem.&lt;/li&gt;
&lt;li style="margin: 0px 0px 0px 10px; padding: 3px;"&gt;Harga untuk memperoleh alat ini lebih murah dan mudah didapat.&lt;/li&gt;
&lt;/ul&gt;
&lt;span style="background-color: white; color: #333333; font-family: &amp;quot;arial&amp;quot; , &amp;quot;helvetica&amp;quot; , sans-serif; text-align: justify;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQ22KftrCqe6rwVdDySl17PpBnQm98SksmjV4LwbKr3f4ijXwVbhVTUKynaj8nQwHoCru_6rW5hKtQ_UsNhE2SOOxltWm-QRYHr2RykUm4S1mZWaos_3iZ9WtxOFr81Aco_FjMlBKu0I/s72-c/microcontroledr.png" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>Pahami C++</title><link>https://elementertech.blogspot.com/2017/02/pahami-c.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Fri, 3 Feb 2017 22:15:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-6719766160708772941</guid><description>&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Kita ketahui bersama bahwa pada awal berkembangnya komputer, tahun 70an, telah ditemukan bahasa pemrograman yang prosedural (belum berbasis object/oop). Nah, kebanyakan bahasa – bahasa ini digunakan untuk antarmuka hardware. Intinya digunakan supaya hardware tersebut bisa didetect dengan baik oleh system operasi komputer.&amp;nbsp;&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Bahasa – bahasa seperti ini jaman sekarang dikenal dengan bahasa asembly. Banyak yang menyebutnya dengan bahasa low level. Bahasa - bahasa prosedural tersebut diantaranya adalah bahasa C, Basic, Pascal, Fortran, dan lain lain. Sekarang bahasa C berkembang menjadi C++, Visual C++, Visual C#. Sedangkan bahasa Basic sendiri juga berkembang menjadi Visual Basic. Sementara pascal berkembang menjadi Delphi dan lain – lain .&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEbJzOA5K1Fjocs42827bvRIFbOl5twC5QevaHZcNSF8lQJbiPXLP7iu4gqBcRZrBFb7LAnd4pQVlafP_V0hTrKwI1_OR7Pdy71eyMVs3-a1ZXOch1UlIiR51rYTU6HrP3FAbKuHa3W6g/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEbJzOA5K1Fjocs42827bvRIFbOl5twC5QevaHZcNSF8lQJbiPXLP7iu4gqBcRZrBFb7LAnd4pQVlafP_V0hTrKwI1_OR7Pdy71eyMVs3-a1ZXOch1UlIiR51rYTU6HrP3FAbKuHa3W6g/s320/Untitled.png" width="320" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;span style="background-color: white;"&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;1.Apa itu C++?&amp;nbsp;&lt;/b&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Sebelum C++ dikembangkan, sudah ada bahasa sejenis yang digunakan programmer yaitu bahasa C (dikembangkan oleh Dennis Ritchie dari bahasa B), saat itu dia dari Bell Laboratories sedang mengembangkan system operasi Unix. C ini merupakan bahasa prosedural, kemudian dikembangkan hingga menjadi sebuah bahasa pemrograman C yang berorientasi pada object (OOP – Object Oriented Programming) yang kemudian disebut dengan C++ (dikembangkan oleh Bejarne Stroustrup tahun 1979).&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;2.Bagaimana Filosophy bahasa C?&lt;/b&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Secara umum, pemrograman dengan bahasa C menggunakan 2 konsep, yaitu data dan algorithms. Data merupakan bahan yang akan diolah, sedangkan algorithms adalah metode pengolahan.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Bisa dibilang algorithms ini adalah fungsi/cara/metode/langkah dan lain lain untuk mengolah data tersebut.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Lihat gambar 1:&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix4u6rA-1uCnEf01tziIaZK9sXQpAVJJuutlrS9ZB9DVEj6wbYDv8IuGSWdv3XfeyMdVEGBPw4di5iuedJJD_UIvTW3drBwTSysNNqjpDxVR_9MoUwxLTXUXzVrdn12D6kuS7gq9gNyA4/s1600/dadas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix4u6rA-1uCnEf01tziIaZK9sXQpAVJJuutlrS9ZB9DVEj6wbYDv8IuGSWdv3XfeyMdVEGBPw4di5iuedJJD_UIvTW3drBwTSysNNqjpDxVR_9MoUwxLTXUXzVrdn12D6kuS7gq9gNyA4/s640/dadas.png" width="618" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Tapi bagaimanapun juga, penggunaan bahasa prosedural seperti C sangat tidak efisien untuk pembuatan software skala menengah ke atas. Terlalu banyak perulangan, terlalu banyak percabangan, terlalu banyak kode yang harus kita ketikan. Maka, seiring dengan perkembangan jaman dan teknologi, bahasa C ini dikembangkan ke tingkat lebih lanjut yaitu bahasa C yang berorientasi object yang disebut dengan C++.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;3.Apa itu bahasa pemrograman berorientasi object? Apa bedanya dengan bahasa prosedural?&lt;/b&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Object Oriented Programming (OOP) adalah bahasa pemrograman yang berorientasi pada object. Apa sih object??? Object itu ya bahasa pemrograman itu sendiri.&amp;nbsp;&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Mari kita renungkan. Misalnya kita membuat sebuah object mobil misalnya. Mobil ini bisa kita buat dengan prosedural language maupun dengan OOP language. Loh, jadi tidak ada bedanya dong?? Sebentar dulu, harap bersabar.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Kita tidak akan membahas bagaimana cara membuat 1 mobil, bahasa apa yang digunakan untuk membuat mobil, tapi yang kita bahas adalah 1 mobil. Yup mobil yang sudah jadi yang baru saja anda buat dari mengetikan puluhan kode misalnya.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Nah, sekarang saya ingin 1 mobil tadi digandakan menjadi 2 mobil. Bagaimana anda membuat mobil yang satunya?? Apakah anda akan mengopikan semua kode anda tadi untuk menjadikan mobil ke dua??? Ini cuman dua, bagaimana kalo saya ingin 3, atau 4, atau 120 mobil???&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Ah, ada renungan lain, mobil tadi telah anda buat, pasti ada bagian bagiannya seperti roda. Nah, bagaimana kalo saya ingin mobil yang sama dengan cat yang berbeda? Bagaimana kalo saya ingin anda membuat mobil yang sama dengan salah satu roda nya kempes.&amp;nbsp;&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Disinilah object oriented programming punya peranan yang sangat penting. Kita hanya perlu membuat sebuah class mobil. Untuk membuat mobil baru hanya tinggal membuat instance baru. Dan lain sebagainya. Jauh lebih elegan, lebih efisien, lebih terstruktur ketimbang prosedural language.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;4.Langsung saja, apa yang kita perlukan untuk belajar C++?&lt;/b&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Anda bisa saja pakai aplikasi teks editor apa saja. Kemudian anda dapat mendownload aplikasi compiler apa saja yang sudah tersedia di internet. Mudah bukan??&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Tapi, sekarang banyak sekali vendor yang menyediakan software komplit (lengkap) untuk anda baik berbayar maupun gratis. Software komplit ini dinamakan dengan IDE (Integrated Development Environment).&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Dalam IDE ini terdapat editor khusus yang dapat kita gunakan, terdapat compiler yang terintegrasi dengan editor tadi, terdapat debugger, bahkan terdapat software deployer yang akan membuat kode anda menjadi software jadi disertai dengan installer nya.&amp;nbsp;&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Dengan editor khusus ini maka pekerjaan anda akan jauh lebih mudah, disertai dengan kode warna yang presentatif, disertai code inspektor yang akan langsung menginformasikan kepada anda bahwa kode yang anda ketikan salah, disertai juga dengan smart coding (intellisense code) yaitu saat anda mengetikan 1 huruf saja maka smart coding ini akan memunculkan baik method maupun propertis yang tersedia.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Disertai juga template ui dan installer, sehingga untuk membuat menu, bottom, dan lain – lain yang berhubungan dengan User Interface sudah dibundled pada software tersebut kita hanya tinggal membuat logic nya saja.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Banyak sekali IDE/SDK super powerfull gratis maupun berbayar yang dapat anda gunakan di jaman 2013 ke 2014 ini.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Referensi saya pribadi adalah anda dapat menggunakan QT 5.1 dan Visual Studio 2012. Semuanya gratis. Untuk visual studio yang gratis adalah Visual Studio Express. Atau mungkin anda memiliki referensi lain??&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Bila sudah tersedia IDE super powerfull gratis dengan GUI yang komunikatif, haruskan saya install compiler sendiri dari download di internet? Haruskah saya memakai editor simple tanpa intellisense code?? Haruskah saya belajar menggunakan command line juga??&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Semua ini anda sendiri yang dapat menjawabnya :)&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;5.Mari kita mencoba membuat Hello World Application&amp;nbsp;&lt;/b&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Buka editor anda, ketik&lt;/span&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;an kode di bawah ini. Disini saya menggunakan Visual Studio 2012.&amp;nbsp;&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Lihat gambar 2:&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgas2u2E5N4gQTGO24eyLJ1X4jGuyCurSlBveD-JmZB2A2OG6Lhyw-i0HHzpKLnucDqOpZ6SP1xEq_XNEETx3vctppv9efi_Sy1ecZhHv6BWdbBLqiS0N_M8nGKXGpNPhY9Im-d8BSgeHQ/s1600/cff.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgas2u2E5N4gQTGO24eyLJ1X4jGuyCurSlBveD-JmZB2A2OG6Lhyw-i0HHzpKLnucDqOpZ6SP1xEq_XNEETx3vctppv9efi_Sy1ecZhHv6BWdbBLqiS0N_M8nGKXGpNPhY9Im-d8BSgeHQ/s640/cff.png" width="640" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Nah, kode di atas adalah kode default standar penulisan C++.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;*Kenapa harus ada fungsi&amp;nbsp;&lt;/span&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;main()&lt;/b&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&amp;nbsp;?????&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;*Apa itu&lt;/span&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&amp;nbsp;#include&amp;nbsp;&lt;iostream&gt;&lt;/iostream&gt;&lt;/b&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;?&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;*Kenapa tidak&amp;nbsp;&lt;/span&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;#include&amp;nbsp;&lt;iostream .h=""&gt;&lt;/iostream&gt;&lt;/b&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;?&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;*Kenapa memakai&amp;nbsp;&lt;/span&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;int&lt;/b&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;??? Kenapa&amp;nbsp;&lt;/span&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;int main()&lt;/b&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;?? Kenapa tidak&amp;nbsp;&lt;/span&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;main()&lt;/b&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&amp;nbsp;saja?? Kenapa tidak&amp;nbsp;&lt;/span&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;main(void)&lt;/b&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;?? Kenapa tidak&amp;nbsp;&lt;/span&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;void main()&lt;/b&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;???&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;*Apa itu&amp;nbsp;&lt;/span&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;using namaspace std;&lt;/b&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&amp;nbsp;???&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;*Kenapa memakai&amp;nbsp;&lt;/span&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;return 0;&lt;/b&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&amp;nbsp;??&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Pertanyaan – pertanyaan seperti inilah yang terlewatkan pada kebanyakan tutorial C++ yang bertebaran di internet.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Perlu diketahui bahwa kode di atas adalah kode standar C++, ada dapat me-run kode tersebut pada IDE anda dan cobalah lihat, pasti dapat berjalan dengan sempurna. Akan tertampil conlose window hasil dari running kode. Tetapi pada Visual Studio IDE, setelah eksekusi kode maka akan menutup secara otomatis. Memang begitulah Microsoft membuatnya. Sehingga untuk membuat window hasil running tetap ditempat (tidak close) anda dapat menambahkan:&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;cin.get();&lt;/b&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;kode ini akan meng-catch input yang dimasukan pengunjung sebelum window menutup. Bila pengunjung tidak mengetikan apa apa, maka window akan tetapi terbuka.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Lihat gambar 3:&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5dgxztGiVdBmstyqo_koKiHFejqd_Z07kuSPCFS3nprUdSwmvKVQx_JSpgRo-Rjf9mRQQN0yhU_kDlhPLd8FoMA_usYPcnRhWw266c_TI0WC5OMGT7r9v_afGKckpwx0urxm63zSDzac/s1600/ass.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="327" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5dgxztGiVdBmstyqo_koKiHFejqd_Z07kuSPCFS3nprUdSwmvKVQx_JSpgRo-Rjf9mRQQN0yhU_kDlhPLd8FoMA_usYPcnRhWw266c_TI0WC5OMGT7r9v_afGKckpwx0urxm63zSDzac/s640/ass.png" width="640" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Lihat gambar 4:&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLNEss9N6wuWcEc-DiPq3kyCHwoUKrxqyZqih_4326GzG6AirzbwYQo0cYfadLuid9oyqwGnfniA-rQNtIhcPXxyUPvq8S_Kmzisb5wk52T87zANSyusollnroLEXwfrLbaYXkq3V8_To/s1600/asaas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLNEss9N6wuWcEc-DiPq3kyCHwoUKrxqyZqih_4326GzG6AirzbwYQo0cYfadLuid9oyqwGnfniA-rQNtIhcPXxyUPvq8S_Kmzisb5wk52T87zANSyusollnroLEXwfrLbaYXkq3V8_To/s640/asaas.png" width="640" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Pada Source.cpp di atas, kita akan menjelaskan bagian – bagian dari kode seperti berikut ini:&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;#include&lt;/b&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&amp;nbsp;ini adalah preprocessor&amp;nbsp;&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;int main()&lt;/b&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&amp;nbsp;ini adalah function header&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;using namespace&lt;/b&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&amp;nbsp;ini adalah using namespace directive&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;function body yaitu antara {}&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;statements yaitu pada code cout&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;return 0;&lt;/b&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&amp;nbsp;yaitu return statement untuk menyudahi jalannya fungsi&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Lihat gambar 5:&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhn-ZCVtDdm8WwsSZBDHVjYtZ8Lr1DFb926GOmAODOHmNp4Aa-ZNPyxnZdc2762AIo1TpCZuNvY6uqbAU1s5QKg8tFNly_jFtdKi2kj1_k32BCe7mhv3Xctj4oTRWEST08rhTfwfh75u8/s1600/as1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="550" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhn-ZCVtDdm8WwsSZBDHVjYtZ8Lr1DFb926GOmAODOHmNp4Aa-ZNPyxnZdc2762AIo1TpCZuNvY6uqbAU1s5QKg8tFNly_jFtdKi2kj1_k32BCe7mhv3Xctj4oTRWEST08rhTfwfh75u8/s640/as1.png" width="640" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="background-color: white;"&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Mari kita lanjut ke pembahasan…&lt;/b&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;*Kenapa harus ada fungsi main() ?????&lt;/b&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Saat anda me-run C++ program, eksekusi kode selalu dimulai dari fungsi main(). Ini adalah standard dari kode C++. Bagaimana bila tidak ada fungsi main() pada kode anda? Tentu program anda tidak akan berjalan dan compiler (compiler apa saja) akan menginformasikan kepada anda bahwa program anda tidak lengkap karena tidak terdapat fungsi main().&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Jadi semua alur eksekusi kode dimulai dari fungsi main(), ini berbeda dengan bahasa pemrograman lain seperti php, actionscript, dan lain lain yang mana kita bisa memanggil langsung fungsi yang kita buat.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Lihat gambar 6:&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;img border="0" height="584" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjntb_0TUXuAhqOseIeVK4HdrvLNw6E2Rku-f0bUm_LCvxCyyw27vdVIFf5bb2oDfdjAZeqnPuxr6KbbYiC8lqhATOTCV8rFYJrnfC_PhlU6C9LgbUd524yEI5bv-3QDeiGDHXOzYJxjFM/s640/as2.png" width="640" /&gt;&lt;/div&gt;
&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Diatas adalah koding dengan php, lebih flexible karena kita bisa memanggil index.php dan menampilkan langsung fungsi – fungsi contoh() dan lagi() pada browser.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Lihat gambar 7:&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
&lt;img border="0" height="554" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGttpfMQoEhR7X0T85JMpki0ALJ1nxoq-oMDVYZlCVyJIAOM5jyR1pHtd8x9WhL5vpRfTlumGh09np1PudcTdxTFb_BU34ATgu7EU2NfLnI4Bu85X5AL6XFJ5xDQEqq97Ggmh5TeLhuck/s640/as4.png" width="640" /&gt;&lt;br /&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;
&lt;span style="background-color: white;"&gt;Lihat kode c++ diatas, semua eksekusi harus melalui fungsi main(). Diatas kita meng-include&amp;nbsp;&lt;/span&gt;&lt;string&gt;&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;karena kita menggunakannya untuk hal hal yang berhubungan dengan string. Hasilnya adalah seperti berikut ini:&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Lihat gambar 8:&lt;/span&gt;&lt;/span&gt;&lt;/string&gt;&lt;br /&gt;
&lt;string&gt;&lt;br /&gt;&lt;/string&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj32crTequ9ycllA29rPXCKTiJfHDhH-o2A4LGmeKmX7dlgxEi9RXeCsvGx0cglXyRdyhh4VJObOtwFzj1mS6xqbiNghggn77UpWVd9nRifdWjuN8bu9gsHBHfyvO5F1JjqSHNLvpRQPrM/s1600/as5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="408" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj32crTequ9ycllA29rPXCKTiJfHDhH-o2A4LGmeKmX7dlgxEi9RXeCsvGx0cglXyRdyhh4VJObOtwFzj1mS6xqbiNghggn77UpWVd9nRifdWjuN8bu9gsHBHfyvO5F1JjqSHNLvpRQPrM/s640/as5.png" width="640" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Nah, ada pertanyaan, bagaimana bila kita membuat file .dll (untuk Windows)? Haruskan kita menambahkan fungsi main()? .dll adalah sebuah dynamic link library, file ini tidak dapat berjalan sendiri, file ini bukan standalone, file ini hanya merupakan sebuah bagian dari dari aplikasi utama, sehingga .dll tidak membutuhkan fungsi main(), fungsi main() hanya perlu ditambahkan pada aplikasi utamanya / aplikasi pemanggilnya.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Ada pertanyaan lagi, terutama buat pengguna Visual C++ (dikembangkan oleh Windows), secara default tidak ada fungsi main() dalam Visual C++.&amp;nbsp;&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Lihat gambar 9:&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYtnyYvQ4pg3TKftrVS443PIkWxRiOLiBWSnXD5HhDfZgNRY112vwbpiQvk6dhUtVo8vkHf1JEEjqkkWkWGkjnp_m7k_Y-ql609U_PpSQj3g4_DQKpd0LIeqCLt1IAz2WjJ4ZwW48oSKM/s1600/as6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="452" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYtnyYvQ4pg3TKftrVS443PIkWxRiOLiBWSnXD5HhDfZgNRY112vwbpiQvk6dhUtVo8vkHf1JEEjqkkWkWGkjnp_m7k_Y-ql609U_PpSQj3g4_DQKpd0LIeqCLt1IAz2WjJ4ZwW48oSKM/s640/as6.png" width="640" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="background-color: white;"&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Memang benar, microsoft mengembangkan Visual C++ dengan _tmain() yang merupakan non standard sintaks. Apakah itu berarti tidak ada fungsi main() dalam Visual c++?&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Ya, ada fungsi main() yang tersembunyi yang akan memanggil fungsi _tmain() ini. Ini merupakan programming environment dalam Windows.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;*Apa itu #include&amp;nbsp;&lt;iostream&gt;?&lt;/iostream&gt;&lt;/b&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Line di atas adalah preprocessor directives. C++ sama seperti C, sama – sama menggunakan preprocessor. Maksudnya adalah program akan memproses file tertentu terlebih dahulu sebelum proses compile utama dilakukan.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Iostream adalah file yang kita gunakan bila program kita berhubungan dengan input – output. Input – Output yang kita ambil dari file ini dan kita gunakan pada kode program adalah cout dan cin. Sehingga supaya cout dan cin tersebut berjalan sebagai menstinya kita perlu meng-iclude kan file yang kita butuhkan.&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;b style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;*Kenapa tidak #include&amp;nbsp;&lt;iostream .h=""&gt;?&lt;/iostream&gt;&lt;/b&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;File – file yang kita gunakan pada include (termasuk iostream) biasanya disebut sebagai ‘include files’ atau ‘header files’. Pada bahasa C, penulisan untuk include file disertai extensi dari file tersebut misalnya iostream.h. nah, berbeda dengan penulisan pada C++, yang hanya cukup menggunakan nama file tanpa ekstensi (.h).&lt;/span&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;br style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;" /&gt;&lt;span style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;Dulu C++ juga menggunakan extensi file (.h) pada gaya penulisan, tetapi untuk style yang sekarang tidak diperlukan lagi. Jadi hanya cukup dengan #include&lt;/span&gt;&lt;namafile style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;.&lt;br /&gt;&lt;br /&gt;Lalu bagaimana bila ditambahkan dengan .h? tentu saja tidak masalah :)&lt;br /&gt;&lt;br /&gt;&lt;b&gt;*Apa itu using namespace std; ???&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;Bila anda menginclude file dengan #include&lt;iostream&gt;&amp;nbsp;tanpa ektensi .h maka anda perlu menggunakan using namespace std;&lt;br /&gt;&lt;br /&gt;Bila tidak menggunakan line diatas maka untuk memanggil cout dan cin dapat dengan :&lt;br /&gt;&lt;b&gt;&lt;br /&gt;Std::cout;&amp;nbsp;&lt;/b&gt;&lt;br /&gt;Serta&lt;br /&gt;&lt;b&gt;std::cin;&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;Mudah bukan???&lt;br /&gt;&lt;br /&gt;Namespace ini sebetulnya digunakan untuk memudahkan penulisan kode bila program anda terdiri dari kode kode dari beberapa vendor.&lt;br /&gt;&lt;br /&gt;Coba bayangkan, bila anda mengambil kode dari vendor ‘OkieInc’ dan vendor ‘MetuInc’ misalnya. Ternyata kedua-duanya memiliki nama fungsi yang sama yaitu ‘function Mediatutorial()’. Nah, tanpa namespace, compiler akan sangat bingung bahkan jadi hang karena harus memilih fungsi dari vendor yang mana?&lt;br /&gt;&lt;br /&gt;Nah, dengan namespace, kita dapat memanggil fungsi dari vendor OkieInc dengan misalnya&amp;nbsp;&lt;b&gt;okieinc::Mediatutorial();&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;Sedangkan dari MetuInc dapat dengan:&lt;br /&gt;&lt;b&gt;metuinc::Mediatutorial();&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;Mungkin cukup sekian tutorial update untuk pengenalan C++, semoga bermanfaat, dan kita akan kembali dengan tutorial-tutorial C++ berikutnya.&lt;/iostream&gt;&lt;/namafile&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="background-color: white;"&gt;&lt;namafile style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&lt;iostream&gt;&lt;br /&gt;&lt;/iostream&gt;&lt;/namafile&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="background-color: white;"&gt;&lt;namafile style="color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14.4px;"&gt;&lt;iostream&gt;Untuk Saran Silahkan Komen Di Kolom Komentar&lt;/iostream&gt;&lt;/namafile&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEbJzOA5K1Fjocs42827bvRIFbOl5twC5QevaHZcNSF8lQJbiPXLP7iu4gqBcRZrBFb7LAnd4pQVlafP_V0hTrKwI1_OR7Pdy71eyMVs3-a1ZXOch1UlIiR51rYTU6HrP3FAbKuHa3W6g/s72-c/Untitled.png" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item><item><title>Mengubah PC + Android Dengan NOX</title><link>https://elementertech.blogspot.com/2017/02/mengubah-pc-android-dengan-nox.html</link><author>noreply@blogger.com (Unknown)</author><pubDate>Thu, 2 Feb 2017 17:58:00 -1000</pubDate><guid isPermaLink="false">tag:blogger.com,1999:blog-6596883567189788124.post-284177827623411832</guid><description>&lt;div style="font-family: &amp;quot;Droid Sans&amp;quot;, serif; font-size: 14px; text-align: center;"&gt;
&lt;span style="background-color: white;"&gt;&lt;b&gt;Nox App Player&amp;nbsp;&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: &amp;quot;Droid Sans&amp;quot;, serif; font-size: 14px; text-align: center;"&gt;
&lt;span style="background-color: white;"&gt;&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: &amp;quot;Droid Sans&amp;quot;, serif; font-size: 14px;"&gt;
&lt;span style="background-color: white;"&gt;Nox App Player merupakan software emulator android yang mencoba menjadi rival dari aplikasi aplikasi emulator android lainya. dengan&amp;nbsp;Nox App Player kita dapat menginstall aplikasi android baik itu Apk nya ataupun langsung dari Playstore menggunakan komputer kita.&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: &amp;quot;Droid Sans&amp;quot;, serif; font-size: 14px;"&gt;
&lt;span style="background-color: white;"&gt;Secara fungsi,&amp;nbsp;Nox App Player adalah emulator atau simulator nya gadged android yang berjalan di PC windows untuk dapat menjalankan atau memainkan game android.&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: &amp;quot;Droid Sans&amp;quot;, serif; font-size: 14px;"&gt;
&lt;span style="background-color: white;"&gt;Nox App Player memiliki pengaturan yang cukup advanced dan yang menarik adalah, dipengaturan tersebut, kita dapat menemukan pengaturan Mode Root ataupun Non-Root. kemudian kita dapat menemukan Performace setting, yang mana fungsi tersebut dapat kita sesuaikan dengan spesifikasi komputer kita, jika spesifikasi komputer kita menengah, kita dapat melakukan setting Low, agar tidak banyak memakan resource memory. atau jika spesifikasi tinggi, kita dapat melakukan setting High guna merasakan user experience yang bagus.&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: &amp;quot;Droid Sans&amp;quot;, serif; font-size: 14px;"&gt;
&lt;span style="background-color: white;"&gt;Kita juga dapat mengatur Mode Tablet, Phone atau Customize.&amp;nbsp;kelengkapan fiture dari&amp;nbsp;Nox App Player Terbaru memang menjadi rival dari emulator android lain yang harus di coba.&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: &amp;quot;Droid Sans&amp;quot;, serif; font-size: 14px;"&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIpowTOnXVzPXoLKJEeLPXFIPlDaF5G-nB_4l1Ewm5o74SkRA3pruUnl3e50_uniOsBWHql1wq9TtrpsnbnWdoFwoKqI_SDSMg-NtAbHIwPNiHaXBQGHusC-JRm3D5ZW_TlPVtInuMeqU/s1600/nox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIpowTOnXVzPXoLKJEeLPXFIPlDaF5G-nB_4l1Ewm5o74SkRA3pruUnl3e50_uniOsBWHql1wq9TtrpsnbnWdoFwoKqI_SDSMg-NtAbHIwPNiHaXBQGHusC-JRm3D5ZW_TlPVtInuMeqU/s640/nox.png" width="640" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;CRONOSAL&amp;nbsp;- Saat ini sudah banyak developer yang sengaja menciptakan "jembatan" penghubung antara komputer dengan aplikasi APK. Mereka akhirnya mengembangkan emulator Android agar pengguna tetap bisa merasakan sensasi Android dalam sebuah komputer.&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;Beberapa waktu yang lalu, saya diperkenalkan dengan sebuah emulator Android yang tak kalah hebat dibanding emulator di kelasnya. Namanya adalah&amp;nbsp;&lt;b&gt;Nox App Player&lt;/b&gt;.&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;Secara garis besar, ia mengusung konsep yang sedikit berbeda. Konfigurasi startup dirombak penuh sehingga bisa dijalankan lebih cepat serta tetap ringan.&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9FllrJhBePMeectvqtz35PjSAMRu1zDYtYQuP00oKevB9nwzV2H6sGugub8Q_CG3Wyh30vOZJaWXNK8YSSWd5LZ5RjWfiSxm2GRPJfSiZS-3PkB5Y4BqJVMJmYE63xrhvT6S8xdyDGO0/s1600/nox2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9FllrJhBePMeectvqtz35PjSAMRu1zDYtYQuP00oKevB9nwzV2H6sGugub8Q_CG3Wyh30vOZJaWXNK8YSSWd5LZ5RjWfiSxm2GRPJfSiZS-3PkB5Y4BqJVMJmYE63xrhvT6S8xdyDGO0/s640/nox2.png" width="640" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;Selain itu, Nox App Player memiliki menu sidebar yang bisa sobat lihat pada bilah sebelah kanan. Pada bagian tersebut terlampir sejumlah fitur seperti&amp;nbsp;&lt;i&gt;screen capture,&lt;/i&gt;&amp;nbsp;&lt;i&gt;add APK, script record, video recording&lt;/i&gt;, hingga fitur unik bernama&amp;nbsp;&lt;i&gt;MultiPlayer&lt;/i&gt;.&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;Seluruh komponen perintah dari mulai tombol volume up, volume down, back, home, dan menu terlampir juga di sana.&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;Kelebihan lain yang ditawarkan emulator ini berada pada&amp;nbsp;&lt;b&gt;pengaturan yang fleksibel&lt;/b&gt;, mudah untuk dikonfigurasi sesuai selera. Hal ini pula yang tidak hadir di beberapa emulator Android pada umumnya.&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8_U6XnhspNLhsINfI1f1mKBOq3EmMPHoiq4NWWUpzSVgKOhLqMmebPIICEvXbS9k3K9USoy8c1T6u52BkS-vgQz6AimAUzB37BtdudG22EjUrTi1iFq-TVjg5uINarGOj21gvs1cIhSg/s1600/nox3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8_U6XnhspNLhsINfI1f1mKBOq3EmMPHoiq4NWWUpzSVgKOhLqMmebPIICEvXbS9k3K9USoy8c1T6u52BkS-vgQz6AimAUzB37BtdudG22EjUrTi1iFq-TVjg5uINarGOj21gvs1cIhSg/s640/nox3.png" width="640" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
nox angat mudah di gunakan untuk apa sajah seperti bermain game dan lain" jika sobat punya HP Android tapi tidak bisa bermain game yang super maka sobat gunakan NOX ini &amp;nbsp;untuk bermain game , dan sobat juga telah di bantu untuk memprogram keyboar untuk dapat berkomuniasi dengan game nya&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL4-4JhEYRGRfxiLc2qe4vFG6k1oDVUej7wnxXvsZNzmkyGYDo29gAvtRw4mYlyns6pcpn0vFcF0Y8BLRMT4lu3CWxAmKLdKZx9nNCGVleeMPI07HHupxefWSk0RZSAzYQnMC4VREsNFQ/s1600/nox+4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL4-4JhEYRGRfxiLc2qe4vFG6k1oDVUej7wnxXvsZNzmkyGYDo29gAvtRw4mYlyns6pcpn0vFcF0Y8BLRMT4lu3CWxAmKLdKZx9nNCGVleeMPI07HHupxefWSk0RZSAzYQnMC4VREsNFQ/s640/nox+4.png" width="640" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
Selain Bermain Game Sobat Juga bisa menjelaajah situs - situs Web dengan Internet yang Telah di Sediakan Oleh NOX ini, ataupun Sobat bisa download Aplikasi yang Lainnya untuk menjelajah Situs&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: center;"&gt;
&lt;a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKp2_PzUWuc_HF_plRromZeJX81QSF6pe3KzExZlEQ5qI_RpAFL8WVEo493YBlRfs6EiclNCIqIePSaWYVTB4x1ohXAD0EZiRvQKM9ZNjcXkHSQS-5NL8KJionfol621G4JVNJFnIM-Ck/s1600/nox+5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKp2_PzUWuc_HF_plRromZeJX81QSF6pe3KzExZlEQ5qI_RpAFL8WVEo493YBlRfs6EiclNCIqIePSaWYVTB4x1ohXAD0EZiRvQKM9ZNjcXkHSQS-5NL8KJionfol621G4JVNJFnIM-Ck/s640/nox+5.png" width="640" /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="separator" style="clear: both; text-align: left;"&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;Satu lagi, Nox App Player juga mengimplementasikan metode startup yang berbeda. Ketika dimulai, akan muncul jendela seperti gambar di atas dimana sobat harus menunggu waktu loading selama beberapa puluh detik.&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;Tetapi ketika emulator sudah resmi berjalan, maka semua aplikasi didalamnya pun telah siap untuk digunakan.&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 16px; text-align: justify;"&gt;
&lt;div&gt;
&lt;span style="background-color: white;"&gt;Metode instalasi file APK tidak harus melalui Play Store atau didownload melalui emulator, namun sobat bisa memilih cara opsional yakni cukup menyeret file APK dari&amp;nbsp;&lt;i&gt;Windows Explorer&lt;/i&gt;&amp;nbsp;komputer ke jendela Nox App Player.&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="background-color: white;"&gt;&lt;b&gt;Processor dengan frekuensi 2.2 GHz&lt;/b&gt;&amp;nbsp;dan kapasitas&amp;nbsp;&lt;b&gt;RAM sebesar 2GB&lt;/b&gt;&amp;nbsp;sanggup menjalankan emulator gratis ini dengan lancar. Tapi Untuk&lt;b&gt; RAM yang 1GB&lt;/b&gt; juga Bisa&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="background-color: white;"&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style="background-color: white;"&gt;Untuk Sobat Yang Ingin Mendownload nya Silahkan klik&amp;nbsp;&lt;a href="https://nox-app-player.en.softonic.com/download#downloading" target="_blank"&gt;DWONLOAD &lt;/a&gt;&lt;/span&gt;&lt;/div&gt;
&lt;span style="background-color: white;"&gt;&lt;br style="text-align: start;" /&gt;&lt;span style="text-align: start;"&gt;Ada pertanyaan? Silahkan tulis di kolom komentar :)&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class="blogger-post-footer"&gt;https://elementertech.blogspot.co.id/p/daftar-pos.html&lt;/div&gt;</description><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" height="72" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIpowTOnXVzPXoLKJEeLPXFIPlDaF5G-nB_4l1Ewm5o74SkRA3pruUnl3e50_uniOsBWHql1wq9TtrpsnbnWdoFwoKqI_SDSMg-NtAbHIwPNiHaXBQGHusC-JRm3D5ZW_TlPVtInuMeqU/s72-c/nox.png" width="72"/><thr:total xmlns:thr="http://purl.org/syndication/thread/1.0">0</thr:total></item></channel></rss>