DAFTAR
TUTORIAL HTML
1. Belajar HTML, dalam
tutorial HTML ini kamu akan mempelajari alasan mempelajari HTML, apa
hubungannya dengan PHP, MySQL dan berbagai hal menarik lain yang terkait proses
belajar HTML kamu.
2. Elemen HTML,
membahas tentang bagian-bagian apa yang ada dalam sebuah dokumen HTML. Anda
juga akan mendapatkan tutorial HTML tentang pengenalan tag HTML.
3. Tag HTML,
tutorial HTML ini membahas detil beberapa tag HTML dasar yang sering digunakan
seperti judul, paragraf, cara membuat baris baru, dll.
4. Atribut HTML,
yang akan menjelaskan penggunaan tag HTML yang lebih komplek. Dalam tutorial
HTML ini kamu akan mempelajari cara menambahkan atribut dalam tag HTML kamu.
Contohnya, kita bisa membuat judul yang berada di tengah dengan menambahkan
atribut align=center.
5. Entitas
Karakter HTML, tutorial HTML ini agak sulit saya
jelaskan secara singkat, tetapi contohnya adalah bagaimana menuliskan beberapa
spasi secara berurutan. Ya, kita tidak bisa begitu saja menuliskan spasi
berurutan secara langsung dengan HTML, ada triknya he he he…
6. Link HTML,
menurut saya, tutorial HTML ini adalah bagian yang paling penting saat kamu
belajar HTML karena merupakan fondasi utama yang membuat web menjadi layanan
paling bermanfaat di internet. Pokonya jenius. Penasaran apa alasannya? Silakan
baca sendiri.
7. Paragraf HTML,
tutorial ini akan membahas lebih dalam tentang tag <p> yang kita gunakan
untuk membuat paragraf rata kiri, dll.
8. Mengubah
Tampilan Teks HTML, membahas berbagai
teknik untuk memanipulasi huruf teks, membuatnya lebih tebal, miring, mengubah
ukuran, dll. Asik deh.
9. List
HTML, dalam tutorial HTML ini, kita akan
mencoba membuat daftar atau list HTML. Contohnya? Ya seperti daftar isi yang
lagi kamu baca ini. Kita akan belajar apa saja jenis list HTML yang ada.
10. Ordered
List HTML, tutorial HTML yang membahas cara
membuat daftar atau list bernomor, seperti daftar isi ini.
12. Review Tutorial HTML,
tutorial ini akan mereview semua materi HTML yang sudah kita pelajari tadi.
13. Daftar Warna pada HTML,
tutorial HTML tentang warna apa saja yang bisa kamu gunakan saat membuat
dokumen HTML.
14. Belajar Membuat
Tabel HTML, well, tutorial HTML ini sangat banyak
ditanyakan oleh pengunjung prothelon.com. Kamu akan sering memerlukan tabel ini
pada saat desain web, membuat daftar, membuat perbandingan, dll.
15. Belajar Tabel
HTML Spanning, hmmm… tutorial HTML ini akan
membahas lebih detil tentang tabel HTML terutama tentang bagaimana
menggabungkan beberapa kolom atau baris.
17. Belajar HTML 5,
Yang ini tentu saja akan membahas teknologi atau versi terbaru dari HTML yaitu
HTML 5.
18. Belajar HTML
tanpa Belajar PHP, tutorial ini akan
menjawab pertanyaan yang sering dilontarkan pengunjung prothelon.com misalnya
apakah bisa kita membuat website tanpa mempelajari PHP?
Mari kita jelaskan satu-persatu Tutorial tersebut :
|Belajar
HTML|
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.
- 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.
|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?
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. 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.
|
1
|
<!-- 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 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
setelah saya explore lebih dalam lagi dengan bahasa pemograman php.
Ternyata saya dapat mengetahui bahwa php merupakan bahasa pemograman web
yang sangat interaktif. dapat kita buat sesuai kebutuhan kita.