Setup Lingkungan Kerja Untuk Belajar HTML

Bab 2: Setup Lingkungan Kerja untuk Belajar HTML

Selamat datang di Bab 2 dari seri Tutorial HTML untuk Pemula yang dipersembahkan oleh Authemic Labs bersama Mas Hedi untuk komunitas Authemers.

Pada bab sebelumnya kita sudah membahas dasar-dasar HTML termasuk pengertian, sejarah, dan peran HTML dalam dunia web modern. Jika Anda belum membaca bab pertama, Anda bisa mempelajarinya di artikel berikut:

Apa Itu HTML dan Mengapa Penting dalam Website

📚 Baca Juga

Pada bab ini kita akan mulai menyiapkan lingkungan kerja untuk menulis kode HTML pertama kita. Proses ini sering disebut sebagai development environment setup.

Lingkungan kerja yang baik akan membantu Anda menulis kode dengan lebih cepat, rapi, dan efisien. Banyak developer profesional menggunakan editor kode khusus untuk membuat website.

Visual Studio Code menjadi editor favorit banyak web developer

Tools yang Dibutuhkan untuk Belajar HTML

Untuk mulai belajar HTML sebenarnya Anda hanya membutuhkan dua hal:

  • Text editor untuk menulis kode
  • Browser untuk menampilkan hasil kode

Namun agar proses belajar lebih nyaman, banyak developer menggunakan editor kode modern seperti Visual Studio Code.

Tools yang direkomendasikan:
  • Visual Studio Code
  • Google Chrome atau Firefox
  • Extension Live Server

Menginstall Visual Studio Code

Visual Studio Code atau sering disingkat VS Code adalah salah satu code editor paling populer di dunia.

Editor ini dikembangkan oleh Microsoft dan memiliki banyak fitur yang sangat membantu developer seperti syntax highlighting, auto completion, dan extension marketplace.

Langkah Install VS Code

  1. Kunjungi website resmi Visual Studio Code
  2. Download versi sesuai sistem operasi
  3. Install seperti aplikasi biasa
  4. Buka VS Code setelah proses instalasi selesai

Setelah VS Code terinstall, Anda sudah siap menulis kode HTML pertama.

Membuat Folder Proyek HTML

Sebelum membuat file HTML, sebaiknya kita membuat folder khusus untuk proyek website.

Struktur folder sederhana biasanya terlihat seperti ini:

project-website index.html style.css script.js

File index.html adalah halaman utama website yang akan dibaca pertama kali oleh browser.

Nantinya file CSS dapat digunakan untuk mengatur tampilan halaman. Jika Anda ingin memahami lebih jauh tentang CSS, Anda bisa membaca panduan berikut:

Membuat File HTML Pertama

Sekarang kita akan membuat file HTML pertama.

Langkah-langkah

  1. Buka VS Code
  2. Pilih menu Open Folder
  3. Buat file baru bernama index.html

Setelah itu tuliskan kode berikut:

<!DOCTYPE html> <html> <head> <title>Website Pertama Saya</title> </head> <body> <h1>Halo Dunia</h1> <p>Ini adalah website pertama saya.</p> </body> </html>

Simpan file tersebut kemudian buka menggunakan browser. Jika berhasil, Anda akan melihat teks sederhana pada halaman web.

Extension Live Server

Saat mengembangkan website, developer biasanya menggunakan extension Live Server agar perubahan kode langsung terlihat tanpa perlu refresh browser secara manual.

Extension ini sangat membantu terutama ketika website sudah menjadi lebih kompleks.

Langkah Selanjutnya Setelah HTML

Setelah memahami HTML dasar, biasanya developer akan melanjutkan belajar CSS dan JavaScript untuk membuat tampilan dan interaksi website menjadi lebih menarik.

Jika Anda tertarik mempelajari teknologi yang lebih lanjut seperti React, Anda bisa membaca panduan berikut:

Namun sebelum masuk ke framework modern, sangat penting untuk memahami dasar HTML dengan baik.

Seri lengkap belajar HTML dapat Anda ikuti di halaman berikut:

Tutorial HTML untuk Pemula Lengkap

Kesimpulan

Pada bab ini kita telah mempelajari bagaimana menyiapkan lingkungan kerja untuk belajar HTML.

Dengan menggunakan tools seperti Visual Studio Code dan browser modern, Anda sudah memiliki semua yang dibutuhkan untuk mulai menulis kode website.

Pada bab berikutnya kita akan mempelajari lebih dalam tentang anatomi tag HTML dan bagaimana elemen HTML bekerja.

FAQ

Apakah harus menggunakan Visual Studio Code untuk belajar HTML?

Tidak wajib, tetapi VS Code sangat direkomendasikan karena memiliki banyak fitur yang membantu developer menulis kode lebih cepat.

Apakah HTML bisa dibuat tanpa internet?

Ya. HTML dapat ditulis dan dijalankan secara offline karena browser dapat membaca file HTML langsung dari komputer.

Apakah HTML harus dipelajari sebelum React?

Sangat disarankan. React tetap menggunakan konsep HTML melalui JSX sehingga pemahaman HTML sangat penting.

Artikel terkait