<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <h1 class="header">Tool server</h1> <table> <tr> <td>No</td> <td>Nama</td> <td>Fungsi</td> </tr> <tr> <td>1</td> <td>Linux</td> <td>Os server</td> </tr> <tr> <td>2</td> <td>apache</td> <td>Webserver</td> </tr> </table> <!-- list --> <ul id="tool"> <li class="item">Linux</li> <li class="item">Webserver</li> <li class="item">apache </li> <li class="item">mysql</li> <li class="item">PHP</li> </ul> </body> </html>
Jika anda menulis dengan editor web dengan fitur autocomplete sekalipun, menulis struktur kode HTML diatas tetap memakan waktu lama, itulah kenapa zen coding sangat dibutuhkan. Zen coding adalah teknik cepat menulis code HTML dan CSS secara CEPAT. Seberapa cepat? sebagai contoh, untuk menulis struktur kode html diatas, anda cukup menulis beberapa baris kode.
berikut ini adalah barisnya
html:5
Zen coding akan menulis kode secara singkat, lalu dengan memanfaatkan kombinasi keyboard tertentu misalkan di notepad++, setelah menulis kode diatas, blok lalu gunakan tombol [CTRL]+[E] dan Bingo, struktur lengkap html akan dibuatkan secara otomatis seperti kode dibawah ini. Zencoding bukan hanya jalan di notepad++, namun berjalan di hampir semua Editor /IDE untuk membuat file HTML.
Output zencoding
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
membuat header
selanjutnya tulis
h1.header
output zencodingnya adalah
<h1 class="header"></h1>
Membuat tabel
Selanjutnya untuk membuat tabel
table>tr*3>td*3
outputnya
<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
Membuat List
ul#tool>li.item*5
Kode diatas dipakai untuk membuat ul dengan id tool, dengan 5 list dengan css class item.
<ul id="tool"> <li class="item"></li> <li class="item"></li> <li class="item"> </li> <li class="item"></li> <li class="item"></li> </ul>
Syntax Lain
Zen coding punya puluhan syntax yang akan mempercepat koding HTML dan CSS. syntax lengkap bisa anda baca di
- https://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn.
- http://docs.emmet.io/abbreviations/syntax/.
Dengan zen coding, anda bisa sangat cepat menulis struktur html, sejauh ini Notepad++ sudah secara default terinstall zen coding. Jika di notepad++ anda sudah ada menu Zen coding Maka teknik ini bisa langsung anda praktekan. Terus bagaimana jika belum? bagaimana kalau saya memakai editor lain? Tutorial tentang cara seting di editor lain akan saya bahas di artikel selanjutnya.
Happy Zen coding!