MODUL VI
advertisement
MODUL VI PENGENALAN XHTML A. MAKSUD DAN TUJUAN 1. MAKSUD a. Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan menggunakan XHTML b. Membedakan antara kode HTML dan kode XHTML 2. TUJUAN a. Mahasiswa dapat membuat halaman Web dengan menggunakan kode XHTML secara sederhana b. Mahasiswa dapat menuliskan kode XHTML secara benar sesuai aturan. B. DASAR TEORI Memulai XHTML XHTML merupakan generasi berikutnya setelah HTML, tetapi dia menuntut kemampuan lebih tinggi untuk mengoperasikannya. Deklarasi XHTML Semua dokumen XHTML harus memiliki deklarasi DOCTYPE. Elemen html, head dan body harus ada, dan elemen title arus berada dalam elemen head. Catatan : deklarasi DOCTYPE bukanlah bagian dari dokumen XHTML itu sendiri. Dia bukanlah elemen XHTML, sehingga tidak harus menggunakan tag penutup. Struktur XHTML dalam penggunaannya hampir sama dengan HTML, hanya lebih terstruktur dan konsisten. Berikut ini beberapa perbedaan antara HTML dan XHTML : 1. Elemen XHTML harus bersarang dengan sempurna 2. Elemen XHTML harus ditulis dalam huruf kecil 3. Elemen XHTML harus selalu ditutup 4. Dokumen XHTML harus memiliki satu root element Elemen XHTML harus bersarang dengan sempurna sedangkan dalam HTML, elemen-elemennya bisa ditulis dalam keadaan bersarang tidak sempurna seperti ini. <b><i>Tulisan ini tebal dan miring</b></i> Perhatikan bagaimana nilai yang ada didalam elemen tidak tertutup sesuai urutan. Penulisan yang benar adalah seperti ini: <b><i>Tulisan ini tebal dan miring</i></b> Catatan: Kesalahan yang sering terjadi saat menulis list <LI> yang bersarang, yaitu lupa bahwa list yang bersarang didalamnya harus berada di antara <LI> dan </LI> Contoh penulisan script yang salah: <ul> <li>Topi</li> <li>Baju <ul> <li>Kaos</li> <li>Kemeja</li> </ul> <li>Celana</li> </ul> Contoh penulisan script yang benar: <ul> <li>Topi</li> <li>Baju <ul> <li>Kaos</li> <li>Kemeja</li> </ul> </li> <li>Celana</li> </ul> Elemen XHTML harus ditulis dalam huruf kecil. Sudah cukup jelas, karena spesifikasi XHTML yang mengharuskan semua TAG harus ditulis dengan huruf kecil Contoh penulisan script yang salah: <BODY> <P>Ini sebuah paragraf</P> </BODY> Contoh penulisan script yang benar: <body> <p>Ini sebuah paragraf</p> </body> Elemen XHTML harus selalu ditutup. Elemen yang tidak kosong harus selalu ditutup dengan tag penutup Contoh penulisan script yang salah: <p>Ini paragraf <p>Paragraf yang lain Contoh penulisan script yang benar: <p>Ini paragraf</p> <p>Paragraf yang lain</p> Elemen yang kosong tetap harus ditutup dengan tag penutup atau tag awal harus diakhiri dengan /> Contoh penulisan script yang salah: <br> <hr> <img src="nsrb.jpg" alt="ganteng"> Contoh penulisan script yang benar: <br /> <hr /> <img src="nsrb.jpg" alt="ganteng" /> Dokumen XHTML harus memiliki satu root element. Semua elemen XHTML harus bersarang di dalam root element yaitu <HTML>. Semua elemen lainnya dapat memiliki sub element dan sub element harus ditulis berpasangan dan bersarang dengan elemen yang merupakan elemen atasannya (parent element). Struktur standarnya adalah: <html> <head> ... </head> <body> ... </body> </html> id Atribut menggantikan namanya HTML 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. Contoh penulisan script yang salah: <img src="picture.gif" name="picture1" /> Contoh penulisan script yang 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" /> C. PRAKTEK 1. Buka lembar kerja notepad baru 2. Ketikkan script XHTML berikut dengan benar <!DOCTYPE Doctype ditulis di sini> <html> <head> <title>Judul dituliskan di sini</title> </head> <body> Isi dokumen ditulis di sini </body> </html> Jalankan di web browser 3. Ketikkan script berikut untuk melihat contoh penulisan atribut yang benar kemudian jalankan di browser. <!DOCTYPE Doctype ditulis di sini> <html> <head> <title>Membuat Tabel dengan XHTML</title> </head> <body> <big>Daftar Harga Mie Instan</big> <table width=”100%”> <tr><th>Merk</th><th>Harga</th></tr> <tr><td>Sedap</td><td>1.000</td></tr> <tr><td>ABC</td><td>1.100</td></tr> <tr><td>Gaga mie</td><td>1.500</td></tr> <tr><td>Sarimi</td><td>980</td></tr></table> </body> </html> Perhatikan bahwa penulisan nama atribut seperti width harus menggunakan huruf kecil dan nilai atribut harus diapit oleh tanda petik seperti “100%”. 4. Ketikkan script berikut: <!DOCTYPE Doctype ditulis di sini> <html> <head> <title>Halaman web dengan XHTML</title> </head> <body> Melihat perbedaan-perbedaan di atas maka XHTML sangat disarankan bagi desainer web yang menginginkan konsistensi dalam struktur konten halaman webnya. <br/> Selain itu, XHTML lebih compatible untuk diintegrasikan dengan CSS (Cascade Style Sheet) dibandingkan dengan HTML.<br/> <img src="login_.jpg"/> </body> </html> Perhatikan tag <br> dan tag <img>. Dalam HTML elemen kosong seperti elemen tersebut boleh tidak ditutup dengan /> tetapi dalam XHTML, elemen kosong harus selalu ditutup dengan /> seperti <br/> dan <img src="login_.jpg"/> 5. Coba script berikut: <!DOCTYPE Doctype ditulis di sini> <html> <head> <title>Halaman web dengan XHTML</title> </head> <body> Agama <form action="index.htm" method="post"> <select> <option value="TI"/> Katholik <option value="TI"/> Kristen <option value="TI"/> Hindu <option value="TI"/> Budha <option value="TK" selected=”selected”/>Islam </select> </form> </body> </html> Jika pada HTML penulisannya cukup dengan <option value="TK" selected> maka di XHTML harus seperti di atas. D. LATIHAN Cobalah menampilkan gambar di dalam web dengan tag <img> dan id atribut yang menggantikan name nya (lihat contoh di dasar teori) E. TUGAS Kerjakan kembali semua soal praktek dan latihan pada modul 1 dengan format sesuai aturan kode XHTML yang benar.
