Cara Membuat HTML di Chromebook Menggunakan VSCode.dev

Chromebook adalah perangkat yang ringan dan berbasis cloud, yang berarti sebagian besar aktivitas pengembangan web harus dilakukan secara online. Salah satu cara terbaik untuk menulis kode HTML di Chromebook adalah dengan menggunakan VSCode.dev, versi berbasis web dari Visual Studio Code yang tidak memerlukan instalasi.

Langkah-Langkah Membuat HTML di Chromebook dengan VSCode.dev

1. Buka VSCode.dev

  1. Buka browser Chrome di Chromebook Anda.
  2. Kunjungi situs VSCode.dev.
  3. Tunggu hingga antarmuka Visual Studio Code web muncul.

2. Buat Folder atau Buka Repositori

  • Anda bisa menghubungkan VSCode.dev dengan akun GitHub untuk mengelola kode.
  • Alternatifnya, Anda dapat menggunakan penyimpanan lokal dengan memilih Open Folder dan memilih folder untuk menyimpan file HTML Anda.

3. Membuat File HTML

  1. Di sidebar kiri, klik ikon Explorer (ikon folder).

  2. Klik tombol New File (ikon kertas dengan tanda plus).

  3. Beri nama file dengan ekstensi .html, misalnya index.html.

  4. Ketikkan kode dasar HTML berikut:

    <!DOCTYPE html>
    <html lang="id">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dokumen HTML Pertama</title>
    </head>
    <body>
    <h1>Halo, Chromebook!</h1>
    <p>Ini adalah halaman HTML pertama saya di Chromebook menggunakan VSCode.dev.</p>
    </body>
    </html>

4. Menjalankan File HTML

Karena Chromebook tidak memiliki server lokal seperti di Windows atau macOS, Anda bisa membuka file HTML langsung di browser:

  1. Klik kanan file index.html pada VSCode.dev.
  2. Pilih Download untuk menyimpan file ke penyimpanan lokal Chromebook.
  3. Buka File Manager di Chromebook, lalu klik dua kali pada index.html untuk membukanya di Chrome.

5. Menggunakan Live Server (Opsional)

Jika ingin melihat perubahan secara langsung tanpa harus mengunduh file, Anda bisa menggunakan ekstensi Live Server dengan cara berikut:

  1. Gunakan layanan StackBlitz atau CodeSandbox yang mendukung pengeditan HTML dengan preview langsung.
  2. Alternatif lain adalah menggunakan ekstensi Live Server jika Chromebook Anda mendukung penginstalan Linux.

Kesimpulan

Menggunakan VSCode.dev di Chromebook adalah solusi praktis untuk membuat dan mengedit file HTML tanpa perlu menginstal aplikasi tambahan. Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah membuat, mengedit, dan menjalankan file HTML di perangkat berbasis cloud ini.

Lebih baru Lebih lama