Kita kembali ke pelajaran terakhir kita, dimana kita sudah menuliskan kode HTML sederhana dengan notepad seperti yang bisa dilihat pada layar sebelah kanan. Dan hasilnya bisa dilihat pada layar sebelah kiri.

Bisa kita lihat disini bahwa Notepad adalah text editor yang dirancang untuk umum, bukan secara spesifik untuk menuliskan kode. Jadinya disini semua kode yang kita tuliskan kelihatan menggunakan font yang sama, dan warna yang sama. Tidak ada perbedaan antara HTML Tag dan kontennya. Hal ini akan mempersulit kita apabila hendak menuliskan kode untuk situs besar, karena perhatian kita akan dihabiskan untuk mengurus hal-hal kecil seperti mencari tag, mengatur inden, dan lain-lain.

Oleh karena itu, sangat disarankan untuk menggunakan text editor yang memang dirancang untuk menuliskan kode. Ada banyak text editor yang tersedia, seperti Atom, Sublime, Notepad++, Textpad, Eclipse, Visual Studio Code, Dreamweaver dan lain-lain. Ada yang sepenuhnya gratis, dan ada juga yang berbayar.

Pada waktu video kursus ini dibuat, Text Editor yang sedang popular adalah Atom. Oleh karena itu seluruh video kursus dibuat menggunakan Atom. Text Edito Atom dapat diakses pada situs atom.io. Yang kalau kita buka menggunakan browser, akan redirect ke halaman berita yang kurang menyenangkan, dimana pengembang Atom mengatakan bahwa mereka sudah tidak mengembangkan Atom lagi. Dan para pengguna Atom disarankan untuk berpindah ke Visual Studio Code.

Namun bagi teman-teman yang masih ingin tetap menggunakan Atom, mungkin karena ingin agar tampilan Text Editornya disamakan dengan video kursus, disini masih ada link untuk mengunduh Atom versi 1.60 dari situs GitHub. Kalau kita klik, disini kita bisa menemukan installer untuk Atom dalam berbagai versi. Bagi teman-teman yang menggunakan sistem operasi Windows, terutama di komputer versi baru yang sudah 64 bit, bisa menggunakan file AtomSetup-x64.exe. Sedangkan teman-teman yang menggunakan sistem lain bisa memilih file yang sesuai dengan sistem operasinya. Silahkan unduh dan ikuti petunjuk instalasinya.

Sedangkan bagi teman-teman yang ingin menggunakan Text Editor yang lebih update, bisa mengunjungi situs code.visualstudio.com. Disini kita bisa mengunduh installer Visual Studio Code, dalam 3 versi operasi yaitu Windows, Linux dan Mac. Silahkan pilih yang sesuai dengan sistem operasi masing-masing dan ikuti petunjuk instalasinya.

Kita buka kembali kode kita yang sebelumnya menggunakan Visual Studio Code. Kali ini kita hendak menuliskan kodenya dalam bentuk HTML lengkap. Kita geser dahulu kode Alice ke bawah, lalu kita geser kursor ke bagian paling atas. Kita ketik html:5. Di text editor akan keluar tulisan Emmet Abbreviation. Artinya kita akan menggunakan kode html:5 untuk menghasilkan boilterplate versi HTML5. Kita tekan tombol Enter, dan kita mendapatkan satu buah halaman HTML lengkap.

Jadi ini adalah salah satu kehebatan Text Editor. Kita hanya perlu mengetik html:5, dan kita langsung mendapatkan kode sebanyak ini. Tidak perlu kita ketik secara manual lagi. Nantinya di video berikutnya, kita akan bahas mengenai arti dari masing-masing kode yang dituliskan secara otomatis disini. Namun khusus untuk video ini, kita akan membahas lebih ke arah Text Editornya dahulu ya.

Bagi teman-teman yang ingin tau lebih lanjut mengenai apa saja yang bisa kita lakukan dengan Emmet, maka kita bisa membuka browser. Lalu kita ketikkan alamat berikut:

https://docs.emmet.io/cheat-sheet

Disini kita bisa melihat daftar dari shortcut yang perlu kita ketikan, beserta kode lengkap yang akan kita dapatkan dari shortcut tersebut. Dengan membiasakan diri menggunakan fitur Emmet, kita bisa menghemat banyak waktu kita.

Selanjutnya kita pindahkan kode h1, h2 dan h3 ini ke dalam tag body. Bagaimana caranya? Pertama kita pilih dahulu ketiga tag menggunakan mouse. Lalu tekan tombol Alt dan tahan, sambil tekan tombol anak panah ke atas. Kita geser hingga kode pindah ke dalam tag body.

Dalam kode HTML, kita mengenal konsep tag bertingkat. Artinya kita boleh menuliskan tag di dalam tag lain. Sebagai contoh di dalam tag head, terdapat tag meta dan title. Kemudian di dalam tag body, kita sudah memindahkan kode tag h1, h2 dan h3. Sebagai penanda bahwa tag berada di dalam tag lainnya, kita memberikan inden pada tag anak. Sebagai contoh disini kita melihat ada space kosong di depan tag meta dan title. Begitu juga pada tag h1, h2, dan h3. Space kosong ini kita sebut juga dengan nama inden. Yang enaknya disini adalah kalau menggunakan Visual Studio Code, indennya secara otomatis ditambahkan pada saat kita menekan tombol alt + anak panah keatas tadi. Sedangkan kalau kita masih menggunakan notepad, maka kita harus menambahkan sendiri inden di depan tag.

Fitur lain yang cukup penting dari Text Editor adalah fitur Collapse. Kita sudah mengetahui bahwa pada saat kita membuat tag pembuka, harus diakhiri dengan tag penutup. Sebagai contoh disini ada tag pembuka body, dimana pada bagian akhirnya mesti ada juga tag penutup body. Nah, kalau halaman HTML-nya sudah terdiri dari banyak kode, kita akan kesulitan mencari tag pembuka dan tag penutup yang terpisahkan oleh banyak baris. Disinilah pentingkan fitur Collapse. Kita bisa mengaksesnya dari sebelah kiri kode, misalkan di sebelah kiri tag body, terdapat anak panah. Kalau kita klik, maka semua kode dari tag body akan dihilangkan dari tampilan, sehingga kode kita terlihat lebih sederhana.

Ini adalah salah satu fitur penting yang bisa kita gunakan untuk menyederhanakan tampilan kode kita. Kegunaan pertamanya adalah untuk memastikan bahwa tag pembuka memiliki pasangan tag penutup. Kegunaan lainnya adalah apabila kita hendak memindahkan kode ini ke tampat lain, maka kita lebih mudah dalam memilih kode karena yang perlu dipilih hanyalah 2 baris. Berbeda kalau kodenya kita tampilkan semuanya, maka kita harus memilih semua baris dari tag pembuka hingga ke tag penutup.

Kita ulangi lagi ya aturan umum penulisan HTML Tag. Tag kita tuliskan di dalam tanda kurung siku, kemudian diikuti oleh kontennya. Lalu diakhir konten kita tuliskan kembali tag tersebut dalam tanda kurung siku namun ditambahkan dengan tanda slash/. Sebagai contoh bisa kita lihat disini bahwa kita menandakan konten Alice’s Adventures in Wonderland sebagai tag Header tingkat pertama. Tulisan h1 di dalam tag, yang dituliskan dalam font berwarna merah, kita sebut dengan nama elemen.

Selanjutnya kita melihat lagi aturan umum penulisan Attribute. Attribute dituliskan di dalam tanda kurung siku tag, dan harus berada setelah elemen. Jadi elemen harus selalu berada di paling kiri, setelah itu baru diikuti dengan nama attribute. Apabila attribute tersebut memiliki nilai, maka kita menambahkan tanda sama dengan setelah nama attribute, dan menuliskan nilainya di dalam tanda petik dua.

Sebagai contoh dibawah ini bisa kita lihat tag dengan elemen HTML yang berwarna merah. Lalu nama attributenya lang dan dir yang berwarna kuning. Sedangkan nilai attribute adalah en dan ltr yang diberi warna hijau.

Kita dapat menambahkan tag di dalam tag, alias tag bertingkat. Di contoh ini kita bisa melihat bahwa di dalam tag HTML terdapat tag head, dan kemudian didalamnya terdapat tag meta. Untuk penulisan kode yang lebih rapi, biasanya kita memberikan inden untuk konten dari tag.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.