1 Pendahuluan
Dengan mempopulerkan dan mengembangkan Internet/Intranet secara terus-menerus, semakin banyak perusahaan, perusahaan, dan individu mulai membangun situs Web mereka sendiri, menulis halaman Web, dan mempublikasikan informasi ke dunia luar dengan cara baru agar orang dapat menelusurinya. ., membaca dan menerapkan. Oleh karena itu, produksi halaman web telah menarik perhatian lebih banyak profesional.
Halaman web mengacu pada beberapa file dokumen yang memberikan informasi kepada dunia melalui Internet, termasuk informasi pribadi, bisnis, hiburan, dan konten lainnya. Halaman web ditulis menggunakan HyperText Markup Language (HTML) dan disimpan di server Web di Internet/Intranet untuk dibaca pengunjung menggunakan browser. Halaman web yang ditulis dalam bahasa HTML disebut juga hypertext, yaitu halaman web berisi informasi multimedia seperti teks, grafik, suara, gambar, dan hyperlink (HyperLink).
2 DHTML Sederhana
Saya dapat mengakses sejumlah besar halaman web yang ditulis dalam HTML dan bahasa scripting di browser. Untuk memudahkan browsing, berbagai produsen komputer telah meluncurkan browsernya sendiri. Browser ini belum memiliki standar terpadu untuk mendukung HTML, yang jelas tidak kondusif bagi perkembangan Internet. Oleh karena itu, World Wide Web Consortium (W3C) mengembangkan spesifikasi yang tidak bergantung pada platform dan bahasa, Document Object Model (DOM).
DOM menggabungkan HTML, CSS (cascading style sheet) dan bahasa skrip untuk membentuk model interoperabilitas yang dapat diterapkan oleh satu atau lebih orang. Baik Netscape dan Microsoft memberikan saran kepada W3C untuk mengimplementasikan DOM: gunakan HTML dinamis, yaitu DHTML (Dynamic HTML) untuk menyelesaikan masalah.
DHTML adalah istilah umum untuk beberapa fungsi baru yang telah diperluas dengan tetap menjaga kompatibilitas dengan HTML yang ada. Fitur-fitur baru ini terutama mengacu pada fitur dinamis, fitur pemosisian, dan kemampuan untuk memanfaatkan CSS.
Ada dua alasan penggunaan DHTML: Pertama, DHTML membagi setiap elemen pada halaman web menjadi banyak objek independen, dan properti objek tersebut ditentukan melalui CSS. Kedua, DHTML membuka setiap objek ke kerangka bahasa pemrograman dan scripting. Bahasa pemrograman C++ dapat digunakan untuk memanipulasi objek di halaman web, dan skrip Java dan VBscript juga dapat digunakan untuk memanipulasi objek di halaman web. Ini berarti halaman Web dan segala isinya dapat diprogram, sehingga menghadirkan kemampuan baru pada halaman Web. Kita akan menemukan perbedaannya ketika kita menjalankan aplikasi: ketika kita biasa menjalankan program di Web, kita harus menunggu halaman web diunduh ulang setiap kali setelah satu elemen. Jika halaman Web berisi sejumlah besar objek tersembunyi, bahkan akan memakan waktu satu layar penuh. Halaman baru akan melalui proses mengakses server lagi; dengan DHTML, Anda dapat mengklik gambar di bagian atas layar untuk membuat paragraf di bagian bawah layar segera berubah tanpa harus mengakses server lagi. Semua tabel akan menjadi database langsung, dan pengguna dapat memfilter data secara dinamis dan mengurutkannya. Hal ini mengurangi jumlah permintaan ke server, sehingga mengurangi beban pada server dan meningkatkan kinerja klien dan server secara keseluruhan.
3 Menggunakan style sheet CSS
Dasar dari DHTML adalah Cascading Style Sheets (Cascading Style Sheets). Style mengacu pada sekumpulan atribut tampilan dan posisi yang ditentukan oleh penulis halaman Web. Fitur terbesar CSS adalah desain web berorientasi objek, artinya, setiap halaman, setiap paragraf, setiap gambar, dan tabel dianggap sebagai objek. Kemudian deklarasikan setiap instance dari objek tersebut. Setiap instance memiliki gaya, yang merupakan sekumpulan atribut atau instruksi tampilan. Selama dideklarasikan satu kali, properti ini akan digunakan di seluruh halaman web atau bahkan seluruh situs. Setiap gaya dapat diberi nama, seperti H1, Li. Jika nama gaya tersebut sama dengan nama elemen (atau tag) DHTML yang valid, gaya tersebut akan secara otomatis diterapkan ke setiap turunan elemen jika diberikan Jika suatu gaya diberi nama tanpa tag DHTML yang sesuai, gaya tersebut harus diterapkan secara manual di tempat yang Anda inginkan untuk menampilkannya.
3.1 Tentukan dan gunakan gaya dasar. Ada dua gaya di segmen program berikut: H1 dan favorit. H1 adalah elemen DHTML yang valid. Bagian yang ditandai dengan 〈H1〉〈／H1〉 dalam program akan mewarisi semua atribut gaya H1. ; Favor adalah elemen non-DHTML. Saat mendefinisikannya, Anda harus menambahkan titik di depannya. Saat mereferensikannya, Anda harus menggunakan <class> untuk mendeklarasikannya /favor> akan mewarisi gaya mendukung Semua properti.
〈HTML〉
〈KEPALA〉〈JUDUL〉tes〈／JUDUL〉
〈JENIS GAYA=”teks／css〉
〈 !--
H1{gaya font:normal;
berat font: tebal;
warna: hijau;
line-height:20pt} ／Tentukan gaya H1／
.favor{gaya font:normal;
ukuran font:15pt;
gambar latar belakang:url(kembali.imag.gif);
textalign:center} ／Tentukan gaya favorit／
--〉
</GAYA>
</KEPALA>
〈H1〉INI ADALAH UJIAN!〈／H1〉／Gaya penggunaan H1／
〈P CLASS=”favor”〉APAKAH ANDA SUKA INI?〈／P〉／Gunakan gaya yang disukai／
3.2 Menggunakan gaya eksternal Style sheet juga dapat disimpan dalam file eksternal. Koneksi antara file ini dan halaman dapat melalui IMPORT atau LINK , misalnya, style sheet disimpan dalam file mysite.css. Anda dapat memasukkan kode berikut ke dalam dokumen untuk memanggil style sheet eksternal:
〈LINK REL=STYLESHEET
HREF=”situs saya.css”
JENIS=”teks／css”
Title=”Test Style”〉
4 Sadarilah fungsi interaktif
CSS itu sendiri tidak memiliki fungsi interaktif. Untuk mewujudkan interaksi, perlu menggabungkan objek yang ditentukan oleh CSS dengan model dokumen (DOM) dan mengubah dokumen Web menjadi dokumen DHTML. DOM menyediakan cara bagi bahasa skrip untuk mengakses elemen pada halaman. Model objek yang didukung oleh Microsoft dan Netscape agak berbeda.
Dalam model Microsoft, bahasa skrip memiliki akses ke semua elemen pada halaman HTML, dan semua elemen direfleksikan sebagai objek di document.all. Cuplikan program berikut digunakan untuk menuliskan semua elemen di halaman:
untuk (I=0;I<dokumen.semua.panjang;I++)
{
document.write(document.all［I］.tagName+”＼n” );
}
Dalam model Netscape, bahasa skrip dapat mengakses sekumpulan elemen tertentu pada halaman HTML, seperti konten dalam tag <layer>. Segmen program berikut digunakan untuk menulis nama semua lapisan di halaman:
untuk (I=0;I<dokumen.lapisan.panjang;I++)
{
document.write(document.layers［I］.name+”＼n”);
}
5 Penggunaan teknologi pemosisian
Dalam HTML, posisi objek apa pun selalu relatif terhadap bagian lain dari struktur halaman web. Saat kita mengkompilasi halaman web, kita sering kali mengeluarkan gambar dari halaman dengan menambahkan sepotong teks. Sekarang, dengan menggunakan teknologi pemosisian DHTML, objek dapat diperbaiki dan ditumpuk, yaitu, beberapa gambar ditempatkan pada posisi yang sama di halaman, dan kemudian objek yang ditempatkan di atas secara terus menerus ditetapkan untuk mencapai efek animasi.
contoh:
*punggungku{warna latar:transparan}
*poit saya
posisi:mutlak;
atas: 5 inci;
kanan: 5 inci;
lebar: 10 inci}
TUBUH{gambar-latar belakang:url(／gambar／kembali.gif);}
〈kelas=.titiksaya〉Img(src=”／gambar／a.gif)
〈DIV CLASS=”tumpukan” ID=”gambar1” style=”z-index:4”〉
〈DIV CLASS=”tumpukan” ID=”gambar2” style=”z-index:3”〉
〈DIV CLASS=”pinus” ID=”gambar3” style=”z-index:2”〉
〈DIV CLASS=”pinus” ID=”gambar4” style=”z-index:1”〉
</TUBUH>
Pada segmen program di atas, latar belakang diatur untuk memungkinkan cahaya melewati peta dasar. Efek ini hanya dapat dicapai dengan menggunakan alat gambar khusus di masa lalu. Ada juga 4 gambar yang ditumpuk di halaman, dan efek animasi yang dihasilkan juga sangat bagus.
6 Kesimpulan
Di atas telah dilakukan beberapa penelitian tentang cara menggunakan DHTML untuk mengkompilasi halaman web. Masih banyak masalah teknis yang menunggu untuk diperdalam bersama oleh produsen halaman web.
Wei Xiaotan adalah mahasiswa master di Sekolah Transportasi, Universitas Jiaotong Utara, 100044, Beijing.