Latihan HTML

1.
<html>
Ini adalah kode atau tag yang terdapat di bagian atas dari semua halaman web.
(memang, pada halaman web masa kini, kadang-kadang ada juga kode tertentu yang terdapat sebelum kode HTML. Tapi ini kita
abaikan dulu ya, berhubung ini masih pelajaran tingkat dasar)
Nah, setiap tag itu pasti ada tag penutupnya

(memang ada juga tag yang tak perlu pakai penutup, tapi ini akan kita pelajari nanti, ya....)
Maka, tag penutup dari <html> adalah </html>
PERBEDAANNYA:
Pada setiap tag penutup, setelah "<" pasti ada tanda "/".
2. <head>
Ini boleh dibilang sebagai "dapurnya halaman web". Kenapa? Sebab semua kode
yang diletakkan di antara tag <head> dan </head> tidak akan terlihat di halaman
web. Di bagian HEAD ini, kita bisa melakukan berbagai macam pengaturan, seperti:
- meletkakan kode javascript

- meletakkan kode css
- meletakkan meta tag
- dan seterusnya
3. <title>
Ini adalah tag untuk meletakkan JUDUL halaman web. Ingat, judul halaman web
tidak sama dengan nama file.
Sebagai contoh, coba lihat ke bagian paling atas (pojok kiri) dari halaman ini. Di situ
tertulis:
Asian Brainers Forum :: Lihat Topik - Panduan Dasar-dasar HTML (Ingat: HMTL Itu
Sangat Mudah!)
Nah, itu adalah title atau judul dari halaman ini.
Kebetulan, pada forum diskusi AB ini, title di atas dibuat secara otomatis oleh
sebuah script. Namun bila dibuat secara manual, maka penulisannya sebagai
berikut:
<title>Asian Brainers Forum :: Lihat Topik - Panduan Dasar-dasar HTML (Ingat:

HMTL Itu Sangat Mudah!)</title>
Nah, gampang, bukan?
4. <body>
Nah, body ini adalah tempat untuk meletakkan SEMUA HAL yang hendak kita
tampilkan di halaman web kita.
Bila kode-kode lainnya adalah "urusan belakang layar", maka BODY ini adalah
"urusan di depan layar" atau "panggung yang akan ditonton oleh hadirin".
Jadi, apapun yang kita letakan di bagian BODY, maka itulah yang akan dilihat oleh
pengunjung website kita.
LATIHAN:
Oke, sebagai latihan, coba ketik ulang kode-kode berikut di Notepad (INGAT,
JANGAN COPY PASTE, agar mudah dipahami)
<html>
<head>
<title>Website Pertama Gue</title>
</head>
<body>
Ini dia website pertamaku, bagus kan?
</body>
</html>
Setelah selesai, klik "Save As"

Pada bagian "Save as type", pilih "All Files"
Pada bagian "File Name", beri nama "index.html" (tanda " harus disertakan)
Cari lokasi penyimpanan, misalnya di Desktop
Klik "Save".
Nah, sekarang, coba masuk ke Desktop, klik dua-kali file "index.html" tadi, lalu
lihatlah hasilnya.
Selamat mencoba!
Insya Allah, setelah ini kita akan masuk ke pelajaran berikutnya.
Terima kasih
=========================
Pelajaran II:
Rumus penting di dalam kode HTML:
=========================
Dalam pembuatan kode HTML, berlaku rumus "first come, last out".
Maksudnya, kode yang pertama kali dimasukkan, maka dia harus terakhir kali
ditulis.
Urutannya begini:
123321
Agar tidak bingung, mari kita lihat contoh berikut:
 adalah kode untuk membuat huruf tebal
 adalah kode untuk membuat huruf miring
Misalkan kita hendak membuat huruf miring sekaligus tebal
CARA YANG BENAR:
ini huruf miring dan tebal
atau:
ini huruf miring dan tebal
CARA YANG SALAH:
ini huruf miring dan tebal
yang ini juga salah:
ini huruf miring dan tebal
Atau, coba lihat lagi kode dasar HTML di atas.

Semuanya ditulis dengan rumus "first come, last out" bukan?
Kode <html> yang diletakkan paling awal, maka kode penutup </html> pun
diletakkan paling akhir.
Demikian seterusnya
=========================
Pelajaran III:
Membuat huruf tebal, miring, bergaris bawah, dan efek
dicoret
=========================
Hm, bocorannya sudah terdapat pada pelajaran II di atas :)
Ya, di atas saya sudah memberi contoh tentang cara membuat huruf tebal dan
miring.
Sebelum dilanjut, saya ingatkan lagi:
1. Semua kode ini diletakkan di antara tag <body> dan </body>.

Kenapa? Sebab format huruf ini akan terlihat oleh pengunjung di halaman web kita
nantinya.
2. Jangan copy paste, tapi salin ulang secara manual
3. kode-kode HTML ini silahkan tulis di Notepad saja
4. Semua kode pada pelajaran III ini harus pakai tag penutup. Bila tak ada tag
penutup, maka halaman web anda akan kacau
5. Bila anda menggunakan lebih dari satu tag, ingatlah selalu rumus:
"first come, last out"
Oke, kita mulai ya:
1. membuat huruf tebal: 

==>> sekarang ada yang baru, membuat huruf tebal disarankan pakai tag

2. membuat huruf miring: 

==>> sekarang ada yang baru, membuat huruf miring disarankan pakai tag

3. membuat huruf bergaris bawah: 
4. membuat huruf dengan efek dicoret: <strike>

=========================
Latihan
=========================
Oke, sekarang langsung praktek saja ya...
Buka Notepad, lalu ketiklah kode-kode berikut secara manual.

Setelah itu, save dengan nama "pelajaran3.html"
Lalu buka dengan browser Anda.
<html>
<head>
<title>Dasar-dasar HTML - Pelajaran 3</title>
</head>
<body>
Ini huruf tebal dan miring sedangkan yang ini miring saja,
yang ini tebal dan bergaris bawah, sedangkan ini
<strike>tebal dan dicoret</strike>
</body>
</html>
Terima kasih
========================
Pelajaran IV:
Perataan Teks, Pergantian Baris dan Pergantian Paragraf
========================
Di atas sudah disebutkan bahwa hampir semua tag harus pakai penutup. Tapi ada
juga yang tidak.
Nah, yang dibahas pada Pelajaran IV ini termasuk tag yang tidak membutuhkan tag
penutup!
Namun ada juga nanti pengecualiannya. Apa itu? Tunggu saja ya....
1. Tag untuk pergantian baris: 
2. Tag untuk pergantian paragraf: 
Apa bedanya?
Sepertinya lebih afdol bila langsung pakai contoh saja, ya. Silahkan anda lihat
sendiri bedanya.
Silahkan praktek lagi dengan mengetik kode-kode berikut ini secara manual, lalu
simpan dengan nama "pelajaran4.html"
<html>
<head>
<title>Dasar-dasar HTML - Pelajaran 4</title>
</head>
<body>
Ini paragraf pertama baris pertama
dan ini masih baris pertama lho...
 Ini paragraf pertama baris kedua
Ini paragraf kedua
Ini paragraf ketiga
Ini paragraf keempat baris pertama
 Ini paragraf keempat baris kedua
 Ini paragraf keempat baris ketiga
Ini paragraf kelima
</body>
</html>
Semoga bermanfaat!
========================
Lanjutan Pelajaran IV:
Perataan Teks, Pergantian Baris dan Pergantian Paragraf
========================
Oke, tag dan memang tidak membutuhkan tag penutup.
Khusus untuk kode , pada kondisi tertentu dia membutuhkan tag penutup.
Misalnya, ketika kita menambahkan "perataan teks" pada kode ini.
Contoh:
Kita ingin membuat paragraf tertentu rata kanan.
Maka kodenya adalah:
ini dia paragraf yang rata kanan
Nah, pada kondisi seperti ini, tag perlu dibuatkan tag penutup .
NB:
Kode seperti align="right" ini sebenarnya hanya kode tambahan. Maksudnya, dia
tidak berdiri sendiri. Dia harus dilekatkan pada kode lain.
Dalam contoh di atas, kode align="right" dilekatkan pada kode 
Nah, dalam perkembangannya nanti, kita akan tahu bahwa masih banyak kode
lainnya yang termasuk kode tambahan.
Semoga bermanfaat!
========================
Pelajaran V:
Membuat Link
========================
Link atau hyperlink adalah teks atau gambar atau unsur apapun, yang bila diklik
akan membawa kita ke halaman web lain.
Cara membuat link ini sangat gampang.
Rumusnya sebagai berikut:
<a href="Alamat URL atau alamat link">teks atau gambar atau apapun yang akan
diberi link</a>
Sebagai contoh:
Saya menulis artikel, di dalamnya ada link menuju "affiliate link AB" saya.
Cara membuatnya (Ini hanya contoh kalimat):
"Saya sudah beberapa bulan ini bergabung dengan <a

href="http://www.asianbrain.com/index.php?aff_code=467314">Asian Brain</a>
Maka, di halaman web, nanti akan terlihat seperti ini:
"Saya sudah beberapa bulan ini bergabung dengan Asian Brain"
Nah, bagian yang diberi warna biru (teks atau gambar atau apapun yang akan
diberi link) bisa diisi dengan teks, gambar, atau apapun.
Apapun yang kita masukkan di sini, maka itulah yang nanti bisa diklik oleh
pengunjung.
Jadi kita juga bisa meletakkan gambar atau apapun di sana. Namun karena
pelajaran tentang "cara memasukkan gambar" belum tiba, ditunggu saja ya....
Cara membuat agar link terbuka dengan jendela baru:
Bila Anda mengklik link "Asian Brain" yang saya buat di atas, maka hasilnya akan
terbuka dengan jendela baru. Hal ini disebabkan, sistem di Forum AB ini memang
sudah dibuat seperti itu. Semua link akan OTOMATIS terbuka dengan jendela baru.
Namun bila tidak ada pengaturan khusus seperti itu, biasanya link akan terbuka di
halaman yang sama. Bila kita mengklik sebuah link di halaman A, maka hasilnya
akan "menimpa" halaman A tersebut.
Nah, bagaimana caranya agar link itu terbuka dengan jendela baru?
Caranya sangat gampang:
Kita tambahkan saja tag berikut ini di dalam kode HTML tersebut:
target="_blank"
Berikut adalah kode lengkapnya (agar lebih mudah, dibuat dalam bentuk
perbandingan ya....)
Kode HTML sebelum ditambahkan target="_blank":

href="http://www.asianbrain.com/index.php?aff_code=467314">Asian Brain</a>
Kode HTML setelah ditambahkan target="_blank":

href="http://www.asianbrain.com/index.php?aff_code=467314"
target="_blank">Asian Brain</a>
Nah, gampang sekali, bukan?
Semoga bermanfaat :)
========================
Pelajaran VI:
Menampilkan Gambar pada Halaman Web
========================
Nah, pelajaran VI ini sangat bermanfaat bagi kita yang ingin menampilkan banner
iklan di web kita, atau apa saja yang bentuknya gambar.
Perlu diketahui, format gambar yang boleh ditampilkan di web biasanya hanya yang
berformat JPG, GIF, PNG dan SWF (flash).
Di sini, kita akan membatasi pada format JPG dan GIF saja ya....
Perlu diketahui, kode html untuk gambar (image) termasuk kode yang TIDAK
membutuhkan tag penutup.
Rumus untuk menampilkan gambar adalah:
<img src="alamat URL dari gambar tersebut">
Oke, gampang sekali, bukan?
Sekarang:
Maka, mari kita bereksprimen:
Coba lihat ke bagian atas halaman ini.

Di situ terdapat gambar yang bentuknya seperti rumah, kan?
Kalau bingung, nih saya tampilkan saja:
Nah, bila misalnya kita hendak menampilkan gambar rumah ini di website kita,
maka caranya sangat gampang:
Pertama, cari tahu dulu, apa alamat URL dari gambar tersebut.
(tentang cara mengetahui alamat URL suatu gambar, coba pelajari caranya di sini)
Nah, ternyata alamat URL gambar tersebut adalah

http://www.asianbrain.com/forum/images/member-area2.gif
Kedua
Setelah ketemu alamat URL-nya, silahkan copy ke dalam rumus tadi.
<img src="http://www.asianbrain.com/forum/images/member-area2.gif">
Oke, gampang kan?
Kode Tambahan
Sekarang, coba ingat lagi:

Pada pelajaran tentang paragraf, kita mengenai kode tambahan seperti
align="left".
Atau pada pelajaran link, ada kode tambahan seperti target="_blank"
Nah, kode HTML untuk image atau gambar ini pun mengenal banyak kode
tambahan, misalnya:
border="x" (untuk menentukan berapa tebal "bingkai" untuk gambar tersebut. Bila
tak mau pakai bingkai, masukkan angka 0 atau NOL untuk menggantikan x)
align="left" atau align="right" dan seterusnya (untuk menentukan apakah gambar

itu mau dibuat rata kanan, rata kiri, dst)
alt="isi dengan teks tertentu" (ini adalah teks yang akan menyertai gambar
tersebut).
Nah, sekarang, mari kita buat sebuah kode HTML untuk image, lengkap dengan tag
tambahannya:
<img src="http://www.asianbrain.com/forum/images/member-area2.gif" border="1"

alt="Asian Brain Yang Kucinta" align="left">
Bagaimana caranya agar gambar/image bisa diklik?
Caranya, sangat gampang!
Kita cukup menggabungkan Pelajaran V dan VI.
Agar tidak bingung, kita buatkan langkah-langkahnya ya...
1. Alamat link: http://www.asianbrain.com/index.php?aff_code=467314

2. gambar yang mau di-link:
3. alamat URL dari gambar tersebut:

http://www.asianbrain.com/forum/images/member-area2.gif
Nah, rumus untuk membuat agar gambar tersebut diberi link adalah (perhatikan
nomor urutan di atas, ya... sebab akan kita gunakan di dalam rumus berikut):
A. Rumus untuk membuat link:

<a href="1">....</a>
B. Rumus untuk menampilkan gambar:

<img src="3">
Nah, agar kita bisa menampilkan gambar yang bisa diklik, kita cukup
menggabungkan A dengan B di atas.
Caranya: isilah .... pada A dengan kode B
Ini dia hasilnya:
<a href="http://www.asianbrain.com/index.php?aff_code=467314"><img
src="http://www.asianbrain.com/forum/images/member-area2.gif"></a>
Nah, kita bisa melengkapi kode di atas dengan kode-kode tambahan, seperti
target="_blank", "border="0" dan seterusnya.
Berikut contohnya:
<a href="http://www.asianbrain.com/index.php?aff_code=467314"
target="_blank"><img src="http://www.asianbrain.com/forum/images/member-
area2.gif" "border="0"></a>
Oke, agar tidak bingung, anda bisa praktek langsung.
Tapi ingat! Kode-kode ini harus diketik ulang secara manual, jangan copy paste,
agar lebih mudah dipahami.
Semoga bermanfaat ya....
Catatan:
Dari pelajaran V dan VI, seharusnya Anda sudah tahu bagaimana cara:
1. memasukkan gambar ke dalam posting
2. memasukkan banner iklan (yang bisa diklik) ke blog atau website kita
3. mengatur agar semua link terbuka dengan jendela baru
4. dan seterusnya
PENTING:
Forum Diskusi AB ini memiliki kode yang berbeda dengan kode HTML. Di forum
diskusi seperti ini, yang digunakan adalah bb code. Ini sedikit berbeda dengan
HTML
Karena itu, kalau mau praktek HTML, jangan di forum AB ini.

Tapi pakai saja Notepad, seperti instruksi di atas.
Oke deh.
Insya Allah nanti disambung lagi dengan Pelajaran VII ya...
thanks
========================
Pelajaran VII:
Menampilkan Link Email
========================
Di atas kita sudah belajar tentang cara membuat link, yang bila diklik akan masuk
ke halaman web tertentu.
Sekarang, kita akan belajar membuat link email.
Ini adalah jenis link yang akan membuka sebuah window "New Massage" dari email
client kita. Hm, jika Anda bingung dengan "definisi" ini, saya akan membuat
penjelasan yang lebih gamblang:
E-mail link adalah link yang berisi alamat e-mail, bukan alamat dokumen HTML -
atau halaman web - tertentu.
Cara membuat e-mail link pun sangat gampang. Ini dia tag-nya:
<a href="mailto:alamat_email">teks atau objek lain</a>
Perhatikan, bahwa unsur "mailto:alamat_email" merupakan bagian penting yang

membedakan antara email link dengan jenis link yang kita bahas di atas. Dan
seperti biasa, kita bisa mengganti teks dengan kata atau kalimat apa saja, bahkan
gambar/image pun bisa. Yang penting masih ada hubungannya dengan link
tersebut.
Berikut adalah sebuah contoh e-mail link:
<a href="mailto:webmaster@yahoo.com">Kirim e-mail ke Webmaster Yahoo!</a>
Jika kata "Kirim e-mail ke Webmaster Yahoo!" diklik, maka akan terbuka sebuah
window e-mail baru, dan alamat e-mail webmaster@yahoo.com tercantum di isian
To: secara otomatis.
Anda juga bisa membuat agar isian Subject: pun terisi otomatis. Caranya, Anda
tinggal menambahkan tag berikut ini setelah alamat emailnya:
?subject=teks
Contoh:
<a href="mailto:webmaster@yahoo.com?subject=A question about Yahoo!">Kirim

e-mail ke Webmaster Yahoo!</a>
Catatan:
1. Jangan sekali-kali membuat e-mail link seperti ini, karena dijamin salah:
<a href="http://webmaster@yahoo.com">text</a>
2. Hati-hati dalam mencantumkan alamat email pada halaman web yang bisa
diakses oleh siapa saja, sebab alamat email tersebut akan dengan segera
ditemukan oleh spammer.
Karena itu, alamat email bisa dilindungi dengan cara:
1. pakai kode javascript tertentu (sayangnya saya belum tahu kodenya. Ada yang
tahu???)
2. alamat email ditampilkan dalam bentuk image/gambar (saya mempraktekkannya

pada blog www.jonru.net
3. alamat email ditulis dengan cara yang berbeda, misalnya:
jonrusaja @ gmail.com (hilangkan spasi di antara tanda @)
jonrusaja[at]gmail.com
Oke, semoga bermanfaat ya...
========================
Pelajaran VIII:
Membuat daftar urutan tertentu
========================
Anda tentu sering mengetik daftar urutan seperti ini:
Kutipan:
Nama-nama adik saya:
1. Andi
2. Joko
3. Budi
Atau:
Kutipan:
Yang harus saya beli besok
- Buku tulis
- Pensil
- Penggaris
Nah, pada halaman web, Anda bisa menampilkan teks dengan urutan seperti itu melalui kode-
kode HTML berikut ini.
<ol> (membuat daftar urutan tertentu, menggunakan angka).
<ul> (membuat daftar urutan tertentu, menggunakan lambang tertentu).
<li> (menampilkan daftar urutan. Boleh pakai tag penutup </li>, tapi boleh juga tidak.
Tag <li> ditempatkan di antara <ol> dan </ol> atau di antara <ul> dan </ul> (tergantung
kebutuhan)
Contoh:
Pak Ahmad memiliki tiga orang anak, yaitu:
<ol>
<li>Ali
<li>Andi
<li>Agus
</ol>
Hasilnya:
Kutipan:
Pak Ahmad memiliki tiga orang anak, yaitu:
1. Ali
2. Andi
3. Agus
Contoh lain:
Bahan-bahan bangunan adalah:

<ul>
<li> semen
<li> batu bata
<li> pasir
<li> dan sebagainya
</ul>
Hasilnya:
Kutipan:
Bahan-bahan bangunan adalah:
- semen
- batu bata
- pasir
- dan sebagainya
Tag-tag di atas bisa saja digabung, seperti contoh berikut:
Pak Ahmad punya empat anak, yaitu:

<ol><li>Ali
<li> Budi, punya dua anak, yaitu:
<ul><li> Agus
<li> Andi</ul>
<li> Joko
<li> Ratna</ol>
Hasilnya:
Coba anda praktekkan sendiri ya....
Semoga bermanfaat...
========================
Pelajaran IX:
Membuat tabel
========================
Nah, ini boleh dibilang pelajaran yang agak "ribet" bila dijelaskan dengan kata-kata.
Karena itu, saya coba pakai ilustrasi gambar ya.
Ini dia:
Penjelasannya:
Semua tabel pasti terdiri atas:
- baris
- kolom
1. Nah, dalam kode HTML, semua tabel pasti diawali dengan tag <table> dan
diakhiri dengan tag </table>.
2. Setelah <table>, kode berikutnya adalah <tr>
<tr> ini adalah kode untuk memulai baris baru pada setiap tabel.
3. Kode berikutnya adalah kolom. Ini ditandai dengan kode <td>
Sama seperti Kode Dasar HTML (ingat Pelajaran I), tabel pun punya kode dasar
dengan urutan-urutan yang pasti sebagai berikut (lagi-lagi, silahkan pelajari dengan
membandingkan kode warnanya)
<table>
<tr>
<td> </td>
</tr>
</table>
Nah, kode di atas adalah sebuah tabel yang memiliki 1 kolom dan 1 baris saja.
Sekarang, kita membuat tabel dengan 2 kolom dan 1 baris.
Ini dia:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
Sekarang, kita buat yang sebaliknya (tabel dengan 1 kolom dan 2 baris)
Ini dia:
<table>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Penting:
1. Kode HTML untuk tabel ini memang agak membingungkan bila hanya dibaca.
Karena itu, saran saya:

Untuk membuat tabel, pakai dreamweaver atau frontpage saja. Baru nanti ketika
mau diutak atik atau diedit, kita bisa masuk ke kode HTML.
Nah, semoga dengan penjelasan di atas, teman-teman bisa lebih mudah dalam
mengutak-atik kode HTML Untuk tabel.
2. pada pelajaran 1, kita sudah mengetahui bahwa semua hal yang akan
ditampilkan di halaman web, harus diletakkan di antara tag <body> dan </body>.
Nah...
tabel pun sama saja.
Semua data yang akan ditaruh di dalam tabel, ditaruh di antara kode <td> dan
<td>.
Jadi, dalam meletakkan apapun di tabel, pastikan bahwa ia terletak di antara kode
TD tersebut.
Berikut adalah contoh sebuah tabel yang telah berisi tulisan tertentu. Bagaimana
hasil tampilannya? Silahkan dites sendiri ya :)
<table>
<tr>
<td>baris 1 kolom 1 </td>
</tr>
<tr>
</tr>
</table>
Table vs CSS
Sebelum CSS dikenal, satu-satunya kode HTML yang biasa digunakan untuk
mengatur tata letak (lay out) halaman web adalah table.
Kini, setelah era CSS, banyak peran tabel yang bisa digantikan oleh kode-kode CSS.
Tapi tentu saja, pada kasus tertentu, kode-kode table tetap diperlukan.
Semoga bermanfaat
========================
Pelajaran X:
Hal-hal yang tidak berpengaruh terhadap tampilan web
========================
Kode-kode HTML biasanya bisa kita edit dengan program seperti notepad.
Pada program pembuat halaman web seperti dreamweaver, frontpage, dst, kode HTML bisa kita
lihat dengan cara masuk ke bagian "html view", "code view" (atau istilah2 lain yang mirip).
Nah, dalam mengedit kode HTML di halaman "code view" ini, perlu diketahui bahwa ada cara
penulisan tertentu yang tidak berpengaruh terhadap hasilnya.
Agar tidak bingung, langsung saya beri contoh saja ya:
1. HURUF KAPITAL atau huruf kecil sama saja
Contoh:
 atau hasilnya sama saja
 atau atau hasilnya sama saja
2. spasi atau tabulasi atau enter sebanyak apapun, tidak ada artinya.
Contoh:
Mau dibuat seperti ini:
Kode:
 saya adalah manusia
biasa

atau seperti ini:
Kode:
saya adalah manusia biasa
atau seperti ini:
Kode:

saya
adalah
manusia
biasa

atau seperti ini:
Kode:
saya
adalah
manusia
biasa

Hasilnya sama saja :)
Kalau tidak percaya, coba dites.
Buatlah kode HTML seperti contoh-contoh di atas, diketik dengan notepad, lalu masing2
disimpan dalam bentuk file html yang berbeda-beda.
Setelah itu, lihat hasilnya. Bandingkan.
Sama saja, bukan?
Bagaimana agar hasilnya beda?
Agar hasilnya beda, bahasa HTML biasanya sudah memiliki kode-kode tertentu.
Misalnya nih: kita ingin membuat tampilan tulisan di website yang hasilnya benar-benar seperti
berikut ini:
Kode:
Saya hanya manusia biasa
Ada banyak spasi di antara kata "hanya" dan "manusia"
Maka, untuk membuat spasi sebanyak itu, kita bisa menggunakan kode berikut:
Kode:

Itu adalah kode HTML untuk membuat spasi. Bila kita ingin membuat jarak 10 spasi di antara
kedua kata misalnya, maka tempatkan 10 kode di atas di antara kedua kata tersebut.
Contoh:
Kode:
Saya hanya
manusia biasa
Selamat mencoba :)
Oke deh, semoga bermanfaat ya...

Latihan HTML

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Latihan HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

1.

Nah, setiap tag itu pasti ada tag penutupnya

Maka, tag penutup dari <html> adalah </html>

- meletkakan kode javascript

Nah, itu adalah title atau judul dari halaman ini.

<title>Asian Brainers Forum :: Lihat Topik - Panduan Dasar-dasar HTML (Ingat:

Nah, gampang, bukan?

Setelah selesai, klik "Save As"

Insya Allah, setelah ini kita akan masuk ke pelajaran berikutnya.

Agar tidak bingung, mari kita lihat contoh berikut:

<b> adalah kode untuk membuat huruf tebal

<i> adalah kode untuk membuat huruf miring

Misalkan kita hendak membuat huruf miring sekaligus tebal

CARA YANG BENAR:

<b><i>ini huruf miring dan tebal<i><b>

<i><b>ini huruf miring dan tebal<b><i>

CARA YANG SALAH:

<b><i>ini huruf miring dan tebal<b><i>

yang ini juga salah:

<i><b>ini huruf miring dan tebal<i><b>

Atau, coba lihat lagi kode dasar HTML di atas.

Hm, bocorannya sudah terdapat pada pelajaran II di atas :)

Sebelum dilanjut, saya ingatkan lagi:

1. Semua kode ini diletakkan di antara tag <body> dan </body>.

2. Jangan copy paste, tapi salin ulang secara manual

3. kode-kode HTML ini silahkan tulis di Notepad saja

Oke, kita mulai ya:

1. membuat huruf tebal: <b>

2. membuat huruf miring: <i>

3. membuat huruf bergaris bawah: <u>

4. membuat huruf dengan efek dicoret: <strike>

Oke, sekarang langsung praktek saja ya...

Buka Notepad, lalu ketiklah kode-kode berikut secara manual.

1. Tag untuk pergantian baris: <br>

2. Tag untuk pergantian paragraf: <p>

Misalnya, ketika kita menambahkan "perataan teks" pada kode ini.

Maka kodenya adalah:

<p align="right">ini dia paragraf yang rata kanan</p>

Dalam contoh di atas, kode align="right" dilekatkan pada kode <p>

Cara membuat link ini sangat gampang.

Rumusnya sebagai berikut:

Cara membuatnya (Ini hanya contoh kalimat):

"Saya sudah beberapa bulan ini bergabung dengan <a

Maka, di halaman web, nanti akan terlihat seperti ini:

"Saya sudah beberapa bulan ini bergabung dengan Asian Brain"

Cara membuat agar link terbuka dengan jendela baru:

Caranya sangat gampang:

Kode HTML sebelum ditambahkan target="_blank":

"Saya sudah beberapa bulan ini bergabung dengan <a

Kode HTML setelah ditambahkan target="_blank":

"Saya sudah beberapa bulan ini bergabung dengan <a

Nah, gampang sekali, bukan?

Rumus untuk menampilkan gambar adalah:

<img src="alamat URL dari gambar tersebut">

Oke, gampang sekali, bukan?

Coba lihat ke bagian atas halaman ini.

Kalau bingung, nih saya tampilkan saja:

Nah, ternyata alamat URL gambar tersebut adalah

Oke, gampang kan?

Sekarang, coba ingat lagi:

Atau pada pelajaran link, ada kode tambahan seperti target="_blank"

align="left" atau align="right" dan seterusnya (untuk menentukan apakah gambar