Senin, 19 September 2011

Belajar HTML

 Belajar HTML merupakan proses pertama yang umumnya dilakukan oleh para web programer. Nah setelah selesai dengan belajar HTML, maka kita akan memiliki kemampuan untuk membuat halaman web statis. Berikutnya kita pasti pengen 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 kita.

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 kita dapat mempelajari juga bahasa script lain yang akan lebih memperindah tampilan web kita dan mempermudah proses desain web kita seperti CSS dan Javascript. Kita juga mungkin akan perlu menambah ketrampilan 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.

 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 kita pakai.
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 kita (misalnya internet explorer). Kilk File, Open, Browse dan pilih cari file halamanku.htm yang tadi kita bikin. Klik OK, dan browser akan menampilkan halaman yang tadi kita 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. Kita 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 kita 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 kita. Judul ini akan ditampilkan di caption browser (lihat di bagian paling atas kanan dari browser kita).
Teks di antara tag <body> adalah teks yang akan ditampilkan pada jendela browser kita.
Dan terakhir, teks di antara <b> dan </b> akan ditampilkan dalam huruf tebal.
Nah, dengan penjelasan ini kita mustinya udah mulai manggut-manggut dan merasa, ko ternyata belajar HTML gampang gini yah J. 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 kita melakukan perubahan pada file HTML kita, maka kita 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 tutorial Belajar HTML yang lalu, kita udah nyoba bikin halaman HTML pertama kita dan mengerti cara bikinnya. Berikutnya kita harus mengerti tentang elemen HTML dan cara menuliskannya. Kita akan memerlukan definisi dasar ini dalam proses belajar HTML yang kita 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.

Berikut poin-poin yang akan membantu kita 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>
  • Karekter 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>

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 kita lagi surfing web, kita 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 kita mengikuti standar web terbaru, kita 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, kita baru aja belajar tentang elemen HTML. Dan mustinya saat ini kita udah mulai terbiasa dengan istilah tag. Kalau belum biasakan diri kita dengan istilah ini, karena dalam proses belajar HTML, kita kudu familiar dengan kata tag. Lha wong HTML itu ya tag-tag itu ko.
Berikutnya, kita akan membahas tentang dasar HTML terutama beberapa TAG menarik untuk mengubah tampilan paragraf, judul, dll.

Tidak ada komentar:

Poskan Komentar