Lalu, apa itu kode HTML? Kode HTML adalah bahasa pemrograman yang dapat digunakan untuk membuat dokumen HTML. Jika anda berkunjung ke sebuah situs web, anda akan mengetahui kode HTML tersebut melalui web browser dengan cara memilih menu View Source pada browser Internet Explorer, dan juga View Page Source pada Mozilla Firefox.
Kemudian, bagaimana cara membuat sebuah dokumen HTML? Yang perlu anda lakukan adalah
memahami kode-kode HTML atau bahasa pemrograman yang digunakan untuk HTML (saya akan membahas mengenai kode-kode HTML pada postingan selanjutnya) kemudian menuangkannya pada sebuah dokumen HTML. Untuk membuat sebuah dokumen HTML tidak memerlukan alat dan bahan yang rumit karena HTML dapat dibuat hanya dengan teks editor seperti notepad (pada windows), gedit (pada Linux), dan lain-lain (walaupun saat ini sudah banyak aplikasi khusus dalam pembuatan dokumen HTML). Setelah dokumen HTML selesai dibuat, lalu anda simpan (save) dengan nama tertentu. Tidak ada aturan yang baku untuk penamaan suatu dokumen HTML. Artinya, kita bebas memilih nama untuk dokumen tersebut. Hanya ekstensinya saja yang perlu diperhatikan. Suatu file teks akan dianggap sebagai dokumen HTML jika berekstensi .htm maupun .html. Oleh karena itu pembuatan sebuah dokumen HTML harus di-save dengan ekstensi tersebut. Tetapi, dalam membuat design web yang utuh dan merupakan satu-kesatuan dari sebuah situs, biasanya orang menggunakan nama home.html untuk halaman utama (main page) pada situs tersebut.
Selanjutnya kita akan membahas mengenai kerangka dokumen HTML. Secara umum, kerangka dokumen HTML terbagi menjadi 2 bagian yaitu header (kepala) dan body (badan) web. Pada bagian header, biasanya terdapat informasi mengenai judul situs web maupun address site (alamat situs tersebut), dimana head ini biasanya tampil pada bagian tab dari web browser. Kemudian pada bagian pada bagian body biasanya berupa isi dari dokumen HTML yang akan ditampilkan.
 |
| Kerangka HTML |
Untuk lebih jelasnya, berikut adalah kerangka dokumen HTML yang disajikan secara sederhana.
 |
| Tag Kerangka HTML |
Seperti pada gambar di atas, pengkodean dokumen HTML dilakukan dengan cara berpasangan (namun tidak semua tag harus berpasangan). Sebagai contoh, tag <head> yang ditutup dengan tag </head> dimana tag ini merupakan kepala dari dokumen HTML yang biasanya berisi tag <title>, <link>, <meta>, dll. Kemudian tag <body> yang ditutup dengan tag </body>. Lalu kedua tag tersebut diapit dengan tag <html> dan </html> yang menandakan bahwa dokumen tersebut adalah dokumen HTML. Pada uraian tersebut, kita juga dapat mengetahui bahwa pengkodean dokumen HTML dilakukan dengan menggunakan tanda < dan juga tanda > yang disebut tanda delimeter (kurung siku). Jika sebuah kode dimaksudkan untuk menutup atau mengakhiri pasangan kode, maka digunakan tanda / (garis miring) atau yang disebut dengan tanda slash.
————————————————————————————————————
MEMBUAT DOKUMEN HTML
Agar dapat memahami mengenai kerangka HTML, pada bagian ini akan dibahas mengenai bagaimana cara membuat sebuah dokumen HTML sederhana. Berikut adalah langkah-langkahnya :
- Buka sebuah aplikasi text editor, misalnya notepad, gedit, dll. Dalam hal ini saya menggunakan notepad karena lebih familiar.
- Tuliskan kode berikut pada text editor yang bersangkutan :
- Dan berikut adalah contoh penulisan kode menggunakan notepad :
 |
| *) penulisan yang menjorok tidak mutlak diperlukan |
- Kemudian klik menu File, kemudian pilih Save As.
- Setelah itu akan muncul window Save As, pada kotak dialog File name, inputkan nama yang akan digunakan untuk menandai file HTML tersebut, pada kotak dialog Save as type, pilih "All Files". Kemudian klik Save.
 |
| Format Penyimpanan |
- Buka file HTML tersebut dalam web browser. Berikut adalah tampilannya.
 |
| Hasil Tag |
————————————————————————————————————
ATURAN-ATURAN DALAM MEMBUAT DOKUMEN HTML
Seperti yang telah saya bahas sekilas pada uraian di atas, dokumen HTML dibuat dengan menggunakan tag-tag khusus dan dengan aturan yang khusus pula. Ada beberapa hal yang perlu diperhatikan dalam penggunaan tag di dalam dokumen HTML, yaitu :
- Tag HTML selalu diapit dengan mengginakan tanda kurung siku, < dan >
- Meskipun kode HTML tidak bersifat case sensitive (membedakan penggunaan huruf besar/kapital dan huruf kecil), namun tag HTML sebaiknya ditulis menggunakan huruf kecil, misalnya <html>, <head>, <body>, dll. Ini merupakan cara yang direkomendasikan oleh W3C (World Wide Web Consorvation), meskipun sebenarnya bisa ditulis dengan huruf kapital seperti <HTML>, <HEAD>, <BODY>, dll.
- Tag HTML umumnya berpasangan, seperti tag <html> berpasangan dengan tag </html>, <head> dengan </head>, dll. Namun adapula tag yang tidak berpasangan seperti <br>, <hr>, <input>, <meta>, dll. Untuk menandai bahwa tag tersebut tidak berpasangan maka sebaiknya pada tag tersebut dibubuhi tanda slash (garis miring), seperti <br />, <hr />, dll.
- Untuk penggunaan tag bersarang, maka penulisannya harus terurut. Berikut contohnya :
Pada contoh di atas, di dalam tag <i> terdapat tag lain yaitu <b>. Dalam hal ini, tag <b> harus ditutup terlebih dahulu dengan tag </b>, baru kemudian ditutup dengan tag </i>.
————————————————————————————————————
ATRIBUT TAG PADA HTML
Sebelum mempelajari mengenai tag-tag yang digunakan dalam mendesain isi sebuah web, sebaiknya kita mengetahui apa yang dimaksud atribut pada sebuah tag. Pada umumnya tag-tag dalam HTML memiliki beberapa atribut yang nilainya dapat ditentukan sesuai dengan keperluan. Atribut suatu tag harus ditulis di dalam tag yang bersangkutan (sebelum tanda tutup kurung siku atau tanda >). Berikut ini saya lampirkan sebuah contoh tag dengan atributnya
Dari gambar di atas dapat diketahui bahwa tag <font> memiliki atribut size dan color. Atribut size memiliki nilai '2' dan atribut color memiliki nilai 'green'. Maksud dari tag di atas adalah untuk memformat teks "HTML" sehingga memiliki ukuran "2 point", dan berwarna "hijau". Jadi dari contoh tersebut dapat disimpulkan bahwa bentuk umum penulisan atribut dari suatu tag adalah seperti berikut :
<namaTag atribut1="NilaiAtribut1" atribut2="NilaiAtribut2" dst>
Penggunaan atribut ini sangat sering ditemukan dalam mempelajari mengenai tag-tag yang digunakan untuk mendesain isi dari halaman web yang kita desain. Oleh karena itu materi ini harus dipahami terlebih dahulu sebelum mempelajari mengenai tag-tag dalam mendesain isi HTML.
Pustaka :
Raharjo, Budi, Imam Heryanto, (dan) Enjang RK, 2010. Modul Pemrograman WEB (HTML, PHP, & MySQL), Modula; Bandung.
————————————————————————————————————
Penjelasan di atas merupakan permulaan dari pembelajaran mengenai HTML. Setelah kita memahami mengenai pembuatan dokumen HTML, sekarang kita akan mempelajari materi mengenai komponen-komponen yang digunakan dalam design HTML. Komponen-komponen yang akan dibahas kali ini digunakan pada saat hendak memberikan desain pada isi HTML yang akan dibuat. Komponen-komponen tersebut antara lain :
- Text Formatting (memformat teks yang akan digunakan dengan atribut seperti heading, align, dan font)
- Penggunaan Image (gambar)
- Text Style (penggunaan style pada teks; text style terbagi 2 yaitu Logical Style dan Physical Style)
- Penggunaan List (daftar pada HTML)
- Penggunaan Table (tabel pada HTML)
- Penggunaan Link (membuat hyperlink pada HTML)
- Penggunaan Frame
- Penggunaan Form
untuk mempermudah bisa juga mengunakan editor seperti dreamweaver dan sebagainya. banyak juga editor gratis sehingga semua text kita akan secara langsung di konversi ke HTML. :D
BalasHapus@webdesignsurabaya > betul sekali. terima kasih.
Hapustapi untuk pembelajaran lebih baik kalo mencoba yang lebih sulit seperti menggunakan notepad terlebih dulu jadi bisa buat menguji ketelitian. saran saya lebih baik mencoba memakai text editor pada windows (notepad) atau linux server (nano, vi, dll) karena ngga ada indikasi warna tag seperti di dreamweaver atau text editor gedit