Belajar Singkat HTML

Saya bisa dengan singkat menjelaskan sabagai berikut. 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.

Siap? OK, kita akan mulai belajar HTML.

Pengenalan HTML

Apa yang dimkasud 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:

Ini halaman pertama saya. Teks ini ditebalkan

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.
Setiap tag diapit oleh tanda lebih kecil dan lebih besar. Kamu bisa melihat bahwa tag pertama adalah . Tag HTML pada umumnya selalu memiliki pasangan yang memiliki tag sama dengan sedikit tambahan tanda garis miring “/”, dan kamu bisa melihat pasangan tag di akhir script yaitu .
Tag memberitahu browser bahwa inilah awal dari dokumen HTML. Tag pasangannya yaitu menyatakan bahwa inilah akhir dari dokumen HTML.
Teks di antara dan adalah teks informasi header. Informasi header ini tidak ditampilkan pada jendela browser.
Teks di antara


Ini halaman pertama saya. Teks ini ditebalkan

Ini adalah elemen HTML:

Teks ini ditebalkan

Elemen HTML ini dimulai dengan tag pembuka:
Isi dari elemen HTML adalah: Teks ini ditebalkan
Elemen HTML diakhiri dengan tag penutup:
Fungsi tag adalah untuk mendefinisikan sebuah elemen HTML yang harus ditampilkan dengan huruf tebal.

Nah, ini juga elemen HTML:

Ini adalah halaman pertama saya. Teks ini ditebalkan

Elemen HTML ini dimulai dengan tag pembuka , dan berakhir dengan tag penutup
Fungsi dari tag 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: memiliki arti yang sama dengan . 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.

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.

Tag HTML yang paling penting adalah tag-tag yang mendefinisikan judul, paragraf dan ganti baris.

Seperti umumnya bahasa pemrograman lainnya, maka cara terbaik untuk mempelajari 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

sampai >h6>.

mendefinisikan huruf judul yang paling besar, dan

yang terkecil. Untuk latihan coba kamu bikin file HTML berikut ini dan perhatikan hasilnya.

Ini Judul Ini Judul Ini Judul Ini Judul Ini Judul Ini Judul

HTML secara otomatis akan menambahkan baris kosong sebelum dan sesudah judul.

Paragraf

Paragraf didefinisikan dengan menggunakan tag

.

Ini adalah sebuah paragraf Ini paragraf lainnya

Sama seperti judul, HTML secara otomatis akan menambahkan baris kosong sebelum dan sesudah paragraf.

Jangan lupa Tag penutup

Kamu pastinya udah pernah ngeliat bahwa paragraf dapat ditulis tanpa tag penutup

kayak ginii:

Ini adalah sebuah paragraf 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 penutup.
Menutup semua elemen HTML dengan tag penutup adalah cara yang ampuh untuk menulis HTML yang kompatibel dengan smeua browser dan pengembangan ke depan. Hal ini juga membuat kode kita lebih mudah dimengerti (baik dibaca maupun di browse).

Ganti Baris

Tag
digunakan pada saat kamu pengen membuat baris baru, tapi belum ingin ganti paragraf. Tag
akan membuatkan sebuah baris baru buat kamu dimanapun kamu letakkan tag itu.

Ini adalah sebuah pa ragaraf dengan ganti baris

Tag
adalah tag yang kosong. Nah, karena itu dia tidak punya tag penutup seperti misalnya
, karena jadi ndak masuk akal. Ya tho?

atau

Kamu akan makin sering melihat penulisan tag
dengan cara begini:

Karena tag
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
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!

• Setiap tag HTML memiliki sebuah nama elemen (body, h1, p, br)

• Tag pembuka adalah nama yang dilingkupi oleh tanda kurung siku:

• Tag penutup adalah tanda garis miring dan nama yang dilingkupi oleh tanda kurung siku

• Isi elemen berada di antara tag pembuka dan tag penutup

• Beberapa elemen HTML tidak memiliki isi elemen

• Beberapa elemen HTML tidak memiliki teg 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

untuk menyisipkan baris kosong adalah kebiasaan yang kurang baik. Gunakan tag
sebagai penggantinya. (tapi jangan juga gunakan tag
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

Berikut adalah tag-tag penting yang akan sangat sering kamu pakai. Dan kamu akan mempelajari masing-masing secara lebih detil terutama yang menyangkut atributnya.

Tag	Description
	Mendefinsikan sebuah dokumen HTML
	Mendefinisikan isi utama
to	Mendefinisikan judul 1 sampai 6
	Mendefinisikan paragraf
	Menyisipkan sebuah baris
	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 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:

mendefinisikan awal sebuah judul.

memiliki informasi tambahan tentang perataan baris.

Contoh Atribut 2:

mendefinisikan badan/isi halaman HTML kita.

akan membuat background layar menjadi merah.

Contoh Atribut 3:

mendefinisikan sebuah tabel HTML (nanti kita pelajari lebih lanjut).

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 kamub bisa gunakan tanda kutip tunggal.

Contohnya kayak gini:

nama=’Uzumaki “Jurus Seribu Bayangan” Naruto’

ok deh,,

cukup sekian doeloe aeehh,,

met mencuba,,

semoga berhaasil,

salam manis darikoe..