latihan html

26
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:

Transcript of latihan html

Page 1: 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

Page 2: latihan html

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.

Page 3: latihan html

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: 1 2 3 3 2 1

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>

atau:

<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. Semuanya ditulis dengan rumus "first come, last out" bukan?

Page 4: latihan html

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: <b> ==>> sekarang ada yang baru, membuat huruf tebal disarankan pakai tag <strong>

2. membuat huruf miring: <i> ==>> sekarang ada yang baru, membuat huruf miring disarankan pakai tag </em>

3. membuat huruf bergaris bawah: <u>

4. membuat huruf dengan efek dicoret: <strike>

Page 5: latihan html

========================= 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> <b><i>Ini huruf tebal dan miring</i></b> sedangkan yang ini <i>miring saja</I>, yang ini <b><u>tebal dan bergaris bawah</u></b>, sedangkan ini <b><strike>tebal dan dicoret</strike></b> </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: <br>

2. Tag untuk pergantian paragraf: <p>

Apa bedanya?

Sepertinya lebih afdol bila langsung pakai contoh saja, ya. Silahkan anda lihat sendiri bedanya.

Page 6: latihan html

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... <br>Ini paragraf pertama baris kedua <p>Ini paragraf kedua <p>Ini paragraf ketiga <p>Ini paragraf keempat baris pertama <br>Ini paragraf keempat baris kedua <br> Ini paragraf keempat baris ketiga <p>Ini paragraf kelima </body> </html>

Semoga bermanfaat!

======================== Lanjutan Pelajaran IV: Perataan Teks, Pergantian Baris dan Pergantian Paragraf ========================

Oke, tag <p> dan <br> memang tidak membutuhkan tag penutup.

Khusus untuk kode <p>, 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:

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

Nah, pada kondisi seperti ini, tag <p> perlu dibuatkan tag penutup </p>.

Page 7: latihan html

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

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.

Page 8: latihan html

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":

"Saya sudah beberapa bulan ini bergabung dengan <a href="http://www.asianbrain.com/index.php?aff_code=467314">Asian Brain</a>

Kode HTML setelah ditambahkan target="_blank":

"Saya sudah beberapa bulan ini bergabung dengan <a 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

Page 9: latihan html

========================

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

Page 10: latihan html

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:

Page 11: latihan html

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:

Page 12: latihan html

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:

Page 13: latihan html

<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:[email protected]">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 [email protected] 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:[email protected]?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://[email protected]">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:

Page 14: latihan html

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:

Page 15: latihan html

<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

Page 16: latihan html

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

Page 17: latihan html

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>

Page 18: latihan html

<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> <td>baris 1 kolom 2 </td> </tr> <tr> <td>baris 2 kolom 1 </td>

Page 19: latihan html

<td>baris 2 kolom 2 </td> </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:

<P> atau <p> hasilnya sama saja

<Br> atau <br> atau <bR> hasilnya sama saja

2. spasi atau tabulasi atau enter sebanyak apapun, tidak ada artinya.

Contoh:

Mau dibuat seperti ini:

Kode:

Page 20: latihan html

<p> saya                adalah     manusia

biasa

</p>

atau seperti ini:

Kode:

<p>saya adalah manusia biasa</p>

atau seperti ini:

Kode:

<p>

saya

adalah

manusia

biasa

<p>

atau seperti ini:

Kode:

<p>saya                adalah                                 manusia                                                                     biasa                                                                                 </p>

Page 21: latihan html

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:

&nbsp;

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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;manusia biasa

Selamat mencoba :)

Page 22: latihan html

Oke deh, semoga bermanfaat ya...