Digitalmapia adalah situs dimana semua orang bisa menulis artikelnya sendiri. Klik "Login/Register untuk masuk, lalu klik "Tulis Artikel" untuk mulai menulis.

Membuat HTML Lebih cepat dengan menggunakan Emmet Pada sublime text

Seperti yang mungkin anda sudah tahu, dengan menggunakan sublime text anda bisa dengan membuat kode html dengan sangat cepat. Hanya dengan mengetikan html kemudian tekan tombol TAB maka tulisan HTML akan berubah seketika menjadi tag seperti berikut:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

Anda juga bisa mengetikan a kemudian tekan TAB. Maka seketika, itu juga tulisan a akan berubah menjadi tag html sebagai berikut:

<a href=""></a>

Selain kedua contoh diatas sebenarnya masih banyak contoh lainnya. Agar contoh diatas bisa berjalan, pastikan syntax yang digunakan pada contoh diatas mendukung HTML. Untuk melihat syntax yang saat ini anda gunakan, anda bisa melihat ke bagian kanan bawah jendala sublime text anda. Syntax yang mendukung contoh seperti diatas diantaranya, HTML, Markdown, PHP dan lain sebagainya. Contoh yang tidak mendukung diantaranya Plain Text.

NOTE: Sebelum menekan tombol TAB pastikan kursor berada di bagian paling akhir dari kode yang diketikan.

Instal Emmet

Untuk menggunakan Emmet, anda harus terlebih dahulu instal package bernama emmet. Untuk itu, tekan CTRL + SHIFT + Pkemudian pilih ‘install package’. Setelah list package muncul, ketikan ‘Emmet’ lalu klik/pilih pada package ‘Emmet’. Selanjutnya, tunggu sampai ‘Emmet’ terinstal pada sublime text.

NOTE: Anda perlu terhubung ke internet untuk menjalankan proses diatas.

Menggunakan Emmet

Untuk menggunakan emmet caranya cukup mudah. Jika anda pernah membuat CSS tentu anda tidak akan merasa kesulitan. Sebagai contoh, buatlah syntax sebagai berikut:

ul.list>li

Setelah itu, tekan tombol TAB maka kode diatas akan berubah menjadi:

<ul class="list">
	<li></li>
</ul>

Mudah bukan? Contoh lain, ketikan sintax sebagai berikut kemudian tekan tombol TAB:

div#box>div.another_box

Setelah anda menekan TAB kode diatas akan berubah menjadi sebagai berikut:

<div id="box">
	<div class="another_box">
		
	</div>
</div>

Class pada Emmet

Untuk membuat class lebih cepat pada emmet caranya sangatlah mudah, cukup tulis nama class yang ingin anda buat diawali dengan karakter titik (.) contoh:

.class_saya

Setelah itu, tekan TAB, maka .class_saya akan berubah menjadi sebagai berikut:

<div class="class_saya">
		
</div>

Seperti yang anda lihat diatas, element div akan otomatis ditambahkan. Bagaimana jika anda ingin element lain yang ditambahkan? misalnya, ul. Caranya adalah sebagai berikut:

ul.class_saya

Kemudian, tekan TAB maka akan berubah menjadi sebagai berikut:

<ul class="class_saya">
	
</ul>

Id Pada Emmet

Penggunaan Id tidaklah berbeda dengan class, hanya saja tanda titik (.) diubah menjadi pagar (#). Contoh:

#id_saya

atau

ul#id_saya

Child Element

Selanjutnya, anda juga bisa membuat child element dengan lebih cepat. Perhatikan contoh berikut:

ul>li

Jika anda menekan tombol TAB setelah kode diatas, maka akan menjadi:

<ul>
	<li></li>
</ul>

Menampilkan element sebanyak x kali

Misalnya, anda ingin membuat syntax HTML sebagai berikut:

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Maka jika menggunakan emmet anda tinggal membuat seperti ini div*5 kemudian tekan tombol TAB.

Contoh gabungan

Misal, anda ingin membuat sebuah syntax HTML sebagai berikut:

<ul class="list">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

Maka, anda tinggal mengetikan perintah ul.list>li*5 kemudian tekan TAB.

Kesimpulan

Pada Sublime Text, tersedia banyak package yang mampu mempercepat pekerjaan anda. Dimana Emmet adalah salah satu package yang penting, terutama jika anda adalah seorang web developer atau web designer.

sublime text 2 logo
  • Akbar HS

    Wahh .. tips yg sangat bagus buat pengguna sublime nih ..
    tp kok sy coba ga bisa ya. sy coba syntax dengan kedalaman seperti div>div>ul>li*5+tag
    sy sudah menginstall package emmet. sy menggunakan sublime text2. mohon pencerahannya ..thanks.

    • Fadhel

      Wah hebat rumusnya hhe saya jadi tau, tadi saya coba bisa kalo di sublime text 3