HTML Viewer

Jalankan otomatis

Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, 
  initial-scale=1.0">
  <title>HTML Viewer</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      background-color:  #f8fafc;
      color:  #334155;
    }
    h1 {
      color:  #2563eb;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      background-color:  #f59e0b;
      color: black;

Pratinjau

Penampil & Editor HTML

Lihat, edit, dan pratinjau kode HTML, CSS, dan JavaScript secara online secara instan.

Cara Menggunakan Penampil HTML

1. Masukkan Kode

Ketik atau tempel kode HTML, CSS, dan JS Anda ke dalam editor.

2. Pratinjau Langsung

Lihat perubahan tercermin secara instan di panel pratinjau.

3. Salin atau Unduh

Salin kode atau unduh sebagai file HTML dengan satu klik.

Pertanyaan yang Sering Diajukan tentang Penampil HTML

Apakah kode HTML saya dikirim ke server mana pun?

Tidak, semua pemrosesan dan pratinjau kode terjadi sepenuhnya di dalam browser Anda. Kami tidak menyimpan atau mengirim kode Anda ke server mana pun, memastikan privasi penuh.

Bisakah saya menggunakan CSS dan JavaScript?

Ya, Anda dapat menyertakan CSS di dalam tag <style> dan JavaScript di dalam tag <script> dalam dokumen HTML Anda.

Bagaimana cara menghentikan pratinjau agar tidak menyegarkan setiap ketukan tombol?

Anda dapat menghapus centang pada opsi 'Jalankan otomatis' di bilah alat. Ini memungkinkan Anda mengetik kode dan hanya memperbarui pratinjau secara manual saat Anda mengklik 'Jalankan Kode'.

Apakah Penampil HTML ini mendukung pustaka eksternal seperti Bootstrap atau Tailwind?

Ya, Anda dapat memuat pustaka eksternal dengan menambahkan tautan CDN mereka ke bagian <head> dari kode HTML Anda.

Bisakah saya menggunakan alat ini di perangkat seluler?

Ya, editornya responsif dan berfungsi di seluler, meskipun layar yang lebih besar memberikan pengalaman pengkodean yang jauh lebih baik karena tata letak layar terpisah.

Apa yang terjadi jika saya menulis kode JavaScript berbahaya?

Pratinjau berjalan di lingkungan kotak pasir yang memberikan lapisan keamanan, tetapi karena kode dieksekusi di browser Anda, itu hanya memengaruhi sesi Anda sendiri.

Bagaimana saya bisa mengekspor pekerjaan saya?

Anda dapat menggunakan tombol 'Unduh HTML' untuk menyimpan kode sebagai file index.html di perangkat Anda untuk dikerjakan nanti atau di-host.

Apakah ada batasan seberapa besar kode HTML?

Tidak ada batasan teoretis yang kami tetapkan, tetapi file yang sangat besar (ratusan megabyte) mungkin memperlambat browser Anda selama rendering.

Mengapa beberapa iframe tidak berfungsi di dalam pratinjau?

Beberapa situs web memblokir diri mereka sendiri agar tidak disematkan di dalam iframe karena alasan keamanan (menggunakan header X-Frame-Options). Ini adalah batasan keamanan dari situs target.

Apakah editor mendukung penyelesaian otomatis dan penyorotan sintaks?

Ya, kami menggunakan editor lanjutan yang dibangun pada teknologi yang sama dengan VS Code, yang menyediakan penyorotan sintaks, penutupan tag otomatis, dan pemformatan kode.