Artikel ini membahas tentang aplikasi yang dibutuhkan untuk belajar HTML secara offline beserta cara instalasinya di Windows. Tidak perlu pengetahuan khusus untuk mengikuti tutorial di sini.
Teks Editor Visual Studio Code
Teks editor adalah aplikasi untuk membuat dan memodifikasi teks sebuah file. Teks editor yang pasti ada di Windows bernama Notepad, namun karena tampilannya sangat sederhana, maka kami menyarankan penggunaan Visual Studio Code (disingkat VS Code), teks editor buatan Microsoft yang memiliki banyak fitur.
Cara instalasi Visual Studio Code (VS Code) di Windows sebagai berikut:
- Download VS Code versi terbaru di situs resminya: Visual Studio Code Download for Windows
- Jalankan file hasil download untuk memulai jendela instalasi
- Setelah muncul Licence Agreement, pilih I accept licence agreement, klik Next
- Pada pemilihan Destination Location, biarkan apa adanya, kemudian klik Next
- Lanjutkan klik Next pada nama Start Menu Folder
- Pada Select Additional Task, centang semua pilihan, kemudian klik Next
- Tunggu sampai proses instalasi selesai
- Klik Finish. Jalankan atau Launch Visual Studio Code
Tampilan awal dari VS Code adalah seperti ini:
Terdapat beberapa menu sidebar di user interface (tampilan) dari VSCode, yakni:
- Explorer
- Search
- Source Control
- Run and Debug
- Extensions
Menu sidebar VS Code yang perlu diketahui ketika baru belajar pemrograman web adalah Explorer dan Extensions.
Explorer adalah menu untuk menampilkan semua file dalam ruang kerja (workspace). Jika tidak ada folder yang digunakan sebagai workspace maka kita perlu membuka sebuah folder terlebih dahulu.
Extensions VS Code
Extensions adalah aplikasi tambahan yang memberi fitur tertentu pada VS Code. Extensions yang tepat akan meningkatkan produktifitas kita dalam membuat kode.
Berikut ini Extensions VS Code yang disarankan untuk belajar HTML:
- Auto Complete Tag
- Blockman
- Error Lens
- Live Server
- Material Icon Theme
- Prettier - Code formatter
Auto Complete Tag
Auto Complete Tag adalah extensions yang berisi 2 extensions lain bernama Auto Close Tag dan Auto Rename Tag.
Auto Close Tag berfungsi untuk memberi tag penutup secara otomatis, contohnya ketika kita tulis <p> maka secara otomatis akan ada tag penutupnya menjadi <p></p>.
Auto Rename Tag berfungsi untuk menyelaraskan nama tag pembuka dan tag penutup ketika dirubah ke nama lain, semisal kita mengganti tag <p></p> menjadi tag <h1></h1> maka hanya perlu mengubah nama di bagian tag pembukanya saja.
Blockman
Blockman adalah extensions yang berguna untuk memberi warna berbeda pada setiap batasan blok kode. Tentu ini memudahkan kita untuk mengetahui batasan-batasan dari blok kode.
Error Lens
Error Lens berguna untuk menampilkan error di dalam editor teks. Ini mempermudah kita dalam menemukan bagian kode yang membuat error untuk diperbaiki.
Live Server
Live Server berguna untuk membuat server lokal dari dalam VS Code, kita tidak perlu lagi repot menginstal dan mengatur aplikasi lokal lain seperti XAMPP.
Material Icon Theme
Material Icon Theme berguna untuk memberi icon pada file sesuai dengan tipenya. Penggunaan icon tidak hanya mempercantik tab Explorer namun juga memudahkan kita untuk menemukan file bertipe tertentu.
Prettier Code Formatter
Prettier - Code formatter adalah extensions yang berguna untuk merapikan kode sesuai dengan aturan yang disetujui oleh komunitas. Kode yang rapi sangat penting karena memudahkan kita dalam membuat dan memodifikasi kode.
Modern Web Browser
Modern Web Browser adalah aplikasi browser yang memiliki versi terbaru. Beberapa pilihan browser yang disarankan antara lain Google Chrome, Microsoft Edge, Brave, Mozilla Firefox, dan Opera. Anda tidak harus menginstall semua browser tersebut, cukup install versi terbaru dari 2 browser.
Memiliki beberapa browser sangat membantu kita dalam melakukan pengetesan kode dan tampilan website, terutama browser yang memiliki engine berbeda seperti Google Chrome, Mozilla Firefox, dan Opera. Beberapa fitur mungkin tersedia di suatu browser namun belum tentu tersedia di browser lain.