Cara cepat Menulis Kode HTML dengan Zen Coding

Logo Zen coding
Logo Zen coding
Sebelum lebih jauh dengan zen coding, saya akan bertanya, kira kira untuk menulis manual code  struktur html dibawah ini, butuh berapa lama?

<!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

  1. https://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn.
  2. 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!