Simulic
Bahasa Indonesia

Taman bermain HTML dan CSS – konten, struktur, dan gaya

InformatikaAplikasi digitalUsia 17–18

Memuat…

Gunakan di kelas saya ✨ Sesuaikan dengan AI Laporkan masalah

Sunting konten, markup HTML, dan lembar gaya CSS di panel terpisah, lalu lihat halaman dan pohon DOM diperbarui saat Anda mengetik. Ganti lembar gaya untuk melihat konten yang sama tampil sangat berbeda; klik elemen mana pun untuk melihat aturan CSS yang berlaku, spesifisitasnya, dan model kotak. Validator melaporkan tag yang tidak ditutup atau salah urutan serta properti dan nilai CSS yang tidak valid. Dua tab lain membahas formulir dengan validasi peramban dan permintaan GET/POST yang dikirimnya, serta peristiwa click dan input yang mengubah halaman.

Pelajaran: Membuat halaman web dengan HTML dan CSS: elemen, atribut, selektor, model kotak, formulir, dan peristiwa

Yang ditunjukkan

Halaman web punya tiga lapisan. HTML menandai konten dengan elemen seperti h1, p, ul, dan table, lalu peramban mengubah markup menjadi pohon DOM. Aturan CSS memilih elemen dengan selektor (tag, .kelas, #id) dan mengatur properti seperti color, margin, dan padding; jika aturan bertentangan, yang menentukan adalah kepentingan, spesifisitas, dan urutan, dan sebagian properti diwariskan. Setiap elemen adalah kotak yang terdiri atas konten, padding, border, dan margin. Formulir mengirim pasangan nama=nilai ke server dengan GET atau POST, dan penangan peristiwa JavaScript mengubah DOM setelah halaman dimuat.

Cara menggunakan

Di Halaman dan gaya, pilih Halaman contoh dan Lembar gaya, lalu sunting panel Konten, HTML, atau CSS sambil memperhatikan halaman dan pohon DOM. Klik elemen di halaman atau baris pohon DOM untuk melihat aturan dan model kotaknya; klik pesan untuk melompat ke barisnya. Di Formulir, isi kolom lalu kirim untuk melihat permintaan HTTP. Di Peristiwa, sunting penangan di panel Peristiwa (JS) lalu klik tombolnya.

Parameter yang dapat diubah

  • Tab Halaman dan gaya, Formulir, Peristiwa
  • Halaman contoh Artikel, Kartu profil, Tabel
  • Lembar gaya Klasik, Modern, Gelap, Tanpa CSS
  • Metode formulir GET, POST
  • Tampilkan pohon DOM
  • Tampilkan model kotak

Pertanyaan untuk dijelajahi

  1. Mengapa pohon DOM tetap sama ketika Anda mengganti lembar gaya?
  2. Aturan mana yang menang, #lamp atau #lamp.on, dan berapa spesifisitas masing-masing?
  3. Di mana formulir GET menaruh datanya, dan mengapa itu buruk untuk kata sandi?

Simulasi terkait