Ayo nduk... koe kemarin kan sudah janji mau menerusken cerita koe tentang HTML dan XHTML, pakne sudah sangat penasaran lho nduk, pakne sangat ingin tahu apa yang dimaksud dengan XHTML itu, dan apa hubungannya dengan HTML. Apa mereka berdua itu bersaudara nduk? Atau mungkin cuma berteman biasa saja? Atau mungkin juga mereka itu berteman tapi mesra?

Stop pakne, sebelum pakne mengumbar lebih banyak lagi gosip-gosip yang tidak bisa dipertanggung jawabkan kebenarannya mengenai hubungan antara HTML dan XHTML, maka dengan ini kita mulai saja melanjutkan pembahasan kita mengenai ebook yang sedang kita bicaraken ini.

Baek pakne, kemarin kan pakne sudah mengetahui alasan mengapa aku merekomendasiken agar pakne mempelajari mengenai HTML ini terlebih dahulu, sebelum pakne belajar lebih banyak mengenai web design. Dan berarti pakne sekarang sudah lebih yakin dan semangat untuk mempelajari mengenai HTML ini, iya toh? Baeklah pakne, sekarang kita lanjutkan pembahasan kita mengenai isi ebook ini.

Seperti yang pakne lihat sendiri, pada section atau bagian ketiga dari chapter atau bab 1 ebook tersebut, membicaraken mengenai komponen-komponen yang terdapat dalam HTML atau XHTML. Section ini mempunyai beberapa point yang akan menjelaskan hal-hal sebagai berikut:

Apa Perbedaan Antara HTML dengan XHTML?

Pakne kan sudah tahu bahwa HTML Hypertext Markup Language itu adalah bahasa yang dibuat dan dikembangken sejak akhir 80 an hingga awal 90 an yang digunaken untuk membuat halaman web. HTML saat ini sudah dipatentkan dan dibuat standarisasinya oleh World Wide Web Consortium atau W3C. Sedangkan XHTML itu pakne, merupakan pengembangan dari HTML.

Oooo... Jadi XHTML itu sebenarnya adalah HTML yang dikembangken ya nduk... Kenopo mereka merasa perlu untuk mengembangkan HTML ini manjadi XHTML nduk?

Begini pakne, formula original atau formula asli yang terdapat di dalam HTML mempunyai beberapa kelemahan, yaitu sering terjadi adanya ketidaksamaan dalam penggunaan syntax. Bahasa HTML memang mengijinkan adanya perbedaan dalam cara pemformatan ini.

Perbedaan ini bisa pakne temui saat pakne membuka sebuah halaman web yang sama tapi menggunaken jenis browser yang berbeda. Halaman yang sama tersebut mungkin akan ditampilkan dengan cara yang berbeda oleh masing-masing browser.

Nah... perbedaan-perbedaan yang tidak bisa di tebak seperti inilah yang membuat sebuah halaman HTML menjadi sulit untuk diakses dan dibaca oleh software. Para pembuat dan pengembang software seringkali menemui kesulitan seperti contoh diatas.

XHTML adalah bahasa yang dikembangkan berdasarken bahasa yang digunaken oleh XML atau eXtensible Markup Language. Dimana XML ini pakne, dibuat dan didesign agar bisa berkomunikasi dengan baik dengan software, komputer, dan internet.

Itu berarti XHTML mempunyai kelebihan-kelebihan yang dimiliki oleh XML dan tidak dimiliki oleh HTML. Karena itu, menurut ebook ini pakne, bahasa XHTML ini diramalkan akan menggantikan bahasa HTML yang digunaken saat ini.

Opo nduk? Suatu hari nanti XHTML akan menggantiken HTML? Itu berarti kita juga harus bersiap-siap dan mempelajari XHTML ini yo nduk? Waduh... ginama toh ini nduk? Koe bilang HTML itu penting untuk dipelajari saat ini, tapi sekarang koe bilang HTML akan dipensiunken dan diganti oleh XHTML. Kalo memang akan pensiun, lalu untuk opo kita mempelajarinya nduk? Apakah tidak lebih baek jika kita mempelajari calon penggantinya saja?

Pakne betul, tapi pakne jangan keburu bingung dulu, XHTML itukan asalnya juga dari HTML. Seperti yang pernah aku bilang, HTML itu adalah pondasi atau dasar, dan saat kita sudah menguasai dasar, maka untuk mempelajari pengembangannya adalah hal yang relatif lebih mudah untuk dilakuken.

Lagian pakne, bahasa XHTML dan HTML itu nantinya juga tidak akan jauh berbeda, namun memang tetap saja ada perbedaannya. Didalam ebook itu juga dijelasken beberapa point yang penting untuk diketahui mengenai perbedaan antara XHTML dan HTML ini, yaitu:

• Sebagian besar Markup yang digunaken dalam HTML adalah identik dengan Markup yang terdapat dalam XHTML.
• Dalam beberapa kasus, Markup HTML terlihat sedikit berbeda dengan XHTML.
• Dalam beberapa kasus juga, Markup HTML sangat berbeda dengan XHTML.

Oo.. gitu toh nduk! Jadi dengan mempelajari dan memahami HTML, kita juga akan bisa dengan mudah mempelajari dan memahami XHTML? Lalu... kenapa kita ndak sekalian saja mempelajari dua-duanya nduk?

Wah.. pakne ini ternyata banyak maunya, opo nanti ndak malah jadi bingung? Tapi ndak usah khawatir pakne, ebook yang sedang kita bahas ini juga akan mengajari kita bagaimana cara membuat kode yang bisa cocok untuk digunaken oleh kedua-duanya, yaitu cocok untuk HTML dan juga XHTML. Itu artine opo pakne? Itu artine kita akan mendapat dua keuntungan sekaligus, jadi kita ndak perlu membuat kode yang berbeda untuk versi yang berbeda, betul toh pakne?

Syntax and Rule (Aturan)

Setelah kita tahu apa perbedaan antara HTML dan XHTML ini pakne, point berikutnya yang terdapat dalam ebook tersebut adalah tentang syntax dan aturan yang digunaken, baik syntax dan aturan yang digunaken oleh HTML maupun XHTML.

HTML itu pakne, adalah bahasa yang ditujukan secara langsung untuk menggambarkan bagaimana sebuah halaman web atau web page itu akan ditampilkan atau disusun. Sehingga, hal ini membuat semua kode dan aturan tentang bagaimana sebuah halaman web ditampilken, akan ditempatken semuanya dalam halaman HTML tersebut.

Pakne mungkin pernah menjumpai sebuah halaman web yang menampung lebih banyak kode di banding dengan text sebenarnya yang akan ditampilken. Nah, itu adalah salah satu kelemahan dan kekurangan yang ingin diperbaiki dalam XHML. Dalam XHTML, kode-kode ini nantinya akan lebih disederhanaken dan disempurnaken.

Namun, however pakne, baik HTML maupun XHTML, markup-markup atau syntaxt dan aturan yang mereka gunaken sebenarnya terdiri atas tiga komponen, yaitu:

• Elements: Digunaken untuk mengidentifikasi atau mengenali bagian-bagian yang berbeda dalam sebuah halaman web dengan menggunaken tags.

• Attributes: Digunaken untuk menginformasiken bagaimana sebuah elements akan ditampilken atau diperlihatken.

• Entities: Digunaken untuk menampilkan karakter-karakter non ASCII, misalnya karakter trend mark atau merek dagang (©).

Setiap bagian markup yang digunaken untuk menggambarken dan menampilkan isi dari sebuah halaman yang dibuat dengan HTML maupun XHTML akan menggunaken kombinasi dari ketiga unsur tersebut.

Elements

Elements itu pakne, adalah bagian inti atau utama dalam sebuah halaman HTML ataupun XHTML. Elements inilah yang merupaken isi dari sebuah halaman web. Kita menggunaken elements ini untuk menggambarkan setiap bagian text yang ada di sebuah halaman web. Element dibuat dengan cara menambahkan tags, kemudian menambahkan isi atau content kedalam tags tersebut.

Element ini terbagi dalam dua kategori utama, yaitu:

• Element yang dibuat dengan dua buah tags, dan content atau text apapun yang terdapat diantara kedua tags tersebut. Kedua tags tersebut terdiri dari tag pembuka dan tag penutup.

• Element yang digunaken untuk memasukkan atau menambahkan sesuatu kedalam halaman dengan menggunaken sebuah tag tunggal.

Sebentar nduk, kepala pakne mulai terasa pusing sekarang. Koe tadi bilang bahwa ada dua macam tag, yaitu tag tunggal atau single dan tag ganda atau yang didalam ebook tersebut disebut sebagai pair tag. Pertanyaan pakne sekaranag adalah, opo beda antara kedua macam tag itu nduk?

Pertanyaan pakne itu sebenarnya sudah terjawab jika pakne membaca ebook tersebut lebih lanjut, tapi yo ndak opo-opo, aku tak coba menjawabnya disini.

Tag Pairs

Tag pairs atau tag yang berpasangan adalah tag menggunaken dua macam tag untuk menandai wilayah kekuasaanya. Tag pairs menggunaken tag pembuka untuk menandai bagian awal dari sebuah element, dan menggunaken tag penutup untuk menandai akhir dari sebuah element. Tag ini pakne, mempunyai bentuk sebagai berikut:

<tag>.....</tag>

Tag pairs atau pasangan ini biasanya digunaken untuk menggambarkan element-element seperti, misalnya element heading, paragraph, table, dan list atau numbering.

Syntax <tag> digunaken untuk menyataken kepada browser bahwa ada sebuah element yang berawal disini. Dan syntax </tag> digunaken untuk mengatakan bahwa element tersebut berakhir disini. Nah... pakne... text apapun yang berada diantara kedua tag itulah, yang akan ditampilkan di browser.

Gitu toh nduk... pakne ngerti sekarang. Lalu yang satune lagi?

Single Tag

Single tag ini pakne, digunaken untuk memasukkan atau menambahkan sesuatu kedalam sebuah halaman. Element yang ditambahken kedalam sebuah halaman HTML atau XHTML dengan menggunaken tag ini, biasa disebut dengan empty element atau element kosong. Kenapa disebut dengan empty element atau element kosong, ya... karena memang element tersebut sebenarnya tidak berada di halaman tersebut.

Element tersebut sebenarnya berada secara terpisah, saat halaman tersebut akan ditampilken, barulah browser akan mengambil dan menambahkennya kedalam halaman. Single tag ini biasanya digunaken untuk menambahken element-element seperti misalnya untuk menambahken gambar.

Kenapa single tag ini disebut dengan single tag, ya tentu saja karena dia memang hanya menggunaken satu tag saja. Tidak seperti pair tag yang menggunaken dua buah tag, single tag ini mempunyai tampilan sebagei berikut:

<tag />

Nah pakne... menurut ebook tersebut, ada satu perbedaan antara HTML dan XHTML yang harus diperhatiken mengenai penggunaan single tag ini. Sebageimana telah dijelasken diatas bahwa, XHTML itu merupaken pengembangan dari XML, yang mana XML mewajibken penggunaan slash (/) sebelum kita menggunaken tanda besar dari (>). Jadi, tampilan single tag dalam XHTML haruslah seperti ini: <tag/>.

Sedangken HTML, tidak mewajibken penggunaan tanda slahs (/), itu artinya penggunaan single tag dalam HTML bisa dengan cara seperti ini <tag>.

Tapi nduk, bagaimana kita tahu yang mana yang harus digunaken? Apakah menggunaken versi HTML atau XHTML?

Kalo masalah itu, pakne ndak perlu khawatir, browser-browser keluaran baru, sudah dilengkapi dan dipersenjatai dengan kemampuan untuk memahami dan mengatasi bahasa XHTML. Mereka bisa menggatasi dan menampilken halaman yang dibuat dengan versi HTML maupun versi XHTML.

Namun, untuk browser-browser keluaran lama, yang belum dilengkapi dengan kemampuan XHTML, permasalan ini bisa diatasi dengan cara menambahken spasi atau jaran diantara tag dengan tanda slash. Untuk lebih jelasnya seperti ini: <tag />. Spasi atau jarak ini, akan membuat broser model lama yang belum dilengkapi dengan kemampuan XHTML, bisa mengabaikan tanda slash (/) tersebut.

Contoh penggunaan single tag ini misalnya saat pakne ingin menambahken sebuah gambar kedalam halaman pakne. Contohnya seperti ini:

<img src=”red_grapes.jpg” width=”75” height=”100” alt=”Red Grapes” align=”middle” hspace=”5” />

Tag <img /> mereferensikan atau merujuk pada sebuah gambar. Saat browser akan menampilkan halaman tersebut, browser akan menggantiken tag <img /> dengan gambar yang di referensikannya. Nah.. pakne... aku rasa pakne sudah mengerti dan memahami dengan jelas mengenai single tag ini.

Nesting

Nesting atau bersarang adalah element yang ditampilken secara bertingkat. Contohnya dalam penggunaan element list atau numbering atau bullet. Untuk lebih jelasnya bisa dilihat pada contoh berikuti ini:

• Tingkat 1

• Tingkat 2

Attributes

Attribut ini pakne, digunaken untuk menggambarken atau menjelasken bagaimana suatu element akan ditambahken atau ditampilken. Seperti contoh diatas, saat kita ingin menambahkan sebuah gambar, maka kode yang akan kita tuliskan pada halaman HTML ataupun XHTML adalah sebagai berikut:

<img src=”red_grapes.jpg” width=”75” height=”100” alt=”Red Grapes” align=”middle” hspace=”5” />

Nah pakne, kata-kata "src" diatas merupakan sebuah artibut dari sebuah element. Attribut "src" mengatakan atau menujukkan di mana gambar tersebut berada, dan nama file dari gambar tersebut. Sedangkan "widht" merupakan attribute yang menjelasken lebar dari gambar tersebut saat akan ditampilken. Begitu juga dengan "height", "alt", "align", "middle". Kita akan membahas mengenai attribute-attribute ini lebih detail nanti yo pakne...

Entities

Entities ini pakne, digunaken untuk menampilken karakter-karakter spesial yang tidak terdapat dalam karakter standar dari ASCII. Selain itu juga, entities ini digunaken untuk menampilken simbol-simbol tertentu, misalnya untuk menampilken kode tag. Contohnya untuk menampilken kode tag seperti ini <b>...</b>, atau seperti untuk menampilkan kode HTML untuk menambahkan gambar seperti contoh diatas.

Jika kita tidak menggunaken entities, maka kita tidak bisa menampilken listing kode diatas, karena opo pakne? Yup, karena browser akan mengira bahwa text tersebut merupakan bagian dari kode yang harus dijalanken dan disembunyiken, sehingga kita tidak akan melihatnya pada tampilan halaman di browser.

Dengan entities inilah pakne, maka kita bisa menampilkan kode HTML tersebut. Setiap text khusus ataupun kode yang ingin ditampilkan pada halaman web harus didiapit dengan tanda ampersand (&) dan tanda semicolon/titik koma (;).

Nah... pakne, itulah tadi komponen-komponen yang terdapat dalam setiap halaman yang dibuat menggunaken HTML ataupun XHTML. Sampai disini berarti kita sudah mempelajari bagian ke 3 yang terdapat pada bab 1 dari ebook yang sedang kita pelajari ini.

Pada chapter 2 dari ebook tersebut membahas tentang membuat dan menampilken web page, namun.. karena keterbatasan tempat dan waktu... maka kita akan membahasnya di episode mendatang. Bagi yang sudah tidak sabar ingin segera mengetahui kelanjutannya, bisa mendownload ebook tersebut di sini, buruan ya... sebelum kehabisan.