Strukturisasi XHTML II: Kajian Kasus: Markering Strukturisasi W3school

Tidak ketinggalan bagian ini. Membaca bab ini akan meningkatkan kemampuan Anda, mengurangi berat halaman web Anda, dan membuat Anda memiliki pemahaman yang jelas tentang perbedaan antara tanda dan desain. Konsep di bab ini mudah dipelajari, tetapi dapat meningkatkan kinerja website, serta kemudahan merancang, membuat dan memperbarui website.

Dalam bagian ini, Anda akan belajar bagaimana menulis tanda yang logis dan kuat sehingga Anda dapat mengurangi aliran bandwidth sekitar 50%, dalam hal mengurangi beban dan tekanan server serta mengurangi waktu pemuat website. Dengan menghilangkan elemen yang menunjukkan dan mengubah kebiasaan buruk yang tidak ada kebaikan, kita dapat mencapai tujuan di atas.

Badan kebiasaan ini menyerang banyak situs di internet, khususnya yang menggabungkan kode CSS dengan layout yang berdasarkan tabel utama. cara ini buruk dan tidak ekonomis, bahkan untuk desainer yang sangat berpengalaman di bidang lain. Sebagai tambahan, tingkat kejadian ini sama, keduanya untuk situs yang menulis kode sendiri dan situs yang digunakan alat penata tulis yang terlihat, seperti Dreamweaver dan GoLive, untuk menciptakan situs.

Bagian ini akan memperkenalkan kesalahan yang umum ini, sehingga Anda dapat mengenali dan mencegahnya, dan belajar bagaimana memperbaikinya. Kami menjelaskan atribut indentifikasi unik (id) - dan menunjukkan bagaimana hal ini memungkinkan Anda menulis kode XHTML yang sangat padat, baik Anda membuat layout campuran maupun layout yang bersifat CSS.

Haruskah setiap elemen distrukturisasikan?

Seperti yang disebutkan di bab sebelumnya, setiap elemen dapat distrukturisasikan, CSS dapat membuat daftar terurut atau tak terurut tampil seperti navigasi yang sempurna, termasuk efek tombol pengembalian. Konten dokumen dapat ditandai dengan elemen biasa, yang menunjukkan peran semantik mereka dalam desain situs melalui atribut struktural khusus.

Kami menciptakan versi tes pertama CodeW3C.com berbahasa China di tahun 2006, dan sejak awal kami menggunakan CSS untuk layout, dan memakai XHTML untuk strukturalisasi dokumen. Setiap elemen di antaranya adalah struktural, dari judul hingga daftar, hingga paragraf. Anda dapat melihat tombol utama dan tombol menu tingkat kedua dengan efek pengembalian di setiap halaman CodeW3C. Berikut adalah kode XHTML untuk komponen-komponen ini:

<div id="header"><h1><a href="/">codew3c online tutorial</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="Panduan HTML">Panduan HTML</a></li>
<li id="x"><a href="/x.asp" title="Panduan XML">Panduan XML</a></li>
<li id="b"><a href="/b.asp" title="Browser Skrip">Browser Skrip</a></li>
<li id="s"><a href="/s.asp" title="Skrip Server">Skrip Server</a></li>
<li id="d"><a href="/d.asp" title="Tutorial dot net">Tutorial dot net</a></li>
<li id="m"><a href="/m.asp" title="Tutorial Multimedia">Tutorial Multimedia</a></li>
<li id="w"><a href="/w.asp" title="Panduan Pembangunan Situs">Panduan Pembangunan Situs</a></li>
</ul>
</div>

div, id, dan para bantuan lainnya

Jika digunakan dengan benar, div dapat menjadi bantuan yang bagus dalam penandaan struktural, sementara id adalah alat kecil yang mengejutkan yang memungkinkan Anda menulis XHTML yang sangat padat, serta memanfaatkan CSS dengan cerdas, dan menambahkan perilaku kompleks dan kreatif ke situs melalui model objek dokumen standar (DOM).

W3C menentukan div seperti ini di dalam model struktur XHTML2 yang terbaru dalam draft XHTML2-

Element div, dengan kongruensi dengan atribut id, class, dan role, menyediakan mekanisme umum untuk menambah struktur ekstra ke dokumen. Element ini tidak mendefinisikan gaya ekspresi bagi konten. Oleh karena itu, pendayaguna dapat menggunakan elemen ini dengan gabungan dengan stylesheet, xml:lang, dan atribut lain untuk membuat XHTML sesuai dengan kebutuhan dan rasa mereka sendiri.

Div adalah singkatan untuk division. Division berarti pemisahan, area, atau kelompok. Misalkan, ketika Anda menggabungkan sekumpulan tautan, hal ini membentuk division satu dokumen.

Mekanisme Struktur Umum

Semua penulis HTML yang ada sangat akrab dengan elemen umum seperti paragraf dan judul, tetapi beberapa orang mungkin kurang akrab dengan div. Dalam deskripsi W3C, kita dapat menemukan kunci untuk memahami elemen div, "mechanisme umum untuk menambah struktur."

Pada halaman utama situs ini, kami mengembalikan daftar katalog tutorial dalam div, karena katalog tutorial bukan bagian dari elemen utama naskah. Dalam hal ini, elemen h2 menandai judul setiap tutorial, sementara elemen daftar ul menandai daftar detil setiap tutorial. Tetapi dalam makna yang lebih luas dan khusus, katalog tutorial ini memainkan peran struktural, yaitu komponen navigasi tingkat kedua. Untuk menekankan peran ini, kami menggunakan id navsecond untuk menandai div ini.

<div id="navsecond">
<h2>Panduan HTML</h2>
<ul>
<li><a href="/html/index.asp" title="Panduan HTML">HTML</a></li>
<li><a href="/xhtml/index.asp" title="Panduan XHTML">XHTML</a></li>
<li><a href="/css/index.asp" title="Panduan CSS">CSS</a></li>
<li><a href="/tcpip/index.asp" title="Panduan TCP/IP">TCP/IP</a></li>
</ul>
<h2>Panduan XML</h2>
<ul>
<li><a href="/xml/index.asp" title="Panduan XML">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="Bahasa XSL">XSL</a></li>
... ...
... ...
</div>

Anda dapat menggunakan nama apapun. "Gladys" dan "orangebox" sepenuhnya memenuhi aturan penamaan XHTML. Tetapi penamaan semantik (semantic) atau meta-structural adalah yang terbaik (yaitu yang dapat menjelaskan fungsi elemen di dalamnya).

Ketika pelanggan memutuskan untuk menggunakan warna biru, Anda akan merasa bahwa memberi nama bagian situs "orangebox" (kerangka oranye) sangat bodoh. Dalam situasi di bawah ini, Anda akan merasa lebih bodoh, saat hanya enam bulan lagi sebelum pengiriman akhir, Anda mulai mengatur stylesheet, tetapi tak dapat ingat "Gladys" (nama wanita) apakah berarti area navigasi, sidebar, atau kotak pencarian.

Jadi, menandai id dengan "menu", "content", atau "searchform" akan membantu Anda ingat. Selanjutnya, tanda tidak setara dengan desain; halaman yang struktural baik dapat diformat untuk menjadi bentuk yang Anda inginkan. Hasilnya, baik Anda menggunakan layout CSS penuh atau layout campuran, Anda akan sepenuhnya mengubah kebiasaan berpikir dan kreatif menggunakan tag penampilan.

id vs. class

atribut id untuk XHTML bukan hal yang asing; atribut class atau elemen div juga demikian. Mereka dapat dijejak kembali ke era HTML. Atribut id menetapkan nama unik bagi elemen. Setiap nama hanya dapat digunakan sekali di halaman yang diberikan (contoh, jika halaman Anda mengandung div dengan id content, maka div lain atau elemen lain tidak dapat menggunakan nama ini). Sebaliknya, atribut class dapat digunakan berulang-ulang di halaman (contoh, lima paragraf di halaman dapat menggunakan nama class "small" atau "footnote"). Tag berikut dapat membantu mengelucidasi perbedaan antara id dan class:

<div id="searchform">Komponen formulir pencarian disini. Ini
bagian halaman yang unik.</div>
<div class="blogentry">
   <h2>Pos blog hari ini</h2>
   <p>Konten blog disini.</p>
   <p>Ini adalah paragraf lainnya dari konten blog.</p>
   <p>Sebagaimana ada banyak paragraf di halaman, demikian juga
   dapat ada banyak entri di blog. Halaman blog dapat menggunakan
   beberapa instansi kelas "blogentry" (atau kelas lainnya)
   class).</p>
</div>
<div class="blogentry">
   <h2>Artikel blog kemarin</h2>
   <p>Sebenarnya, di sini kami berada di dalam div lain dengan class
   "blogentry."</p>
   <p>Mereka bereplikasi seperti kambing.
   <p>Jika ada sepuluh artikel blog di halaman ini, mungkin
   ada sepuluh div dengan class "blogentry" juga.</p>
</div>

Dalam contoh ini, div yang dinamai searchform digunakan untuk mengkapsul area halaman yang mengandung formulir pencarian, sementara div class="blogentry" digunakan untuk mengkapsul setiap masukan artikel di blog. Ada hanya satu formulir pencarian di halaman, jadi kami memilih untuk menandai komponen unik ini dengan id. Tetapi blog memiliki banyak masukan (artikel), jadi atribut class digunakan untuk hal ini. Secara sama, situs berita biasanya memiliki banyak div, class div dapat dinamai "newsitem" atau apa pun.

Tetapi bukan semua situs memerlukan div. Situs blog dapat hanya menggunakan judul h1, H2, dan h2 serta paragraf <p>. Situs berita punya hal yang sama. Kami menunjukkan div dengan class blogentry di sini bukan untuk mendorong Anda mengisi situs Anda dengan banyak div, tetapi hanya untuk menunjukkan prinsip: di dalam dokumen HTML yang sama, gunakan beberapa class, tetapi hanya satu id.

Teori stiker tebal

Berfikir tentang atribut id seperti stiker tebal dapat membantu. Saya akan menempelkan stiker di lemari es untuk memperingatkan saya untuk membeli susu, dan di telepon untuk memperingatkan saya untuk menelepon pelanggan yang terlambat membayar. Ada yang lainnya, di buku tabungan untuk memperingatkan saya tentang tagihan yang harus dibayar sebelum tanggal 15 ini.

id juga akan menandai area khusus dalam dokumen, untuk memperingatkan Anda tempat mana yang perlu penanganan khusus, dalam hal ini, atribut id mirip dengan stiker tebal. Untuk mencapai penanganan khusus yang disebut, Anda perlu menggunakan id khusus ini untuk menulis beberapa aturan di tabel gaya, atau menambah beberapa baris kode di berkas JavaScript. Contohnya, di berkas CSS Anda ada beberapa aturan khusus, aturan tersebut hanya berlaku untuk elemen di dalam div yang memiliki id searchform.

Ketika atribut id yang ada dijadikan seperti benda yang berhasil (magnet) digunakan untuk sekumpulan aturan CSS khusus, disebut pemilih CSS. Ada banyakMembuat Pemilihmetode, namun id sangat mudah digunakan, dan berbagai macam penggunaan.

Kekuatan id

Properti id sangat kuat. Memiliki kemampuan berikut:

  • Sebagai pemilih tabel gaya, memungkinkan kita untuk menciptakan XHTML yang kecil dan minimalis.
  • Sebagai target hyperlink, menggantikan properti name yang usang.
  • Sebagai metode untuk menempatkan elemen khusus dari skrip berdasarkan DOM.
  • Sebagai nama elemen objek.
  • Sebagai alat pengolahan umum (general purpose processing) (dalam contoh W3C, "dipergunakan sebagai alat pengidentifikasi area saat data diambil dari halaman HTML ke database, atau konversi dokumen HTML ke format lainnya.")

Aturan id

Nilai id harus dimulai dengan huruf atau garis bawah; tidak boleh dimulai dengan angka. Meskipun verifikasi W3C tidak akan menangkap kesalahan ini, pemroses XML akan. Selain itu, jika Anda menggabungkan id dengan JavaScript di formulir, maka nama dan nilai id harus menjadi variabel JavaScript yang sah. Spasi dan tanda hubung, terutama tanda hubung, adalah yang tidak diizinkan. Tidak hanya itu, menggunakan garis bawah untuk class atau id nama bukan ide yang baik, karena batasan di CSS2.0 (dan beberapa peramban).

Tanda Makna dan Ketersediaan

Sekarang, kami telah mendiskusikan elemen XHTML yang beragam digunakan (terutama div dan id), biar kita lihat contoh tentang halaman utama situs ini. Pertama, kembali lagi ke menu yang berada di posisi tajuk laporan ini:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="Panduan HTML">Panduan HTML</a></li>
<li id="x"><a href="/x.asp" title="Panduan XML">Panduan XML</a></li>
<li id="b"><a href="/b.asp" title="Browser Skrip">Browser Skrip</a></li>
<li id="s"><a href="/s.asp" title="Skrip Server">Skrip Server</a></li>
<li id="d"><a href="/d.asp" title="Tutorial dot net">Tutorial dot net</a></li>
<li id="m"><a href="/m.asp" title="Tutorial Multimedia">Tutorial Multimedia</a></li>
<li id="w"><a href="/w.asp" title="Panduan Pembangunan Situs">Panduan Pembangunan Situs</a></li>
</ul>
</div>

Kami memiliki tujuh tautan, setiap tautan diisi dengan id untuk menggantikan konten yang relevan: contohnya id yang dinamai h untuk tutorial HTML, dan seterusnya. Dan tautan ini dienskapsulasi dalam elemen daftar yang dinamai menu, id yang dinamai menu menandai fungsi daftar ini - daftar menu, dan div yang dinamai navfirst untuk menandai bagian ini di halaman, untuk membedakannya dari elemen seperti konten utama (maincontent), bagian samping (sidebar), dan kaki halaman (footer).

Elemen div dan ul menyediakan struktur yang nyata, yaitu menandai fungsi konten di dalamnya (antar muka navigasi) dan posisinya di dalam dokumen (lokasi header halaman). Sedangkan tata letak tabel tradisional tidak dapat menyediakan informasi semantik tentang data apapun, dan dengan mudah memakan tiga kali lebar bandwith.

Perhatikan bahwa penanda ini tidak mengandung tag img, jadi tidak terlibat dalam atribut seperti width, height, background, atau border, dan tidak menggunakan sel tabel, jadi tidak terlibat dalam serangkaian atribut yang berhubungan. Dia sangat bersih dan kecil, tetapi masih menyediakan semua informasi yang diperlukan untuk memahaminya.

Dengan penggunaan bersama CSS, penanda ini menyediakan struktur yang dapat diunggah dengan cepat dan yang dapat dipercaya bagi pengunjung situs. Juga menyediakan kemungkinan untuk menciptakan penampilan yang lebih fleksibel dan beragam bagi pengunjung. Dan dalam lingkungan tanpa CSS, penanda yang baik struktural kami tetap dapat menyediakan semua konten tanpa gangguan.

Pembaca yang cerdas mungkin sudah menemukan bahwa teks yang disertakan dalam elemen a belum ditampilkan oleh peramban, hal ini disebabkan karena penggabungan yang sempurna antara penanda struktural dan CSS, yang memungkinkan kami untuk mengatur mekanisme pengaktifan hanya dengan beberapa baris aturan CSS, saat pengguna menggunakan peramban grafis mereka akan melihat tombol navigasi yang indah, dan saat pengguna menggunakan pembaca teks bersifat teks, mereka masih dapat mendapatkan seluruh teks, sehingga untuk seluruh pengguna, konten tetap sama.

Dan, karena tanda yang tidak termasuk gambar dan sel tabel, komponen navigasi ini dapat diambil di setiap halaman situs dalam ruang yang sama tanpa mengubah struktur, serta memberikan efek visual yang berbeda. Dengan demikian, dengan memodularisasi kode, kita meningkatkan kinerja penggunaan kode.