AD (728x60)

Sabtu, 10 Desember 2016

Memahami Struktur Dokumen HTML

Share & Comment
Setelah berhasil membuat halaman web pertama Anda, kini Anda perlu memahami istilah dan struktur dokumen HTML yang telah Anda susun.

Seluruh kode yang Anda tuliskan pada latihan disebut sintaks. Berikut beberapa penjelasannya:

  • Doctype
    Doctype adalah deklarasi untuk memberitahu web browser mengenai versi HTML yang digunakan di sebuah halaman web. Penulisannya di bagian paling awal dokumen HTML Anda. Pada contoh, Doctype memberitahu browser bahwa dokumen Anda adalah HTML5.

    <!DOCTYPE html>

    Seperti telah diulas di awal, HTML memiliki beberapa versi. Sekedar untuk referensi, deklarasi Doctype pada HTML 4.01 Transitional adalah seperti berikut:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

    Adapun deklarasi Doctype pada XHTML 1.1 adalah sebagai berikut.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    Pendeklarasian Doctype di HTML5 disederhanakan, sehingga lebih mudah dihafal. Mengingat Anda akan membangun sebuah web yang modern, tentunya gunakanlah HTML5.
  • Root
    Root adalah elemen dasar, yaitu kode mulai dari <html> hingga </html>. Doctype tidak termasuk root. Semua elemen lain harus berada di dalam root.
  • Elemen
    Elemen adalah bagian-bagian dari dokumen HTML. Contohnya, kode mulai dari <body> hingga </body> disebut elemen body. Kode mulai dari <title> hingga </title> disebut elemen title atau judul. Kode mulai <p> hingga </p> disebut elemen p atau paragraf. Demikian seterusnya.
  • Tag
    Tag adalah kode untuk menandai awa dan akhir sebuah elemen di HTML. Tag menggunakan tanda kurung sudut <...>. Pada contoh, yang disebut tag antara lain <html>, </html>, <head>, </head>, <body>, <title>, <p>, <img>, dan lainnya.
  • Nama tag
    Nama tag adalah karakter yang ada di dalam tanda tag. Contohnya html, head, body, title, dan seterusnya.
  • Tag pembuka
    Tag pembuka adalah tanda awal sebuah elemen. Contohnya <html>, <head>, <body>, <title>, dan <p>.
  • Tag penutup
    Tag penutup adalah tanda akhir sebuah elemen. Contohnya </html>, </head>, </body>, </title>, dan </p>.
  • Tag tunggal
    Tag tunggal adalah tag khusus yang tidak menggunakan tag penutup. Pada contoh, tag <img> adalah tag tunggal.
    Tag tunggal lazim disebut tag self-closing atau elemen void. Selain <img>, tag tunggal di HTML5 meliputi tag <area>, <base>, <br>, <col>, <command>, <embed>, <hr>, <input>, <link>, <meta>, <param>, dan <source>.
  • Atribut
    Atribut adalah informasi atau aturan tambahan yang disisipkan dalam sebuah tag. Misalny tag <a> disisipi atribut href="http://www.google.com". Tag <a> berfungsi untuk membuat link, atributnya berisi informasi mengenai tujuan atau target linknya. Bagian href disebut atribut, http://www.google.com disebut dengan nilai atribut.
  • Komentar
    Komentar adalah baris kode yang diabaikan oleh browser dan tidak muncul di halaman web. Komentar ditandai dengan simbol awal <!-- dan diakhiri dengan simbol akhir -->. Komentar hanya berfungsi sebagai catatan sang pembuat kode untuk mengingat sesuatu. Pada contoh, baris berikut ini hanya komentar:

    <!-- ini isi dokumen -->
  • Teks
    Teks adalah isi yang ada di dalam sebuah elemen, baik berupa huruf, angka, atau simbol. Pada contoh, yang disebut teks adalah: "Latihan Pertama", "Belajar HTML, dan "Google".
  • Karakter khusus
    karakter khusus adalah kombinasi karakter tertentu yang digunakan untuk menampilkan suatu simbol di halaman web. Pada contoh, untuk menampilkan simbol & digunakan karakter khusus &amp; dan bukan dituliskan secara langsung. Contoh lain, untuk menampilkan simbol hak cipta digunakan karakter khusus &copy;.
    Karakter khusus bermanfaat untuk menampilkan simbol-simbol yang tidak bisa diketikkan secara langsung melalui keyboard, misalnya simbol hak cipta. Karakter khusus juga digunakan untuk menggantikan karakter tertentu yang lazim dipakai dalam kode program, misalnya karakter & (ampersand).

    Daftar karakter khusus dan simbol yang dihasilkan dapat Anda lihat di:
    www.degraeve.com/reference/specialcharacterss.php.

Beberapa hal yang perlu Anda pahami mengenai kode HTML dan tampilannya di web browser antara lain:

  • Dokumen HTML tersusun atas dua elemen utama, yaitu elemen head dan elemen body.
  • Teks di antara tag pembuka <title> hingga tag penutup </title> akan muncul sebagai judul halaman web di jendela web browser. Pada contoh, judulnya adalah "Latihan Pertama".
  • Selain elemen title, elemen lain yang berada di elemen utama head tidak akan ditampilkan di web browser dan hanya sebagai informasi.
  • Apa yang Anda tuliskan di elemen utama body akan ditampilkan di web browser, kecuali komentar. Elemen body inilah konten halaman web yang biasa Anda baca di internet.

Sebagai catatan, file HTML dapat disimpan dengan ekstensi file .html maupun .htm.


Sumber pustaka: Buku Modern Web Design karangan Zaenal A Rozi dan SmitDev Community
Tags:

Written by

Seorang introvert yang gemar utak-atik template blog.

0 komentar:

Posting Komentar

 

Popular Content

Salah dalam pengaturan waktu adalah salah dalam berperilaku. -Rilla Gantino
Lebih baik tinggi Emosional Quotient daripada tinggi Intellegent Quotient. -Peneliti

My Galery

1468583443947 20160727093050 (2) IMG_20160110_191716 1468583441941 Doni IMG_20160110_185117 IMG_20160110_191655 IMG-20160207-WA0027 instantdeploy - Copy DSC_0608

Why is very Important EQ than IQ?

Dalam dunia kerja, perilaku pekerja menentukan nilai perusahaan. EQ besar cenderung mempunyai sikap kerja sama yang tinggi. Selaras dengan penelitian yang menyatakan bahwa Emosional Quotient lebih penting daripada Intellegent Quotient. -Peneliti
Copyright © Doc. Important | Designed by Templateism.com