TUTORIAL BELAJAR HTML Gunawan Effendi gunawan_effendi@penulis.com :: http://penulis.com Abstrak Bahasa html merupakan markup (pelekat) untuk menampilkan teks, gambar dan multi media. Dalam html terdapat tag-tag yang mampu terbaca oleh browser web sehingga tampilan informasi luar biasa dapat kita nikmati. Kata Kunci:html, website, internet Pendahuluan Belajar HTML merupakan proses pertama yang umumnya dilakukan oleh para web programer. Setelah selesai dengan belajar HTML, maka kita akan memiliki kemampuan untuk membuat halaman web statis. Berikutnya kita pasti ingin bisa bikin halaman web yang memiliki kemampuan untuk berinteraksi dengan pengunjung secara lebih intens. Waktu itulah kita perlu mulai belajar PHP, setelah belajar PHP maka kita bisa melanjutkan dengan belajar MySQL untuk menambah kemampuan PHP kamu. Pembahasan HTML diperlukan terutama untuk membuat tampilan web, PHP untuk menambah kemampuan interaksi dengan pengunjung dan kemampuan menyimpan data akan disupport oleh MySQL. Lengkap sudah semuanya. Namun tentu saja web programming tidak hanya sebatas itu. Selain belajar HTML, PHP dan MySQL, tentu saja kamu dapat mempelajari juga bahasa script lain yang akan lebih memperindah tampilan web kamu dan mempermudah proses desain web kamu seperti CSS dan Javascript. Kamu juga mungkin akan perlu menambah ketrampilan kamu dalam membuat desain web dengan
berbagai aplikasi pembuat web seperti Dreamweaver dan FrontPage serta belajar aplikasi pengolah gambar seperti Fireworks dan Adobe. Tetapi untuk saat ini kita akan konsentrasi ke materi belajar HTML yang menjadi dasar semua pemrograman web. Tutorial belajar HTML ini hanya salah satu dari puluhan tutorial lain tentang HTML yang ada di prothelon. Pengenalan HTML Apa yang dimaksud dengan file HTML? HTML merupakan kependekan dari Hyper Text markup Language Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman File HTML harus memiliki ekstensi htm atau html File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai. Untuk mulai membuat file html mulailah dengan membuka Notepad (di Windows XP bagi yang belum pernah klik Start, Program, Accessories, Notepad). Ketikkan teks berikut: <html> <head> <title>judul Halaman</title> </head> <body> Ini halaman pertama saya. <b>teks ini ditebalkan</b> </body> </html> Simpan dengan nama halamanku.htm (jangan lupa tambahkan tanda kutip ganda pada nama filenya. Kalau lupa maka nama filenya akan menggunakan ekstensi default.txt sehingga menjadi halamanku.htm.txt).
Buka Browser kamu (misalnya internet explorer). Kilk File, Open, Browse dan pilih cari file halamanku.htm yang tadi kita buat. Klik OK, dan browser akan menampilkan halaman yang tadi kita buat. Kita akan melihat penjelasan dari contoh di atas. Setiap tag diapit oleh tanda lebih kecil dan lebih besar. Kamu bisa melihat bahwa tag pertama adalah <html>. Tag HTML pada umumnya selalu memiliki pasangan yang memiliki tag sama dengan sedikit tambahan tanda garis miring /, dan kamu bisa melihat pasangan tag <html> di akhir script yaitu </html>. Tag <html> memberitahu browser bahwa inilah awal dari dokumen HTML. Tag pasangannya yaitu </html> menyatakan bahwa inilah akhir dari dokumen HTML. Teks di antara <head> dan </head> adalah teks informasi header. Informasi header ini tidak ditampilkan pada jendela browser. Teks di antara <title> adalah judul dokumen kamu. Judul ini akan ditampilkan di caption browser (lihat di bagian paling atas kanan dari browser kamu). Teks di antara tag <body> adalah teks yang akan ditampilkan pada jendela browser kamu. Dan terakhir, teks di antara <b> dan </b> akan ditampilkan dalam huruf tebal. Sekarang kita akan lihat mengenai ekstensionnya. Sebagaimana sudah disampaikan di awal, kita bisa membuat file HTML dengan 2 ekstension yaitu.htm dan.html. Nah ekstension.htm ditujukan untuk operating sistem jaman dulu yang hanya mensupport ekstensi 3 huruf. Sedangkan ekstensi.html akan lebih aman digunakan jika OS dan aplikasinya support karena lebih jelas menunjukkan bahwa ini adalah file HTML. Sebagai catatan, setiap kamu melakukan perubahan pada file HTML kamu, maka kamu harus me refresh browser untuk melihat perubahan tampilannya. Elemen HTML, apa tuh? Nah, dalam Belajar HTML yang lalu, kamu udah nyoba membuat halaman HTML pertama kamu dan mengerti cara bikinnya. Berikutnya kamu harus belajar elemen HTML dan cara menuliskannya. Kamu akan memerlukan definisi
dasar ini dalam proses belajar HTML yang kamu lakukan sepanjang tutorial di sini. Berikut petunjuk pentingnya. Ingat petunjuk penting ini: Dokumen HTML adalah file teks yang terdiri dari elemen HTML. Nah, elemen HTML itu didefinisikan menggunakan apa yang disebut dengan tag HTML. Ingat, elemen HTML didefinisikan dengan tag HTML. Apa yang dimaksud dengan tag HTML? Nah, berikut poin-poin yang akan membantu kamu mengingat dan memahami pengertian Tag HTML: Tag HTML digunakan untuk menandai (mark-up) elemen HTML Tag HTML berada di antara dua karakter penanda berikut < dan > Karakter penanda itu disebut dengan tanda kurung siku Tag HTML umumnya selalu berpasangan seperti <b> dan </b> Tag pertama adalah tag pembuka, dan tag kedua adalah tag penutup Teks di antara kedua tag tersebut disebut isi elemen Tag HTML tidak bersifat case sensitif, <b> memiliki arti yang sama dengan <B> Elemen HTML Ingat contoh HTML di tutorial sebelumnya kan: <html> <head> <title>judul Halaman</title> </head> <body> Ini halaman pertama saya. <b>teks ini ditebalkan</b> </body> </html> Ini adalah elemen HTML: <b>teks ini ditebalkan</b> Berikut penjelasan tentang Elemen HTML tersebut:
Elemen HTML ini dimulai dengan tag pembuka: <b> Isi dari elemen HTML adalah: Teks ini ditebalkan Elemen HTML diakhiri dengan tag penutup: </b> Fungsi tag <b> adalah untuk mendefinisikan sebuah elemen HTML yang harus ditampilkan dengan huruf tebal. Nah, ini juga elemen HTML: <body>ini adalah halaman pertama saya. <b>teks ini ditebalkan</b></body> Elemen HTML ini dimulai dengan tag pembuka <body>, dan berakhir dengan tag penutup </body>. Fungsi dari tag <body> adalah untuk mendefiniskkan elemen HTML yang berisi badan (isi) dari dokumen HTML. Mengapa kita menggunakan tag dalam huruf kecil? Kita sudah membahas sebelumnya bahwa tag HTML tidak case sensitif: <B> memiliki arti yang sama dengan <b>. Kalau kamu lagi surfing web, kamu akan melihat bahwa banyak situs web menggunakan tag HTML dalam huruf besar dalam source codenya. Tapi dalam contoh di atas, kita menggunakan huruf kecil. Tahu kenapa? Kalau kamu mengikuti standar web terbaru, kamu harus selalu menggunakan tag dalam huruf besar. World Wide Web Consortium (W3C) merekomendasikan penggunaan huruf kecil dalam rekomendasi HTML 4 mereka, dan XHTML (generasi berikutnya dari HTML) memerlukan tag dalam huruf kecil. Tag HTML Tag HTML yang paling penting adalah tag-tag HTML yang mendefinisikan judul, paragraf dan ganti baris. Judul Judul didefinisikan dengan menggunakan tag HTML <h1> sampai >h6>. <h1> mendefinisikan huruf judul yang paling besar, dan <h6> yang
terkecil. Untuk latihan coba kamu bikin file HTML berikut ini dan perhatikan hasilnya. <h1>ini Judul</h1> <h2>ini Judul</h2> <h3>ini Judul</h3> <h4>ini Judul</h4> <h5>ini Judul</h5> <h6>ini Judul</h6> HTML secara otomatis akan menambahkan baris kosong sebelum dan sesudah judul. Paragraf Paragraf didefinisikan dengan menggunakan tag HTML <p>. <p>ini adalah sebuah paragraf</p> <p>ini paragraf lainnya</p> Sama seperti judul, HTML secara otomatis akan menambahkan baris kosong sebelum dan sesudah paragraf. Jangan lupa Tag HTML penutup Kamu pastinya sudah pernah melihat bahwa paragraf dapat ditulis tanpa tag HTML penutup </p> seperti ini: <p>ini adalah sebuah paragraf <p>ini paragraf lain Contoh di atas dapat digunakan pada hampir semua jenis browser, tapi jangan mengandalkan hal itu. Versi-versi HTML ke depan seperti tidak akan mengijinkan kita untuk melewatkan tag HTML penutup.
Menutup semua elemen HTML dengan tag HTML penutup adalah cara yang ampuh untuk menulis HTML yang kompatibel dengan semua browser dan pengembangan ke depan. Hal ini juga membuat kode kita lebih mudah dimengerti (baik dibaca maupun di browse). Ganti Baris Tag HTML <br> digunakan pada saat kamu ingin membuat baris baru, tapi belum ingin pindah paragraf. Tag HTML <br> akan membuatkan sebuah baris baru buat kamu dimanapun kamu letakkan tag itu. <p>ini <br> adalah sebuah pa<br>ragaraf dengan ganti baris </p> Tag <br> adalah tag yang kosong. Nah, karena itu dia tidak punya tag HTML penutup seperti misalnya </br>, karena jadi ndak masuk akal. <br> atau <br /> Kamu akan semakin sering melihat penulisan tag HTML <br> dengan cara seperti ini: <br /> Karena tag HTML <br> tidak memiliki tag penutup, maka tag tersebut melanggar salah satu aturan dasar dalam penulisan HTML ke depannya (XHTML yang berbasis XML), di mana semua elemen harus ditutup. Menuliskan penggantian baris dengan cara <br/> ini menjamin bahwa file HTML kamu akan kompatibel dengan XML maupun cara penulisan HTML di masa datang. Menuliskan Komentar dalam HTML Tag komentar digunakan untuk menyisipkan sebuah komentar dalam kode sumber HTML. Sebuah komentar akan diabaikan oleh browser. Kamu bisa menggunakan komentar untuk menjelaskan kode yang kamu buat, dan
tentu saja hal ini akan membantu kamu saat kamu perlu melakukan perubahan pada kode kamu sewaktu-waktu <!-- Ini adalah sebuah komentar --> Perhatikan bahwa kamu perlu menuliskan tanda seru setelah kurung buka, tetapi tidak sebelum kurung tutupnya. Ingat hal-hal berikut! Setiap tag HTML memiliki sebuah nama elemen (body, h1, p, br) Tag pembuka adalah nama yang dilingkupi oleh tanda kurung siku: <h1> Tag penutup adalah tanda garis miring dan nama yang dilingkupi oleh tanda kurung siku </h1> Isi elemen berada di antara tag pembuka dan tag penutup Beberapa elemen HTML tidak memiliki isi elemen Beberapa elemen HTML tidak memiliki tag penutup Beberapa Tips Yang Bermanfaat Waktu kamu menulis teks HTML, maka kamu tidak akan pernah bisa yakin bagaimana teks itu ditampilkan oleh browser lain. Beberapa orang memiliki monitor yang lebih besar, dan yang lainnya. Teks akan diatur ulang setiap kali pengunjung mengubah ukuran windownya. Jangan pernah mencoba untuk membentuk teks yang memiliki baris kosong atau spasi dekat dengan teks itu. HTML akan menghapus spasi dalam teks kamu. Berapa banyakpun kamu tuliskan spasi, tetap akan dihitung satu. Satu lagi, dalam HTML sebuah baris baru dihitung sebagai satu spasi.
Menggunakan paragraf kosong <p> untuk menyisipkan baris kosong adalah kebiasaan yang kurang baik. Gunakan tag <br> sebagai penggantinya. (tapi jangan juga gunakan tag <br> untuk membuat daftar. Tunggu sampai pelajaran tentang daftar dimulai ya). HTML secara otomatis akan menambah baris kosong sebelum dan sesudah beberapa elemen, seperti sebelum dan sesudah paragraf dan judul. Tag HTML Dasar Masih ingat kan tentang pengertian tag HTML? Nah, berikut adalah tag-tag HTML penting yang akan sangat sering kamu pakai. Dan kamu akan mempelajari masing-masing secara lebih detil terutama yang menyangkut atributnya. Tag Description <html> Mendefinsikan sebuah dokumen HTML <body> Mendefinisikan isi utama <h1> to <h6> Mendefinisikan judul 1 sampai 6 <p> Mendefinisikan paragraf <br> Menyisipkan sebuah baris <hr> Mendefinisikan garis horisontal <! > Bikin komentar Atribut Tag HTML Tag HTML dapat memiliki atribut. Atribut memungkinkan informasi tambahan pada elemn HTML. Atribut selalu memiliki pasangan nama/nilai seperti ini: nama= nilai. Atribut selalu dicantumkan pada awal tag elemen HTML.
Contoh Atribut 1: <h1> mendefinisikan awal sebuah judul. <h1 align= center > memiliki informasi tambahan tentang perataan baris. Contoh Atribut 2: <body> mendefinisikan badan/isi halaman HTML kita. <body bgcolor= red > akan membuat background layar menjadi merah. Contoh Atribut 3: <table> mendefinisikan sebuah tabel HTML (nanti kita pelajari lebih lanjut). <table border= 1 > memiliki tambahan informasi mengenai ketebalan garis pada tabel. Selalu Gunakan Tanda Kutip pada Nilai Atribut Nilai atribut seharusnya selalu diapit oleh tanda kutip. Tanda kutip ganda paling sering digunakan, tapi sebenarnya tanda kutip tunggal juga boleh. Pada beberapa situasi tertentu yang sangat jarang terjadi, seperti misalnya saat nilai atribut itu sendiri berisi tanda kutip, maka kamu bisa gunakan tanda kutip tunggal. Contohnya: nama= Uzumaki Jurus Seribu Bayangan Naruto Entitas karakter Beberapa karakter memiliki arti khusus dalam HTML, seperti tanda lebih kecil (<) yang mendefinisikan awal dari sebuah tag HTML. Kalau kita ingin agar browser menampilkan tanda lebih kecil itu (<), kita harus menyisipkan entitas karakter dalam kode HTML kita.
Entitas karakter memiliki 3 komponen: sebuah tanda dan (&), nama entitas atau sebuah # yang diikuti nomor entitas dan diakhiri dengan tanda titik koma (;). Untuk menampilkan tanda lebih kecil dalam halaman HTML kita, maka kita harus menuliskan : < atau < Keuntungan menggunakan nama dibandingkan nomor adalah bahwa nama lebih mudah untuk diingat. Kekurangannya adalah bahwa tidak semua browser mendukung nama-nama entitas yang baru, namun demikian hampir semua browser mendukung nama entitas standar. Catatan: entitas bersifat case sensitif. Spasi berurutan Entitas karakter yang mungkin akan paling sering kamu pakai adalah spasi. HTML akan menghilangkan spasi dalam teks HTML kamu. Kalau kamu menuliskan 10 spasi pada kode HTML kamu, maka HTML akan menghapus 9 spasi. Nah, untuk menambahkan spasi pada dokumen HTML kamu, gunakan entitas karakter Beberapa entitas karakter yang sering dipakai: Hasil Penjelasan Nama Entitas Nomor Entitas Spasi < Kurang dari < < > Lebih dari > > Tanda kutip " " Kutip tunggal ' (Ndak berlaku di IE) ' & Dan & &
Berikut ini contoh untuk memperjelas tentang apa yang dimaksud dengan entitas karakter. Kasusnya sangat mudah kok. Kita kan udah tahu, kalau yang namanya HTML itu menggunakan tag, iya kan? Salah satu contoh adalah tag <b> </b>untuk menebalkan huruf. Sekarang bayangkan kalau suatu ketika kamu diminta untuk menulis tutorial tentang HTML dan kebetulan akan menulis tentang tag HTML yang berfungsi untuk menebelkan huruf. Misalnya kamu pengen baris berikut tampil di tutorial kamu (perhatikan, kamu ingin agar tag <b> dan </b> muncul dalam baris tersebut). Untuk menebalkan huruf seperti kata tebal ini, kamu memerlukan tag <b> dan </b> Nah, coba pikirkan, bagaimana menuliskan bari sederhana ini tanpa entitas karakter. Ndak bisa kan? Misalnya kamu menulis seperti ini: Untuk menebalkan huruf seperti kata <b>tebal</b> ini, kamu memerlukan tag <b> dan </b> Apa yang terjadi? Browser akan menampilkan kalimat berikut: Untuk menebalkan huruf seperti kata tebal ini, kamu memerlukan tag dan Apa bedanya? Ya tag <b> dan </b> tidak muncul, sebagai gantinya, kata dan akan tampil dalam huruf tebal. Untuk membuat agar tag <b> dan </b> dapat muncul, kamu memerlukan entitas karakter, sehingga kamu harus menuliskan kode HTML menjadi seperti ini: Untuk menebalkan huruf seperti kata <b>tebal</b> ini, kamu memerlukan tag <b> dan </b>
Perhatikan, tanda < saya ganti dengan entitas karakter <, sedangkan tanda > saya ganti dengan >. Lhah nambah lagi tuh pertanyaan di komentar. Gini pertanyaannya, terus gimana dunks cara kita menampilkan > biar yang keluar bukan >. Mudah aja, kita bisa gunakan & di depannya untuk meng-escape tanda & sehingga kamu bisa tulis seperti ini & > (tanpa spasi di antara & dan >. Saya terpaksa menuliskan menggunakan spasi, karena tidak mungkin saya tuliskan tanpa spasi.) Penutup Mudah-mudahan artikel ini dapat meningkatkan pemahaman kita tentang HTML, setelah kita sudah menguasai HTML dengan cukup baik, kita bisa mulai belajar PHP, Mysql dan program website lainnya. Referensi http://prothelon.com/ http://riyant17.blogspot.com/ http://planetwork-tkj.blogspot.com/ http://www.ilmugrafis.com/ http://www.ilmuwebsite.com/
Biografi Nama saya Gunawan Effendi saat ini kuliah di RAHARJA jurusan Sistem FOTO Informasi dan berkonsentrasi Sistem Informasi Manajemen. Saya bekerja di PT Angkasa Pura II (Persero). Hobi saya adalah olahraga terutama airsoft gun dan hiking. Kalian bisa menguhubungi saya di gunero82@yahoo.com.