Persiapan Belajar HTML: Kode Editor dan Browser

Sebelum mulai mempelajari HTML, mari kita persiapkan aplikasi yang dibutuhkan serta beberapa penyesuaian agar kita bisa belajar dengan nyaman.

Kita hanya membutuhkan dua aplikasi saja, kode editor dan browser.

Kita juga akan menggunakan kode editor beserta ekstensi keren yang dapat merapikan kode secara otomatis.

1. Browser
   1. Install Browser
   2. Developer Tools
   3. View Page Source
   4. Perbedaan Elements (Developer Tools) dan View Page Source
2. Kode Editor
   1. Install Kode Editor
   2. Install Ekstensi Prettier
   3. Menyesuaikan Formatter Visual Studio Code
3. Buat File HTML Pertama
   1. Konvensi Penamaan File HTML
   2. Nama Khusus index.html
   3. Ekstensi File HTML
4. Buka File HTML di Browser

Browser

Untuk melihat halaman HTML yang telah kita buat, tentunya kita membutuhkan browser.

Install Browser

Anda bisa menggunakan browser apa pun sesuai kenyamanan, diantaranya:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Opera

Namun, saya lebih merekomendasikan menggunakan Google Chrome Google Chrome.

Selain cepat, Google Chrome juga dibekali dengan berbagai alat yang dapat membantu kita selama pengembangan web.

Developer Tools

Sebagian besar browser dilengkapi dengan Developer Tools yaitu peralatan yang dapat membantu pengembang halaman web.

Di Google Chrome, Anda dapat mengakses alat ini dengan cara menekan Ctrl + Shift + I.

Developer Tools terdiri dari beberap tab, untuk saat ini kita hanya memerlukan alat yang dapat menampilkan struktur HTML saja, lihat di tab Elements.

Struktur HTML yang ditampilkan pada tab Elements adalah hasil evaluasi browser setelah mengoreksi kesalahan penulisan HTML dan eksekusi kode JavaScript yang memanipulasi DOM.

View Page Source

Selain melalui Developer Tools, kita juga bisa melihatnya melalui "View Page Source".

Buka halaman web apa pun yang ingin dilihat kodenya, setelah itu tekan Ctrl + U.

Perbedaan Elements (Developer Tools) dan View Page Source

Singkatnya, tab Elements menampilkan struktur HTML setelah browser mengoreksi kesalahan dan hasil manipulasi DOM oleh kode JavaScript.

Sedangkan View Page Source menampilkan kode HTML utuh yang dikirim dari server, kode asli yang kita tulis.

Oleh karena itu, jangan bingung ketika struktur HTML di tab Elements dan "View Page Source" berbeda.

Kode Editor

Kita sebetulnya bisa menggunakan teks editor bawaan Windows, Notepad.

Tapi, secara visual kode yang kita tulis kurang menarik, tidak ada pewarnaan, tidak ada autocomplete, sehingga rawan salah ketik.

Oleh karena itu, kita perlu menginstal editor khusus untuk kode.

Install Kode Editor

Ada banyak kode editor yang bisa kita gunakan, diantaranya:

1. Visual Studio Code (VS Code)
2. Notepad++
3. Sublime Text
4. Atom
5. Vim

Saya lebih merekomendasikan Anda menggunakan Visual Studio Code, selain gratis, juga tersedia beragam ekstensi yang dapat membantu Anda dalam menulis kode, tidak hanya HTML.

Selain itu, Visual Studio Code merupakan kode editor open-source buatan Microsoft yang tengah naik daun.

Jika kita lihat di YouTube, sebagian besar pengembang web menggunakan kode editor yang satu ini.

Silahkan unduh melalui halaman resmi Visual Studio Visual Studio Code, lalu instal seperti biasa.

Jika Anda menggunakan Android, bisa menggunakan kode editor Dcoder, Code Editor, atau Spck Code Editor.

Install Ekstensi Prettier

Agar kode yang kita buat terlihat rapi dan memiliki struktur serta identasi yang konsisten, kita bisa menggunakan ekstensi yang dapat memformat kode secara otomatis, Prettier.

Dengan menggunakan ekstensi ini, ketika kita menyimpan kode, kode yang sudah kita tulis akan secara otomatis di rapikan.

Mari kita install Prettier:

1. Tekan Ctrl + Shift + X untuk membuka tab ekstensi VS Code.
2. Ketik Prettier.
3. Pilih Prettier - Code Formatter.
4. Lalu klik install.

Menyesuaikan Formatter Visual Studio Code

Secara default, Visual Studio Code menggunakan formatter bawaan.

Oleh karena itu kita perlu menyesuaikan pengaturannya agar menggunakan Prettier.

Cara menyesuaikan pengaturan formatter VS Code:

1. Klik menu File > Preferences > Settings atau tekan Ctrl + ,.
2. Ketik dan cari pengaturan Default Formatter lalu ubah menjadi Prettier - Code Formatter.
3. Cari pengaturan Format On Save lalu centang.

Pengaturan ini akan membuat VS Code merapikan kode yang kita tulis ketika kita menyimpannya dan formatter yang digunakan adalah Prettier.

Tutup dulu VS Code beberapa saat, agar kedua ekstensi bisa berjalan dengan baik.

Buat File HTML Pertama

Untuk pemanasan, mari kita buat dokumen HTML pertama kita. Struktur folder untuk belajar bisa diatur sesuai kenyamanan.

Misalnya seperti ini:

|-- belajar-html
    |-- index.html

Dan ini kode HTML-nya:

<!DOCTYPE html>
<html>
  <head>
    <title>Saya Sedang Belajar HTML</title>
  </head>
  <body>
    <h1>Saya Sedang Belajar HTML</h1>
  </body>
</html>

Konvensi Penamaan File HTML

Kita bisa membuat file HTML dengan nama apa pun sesuai keinginan.

Tapi, kita disarankan mengikuti aturan atau kebiasaan yang biasa digunakan oleh para pengembang web, yaitu:

1. Gunakan huruf kecil (a sampai z).
2. Gunakan tanda hubung (-) sebagai pengganti spasi.

Jika file HTML mengandung spasi, browser akan melakukan encode ke dalam karakter ASCII menjadi %20.

Misalnya, jika file html bernama hello world.html, ketika dibuka di browser akan diubah menjadi hello%20world.html.

Selengkapnya lihat di halaman referensi pengkodean URL HTML.

Gunakan:

• hello-world.html
• jumat-berkah.html

Jangan:

• hello world.html
• jum'at-berkah.html

Nama Khusus index.html

Jika kita ingin membuat halaman beranda atau indeks dari sebuah kategori, kita bisa membuat file HTML dengan nama index.html.

Dengan menggunakan nama file tersebut kita tidak perlu menulis URL lengkap secara eksplisit di bilah browser.

Misalnya, jika kita mengakses kodealgo.com, dibelakang layar sebetulnya kita diarahkan ke kodealgo.com/index.html.

Tapi, ini opsional dan hanya bekerja di server web, namanya juga bisa kita atur sesuai keinginan tergantung konfigurasi server, kebanyakan menggunakan index.html.

Ekstensi File HTML

Meskipun kita menulis kode HTML dengan struktur yang benar ...

... browser tidak akan menganggap itu sebagai file HTML jika kita tidak menulis ekstensi .html di belakangnnya.

Tanpa .html:

Dengan .html:

Jadi, setiap kali kita membuat file HTML pastikan file tersebut memiliki ekstensi .html.

Buka File HTML di Browser

Setelah file HTML dibuat, tentu kita ingin tahu seperti apa hasilnya di browser.

Untuk membuka file HTML, ketika perlu menyalin path (jalur) ke file tersebut dan mengunjunginya menggunakan browser.

Berikut langkah-langkahnya:

1. Klik kanan pada file HTML yang ingin dibuka.
2. Pilih opsi Copy Path.
3. Tempelkan path yang telah disalin ke bilah alamat browser.
4. Tekan enter untuk membuka file tersebut.

Jika kode di dalam file HTML tersebut berubah, kita perlu menyegarkan browser untuk melihat perubahannya.