Pengenalan HTML

In This Article

1. Sejarah singkat HTML
2. Apa itu HTML?
3. Elemen — dasar building blocks
4. Tag
5. Atribut
6. Named character references
7. Doctype dan Komentar
8. Dokumen singkat tapi Sempurna

Ketika Anda melihat sebuah halaman web dalam web browser, Anda lihat pada level paling sederhana, kata-kata. Kata-kata tersebut biasanya memiliki karakteristik gaya, seperti perbedaan ukuran huruf dan warna. Dalam beberapa kasus, di dalam sebuah halaman web juga menampilkan gambar-gambar atau mungkin video. Kadang juga terdapat formulir dimana kamu bisa memasukkan (atau mencari) informasi, atau merubah penampilan web sesuai dengan keinginan Anda. Kadang dalam sebuah halaman juga terdapat konten bergerak dan konten yang berubah sedangkan yang lainnya tidak.

Berbagai macam teknologi (seperti CSS, JavaScript, Flash, AJAX, JSON) dapat digunakan untuk mendefinisikan elemen dari sebuah halama web. Akan tetapi, pada level paling rendah, sebuah halaman web didefinisikan dengan menggunakan HTML (HyperText Markup Language). Tanpa HTML maka tidak akan ada halaman web.
Artikel ini berisi pengenalan terhadap HTML. Jika Anda penasaran akan apa yang terjadi dibalik layar browser Anda, maka artikel ini adalah tempat yang tepat untuk mulai mempelajarinya.

Sejarah singkat HTMLEdit

Di akhir tahun 1980an, Tim Berners-Lee bekerja sebagai seorang physicist di CERN (Sebuah Organisasi untuk research nuklir di eropa). Beliau merancang sebuah jalan bagi para scientis untuk berbagi dokumen melalui internet. Sebelum invensi ini, komunikasi melalui internet hanya terbatas pada dokumen teks biasa menggunakan beberapa teknologi seperti email,, FTP (File Transfer Protocol), dan Panel diskusi berbasis Usenet. Invensi dari HTML memanfaatkan model dan konten yang disimpan dalam server pusat yang dapat ditransfer dan ditampilkan pada workstation lokal melalui browser. Invensi ini menyederhanakan akses terhadap konten dan memungkinkan untuk menampilkan konten yang "kaya" (seperti  pemformatan teks yang mutakhir dan menampilkan gambar).

Apa itu HTML?Edit

HTML adalah bahasa untuk memarkup (memformat). HTML memberitahu Web Browser bagaimana cara menampilkan konten. HTML memisahkan "konten" (kata-kata, gambar, audio, video dan lainnya) dari "Penampilan" (Definisi dari tipe konten dan instruksi bagaimana tipe konten tersebut harus ditampilkan). HTML menggunakan beberapa elemen yang telah didefinisikan untuk mengidentifikasi tipe-tipe konten. Element-elemen memiliki satu atau lebih "tag" yang memiliki atau mengekspresikan konten. Tatag diawali dan diakhiri dengan  kurung siku, dan tag "penutup" (tag yang menandakan akhir dari konten) diawali dengan garis miring.
Sebagai contoh, elemen paragraf terdiri dari tag pembuka "<p>" dan tag penutup "</p>". Contoh berikit menampilkan sebuah paragraf yang terdapat dalam elemen paragraf HTML:

<p>My dog ate all the guacamole.</p>

Ketika konten tersebut ditampilkan dalam web browser, maka akan terlihat seperti berikut:
Browser menggunakan tag sebagai indikator bagaimana konten yang terdapat di dalam tag ditampilkan.
Elemen-element yang memiliki konten biasanya dapat memiliki elemen lainnya. Sebagai contoh, elemen empasis ("<em>") dapat disertakan di dalam elemen paragraf:

<p>My dog ate <em>all</em> the guacamole.</p>

Ketika ditampilkan, akan terlihat seperti:
Sebagian elemen tidak memiliki konten lainnya di dalamnya. Sebagai contoh, tag image ("<img>") secara sederhana menspesifikasikan nama file dari konten (sebuah gambar) sebagai sebuah atribut:

<img src="smileyface.jpg">

Seringkali sebuah garis miring dituliskan sebelum kurung tutup siku untuk mengindikasikan akhir dari tag. Hal ini bersifat opsional dalam HTML tapi harus dilakukan dalam XHTML (Yakni sebuah skema XML yang mengimplementasikan elemen-elemen HTML).
Sisa dari artikel ini menjelaskan lebih detail akan konsep yang telah diperkenalkan dalam bagian ini. Namun jika Anda ingin melihat aksi HTML, kunjungi Mozilla Thimble, Editor on-line interaktif yang mengajarkan anda bagaimana cara menulis markup HTML. Kunjungi juga  HTML Elements untuk daftar elemen-elemen yang tersedia beserta deskripsi penggunannya.

Elemen — dasar building blocksEdit

HTML terdiri dari sekumpulan elemen-elemen. Elemen-elemen mendefinisikan arti semantik dari content yang bersangkutan. Elemen-elemen mengikutsertakan saja yang terdapat di dalam tag elemen yang berkesesuaian, termasuk tag mereka sendiri. Sebagai contoh, elemen "<p>" mengindikasikan sebuah paragraf; elemen "<img>" mengindikasikan sebuah gambar (image). Buka halaman HTML Elements untuk daftar selengkapnya.
Sebagian elemen memiliki makna yang sangat tepat, seperti dalam "ini adalah image", "ini adalah judul" atau "ini adalah daftar tak berurut." yang lainnya tidaklah spesifik, "ini adalah bagian dari halaman" atau "ini adalah sebagian dari text." Pun elemen-elemen lainnya digunakan untuk alasan teknis, seperti "bagian ini mengidentifikasi informasi untuk halaman yang tidak boleh ditampilkan." Bagaimanapun juga, dalam satu cara atau seluruh elemen-elemenn HTML lainnya memiliki nilai semantik.
Sebagian besar elemen dapat menampung elemen lainnya, membentuk sebuah struktur hierarki. Sebuah halaman web sederhana tapi sempurna akan terlihat seperti berikut:

<html>
  <body>

    <p>My dog ate all the guacamole.</p>

  </body>
</html>

Seperti yang anda lihat, elemen <html> menampung dokumen di dalamnya, dan elemen <body> menampung konten dari halaman web. Struktur ini sering diibaratkan sebagai pohon yang memiliki cabang-cabang (dalam kasus ini elemen <body> dan <p>) yang tumbuh dari batang (<html>). Struktur Hierarki ini disebut dengan DOM: Document Object Model.

TagEdit

Dokumen HTML ditulis dalam teks biasa, bisa juga ditulis menggunakan teks editor apapun yang memungkinkan isinya disimpan dalam teks biasa(Meski sebagian besar penulis HTML menganjurkan untuk menggunakan editor spesial yang memiliki syntax highligting dan menampilkan DOM). Nama tag bisa ditulis dengan huruf kecil atau huruf kapital. Akan tetapi, W3C (Konsorsium global yang mengurus standarisasi HTML) menganjurkan untuk menggunakan huruf kecil (dan XHTML mengharuskan menggunakan huruf kecil).
HTML menempelkan makna spesial terhadap apa saja yang diawali dengan tanda lebih kecil dari ("<") dan diakhiri dengan tanda lebih besar dari (">"). Markup tersebut disebut dengan tag. Pastikan untuk menutup tag, seperti halnya sebagian tag ditutup secara bawaan, dan yang lainnya mungkin menghasilkan error yang tidak diinginkan jika anda lupa menutup tag.
Berikut ini adalah contoh sederhananya:

<p>This is text within a paragraph.</p>

Dalam contoh di atas terdapat tag pembuka dan tag penutup. Tag penutup sama hanya dengan tag pembuka tapi memiliki tanda garis miring (forward slash /) sebelumnama tag atau sesudah tanda lebih kecil dari. Kebanyakan elemen-elemen HTML dituliskan menggunakan tag pembuka dan penutup. Tag pembuka dan penutup harus disarangkan secara benar, yaknik tag penutup harus dituliskan sebagai kebalikan dari tag pembuka. Hal ini merupakan suatu aturan yang harus dipatuhi untuk penulisan kode yang valid
Berikut ini adalah contoh kode yang valid:

<em>I <strong>really</strong> mean that</em>.

Dan berikut ini adalah contoh kode yang tidak valid:

Invalid: <em>I <strong>really</em> mean that</strong>.

Perhatikan bahwa dalam contoh yang valid, tag penutup yang bersarang dalam tag em ditempatkan sebelum tag yang menjadi tempat tag tersebut bersarang.

Sampai adopsi aturan parsing HTML5, browser tidak menerjemahkan kode yang tidak valid dengan cara yang sama dan menghasilkan hasil yang berbeda-beda ketika semuanya menangani kode tidak valid. Browser-browser telah "meminta maaf" kepada Penulis Web tapi sayangnya tidak semuanya dengan cara yang sama, yang menghasilkan hasil yang tidak dapat diprediksi jika terdapat kode HTMl yang tidak valid. Sekarang, seiring dengan evolusi browser, seperti Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18 atau Safari 5, mereka mengimplementasikan aturan parsing kode invalid terbaru. Kode yang tidak valid dihasilkan dalam hierarki DOM dalam  seluruh browser modern.

Sebagian elemen tidak memiliki konten atau elemen lainnya. Elemen-elemen tersebut adalah elemen kosong dan tidak membutuhkan tag penutup. Berikut contohnya:

<img src="smileyface.jpg">

Kebanyakan orang menuliskan markup elemen kosong ini dengan menambahkan garis miring (forward slash)(yang mana diperintahkan dalam XHTML).

<img src="smileyface.jpg" />

Dalam HTML, tanda slash ini tidak memiliki fungsi teknis dan penggunaan tanda ini murni pemilihan gaya penulisan kode.

AtributEdit

Tag pembukan dapat memiliki informasi tambahan, seperti halnya dalam contoh sebelumnya. Informasi tersebut disebut dengan atribut. Atribut biasanya terdiri dari 2 bagian:

• Nama Atribut.
• Nilai Atribut.

Sebagian kecil atribut hanya bisa menampung satu nilai. Atribut-atribut tersebut adalah atribut Boolean dan dapat disingkat dengan hanya menuliskan nama atribut atau membiarkan nilai atribut kosong. Ketiga contoh berikut memiliki arti yang sama:

<input required="required">

<input required="">

<input required>

Nilai atribut yang terdiri dari satu kata atau nomor dapat dituliskan langsung, tetapi jika terdari dari dua atau lebih maka harus dituliskan dalam tanda kutip. Baik tanda kutip satu (') atau dua (") diperbolehkan. Kebanyakan pengembang menganjurkan untuk selalu menggunakan tanda kutip agar kode yang ditulis tidak ambigu bagi mata dan untuk menghindari kesalahan-kesalahan. Berikut ini adalah contoh kesalahan:

<p class=foo bar> (Beware, this probably does not mean what you think it means.)

Dalam contoh ini, nilai atribut seharusnya ditulis "foo bar" namun karena dituliskan tanpa tanda kutip maka kode tersebut diterjemahkan seperti berikut :

<p class="foo" bar="">