Belajar HTML
-
Upload
syaifuddin-zuhri -
Category
Documents
-
view
10 -
download
0
Transcript of Belajar HTML
Belajar HTML - Tutorial HTML 1 Saturday, 19 April 2008 22:23 Prothelord
Belajar HTML gratis, mudah dan menyenangkan di prothelon.com aja. Nah kita mulai ya.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 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. Pengen belajar sambil praktek? klik di sini.
Siap? OK, kita akan mulai belajar HTML.Pengenalan HTMLApa 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:
Judul Halaman
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 adalah judul dokumen kamu. Judul ini akan ditampilkan di caption browser (lihat di bagian paling atas kanan dari browser kamu).
Teks di antara tag adalah teks yang akan ditampilkan pada jendela browser kamu.
Dan terakhir, teks di antara dan 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.
Elemen HTML - Tutorial HTML 2 Tuesday, 22 April 2008 04:47 Prothelord
HYPERLINK "http://prothelon.com/caramembuatwebsite/index.php?view=article&catid=54%3Anew-to-joomla&id=150%3Ascript-php-membuat-angka-acak-random&tmpl=component&print=1&layout=default&page=&option=com_content&Itemid=54" \o "Print"
HYPERLINK "http://prothelon.com/caramembuatwebsite/tutorial-html/elemen-html-tutorial-html-2.pdf" \o "PDF"
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 >
Karakter penanda itu disebut dengan tanda kurung siku
Tag HTML umumnya selalu berpasangan seperti dan
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, memiliki arti yang
sama dengan Elemen HTMLIngat contoh HTML di tutorial sebelumnya
kan:Judul HalamanIni halaman pertama saya. Teks ini ditebalkanIni
adalah elemen HTML:Teks ini ditebalkanElemen HTML ini dimulai
dengan tag pembuka: Isi dari elemen HTML adalah: Teks ini
ditebalkanElemen 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 ditebalkanElemen 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.Berikutnya, kita akan membahas tentang dasar HTML terutama
beberapa TAG menarik untuk mengubah tampilan paragraf, judul,
dll.Dasar HTML Sunday, 27 April 2008 01:30 Prothelord HYPERLINK
"http://prothelon.com/caramembuatwebsite/index.php?view=article&catid=54%3Anew-to-joomla&id=149%3Ascript-php-membuat-angka-acak-random&tmpl=component&print=1&layout=default&page=&option=com_content"
\o "Print" HYPERLINK
"http://prothelon.com/caramembuatwebsite/tutorial-html/dasar-html.pdf"
\o "PDF" 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.JudulJudul
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 JudulIni JudulIni JudulIni JudulIni JudulIni JudulHTML
secara otomatis akan menambahkan baris kosong sebelum dan sesudah
judul.ParagrafParagraf didefinisikan dengan menggunakan tag .Ini
adalah sebuah paragrafIni paragraf lainnyaSama seperti judul, HTML
secara otomatis akan menambahkan baris kosong sebelum dan sesudah
paragraf.Jangan lupa Tag penutupKamu pastinya udah pernah ngeliat
bahwa paragraf dapat ditulis tanpa tag penutup kayak ginii:Ini
adalah sebuah paragrafIni paragraf lainContoh 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 BarisTag
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
HTMLTag 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 tag
penutupBeberapa Tips Yang BermanfaatWaktu 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 DasarBerikut 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
komentarAsik 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 Thursday, 01 May 2008 19:26 Prothelord HYPERLINK
"http://prothelon.com/caramembuatwebsite/index.php?view=article&catid=54%3Anew-to-joomla&id=140%3Ascript-php-membuat-angka-acak-random&tmpl=component&print=1&layout=default&page=&option=com_content"
\o "Print" HYPERLINK
"http://prothelon.com/caramembuatwebsite/tutorial-html/atribut-html.pdf"
\o "PDF" 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 HTMLTag 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
AtributNilai 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 kamu bisa gunakan tanda kutip
tunggal.Contohnya kayak gini:nama=Uzumaki Jurus Seribu Bayangan
NarutoOk.Selamat mencoba atribut tag HTML.Belajar HTML - Entitas
karakter HTML Sunday, 11 May 2008 03:34 Prothelord HYPERLINK
"http://prothelon.com/caramembuatwebsite/index.php?view=article&catid=54%3Anew-to-joomla&id=141%3Ascript-php-membuat-angka-acak-random&tmpl=component&print=1&layout=default&page=&option=com_content"
\o "Print" HYPERLINK
"http://prothelon.com/caramembuatwebsite/tutorial-html/belajar-html-entitas-karakter-html.pdf"
\o "PDF" Setelah sebelumnya kita sudah belajar tentang atribut
HTML, sekarang kita akan be lajar cara menampilkan karakter khusus
dalam HTML.Beberapa karakter khusus seperti karakter