Belajar HTML merupakan proses pertama yang umumnya dilakukan oleh
para web programer. Nah setelah selesai dengan belajar HTML, maka kamu
akan memiliki kemampuan untuk membuat halaman web statis. Berikutnya
kamu pasti pengen bisa bikin halaman web yang memiliki kemampuan untuk
berinteraksi dengan pengunjung secara lebih intens. Waktu itulah kamu
perlu mulai belajar PHP. Setelah belajar PHP maka kamu bisa melanjutkan dengan belajar MySQL untuk menambah kemampuan PHP kamu.
Saya bisa dengan singkat menjelaskan seperti ini.
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 dangan 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.
Perlu saya sampaikan di sini bahwa meskipun kamu sudah menguasai
berbagai aplikasi yang mempermudah desain web, tetapi walau bagaimanapun
pada akhirnya kamu tetap akan memerlukan kemampuan untuk melakukan
pemrograman hands on alias manual untuk melakukan berbagai tuning dalam
program kamu.
Oh ya, sebelum saya lupa, saya perlu sampaikan bahwa tutorial belajar
HTML ini hanya salah satu dari puluhan tutorial lain tentang HTML yang
ada di prothelon. Saran saya, silakan lihat dulu
daftar tutorial HTML ini dan pelajari tutorial-tutorial tersebut secara berurutan untuk mendapatkan hasil yang maksimal.
Siap? OK, kita akan mulai belajar HTML.
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.
Pengen Nyoba Bikin?
Mulailah dengan membuka Notepad (di Windows XP bagi yang belum pernah klik Start, Program, Accessories, Notepad).
Ketikkan teks berikut:
1
2
3
4
5
6
7
8
|
< 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 kamu bikin. Klik OK,
dan browser akan menampilkan halaman yang tadi kamu buat.
Gampang kan? Atau masih bingung? Ok, kita akan melihat penjelasan dari contoh di atas.
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek!
KLIK DI SINI!.
- 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.
Nah, dengan penjelasan ini kamu mustinya udah mulai manggut-manggut dan merasa, ko ternyata belajar HTML gampang gini yah
. Mudah-mudahan.
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.
Ok, tutorial belajar HTML sesi perkenalan cukup, kita akan melanjutkan ke level berikutnya tentang
elemen HTML.
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:
1
2
3
4
5
6
7
8
|
< html >
< head >
< title >Judul Halaman</ title >
</ head >
< body >
Ini halaman pertama saya. < b >Teks ini ditebalkan</ b >
</ body >
</ html >
|
Ini adalah elemen HTML:
1
|
< 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:
1
2
3
|
< 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?
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek!
KLIK DI SINI!.
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.
Ok, kamu baru aja belajar tentang elemen HTML. Dan mustinya saat ini
kamu udah mulai terbiasa dengan istilah tag. Kalau belum biasakan diri
kamu dengan istilah ini, karena dalam proses belajar HTML, kamu kudu
familiar dengan kata tag. Lha wong HTML itu ya tag-tag itu ko.
Berikutnya, kita akan membahas tentang dasar HTML terutama beberapa
Tag HTML yang menarik untuk mengubah tampilan paragraf, judul, dll
Tag HTML yang paling penting adalah tag-tag HTML yang mendefinisikan
judul, paragraf dan ganti baris. Agar lebih mudah memahami tutorial
dasar HTML tentang tag ini, saya sarankan untuk membaca tutorial tentang
elemen HTML ini terlebih dahulu.
Seperti umumnya bahasa pemrograman lainnya, maka cara terbaik untuk
mempelajari tag HTML adalah dengan banyak berlatih. Latihan tentu saja
memerlukan alat bantu. Nah, pada dasarnya kamu bisa bikin file HTML
menggunakan notepad, tapi tentu saja banyak software untuk menulis
dengan berbagai fasilitas yang akan memudahkan. Googling aja atau cari
di download.com dengan kata kunci HTML Editor.
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.
1
2
3
4
5
6
|
< 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>.
1
2
|
< 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 udah pernah ngeliat bahwa paragraf dapat ditulis tanpa tag HTML penutup </p> kayak gini:
1
2
|
< p >Ini adalah sebuah paragraf
< p >Ini paragraf lain
|
Contoh barusan dapat digunakan pada hampir semua jenis browser, tapi
jangan ngandelin hal itu. Versi-versi HTML ke depan kayaknya ndak akan
ngijinin kamu 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 pengen membuat baris
baru, tapi belum ingin ganti 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. Ya tho?
<br> atau <br />
Kamu akan makin sering melihat penulisan tag HTML <br> dengan cara begini: <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 komentas akan diabaikan oleh browser. Kamu bisa
menggunakan komentar untuk menjelaskan kode yang kamu bikin, dan tentu
saja hal ini akan membantu kamu saat kamu perlu melakukan perubahan pada
kode kamu kapan-kapan.
Perhatikan bahwa kamu perlu menuliskan tanda seru setelah kurung buka, tetapi tidak sebelum kurung tutupnya.
Ingat hal-hal berikut!
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek!
KLIK DI SINI!.
- 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 membantuk 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
Asik kan? Ini belum seberapa, tunggu sampai kamu udah bisa bikin
tabel, huruf berwarna dan masih banyak lagi variasi tampilan yang bisa
digunakan untuk mempercantik halaman web kamu.
Setelah sebelumnya kita belajar tentang Tag HTML dasar yang penting maka
kita sekarang mencoba untuk melihat kemampuan ekstra lain dari tag
HTML. Kemampuan tambahan ini diperoleh melalui penggunaan atribut tag
HTML. Atribut memungkinkan informasi tambahan pada elemen HTML.
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 ko.
Pada beberapa situasi tertantu yang sangat jarang terjadi, seperti
misalnya saat nilai atribut itu sendiri berisi tanda kutip, maka kamu
bisa gunakan tanda kutip tunggal.
Contohnya kayak gini:
nama=’Uzumaki “Jurus Seribu Bayangan” Naruto’
Ok. Next, kita akan belajar tentang
entitas karakter HTML, jangan lupakan juga alasan mengapa kita perlu
belajar HTML.