Awal bab ini akan saya buka dengan struktur dasar html.
Struktur dasar HTML
Struktur dasar yang dibangun dengan XHTML atau HTML pada prinsipnya sama yaitu terdiri dari bagian header dan body. Sebelum Anda memulai membuat halaman HTML, sebaiknya pada bagian paling atas sebelum pembuka html <html> ditambahkan keterangan DOCTYPE.
DOCTYPE bukanlah tag HTML, DOCTYPE adalah instruksi untuk web browser tentang apa versi bahasa markup halaman yang ditulis.
Deklarasi DOCTYPE mengacu pada Document Type Definition(DTD). DTD menetapkan aturan untuk bahasa markup, sehingga browser dapat membuat konten halaman tersebut dengan benar.
Deklarasi DOCTYPE harus menjadi hal pertama dalam dokumen HTML, sebelum tag <html>. Sebagai contoh
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
DOCTYPE diatas menerangkan bahwa Anda menggunakan XHTML dalam halaman web Anda.
Setelah menambahkan DOCTYPE pada halaman XHTML Anda, untuk memulai bagian struktur dasar silahkan ditandai dengan perintah:
<html xmlns="http://www.w3.org/1999/xhtml">
dan diakhiri dengan
</html>
Struktur utama dari halaman XHTML Anda berbentuk sebagai berikut.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
dan diakhiri dengan
</html>
Untuk keterangan diatas digunakan jika Anda menggunakan XHTML sedangkan jika Anda menggunakan HTML, keterangan DOCTYPE nya sebagai berikut.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Setelah menulis DOCTYPE pada halaman HTML Anda, untuk memulai bagian struktur dasar, maka tandai dengan peritah berikut ini.
<html>
dan diakhiri dengan
</html>
Jika Anda menggunakan HTML 5 keterangan DOCTYPE lebih sederhana, cukup menuliskan <!DOCTYPE HTML>. Untuk memulai bagian struktur dasar nya sama seperti keterangan menggunakan HTML versi 4.01.
Perbedaan HTML dan XHTML
Perbedaan antara HTML dan XHTML antara lain:
Dalam HTML penggunaan tag <html>, <head>, <body> dan DOCTYPE tidak berpengaruh. Dalam HTML tag-tag tersebut jika tidak digunakan pun tidak berpengaruh terhadap tampilan pada browser Anda. Beda lagi dengan XHTML yang harus ada tag-tag tersebut. Apabila ketentuan tersebut dilanggar maka akan terjadi efek tertentu pada tampilan di browser.
Dalam HTML, tag-tag penutup misalkan </b> atau </i> sifatnya optional. Tapi pada XHTML tag penutup harus ada. Misalkan:
<p> Ini adalah contoh sebuah paragrap
Dalam HTML penulisan tag paragrap <p> pada contoh diatas masih diperbolehkan tapi pada XHTML penulisan seperti contoh diatas tidak diperbolehkan. Penulisan kode XHTML yang benar menggunakan tanda penutup atau sebagai akhir paragrap tersebut. Contohnya seperti dibawah ini:
<p> Ini adalah contoh sebuah paragrap </p>
Disimpulkan bahwa XHTML versi ketatnya dari HTML.
Dalam HTML tag-tag yang berdiri sendiri atau tanda akhir (penutup) seperti <img src="gambar.jpg"> tidak perlu menambahkan slash penutup sebelum tanda kurung penutup ">". Sedangkan pada XHTML slash penutup pada tag yang berdiri sendiri harus ada sebelum tanda kurung penutup "/>" contohnya <img src="gambar.jpg" />.
Dalam HTML, nilai dalam atribut tag tidak harus di ampit dengan tanda petik ganda, misalkan pada penulisannya <img src=gambar.jpg alt=gambar> diperbolehkan. Namun dalam XHTML tidak diperbolehkan artinya harus ada tanda petik ganda yang menghampit nilai suatu atribut, misalkan <img src="gambar.jpg" alt="gambar" />.
Dalam HTML penulisan semua tag boleh dalam huruf besar ataupun huruf kecil, misalkan <HEAD>. Dalam XHTML semua tag harus ditulis dengan huruf kecil, misalkan <head>.
Dalam HTML sebuah atribut memiliki nilai yang sama dengan atributnya akan diabaikan, misalkan <hr width=80% noshade>. Artinya dalam HTML untuk nama atribut yang sama dengan nilainya dapat ditulis dengan satu nama saja. Namun dalam XHTML, semua atribut dan nilai harus dinyatakan secara eksplisit, misalkan <hr width="80%" noshade="noshade">.
Semua elemen XHTML harus bersarang didalam elemen root <html>. Elemen anak harus berpasangan dan benar bersarang dalam elemen induknya. Struktur dokumen dasarnya adalah:
<html>
<head>....</head>
<body>....</body>
</html>
Sedangkan semua HTML semua elemen tidak harus bersarang didalam elemen root <html>.Boleh tidak menuliskan tag html awal atau akhir.
XHTML lebih kompatibel untuk diintegrasikan dengan CSS (Cascade Style Sheet) dibandingkan dengan HTML. Namun setelah mempelajari HTML, XHTML, Anda wajib mempelajari CSS. CSS dapat mempermudah dan memperindah halaman WEB Anda.
Menuliskan program HTML dapat dilakukan dengan 2 cara yaitu
- Menggunakan HTML Editor, seperti Microsoft FrontPage, Dreamweaver dll. (Kemudahan dalam pengerjaannya).
- Dengan cara manual / menuliskan sendiri kode html satu persatu tag-tag HTML di notepad (Jika Anda sedang belajar maka saya menyarankan secara manual karena Anda akan lebih paham alur kerjanya. Untuk manual saya sarankan menggunakan notepad++ bisa di download disini)
Tata Cara Penulisan HTML
Teks yang ingin diformat harus berada dalam tag pembuka dan tag penutup. Contoh tag pembuka <b> dan tag penutup </b>.Pada setiap tag html diawali dengan "<" dan diakhiri dengan ">". Tag pembuka dan penutup hampir sama cuma bedanya pada tag penutup setelah tanda "<" diikuti dengan slash sehingga seperti "</" pada setiap tak penutup.
Pada bab selanjutnya kita akan mencoba membuat dokumen HTML.
Kembali ke Bab 1: Pengenalan dan Perkembangan HTML
