Scribd Logo
Unggah

Selamat datang di Scribd!

  • Tutorial XHTML

    Diunggah oleh

    nineapril82
    11 tayangan9 halaman
    Tutorial for begineer

    Judul Asli

    Tutorial Xhtml

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Tutorial for begineer

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    11 tayangan9 halaman

    Tutorial XHTML

    Diunggah oleh

    nineapril82
    Tutorial for begineer

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 9

    Ditulis oleh Yasin Setiawan

    Perbedaan antara XHTML dan HTML


    Anda dapat mengamati sendiri pembuatan XHTML dengan mulai menyusun HTML yang diberi ketentuan XHTML sebagai aturan tambahan.

    Memulai XHTML
    XHTML merupakan generasi berikutnya setelah HTML, tetapi dia menuntut kemampuan lebih tinggi untuk mengoperasikannya. Selain itu juga perlu kesiapan berbagai perangkat untuk dapat menanganinya. Sebagai landasan pemahaman dalam tutorial ini, XHTML tidaklah berbeda jauh dengan HTML 4.01, oleh karena itu alangkah lebih baiknya anda menguasai dulu penulisan kode 4.01 standard. Anda dapat melihat referensi penulisan HTML 4.01 pada bab tentang HTML. Sebagai tambahan, anda lebih baik sejak dini menuliskan kode HTML menggunakan huruf kecil, dan jangan pernah lupa membuat tag penutup setiap elemen misalnya </p>. Silahkan pelajari terus !

    Perbedaan utama antara HTML dan XHTML:


    Elemen XHTML harus tersusun secara benar (properly nested) XHTML merupakan dokumen yang well-formed Nama tag harus menggunakan huruf kecil Semua elemen XHTML harus memiliki penutup

    Elemen harus tersusun dengan benar


    Dalam HTML elemen tidak harus tersusun dengan tata letak struktur yang benar: Misalnya : <b><i>Ini adalah tulisan yang berformat bold dan italik</b></i> Pada XHTML semua elemen harus tersusun dengan benar seperti ini : <b><i> Ini adalah tulisan yang berformat bold dan italik</i></b>

    -1-

    Keterangan : sebelum tag <i> ditutup belum boleh ada penutup untuk </b>, <i> adalah elemen anak dari elemen <b>, pembuka dan penutup <i> harus di dalam elemen <b> Contoh : <ul> <li>Kopi</li> <li>Teh <ul> <li>Teh Hitam</li> <li>Teh Hijau</li> </ul> <li>Susu</li> </ul> Penulisan ini yang benar: <ul> <li>Kopi</li> <li>Teh <ul> <li>Teh Hitam </li> <li>Teh Hijau </li> </ul> </li> <li>Susu</li> </ul> Silahkan anda perhatikan sendiri !

    Dokumen harus Well-formed


    Semua elemen XHTML harus tersusun dalam elemen <html> sebagai root element. Setiap elemen dapat memiliki sub (child) element. Setiap sub elemen harus tersusun dengan benar di dalam parent element. Struktur dasarnya adalah sebagai berikut:
    <html> <head> ... </head> <body> ... </body> </html>

    -2-

    Nama Tag harus huruf kecil


    Hal ini dikarenakan XHTML merupakan dokumen XML. XML bersifat case-sensitive. Tag seperti <br> dan <BR> dianggap berbeda. Ini salah :
    <BODY> <P>Ini adalah paragraf</P> </BODY>

    Ini benar:
    <body> <p> Ini adalah paragraf </p> </body>

    Semua elemen XHTML harus ditutup


    Elemen terbuka harus ditutup dengan tag penutup Ini salah :
    <p> Ini adalah paragraf <p> Ini adalah paragraph yang lain

    Ini benar :
    <p> Ini adalah paragraf </p> <p> Ini adalah paragraf yang lain </p>

    Elemen kosong harus ditutup


    Elemen kosong harus ditutup menggunakan />. Ini salah: Ini adalah break<br> Ini adalah garis mendatar:<hr> Ini adalah image <img src="gambar.gif" alt="gambar">

    -3-

    Ini benar : Ini adalah break<br /> Ini adalah garis mendatar:<hr /> Ini adalah image <img src="gambar.gif" alt="gambar" />

    XHTML Sintak
    XHTML merupakan HTML yang bersih dan benar cara penulisannya.

    Aturan penulisan XHTML:


    Nama atribut harus dengan huruf kecil Nilai Atribut harus diapit tanda petik id atribut menggantikan nama atribut Atribut harus berisi nama atribut dan nilainya XHTML DTD mendefinisikan legalisasi elemen

    Nama Atribut harus dengan huruf kecil


    Ini salah :
    <table WIDTH="100%">

    Ini benar:
    <table width="100%">

    Nilai atribut harus diapit tanda petik


    Ini salah :
    <table width=100%> Ini benar: <table width="100%">

    -4-

    Penulisan atribut berisi nama dan nilainya


    Ini salah :
    <input checked> <input readonly> <input disabled> <option selected> <frame noresize>

    Ini benar :
    <input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" />

    Berikut daftar atribut HTML dan penulisannya dalam XHTML: HTML compact checked declare readonly disabled selected defer ismap nohref noshade nowrap multiple noresize XHTML compact="compact" checked="checked" declare="declare" readonly="readonly" disabled="disabled" selected="selected" defer="defer" ismap="ismap" nohref="nohref" noshade="noshade" nowrap="nowrap" multiple="multiple" noresize="noresize"

    id Atribut menggantikan namanya


    HTML 4.01 mendefinisikan sebuah nama atribut untuk elemen a, applet, frame, iframe, img, dan map. Dalam XHTML tidak dikenal lagi nama atribut, karena telah digantikan dengan id.

    -5-

    Ini salah :
    <img src="picture.gif" name="picture1" />

    Ini benar :
    <img src="picture.gif" id="picture1" />

    Catatan : untuk dapat didukung oleh browser versi lama, anda harus menggunakan baik nama maupun id, seperti penulisan berikut ini : <img src="picture.gif" id="picture1" name="picture1" />

    Atribut Lang
    Atribut lang dapat digunakan dalam berbagai elemen XHTML. Ia mendefinisikan bahasa yang digunakan untuk isi dalam elemen tersebut. Jika anda menggunakan atribut lang dalam sebuah elemen, anda harus menambahkan atribut xml:lang, seperti berikut ini:
    <div lang="no" xml:lang="no">isi elemen</div>

    Deklarasi XHTML
    Semua dokumen XHTML harus memiliki deklarasi DOCTYPE. Elemen html, head dan body harus ada, dan elemen title arus berada dalam elemen head. Berikut ini adalah dokumen XHTML minimum:
    <!DOCTYPE Doctype ditulis di sini> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Judul dituliskan di sini</title> </head> <body> Isi dokumen ditulis di sini </body> </html>

    Catatan : deklarasi DOCTYPE bukanlah bagian dari dokumen XHTML itu sendiri. Dia bukanlah elemen XHTML, sehingga tidak harus menggunakan tag penutup.

    -6-

    Penulisan XHTML
    Cara mengkonversi ke XHTML
    Untuk mengkonversi Web site dari HTML ke XHTML, anda harus sudah akrab dengan tata penulisan XHTML. Cara mendasarnya adalah sebagai berikut:

    1. Definisi DOCTYPE ditambahkan


    Deklarasi DOCTYPE berikut telah ditambahkan pada awal setiap halaman: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    2. Catatan tentang DOCTYPE


    Halaman anda harus memiliki deklarasi DOCTYPE jika anda ingin melakukan validasi yang benar terhadap susunan XHTML. Tetapi perlu diingat, bahwa browser yang lebih baru lagi (seperti Internet Explorer 6) mungkin menangani dokumen anda berbeda tergantung pada deklarasi <!DOCTYPE>. jika browser membaca suatu dokumen yang menggunakan sebuah DOCTYPE, ia mungkin menangani dokumen secara "benar". Bentuk penulisan XHTML yang salah mungkin akan menampilkan dokumen berbeda jika dibandingkan dengan dokumen yang menggunakan DOCTYPE.

    3. Tag dan atribut menggunakan huruf kecil


    Sejak XHTML bersifat case sensitive, dan sejak XHTML hanya memberlakukan penggunaan huruf kecil maka tag HTML dan nama atribut harus diganti secara keseluruhan dengan huruf kecil. Hal serupa juga diberlakukan pada atribut.

    4. Semua nilai atribut diberi tanda petik


    Sejak W3C XHTML 1.0 direkomendasikan maka semua nilai atribut harus diapit tanda petik, semua halaman harus dicek dan diganti, setiap atribut yang ada didalamnya nilainya diberi tanda petik. Hal seperti ini tentunya akan menyita banyak waktu, untuk itu anda harus memastikan setiap penulisan atribut diberi tanda petik.

    -7-

    5. Tag kosong: <hr> , <br> dan <img>


    Tag kosong tidak diizinkan dalam XHTML. Tag <hr> dan <br> harus diganti dengan <hr /> dan <br />. Tetapi hal ini akan menjadi masalah manakala kita menggunakan Netscape yang mana tidak mengenal penulisan tag seperti <br/>. Kita tidak tahu mengapa, tetapi mengubah menjadi <br /> membuat tag dapat bekerja dengan baik. Setelah semua itu diatasi, pastikan semua bagian tag kosong untuk diganti bentuknya.

    6. Web Site di validasi


    Setelah semua itu diubah maka semua halaman divalidasi menggunakan W3C DTD, yaitu pada link : XHTML Validator. Setiap ada error kita perbaiki secara manual. Error yang sering terjadi adalah lupa menambahkan tag </li> pada penutup list.

    XHTML - Modularisasi
    Modularisasi XHTML mendefinisikan modul pada XHTML.

    Kegunaan Modularisasi XHTML


    XHTML merupakan sederhana tetapi memiliki kemampuan yang luas, berisi berbagai macam kegunaan yang akan dibutuhkan oleh para web developer. Beberapa kegunaan XHTML tertentu sangat bear dan kompleks, dan untuk kegunaan tertentu sangat sederhana. Dengan membagi XHTML ke dalam modul-modul, maka W3C (World Wide web Consortium) telah membuat pengaturan elemen XHTML kecil dan didefinisikan dengan benar untuk dapat digunakan secara terpisah untuk digunakan oleh peralatan yang sederhana sehingga dapat dikombinasikan dengan XML standard menjadi aplikasi yang lebih besar dan lebih lengkap. Dengan modular XHTML, perancang aplikasi dapat:
    Memilih elemen-elemen yang didukung oleh perangkat dengan XHTML membangun blok-blok. Menambah ekstensi ke XHTML, menggunakan XML, tanpa merusak XHTML standard. XHTML dapat digunakan untuk peralatan yang portabel dan tanpa kabel sepertikomputer genggam, hand phone, TV, dan peralatan-peralatan rumah. Memperluas cakupan XHTML menjadikan sebuah aplikasi yang lengkap dengan menambah

    -8-

    kemampuan XML di dalamnya (seperti MathML, SVG, Voice dan Multimedia). Mendefinisikan XHTML seperti dasar XHTML (adalah kegunaan mendasar untuk penerapannya pada peralatan yang mobile).

    Modul-modul XHTML
    W3C telah membagi definisi XHTML ke dalam 28 modul:
    Nama Modul Applet Module Base Module Basic Forms Module Basic Tables Module Bi-directional Text Module Client Image Map Module Edit Module Forms Module Frames Module Hypertext Module Iframe Module Image Module Intrinsic Events Module Legacy Module Link Module List Module Metainformation Module Name Identification Module Object Module Presentation Module Scripting Module Server Image Map Module Structure Module Style Attribute Module Style Sheet Module Tables Module Target Module Text Module Keterangan Mendefinisikan elemen applet Mendefinisikan elemen base Mendefinisikan dasar elemen form. Mendefinisikan dasar elemen table Mendefinisikan elemen bdo. Mendefinisikan elemen image map di sisi browser. Mendefinisikan editing element (del dan ins). Mendefinisikan semua elemen yang digunakan pada form. Mendefinisikan elemen frameset. Mendefinisikan elemen a. Mendefinisikan elemen iframe. Mendefinisikan elemen img. Mendefinisikan atribut event seperti onblur dan onchange. Mendefinisikan deprecated element dalam atribut. Mendefinisikan elemen link. Mendefinisikan elemen list ol, li, ul, dd, dt, dan dl. Mendefinisikan elemen meta. Mendefinisikan nama aribut Mendefinisikan elemen object dan param. Mendefinisikan elemen presentasi seperti b dan i. Mendefinisikan script dan noscript. Mendefinisikan elemen image map di sisi server Mendefinisikan elemen html, head, title dan body. Mendefinisikan atribut style. Mendefinisikan elemen style. Mendefinisikan elemen yang digunakan dalam table. Mendefinisikan atribut target. Mendefinisikan elemen container seperti p dan h1.

    -9-

    Anda mungkin juga menyukai