Seperti pada file eksternal HTML, pengaturan markup terpisah dari gaya, format, dan perilakunya. Meskipun Anda tentu saja dapat mengubah gaya elemen atau teks dengan JavaScript, akan lebih menarik jika Anda benar-benar mengubah pengaturan tata letak markup Anda.
Ingatlah bahwa markup Anda hanya menyediakan organisasi, kerangka kerja, dan Anda akan menuju kesuksesan. Ambil langkah kecil lebih jauh dan Anda akan melihat bagaimana browser mengambil semua organisasi teks itu dan mengubahnya menjadi sesuatu yang sangat menarik, sekumpulan objek, yang masing-masing dapat diubah, ditambahkan, atau dihapus.

Keuntungan Markup Teks

Sebelum membahas browser Web, ada baiknya mempertimbangkan mengapa teks biasa adalah pilihan terbaik untuk menyimpan HTML (lihat beberapa gagasan lain tentang markup untuk informasi lebih lanjut). Terlepas dari pro dan kontra, ingatlah bahwa HTML dikirim melalui jaringan ke browser Web setiap kali halaman dilihat (untuk singkatnya, cache, dll. tidak diperhitungkan). Tidak ada cara yang lebih efisien untuk menyampaikan teks. Objek biner, representasi grafis halaman, blok markup yang ditata ulang, dan sebagainya, semuanya lebih sulit untuk dilewatkan melalui jaringan dibandingkan file teks biasa.

Selain itu, browser juga menambah kejayaannya. Browser saat ini memungkinkan pengguna untuk mengubah ukuran teks, menskalakan gambar, mendownload CSS atau JavaScript halaman (dalam banyak kasus), dan banyak lagi, yang sepenuhnya menghalangi pengiriman representasi grafis apa pun dari halaman ke browser. Namun, browser memerlukan HTML mentah agar dapat menerapkan pemrosesan apa pun ke halaman di browser, daripada memercayai browser untuk menangani tugas tersebut. Demikian pula, memisahkan CSS dari JavaScript dan CSS dari markup HTML memerlukan format yang dapat dipisahkan dengan mudah. Sekali lagi, file teks adalah metode terbaik untuk tugas ini.

Yang terakhir, ingatlah bahwa standar baru (seperti HTML 4.01 dan XHTML 1.0 dan 1.1) berjanji untuk memisahkan konten (data dalam halaman) dari presentasi dan gaya (biasanya diterapkan oleh CSS). Jika pemrogram memisahkan HTML dari CSS dan kemudian memaksa browser untuk mengambil beberapa representasi halaman yang merekatkan berbagai bagian halaman menjadi satu, mereka akan kehilangan sebagian besar manfaat dari standar ini. Memisahkan bagian-bagian ini ketika tiba di browser memberikan fleksibilitas yang belum pernah terjadi sebelumnya pada browser dalam mendapatkan HTML dari server.

Pemikiran Tambahan tentang

Pengeditan Teks Biasa Markup: Benar atau Salah?
Teks biasa ideal untuk menyimpan markup, tetapi tidak cocok untuk mengedit markup. Yang populer adalah penggunaan IDE, seperti Macromedia DreamWeaver atau Microsoft® FrontPage® yang lebih canggih, untuk memanipulasi markup halaman Web. Lingkungan ini sering kali menyediakan pintasan dan bantuan untuk membuat halaman Web, terutama saat menggunakan CSS dan JavaScript, yang keduanya berasal dari file selain markup halaman sebenarnya. Tidak masalah banyak orang yang masih lebih menyukai Notepad atau vi lama yang bagus (saya akui saya salah satunya). Apa pun pilihannya, hasil akhirnya adalah file teks yang penuh markup.

Teks di Web: Kabar baiknya

adalah, teks adalah media terbaik untuk dokumen, seperti HTML atau CSS, yang dikirimkan ribuan kali melalui Web. Ketika saya mengatakan sulit bagi browser untuk merepresentasikan teks, yang saya maksud secara khusus adalah mengubah teks menjadi halaman grafis visual untuk dilihat pengguna. Ini tidak ada hubungannya dengan bagaimana browser mengambil halaman dari browser Web; dalam hal ini, teks masih merupakan pilihan terbaik.

Kekurangan Markup Teks

Sama seperti markup teks yang memiliki keuntungan mengejutkan bagi desainer dan pembuat halaman, markup teks juga memiliki kelemahan yang cukup mengejutkan bagi browser. Secara khusus, sulit bagi browser untuk secara langsung merepresentasikan markup teks secara visual kepada pengguna (lihat beberapa gagasan lain tentang markup untuk detailnya). Pertimbangkan tugas-tugas umum browser berikut:

· Menerapkan gaya CSS (biasanya dari beberapa lembar gaya di file eksternal) ke markup berdasarkan jenis elemen, kelas, ID, dan posisinya dalam dokumen HTML.
·Terapkan gaya dan pemformatan ke berbagai bagian dokumen HTML berdasarkan kode JavaScript (biasanya terletak di file eksternal).
·Ubah nilai bidang formulir berdasarkan kode JavaScript.
·Berdasarkan kode JavaScript, mendukung efek visual seperti membalik gambar dan menukar gambar.

Kompleksitasnya tidak terletak pada pengkodean tugas-tugas ini; semua yang ada di dalamnya cukup mudah. Kompleksitasnya berasal dari browser yang benar-benar mengimplementasikan tindakan yang diminta. Jika markup disimpan sebagai teks, misalnya jika Anda ingin memasukkan teks (perataan teks: tengah) di elemen p dari kelas teks tengah, bagaimana cara mencapainya?

·Tambahkan gaya sebaris ke teks?
·Terapkan gaya pada teks HTML di browser dan biarkan konten tetap terpusat atau tidak?
·Terapkan HTML tanpa gaya lalu terapkan pemformatan setelahnya?

Masalah-masalah yang sangat sulit inilah yang menjadi alasan mengapa sangat sedikit orang yang menulis browser saat ini. (Siapapun yang menulis browser harus menerima terima kasih saya yang tulus.)

Tidak ada keraguan bahwa teks biasa bukanlah cara yang baik untuk menyimpan HTML browser, meskipun teks adalah solusi terbaik untuk mendapatkan markup halaman. Gunakan kemampuan JavaScript untuk mengubah struktur halaman, dan segalanya menjadi lebih bernuansa. Haruskah browser menulis ulang struktur yang dimodifikasi ke disk? Bagaimana cara menyimpan dokumen versi terbaru?

Tentu saja, teks bukanlah jawabannya. Sulit untuk dimodifikasi, sulit untuk menerapkan gaya dan perilaku ke dalamnya, dan pada dasarnya jauh dari sifat dinamis halaman Web saat ini.

penggunaan tampilan pohon

(setidaknya jawaban yang dipilih oleh browser Web saat ini) adalah dengan menggunakan struktur pohon untuk mewakili HTML. Lihat Listing 1, halaman HTML yang cukup sederhana dan membosankan yang mewakili markup untuk artikel ini.

dalam markup teks

Pohon, pepohonan, dimana-mana

Selamat datang di halaman yang sangat membosankan.

Segera datang lagi.

Browser menerima halaman tersebut dan mengubahnya menjadi struktur pohon, seperti yang ditunjukkan pada Gambar 1.

Agar artikel ini tetap berjalan, saya telah menyederhanakannya sedikit. Para ahli dalam DOM atau XML akan menyadari dampak spasi pada cara teks dokumen direpresentasikan dan dipecah dalam struktur pohon browser Web. Pemahaman yang dangkal hanya membuat segalanya menjadi ambigu, jadi jika Anda ingin mengetahui dampak ruang putih, itu pilihan terbaik Anda, jika tidak, teruslah membaca dan jangan memikirkannya; Ketika itu menjadi masalah, saat itulah Anda akan mengetahui semua yang Anda butuhkan.

Selain latar belakang pohon sebenarnya, hal pertama yang mungkin Anda perhatikan adalah bahwa segala sesuatu di pohon dimulai dengan elemen terluar yang mengandung HTML, yaitu elemen html. Menggunakan metafora pohon, ini disebut elemen akar. Jadi meskipun ini adalah tingkat paling bawah dari pohon, ketika Anda melihat dan menganalisis pohon tersebut, saya biasanya memulai dengan ini. Jika berhasil, Anda dapat membalikkan seluruh pohon, tetapi hal itu sedikit memperluas metafora pohon.

Garis-garis yang mengalir dari akar mewakili hubungan antara bagian-bagian berlabel yang berbeda. Elemen head dan body adalah anak dari elemen akar html title adalah anak dari head, dan teks "Pohon, pohon, di mana-mana" adalah anak dari judul. Keseluruhan pohon diatur dengan cara ini hingga browser memperoleh struktur yang mirip dengan Gambar 1.

Beberapa terminologi tambahan

Agar sesuai dengan metafora pohon, kepala dan badan disebut cabang html. Disebut cabang karena mempunyai anak sendiri. Ketika Anda mencapai ujung pohon, Anda akan sampai pada teks utama, seperti "Pohon, pohon, di mana-mana" dan "sungguhan"; ini sering disebut daun karena mereka tidak mempunyai anak sendiri. Anda tidak perlu mengingat semua istilah ini, akan lebih mudah untuk membayangkan struktur pohon ketika Anda mencoba mencari tahu arti istilah tertentu.

Nilai Objek

Sekarang setelah Anda memahami beberapa terminologi dasar, sekarang saatnya fokus pada persegi panjang kecil yang berisi nama elemen dan teks (Gambar 1). Setiap persegi panjang adalah sebuah objek; browser menyelesaikan beberapa masalah teks di dalamnya. Dengan menggunakan objek untuk mewakili setiap bagian dokumen HTML, Anda dapat dengan mudah mengubah organisasi, menerapkan gaya, mengizinkan JavaScript mengakses dokumen, dan banyak lagi.

Tipe Objek dan

Penanda Properti Setiap tipe yang mungkin memiliki tipe objeknya sendiri. Misalnya, elemen dalam HTML diwakili oleh tipe objek Elemen. Teks dalam dokumen diwakili oleh tipe Teks, atribut diwakili oleh tipe Atribut, dan seterusnya.

Jadi browser Web tidak hanya dapat menggunakan model objek untuk mewakili dokumen (sehingga menghindari keharusan berurusan dengan teks statis), namun mereka juga dapat menggunakan tipe objek untuk segera mengetahui apa itu sesuatu. Dokumen HTML diurai dan diubah menjadi kumpulan objek, seperti yang ditunjukkan pada Gambar 1, dan hal-hal seperti tanda kurung sudut dan escape sequence (misalnya, penggunaan < untuk < dan > untuk >) tidak lagi menjadi masalah. Ini membuat pekerjaan browser (setidaknya setelah mengurai input HTML) menjadi lebih mudah. Sangat mudah untuk mengetahui apakah sesuatu merupakan elemen atau atribut dan menentukan cara menangani objek bertipe tersebut.

Dengan menggunakan objek, browser Web dapat mengubah properti objek tersebut. Misalnya, setiap objek elemen memiliki elemen induk dan daftar elemen turunan. Jadi menambahkan elemen anak atau teks baru cukup menambahkan elemen anak baru ke daftar elemen anak elemen tersebut. Objek ini juga memiliki properti style, sehingga mengubah gaya elemen atau segmen teks dengan cepat sangatlah mudah. Misalnya, untuk menggunakan JavaScript untuk mengubah tinggi div, tampilannya seperti ini:

someDiv.style.height = "300px";

Dengan kata lain, browser web membuatnya sangat mudah untuk mengubah tampilan dan struktur pohon menggunakan objek properti. Bandingkan ini dengan hal-hal rumit yang harus dilakukan browser secara internal untuk merepresentasikan halaman sebagai teks, setiap perubahan pada properti atau struktur memerlukan browser untuk menulis ulang file statis, mem-parsingnya, dan menampilkannya kembali di layar. Dengan objek, semua ini terpecahkan.

Sekarang, luangkan waktu sejenak untuk memperluas beberapa dokumen HTML dan menguraikannya dengan pohon. Meskipun ini mungkin tampak seperti permintaan yang tidak biasa (terutama dalam artikel seperti ini yang hanya berisi sedikit kode), jika Anda berharap dapat memanipulasi pohon ini, Anda harus memahami strukturnya.

Sepanjang perjalanan, Anda mungkin menemukan beberapa hal aneh. Misalnya, pertimbangkan hal berikut:

Apa yang terjadi pada atribut?
·Bagaimana dengan teks yang dipecah menjadi beberapa elemen (seperti em dan b)?
·Bagaimana dengan HTML yang tidak terstruktur dengan baik (misalnya, ketika tag penutup p tidak ada)?

Setelah Anda memahami masalah ini, Anda akan dapat memahami bagian berikut dengan lebih baik.

Ketat Terkadang Merupakan Hal yang Baik

Jika Anda mencoba Latihan yang baru saja saya sebutkan, Anda mungkin menemukan beberapa potensi masalah dengan tampilan pohon yang ditandai (jika tidak, percayalah!). Faktanya, beberapa masalah akan ditemukan pada Listing 1 dan Gambar 1. Pertama, lihat bagaimana elemen p didekomposisi. Jika Anda bertanya kepada rata-rata pengembang Web, "Apa isi teks dari elemen p?", jawaban yang paling umum adalah "Selamat datang di halaman Web yang sangat membosankan." Jika Anda membandingkannya dengan Gambar 1, Anda akan melihat bahwa jawaban ini (walaupun logis) tidak benar.

Faktanya, elemen p memiliki tiga objek anak yang berbeda, tidak ada satupun yang berisi teks lengkap "Selamat datang di halaman Web yang sangat membosankan". Anda akan menemukan bagian teks seperti "Selamat datang di" dan "halaman Web yang membosankan", namun tidak semuanya. Untuk memahami hal ini, ingatlah bahwa apa pun di markup harus diubah menjadi objek bertipe tertentu.

Selain itu, urutannya tidak penting! Dapatkah Anda bayangkan bagaimana pengguna akan merespons browser Web jika browser tersebut menampilkan objek yang benar, namun dalam urutan yang berbeda dari yang Anda berikan dalam HTML? Bagaimana jika paragraf terjepit di antara judul halaman dan judul artikel, dan itu bukan cara Anda mengatur dokumen Anda sendiri? Tentunya browser harus menjaga urutan elemen dan teks.

Dalam contoh ini, elemen p memiliki tiga bagian berbeda:

· Teks sebelum elemen em · Elemen em itu sendiri · Teks setelah elemen em

Jika Anda mengacaukan urutan ini, Anda mungkin fokus pada bagian teks yang salah. Untuk menjaga semuanya tetap teratur, elemen p memiliki tiga objek anak, dalam urutan yang ditunjukkan dalam HTML Listing 1. Terlebih lagi, teks kunci "really" bukanlah elemen anak dari p; melainkan elemen anak dari em, elemen anak dari p.

Sangat penting untuk memahami konsep ini. Meskipun teks "benar-benar" kemungkinan akan muncul bersama teks elemen p lainnya, teks tersebut masih merupakan turunan langsung dari elemen em. Formatnya bisa berbeda dari teks p lainnya, dan bisa dipindahkan secara independen dari teks lain.

Untuk mengingat hal ini, cobalah membuat diagram HTML di Listing 2 dan 3 untuk memastikan bahwa teks tersebut memiliki elemen induk yang benar (terlepas dari bagaimana teks tersebut pada akhirnya akan muncul di layar).

Listing 2. Markup

Perhatikan dekat, oke?

Listing 3. Elemen yang lebih pintar bersarang

LangkahProses
1Cari tahu elemen akar.
2Atasi kepala terlebih dahulu,
karena biasanya mudah.
3Bekerja melalui body.
luangkan waktu Anda.

Tautan ini tidak aktif, namun jika aktif, jawabannya
ke ini akan
berada di sana. Namun tetap lakukan latihannya!

Anda akan menemukan jawaban atas latihan ini dalam file GIF di akhir artikel ini, tricky-solution.gif pada Gambar 2 dan trickier-solution.gif pada Gambar 3. Jangan mengintip, luangkan waktu untuk menjawabnya secara otomatis terlebih dahulu. Ini akan membantu Anda memahami betapa ketatnya aturan yang berlaku saat mengatur pohon, dan akan sangat membantu Anda menguasai HTML dan struktur pohonnya.

Bagaimana dengan atribut?

Apakah Anda mengalami masalah saat mencoba mencari tahu apa yang harus dilakukan dengan properti? Seperti disebutkan sebelumnya, atribut memang memiliki tipe objeknya sendiri, namun atribut tersebut memang bukan turunan dari elemen yang menampilkannya. Elemen yang disarangkan dan teks tidak berada pada "level" atribut yang sama, seperti yang akan Anda lihat, yaitu jawaban latihan di Daftar 2 dan 3 Tidak ada properti yang ditampilkan.

Properti sebenarnya disimpan dalam model objek yang digunakan oleh browser, tetapi properti tersebut memiliki beberapa kasus khusus. Setiap elemen memiliki daftar properti yang tersedia, terpisah dari daftar objek turunan. Jadi elemen div mungkin memiliki daftar yang berisi atribut "id" dan atribut lain "kelas".

Ingatlah bahwa atribut elemen harus memiliki nama yang unik, artinya suatu elemen tidak boleh memiliki dua atribut "id" atau dua "kelas". Hal ini membuat daftar tersebut mudah dipelihara dan diakses. Seperti yang akan Anda lihat di artikel berikutnya, Anda cukup memanggil metode seperti getAttribute("id") untuk mendapatkan nilai atribut berdasarkan nama. Pemanggilan metode serupa juga dapat digunakan untuk menambah properti atau mengatur (reset) nilai properti yang ada.

Perlu diperhatikan bahwa keunikan nama atribut membuat daftar ini berbeda dari daftar subobjek. Elemen p dapat memiliki beberapa elemen em, sehingga daftar objek turunan dapat berisi banyak duplikat. Meskipun daftar anak dan daftar properti beroperasi dengan cara yang sama, seseorang dapat berisi duplikat (anak dari suatu objek) sementara yang lain tidak dapat berisi duplikat (properti dari objek elemen). Terakhir, hanya elemen yang memiliki atribut, sehingga objek teks tidak memiliki daftar tambahan untuk menyimpan atribut.

HTML Berantakan

Sebelum beralih ke cara browser mengubah markup menjadi representasi pohon, ada topik lain yang perlu ditelusuri, yaitu bagaimana browser menangani markup yang bentuknya tidak baik. Bentuk yang baik adalah istilah yang banyak digunakan dalam XML dan memiliki dua arti dasar:

·Setiap tag pembuka memiliki tag penutup yang cocok. Jadi setiap

dalam dokumen cocok dengan