Allmywebstfn

[Video] Cara Menginstall Xampp/Lampp di Ubuntu

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxXwvhQgqwik3mK0-Tbd0_8kUuFVi9UNErY6tXp8Hw42GSgPAg7cp9QHoAJJlqU5Tuumn5n5yjza0ZN3FQilaJzUHhC5rLvVNyerwbYm435vW9Q36RjTSVD3f5Iw4ihUoOu757AEotYc/s1600/xampp.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="351" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxXwvhQgqwik3mK0-Tbd0_8kUuFVi9UNErY6tXp8Hw42GSgPAg7cp9QHoAJJlqU5Tuumn5n5yjza0ZN3FQilaJzUHhC5rLvVNyerwbYm435vW9Q36RjTSVD3f5Iw4ihUoOu757AEotYc/s400/xampp.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Pada artikel sebelumnya saya sudah menjelaskan <a href="http://allmywebstfn.blogspot.com/2015/06/cara-menginstall-xampp-di-linux.html" target="_blank">Cara Menginstall Xampp di Linux</a>. Namun ada artikel ini saya hanya memberikan tutorial menginstall xampp/lampp di ubuntu versi videonya. Berikut ini videonya:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/JdtdnAEL1Bo/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/JdtdnAEL1Bo?feature=player_embedded" width="320"></iframe><br />
<br /></div>

[Video] Cara Menginstall Xampp/Lampp di Ubuntu

Pada artikel sebelumnya saya sudah menjelaskan Cara Menginstall Xampp di Linux . Namun ada artikel ini saya hanya memberikan tutorial me...

Lihat Lebih lanjut »

12:00 PM

Cara Menginstall Xampp di Linux

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxXwvhQgqwik3mK0-Tbd0_8kUuFVi9UNErY6tXp8Hw42GSgPAg7cp9QHoAJJlqU5Tuumn5n5yjza0ZN3FQilaJzUHhC5rLvVNyerwbYm435vW9Q36RjTSVD3f5Iw4ihUoOu757AEotYc/s1600/xampp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="351" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxXwvhQgqwik3mK0-Tbd0_8kUuFVi9UNErY6tXp8Hw42GSgPAg7cp9QHoAJJlqU5Tuumn5n5yjza0ZN3FQilaJzUHhC5rLvVNyerwbYm435vW9Q36RjTSVD3f5Iw4ihUoOu757AEotYc/s400/xampp.jpg" width="400" /></a></div>
 Pada kali ini saya akan memberikan tutorial bagaimana menginstall Xampp di Linux. Xampp merupakan webserver yang sudah terdapat PHP+Apache+Mysql dan lainnya. Sebelum melanjutkan tutorial ini sebaiknya anda mendownload terlebih dahulu file installasi xamppnya, anda dapat mendownloadnya di<a href="https://www.apachefriends.org/download.html" target="_blank">sini</a>. Pilih file sesuai dengan jenis linux anda jika tidak maka nantinya file xampp tidak dapat di jalankan.<br />
<br />
<div style="text-align: left;">
 Jika sudah didownload file xamppnya ikuti tutorial berikut ini :</div>
<ol style="text-align: left;">
<li>Pertama Buka terminal terlebih dahulu lalu masuk kedalam direktori tempat xampp di tempatkan. Saya contohkan saya meletakkan filenya di /home/reza/Unduhan untuk masuk ke dalam direktori itu tulis seperti ini<br /><br />$ cd /home/reza/Unduhan<br /><br />Sesuaikan dengan  letak direktori tempat installasi xampp anda<br /><br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3iE1e1Qnr_Vf8XOkWNp05GHS86Rfs6euIP3dAPGpoXwT_oGMMgHPgOcGi6kEcsCL8fOCY27vjNICFCOqExLGh5thOQftLKHyLh_j6Z6STFsu-wBQD2W80r8ZwVtudtpKopU_FGTpJWms/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3iE1e1Qnr_Vf8XOkWNp05GHS86Rfs6euIP3dAPGpoXwT_oGMMgHPgOcGi6kEcsCL8fOCY27vjNICFCOqExLGh5thOQftLKHyLh_j6Z6STFsu-wBQD2W80r8ZwVtudtpKopU_FGTpJWms/s400/1.png" width="400" /></a></div>
</li>
<li>Jika sudah masuk kedalam folder tempat installasi xampp. Ubah permission menjadi root lalu masukkan password root anda dengan cara seperti ini<br /><br />$ sudo su<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUCyXKR99HdPK152gUv8WEy_bRWk36NXeCay5kiGdSVu1wtY5bkw83J_3RiU4gO9b1zwHiMkBzwZ-AOD9l5kg-oswRas6tK0n3z-OvSJ_DJ6U-CVlhi8DBbSSzc2-Okt8wbkdJUOB5H9o/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUCyXKR99HdPK152gUv8WEy_bRWk36NXeCay5kiGdSVu1wtY5bkw83J_3RiU4gO9b1zwHiMkBzwZ-AOD9l5kg-oswRas6tK0n3z-OvSJ_DJ6U-CVlhi8DBbSSzc2-Okt8wbkdJUOB5H9o/s400/2.png" width="400" /></a></div>
</li>
<li>Jika sudah mengubah permission menjadi root langkah selanjutnya yaitu mengubah permission pada xampp seperti berikut<br /><br />$ chmod +x xampp-linux-x64-5.6.8-0-installer.run<br /><br />Sesuaikan dengan nama xampp yang anda download tadi.<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU5BXPYzwMCVg0lmGfap1EcX_yJkE2rcombJA9RqsHnRg8k6SK34GKo2unNFXKvXoVvVOFEJR2aVJS9RsmITAT9vg_nVUOOlKvRtLwhpRlu5nBGl1J8sWe-ah4XJ7Q0tYrdQTe1UavhH8/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU5BXPYzwMCVg0lmGfap1EcX_yJkE2rcombJA9RqsHnRg8k6SK34GKo2unNFXKvXoVvVOFEJR2aVJS9RsmITAT9vg_nVUOOlKvRtLwhpRlu5nBGl1J8sWe-ah4XJ7Q0tYrdQTe1UavhH8/s400/4.png" width="400" /></a></div>
</li>
<li>Sekarang saatnya menginstall xampp. Ketikkan di terminal seperti ini<br /><br />$ ./xampp-linux-x64-5.6.8-0-installer.run<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ggCT0_AWAUQQTqxSFVS3p5JgNJZw6seuM6sSpqLPsnTWJWVIuND8tWU-dGtUDW7f5nPkjN5vifyH0F_m6t85Qz6SaX01HsqBVDCgl0wuh8mHbOWrJ7NXL9rajo-3d0L2aIZ88sZcMFs/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ggCT0_AWAUQQTqxSFVS3p5JgNJZw6seuM6sSpqLPsnTWJWVIuND8tWU-dGtUDW7f5nPkjN5vifyH0F_m6t85Qz6SaX01HsqBVDCgl0wuh8mHbOWrJ7NXL9rajo-3d0L2aIZ88sZcMFs/s400/5.png" width="400" /></a></div>
<br />Nantinya akan muncul GUI Installasi xampp</li>
<li>Setelah muncul GUI Xampp klik next lalu pilih sesuai dengan kebutuhan dan klik next lagi.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi7CDvzYDE3hdE4TW9aqrgLfj6lRa_jjcZWL-dwAlZnn5vSpCsWskHJLAvKhf-fimRRfMKYpwGty8_3Jh13e7n2d12oA6O423VFKxDx8LD-w6GfyYVf4UrVQpTm7quGUa7c0pO-iKni7k/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi7CDvzYDE3hdE4TW9aqrgLfj6lRa_jjcZWL-dwAlZnn5vSpCsWskHJLAvKhf-fimRRfMKYpwGty8_3Jh13e7n2d12oA6O423VFKxDx8LD-w6GfyYVf4UrVQpTm7quGUa7c0pO-iKni7k/s400/6.png" width="400" /></a></div>
</li>
<li>Klik next hingga muncul proses installasi tunggu hingga beberapa saat hingga installasi selesai.</li>
<li>Nantinya akan muncul GUI Xampp lalu klik start pada service yang ingin dijalankan dan selamat anda sudah berhasil menginstall xampp di linux.</li>
</ol>
Semoga artikel ini bermanfaat bagi anda yang sedang menginstall xampp pada linux. Terima kasih telah berkunjung  </div>

Cara Menginstall Xampp di Linux

Pada kali ini saya akan memberikan tutorial bagaimana menginstall Xampp di Linux. Xampp merupakan webserver yang sudah terdapat PHP+Apa...

Lihat Lebih lanjut »

2:46 PM

Keajaiban Ilmiah Al-Qur'an

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://edyprayitno.files.wordpress.com/2010/11/al-quran4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://edyprayitno.files.wordpress.com/2010/11/al-quran4.jpg" width="320" /></a></div>
<br />
  Empat belas abad yang lalu, Allah menurunkan Al-Qur'an kepada umat manusia sebagai kitab penuntun dan Allah menyeru manusia untuk mengikuti Al-Qur'an agar dapat menemukan kebenaran. Banyak sekali temuan-temuan para ilmuwan-ilmuwan pada akhir-akhir abad ini. Namun tahukah kalian sebenarnya temuan-temuan itu sudah ada di dalam Al-Qur'an sejak 14 Abad yang lalu.<br />
<br />
   Gaya bahasa Al-Qur'an yang tak tertandingi, dan ilmu tinggi didalamnya adalah bukti nyata ia merupakan firman ilahi. Al-Qur'an memiliki sifat ajaib yang membuktikan bahwa ia adalah pengungkapan kebenaran dari Allah. Berikut ini temuan para ilmuwan yang sebenarnya sudah ada di dalam Al-Qur'an sejak 14 Abad yang lalu.<br />
<br />
<br />
<ol style="text-align: left;">
<li>Pembentukan Alam Semesta<br />Asal mula alam semesta di uraikan dalam Al-Qur'an dalam ayat berikut : <br /><br /><b>"Dia pencipta langit dan bumi. Bagaimana Dia mempunyai anak padahal Dia tidak</b><br /><b>  mempunyai istri. Dia menciptakan segala sesuatu. dan Dia mengetahui segala sesuatu"</b><br /><b>(Q.S. Al An'aam, 6:101)</b><br /><br />Bahwa seluruh alam semesta, bersamaan dengan dimensi dan waktu, muncul sebagai akibat dari ledakan besar yang terjadi dalam ketiadaan waktu yang dikenal sebagai "Big Bang" yang merupakan penjelasan yang masuk akal tentang pembentukan alam. Fakta yang ditemukan baru-baru ini oleh fisika modern, telah diumumkan dalam Al-Qur'an kepada kita pada 14 abad yang lalu.<br /></li>
<li>Perluasan Alam Semesta<br />Di dalam Al-Qur'an yang diturunkan 14 Abad yang lalu, ketika ilmu astronomi masih primitif, perluasan alam semesta telah digambarkan dalam Al-Qur'an seperti ini :<br /><br /><b>"Dan langit itu Kami bangun dengan kekuasaan(Kami) dan sesungguhnya Kamibenar-benar meluaskannya"(Q.S. Adz Dzaariyaat, 51:47)</b><br /><br />Kata langit pada ayat ditas digunakan di berbaga tempat dalam Al-Qur'an diungkapkan bahwa alam semesta mengalami "Peluasan". Dan baru dibuktikan bahawa langit mengalami perluasan pada akhir-akhir abad ini.<br /></li>
<li>Orbit<br />Ketika merujuk pada matahari dan bulan dalam Al-Qur'an, ditekankan bahwa masing-masing bergerak dalam orbitnya sendiri.<br /><br /><b>"Dan dialah yang telah menciptakan malam dan siang, matahari dan bulan. Masing-masing dari keduanya itu beredar pada garis edarnya" (Q.S.Al Anbiyaa',21:33)</b><br /><br />Menurut penelitian astronomi matahari bergerak dengan kecepatan sangat tinggi yaitu 720.000Km/Jam searah bintang Vega dalam orbit tertentu yang disebut <i>Solar Apex</i>. Berarti matahari bergerak kira-kira 17.280.000Km/Hari.<br /><br />Semua benda luar angkasa ini bergerak dalam orbit yang di perhitungkan dengan tepat. Selama bejuta-juta tahun, setiap benda langit ini "beredar" pada orbitnya sendiri dalam keselarasan dan keteraturan sempurna dengan benda langit lainnya.<br /></li>
<li>Lapisan Atsmosfer<br />Atsmosfer yang menyelimuti bumi mempunyai fungsi penting demi keseimbangan kehidupan. Seraya menghancurkan banyak meteor besar dan kecil yang mendekati bumi,atsmosfer mencegah mereka jatuh ke bumi. Atsmosfer membiarkan menerobos cahaya yang bermanfaat dan tidak berbahaya. Fakta ini sudah ada dalam Al-Qur'an Sejak 14 Abad yang lalu.<br /></li>
<li>Fungsi Gunung<br />Al-Qur'an mengarahkan  kita pada fungsi geologis yang penting dari gunung.<br /><br /><b>"Dan telah kami jadikan bumi ini gunung-gunung yang kokoh supaya bumi ini tidak tergoncang bersama mereka"</b><br /><br />Menurut penemuan ini, gunung-gunung muncul sebagai hasil pergerakan dan tumbukan dari lempengan-lempengan bertumbukan, lempengan lebih kuat menyelip dibawah lempengan yang satunya, sementara yang diatas melipat dan membentu dataran tinggi dan gunung. Sedangkan yang bergerak ke bawah bergerak di bawah permukaan dan membentuk perpanjangan yang kebawah.<br /></li>
<li>Sidik Jari Sebagai Identitas<br />Ketika dikatakan dalam Al-Qur'an bahwa mudah bagi Allah untuk menghidupkan manusia setelah kematiannya, Sidik jari manusia secara khusus di tekankan ;<br /><br /><b>"Bukankah demikian, sebenarnya Kami kuasa menyusun ujung-ujung jarinya dengan sempurna" (Q.S.Al Qiyamah, 75:4)</b><br /><br />Setiap orang yang hidup atau pernah hidup di dunia ini memiliki serangkaian sidik jari yang unik. Keunikan sidik jari ini baru di temukan di akhir abad ke 19. Akan tetapi dalam Al-Qur'an, Allah menunjuk sidik jari, yang sedikit pun tidak menarik perhatian orang pada saat itu, dan mengarahkan perhatian kita pada arti penting jari, yang mampu di pahami masa kini.</li>
</ol>
<div>
Mungkin masih banyak sekali keajaiban Al-Qur'an yang masih belum di tulis di artikel ini. Namun dikarenakan keterbatasan penulis Semoga artikel yang singkat ini bermanfaat bagi anda semua terlebih lagi kepada saya sendiri.</div>
</div>

Keajaiban Ilmiah Al-Qur'an

Empat belas abad yang lalu, Allah menurunkan Al-Qur'an kepada umat manusia sebagai kitab penuntun dan Allah menyeru manusia untuk ...

Lihat Lebih lanjut »

12:00 PM

Desain Layout Web Dasar

<div dir="ltr" style="text-align: left;" trbidi="on">
   Pada kali ini saya akan memberikan penjelasan mengenai struktur-struktur pada desain web dasar bagian layout. Bagian ini merupakan bagian paling penting karena biasanya suatu website akan terlihat menarik jika dilihat dari layoutnya. Berikut ini penjelsannya yang saya ambil dari artikel di website <a href="http://bertzzie.com/knowledge/desain-web-dasar/Layout.html" target="_blank">bertzzie.com</a> .<br />
 
<br />
<h2 style="text-align: left;">
Layout</h2>
<div>
Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar. Sama seperti tipografi, terdapat sangat banyak elemen-elemen pada layout, yang tentunya tidak akan dapat dibahas pada bagian ini sendiri. Pembahasan layout secara menyeluruh akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut dengan HTML dan CSS.</div>
<div>
</div>
<div>
Sebuah dokumen web seharusnya memiliki susunan layout seperti berikut.</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/WebLayoutElements.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="332" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/WebLayoutElements.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Elemen Header</b></div>
<div class="separator" style="clear: both;">
Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Elemen Navigation</b></div>
<div class="separator" style="clear: both;">
Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Elemen Sidebar</b></div>
<div class="separator" style="clear: both;">
Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Elemen Konten</b></div>
<div class="separator" style="clear: both;">
Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Elemen Footer</b></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Sebelum membuat layout, tentunya kita terlebih dahulu harus mengetahui cara pengukuran elemen pada HTML. Karena tanpa dapat mengukur elemen dengan benar, kita tidak akan dapat membuat layout yang bagus.</div>
<div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both; text-align: left;">
Box Model</h3>
<div>
<div>
Salah satu prinsip mendasar dalam menyusun elemen-elemen HTML ialah Box Model. Apa itu box model? Konsep box model pada dasarnya merupakan konsep yang menyatakan <b>bahwa elemen-elemen yang ada di dalam HTML adalah berbentuk kotak</b>. Sekali lagi, seluruh elemen HTML berbentuk kotak. Ukuran dari setiap elemen itu sendiri dipengaruhi oleh isi dari elemen, margin, padding, dan border dari elemen tersebut.</div>
<div>
</div>
<div>
Semua elemen juga dapat dikategorikan ke dalam dua cara penampilan, yaitu:</div>
</div>
<div>
</div>
<div>
<ul style="text-align: left;">
<li><b>Block Level Element </b>merupakan elemen yang selalu dimulai pada baris baru, dan menambahkan baris baru pada akhir elemen. Hal ini menyebabkan elemen yang bersifat block akan selalu berada pada baris barunya sendiri ketika dituliskan. Contoh dari elemen block: p, h1, dan blockquote.</li>
<li><b>Inline Level Elements</b> merupakan elemen yang tidak membuat baris baru ketika dibuat. Elemen ini akan mengikuti alur dokumen sebagaimana mestinya, dan memiliki ukuran tinggi yang ditentukan serta ukuran lebar yang sesuai dengan isi elemen. Contoh dari elemen inline: span, b, i.</li>
</ul>
<div>
<div>
Perlu diperhatikan bahwa karena sifatnya, sebuah elemen inline tidak akan dapat menampung elemen blok (memiliki elemen blok di dalamnya), sementara elemen blok dapat menampung elemen blok maupun inline.</div>
<div>
</div>
<div>
Kode di bawah memperlihatkan contoh perbedaan block level elemen dengan inline level element:</div>
</div>
</div>
<div>
</div>
<div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><h1>Elemen H1</h1>
<p>Elemen p otomatis membuka baris baru dari elemen h1, tetapi elemen
<b>bold</b> ini tidak</p></pre>
</div>
<div>
</div>
<div>
<div>
Jalankan kode di atas untuk melihat efeknya!</div>
<div>
</div>
<div>
Seperti yang telah dijelaskan sebelumnya, sebuah elemen HTML berbentuk kotak, dan ukurannya dipengaruhi oleh isi elemen, margin, padding, dan border. Kode berikut menunjukkan contoh total luas sebuah elemen, lakukan simpan kode ke dalam sebuah file HTML dan jalankan untuk melihat hasilnya:</div>
</div>
<div>
</div>
<div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #boxmodel {
                background: #CDE;
                border: 25px solid #ABC;
                height: 100px;
                margin: 25px;
                padding: 25px;
                width: 300px;
            }
        </style>
    </head>
    <body>
        <div>Box Model</div>
        <div id="boxmodel">
        </div>
        <div>Box Model</div>
    </body>
</html></pre>
</div>
<div>
</div>
<div>
Hasil dari eksekusi kode diatas adalah seperti berikut :</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/BoxModelExecute.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="255" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/BoxModelExecute.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Bagaimana panjang dan lebar dari kotak pada kode di atas? Berikut lihat selengkapnya.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/BoxModelMeasurement.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="250" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/BoxModelMeasurement.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
Seperti yang dapat dilihat pada gambar di atas, pengukuran total dari panjang elemen adalah:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
margin-right + border-right + padding-right + width + padding-left +</div>
<div class="separator" style="clear: both;">
border-left + margin-left</div>
<div class="separator" style="clear: both;">
dan tinggi total dari sebuah elemen adalah:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
margin-top + border-top + padding-top + height + padding-bottom +</div>
<div class="separator" style="clear: both;">
border-bottom + margin-bottom</div>
<div class="separator" style="clear: both;">
sehingga total dari panjang elemen tersebut yaitu 450px, dan total tinggi elemen ialah 250px.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Mari kita lihat properti-properti CSS yang mempengaruhi box model.</div>
<div class="separator" style="clear: both;">
<br /></div>
<h4 style="clear: both; text-align: left;">
Properti Height dan Width</h4>
<div>
<div>
Setiap elemen yang ada dalam HTML memiliki tinggi dan lebar yang standar, yang didapatkan dengan menyesuaikan ukuran konten. Tergantung kepada tujuan pembuatan dokumen, tinggi dan lebar standar yang diberikan oleh elemen mungkin saja tidak tepat digunakan. Properti height dan weight digunakan untuk mengubah tinggi dan lebar standar ketika dibutuhkan.</div>
<div>
</div>
<div>
Berikut adalah contoh pengunaan kedua properti ini:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">div {
    height: 20px;
    width: 30px;
}</pre>
<div>
</div>
<div>
Kedua properti ini hanya dapat digunakan untuk block level element.</div>
</div>
<div>
 
<br />
<h4 style="text-align: left;">
Properti Margin dan Padding</h4>
</div>
<div>
<div>
Setiap browser memberkan jarak antar elemen secara standar, agar elemen-elemen HTML dapat ditampilkan dengan optimal. Jarak antar elemen ini berbeda-beda, tergantung kepada browser yang mengimplementasikan. Untuk mengubah jarak antar elemen, kita dapat menggunakan properti margin.</div>
<div>
</div>
<div>
Terkadang kita juga ingin memberikan jarak di dalam elemen sendiri, yaitu jarak dari konten elemen ke pembatas (border) elemen. Jarak ini dikenal dengan nama padding. Padding kerap digunakan untuk memberikan warna latar yang baik pada elemen. Berikut adalah contoh kode pengunaan margin dan padding:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">div {
    margin: 10px;
    padding: 15px;
}</pre>
</div>
<div>
</div>
<div>
<div>
Sedikit catatan tambahan, properti padding dan margin dapat juga ditulis dengan singkat. Penulisan hanya dengan satu nilai seperti pada kode di atas akan menyebabkan nilai padding dan margin diimplementasikan pada keempat sisi elemen:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">p {
    margin: 40px;
}</pre>
<div>
Mengisikan dua nilai akan mengisikan nilai padding dan margin atas dan bawah pada nilai pertama, serta kiri dan kanan pada nilai kedua, seperti berikut:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">p {
    /*
        margin-top: 25px
        margin-bottom: 25px
        margin-left: 50px;
        margin-right: 50px;
    */
    margin: 25px 50px;
}</pre>
<div>
Dan seperti yang dapat ditebak, pengisian empat nilai akan dilakukan secara berurutan pada margin dan padding atas, kanan, bawah, dan kiri:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">p {
    /*
        margin-top: 10px
        margin-right: 20px;
        margin-bottom: 30px
        margin-left: 40px;
    */
    margin: 10px 20px 30px 40px;
}</pre>
<div>
Selain itu, kita juga dapat mengubah hanya satu bagian dari margin ataupun padding dengan menambahkan kata top, right, bottom, dan left setelah margin atau padding seperti berikut:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">p {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px
    margin-left: 40px;
}</pre>
</div>
<h3 style="text-align: left;">
Border</h3>
<div>
<div>
Border, sebagai pemberi tanda batas elemen memisahkan margin dan padding. Terdapat tiga properti utama yang membentuk sebuah border, yaitu border-width, border-style, dan border-color.</div>
<div>
</div>
<div>
<b>border-width</b></div>
<div>
Seperti namanya, properti ini menentukan ketebalan border, yang diisikan dengan nilai pixel. Contoh kode adalah sebagai berikut:</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">div {
    border-width: 10px;
}</pre>
<div>
<b>border-style</b></div>
<div>
Menentukan cara penampilan dari border. Pilihan nilai yang dapat diisikan yaitu: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, dan outset. Ingin mengetahui kegunaan masing-masing nilai? Silahkan coba implementasikan elemen tersebut! Jika tidak diisikan, maka secara otomatis nilai yang dipilih ialah none, sehingga border tidak akan tampak.</div>
<div>
</div>
<div>
Contoh kode:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">div {
    border-style: dotted;
}</pre>
<div>
<br />
<b>border-color</b></div>
<div>
Seperti namanya, memberikan warna kepada border. Jika warna tidak diberikan, maka border akan menjadi warna hitam. </div>
<div>
</div>
<div>
Contoh kode:</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">div {
    border-color: red;
}</pre>
<div>
<br />
Ketiga properti di atas seringkali digunakan bersamaan, karena ketergantungan antar properti tersebut dalam membuat border yang indah. Penggabungan ketiga properti dapat ditulis dalam properti border seperti berikut:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">div {
    border: 1px solid red;
}</pre>
<div>
<br />
Dan seperti yang dapat dilihat dari kode di atas, tentunya urutan penulisannya ialah border-width border-style border-color.</div>
<div>
</div>
<div>
Meskipun seluruh elemen pada dasarnya berbentuk kotak, CSS memungkinkan kita untuk menampilkan elemen dengan sedikit variasi, yaitu memberikan sudut bulat kepada elemen.</div>
</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/RoundedCornerSample.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="145" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/RoundedCornerSample.png" title="Desain Layout Web Dasar" width="320" /></a></div>
<div>
</div>
<div>
<div>
Kita dapat menggunakan properti border-radius untuk membuat efek sudut bulat, seperti pada kode di bawah:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">div {
    border-radius: 10px;
}</pre>
<div>
</div>
<div>
Selain pengisian dengan satu nilai, tentunya border-radius dapat diisikan dengan banyak nilai. Sayangnya, karena kompleksitas properti ini, maka pembahasan lebih jauh mengenai border-radius tidak akan dilakukan.</div>
</div>
<div>
</div>
<h3 style="text-align: left;">
Penyusunan Element</h3>
<div>
Pengukuran elemen dengan mengikut sertakan box model hanya merupakan sebagian pengetahuan yang diperlukan untuk membuat layout halaman yang sempurna. Pengetahuan lain yang harus dimengerti juga ialah cara menyusun elemen-elemen yang ada di dalam dokumen. Bagian ini akan membahas bagaimana menyusun elemen-elemen yang ada dalam dokumen, dengan berbagai teknik yang disediakan oleh HTML dan CSS.</div>
<div>
</div>
<h4>
Penampungan Element</h4>
<div>
<div>
Apa maksud dari “penampung” sebuah elemen? Elemen penampung ialah elemen yang memiliki banyak elemen-elemen lain di dalamnya. Misalnya, pada kode di bawah:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><p>
    Ini adalah sebuah paragraf, yang didalamnya terdapat
    elemen <b>bold</b>, <i>italic</i>, <em>emphasis</em>,
    dan <strong>strong</strong>.
</p></pre>
<div>
Pada kode di atas, elemen p merupakan penampung dari elemen b, i, em, dan strong. Bagaimana jika kita tidak ingin menggunakan p untuk menampung seluruh elemen-elemen yang ada? Untuk menampung elemen-elemen secara generik, kita dapat menggunakan elemen div. Elemen div merupakan elemen yang dirancang sebagai penampung dari elemen lainnya, sehingga elemen ini tidak memiliki makna semantik. Kita dapat menggunakan div untuk menampung berbagai elemen, tanpa batasan, misalnya:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><div class="wrapper">
    <section id="articles">
        <article>
            
        </article>
        <article>
            
        </article>
        <article>
            
        </article>
    </section>
    <aside>
        <nav>
            
        </nav>
    </aside>
</div></pre>
<div>
Dapat dilihat bagaimana div.wrapper di atas menampung banyak elemen-elemen blok lainnya. Dengan kode HTML di atas, panjang dari elemen-elemen yang ada di dalam div.wrapper tidak akan pernah lebih panjang dibandingkan dengan div.wrapper itu sendiri. Coba jalankan kode di bawah untuk melihat bagaimana elemen-elemen yang ada di dalam div.wrapper tidak dapat melewati ukuran div.wrapper itu sendiri:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .wrapper {
                background: red;
                color: white;
                height: 600px;
                width: 800px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <p>
            Proin nec rhoncus, quis, elementum amet parturient augue
            sagittis dictumst in dolor scelerisque pid, sociis enim
            porttitor et, porta porttitor. Tincidunt egestas ultricies,
            scelerisque.
            </p>
            <p>
            Dis augue, in elementum lundium lectus porttitor duis turpis
            dis. Nisi vel porta turpis arcu nec diam penatibus, et sit
            integer enim scelerisque ut amet? Nascetur nisi parturient
            lundium augue?
            </p>
            Odio sagittis cursus et ut ridiculus pulvinar habitasse,
            elementum et tristique non, nisi porttitor magna! Tristique
            adipiscing penatibus sed nunc. Non pulvinar vut porttitor!
            Odio nisi porttitor sit tincidunt dictumst, massa rhoncus.
            Sociis enim habitasse enim, nunc nascetur, ridiculus, et mus
            nascetur, augue ultricies aliquet mus a adipiscing amet?
            </p>
        </div>
            <p>
            Proin nec rhoncus, quis, elementum amet parturient augue
            sagittis dictumst in dolor scelerisque pid, sociis enim
            porttitor et, porta porttitor. Tincidunt egestas ultricies,
            scelerisque.
            </p>
            <p>
            Dis augue, in elementum lundium lectus porttitor duis turpis
            dis. Nisi vel porta turpis arcu nec diam penatibus, et sit
            integer enim scelerisque ut amet? Nascetur nisi parturient
            lundium augue?
            </p>
    </body>
</html></pre>
<div>
Ketika kode dijalankan maka hasilnya adalah sebagai berikut:</div>
</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDiv.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="297" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDiv.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div>
Perhatikan bagaimana paragraf yang berada di luar div.wraapper dapat melewati 800px (panjang dari div.wrapper) sementara paragraf yang berada di dalam div.wrapper harus berpindah baris ketika mencapai ujung dari div.wrapper.</div>
<div>
</div>
<h4 style="text-align: left;">
Floating Element</h4>
<div>
<div>
Bagaimana dengan penyusunan elemen yang berada di dalam penampung? Salah satu cara untuk mengorganisasikan posisi elemen yang saling bersisian ialah menggunakan properti float. Properti float memungkinkan kita membuat sebuah elemen “mengapung” pada sisi kiri ataupun kanan dari penampung elemen tersebut. Untuk lebih mudahnya, mari kita lihat cara kerja dari elemen float secara langsung!</div>
<div>
</div>
<div>
Ganti kode CSS dari kode pada gambar Hasil Eksekusi Kode div.wrapper menjadi kode berikut:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">.wrapper {
    background: red;
    color: white;
    height: 600px;
    width: 800px;
}

.wrapper p {
    background: blue;
    color: white;
    float: left;
    margin: 10px;
    padding: 10px;
    width: 200px;
}</pre>
<div>
</div>
<div>
dan kemudian jalankan. Anda akan dapat melihat bagaimana paragraf-paragraf di dalam div.wrapper menjadi berukuran kecil, dan “terbang” saling bersisian, ke arah kiri. Paragraf yang paling pertama kali dituliskan akan menjadi paragraf yang paling kiri, dan seterusnya.<br />
 
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDivFloatLeft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="136" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDivFloatLeft.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">Hal lainnya yang perlu diperhatikan ialah bahwa properti float merusak alur dari halaman. Apa artinya merusak alur dari halaman? Ketika menggunakan properti ini maka elemen-elemen lain akan menjadi terpaksa mengikuti aturan kanan maupun kiri dari float. Misalnya, jika kita menambahkan sebuah h1 setelah paragraf ketiga, sehingga isi dari div.wrapper adalah sebagai berikut:

<div class="wrapper">
    <p>
    Proin nec rhoncus, quis, elementum amet parturient augue sagittis
    dictumst in dolor scelerisque pid, sociis enim porttitor et, porta
    porttitor. Tincidunt egestas ultricies, scelerisque.
    </p>
    <p>
    Dis augue, in elementum lundium lectus porttitor duis turpis dis.
    Nisi vel porta turpis arcu nec diam penatibus, et sit integer enim
    scelerisque ut amet? Nascetur nisi parturient lundium augue?
    </p>
    <p>
    Odio sagittis cursus et ut ridiculus pulvinar habitasse, elementum
    et tristique non, nisi porttitor magna! Tristique adipiscing
    penatibus sed nunc. Non pulvinar vut porttitor! Odio nisi porttitor
    sit tincidunt dictumst, massa rhoncus. Sociis enim habitasse enim,
    nunc nascetur, ridiculus, et mus nascetur, augue ultricies aliquet
    mus a adipiscing amet?
    </p>
    <h1>Ini adalah sebuah judul yang terpengaruh float.</h1>
</div>

Maka elemen h1 tersebut akan secara otomatis mengikuti alur elemen-elemen p sebelumnya, dan mulai dari akhir elemen p terakhir, seperti pada gambar berikut:</pre>
</div>
</div>
<div>
 
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDivFloatRightWithH1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="151" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDivFloatRightWithH1.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">Bagaimana jika kita ingin memaksa h1 kembali ke alur halaman yang benar? Untuk menghapus segala “jejak” dari float dan mengembalikan alur halaman ke alur normal, kita dapat menggunakan properti clear. Tambahkan kode CSS berikut:

.wrapper h1 {
    clear: both;
}

maka elemen h1 akan secara otomatis membuka baris baru, sesuai dengan alur halaman yang seharusnya.</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDivClear.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="152" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDivClear.png" title="Desain Layout Web Dasar" width="400" /></a></div>

<br />
<h4 style="text-align: left;">
Pembangunan Layout Web Dasar</h4>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/WebLayoutElements.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="332" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/WebLayoutElements.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div>
<div>
Bagaimana kita dapat membangun layout seperti pada gambar di atas? Berdasarkan apa yang telah kita pelajari sejauh ini, tentunya anda telah dapat membayangkan apa yang harus dilakukan. Sederhananya: width dan height pada seluruh elemen, float pada sidebar dan content, serta clear pada footer. Perlu diingat juga bahwa pada dokumen web yang sebenarnya, properti height jarang digunakan karena tinggi elemen biasanya ditentukan oleh isi dari elemen itu sendiri.</div>
<div>
</div>
<div>
Untuk membuat layout seperti pada gambar Elemen-elemen Layout pada Dokumen Web, kita dapat menggunakan kode HTML dan CSS berikut:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><!DOCTYPE html>
<html>
    <head>
        <title>Layout Dasar Dokumen Web</title>
        <style type="text/css">
            body {
                width: 960px;
            }

header, nav, aside, section, footer {
                background: #14BCE6;
                border: 1px solid white;
                color: white;
                font-size: 2em;
                font-variant: small-caps;
                text-align: center;
            }
            header, nav, footer {
                width: 100%;
            }

header, footer {
                height: 100px;
            }
            nav {
                height: 50px;
            }

aside {
                float: left;
                height: 250px;
                width: 29.5%;
            }
            section#content {
                float: right;
                height: 250px;
                width: 70%;
            }

footer {
                clear: both;
            }
        </style>
    </head>
    <body>
        <header>Header</header>
        <nav>Navigation</nav>
        <aside>Sidebar</aside> <section id="content">Content</section>
        <footer>Footer</footer>
    </body>
</html></pre>
<div>
</div>
<div>
Eksekusi kode, dan kita akan dapat melihat hasil eksekusi sebagai berikut:</div>
</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/HTMLStandardLayoutDiv.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="210" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/HTMLStandardLayoutDiv.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div>
<div>
Cara membuat teks yang ada di dalam elemen-elemen HTML berada di tengah secara vertikal akan dibiarkan untuk menjadi latihan bagi pembaca.</div>
<div>
</div>
<div>
Perhatikan juga bahwa kode yang digunakan untuk membuat tampilan di atas tidak lagi terurut sesuai dengan penulisan kode, seperti pada gambar di bawah:</div>
</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/CodetoPage.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="278" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/CodetoPage.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<h4 style="text-align: left;">
Clear Fix</h4>
<div>
Salah satu permasalahan utama dari pengunaan float ialah ketika kita menggunakan sebuah elemen kontainer yang hanya menampung elemen float saja. Karena sifat utama dari float yang “menerbangkan” elemen, maka kontainer menjadi dianggap tidak memiliki tinggi, dan elemen-elemen lain akan langsung berada di bawah elemen kontainer tersebut. Penjelasan mengenai bagaimana menyelesaikan masalah ini telah diberikan sebelumnya, pada bagian Floating Element, di mana kita menggunakan kode CSS berikut:</div>
<div>
</div>
<div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">.wrapper h1 {
    clear: both;
}</pre>
<div>
untuk menyelesaikan masalah. Sayangnya, kode di atas tidak menyelesaikan seluruh masalah yang ada, karena jika kita tidak mengetahui dengan pasti di mana elemen selanjutnya akan diletakkan, maka kode di atas tidak akan dapat bekerja dengan baik. Metode lain untuk membersihkan float ialah dengan menggunakan teknik “clear fix”, yang kodenya dapat dilihat sebagai berikut:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">.container {
    margin: 0;
    padding: 0;
}

.container:before,
.container:after {
    content:"";
    display:table;
}
.container:after {
    clear:both;
}</pre>
<div>
Pada prinsipnya, kode di atas membersihkan float dengan clear: both dan penambahan sebuah tabel “dummy” sebelum dan sesudah elemen penampung.</div>
</div>
<div>
</div>
<h3 style="text-align: left;">
Grid</h3>
<div>
<div>
Sebuah layout yang baik menyusun elemen-elemen halaman dengan rapi dan mudah diprediksi. Kemudahan prediksi penting agar pembaca / pengguna web anda tidak perlu berpikir dalam menggunakan web anda. Ingat, “Don’t Make Me Think” merupakan salah satu prinsip dasar dalam pembuatan antarmuka web dan aplikasi secara general. Salah satu cara untuk membuat halaman lebih mudah diprediksi ialah dengan menggunakan garis pembantu penyusunan elemen, yang dikenal dengan nama “Grid” pada dunia web.</div>
<div>
</div>
<div>
Sebagai garis pembantu dalam menyusun elemen, Grid dibuat dalam berbagai bentuk dan ukuran, sesuai dengan keperluan. Penempatan elemen dilakukan di dalam sebuah Grid, ataupun di dalam beberapa Grid. Pemakaian Grid umumnya dilakukan untuk menyusun elemen secara merata. Untuk lebih mudahnya, perhatikan gambar berikut:</div>
</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/DrupalGridSample.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="323" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/DrupalGridSample.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div>
Pada gambar Contoh Pengunaan Grid pada Drupal, kita dapat melihat bagaimana situs Drupal dibangun menggunakan 12 buah Grid, yang masing-masing elemennya disusun berdasarkan Grid tersebuut. Elemen feature Drupal, yang berada di paling atas halaman, mengambil ruang 12 Grid, sementara 3 elemen informasi mengenai drupal masing-masing mengambil 4 Grid. Penyusunan seperti ini kerap kali ditemukan dalam banyak website-website lain, dengan ukuran Grid yang berbeda-beda.</div>
<div>
</div>
<h3 style="text-align: left;">
Pembuatan Grid</h3>
<div>
<div>
Pembuatan Grid dapat dilakukan dengan mudah, dengan melakukan pembagian terhadap ukuran halaman web yang ingin dibangun dengan jumlah kolom Grid yang diinginkan, dengan memperhitungkan Box Model juga tentunya. Misalkan, jika ingin membuat halaman berukuran 960 px memiliki 12 Grid, kita dapat melakukan perhitungan berikut:</div>
<div>
</div>
<div>
lebar_grid = 960 / 12</div>
<div>
lebar_grid = 80 px</div>
<div>
dan dengan memperkirakan box model, jika ingin setiap kolom memiliki jarak 20 px kita dapat menambahkan margin ke kiri dan ke kanan pada setiap kolom, sebanyak setengah dari jarak yang diinginkan (10 px), seperti berikut:</div>
<div>
</div>
<div>
konten_grid = 80 - jarak</div>
<div>
            = 80 - 20</div>
<div>
            = 60 px</div>
<div>
Sehingga ukuran margin kiri dan kanan dari elemen adalah:</div>
<div>
</div>
<div>
margin_kiri_kanan = jarak / 2</div>
<div>
                  = 20 / 2</div>
<div>
                  = 10 px</div>
<div>
Dengan perhitungan yang telah dilakukan, maka kita dapat memperkirakan bentuk dari sebuah Grid adalah sebagai berikut:</div>
</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/SingleGridCalculation.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="77" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/SingleGridCalculation.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div>
dan dengan mengurutkan kedua belas Grid tersebut, kita bisa mendapatkan sebuah halaman yang berukuran 960 px. Tentunya dengan prinsip yang sama kita juga dapat membuat Grid yang merupakan gabungan dari 2 Grid, 3 Grid, sampai 12 Grid!</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/TheGrid.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="202" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/TheGrid.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div>
<div>
Pembuatan kode Grid menggunakan CSS sendiri sangatlah sederhana. Kita dapat memulai pembuatan kode dengan memberikan nama kelas, untuk setiap ukuran Grid. Misalnya, kita menggunakan nama kelas “coln” untuk setiap kolom Grid, dengan n adalah lebar kolom yang diinginkan. Misalnya, kolom berukuran 2 Grid akan memiliki nama kelas col2, 4 kolom memiliki nama kelas col4, dan seterusnya.</div>
<div>
</div>
<div>
Untuk mengawali, hilangkan padding, margin atas bawah, dan berikan warna serta float kepada seluruh kolom yang ada:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">.col1, .col2, .col3, .col4,
.col5, .col6, .col7, .col8,
.col9, .col10, .col11, .col12 {
    background: #CCC;
    display: block;
    float: left;
    height: 30px;
    line-height: 30px;
    margin: 0 10px 0 10px;
    padding: 0;
    text-align: center;
}</pre>
<div>
Kemudian, kita dapat mengaplikasikan perhitungan yang telah dilakukan sebelumnya ke masing-masing ukuran kolom:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">.col1 {
    width: 60px;
}

.col2 {
    width: 140px;
}
.col3 {
    width: 220px;
}

.col4 {
    width: 300px;
}

.col5 {
    width: 380px;
}
.col6 {
    width: 460px;
}

.col7 {
    width: 540px;
}
.col8 {
    width: 620px;
}

.col9 {
    width: 700px;
}
.col10 {
    width: 780px;
}

.col11 {
    width: 860px;
}
.col12 {
    width: 940px;
}</pre>
<div>
dan kemudian, tentunya container dan clearfix untuk setiap container yang ada:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">.container {
    background: #555;
    margin: 0;
    padding: 0;
    width: 960px;
}
.container:before,
.container:after,
.row:before,
.row:after {
    content:"";
    display:table;
}
.container:after,
.row:after {
    clear:both;
}

.row {
    clear: both;
    margin: 10px 0 10px 0;
}</pre>
<div>
Untuk melihat efeknya, simpan seluruh kode CSS di atas ke dalam sebuah file bernama grid.css, dan jalankan kode HTML berikut:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><!DOCTYPE html>

<html>
    <head>
        <title>Contoh Grid pada HTML</title>
        <link rel="stylesheet" href="grid.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
            </div>

<div class="row">
                <div class="col12">12</div>
            </div>
        </div>
    </body>
</html></pre>
<div>
</div>
<div>
Jalankan kode HTML di atas, untuk melihat hasil seperti pada gambar Grid, dari 1 Grid sampai gabungan 12 Grid.<br />
Konten ini bukan saya yang menulis melainkan saya mengcopy dari website <a href="http://bertzzie.com/knowledge/desain-web-dasar/Layout.html" target="_blank">bertzzie.com</a></div>
</div>
</div>

Desain Layout Web Dasar

Pada kali ini saya akan memberikan penjelasan mengenai struktur-struktur pada desain web dasar bagian layout. Bagian ini merupakan bagia...

Lihat Lebih lanjut »

12:00 PM

Cara Membuat Random Angka dan Huruf Menggunakan PHP

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://c1.staticflickr.com/5/4027/4390818294_16a76dfff7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Random Angka dan Huruf Menggunakan PHP" border="0" height="240" src="https://c1.staticflickr.com/5/4027/4390818294_16a76dfff7.jpg" title="Cara Membuat Random Angka dan Huruf Menggunakan PHP" width="320" /></a></div>
<br />
   Kali ini saya akan memberikan tutorial bagaimana caranya membuat random angka dan huruf menggunkaan php.Random angka dan huruf sangat berguna sekali bagi kita yang sedang membuat suatu website. Biasanya random anka dan huruf ini digunakan untuk email konfirmasi, captcha dan password yang disesuaikan dengan pemilik website. Dengan seperti ini kita dapat membuat suatu password atau sebagainya yang tidak akan sama satu dengan lainnya. Dan juga dapat mempersulit orang yang tidak bertanggung jawab melakukan hal yang tidak wajar.<br />
<br />
Baiklah perhatikan script dibawah ini.<br />
<br />
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><?php
$text = 'abcdefghijklmnopqrstuvwxyz123457890';
$panj = 50;
$txtl = strlen($text)-1;
$result = '';
for($i=1; $i<=$panj; $i++){
 $result .= $text[rand(0, $txtl)];
}
echo $result;
?>

</pre>
<br />
<b>Penjelasan :</b><br />
<br />
<ol style="text-align: left;">
<li>Pada baris ke 1 merupakan pembuka dalam php</li>
<li>Pada baris ke 2 dimana variable text diberi nilai huruf dan angka.</li>
<li>Pada baris ke 3 variable panj diberi nilai 50 yang nantinya digunakan untuk menentukan panjang string.</li>
<li>Pada baris ke 4 variable txtl diberi nilai dengan jumlah karakter pada variable text  yang dikurangi 1.</li>
<li>Pada baris ke 5 dibuat variable result yang nantinya akan menampung hasil dari random.</li>
<li>Pada baris ke 6 dilakukan for dengan melakukan perulangan pada variable panj tadi.</li>
<li>Pada baris ke 7 variable result diisi dengan array text yang di random</li>
<li>Pada baris ke 8 dilakukan penutupan pengulangan for</li>
<li>Pada baris ke 9 hasil result tadi di outputkan.</li>
<li>Pada baris ke 10 merupakan penutup dalam php.</li>
</ol>
<div style="text-align: center;">
<a href="http://rezajuliandri.ga/demo/php/random.php" target="_blank">Klik tulisan ini untuk melihat demo dari script diatas</a></div>
<div style="text-align: center;">
<br /></div>
<div>
Semoga artikel ini bermanfaat bagi anda. Jika terdapat error coba mengecek script yang anda buat.</div>
</div>

Cara Membuat Random Angka dan Huruf Menggunakan PHP

Kali ini saya akan memberikan tutorial bagaimana caranya membuat random angka dan huruf menggunkaan php.Random angka dan huruf sangat...

Lihat Lebih lanjut »

12:00 PM

Alasan Sistem Pendidikan di Finlandia Menjadi Yang Terbaik di Dunia

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://media.smithsonianmag.com/images/Finland-Kirkkojarvi-School-631.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Alasan Sistem Pendidikan Pada Finlandia Menjadi Yang Terbaik di Dunia" border="0" height="304" src="http://media.smithsonianmag.com/images/Finland-Kirkkojarvi-School-631.jpg" title="Alasan Sistem Pendidikan Pada Finlandia Menjadi Yang Terbaik di Dunia" width="640" /></a></div>
<br />
  Pendidikan adalah salah satu aspek paling penting dalam kehidupan kita. Dengan pendidikan kita bisa memajukan taraf hidup dan menjalani kehidupan yang lebih bermartabat. Begitu pentingnya pendidikan dalam kehidupan kita, sehingga di sekeliling kita terdapat banyak sekali orang yang berjuang mati-matian untuk kelangsungan pendidikan.<br />
<div>
<br /></div>
<div>
Finlandia adalah salah satu negara dengan sistem pendidikan terbaik di dunia dalam berbagai versi, termasuk versi World Economy Forum. Pada tahun 2000, negara ini bahkan berhasil mencapai tingkat Literacy (kemampuan baca) hingga 100 persen, yang artinya tidak ada satupun warganya yang buta huruf. Negara ini juga memakai sistem pendidikan yang sama sejak tahun 1970. Apa yang membuat pendidikan di negara mereka sangat maju? Ini rahasianya.<br />
<br />
<br />
<ol style="text-align: left;">
<li><b>Anak-Anak Tidak Boleh Sekolah Sebelum Berumur 7 Tahun</b>  <br />   Di negara ini, tidak akan ada yang menerima murid jika umur murid tersebut belum genap 7 tahun. Semua anak yang berumur di bawah 7 tahun hanya diperbolehkan bermain, tanpa beban untuk sekolah. Hal ini diterapkan karena menurut pemerintah Finlandia, otak anak justru akan rusak jika diberikan pelajaran seperti membaca atau menghitung sebelum usia mereka cukup. Di umur-umur tersebut anak-anak sebaiknya dibiarkan lebih banyak bermain dan mengeksplorasi dunianya.<br /><br />   Sebenarnya, pemerintah Indonesia juga menerapkan aturan ini. Di Indonesia, usia yang diperbolehkan untuk masuk ke Sekolah Dasar adalah 7 tahun. Di bawah umur tersebut, anak-anak hanya diperbolehkan belajar di Taman Kanak-kanak atau Playgroup, dimana membaca, menulis dan mengenal huruf dan angka tidak termasuk dalam kurikulum. Anak-anak hanya diajari mengenal warna, bentuk, tekstur dan melatih motorik kasarnya. Tapi sudah menjadi rahasia umum, TK dan Playgroup di Indonesia secara sembunyi-sembunyi mengajarkan baca-tulis-hitung pada muridnya. Orangtua muridpun seolah bangga jika anaknya bisa membaca dalam usia sedini mungkin, padahal hal itu justru merusak daya imajinasi si anak, yang harusnya menghabiskan waktu untuk bermain.<br /></li>
<li><b>Setiap Kelas Hanya Diperbolehkan Diisi 16 Anak</b><br /><br />     Di Finlandia, anda tidak akan pernah menemukan kelas yang penuh sesak dengan murid. Di negara ini, setiap kelas dibatasi hanya untuk 16 murid saja. Ini membuat para murid memiliki ruang gerak yang lebih luas, sehingga mereka memiliki ruang untuk bereksperimen dan membuat alat-alat praktek dari apa yang telah mereka pelajari di kelas. Namun ruang kelas bukanlah satu-satunya tempat belajar. Di negara ini, kebanyakan kegiatan belajar-mengajar dilakukan di luar ruangan agar suasana tidak membosankan bagi para murid.<br /><br />   Sayang sekali di Indonesia, kita masih sering menemukan kelas yang dipenuhi oleh 40 murid dalam sekelas, atau bahkan lebih. Murid-murid harus duduk di bangku dan meja yang berderet sempit, bahkan tidak ada ruang untuk sekadar “meluruskan” kaki ketika sedang menulis. Selain membuat anak-anak susah konsentrasi, ruang belajar seperti ini bisa saja menimbulkan penyakit karena posisi belajar yang tidak nyaman. Kita tahu kebiasaan duduk yang tidak benar dalam jangka waktu lama bisa berakibat kerusakan sejumlah syaraf atau bahkan tulang.<br /></li>
<li><b>Pendidikan Dibiayai 100% Oleh Pemerintah</b><br /><br />   Finlandia adalah satu dari sedikit sekali negara yang memberikan pendidikan yang benar-benar gratis kepada rakyatnya. Seluruh jenjang pendidikan di negara ini tidak memungut bayaran apapun. Di sini, anda bisa mendapatkan pendidikan gratis mulai dari Sekolah Dasar, Sekolah Menengah, Sekolah Menengah Atas, hingga kuliah. Bahkan jika anda sudah lulus kuliah, sudah bekerja dan memiliki anak, jika anda ingin mempelajari sesuatu, anda akan diberi sekolah lanjutan gratis sesuai minat anda. Lebih keren lagi, seluruh sekolah di Finlandia menyediakan makanan gratis bagi para muridnya setiap hari.<br /><br />   Sementara di Indonesia, meski sudah ada Bantuan Dana Operasional Sekolah dan dana bantuan lainnya, kita masih tidak lepas dari cerita-cerita sedih tentang perjuangan mereka yang kesulitan meneruskan sekolah. Sebuah SMA Negeri di Jakarta, misalnya, “bertarif” mencapai belasan juta per tahunnya. Belum lagi Universitas Negeri yang menyediakan sedikit sekali beasiswa dibanding para mahasiswa yang membutuhkannya.<br /></li>
<li><b>Tidak Ada Sistem "Pintar" Dan "Bodoh"<br /><br />   </b>Setelah anak usia 7 tahun masuk di sekolah di Finlandia, pihak sekolah tidak akan melakukan tes apapun. Tugas mereka hanyalah belajar, dan tidak ada label “pintar” atau “bodoh”. Semua anak akan diarahkan menurut minat dan bakatnya masing-masing tanpa adanya pemaksaan. Setelah enam tahun berada di sekolah, barulah diadakan tes resmi untuk mengukur kemampuan si anak. Tes tersebut hanya bertujuan mengukur kemampuan, bukan untuk memberi rangking 1 dan seterusnya. Sehingga, tidak ada anak yang merasa dirinya “gagal” karena mendapat nilai buruk di kelas. Semua yang mendapat hasil tes kurang baik, akan dibimbing lebih intens.<br /><br />   Di Indonesia, sadar atau tidak, kita sering menghancurkan kepercayaan diri seseorang dengan label “bodoh”. Anak yang mendapat ranking paling bawah dikelas sering kali dikucilkan temannya atau bahkan jadi minder dan menarik diri dari pergaulan. Anak seperti ini justru butuh lebih dibimbing, namun di Indonesia, siapa yang dapat ranking paling atas, itulah yang dijadikan “anak emas” oleh para guru. Sementara anak yang dapat ranking jelek, akan terlupakan atau bahkan dianggap tidak ada. Kita bahkan memiliki sebuah sistem yang membuat anak-anak dengan rangking jelek semakin minder yaitu “sistem tinggal kelas”. Anak yang tinggal kelas seringkali menjadi sasaran “bully” dan semakin terpuruklah dia.<br /></li>
<li><b>Para Guru Diambil Dari Kalangan Terbaik<br /><br />   </b>Syarat menjadi guru di Finlandia cukuplah ketat. Mereka harus memiliki gelar master (S2) dan harus masuk dari jajaran 10 persen lulusan terbaik dari Universitasnya. Di negara ini menjadi guru adalah sebuah kehormatan. Menjadi guru di Finlandia adalah kebanggaan yang sama seperti menjadi dokter ataupun pengacara ternama. Guru-guru di sini juga dibayar dengan sangat baik oleh pemerintah dan tidak ada batasan maksimal bagi gaji guru.<br /><br />   Guru di Finlandia memiliki komitmen yang sangat tegas dan bekerja dengan sangat keras. Mereka akan mengunjungi rumah muridnya untuk sekadar “bermain” dan menanyakan apakah muridnya butuh bantuan untuk pelajaran tertentu. Guru profesional di Finlandia juga hanya bekerja selama 4 jam sehari. 4 jam tersebut mereka maksimalkan dengan seluruh kemampuan. Beda dengan guru di Indonesia yang harus mengajar dari pukul delapan pagi hingga sore hari, belum lagi ditambah dengan les-les dan semacamnya. Tentu saja konsentrasi mengajar tidak penuh</li>
</ol>
<div>
<div>
   Meski tidak adil jika membandingkan Indonesia dan Finlandia secara utuh-utuh, namun kita tentu bisa meniru hal-hal yang menjadikan Finlandia menjadi negara maju. Kita harus memperbaiki banyak sekali aspek dari sistem pendidikan kita. Pemerintah juga harus mengambil peranan penting dari pendidikan bangsa.</div>
</div>
</div>
<div>
<br />   Namun, di luar itu semua, kita juga adalah bagian dari sistem pendidikan. Kita bisa memperbaiki sistem ini jika kita mau mengubah kebiasaan buruk kita. Mungkin yang paling mudah adalah dengan tidak gampang melabeli anak-anak dengan kata “bodoh” atau berhenti memaksa anak kita belajar sebelum waktunya.<br /><br />Dari berbagai macam Sumber.</div>
<div>
</div>
</div>

Alasan Sistem Pendidikan di Finlandia Menjadi Yang Terbaik di Dunia

Pendidikan adalah salah satu aspek paling penting dalam kehidupan kita. Dengan pendidikan kita bisa memajukan taraf hidup dan menjalan...

Lihat Lebih lanjut »

7:26 PM

Cara Mengatasi Display Picture BBM Tidak Muncul

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl1uH8y2qWDmfeIn5RJoqaip4VozLLEP_ofjgzF-Z4T4fEy3DXoctZKVrnjH6GXSCOyuS4058ROO0Sycg6p35BL4iaw-BjHPkhHntMdYf4-jANbFh2-MjnjGwpzbRvF-G9gC6FOgAFcwg/s1600/bbm.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mengatasi Display Picture BBM Tidak Muncul" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl1uH8y2qWDmfeIn5RJoqaip4VozLLEP_ofjgzF-Z4T4fEy3DXoctZKVrnjH6GXSCOyuS4058ROO0Sycg6p35BL4iaw-BjHPkhHntMdYf4-jANbFh2-MjnjGwpzbRvF-G9gC6FOgAFcwg/s1600/bbm.png" title="Cara Mengatasi Display Picture BBM Tidak Muncul" /></a></div>
<div>
<br /></div>
Mungkin kalian pernah menggunakan bbm namun dp(display picture) teman anda menggunakan dp default dari bbm. Padahal mereka menggunakan dp yang bermacam-macam. Dengan dp tidak muncul maka akan sangat menganggu sekali kegiata social media anda dengan aplikasi ini.<br />
<div>
Biasanya ini disebabkan oleh faktor koneksi pada bbm anda dan faktor cache. </div>
<div>
<br /></div>
<div>
<ol style="text-align: left;">
<li>Koneksi<br />Pastikan koneksi anda  stabil. Bisa jadi itu diakibatkan koneksi anda yang tidak stabil. </li>
<li>Cache<br />Hal ini yang biasa sering dialami oleh banyak orang termasuk saya. Anda bisa menghapus cache dengan cara Setting>>Apl>>Pilih BBM>>Hapus Cache. Setelah menghapus cache anda diharuskan memberhentikan aplikasi bbm terlebih dahulu dengan cara menyentuh tulisan "Paksa Berhenti" lalu buka lagi aplikasi bbm anda dan lihat dibagian Pembaruan nantinya dp teman anda akan terganti semua.</li>
</ol>
<div>
Jika hal diatas juga tidak mempengaruhi sebaiknya anda install ulang aplikasi BBM anda. Semoga penjelasan ini bermanfaat bagi anda terutama pengguna yang tidak dapat dipisahkan dari aplikasi ini. </div>
</div>
<div>
<br /></div>
<div>
Penulis mendapat inspirasi membuat artikel ini dari <a href="http://www.full-tekno.com/2014/05/cara-mengatasi-display-picture-dp-bbm-yang-tak-muncul.html">http://www.full-tekno.com</a></div>
</div>

Cara Mengatasi Display Picture BBM Tidak Muncul

Mungkin kalian pernah menggunakan bbm namun dp(display picture) teman anda menggunakan dp default dari bbm. Padahal mereka menggunakan ...

Lihat Lebih lanjut »

6:55 PM

Cara Mengubah Tampilan Notepad++

<div dir="ltr" style="text-align: left;" trbidi="on">
Pada kali ini saya akan memberikan tutorial bagaimana caranya mengubah tempelate notepad yang semula berwarna putih menjadi warna yang kita inginkan. Banyak para Programmer menggunakan aplikasi ini dikarenakan aplikasi ini gratis, banyak pluginnya, ringan, dan sangat mudah sekali digunakan. Inilah yang menyebabkan para programmer menggunakan aplikasi ini sebagai editor scriptnya. Selain itu notepad++ juga memiliki syntax highlighter yaitu warna yang digunakan para developer untuk menentukan bagian error yang ada pada script yang dibuat.<br />
<div>
<br /></div>
<div>
Untuk mengganti tampilan pada notepad++ anda bisa menggunakan tampilan yang sudah di sediakan dan juga anda dapat mengeditnya sendiri sesuai selera anda. Sebelum itu anda harus mengetahui dulu bagaimana cara mengeditnya. Baiklah ikuti step by step berikut ini.</div>
<div>
<br /></div>
<div>
<ol style="text-align: left;">
<li>Buka dahulu notepad++ anda.</li>
<li>Jika sudah terbuka klik Pengaturan>Konfigurator Gaya...<br /><a href="http://i.imgur.com/tezxX1E.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Cara Mengubah Tampilan Notepad++" border="0" height="77" src="http://i.imgur.com/tezxX1E.png" title="Cara Mengubah Tampilan Notepad++" width="320" /></a></li>
<li>Nantinya akan muncul seperti gambar dibawah ini. Untuk menggunakan tempelate yang sudah disediakan anda tinggal memilih tema sesuai yang diinginkan. Jika anda ingin mengeditnya sendiri anda tinggal edit warna yang ada pada bagian Gaya Warna. Anda juga dapat mengubah font pada notepad++ anda dengan memilih font yang diinginkan serta dapat membuatnya Bolt,Italic,dan Under Line. Namun jika anda klik simpan tidak akan ada perubahan pada fontnya dikarenakan belum di checklist dibagian bawah gaya huruf, Sesuaikan dengan apa yang anda ingin ubah.<br /><div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/ssSN1QU.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mengubah Tampilan Notepad++" border="0" height="180" src="http://i.imgur.com/ssSN1QU.png" title="Cara Mengubah Tampilan Notepad++" width="320" /></a></div>
</li>
</ol>
<div style="text-align: left;">
Jika sudah perhatikan apakah ada perubahan pada notepad anda. Jika belum ada perubahan silahkan dicoba lagi. Semoga berhasil :)</div>
</div>
</div>

Cara Mengubah Tampilan Notepad++

Pada kali ini saya akan memberikan tutorial bagaimana caranya mengubah tempelate notepad yang semula berwarna putih menjadi warna yang kita...

Lihat Lebih lanjut »

12:00 PM

Cara Membuat Tulisan Hello World Di Python

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://appworksinc.com/wp-content/uploads/2014/07/Python.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="http://appworksinc.com/wp-content/uploads/2014/07/Python.png" width="320" /></a></div>
<br />
Pada kali ini saya akan membahas tentang python. Python adalah bahasa pemograman yang termasuk desktop programming dan web programming. Dikatakan seperti itu karena python dapat dijalankan sebagai aplikasi web dan juga aplikasi desktop. Pada kali ini saya akan membahas cara membuat hello world pada python. Sebelum lanjut anda harus menginstall python terlebih dahulu pada website resminya di <a href="https://www.python.org/">https://www.python.org/</a>. Setelah anda menginstallnya buatlah sebuah file dengan ekstensi (*)py. ekstensi (*)py adalah eksetensi yang memberitahukan bahwa file itu adalah file python. Setelah itu buatlah sebuah file dengan nama Hello World.py lalu edit menggunakan Notepad ataupun menggunakan Notepad++. Saya sarankan menggunakan Notepad++ karena Notepad++ mendukung syntax highlighter yang sangat berguna untuk memudahkan melihat bagian yang terdapat error pada script yang kita buat. Kita akan menggunakan fungsi print. Print digunakan untuk menampilkan suatu string ke layar. Jadi Print digunakan untuk UserInterfacenya yang terlihat oleh kita.<br />
Baiklah copy code dibawah ini ke file yang baru saja dibuat tadi.<br />
<br />
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">print "Hello World"

</pre>
<br />
Nantinya akan terlihat tulisan hello world seperti pada gambar dibawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/i26ZDPT.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="158" src="http://i.imgur.com/i26ZDPT.png" width="320" /></a></div>
<br />
<br />
Untuk mencegah aplikasi langsung tertutup sebaiknya anda menggunakan cmd untuk menjalankannya. Untuk cara membuka cmd silahkan lihat artikel saya sebelumnya <a href="http://allmywebstfn.blogspot.com/2015/03/cara-membuka-comand-prompt.html">Cara Membuka Comand Prompt</a>.<br />
<br />
Pada python kita tidak perlu menambahkan titik koma diakhir barisnya karena python menggunakan baris baru sebagai pemisah perintah satu dengan lainnya tidak seperti programming lainnya. Lalu jika diatas adalah menampilkan string bagaimana cara menampilkan angka?. Untuk menampilkan angka kita tinggal menulis angka yang ingin di tampilkan tanpa menggunakan tanda kutip.<br />
Seperti script berikut ini<br />
<br />
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">print 2312

</pre>
<br />
Hasilnya akan seperti ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/QpcnMIB.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="161" src="http://i.imgur.com/QpcnMIB.png" width="320" /></a></div>
<br />
<br />
Mungkin Sekian tentang python kali ini semoga bermanfaat :)</div>

Cara Membuat Tulisan Hello World Di Python

Pada kali ini saya akan membahas tentang python. Python adalah bahasa pemograman yang termasuk desktop programming dan web programming. ...

Lihat Lebih lanjut »

6:44 PM

Allmywebstfn

[Video] Cara Menginstall Xampp/Lampp di Ubuntu

Cara Menginstall Xampp di Linux

Keajaiban Ilmiah Al-Qur'an

Desain Layout Web Dasar

Cara Membuat Random Angka dan Huruf Menggunakan PHP

Alasan Sistem Pendidikan di Finlandia Menjadi Yang Terbaik di Dunia

Cara Mengatasi Display Picture BBM Tidak Muncul

Cara Mengubah Tampilan Notepad++

Cara Membuat Tulisan Hello World Di Python

Contact Form

Popular Posts

Blog Archive