Cara Memperluas & Perkecil Teks dalam HTML

HTML 5 menjanjikan situs web interaktif yang kaya, tetapi, pada saat ini, browser berbeda dalam implementasi fitur dan banyak bisnis belum menggunakan browser yang kompatibel dengan standar baru. Meski begitu, interaksi yang kaya dapat diimplementasikan dengan browser saat ini. Bagi mereka yang memiliki sedikit pengalaman JavaScript, coba gunakan properti innerHTML dari tag div untuk memperluas dan mengontrak garis besar dan menambahkan bantuan interaktif ke situs Anda.

Buat Proyek Baru

Buka alat pengembangan Web favorit Anda dan buat situs web baru. Alat Visual Studio Microsoft akan digunakan di sini karena versi WebDev dapat diunduh secara gratis dan itu termasuk server Web bawaan.

Buat Halaman HTML Baru

Buat halaman baru default.htm. Klik “Project”, “Add Item” lalu pilih “HTML Page” dan beri nama default.htm. Jika file default.aspx sudah ada, hapus file itu. Beralih ke tampilan HTML atau Markup dan tambahkan kode berikut setelah tag.

halaman sampel

halaman sampel

1? Judul 1

2? Judul 2

Tag h3 membuat header halaman berjudul "Contoh Halaman", diikuti oleh dua baris garis besar. Setiap baris dimulai dengan angka, tanda tanya, dan judul. Tanda tanya dikelilingi oleh jangkar ((tag yang mengubahnya menjadi tautan yang dapat diklik. Setelah setiap judul, kami telah menambahkan tag div kosong di mana teks tambahan dapat disisipkan.

Tambahkan JavaScript

Tambahkan fungsi JavaScript yang dapat diaktifkan oleh masing-masing tautan tanda tanya sebagai berikut:

Setiap tautan memanggil fungsi JavaScript help_click, melewati div tagname dan beberapa teks tambahan. Fungsi tersebut pertama-tama menguji apakah tag div kosong (div.innerHTML == ""). Jika tag kosong, kode menambahkan jeda baris (

), tiga karakter kosong () diikuti oleh teks. Jika div sudah berisi teks, markup di dalam tag div akan dihapus.

Uji Halaman Baru

Uji kodenya. Untuk Visual Studio, klik tombol "F5". Saat halaman muncul, klik salah satu dari tanda tanya. Pertama kali tautan di baris 1 diklik, garis besar meluas untuk memasukkan teks "Teks tambahan untuk Judul 1". Kali kedua tautan diklik, teksnya hilang. Dengan sedikit kode kreatif, teknik yang sama ini dapat digunakan untuk membuat tampilan hierarki, garis besar yang kompleks, atau untuk menampilkan dan menyembunyikan teks bantuan.

Pesan Populer