Anda di halaman 1dari 16

Belajar HTML - Tutorial HTML 1

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 :). 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, 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 <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.
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
<h2>Ini
<h3>Ini
<h4>Ini
<h5>Ini
<h6>Ini

Judul</h1>
Judul</h2>
Judul</h3>
Judul</h4>
Judul</h5>
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. Versiversi 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 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

Berikut adalah tag-tag penting yang akan sangat sering kamu pakai. Dan kamu akan mempelajari masingmasing 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.
ATRIBUT HTML
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 kamu bisa gunakan tanda kutip tunggal.
Contohnya kayak gini:
nama=Uzumaki Jurus Seribu Bayangan Naruto
Ok.
Selamat mencoba atribut tag HTML.
ENTITAS KARAKTER HTML
Setelah sebelumnya kita sudah belajar tentang atribut HTML, sekarang kita akan be lajar 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;

"

Tanda kutip

&quot;

&#34;

'

Kutip tunggal

&apos; (Ndak berlaku di IE)

&#39;

&

Dan

&amp;

&#38;

Beberapa komentar yang ada meminta agar tutorial ini ditambah dengan contoh agar lebih jelas. Nah,
berikut ini contoh untuk memperjelas tentang apa yang dimaksud dengan entitas karakter.
Kasusnya sangat mudah kok. Kita kan udah tahu, kalau yang namanya HTML itu menggunakan tag, iya
kan? Salah satu contoh adalah tag <b> </b>untuk menebalkan huruf.
Sekarang bayangkan kalau suatu ketika kamu diminta untuk menulis tutorial tentang HTML dan
kebetulan akan menulis tentang tag HTML yang berfungsi untuk menebelkan huruf. Misalnya kamu
pengen baris berikut tampil di tutorial kamu (perhatikan, kamu ingin agar tag <b> dan </b> muncul
dalam baris tersebut).
Untuk menebalkan huruf seperti kata tebal ini, kamu memerlukan tag <b> dan </b>
Nah, coba pikirkan, bagaimana menuliskan bari sederhana ini tanpa entitas karakter. Ndak bisa kan?
Misalnya kamu menulis seperti ini:
Untuk menebalkan huruf seperti kata <b>tebal</b> ini,
kamu memerlukan tag <b> dan </b>

Apa yang terjadi? Browser akan menampilkan kalimat berikut:

Untuk menebalkan huruf seperti kata tebal ini, kamu memerlukan tag dan
Apa bedanya? Ya...tag <b> dan </b> tidak muncul, sebagai gantinya, kata dan akan tampil dalam huruf
tebal.
Untuk membuat agar tag <b> dan </b> dapat muncul, kamu memerlukan entitas karakter, sehingga kamu
harus menuliskan kode HTML menjadi seperti ini:
Untuk menebalkan huruf seperti kata <b>tebal</b> ini,
kamu memerlukan tag &lt;b&gt; dan &lt;/b&gt;
Perhatikan, tanda < saya ganti dengan entitas karakter &lt;, sedangkan tanda > saya ganti dengan &gt;.
Lhah ... nambah lagi tuh pertanyaan di komentar. Gini pertanyaannya, terus gimana dunks cara kita
menampilkan &gt; biar yang keluar bukan >.
Mudah aja, kita bisa gunakan &amp di depannya untuk meng-escape tanda & sehingga kamu bisa tulis
seperti ini &amp; &gt; (tanpa spasi di antara &amp; dan &gt;. Saya terpaksa menuliskan menggunakan
spasi, karena tidak mungkin saya tuliskan tanpa spasi.)
Gampang kan? Ok, mudah-mudahan contoh ini bisa meningkatkan pemahaman kamu tentang apa yang
dimaksud dengan entitas karakter ini.
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.
LINK HTML
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. Benerbener jenius :).
Jadi, pelajari baik-baik ya
Ndak usah pake contoh ya , kan udah banyak banget di Internet. 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 bab 2 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="/caramembuatwebsite/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. :)
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 halaman 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 folder, 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.
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.

PARAGRAF
Menulis dokumen apapun pasti memerlukan paragraf. Mari kita lihat tag HTML yang digunakan untuk
membuat sebuah paragraf yaitu tag

Kita menggunakan tag <p> untuk membuat sebuah paragraf baru.


Saat kita menggunakan tag ini, dia akan menambahkan sebuah baris kosong di atas dan di bawah teks
paragraf yang kita tulis. Baris-baris kosong tersebut adalah baris yang menandakan sebuah paragraf dan
memisahkan paragraf tersebut dari paragraf-paragraf yang lainnya.
Dan...tentu saja kita harus menutup paragraf kita dangan pasangannya yaitu tag </p>.
Contoh kode HTML:

<p>Ini adalah sebuah contoh paragraf yang panjang dan menarik,


sehingga kalimat ini tidak ada isinya sama sekali. <p>

Kamu juga bisa melakukan proses perataan pada paragraf yang kamu bikin. Hal ini sangat mudah
dilakukan, yaitu dengan menambahkan atribut HTML align.
Contoh tag di bawah ini akan membuat paragraf kamu rata kiri kanan.

<p align="justify">Ini adalah paragraf yang rata kanan dan rata kiri.</p>

Kamu bisa ganti-ganti isi atribut align tersebut dengan kata center untuk membuat paragraf menjadi di
tengah, left rata kiri, dan right untuk rata kanan.
Suka? Tolong kasih tahu ke temen-temen kamu ya :) Gampang kok, tinggal klik tombol SHARE berikut
ini dan login ke facebook atau twitter kamu. Thanks.
MENGUBAH TAMPILAN TEKS
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

<sup>

Superscript

(Tulisan kecil di bawah, misalnya untuk menulis rumus kimia)


(Yang ini kecil di atas, misalnya menulis kuadrat)

<u>

Menulis huruf bergaris bawah.

Bagaimana contoh pemakaiannya? Berikut ini contoh untuk menampilkan tulisan tebal dan miring:
<b><i>Tulisan ini tebal dan miring</i></b>

Mudah bukan? Selamat mencoba.


MEMBUAT DAFTAR
Dalam tutorial belajar program HTML kali ini, kita akan mencoba membuat daftar. Apa itu daftar? Gini...
pada saat kamu menggunakan ms-word untuk membuat sebuah dokumen, maka kemungkinan besar kamu
akan membuat sebuah daftar atau yang sering disebut juga dengan istilah list. Dalam ms-word kamu
mungkin mengingatnya sebagai bulleted dan numbered list. Nah. kita juga bisa membuat list tersebut
menggunakan program HTML lho. Coba yuk...
Dengan HTML, sebenarnya kita bisa membuat beberapa jenis daftar. Namun yang paling umum
digunakan adalah apa yang dikenal dengan istilah ordered list dan unordered list. Seperti apa tuh? Mari
kita lihat contohnya.
Ordered list adalah daftar yang berurutan, atau gampangnya daftar yang ada nomornya seperti contoh
berikut ini:
Saat mempelajari program HTML, kamu harus mempelajari hal-hal berikut ini secara berurutan:
1. Mempelajari Tag HTML
2. Membuat paragraf
3. Membuat link
Sedangkan unordered list biasanya hanya menggunakan bullet seperti daftar berikut ini:
Saat mempelajari program HTML, kamu harus mempelajari hal-hal berikut ini secara berurutan:

Mempelajari Tag HTML

Membuat paragraf

Membuat link

Cara membuatnya juga sebenarnya sangat mudah, dan umumnya semua editor HTML sudah bisa
membuatnya dengan mudah. Namun tidak ada salahnya kalau kamu juga mengenal tag-tag untuk
pembuatan list ini. Hal ini penting untuk kamu pelajari agar pada saat membuat program PHP nantinya,
kamu harus membuat list ini berdasarkan beberapa data yang diambil dari tabel, nah disinalh sebenarnya
pengetahuan tentang tag list ini akan sangat bermanfaat.
Ok, dalam tutorial berikutnya saya akan sampaikan tag-tag tersebut dimulai dengan tag ordered list
HTML.
Ok. Setelah sebelumnya kamu mempelajari konsep dan jenis-jenis daftar/list dalam program HTML,
sekarang waktunya untuk mempelajari cara membuat ordered list alias daftar bernomor. Caranya
guamping......

Kamu cuman perlu tahu 2 tag yaitu <OL> dan <LI>.


Tag <OL> adalah tanda mulainya sebuah daftar bernomor urut, sedangkan tag <LI> adalah isi dari daftar.
Biasa..paling gampang kalau menjelaskan pakai contoh kan?
Nah kode berikut ini:
<OL><LI>Mempelajari HTML</LI><LI>Mempelajari PHP</LI><LI>Mempelajari MySQL</LI></OL>

Akan tampil seperti ini di browser:


1. Mempelajari HTML
2. Mempelajari PHP
3. Mempelajari MySQL
Mudah bukan? Sebagai catatan tambahan, kamu tidak usah repot-repot menuliskan nomornya untuk
setiap isi daftar. Hal ini sudah dilakukan secara otomatis oleh browser (tentu saja hal ini sangat
memudahkan pembuat kode).
Ok. Tutorial berikutnya akan membahas tentang tag HTML unordered list. Check back soon ya...
Ok. Setelah sebelumnya kamu mempelajari konsep dan jenis-jenis daftar/list dalam program HTML dan
membuat daftar bernomor (ordered list) HTML, sekarang waktunya untuk mempelajari cara membuat
unordered list alias daftar tanpa nomor (cuman pakai bullet ajah). Caranya juga guamping......
Lagi-lagi kamu cuman perlu tahu 2 tag yaitu <UL> dan <LI> yang sudah kita bahas sebelumnya.
Tag <UL> adalah tanda mulainya sebuah daftar tanpa nomor, sedangkan tag <LI> adalah isi dari daftar.
Mari kita lihat contohnya.
Kode berikut ini:

<UL><LI>Cara membuat website</LI><LI>Membuat Website</LI><LI>Cara membuat


web</LI></UL>

Akan tampil seperti ini di browser:


- Cara membuat website
- Membuat Website
- Cara membuat web
sama seperti sebelumnya...sangat mudah bukan?
Sampai saat ini, kamu udah belajar beberapa tag HTML penting. Sebelum melanjutkan ke materi yang
lain, ada baiknya kita review sedikit apa yang sudah kamu dapatkan sampai saat ini.
Tanda lebih besar dan kecil (< dan >)digunakan untuk mengawali dan mengakhiri tag HTML. Kata-kata
yang ada di antara kedua tanda tersebut disebut juga elemen HTML.

Semua dokumen HTML memiliki tag-tag utama sebagai berikut:


<html></html> tag file HTML
<head></head> tag HTML informasi umum untuk header dan info lainnya
<title></title> tag HTML judul
<body></body> tag HTML body tempat content anda berada
Untuk membuat jarak di antara paragraf, gunakan tag HTML paragraf:
<p></p>
Untuk membuat baris baru gunakan tag HTML:
<br />
Daftar/list bisa bernomor (ordered list) atau tanpa nomor (unordered list).
Cara membuatnya:
<ol></ol> tag HTML ordered list
<ul></ul> tag HTML unordered list
<li></li> tag HTML isi daftar
Ternyata belajar HTML tidak serumit yang dibayangkan ya?