Aplikasi untuk Belajar HTML dan Cara Instalasinya

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:

  1. Download VS Code versi terbaru di situs resminya: Visual Studio Code Download for Windows
  2. Jalankan file hasil download untuk memulai jendela instalasi
  3. Setelah muncul Licence Agreement, pilih I accept licence agreement, klik Next
  4. Pada pemilihan Destination Location, biarkan apa adanya, kemudian klik Next
  5. Lanjutkan klik Next pada nama Start Menu Folder
  6. Pada Select Additional Task, centang semua pilihan, kemudian klik Next
  7. Tunggu sampai proses instalasi selesai
  8. Klik Finish. Jalankan atau Launch Visual Studio Code

Tampilan awal dari VS Code adalah seperti ini:

Tampilan User Interface VS Code
VS Code: Tampilan User Interface

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.

Tampilan Sidebar Menu Explorer Visual Studio Code
VS Code: Sidebar Menu - Explorer

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.

Tampilan Sidebar Menu Extensions
VS Code: Sidebar Menu - Extensions

Berikut ini Extensions VS Code yang disarankan untuk belajar HTML:

  1. Auto Complete Tag
  2. Blockman
  3. Error Lens
  4. Live Server
  5. Material Icon Theme
  6. 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.