Membuat dan Menjalankan Dokumen HTML

Di sini kita akan belajar cara membuat dan menjalankan dokumen HTML. Ada dua aplikasi yang perlu diinstal untuk melakukan keduanya, yaitu kode editor dan browser.

Instal Kode Editor

Kode editor adalah aplikasi yang digunakan untuk menulis kode, termasuk kode HTML. Kode editor memiliki banyak fitur yang memudahkan untuk menulis kode HTML, di antaranya:

Syntax Highlighting, fitur yang memberikan warna pada kode HTML sesuai jenisnya sehingga kode HTML menjadi lebih mudah dibaca.
Autocomplete, fitur yang memberikan bantuan berupa opsi yang bisa dipilih untuk melengkapi kode HTML yang sedang ditulis.
Dan masih banyak fitur lainnya.

Kode editor yang akan diinstal di sini adalah Visual Studio Code atau VS Code. VS Code adalah kode editor gratis yang paling populer di dunia.

Secara default, VS Code sudah mendukung untuk penulisan kode HTML, jadi tidak perlu instal aplikasi tambahan lainnya untuk menulis kode HTML di VS Code.

VS Code dapat diinstal di Linux, Windows, dan Mac. Di sini akan dipandu untuk instalasi VS Code di Linux dan Windows.

Instal VS Code di Linux

Jika Anda menggunakan Linux berbasis Debian atau Ubuntu, download file installer VS Code untuk Linux (.deb) di halaman download VS Code.

Kemudian instal file installer tersebut di terminal dengan perintah berikut.

sudo apt install ./<file installer>.deb

Untuk Linux selain Debian dan Ubuntu, panduannya bisa dilihat di dokumentasi instalasi VS Code untuk Linux.

Instal VS Code di Windows

Download file installer VS Code untuk Windows di halaman download VS Code. Kemudian jalankan installer tersebut sampai selesai.

Instal VS Code di Mac

Panduan instal VS Code di mac bisa dilihat di dokumentasi instalasi VS Code untuk Mac.

Instal Browser

Browser adalah aplikasi yang digunakan untuk menampilkan halaman website. Browser dibutuhkan untuk menjalankan kode HTML agar tahu hasil kodenya seperti apa dalam bentuk halaman website.

Anda bisa menggunakan browser yang sudah terinstal di perangkat Anda, seperti Google Chrome, Microsoft Edge, Firefox, Safari, dll. Tidak perlu menginstal browser khusus.

Membuat Dokumen HTML

Untuk membuat dokumen HTML, buka aplikasi kode editor VS Code.

Kode editor VS Code

Kemudian tekan ctrl + n untuk membuat file baru. Akan muncul sebuah tab editor yang di dalamnya bisa ditulis sesuatu menggunakan keyboard.

Kode editor file baru VS Code

Masukkan kode berikut di editor tersebut.

<h1>
    Test Dokumen HTML
</h1>

Tekan ctrl + s untuk menyimpan file dokumen HTML. Nama file-nya bisa apa saja, extensinya harus .html, folder penyimpanannya bebas di mana saja.

Jika sudah tersimpan, maka nama file dokumen HTML akan tampil di atas editor.

Nama file kode editor VS Code

Setiap kali mengubah isi file dokumen HTML, jangan lupa untuk menyimpan file tersebut dengan ctrl + s. Ketika ada perubahan yang belum disimpan akan ada tanda bulat putih di sebelah nama file, ketika sudah disimpan tanda tersebut akan hilang.

File belum tersimpan kode editor VS Code

Untuk membuka file dokumen HTML lain, tekan ctrl + o lalu pilih file dokumen HTML yang akan dibuka.

Menjalankan Dokumen HTML

Untuk menjalankan dokumen HTML, buka browser kemudian buat tab baru.

Tekan ctrl + o, lalu pilih file dokumen HTML yang ingin dijalankan di browser.

Setelah dipilih, browser akan menjalankan dokumen HTML dalam bentuk halaman website.

File dokumen HTML dibuka di browser

Setiap kali mengubah isi file dokumen HTML, jangan lupa untuk merefresh tab untuk melihat hasil perubahan dokumen HTML.