Latar belakang

Bagi memenuhi tuntutan aplikasi web yang semakin membangun, untuk menghasilkan sistem capaian maklumat lebih baik, dan untuk meningkat tahap keupayaan melayari laman web, spesifikasi yang ada sekarang perlu di pertingkat.

Sekarang, terdapat dua pesaing utama yang merebut untuk menjayakan misi dan visi terhadap menaik taraf HTML 4 dan XHTML 1. Mereka adalah XHTML 2.0 dan Web Application 1.0, atau lebih biasa dikenali sebagai HTML 5.0. Kedua-duanya bersaing dalam menghasilkan spesifikasi yang boleh diterima pakai dan paling stabil untuk digunakan dalam pembangunan bahasa atur cara.

XHTML 2 sekarang berimpian untuk membentuk satu kerangka atur cara yang akan diguna pakai oleh hampir ke semua applikasi W3C. XHTML 2 sebenarnya berasaskan daripada XML dan mengharapkan teknologi ini akan diterima sepenuhnya dalam dunia internet.

Manakala HTML 5 adalah terbitan daripada HTML 4 dan XHTML 1. Gabungan terbitan ini kemungkinan besar akan mengatasi XHTML 2. HTML 5 berupaya untuk menyelesaikan ke semua ralat dan permasalahan yang hadir dalm HTML 4 dan XHTML 1 sekaligus. Lebih menakjubkan, HTML 5 boleh juga digunakan untuk HTML dan XML.

Walau bagaimanapun, kedua-dua ini masih lagi merupakan konsep awal dan dalam proses percubaan. Kedua-dua spesifikasinya masih lagi diuji pakai dan mungkin dalam beberapa tahun yang mendatang barulah kedua-duanya digunakan sepenuhnya dalam Web.

http:/kripkornstudios.com.my/ahli-berdaftar/parasolx

Apa yang menarik tentang XHTML 2.0

Senarai Navigator

Senarai navigator direka untuk membina menu nagivator (pelayaran). Senarai navigator diterbitkan dengan elemen <nl> dan perlu mempunyai <label> pada setiap elemen yang juga merupakan title kepada senarai tersebut. Contoh:

<nl>
    <label>Anda sekarang berada di:</label>
    <li href="https://www.drupalnote.my/">Laman Utama</li>
    <li href="https://www.drupalnote.my/produk">Produk</li>
    <li href="https://www.drupalnote.my/produk/beg">Beg</li>
    <li>Lain-lain</li>
<nl>

Peningkatan ke "Definitions Lists"

Senarai definisi (elemen dl), definisi terma (elemen dt) dan definisi definisi (elemen dd). Satu senarai definisi boleh mengandungi pelbagai definisi terma dan setiap definisi terma boleh mewakili pelbagai definisi definisi yang sama. XHTML 2 memperkenal keupayaan klasifikasi dan definisi dengan menggunakan elemen di. Ini akan membantu untuk menjelaskan hubungan antara terma dan definisinya dan memudahkan proses membaca bahasa ini. Contohnya:

<dl>
    <di>
        <dt>Pusat</dt>
        <dt>Daerah</dt>
        <dd>setiap bangunan mempunyai tugas tertentu</dd>
        <dd>setiap tugas akan dibahagikan secara keseluruhan</dd>
    </di>
    <di>
        <dt>Ketua</dt>
        <dd>perlu dipilih salah seorang</dd>
        <dd>menjadi ketua kepada setiap kumpulan</dd>
   </di>
</dl>

Semua elemen boleh menjadi pautan

Attibute href boleh ditambah dan dimasukkan ke dalam mana-mana elemen dan ditukarkan menjadi pautan. Contoh:

<p href="http://www.kripkornstudios.com">Jom ke Kripkorn Studios</p>

Beberapa elemen yang dihapuskan di dalam XHTML 2.0 seperti:

  • acronym ditukarkan kepada abbr untuk mewakili ke semua singkatan termasuk acronym sekali.
  • <b>, <i>, <small>, <big>, <tt>, <font> dan <basefont> juga dihapuskan kerana kebanyakkan tag <font> banyak disalahgunakan sebelum ini.
  • <iframe> sudah tidak lagi wujud dalam HTML 2.0

"Heading" yang berwajah baru

Penggunaan tag "heading" semakin meluas sekarang untuk menghasilkan sesuatu laman web yang tersusun. Namun kesukaran selalu di alami oleh pengguna memandangkan pengkelasan "heading" yang menggunakan nombor (<h1> sehingga <h6>). Jadi untuk mengatasi permasalah ini, struktur asal "heading" yang menggunakan teknik linear telah ditukarkan kepada teknik herraki (susunan yang bertingkat-tingkat).

Struktur baru "heading" ini menggunakan elemen <h> dan dikelasifikan setiap satu "heading" dengan elemen <section>, menjadikannya berbentuk bertingkat-tingkat dan lebih senang difahami. Contoh:

<h>...</h>
<p>...</p>
<section>
     <h>...</h>
     <p>...</p>
     <section>
          <h>...</h>
          <p>...</p>
          <section>
              <h>...</h>
              <p>...</p>
          </section>
          <h>...</h>
          <p>...</p>
     </section>
     <h>...</h>
     <p>...</p>
<section>

Pembaharuan kod sebelum ini

  • Tag <blockcode> menggantikan tag <pre> dan <code> untuk memaparkan apa-apa jua bahasa atur cara komputer dalam laman web.
  • Tag separator menggantikan hr (horizontal rule) kerana penggunaan hr banyak disalah faham oleh vendor dan pengguna.
  • Atribut edit menggantikan elemen del dan ins untuk menerangkan perubahan kandungan. Contoh penggunaan:
    • <p>Laman ini adalah <span edit="deleted">buruk</span><span edit="inserted">menarik</span>.

Apa yang kurang tentang XHTML 2.0

Elemen a masih lagi diguna

Oleh kerana kehadiran atribut href yang boleh diguna pakai dalam semua elemen, maka kehadiran elemen a akan menambahkan kekacauan dan pemaham para penulis lagi. Selain itu, dalam HTML 4 dan XHTML 1, "anchor" boleh ditambah kepada apa-apa elemen hanya dengan memasukkan atribut id. Contoh:

<h2 id="pengenalan">Pengenalan</h2>

Tetapi masih ada yang menggunakan kaedah ini:

<h2><a name="pengenalan">Pengenalan</a></h2>

Elemen img masih lagi ada

Dalam XHTML 2, elemen object boleh lakukan apa-apa sahaja yang boleh dilakukan elemen img. Jadi, kehadiran 2 elemen yang sama fungsi ini lebih menyukarkan pengguna untuk memahaminya walaupun pada dasar awalnya pengekalan elemen img adalah untuk membolehkan transformasi dari elemen img kepada elemen object dilakukan.

Elemen "Numbered heading" tidak perlu?

Oleh kerana kehadiran elemen h yang lebih tersusun dan bertingkat-tingkat, maka tidak hairanlah kehadiran "numbered heading" atau tajuk bernombor tidak lagi diperlukan. Pengekalan elemen ini akan menyebabkan kekacauan sekiranya kedua-dua elemen ini diguna pakai dalam satu masa.


Apa yang menarik tentang HTML 5.0

HTML 5.0 memperkenal elemen yang baru iaitu pembahagian laman web kepada bahagian-bahagian. Elemen ini akan membantu enjin carian untuk mengindeks sesuatu laman web dengan lebih menyeluruh.

Elemen dialog

Elemen dialog mewakili sesuatu perbualan/percakapan. Ia mengandungi elemen dt yang bertindak sebagai tukang cakap dan elemen dd bertindak sebagai ucapan. Contoh:

<dialog>
   <dt>Parasolx</dt>
   <dd>Ingin belajar membuat web dalam bahasa Melayu</dd>
   <dt>Tetamu</dt>
   <dd>Ya, semestinya</dd>
   <dt>Parasolx</dt>
   <dd>Layarilah Kripkorn Studios, di situ semua pembelajaran pasal laman web disediakan.</dd>
</dialog>

Elemen figure

Dalam bidang penerbitan (buku teks, surat khabar, majalah dll) objek media (foto, ilustrasi, graf, dll) selalu ditandakan dengan tajuk (caption). Bahasa atur cara masih lagi tidak mampu untuk mewujudkan fungsi ini. Elemen figure disertakan dengan elemen legend boleh digunakan untuk memaparkan tajuk media. Contoh:

<figure>
    <legend>Sumber: Tenaga Nasional Berhad, 2008</legend>
    <img src="https://www.drupalnote.my/janakuasa.jpg" alt="Janakuasa Hidro">
</figure>

Elemen mark

Elemen mark mewakili teks yang ditanda atau ditonjolkan. Kelebihan ini sangat berguna terutama sekali dalam pembinaan laman web yang dinamik bagi menonjolkan kata kunci yang dicari; elemen mark berupaya untuk lakukan semua ini. Sebagai contoh, sekiranya kata kunci yang dicari adalah "php", laman web akan mengalami pengubahsuaian atur cara seperti di bawah:

<p>Proses pembelajaran atur cara <mark>PHP</mark> terdahulu dimulakan dengan mengenali <mark>PHP</mark> secara lebih dekat.</p>

Peningkatan kepada elemen input

Elemen input dinaik taraf bagi membolehkan ia menyokong email, pautan, tarikh, masa dan data-data berangka. Dengan ini kebanyakan proses aritmatrik dilakukan di pelayar pengguna, tidak lagi di pelayar web.

Apa yang kurang tentang HTML 5.0

Pelaksanaan seksyen pembahagian elemen

Idea untuk menghasilkan seksyen pembahagian elemen adalah hebat, namun pengimplanan elemen ini lebih menyukarkan. Beberapa penerangan di bawah ini yang mungkin akan membuatkan pengguna lebih pening dan membingungkan.

Elemen aside diperkenalkan untuk membahagikan kandungan sesuatu laman web secara tangen. Kebingungan di sini berlaku kerana kita tidak dapat membezakan bahagian laman web tersebut yang mana datang dahulu sekiranya dicetak.

Elemen div ditukarkan kepada elemen role yang lebih menyukarkan pemahaman mengenai fungsi elemen tersebut

Pentakrifan elemen baru yang memeningkan

Sebelum ini, elemen i dan small ditakrifkan seperti berikut:

  • i: mencondongkan tulisan
  • small:menghasilkan tulisan dalam saiz yang kecil

Tetapi dalam HTML 5, elemen-elemen ini membawa makna yang lain:

  • i: digunakan untuk memaparkan teks-teks yang khas seperti taksonami, frasa-frasa tertentu, nama-nama khas atau penggunaan bahasa yang berlainan.
  • small: digunakan semasa proses cetak sahaja seperti hak cipta atau komen dalam bentuk tulisan kecil.

Tanda tangan WYSIWYG

Setiap dokumen yang dihasilkan dgn menggunakan aplikasi WYSIWYG perlu diletakkan tanda tangan di bahagian head:

<meta name="generator" content="(WYSIWYG editor)" />

Masih lagi samar-samar apakah tujuan asal diwujudkan peraturan ini.


Kemas kini terbaru: Tag-tag terbaru dalam HTML 5

<article> <figure> <progress>
<aside> <footer> <rp>
<audio> <header> <ruby>
<canvas> <hgroup> <section>
<command> <keygen> <source>
<datalist> <mark> <summary>
<details> <meter> <time>
<embed> <nav> <video>
<figcaption> <output>  

 

Penilaian: 
5
Your rating: None Average: 4.5 (2 votes)

Komen

johnburn's picture

mungkin terdapat sedikit kesilapan dlm artikel ni elemen m () xde setelah rujuk kt w3school http://www.w3schools.com/tags/default.asp mungkin para mksdkn atau http://www.w3schools.com/html/html5_new_elements.asp

parasolx's picture
Admin

thank john pasal this info. ok actually artikel ni ditulis ketika html5 belum lagi dikeluarkan sepenuhnya. masih dalam perancangan. jadi info2 yang ditulis di atas mungkin telah dipinda dan diubahsuai oleh pihak html5.

sebenarnya, elemen [m] bermaksud "marked" dan setelah html5 dilancarkan, ianya telah ditukarkan kepada "[mark]". jadi artikel ini saya telah update. thanks again john. selain itu info mengenai elemen2 terbaru dalam html5 juga ditambah.

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training