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:
<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.
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. Kamu juga bisa melihat daftar tutorial HTML apa saja yang ada di prothelon.com.
Check back soon for new tutorial.
40 Responses to “Belajar HTML”
Comment from prothelord
Time February 2, 2012 at 10:55 pm
Alhamdulilah, mudah-mudahan bermanfaat.
Comment from jefry lasik
Time February 12, 2012 at 2:10 am
gila,,ilmu semahal ini gratiiiissss,,tiada tara,,makasih bos,,mohon save and add email gw bos,,
Comment from saparuddin
Time February 16, 2012 at 6:37 am
makasi ya ts ilmu na mudah2 tuhan meberikan tambh ilu,trus kpad bapak/ibu
Comment from atok
Time February 23, 2012 at 4:41 am
maaf mas saya mau nanya itu notepadnya y9 biasa ap notped ++
Comment from prothelord
Time February 23, 2012 at 7:03 am
yg biasa ajah
Comment from herlani
Time March 9, 2012 at 11:38 am
dua kata ” TRIMAKASIH BANYAK “
Comment from ade martha
Time March 14, 2012 at 7:22 am
terimakasih Banyak prothelon.com
smoga bermanfaat semua ilmu yang di berikan ..
Comment from prothelord
Time March 14, 2012 at 1:41 pm
Amin…thanks juga to all for your support.
Comment from ian
Time March 18, 2012 at 12:16 pm
terima kasih prothelon.com,.. saya newbie, beruntung saya menemukan website ini. saya ingin belajar ilmu komputer khususnya mengenai website mengisi waktu luang saya. semoga website ini tetap eksis dan berkembang terus yah..
Comment from Wr7
Time March 18, 2012 at 5:00 pm
tolong bantu aku mas. gini ya cerita nya aku download template blog dari slah satu website. trus pas q intal kok posisi judul nya kok gitu. coba lihat deh di http://wr-share.blogspot.com trus saya otak atik g bisa. tolong benerin posisi judul nya menjadi normal mas. nih link tamplate nya http://www.blogger.com/html?blogID=1883495290880442940&action=download
Comment from Wr7
Time March 18, 2012 at 10:50 pm
maaf mas link download template di atas g bisa download disini aja http://www.mediafire.com/?hoh1mgn3et6haq4 tolong bantuin ya mas
Comment from prothelord
Time March 18, 2012 at 11:04 pm
Saya lihat judulnya normal2 aja.
Comment from bedung
Time March 20, 2012 at 6:38 am
makasih bang atas ilmuxa………
Comment from Andy Kupang
Time March 22, 2012 at 3:58 pm
Bapa raja e, beta sembah lu…!!
Ma kasih atas samua tutorial yang ada…!!
Comment from Farihatus
Time April 17, 2012 at 4:32 am
Bos sy mau kursus buat bikin Skripsi bisa g ? Harganya brp?
Skripsinya tentang :
1. Perancangan Sistem Program Bisnis.
2. Web Programing
3. Perancangan Sistem Pakar
4. Perancangan Animasi Interaktif
pilih salah satu bos.. Saya mau belajar dari “0″ dari awal pembuatan Sketsanya, Analisanya, Metode Pengembangannya sampai Programnya. Soalnya sy ingin bisa membuat sendiri tanpa beli.
Jadi Kena brp duit bos, sy lbh suka klo belajarnya Offline bos.
Tolong balas
Comment from prothelord
Time April 17, 2012 at 3:43 pm
Kebetulan saya tidak buka kursus offline berbasis proyek. Coba cari kursus offline di kota anda dan tanyakan apakah bisa memberikan kursus tersebut.
Comment from Naufal Nafhan
Time April 23, 2012 at 5:49 am
ilmunya sangat bermanfaat skali kang
makasih atas smua infonya 
Comment from ali habibi
Time April 24, 2012 at 1:57 pm
Buka Browser kamu (misalnya internet explorer). Kilk File, Open, Browse dan pilih cari file halamanku.htm yang tadi kamu bikin. Klik OK … ?
gan gw dah coba buat yang peratma itu.. trus pas mau buka kan dri tutor nya buka browser internet explorer ,kil file , open , tpii di browser gw gk da menu oopen , begitu di klik file gk da ntu menu open. gmna ntu gan prothelon . mohon pencerahan nya:((
Comment from prothelord
Time April 24, 2012 at 2:06 pm
pake IE berapa? Kalau pakai Firefox, bisa coba ketikkan c: di address, lalu masuk ke folder tempat kita simpan file.
Comment from Ahmad Sugita
Time April 26, 2012 at 10:26 am
Ass …
Maksih atas ilmunya. mudah-mudahan bermanfaat bagi semua……….insyaAllah saya akan coba……..wasalam
Comment from Ahmad Sugita
Time April 26, 2012 at 10:29 am
1 lagi boss ……..mohon dikirim ke imail saya tentang cara berbisnis diinternet yang lengkap…..thanks for all
Comment from zept87
Time May 10, 2012 at 8:25 pm
muanteb master,sangat bermanfaat ilmunya.
Ane pngen bgd belajar ilmu programer tapi sayang lagi2 musti pake perangkat canggih,ane browsing cm pke Opera mini 6,5java.
trima kasih atz ilmunya. 
Comment from novi
Time May 14, 2012 at 4:43 am
mas,..mau tnya niy kebetulan saya mau mencoba praktek membuat tabel di command line sesuai petunjuk di buku mas,.tp knpa ya? d command prompt nya tertulis “The system cannot find the path specified”,,,,
tu knpa ya mas,..? kebetulan saya jg ingin mendalami pemrograman web ini untuk tugas akhir saya,.mohon petunjuknya mas. terimakasih
Comment from prothelord
Time May 14, 2012 at 12:22 pm
Tolong email ke saya, alamatnya ada di buku. Sebutkan judul buku, halaman berapa yang sedang dipraktikkan dan OS yang digunakan. Tks.
Comment from salama
Time June 26, 2012 at 8:23 am
tanks, buat prothelon.com, anda telah memberikan ilmu yang sangat bermanfaat…
Comment from smpitalalwipurwodadi
Time July 8, 2012 at 4:39 pm
maksih z bang..
ijin kopas… maap ni milik blog gue masih jelek dan newbey bang..
http://smpital-alawipurwodadi.blogspot.com/
join my blog z bang….
tolong kasih kritik dan sarannya z bang…
Comment from anG
Time July 10, 2012 at 10:57 am
waduuuh… knpa bru skrg sya temukan web tutorial selugas ini ya… thanks very much suhu… thanks… mohon bimbinganx…
Comment from Agus Salim
Time July 17, 2012 at 10:43 am
Insya Allah bermanfaat dan jadi amal
Comment from kaka
Time July 24, 2012 at 2:57 am
makasih banyak…^^
Comment from Advertising dan Huruf Timbul Semarang
Time July 31, 2012 at 5:53 am
mas ijin copas tapi hanya saya gunakan untuk pribadi saja kok.
trims
Comment from avrielliansah
Time August 1, 2012 at 2:06 pm
saya sekolah mengambil jurusan RPL yang mmpelajari tentang PHP,HTML,java,turbo pascal,java scrip,dll..tapi tetep aja ga bisa2 ,,,huff,,
Comment from Amin
Time August 11, 2012 at 1:52 am
Than’k infone ….
Comment from endro dwi cahyono
Time August 13, 2012 at 1:17 pm
””””””””’jempol untuk””””””””””” prothelhon…………………. RAKYAT INDONESIA HARUS BEBAS DARI BUTA KOMPUTER………………. INDONESIA NEGARA BESAR DAN CERDAS……….. KITA HARUS BANGKIT LAWAN NEGARA MAJU,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,JAYALAH PEMUDA PEMUDI INDONESIA………………..
Comment from infofashionable
Time August 16, 2012 at 12:18 pm
mantaf dan pertamak dech buat agant…
ane lagi coba2 nich lumayan pusing hee
Comment from bloodybolank
Time June 14, 2013 at 2:25 am
cakeeeeeep ..om kalo misalnya mau belajar langsung lewat om nya bisa ga biar lebih wawasannya gitu apalagi saya Buta IT … apa bisa ?
kalo bisa tolong kirim lewat email saya om beserta persyaratanya ke irsan_sugian@yahoo.com
thx sblmnya om
Write a comment
You need to login to post comments!
Comment from xi swan
Time February 2, 2012 at 5:22 am
makasih z ,berkat penjelasannya yg simple,lugas n + disur h praktik sendiri, aku jadi mudeng deh moga level selanjutnya + mudeng hehehe makasih gan