HTML Preview Online

Cara melihat hasil kode HTML

Kode HTML baru terlihat hasilnya setelah dibuka oleh browser. Ada tiga cara yang paling sering dipakai:

Untuk melihat kode HTML dari halaman yang sudah online, tekan Ctrl+U di Chrome (lihat sumber halaman) atau F12 untuk membuka DevTools.

Struktur dasar dokumen HTML

Setiap halaman HTML yang benar punya kerangka yang sama. Pilih Kerangka HTML5 kosong di menu contoh untuk memulai dari sini.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Judul Halaman</title>
</head>
<body>
  <h1>Halo, dunia!</h1>
</body>
</html>

Kalau kamu hanya menulis potongan seperti <h1>Halo</h1>, tool ini otomatis membungkusnya dengan kerangka di atas saat dijalankan dan saat diunduh.

Tiga cara menghubungkan CSS dan JavaScript ke HTML

Di tool ini, file eksternal dengan path relatif seperti style.css tidak bisa dibaca, karena file itu ada di komputermu, bukan di internet. Tempel isi style.css ke tab CSS dan isi app.js ke tab JS — hasilnya sama. Kalau kamu membuka beberapa file sekaligus lewat Buka file, file .css dan .js otomatis masuk ke tabnya masing-masing.

Kenapa gambar atau CSS tidak muncul di preview

Penyebab paling sering adalah path relatif. Kode seperti <img src="foto.jpg"> mencari file di folder yang sama dengan halamannya. Saat dibuka dari komputermu, folder itu ada; di preview online, tidak ada. Console akan menampilkan pesan Gagal memuat <img>.

Membaca error JavaScript di console

Kalau tombol tidak bereaksi atau halaman kosong, buka panel Console di bawah preview. Error tampil merah, lengkap dengan tautan ke barisnya — klik tautan itu untuk melompat ke baris yang salah di editor.

Pakai console.log(nilai) untuk melihat isi variabel saat kode berjalan. console.table(data) juga didukung untuk melihat objek dan array.

Mengecek tampilan di HP, tablet dan laptop

Tombol lebar layar di atas preview mempersempit area tampilan supaya kamu bisa melihat apakah layout rusak di layar kecil. Lebar yang umum dipakai untuk pengujian:

Agar media query bekerja di HP sungguhan, halamanmu wajib punya <meta name="viewport" content="width=device-width, initial-scale=1.0">. Untuk pengujian akhir, tetap buka hasilnya di HP asli: preview ini hanya mengubah lebar, bukan meniru browser HP.

Memakai Bootstrap, Tailwind dan library lain

Library CSS dan JavaScript bisa dipakai lewat CDN — cukup tambahkan tag-nya di tab HTML. Menu contoh punya template Bootstrap 5 dan Tailwind CSS yang siap dijalankan.

Urutan penting: library harus dimuat sebelum kode yang memakainya. Kalau console menampilkan $ is not defined atau bootstrap is not defined, tag library-nya belum ada atau letaknya terlalu bawah.

Yang tidak bisa dijalankan di preview ini

Preview berjalan di dalam iframe sandbox — ruang terpisah yang tidak bisa mengakses halaman Toolnesia, cookie, atau data browsermu. Itu membuatnya aman untuk mencoba kode dari mana saja, tapi ada beberapa batasan:

• PHP, Python dan kode server lain tidak bisa berjalan. Browser hanya memahami HTML, CSS dan JavaScript. Kode PHP butuh server seperti XAMPP atau hosting.
• localStorage dan sessionStorage tetap bisa dipakai, tapi isinya hilang setiap kali preview dijalankan ulang. Cookie tidak tersedia.
• fetch() ke API lain hanya berhasil kalau API itu mengizinkan permintaan dari mana saja (CORS terbuka).
• Kamera, mikrofon, lokasi dan notifikasi diblokir oleh sandbox.
• Link yang diklik terbuka di dalam preview. Tambahkan target="_blank" supaya terbuka di tab baru.

Untuk menguji fitur-fitur itu, unduh hasilnya dengan tombol .html lalu buka file itu langsung di browser.