BAB I
Pengenalan HTML
- Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup
- Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman
- File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.
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 <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 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 kamu melakukan perubahan pada file HTML kamu, maka kamu harus me
refresh browser untuk melihat perubahan tampilannya.
BAB II
ELEMENT DALAM HTML
Written by Prothelord
Monday, 21 April 2008
Elemen HTML, apa tuh? Nah, dalam tutorial Belajar HTML yang lalu, kamu udah nyoba bikin
halaman HTML pertama kamu dan mengerti cara bikinnya. Berikutnya kamu harus mengerti
tentang 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.
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 >
- 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
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Ini halaman pertama saya. <b>Teks ini ditebalkan</b>
</body>
</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.
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.
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.
BAB III
DASAR-DASAR HTML
Dasar
HTML
Written by Prothelord
Saturday, 26 April 2008
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 <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 <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.
Ganti Baris
Tag <br> digunakan pada saat kamu pengen membuat baris baru, tapi belum ingin ganti paragraf. Tag
<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 penutup seperti misalnya
</br>, karena jadi ndak masuk akal. Ya tho?
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.
Atribut
HTML
Written by Prothelord
Thursday, 01 May 2008
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.
Contoh Atribut 1:
<h1> mendefinisikan awal sebuah judul.
Contoh Atribut 2:
<body> mendefinisikan badan/isi halaman HTML kita.
Contoh Atribut 3:
<table> mendefinisikan sebuah tabel HTML (nanti kita pelajari lebih lanjut).
<table border=”1”> memiliki tambahan informasi mengenai ketebalan garis pada tabel.
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.
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
Hasil
Penjelasan Nama Entitas Nomor Entitas
Spasi  
< Kurang dari < <
> Lebih dari > >
& Dan & &
" Tanda kutip " "
' Kutip tunggal ' (Ndak berlaku di IE) '
Nah, kamu udah belajar HTML cukup jauh saat ini. So, jangan lupa kembali lagi ke
Prothelon.com tempat di mana tutorial terbaik tersedia secara gratis.
Belajar HTML -
Link HTML
Written by Prothelord
Mudahnya gini. Sebuah link adalah sebuah alamat yang merujuk ke dokumen atau alamat lainnya di
Internet. Menurut saya sebenarnya konsep link inilah yang akhirnya benar-benar membuat web menjadi
sangat bermanfaat dan akhirnya menjadi sangat besar seperti sekarang ini.
Orang sangat mudah merujuk ke referensi lain yang semuanya tersedia online. Bener-bener jenius J.
Jadi, pelajari baik-baik ya…
Ndak usah pake contoh ya , kan udah banyak banget di Interner. Link ya tempat kamu main klak klik itu
lah.
Atribut href
Atribut href adalah alamat yang akan dibuka saat seseorang mengklik link yang kita buat.
Elemen <a> ini mendefinisikan sebuah link yang akan menuju ke sebuah web site yang saya kelola juga
yaitu kursus-online.com:
Kode tersebut akan ditampilkan seperti ini. Sok atuh dicoba klik biar kerasa. J
Pengen belajar bikin web sambil Praktek sekalian bisa dapet duit? Klik di sini aja!!
Atribut target
Atribut target sangat berguna bagi kita untuk mengatur halaman yang kita tuju itu akan dibuka di mana.
Kita bisa membukanya di halaman utama ini langsung atau membukanya di halaman baru saat seorang
pengunjung mengklik link yang kita sediakan.
Berbeda dengan kode sebelumnya yang membuka web site kursus-online.com di jendela yang sama,
kode ini akan membuka web site kursus-online.com pada sebuah jendela baru:
<a href="http://www.kursus-online.com/"
target="_blank"> Pengen belajar bikin web sambil Praktek sekalian bisa dapet
duit?.
Klik di sini aja!a>
Sok di klik link di bawah ini biar tahu bedanya:
Pengen belajar bikin web sambil Praktek sekalian bisa dapet duit? Klik di sini aja!!
Attribute name
Saat kita menggunakan atribut name, maka itu berarti kita mendefinisikan sebuah nama anchor yang
berada di dalam sebuah halan HTML.
Nama anchor tidak akan nampak di mata pengunjung. Itu hanya merupakan pendefinisian di sebuah
halaman web aja.
Cara membuat sebuah anchor:
<a name="label">Apapun</a>
<a href="#label">Apapun</a>
Contoh:
Sebuah anchor dalam dokumen HTML:
Sebuah link yang merujuk ke bagian paling atas dalam dokumen yang sama:
<a href="#top">
Kembali ke atas</a>
<a href="http://www.prothelon.com/mambo/contoh.htm#top">
Nah, kalau mau lihat bagaimana sebuah link anchor bekerja, klik di sini untuk menuju ke bagian paling
atas dari halaman ini.
Catatan penting dan tips yang pastinya akan berguna buat kamu
Ingat untuk selalu menambahkan garis miring di akhir sub folder link kita. Jika link kita bentuknya seperti
ini:
href="http://www.prothelon.com/mambo", maka kamu akan membuat 2 buah permintaan http ke
server, karena server akan menambahkan garis miring dan membuat alamat yang kita minta tadi menjadi
seperti ini: href="http://www.prothelon.com/mambo/"
Nah, dengan menambahkan garis miring di akhir sub folde, kita sudah menghemat resource di server.
Kamu bisa menggunakan Anchor untuk membuat daftar isi di awal sebuah dokumen yang panjang.
Kalau browser tidak bisa menemukan anchor yang kita tentukan, maka secara otomatis akan menuju ke
bagian paling atas dari dokumen. Tanpa error.