Cara termudah belajar HTML adalah dengan mencoba sendiri membuat sebuah halaman web dan melihat bagaimana aturan-aturannya bekerja, dan itulah yang akan kita lakukan sekarang. Keluarkan editor teks favorit anda dan mulailah mengetikkan kode-kode HTML berikut ini:
<HTML> |
Setelah selesai, simpanlah dengan nama "index.html" atau "index.htm" (jika sistem operasi anda tidak mendukung nama file panjang). Kemudian bukalah dokumen tersebut dengan browser yang anda miliki. Jika semua berjalan lancar, jendela browser anda akan menghasilkan tampilan seperti ini.
Dokumen HTML terdiri dari sejumlah elemen yang ditandai dengan tag yang berupa nama elemen di antara tanda lebih kecil (<) dan lebih besar (>). Biasanya tag selalu berpasangan, yaitu tag pembuka/awal (<tag>) dan tag penutup/akhir (</tag>). Elemen yang dimaksud terletak di antara kedua tag tersebut.
Elemen pertama dan yang paling utama adalah elemen HTML, fungsinya untuk menunjukkan bahwa dokumen ini adalah dokumen HTML. Elemen ini ditandai dengan tag <HTML> di awal dokumen dan tag </HTML> di akhir dokumen. Semua elemen lain harus berada di antara kedua tag tersebut.
Elemen HTML terbagi menjadi dua elemen utama, yaitu HEAD dan BODY, yang masing-masing juga ditandai dengan pasangan tag pembuka dan penutup. Elemen HEAD berisi keterangan tentang dokumen tersebut, dan elemen BODY berisi data yang akan ditampilkan dalam jendela browser. Masing-masing elemen utama dapat memuat elemen-elemen lain di dalamnya, dan dengan cara inilah kita membangun dokumen HTML.
Elemen TITLE digunakan untuk memberi judul pada dokumen. Elemen ini salah satu dari sedikit elemen yang dapat (dan harus) diletakkan di dalam elemen HEAD. Sebagian besar elemen penting lain harus berada di dalam elemen BODY. Perhatikan bahwa judul tidak ditampilkan di dalam jendela browser, melainkan di palang judul (title bar).
Untuk menampilkan judul di dalam halaman browser, digunakan elemen heading. Salah satunya, yang digunakan dalam contoh di atas, adalah elemen H1. Teks yang diletakkan di antara tag <H1> dan </H1> akan ditampilkan lebih besar dan tebal sehingga lebih menonjol.
Satu elemen lagi, untuk melengkapi tutorial ini adalah elemen P yang digunakan untuk memisahkan paragraf yang satu dengan paragraf atau elemen teks yang lain.
Setelah anda mengenal struktur dasar sebuah dokumen HTML, silakan melanjutkan ke bagian berikutnya, tentang Heading dan Paragraf.