HTML Dinamis (DHTML) memungkinkan Anda membuat pengalaman bergaya aplikasi di situs web Anda, mengurangi frekuensi bahwa seluruh halaman harus dimuat sepenuhnya. Dalam aplikasi, ketika Anda mengklik sesuatu, aplikasi segera berubah untuk menunjukkan konten tertentu atau untuk memberi Anda jawaban Anda.
Sebaliknya, halaman web biasanya harus dimuat ulang, atau halaman yang sama sekali baru harus dimuat. Hal ini dapat membuat pengalaman pengguna lebih terputus-putus. Pelanggan Anda harus menunggu halaman pertama dimuat dan kemudian menunggu lagi halaman kedua dimuat, dan seterusnya.
Menggunakan untuk Meningkatkan Pengalaman Pemirsa
Menggunakan DHTML, salah satu cara termudah untuk meningkatkan pengalaman ini adalah memiliki to div elemen mengaktifkan dan menonaktifkan untuk menampilkan konten saat diminta. SEBUAH elemen div mendefinisikan divisi logis pada halaman web Anda. Pikirkan div sebagai kotak yang mungkin berisi paragraf, judul, tautan, gambar, dan bahkan div lainnya.
Apa yang Anda Butuhkan
Untuk membuat div yang dapat diaktifkan dan dinonaktifkan, Anda memerlukan yang berikut:
- Tautan untuk mengontrol div dengan menyalakan dan mematikannya saat diklik.
- Div untuk ditampilkan dan disembunyikan.
- CSS untuk menata div tersembunyi atau terlihat.
- JavaScript untuk melakukan tindakan.
Tautan Pengendali
Tautan pengontrol adalah bagian termudah. Cukup buat tautan seperti yang Anda lakukan ke halaman lain. Untuk saat ini, tinggalkan atribut href kosong.
Pelajari HTML
Tempatkan ini di mana saja di halaman web Anda.
Div untuk Ditampilkan dan Disembunyikan
Buat elemen div yang ingin Anda tampilkan dan sembunyikan. Pastikan div Anda memiliki id unik di dalamnya. Dalam contoh, id uniknya adalah belajar HTML.
Ini adalah kolom konten. Itu dimulai dengan kosong kecuali untuk teks penjelasan ini. Pilih apa yang ingin Anda pelajari di kolom navigasi di sebelah kiri. Teks akan muncul di bawah ini:
Pelajari HTML
- Kelas HTML Gratis
- Tutorial HTML
- Apa itu XHTML?
CSS untuk Menampilkan dan Menyembunyikan Div
Buat dua kelas untuk CSS Anda: satu untuk menyembunyikan div dan yang lainnya untuk menampilkannya. Anda memiliki dua opsi untuk ini: tampilan dan visibilitas.
Tampilan menghapus div dari alur halaman, dan visibilitas hanya mengubah tampilannya. Beberapa pembuat kode lebih suka tampilan, tapi terkadang visibilitas masuk akal juga. Sebagai contoh:
.hidden { tampilan: tidak ada; }
.unhidden { tampilan: blok; }
Jika Anda ingin menggunakan visibilitas, ubah kelas ini menjadi:
.hidden { visibilitas: tersembunyi; }
.unhidden { visibilitas: terlihat; }
Tambahkan kelas tersembunyi ke div Anda sehingga dimulai sebagai tersembunyi di halaman:
JavaScript untuk Membuatnya Bekerja
Semua yang dilakukan skrip ini adalah melihat set kelas saat ini pada div Anda dan mengaktifkannya untuk tidak disembunyikan jika ditandai sebagai tersembunyi atau sebaliknya.
Ini hanya beberapa baris JavaScript. Tempatkan yang berikut ini di kepala Anda dokumen HTML (sebelum.
Apa yang dilakukan skrip ini, baris demi baris:
Memanggil fungsi sembunyikan, dan pembagian adalah ID unik yang ingin Anda tampilkan atau sembunyikan.
Mengatur variabel iwaktu dengan nilai div Anda.
Melakukan pemeriksaan browser sederhana; jika browser tidak mendukung getElementById, skrip ini tidak akan berfungsi.
Memeriksa kelas pada div. Jika itu tersembunyi, itu berubah menjadi tidak tersembunyi. Jika tidak, itu mengubahnya menjadi tersembunyi.
Menutup jika pernyataan.
Menutup fungsi.
Untuk membuat skrip berfungsi, Anda perlu melakukan satu hal lagi. Kembali ke tautan Anda dan tambahkan javascript ke atribut href. Pastikan untuk menggunakan id unik yang Anda beri nama div Anda di href ini:
Pelajari HTML
Selamat! Anda sekarang memiliki div yang akan ditampilkan dan disembunyikan setiap kali Anda mengklik tautan.
Kemungkinan Masalah yang Harus Diwaspadai
Script ini tidak bodoh. Ada beberapa situasi di mana hal itu dapat menyebabkan masalah bagi Anda:
JavaScript Tidak Diaktifkan. Jika pembaca Anda tidak memiliki JavaScript atau dimatikan, skrip ini tidak akan berfungsi. Div tersembunyi tetap tersembunyi apa pun yang dilakukan pembaca Anda. Salah satu cara untuk memperbaikinya adalah dengan meletakkan div tersembunyi di area noscript, tetapi Anda harus bermain-main dengan itu agar ditampilkan dengan benar.
Terlalu Banyak Konten. Ini bisa menjadi alat yang hebat untuk memungkinkan pembaca Anda melihat hanya konten yang mereka butuhkan, tetapi jika Anda memasukkan terlalu banyak ke dalam div tersembunyi, itu dapat secara drastis mempengaruhi bagaimana halaman dimuat. Ingatlah bahwa meskipun konten tidak ditampilkan, browser web masih mengunduhnya, jadi gunakan akal sehat dalam jumlah konten yang Anda sembunyikan.
Pelanggan Tidak Mengerti. Terakhir, pelanggan mungkin tidak terbiasa mengklik tautan yang menampilkan atau menyembunyikan konten. Bermain-main dengan ikon (tanda plus dan panah berfungsi dengan baik) atau teks untuk menjelaskan apa yang akan terjadi pada pelanggan Anda. Solusi lain adalah membiarkan salah satu div terbuka sementara yang lain ditutup. Hal ini dapat menyampaikan ide kepada pelanggan Anda, sehingga mereka dapat lebih cepat mengetahui cara membuka konten yang tersisa.
Anda harus selalu menguji Dynamic HTML seperti ini dengan pelanggan Anda. Setelah Anda merasa yakin bahwa mereka dapat memahami dan menggunakannya, ini bisa menjadi cara yang bagus untuk mendapatkan konten dalam jumlah besar di halaman web Anda tanpa menghabiskan banyak ruang yang terlihat.