Anda di halaman 1dari 26

Belajar HTML - Tutorial

HTML 1
Written by Prothelord   
Saturday, 19 April 2008

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 HTML

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 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 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.
Ok, tutorial belajar HTML sesi perkenalan cukup, kita akan melanjutkan ke level berikutnya
tentang elemen HTML.
Check back soon for new tutorial.

Pengen belajar sambil praktek? klik di sini.

Cara Mudah Belajar Membuat Website! (Highly recommended)


Khusus pemula, lengkap, praktis, terstruktur & langsung praktek.
RIBUAN peserta sudah merasakan manfaatnya. Sok atuh di klik, siapa tau cocok...
KLIK DI SINI

Bisnis Pulsa Elektrik Paling Menguntungkan!


TANPA BIAYA REGISTRASI apa pun ( Gratis / FREE !)
Jadikan HP Anda sebagai "aset" yang membanjiri rekening Anda
Dapatkan! Bonus Rp 275 Juta
Plus! Pasif income Rp 2 Milyar / bulan !!!
KLIK DI SINI

Mudah-mudahan bermanfaat.
Salam hangat.
Prothelord
Elemen HTML - Tutorial
HTML 2
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

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 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.

Cara Mudah Belajar Membuat Website! (Highly recommended)


Khusus pemula, lengkap, praktis, terstruktur & langsung praktek.
RIBUAN peserta sudah merasakan manfaatnya. Sok atuh di klik, siapa tau cocok...
KLIK DI SINI

Bisnis Pulsa Elektrik Paling Menguntungkan!


TANPA BIAYA REGISTRASI apa pun ( Gratis / FREE !)
Jadikan HP Anda sebagai "aset" yang membanjiri rekening Anda
Dapatkan! Bonus Rp 275 Juta
Plus! Pasif income Rp 2 Milyar / bulan !!!
KLIK DI SINI

Mudah-mudahan bermanfaat.
Salam hangat.
Prothelord
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.

Jangan lupa Tag penutup


Kamu pastinya udah pernah ngeliat bahwa paragraf dapat ditulis tanpa tag penutup </p> kayak
ginii:
<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 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 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?

<br> atau <br />


Kamu akan makin sering melihat penulisan tag <br> dengan cara begini: <br />
Karena tag <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.
<!-- 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 teg 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


Berikut 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
<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

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.

Semoga bermanfaat.

Salam hangat

Prothelord.
Cara Mudah Belajar Membuat Website! (Highly recommended)
Khusus pemula, lengkap, praktis, terstruktur & langsung praktek.
RIBUAN peserta sudah merasakan manfaatnya. Sok atuh di klik, siapa tau cocok...
KLIK DI SINI

Bisnis Pulsa Elektrik Paling Menguntungkan!


TANPA BIAYA REGISTRASI apa pun ( Gratis / FREE !)
Jadikan HP Anda sebagai "aset" yang membanjiri rekening Anda
Dapatkan! Bonus Rp 275 Juta
Plus! Pasif income Rp 2 Milyar / bulan !!!
KLIK DI SINI
Mudah-mudahan bermanfaat.
Salam hangat.
Prothelord
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.

Atribut Tag HTML


Tag 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:
<h1> mendefinisikan awal sebuah judul.

<h1 align=”center”> memiliki informasi tambahan tentang perataan baris.

Contoh Atribut 2:
<body> mendefinisikan badan/isi halaman HTML kita.

<body bgcolor=”red”> akan membuat background layar menjadi merah.

Contoh Atribut 3:
<table> mendefinisikan sebuah tabel HTML (nanti kita pelajari lebih lanjut).

<table border=”1”> memiliki tambahan informasi mengenai ketebalan garis pada tabel.

Selalu Gunakan Tanda Kutip pada Nilai Atribut


Nilai 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 kamub bisa gunakan tanda kutip tunggal.

Contohnya kayak gini:

nama=’Uzumaki “Jurus Seribu Bayangan” Naruto’


Ok.

Selamat mencoba atribut tag HTML.

Cara Mudah Belajar Membuat Website! (Highly recommended)


Khusus pemula, lengkap, praktis, terstruktur & langsung praktek.
RIBUAN peserta sudah merasakan manfaatnya. Sok atuh di klik, siapa tau cocok...
KLIK DI SINI

Bisnis Pulsa Elektrik Paling Menguntungkan!


TANPA BIAYA REGISTRASI apa pun ( Gratis / FREE !)
Jadikan HP Anda sebagai "aset" yang membanjiri rekening Anda
Dapatkan! Bonus Rp 275 Juta
Plus! Pasif income Rp 2 Milyar / bulan !!!
KLIK DI SINI

Mudah-mudahan bermanfaat.
Salam hangat.
Prothelord
Belajar HTML - Entitas
karakter HTML
Written by Prothelord   
Saturday, 10 May 2008
Setelah sebelumnya kita sudah belajar tentang atribut HTML, sekarang kita akan belajar cara
menampilkan karakter khusus dalam HTML.
Beberapa karakter khusus seperti karakter <, punya arti khusus dalam HTML (sebagai tanda tag
HTML), karena itu kamu tidak akan bisa menggunakannya sebagai teks dalam arti dituliskan
langsung sebagai < dalam kode HTML kamu.
Untuk menampilkan tanda lebih kecil (<) dalam HTML, kamu perlu belajar tentang Entitas
Karakter HTML.

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 :
&lt; atau &#60;
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 &nbsp;

Beberapa entitas karakter yang sering dipakai:


Hasil
Penjelasan Nama Entitas Nomor Entitas
  Spasi &nbsp; &#160;
< Kurang dari &lt; &#60;
> Lebih dari &gt; &#62;
& Dan &amp; &#38;
" Tanda kutip &quot; &#34;
' Kutip tunggal &apos; (Ndak berlaku di IE) &#39;

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.

Kalau udah menguasai HTML dengan cukup baik, saya sarankan kamu mulai belajar PHP, bisa
yang gratis atau yang lebih canggih lengkap dengan tempat praktek online.

Semoga bermanfaat.

Salam hangat.

Prothelord
Cara Mudah Belajar Membuat Website! (Highly recommended)
Khusus pemula, lengkap, praktis, terstruktur & langsung praktek.
RIBUAN peserta sudah merasakan manfaatnya. Sok atuh di klik, siapa tau cocok...
KLIK DI SINI

Bisnis Pulsa Elektrik Paling Menguntungkan!


TANPA BIAYA REGISTRASI apa pun ( Gratis / FREE !)
Jadikan HP Anda sebagai "aset" yang membanjiri rekening Anda
Dapatkan! Bonus Rp 275 Juta
Plus! Pasif income Rp 2 Milyar / bulan !!!
KLIK DI SINI

Mudah-mudahan bermanfaat.
Salam hangat.
Prothelord
Belajar HTML -
Link HTML

Written by Prothelord   

Sunday, 11 January 2009

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.

Hyperlinks, Anchors, dan Links


Dalam istilah web, hyperlink adalah referensi (sebuah alamat) ke sumber-sumber informasi lain di
Internet.
Hyperlink biasanya merujuk ke sebuah halaman HTML, sebuah gambar, file suara, movie, dll.
Sedangkan anchor (bahasa Indonesianya Jangkar) adalah istilah yang digunakan untuk mendefinisikan
tujuan hyperlink dalam sebuah dokumen.
Jadi gini, alamat halamannya ditunjukkan oleh hyperlink, sedangkan kalau di dalam dokumen itu ada bab
2, maka kita bisa langsung merujuk ke bab2 tadi dengan bantuan anchor.
Untuk membuat hyperlink dan anchor kita menggunakan elemen HTML anchor <a>.
Dalam tutorial kali ini, kita akan menggunakan istilah link HTML saat elemen <a> merujuk ke sebuah
halaman dan istilah anchor HTML saat element <a> tersebut merujuk ke sebuah alamat di dalam
dokumen.

Bikin Link HTML


Sintaks Link: 

<a href="url">Teks Link</a>

Tag pembuka berisi atribut link tersebut.


Isi elemen (Teks link) mendefinisikan apa yang ingin anda tampilkan ke pengunjung
Catatan: Isi elemen tidak harus berupa teks lho. Kamu juga bisa me-link dari sebuah gambar atau elemen
HTML lainnya.
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:

<a href="http://www.kursus-online.com/">Pengen belajar bikin web sambil


Praktek sekalian bisa dapet duit?. Klik di sini aja!</a>

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>

Nah, link yang menuju ke halaman itu bikinnya gini: 

<a href="#label">Apapun</a>

Perhatikan tanda # yang mendefinisikan nama anchor

Contoh:
Sebuah anchor dalam dokumen HTML:

<a name="top">Ini bagian paling atas</a>

Sebuah link yang merujuk ke bagian paling atas dalam dokumen yang sama: 

<a href="#top">

Kembali ke atas</a>

Sebuah link yang menuju ke sebuah anchor di halaman web lain:

<a href="http://www.prothelon.com/mambo/contoh.htm#top">

Kembali ke halaman utama paling atas</a>

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.

 
Nah, itu adalah materi belajar HTML mengenai link. Jika ingin mempelajari tutorial lainnya, silahkan klik
link Tutorial Programming di menu utama sebelah kiri. Atau klik aja di sini.

Kalau bosen belajar cuman baca doang kaya gini, coba aja ke kursus-online.com. Di sana kamu bisa dapet
materi yang sangat lengkap tentang bikin web, bisa belajar langsung praktek dengan metode 4 langkah
mudah bisa bikin web, plus ada peluang belajar sambil dapet penghasilan tambahan.

Salam hangat.
Prothelord.

 
Cara Mudah Belajar Membuat Website! (Highly recommended)
Khusus pemula, lengkap, praktis, terstruktur & langsung praktek.
RIBUAN peserta sudah merasakan manfaatnya. Sok atuh di klik, siapa tau cocok...
KLIK DI SINI

Bisnis Pulsa Elektrik Paling Menguntungkan!


TANPA BIAYA REGISTRASI apa pun ( Gratis / FREE !)
Jadikan HP Anda sebagai "aset" yang membanjiri rekening Anda
Dapatkan! Bonus Rp 275 Juta
Plus! Pasif income Rp 2 Milyar / bulan !!!
KLIK DI SINI

Mudah-mudahan bermanfaat.
Salam hangat.
Prothelord
Belajar HTML - Mengubah
Tampilan Teks
Written by Prothelord   
Saturday, 01 May 2010
Buat kamu yang baru belajar HTML, mungkin penasaran bagaimana cara mengubah huruf
menjadi tebal atau membuatnya menjadi miring. Tampilan huruf seperti ini sangat penting untuk
dilakukan, mislanya pada saat kita perlu memberikan penekanan pada kata-kata tertentu yang kita
anggap penting, pada umumnya kita menggunakan huruf tebal, atau pada saat menggunakan
istilah asing, maka kita perlu membuatnya menjadi miring (atau istilah lainnya italic). Jika iya,
maka tutorial HTML kali ini pas banget buat kamu. Gampang kok untuk mengubah tampilan
huruf seperti itu.

Seperti yang sudah kamu ketahui dari tutorial elemen HTML ini, kamu pastinya udah tahu kalau
HTML menggunakan tag untuk semua perintah yang dilakukannya. Nah, untuk mengubah
tampilan dan format teks, HTML juga menggunakan tag-tag seperti <b> (untuk menebalkan
huruf) dan <i> (untuk menampilkan huruf miring) untuk menampilkan teks atau huruf sesuai
dengan kebutuhan kita.

Berikut beberapa tag untuk mengubah tampilan huruf yang sering digunakan:

 Tag Deskripsi 
 <b> Menebalkan huruf 
 <i> Menampilkan huruf miring 
 <big> Menampilkan huruf dalam ukuran besar 
 <small> Menampilkan huruf dalam ukuran kecil 
 <strong> Mirip dengan <b>, menampilkan dengan tebal 
 <sub> Subscript (Tulisan kecil di bawah, misalnya untuk menulis rumus kimia)
Superscript
 <sup> (Yang ini kecil di atas, misalnya menulis kuadrat) 
 <u> Menulis huruf bergaris bawah. 

Mudah-mudahan bermanfaat.
Salam hangat.
Prothelord
Dasar-dasar VB 1: Apa itu VB
(Visual Basic)?
Written by Prothelord   
Sunday, 24 February 2008
Belajar Visual Basic di prothelon.com saja, seperti biasa dengan bahasa yang mudah dipahami.

Seperti juga PHP, Visual basic adalah sebuah bahasa pemrograman yang mudah dipelajari dan
tutorial ini akan mengantarkan anda untuk memasuki dunia VB dengan enjoy.

Dengan Visual basic, kamu bisa ngembangin aplikasi dan game-game berbasis Windows. Visual
Basic jauh lebih mudah dipelajari dibandingkan bahasa pemrograman lainnya (seperti Visual C+
+) namun tetap merupakan bahasa pemrograman yang sangat powerful.

Tertarik? Baca aja tutorial ini lebih lanjut.

Visual basic lebih cocok untuk pengembangan aplikasi dibandingkan pengembangan game.
Kamu bisa aja membuat game yang menakjubkan menggunakan Visual basic, tetapi jika kamu
ingin membuat game profesional yang lebih canggih seperti Quake 2, maka kamu mungkin lebih
baik memilih untuk menggunakan bahasa lain (seperti C++), yang tentunya akan jauh lebih sulit
untuk digunakan.

Namun demikian, Visual basic sebenarnya sudah sangat memadai untuk memenuhi hampir
semua kebutuhan pemrograman aplikasi dangame yang kamu inginkan.

Keuntungan Visual basic:

-          Bahasa yang sederhana. Banyak hal yang mungkin sulit dilakukan jikak kita menggunakan
bahasa pemrograman lainnya, akan dapat dilakukan dengan mudah dengan menggunakan Visual
basic.

-          Karena Visual basic sangat populer, maka sangat banyak sumber-sumber yang dapat kamu
gunakan untuk belajar dan mengembangkan kemampuan kau baik berupa buku, web site dll
(tentu saja salah satunya adalah http://prothelon.com J). Dengan banyaknya sumber-sumber
tersebut, maka tentu saja kamu akan sangat mudah menemukan jawaban atas persoalan yang
kamu hadapi kan?

-          Kamu bisa memperoleh banyak tools baik gratis maupun tidak di Internet yang akan
sangat membantu menghemat waktu kamu dalam pemrograman. Contoh, jika kamu ingin
membuat program untuk melakukan ping ke salah satu komputer di jaringan kamu, alih-alih
membuat program ping tersebut sendiri, kamu bisa donlot sebuah kontrol yang melakukan hal
tersebut dan menempelkannya di program kamu. Jika dibandingkan dengan bahasa lain, Visual
basic memiliki variasi tools yang paling luas lho.

Kekurangan Visual basic:


-          Visual Basic adalah bahasa pemrograman yang powerful, tetapi sebenarnya tidak terlalu
bagus untuk membuat game-game yang benar-benar memuaskan.

-          Lebih lambat dibandingkan bahasa pemrograman lain.

Pengen belajar sambil praktek? klik di sini.

Next: Bikin program Visual Basic pertama kamu


Dasar-dasar VB 2: Program Visual Basic
Pertama Kamu
Written by Prothelord   
Thursday, 20 March 2008
Proses belajar VB kamu akan dimulai dengan cara membuat program pertama kamu. Nah,
sebelumnya kamu perlu tahu dulu, interface VB yang akan kamu hadapi.

Ok, sekarang kita akan mulai. Sebagai catatan, semua gambar dalam tutorial ini diambil dari
Visual basic versi 6.0. Namun demikian, ndak perlu khawatir, karena versi lainnya tidak jauh
berbeda kok.

Saat kamu memulai program Visual basic, maka hal pertama yang akan mau lihat adalah layar
ini:

Di sini, kamu harus memilih jenis program yang akan kamu bikin. Sebagai awalnya, kita akan
membuat sebuah program sederhana, untuk itu pilihlah Standar EXE, dan klik tombol Open.
(Kalau gambar di atas bukan gambar pertama yang kamu lihat, pilihlah File à New Project dari
menu Visual basic seperti pada gambar di bawah ini).

Setelah kamu mengklik tombol open, kamu akan melihat layar utama tempat kamu akan
menghabiskan sebagian besar waktu kamu dalam membuat program Visual Basic ini. Dalam
proses Belajar VB ini, kamu akan banyak bertemu dengannya.
 

Ok, berikutnya kita akan melanjutkan proses belajar VB ini dengan melihat lebih lanjut proses
membuat program sederhana kamu yang pertama
Belajar PHP,Cara Membuat website,Belajar HTML,MySQL khusus pemula, mudah & lengkap
The News - Berita Terbaru
Saturday, 05 August 2006
Belajar PHP, membuat PHP, cara membuat Website, belajar HTML, belajar MySQL & belajar
komputer khusus pemula, gratis, mudah & lengkap dengan tutorial PHP, tutorial HTML,
MySQL, cara membuat website dan komputer online khas Prothelord yang mudah dimengerti
dari dasar hingga lanjut, plus tips-tips belajar bahasa Inggris dan artikel-artikel ringan menarik
lainnya bisa kamu dapat di sini.  

Prothelord
Nama saya Prothelord, dan siap untuk menjadi partner anda untuk belajar PHP, cara membuat
website, MySQL, Web Desain dan bahasa secara online.

Jika kamu baru mulai belajar cara membuat website, silahkan pelajari tutorial yang ada di
sini dimulai dengan belajar HTML lalu belajar PHP dan terakhir belajar MySQL, sebagai
tambahan kamu juga bisa belajar komputer, belajar jaringan komputer dan bahkan bisnis
internet di sini (kamu bisa langsung klik pada kata-kata yang saya garis bawahi dalam kalimat ini
untuk menuju ke tutorial yang bersangkutan).

Oh ya, kalau kamu suka dengan prothelon.com dan berminat untuk memberikan kontribusi buat
prothelon.com serta bantuin orang lain belajar, silakan lakukan salah satu hal berikut:

Pasang link ke prothelon.com dengan judul "Belajar PHP, HTML, MySQL, cara membuat
website, VB, Komputer dan Bahasa" biar makin banyak orang yang bisa belajar dari situs ini
melalui web site atau blog kamu. Ndak punya web site/blog? Gunakan milis atau e-mail.
Gampang kan? Copy paste aja kode ini ke web site, blog atau email kamu: <a
href='http://prothelon.com'>Belajar PHP, cara membuat website, HTML, MySQL, VB,
Komputer dan Bahasa</a>

atau 

mengikuti kursus online 4 langkah mudah belajar membuat website ini

atau

membeli buku Cara Mudah Membuat Desain Web ini.

atau

paling GUAMPIIING ... dengan mengklik "suka" di facebook sebelah kanan.


Kalau kamu ingin memberikan masukan maupun menginginkan tutorial sebagai bahan
untuk belajar PHP (maksudnya belajar script PHP) atau MySQL dengan topik tertentu,
kamu bisa mengirimkan via e-mail. Silahkan daftar (jangan kuatir daftar ndak mbayar)
untuk memperoleh informasi terbaru dari kami. Bagi yang ingin menyumbang tulisan plz
welcome.

Situs ini di update setiap minggu, silahkan kembali lagi untuk melihat artikel baru. Jika
anda mencari tempat untuk berbagi pengalaman dan pengetahuan mengenai cara
membuat website, desain situs web, belajar PHP (script PHP), MySQL dan belajar bahasa
secara online, anda berada pada tempat yang tepat karena situs ini didedikasikan untuk
anda. Jika anda tertarik untuk belajar PHP (script PHP), MySQL dengan mudah, silahkan
klik menu tutorial di samping kiri. Jika anda belum menemukan tutorial yang anda
inginkan atau sekedar  mau diskusi, silahkan gunakan Forum Diskusi atau kontak kami via
e-mail untuk request tutorial keinginan anda pada kami. 

Pengen belajar sambil praktek? klik di sini.

Kalau sempat, tolong diisi pooling di samping kanan yach, makasih

Anda mungkin juga menyukai