Apakah mungkin membuat semua kode HTML suatu situs dalam hitungan menit, jika bukan detik? Itu mungkin jika Anda menggunakan Emmet! Pendekatan baru ini memungkinkan pengembangan cepat kode dalam HTML, XML, dan format kode terstruktur lainnya.
Emmet adalah plugin untuk banyak editor teks populer. Dengan Emmet, Anda membuat kerangka halaman Anda dalam sintaks yang rasional tetapi sangat padat dan kemudian mengembangkannya menjadi kode HTML yang lengkap dan tepat. Hasilnya terasa seperti sulap: satu baris teks berkembang menjadi ratusan baris sintaksis, dan Anda memiliki halaman statis, atau bahkan struktur situs lengkap, siap dalam hitungan menit.
Anda akan belajar di sini bagaimana Anda dapat menggunakan Emmet untuk membuat halaman web statis penuh. Kode Visual Studio digunakan untuk tutorial ini karena dilengkapi dengan dukungan bawaan untuk Emmet. Anda dapat menggunakan Emmet di editor lain, seperti Sublime Text dan Atom, tetapi Anda harus menambahkan dukungan untuknya melalui ekstensi.
Buat file situs Anda
Untuk memulai, buka Visual Studio Code.
Pilih “File -> File Baru” untuk membuat dokumen kosong baru.
Pilih “File -> Save As” untuk menyimpan file Anda, berikan ekstensi “html”.
Struktur dasar
Setiap elemen halaman web diatur dalam grup dan subgrup. Saat membuat kode dengan Emmet, Anda harus selalu mengingat bagaimana setiap grup berisi item yang dapat menjadi grup dengan lebih banyak elemen.
Catatan : meskipun kami akan menjelaskan dasar-dasarnya, akan lebih baik jika Anda sudah terbiasa dengan dasar-dasar sintaks HTML sebelum melanjutkan.
Pada tingkat paling dasar, sebagian besar situs berisi tiga grup/bagian: header, bagian utama untuk konten inti, dan footer. Untuk membuatnya dengan Emmet, ketik:
#header+#situs utama+#footer
Tanda “#†di depan setiap kata berarti bahwa setiap grup adalah div dengan ID. Tekan Enter di akhir baris untuk melihat Emmet beraksi, mengubah frasa kecil ini menjadi tiga baris HTML terstruktur.
Struktur tajuk
Header situs tipikal berisi logonya dan satu atau dua menu. Untuk menambahkannya ke halaman Anda, Anda dapat menyimpan HTML yang diperluas dari langkah sebelumnya dan mengetik langsung di Header Div. Anda kemudian dapat mengetik sesuatu seperti:
#logo+#menu_top+#menu_utama
Tekan Enter untuk meluaskannya juga, dan Anda akan memiliki tiga Div lagi untuk logo situs Anda dan dua menu di dalam Header Anda.
Pengelompokan di Emmet
Dengan Emmet, Anda mengelompokkan elemen dengan menempatkannya di dalam tanda kurung. Ini memungkinkan Anda membuat struktur kompleks untuk halaman Anda. Jadi batalkan semuanya sampai sekarang dan simpan hanya kode #header+#mainsite+footer dasar Anda dari sebelumnya.
Ganti #header dalam kode Anda dengan yang berikut:
(#header>.logo+.menu.top+.menu.main^)
Di Emmet Anda dapat menurunkan level dengan menggunakan karakter > dan dapat naik level dengan menggunakan karakter ^ . Ini memungkinkan Anda untuk memasukkan elemen, menambahkan yang lain di sana, lalu kembali ke atas.
Hasilnya akan terlihat seperti berikut:
(#header>.logo+.menu.top+.menu.main^)+#situs utama+footer
Di atas akan diterjemahkan menjadi: “Tambahkan Div (grup) dengan ID #header. Di dalamnya, tambahkan tiga Div dengan kelas “.logo”, “.menu.top”, dan “.menu.main”. Kembali satu tingkat ke atas, di luar grup, dan tambahkan dua Div lagi di sebelahnya dengan ID “#mainsite” dan “#footer.”
Struktur Pos
Posting dasar di situs tipikal biasanya berisi elemen-elemen berikut:
TitleImageExcerpt (sebagai paragraf teks)
Itu juga harus menawarkan tautan yang memungkinkan pengunjung untuk membaca posting yang sebenarnya dan mungkin tautan ke kategorinya, tag, dll. Demi kesederhanaan, kami hanya akan menggunakan ketiga elemen itu untuk saat ini.
Ini adalah kode yang akan kita tambahkan:
(.post>h3{Judul Posting $}+img+p{Posting Kutipan})*5
Ini memberi tahu Emmet untuk “Buat Div dengan kelas .post. Di dalamnya, tempatkan judul judul H3, gambar, dan paragraf untuk kutipan.
Dengan “{TEXT}†dilampirkan setelah elemen, Anda menentukan kontennya. Jadi, dengan “{Post Title}â€, itu memberi tahu Emmet bahwa konten dari setiap judul H3 akan menjadi teks placeholder “Post Titleâ€. Anda dapat mengubah “Judul Posting” menjadi nama Anda atau string teks apa pun yang Anda suka, dan itu akan digunakan sebagai konten judul posting Anda saat kode diperluas.
$ di samping “Judul Posting†adalah variabel numerik yang berfungsi bersama dengan “5†yang dapat Anda lihat di luar tanda kurung. *5 setelah tanda kurung memberitahu Emmet untuk mengulang isi tanda kurung sebanyak lima kali. $ diganti dengan nomor iterasi setiap posting . Ganti nomor ini dengan jumlah posting yang Anda inginkan di halaman Anda.
Tambahkan ini ke kode aktual. Seharusnya terlihat seperti:
(#mainsite>(.post>h3{Judul Postingan $}+img+p{Kutipan Postingan})*5)
Struktur Footer
Untuk Footer, kami menambahkan dua grup – dua Div dengan kelas “.design†dan “.copyrightâ€.
Kodenya adalah sebagai berikut:
(.design>(a.designerslink))+(.copyright>(p{Hak Cipta 2020 Nama Saya}))
Ini akan membuat div dengan class “.design.†Di dalamnya ada tautan dengan kelas “.designerslink”. Ditambahkan di sebelahnya adalah div kedua dengan kelas “.copyright.†Di dalam div ini terdapat paragraf teks biasa dengan konten “Hak Cipta 2020 Nama Saya”.
Hasilnya akan seperti ini:
(#footer>(.design>(a.designerslink))+(.copyright>(p{Hak Cipta 2020 Nama Saya})))
Sekarang, cukup tekan Enter, dan situs Anda sudah siap!
Dengan satu penekanan tombol, semua yang kita lihat sampai sekarang, dan sekumpulan karakter yang sangat padat ini, akan berubah menjadi lusinan baris sintaks HTML yang tepat untuk satu halaman penuh!
Simpan perubahan pada file dengan menekan Ctrl + S atau mengunjungi “File -> Save.” Untuk melihat pekerjaan Anda, jalankan browser Anda. Kemudian, baik menggunakan “File -> Open” atau pengelola file eksternal, cari file HTML Anda dan buka secara manual di browser.
Membungkus
Anda telah mempelajari dasar-dasar penggunaan Emmet untuk membuat file HTML Anda. Tentu saja, Anda dapat kembali ke kode Anda kapan saja untuk men-tweak atau mengembangkannya dengan lebih banyak barang.
Apakah Anda sudah tahu tentang Emmet? Apakah Anda menggunakan beberapa pintasan lain yang membantu saat membuat situs? Beri tahu kami di bagian komentar di bawah.
