Ali Ba'agil Blog

Tutorial CSS : Mengatur tampilan Link dan Kondisinya

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Hbf0OcomZyhWbcKxa3eVb5IVA-B0EREwONmYIXLR9xGEtIKlXm6QOiGm-qguIA2qTb9QveG_w9v7b1YrOtV-1AVX0jEumjM3SKp_k5wtccvstx66ZgHjBCRkpFDcSz_5UC7LnuCdyko/s1600/css-link.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Hbf0OcomZyhWbcKxa3eVb5IVA-B0EREwONmYIXLR9xGEtIKlXm6QOiGm-qguIA2qTb9QveG_w9v7b1YrOtV-1AVX0jEumjM3SKp_k5wtccvstx66ZgHjBCRkpFDcSz_5UC7LnuCdyko/s1600/css-link.png" /></a></div>
Link adalah sebuah tautan yang bisa menghubungkan kita ke halaman lain. Secara default biasanya tampilan link dibuat bergaris bawah (underline). Namun dengan CSS kita bisa mengatur tampilan link dengan beberapa properti pada text seperti color, font-family, font-size dan lain-lain. Selain itu kita juga biasa mengatur background dengan CSS untuk mengatur background seperti background-color. 
 
Contoh penggunaan CSS untuk link : 
<div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; overflow: auto; padding: 0.2em 0.6em; text-align: justify; vertical-align: baseline; width: auto;">
<pre style="box-sizing: border-box; color: inherit; font-family: 'Courier New', Courier, monospace; line-height: 18px; overflow: auto; padding: 0px; word-wrap: normal;">a {
 color: blue;
}
</pre>
</div>
 
Selain mengatur tampilan link, kita juga bisa membuat tampilan berbeda-beda untuk tiap kondisi link. Untuk menyatakan kondisi sebuah link kita menggunakan tanda titikdua (:) setelah tag link a. Dan deklarasi CSS ditulis setelah kondisi dengan cara seperti penulisan deklarasi CSS pada umumnya. 
 
Ada empat kondisi link yang bisa dibuat CSS-nya, yaitu : 
<ul style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; list-style: square outside; margin: 0px 0px 1.2em 20px; padding: 0px; text-align: justify; vertical-align: baseline;">
<li style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">a:link, yaitu link dalam kondisi normal, belum dikunjungi</li>
<li style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">a:visited, yaitu link yang sudah dikunjungi</li>
<li style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">a:hover, yaitu kondisi link saat mouse mengenai link/mouse berada diatas link tapi belum diklik.</li>
<li style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px; vertical-align: baseline;">a:active, yaitu kondisi link pada saat diklik.</li>
</ul>
<h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Contoh penggunaan CSS untuk beberapa kondisi link :</h3>
<h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
1. Link dalam kondisi normal</h4>
<div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; overflow: auto; padding: 0.2em 0.6em; text-align: justify; vertical-align: baseline; width: auto;">
<pre style="box-sizing: border-box; color: inherit; font-family: 'Courier New', Courier, monospace; line-height: 18px; overflow: auto; padding: 0px; word-wrap: normal;">a {
 color: blue;
}
</pre>
</div>
<h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
2. Link telah dikunjungi (Visited)</h4>
<div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; overflow: auto; padding: 0.2em 0.6em; text-align: justify; vertical-align: baseline; width: auto;">
<pre style="box-sizing: border-box; color: inherit; font-family: 'Courier New', Courier, monospace; line-height: 18px; overflow: auto; padding: 0px; word-wrap: normal;">a:visited {
 color: green;
}
</pre>
</div>
<h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
3. Link saat ada mouse diatasnya (Hover)</h4>
<div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; overflow: auto; padding: 0.2em 0.6em; text-align: justify; vertical-align: baseline; width: auto;">
<pre style="box-sizing: border-box; color: inherit; font-family: 'Courier New', Courier, monospace; line-height: 18px; overflow: auto; padding: 0px; word-wrap: normal;">a:hover {
 color: red;
}
</pre>
</div>
<h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
4. Link saat diklik</h4>
<div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; overflow: auto; padding: 0.2em 0.6em; text-align: justify; vertical-align: baseline; width: auto;">
<pre style="box-sizing: border-box; color: inherit; font-family: 'Courier New', Courier, monospace; line-height: 18px; overflow: auto; padding: 0px; word-wrap: normal;">a:active {
 color: yellow;
}
</pre>
</div>
 
<a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_link" style="-webkit-transition: all 0.2s ease-in; background-color: white; box-sizing: border-box; color: #859ce6; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; padding: 0px; text-align: justify; text-decoration: initial; vertical-align: baseline;" target="_blank">Kita bisa berlatih CSS link disini >></a> 
<h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Penting dalam menulis CSS untuk beberapa kondisi Link</h3>
<div style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Saat penulisan CSS untuk beberapa kondis link harus memperhatikan urutan. Yaitu hover harus ditulis setelah link dan visited, kemudian active harus ditulis setelah hover.</div>

Tutorial CSS : Mengatur tampilan Link dan Kondisinya

Link adalah sebuah tautan yang bisa menghubungkan kita ke halaman lain. Secara default biasanya tampilan link dibuat bergaris bawah (under...

Baca selengkapnya »

Sabtu, Februari 14, 2015

Apa itu CSS ?

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8sNlRUKsy94D_A1c7opQtzfSqJcyE06EsJkOoPJyKs_90RSp21EPIYcdFyEy_5UpX_Uqq1HvFJ4BFBMkgp6nvkxcvhb56gf3ZHvlwWr5QtarQ4vDrKup50WYxgt0S_zBBYJeSnlmp1cI/s1600/css-cascade-style-sheet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8sNlRUKsy94D_A1c7opQtzfSqJcyE06EsJkOoPJyKs_90RSp21EPIYcdFyEy_5UpX_Uqq1HvFJ4BFBMkgp6nvkxcvhb56gf3ZHvlwWr5QtarQ4vDrKup50WYxgt0S_zBBYJeSnlmp1cI/s1600/css-cascade-style-sheet.png" width="320" /></a></div>
CSS adalah singkatan dari Cascading Style Sheet. CSS berfungsi sebagai pengendali komponen pada elemen sebuah website. CSS menentukan tampilan sebuah website melalui nilai-nilai properti style yang disetting pada tiap-tiap elemen dalam website tersebut. 
 
Latar belakang penggunaan CSS 
Penggunaan CSS didasari oleh kebutuhan akan tampilan sebuah website. Sebagaimana diketahui bahwa selain isi, tampilan sebuah website merupakan faktor yang tidak kalah pentingnya. Tampilan website yang baik akan membuat pengunjung nyaman dalam membaca dan mengakses isi sebuah website. Hal ini tentu positif bagi perkembangan website tersebut. 
 
Tata letak website yang baik merupakan susunan dari tiap-tiap bagian secara baik dan proporsional. Sebagai contoh saat kita mengatur jarak antar bagian melalui margin dan padding, juga saat mengatur penggunaan font, ukuran font dan warna font. 
 
Cara Membuat CSS 
Dalam membuat CSS ada empat hal utama yang perlu diketahui, yaitu: 
<ol style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; list-style-image: initial; list-style-position: outside; margin: 0px 0px 1.2em 20px; padding: 0px; text-align: justify; vertical-align: baseline;">
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">Selector, adalah bagian atau elemen website yang akan diatur stylenya.</li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">Deklarasi, merupakan pernyataan yang menetapkan style yang berisi Properti dan Nilai.</li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">Properti, adalah parameter tampilan yang akan kita atur.</li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">Nilai, merupakan ukuran yang itetapkan pada parameter properti.</li>
</ol>
Contoh membuat CSS untuk paragraf : 
 
<div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; overflow: auto; padding: 0.2em 0.6em; text-align: justify; vertical-align: baseline; width: auto;">
<pre style="box-sizing: border-box; color: inherit; font-family: 'Courier New', Courier, monospace; line-height: 18px; overflow: auto; padding: 0px; word-wrap: normal;">p {
 margin: 10px;
}
</pre>
</div>
 
Penjelasan contoh diatas : 
<ol style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; list-style-image: initial; list-style-position: outside; margin: 0px 0px 1.2em 20px; padding: 0px; text-align: justify; vertical-align: baseline;">
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">p merupakan selector untuk elemen paragraf</li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">{...}, merupakan deklarasi, dalam hal ini berisi margin: 10px;</li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">margin, merupakan properti untuk mengatur jarak dengan elemen lain.</li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">10px, merupakan nilai yang ditetapkan untuk properti margin.</li>
</ol>
Dalam sebuah deklarasi kita bisa menyetting beberapa properti sekaligus, seperti contoh berikut ini : 
 
<div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; overflow: auto; padding: 0.2em 0.6em; text-align: justify; vertical-align: baseline; width: auto;">
<pre style="box-sizing: border-box; color: inherit; font-family: 'Courier New', Courier, monospace; line-height: 18px; overflow: auto; padding: 0px; word-wrap: normal;">p {
 margin: 10px;
 padding: 5px;
 font-size: 10px;
}
</pre>
</div>
<h3 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 18px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Cara Penulisan CSS</h3>
Untuk menggunakan CSS ada tiga cara yang bisa dilakukan yaitu dengan cara Inline CSS, Embedded CSS dan External CSS. 
1. Inline CSS Adalah penulisan CSS didalam elemen html secara langsung. Jadi dalam hal ini kita tidak memerlukan penulisan selector karena sudah langsung tertuju pada elemen yang dimaksud. Sebagai gantinya, kita menggunakan tag style="..." pada elemen tersebut. 
 
Contoh penulisan Inline CSS: 
 
<div style="background-color: white; border: solid gray; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; overflow: auto; padding: 0.2em 0.6em; text-align: justify; vertical-align: baseline; width: auto;">
<pre style="box-sizing: border-box; color: inherit; font-family: 'Courier New', Courier, monospace; line-height: 18px; overflow: auto; padding: 0px; word-wrap: normal;">
</pre>
</div>
 
Penjelasan dari kode diatas adalah, kita menetapkan properti margin sebesar 10px untuk elemen paragraf (p). Diantara tanda petik dua (") kita bisa menyisipkan beberapa deklarasi properti dan nilai sekaligus dengan cara masing-masing deklarasi tetap diakhiri dengan tanda titik koma (;). 
<h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
2. Embedded CSS</h4>
Adalah penulisan CSS secara tersendiri namun berada dalam satu file html. Cara ini membutuhkan selector dalam penulisannya. Beberapa kode CSS ditulis didalam tag <style>...</style>. kita bisa menuliskan beberapa selector beserta deklarasi properti dan nilai didalam tag <style> ini. 
 
Contoh penulisan Embedded CSS dalam sebuah file html: 
<div class="dp-highlighter" style="background-color: #e7e5dc; box-sizing: border-box; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; font-size: 12px; font: inherit; line-height: 1.8em; margin: 18px 0px !important; overflow: auto; padding: 1px 0px 0px; text-align: justify; vertical-align: baseline; width: 601.9166870117188px;">
<div class="bar" style="box-sizing: border-box; font-size: 12px; font: inherit; margin: 0px; padding: 0px 0px 0px 45px; vertical-align: baseline;">
<div class="tools" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-style: solid; border-left-width: 3px; box-sizing: border-box; color: silver; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px; font: inherit; line-height: normal; margin: 0px; padding: 3px 8px 10px 10px; vertical-align: baseline;">
<a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">view plain</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">print</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">?</a></div>
</div>
<ol class="dp-c" style="background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; font-size: 12px; font: inherit; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1px 45px !important; padding: 0px; vertical-align: baseline;">
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><html>    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><head>    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><title>Contoh Embedded CSS</title>    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"></head>    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">  </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><style>    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">  p {    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">    margin: 10px;    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">  }    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">  h1 {    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">    font-size: 15px;    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">  }    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"></style>    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">  </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><body>    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><h1>Judul dengan font 15px</h1>    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">Ini adalah paragraf pertama    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">Ini adalah paragraf kedua    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"></body>    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"></html>    </li>
</ol>
</div>
Pada contoh embeddes CSS diatas kita menetapkan font untuk heading h1 sebesar 15px dan margin antar paragraf sebesar 10px. 
<h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
3. Eksternal CSS</h4>
Ini adalah cara paling efektif dan banyak dipakai oleh kebanyakan website saat ini. Dengan eksternal CSS kita menaruh kode-kode CSS didalam sebuah file tersendiri lalu membuat link didalam file html menuju file CSS yang telah dibuat. Cara ini lebih efisien dan mempermudah pekerjaan mendesain dan mengelola sebuah website. 
 
<b style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">Contoh penulisan Eksternal CSS : 
 
- Pertama kita membuat kode berikut ini pada file .css, lalu menyimpannya misalnya dengan nama style.css  
<div class="dp-highlighter" style="background-color: #e7e5dc; box-sizing: border-box; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; font-size: 12px; font: inherit; line-height: 1.8em; margin: 18px 0px !important; overflow: auto; padding: 1px 0px 0px; text-align: justify; vertical-align: baseline; width: 601.9166870117188px;">
<div class="bar" style="box-sizing: border-box; font-size: 12px; font: inherit; margin: 0px; padding: 0px 0px 0px 45px; vertical-align: baseline;">
<div class="tools" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-style: solid; border-left-width: 3px; box-sizing: border-box; color: silver; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px; font: inherit; line-height: normal; margin: 0px; padding: 3px 8px 10px 10px; vertical-align: baseline;">
<a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">view plain</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">print</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">?</a></div>
</div>
<ol class="dp-c" style="background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; font-size: 12px; font: inherit; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1px 45px !important; padding: 0px; vertical-align: baseline;">
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">p {    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">  margin: 10px;    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">}    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">h1 {    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">  font-size: 15px;    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">}    </li>
</ol>
</div>
- Kemudian kita buat file html berikut ini yang menggunakan css dari file style.css lalu disimpan misalnya dengan nama index.php  
<div class="dp-highlighter" style="background-color: #e7e5dc; box-sizing: border-box; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; font-size: 12px; font: inherit; line-height: 1.8em; margin: 18px 0px !important; overflow: auto; padding: 1px 0px 0px; text-align: justify; vertical-align: baseline; width: 601.9166870117188px;">
<div class="bar" style="box-sizing: border-box; font-size: 12px; font: inherit; margin: 0px; padding: 0px 0px 0px 45px; vertical-align: baseline;">
<div class="tools" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-style: solid; border-left-width: 3px; box-sizing: border-box; color: silver; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px; font: inherit; line-height: normal; margin: 0px; padding: 3px 8px 10px 10px; vertical-align: baseline;">
<a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">view plain</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">print</a><a href="http://nulis-ilmu.blogspot.com/2014/12/tutorial-css-part-1-apa-itu-css.html#" style="-webkit-transition: all 0.2s ease-in; background-color: inherit; background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; box-sizing: border-box; color: #a0a0a0; font-size: 9px; font: inherit; margin: 0px 10px 0px 0px; padding: 0px; text-decoration: initial; vertical-align: baseline;">?</a></div>
</div>
<ol class="dp-c" style="background-color: white; border: none; box-sizing: border-box; color: #5c5c5c; font-size: 12px; font: inherit; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1px 45px !important; padding: 0px; vertical-align: baseline;">
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><html>    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><head>    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><title>Contoh Embedded CSS</title>    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><link rel="stylesheet" type="text/css" href="style.css">    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"></head>    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><body>    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"><h1>Judul dengan font 15px</h1>    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">In adalah paragraf pertama    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;">In adalah paragraf kedua    </li>
<li class="alt" style="border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; color: inherit; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"></body>    </li>
<li class="" style="background-color: #f8f8f8; border-left-color: rgb(108, 226, 108); border-left-width: 3px; border-style: none none none solid; box-sizing: border-box; font-size: 12px; font: inherit; line-height: 1.8em; list-style: decimal-leading-zero outside; margin: 0px !important; padding: 0px 3px 0px 10px !important; vertical-align: baseline;"></html>    </li>
</ol>
</div>
Pada contoh diatas kita menggunakan CSS yang sama daricontoh sebelumnya, hanya saja kali ini kita memisahkan kode-kode css didalam fle tersediri, yang kita beri nama style.css.  
 
Kemudian pada bagian head dari file index.html kita taruh link menuju file css dengan kode <i style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"><link rel="stylesheet" type="text/css" href="style.css">. Hasil tampilan dari contoh ini sama dengan contoh sebelumnya, 
 
Keuntungan dari cara ini adalah kita bisa lebih mudah mengelola CSS untuk banyak halaman secara sekaligus. Selain itu proses membuka website untuk halaman kedua dans eterusnya menjadi lebih ringan karena tidak perlu loading ulang css. 
 
Untuk membuat file CSS dapat menggunakan <a href="http://aliknightmare.blogspot.com/2015/02/aplikasi-teks-editor-untuk-pemrograman.html" target="_blank">aplikasi teks editor untuk pemrograman web </a>seperti pada pembuatan script HTML dan PHP.

Apa itu CSS ?

CSS adalah singkatan dari Cascading Style Sheet. CSS berfungsi sebagai pengendali komponen pada elemen sebuah website. CSS menentukan tamp...

Baca selengkapnya »

Sabtu, Februari 14, 2015

Aplikasi Teks Editor untuk Pemrograman Web

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90WQLZ7BSlV-6Jsn4J7wnUQyV2dxeLnD-n3C6382L063dvP_vQzHAsEotKwHBUHQSw-ZL__xQwRilUfZcdDKml7H7eXlRwiyDQ6g8kXoV9INuNPrxnuoE3V7uXqoe_06qjW6W1HWN0kc/s1600/TextEditor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90WQLZ7BSlV-6Jsn4J7wnUQyV2dxeLnD-n3C6382L063dvP_vQzHAsEotKwHBUHQSw-ZL__xQwRilUfZcdDKml7H7eXlRwiyDQ6g8kXoV9INuNPrxnuoE3V7uXqoe_06qjW6W1HWN0kc/s1600/TextEditor.png" width="320" /></a></div>
Untuk menunjang pembuatan script-script website kita harus mempunyai teks editor yang baik. Sebenarnya menggunakan aplikasi teks editor seperti notepad saja sudah cukup untuk menghasilkan script HTML maupun PHP namun jika script sudah banyak dan kompleks maka aplikasi minimum seperti notepad agaknya sudah tidak cocok lagi. Mengapa demikian, karena dengan banyaknya script maka tag-tag akan seakin banyak dan pengelompokan script juga semakin luas jadi siperlukan setidaknya fitur syntax highlighting untuk membantu pengelompokan script. Selain itu beberapa fitur seperti auto completion dan accordion juga perlu untuk melokalisir area manakala terjadi masalah. 
<h4 style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; margin: 16px 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Syarat-syarat teks editor untuk pembuatan script HTML, PHP, CSS dan JAVASCRIPT</h4>
<ol style="background-color: white; box-sizing: border-box; font-family: verdana; font-size: 15px; font: inherit; line-height: 27px; list-style-image: initial; list-style-position: outside; margin: 0px 0px 1.2em 20px; padding: 0px; text-align: justify; vertical-align: baseline;">
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">Syntax Highlighter, adalah fitur yang membedakan warna untuk masing-masing bagian script. Misalnya tag dengan warna hijau dan teks dengan warna hitam.</li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">Code Folding, adalah fitur untuk meminimize satu blok script. Jadi script bisa dicek per blok.</li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">Auto Complete, adalah fitur untuk memberikan sugesti terhadap kode yang akan ditulis. Jadi tidak perlu menghafal kode atau setidaknya meringankan kerja dalam mengetik kode.</li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">Auto Recovery, berfungsi jika tiba-tiba terjadi kesalahan daya saat proses mengetik kode sehingga kode yang telah diketik tidak hilang.</li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">Project Manager, adalah fitur ekstra untuk memudahkan proses pengerjaan sebuah proyek website atau aplikasi PHP.</li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">Folder Tree, adalah fitur mirip file manager yang membantu kita dalam proses buka tutup file.</li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">Support multi language script, dengan demikian aplikasi text editor bisa beradaptasi dengan berbagai bahasa pemrograman seperti HTML, PHP, CSS dan JAVASCRIPT.</li>
<li style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 0px; box-sizing: border-box; font-size: 15px; font: inherit; margin: 5px 0px; padding: 0px 0px 5px; vertical-align: baseline;">Freeware, ini bukan syarat utama namun menjadi salah satu syarat manakala kita tidak mau atau tidak mampu membeli aplikasi yang berbayar. Setidaknya keinginan untuk belajar dan berkarya tidak diawali dengan membajak aplikasi yang berbayar.<div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
<h4 style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 16px 0px; padding: 0px; vertical-align: baseline;">
Berikut ini beberapa aplikasi teks editor yang memenuhi kriteria diatas</h4>
</div>
<div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
1. Notepad++ <div class="separator" style="box-sizing: border-box; clear: both; font-size: 15px; font: inherit; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_clH4Gecd7mamYEVRTRKqaMCQlmQVq_WRGqAMyXeURuMWBHItJZKXTg1MBo-99Y5WkmJb4X2yt4TGErhKMIc7wfCIkAhEdireuv3xXdJ39EYAlEHkOD3eRzktwzQQgp1X2q29K5FUG4/s1600/Notepad++_Logo.png" imageanchor="1" style="-webkit-transition: all 0.2s ease-in; box-sizing: border-box; color: #859ce6; font-size: 15px; font: inherit; margin: 0px 1em; padding: 0px; text-decoration: initial; vertical-align: baseline;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_clH4Gecd7mamYEVRTRKqaMCQlmQVq_WRGqAMyXeURuMWBHItJZKXTg1MBo-99Y5WkmJb4X2yt4TGErhKMIc7wfCIkAhEdireuv3xXdJ39EYAlEHkOD3eRzktwzQQgp1X2q29K5FUG4/s1600/Notepad++_Logo.png" style="border: 0px none; box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; max-width: 100%; outline: none; padding: 0px; page-break-after: always; vertical-align: baseline;" /></a></div>
 </div>
<div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
Merupakan aplikasi text editor yang gratis dan powerfull. Sayangnya Notepad++ hanya tersedia untuk platform OS Windows.</div>
<div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
Notepad++ dapat di download disitus resminya di ttp://notepad-plus-plus.org/</div>
<div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
 </div>
<div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
2. BlueFish Editor <div class="separator" style="box-sizing: border-box; clear: both; font-size: 15px; font: inherit; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoey_ZzeD7fja9BS3Qy23W_RUNNXhnPZ9mTm006zRFoc3u0BUfH4O57-rINA6_bNAkE5Rj7c81K5B8IG9TPrk2EyRAHPzf4XFrfaMn-cLJ5V2CWHr9lKTotRmNA3CW49kQ5dizkrRTDu0/s1600/bluefish-2.2-is-out.png" imageanchor="1" style="-webkit-transition: all 0.2s ease-in; box-sizing: border-box; color: #859ce6; font-size: 15px; font: inherit; margin: 0px 1em; padding: 0px; text-decoration: initial; vertical-align: baseline;"><img border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoey_ZzeD7fja9BS3Qy23W_RUNNXhnPZ9mTm006zRFoc3u0BUfH4O57-rINA6_bNAkE5Rj7c81K5B8IG9TPrk2EyRAHPzf4XFrfaMn-cLJ5V2CWHr9lKTotRmNA3CW49kQ5dizkrRTDu0/s1600/bluefish-2.2-is-out.png" style="border: 0px none; box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; max-width: 100%; outline: none; padding: 0px; page-break-after: always; vertical-align: baseline;" width="200" /></a></div>
 </div>
<div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
BlueFish juga termasuk aplikasi text editor yang gratis dan powerfull. Kita bisa memilih mode berbagai bahas pemrograman. Awalnya saya mengenal Bluefish karena saya menggunakan Linux, namun ternyata BlueFish juga tersedia untuk platform Windows.</div>
<div style="box-sizing: border-box; font-size: 15px; font: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
BlueFish dapat didownload disitus resminya di http://bluefish.openoffice.nl/</div>
</li>
</ol>

Aplikasi Teks Editor untuk Pemrograman Web

Untuk menunjang pembuatan script-script website kita harus mempunyai teks editor yang baik. Sebenarnya menggunakan aplikasi teks editor se...

Baca selengkapnya »

Sabtu, Februari 14, 2015

Makai Tenshi Djibril Season 1 [Uncensored - 2005]

<img alt="BROKEN IMAGE" src="http://cdn.myanimelist.net/images/anime/12/37381.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 10px; background-color: white; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 10px; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; height: auto; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; max-width: 550px; outline: none; padding: 3px; vertical-align: baseline;" /> Sinopsis: Suatu hari musim panas, Naoto Kamino akhirnya mengerahkan keberanian untuk mengungkapkan perasaannya yang sebenarnya kepada cewek incaran nya, Manabe Rika. Sayangnya, pada saat yang sama, seorang anak muda bernama Asumo muncul (meskipun ia menyebut diri sebagai setan). Dia plot untuk menculik Rika dan tidak akan berhenti untuk mendapatkan nya - tapi Rika memiliki rahasia kecil dari dirinya sendiri, ia dapat mengubah dan memperoleh kekuatan super saat ber kentu ... English: Jiburiru: The Devil Angel Synonyms: Hell Angel Gabriel, Makai Tenshi Jibril Japanese: 魔界天使ジブリール Information Type: OVA Episodes: 4 Status: Finished Airing Aired: Nov 26, 2004 to Jun 24, 2005 Producers: Animac, JapanAnime Genres: Hentai, Demons, Magical Girls, Romance, Small Breasts, Uncensored Duration: 30 min. per episode Rating: Rx - Hentai Subtitle: Indonesia Episode 01 MP4: <a href="https://www.mediafire.com/download/4dgvhe0clx22z08/Animecave.Makai.Tenshi.Jibril.01.mp4" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">MF</a> | <a href="http://www.tusfiles.net/t0kdktlm6uq3" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a> 3GP: <a href="http://uppit.com/r5ft43qqjlgi/Animecave.Makai.Tenshi.Jibril.01.3gp" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">UP</a> | <a href="http://www.tusfiles.net/3yvethulr16u" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a> Episode 02 MP4: <a href="https://www.mediafire.com/download/2mv07bwf3mh7v5y/Animecave.Makai.Tenshi.Jibril.02.mp4" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">MF</a> | <a href="http://www.tusfiles.net/1o685joafeyb" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a> 3GP: <a href="http://uppit.com/vovpnaqcnx2j/Animecave.Makai.Tenshi.Jibril.02.3gp" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">UP</a> | <a href="http://www.tusfiles.net/z0qoe5t3y3jo" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a> Episode 03 MP4: <a href="https://www.mediafire.com/download/ja9iq4nfcwmj8q7/Animecave.Makai.Tenshi.Jibril.03.mp4" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">MF</a> | <a href="http://www.tusfiles.net/ubqy5kkbmyg0" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a> 3GP: <a href="http://uppit.com/kv937scq9196/Animecave.Makai.Tenshi.Jibril.03.3gp" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">UP</a> | <a href="http://www.tusfiles.net/38yt3ojn09mq" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a> Episode 04 END MP4: <a href="https://www.mediafire.com/download/eob3okiae6p3i25/Animecave.Makai.Tenshi.Jibril.04.mp4" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">MF</a> | <a href="http://www.tusfiles.net/zyhbnrt9dizh" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a> 3GP: <a href="http://uppit.com/lk6axxs8e8jl/Animecave.Makai.Tenshi.Jibril.04.3gp" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">UP</a> | <a href="http://www.tusfiles.net/ahkrgcqo2g09" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a> 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfLi93IyRDDXVvRjqYnvVylnHviBaYe91uE7agjCAfOTN2cXB0t1_jGomb-Ycq0qDc7E5Cam6waJ1Ncp-7EGFeA5SMMNLMfe0V5uMpwoxBadR_cNTJv3MGE0FSIsJ4kqFyXo9duAbEDxU/s1600/index.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfLi93IyRDDXVvRjqYnvVylnHviBaYe91uE7agjCAfOTN2cXB0t1_jGomb-Ycq0qDc7E5Cam6waJ1Ncp-7EGFeA5SMMNLMfe0V5uMpwoxBadR_cNTJv3MGE0FSIsJ4kqFyXo9duAbEDxU/s1600/index.jpg" /></a></div>

Makai Tenshi Djibril Season 1 [Uncensored - 2005]

Sinopsis: Suatu hari musim panas, Naoto Kamino akhirnya mengerahkan keberanian untuk mengungkapkan perasaannya yang sebenarnya kepada cewek ...

Baca selengkapnya »

Minggu, Januari 25, 2015

Mahou Shoujo Elena [Censored - 2011]

<img alt="BROKEN IMAGE" src="http://moe.animecharactersdatabase.com/productimages/u/5688-1550393236.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 10px; background-color: white; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 10px; color: #222222; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; height: auto; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; max-width: 550px; outline: none; padding: 3px; vertical-align: baseline;" /> Sinopsis Dengan bantuan dari makhluk misterius, Elena menyerahkan diri menjadi seorang gadis magis untuk mengalahkan Zoid, Sejak hari itu, untuk melindungi adiknya dan untuk menjaga perdamaian di bumi, Elena mulai menjadi Gadis Penyihir Namun, apa yang menantinya adalah takdir yang sulit karena pertempuran yang melibatkan ibu dan adiknya Information Type: OVA Episodes: 3 Status: Finished Airing Aired: Jul 8, 2011 to Feb 22, 2013 Producers: Studio Fantasia, Valkyria Genres: Hentai, Magic, Supernatural Duration: 26 min. per episode Rating: Rx - Hentai Sub: Indo Episode 01 MP4: <a href="https://content.wuala.com/contents/sarkozy911/Videos/OVA/Animecave_Magical.Girl.Elena.01.mp4/?dl=1" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">WLA</a> | <a href="http://www.tusfiles.net/reu6dq50e5cp" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a> | <a href="http://rockdizfile.com/1v38ro39wbg5" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">RDF</a> 3GP: <a href="https://content.wuala.com/contents/sarkozy911/Videos/OVA/Animecave_Magical.Girl.Elena.01.3gp" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">WLA</a> | <a href="http://www.sharebeast.com/jtlr4nrz9ddq" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">SB</a> Episode 02 MP4: <a href="http://www.tusfiles.net/f078xd4lvbxl" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a> | <a href="http://www.sharebeast.com/2kjb85ec2nk0" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">SB</a> 3GP: <a href="http://www.tusfiles.net/661vy57mtu87" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a> | <a href="https://www.mediafire.com/download/xa2l4y3sdn021z7/Animecave_Mahou.Shoujo.Elena.02.3gp" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">MF</a> Episode 03 MP4: <a href="http://www.tusfiles.net/uwudk8bp15c9" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a> | <a href="http://www.sharebeast.com/y7japs7v284p" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">SB</a> 3GP: <a href="http://www.tusfiles.net/w2eo55btzr7b" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">TF</a> | <a href="https://www.mediafire.com/download/kjd8cpca1apobfe/Animecave_Mahou.Shoujo.Elena.03.3gp" style="background-color: white; color: #2b5797; font-family: 'Open Sans', sans-serif; font-size: 14.6666669845581px; letter-spacing: 0.293333351612091px; line-height: 26.4000015258789px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">MF</a>

Mahou Shoujo Elena [Censored - 2011]

Sinopsis Dengan bantuan dari makhluk misterius, Elena menyerahkan diri menjadi seorang gadis magis untuk mengalahkan Zoid, Sejak hari itu, u...

Baca selengkapnya »

Minggu, Januari 25, 2015

Ali Ba'agil Blog

Tutorial CSS : Mengatur tampilan Link dan Kondisinya

Apa itu CSS ?

Aplikasi Teks Editor untuk Pemrograman Web

Makai Tenshi Djibril Season 1 [Uncensored - 2005]

Mahou Shoujo Elena [Censored - 2011]

Entri Populer

Label

Arsip Blog