Scribd
Unggah
8 tayangan

Tutorial HTML 1.

For study

Diunggah oleh

Nunik Vitriana
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
8 tayangan

Tutorial HTML 1.

For study

Diunggah oleh

Nunik Vitriana
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 23

Tutorial HTML

1. Perkenalan dengan HTML

HTML adalah bahasa pemrograman dasar yang digunakan untuk membangun sebuah situs.
HTML sangat mudah digunakan dan diaplikasikan, oleh karena itu apabila kalian ingin belajar
membangun sebuah situs sendiri maka bahasa HTML wajib kalian pelajari. Pelajaran HTML ini
akan diberikan dalam bahasa yang mudah dimengerti sehingga kalian dapat belajar mulai dari
nol alias tidak tahu apa-apa tentang html.

Anggap kalian sedang ingin membuat suatu kue. Sebelum membuat suatu kue maka kalian harus
mengetahui terlebih dahulu bahan-bahan yang akan kalian gunakan beserta tahapan-tahapannya
agar kue itu nanti terasa lezat apabila dimakan. Membuat file html pun demikian, sebelum
membuat suatu file html kalian harus mengerti struktur dari file html itu sendiri dan 'bahan-
bahan' yang digunakan dalam membuat file tersebut agar file html kalian dapat tampil dengan
bagus di browser manapun.

HTML merupakan singkatan dari Hypertext Markup Language yang merupakan bahasa paling
standard yang digunakan untuk membuat suatu website. HTML bukanlah merupakan suatu
bahasa pemrograman, karena bahasa ini hanya berguna untuk mengontrol tampilan dari suatu
halaman (web page) beserta isinya, beda dengan bahasa PHP yang didalamnya dapat mendukung
suatu bentuk perulangan (Loop) atau bentuk pengandaian (if-else) sehingga bahasa PHP dapat
disebut sebagai suatu bahasa pemrograman. Namun dengan berawal dari bahasa paling dasar ini
kamu dapat menambahkan obyek-obyek lainnya seperti gambar, suara, video, dan permainan
flash dalam suatu dokumen HTML.

Untuk membuat suatu dokumen HTML, hal-hal yang kamu perlukan hanyalah sebuah text editor
biasa seperti : Notepad atau Wordpad (program standar bawaan dari windows) lalu kamu
mengetikkan kode HTML didalamnya kemudian di save (simpan) dengan akhiran (ekstensi) .htm
atau .html. Sebagai contoh kamu bisa menyimpan dokumen HTML kamu dengan nama
belajar.html Bila kamu ingin sebuah HTML editor yang lebih profesional lagi, mungkin kamu
bisa menggunakan program MS FrontPage atau bahkan Dreamweaver (editor HTML yang
paling terkenal), tetapi tentunya kedua program (software) diatas merupakan software berbayar
yang tentunya disini kami amat tidak menyarankan kamu untuk mencari crack-nya atau
menggunakan software ilegal. Kemudian apabila file kamu telah disimpan dengan akhiran .html
atau .htm maka selanjutnya kamu dapat membukanya dengan software (dalam hal ini disebut

browser) seperti : Internet Explorer (bawaan windows) , Mozilla Firefox , Google

Chrome , Opera , atau browser lainny


Tutorial HTML
2. Dasar-dasar HTML

Pengetahuan pertama tentang HTML yang harus kamu miliki adalah struktur dari HTML.
Struktur HTML ini dapat kamu ibaratkan seperti Hamburger. Pernah makan? Kalau belum, kamu
akan melihat roti bulat yang ditumpuk-tumpuk dengan isi sayuran didalamnya. Struktur HTML
ini mirip seperti Hamburger, sayuran yang dijepit oleh roti tersebut adalah isi dari kedua tag
HTML yang menjepitnya. Apa itu tag? Sekarang kita langsung lihat saja pada struktur sederhana
dari HTML.

Di bawah ini adalah struktur dasar suatu file html,

view plaincopy to clipboardprint?


1. <html>
2. <head>
3. <title>Sedang Belajar</title>
4. </head>
5. <body>
6.
7. aku belajar html nih ..
8.
9. </body>
10. </html>

kode yang dimulai dengan tanda "<" dan diakhiri dengan tanda ">" (tanpa tanda kutip)
merupakan tag-tag HTML. Tag-tag ini menandai bagian-bagian pada halaman situs agar
ditampilkan sesuai dengan standar tampilannya. Tag HTML dasar adalah yang kalian lihat
diatas, yaitu html, head, dan body, inilah roti dari hamburger kita, mereka masing-masing
menjepit isinya. Perhatikan kode paling atas dan paling bawah, yaitu

view plaincopy to clipboardprint?


1. <html>

dan

view plaincopy to clipboardprint?


1. </html>

Kedua tag tersebut adalah tag utama dari HTML, segala yang terdapat dalam tag ini adalah
bagian dari html.

Berikut ini adalah penjelasan singkat mengenai tag dasar diatas. Tag <head> dan </head>
digunakan untuk meletakkan informasi-informasi penting yang tidak ditampilkan oleh browser
sehingga ketika kita tidak akan melihatnya pada halaman situs. Tulisan didalam <head> dan
</head> hanya dapat dilihat apabila kita mengklik 'View Source' pada browser Internet Explorer,
atau 'View Page Source' pada Mozilla Firefox. Keduanya dapat ditemukan dengan klik kanan
pada halaman situs yang dilihat. Tag <head> ini umumnya berisi judul (tag <title> dan </title>)
dari halaman situs dan beberapa informasi tambahan lainnya.

Tag <body> dan </body> adalah isi dari halaman situs. Disini tulisan, gambar, tabel, kalian akan
ditampilkan di browser. Itulah mengapa tag ini disebut body atau badan. Ada banyak tag-tag
HTML lain yang bisa ditampilkan disini misalnya <img> untuk menampilkan gambar, <p>
untuk menampilkan paragraf, <table> untuk menampilkan tabel, dan masih banyak lagi. Tag-tag
ini dapat kalian temukan definisinya dan cara pemakaiannya pada pembahasan khusus tag.

Satu hal mendasar lagi yang harus kalian ketahui dalam membangun situs kalian menggunakan
html adalah atribut. Atribut berbeda dengan tag, atribut adalah keterangan untuk tag. Misalnya
untuk tag body ada beberapa atribut seperti bgcolor, dan background. Contohnya seperti dibawah
ini,

view plaincopy to clipboardprint?


1. <html>
2. <head>
3. <title>Sedang Belajar</title>
4. </head>
5. <body bgcolor=red>
6.
7. aku belajar html nih ..
8.
9. </body>
10. </html>

Atribut bgcolor=red artinya adalah, "Tampilkan latar belakang merah pada halaman situs..".
Sehingga latar belakang dari halaman yang kalian buat akan berwarna merah. Atribut-atribut
yang lain dapat kalian temukan pada bagian tag yang bersangkutan.
Penjelasan diatas merupakan dasar-dasar dari HTML. Kalian dapat mencobanya sendiri di
komputer kalian dengan menggunakan notepad atau wordpad, caranya dengan menulis kode-
kode html dalam notepad atau wordpad lalu simpan sebagai [dot]html. Jangan lupa untuk
memilih pilihan 'All Files' untuk 'Save as Type'nya sehingga file yang tersimpan bukan [dot]txt.
Atau kalian juga dapat mencobanya langsung disini, dengan menulis kode-kode tersebut di
papan tulis dibawah ini. Setelah selesai kalian dapat melihat hasilnya dengan menekan tombol
'Lihat Hasilnya!'. Papan tulis ini akan ada di setiap pelajaran HTML berikutnya untuk
memudahkan kalian mencoba kode-kode HTML dalam pelajaran tersebut.

Tutorial HTML
3. Membuat Paragraf dan Judul dalam HTML

Sekarang kita akan membahas tentang cara membuat paragraf dan judul. Kembali lagi ke analogi
membuat kue, untuk membuat 'kue' paragraf tentu kita harus tahu bahan-bahannya bukan? Untuk
membuat 'kue' paragraf bahan-bahan yang dibutuhkan hanyalah <p>, sedangkan untuk judul kita
akan membutuhkan <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Setelah bahan-bahannya kita
ketahui maka kita akan mulai membuat 'kue'nya. Masih ingat kan struktur html itu seperti apa?
yap seperti hamburger, maka untuk membuat 'kue' paragraf ini kalian akan menjepit isi dari
paragraf kalian dengan bahan yang telah kalian ketahui sebelumnya yaitu <p> dan </p>.

Anggap kalian akan bercerita mengenai pengalaman kalian liburan ke pantai. Tentunya paragraf
yang akan kalian buat tidak begitu jauh dari apa yang kami tulis berikut ini,

"Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer. Kami pergi kesana karena diajak
oleh Ayah untuk melepas penat. Kami berangkat dari rumah pukul 6 pagi menggunakan mobil
dan sampai disana pukul 11 siang.

Sesampainya disana kami langsung mencari restoran karena kami semua sangat lapar. Kamipun
makan dan setelah makan, kami menuju hotel yang telah dipesan Ayah. Setelah beristirahat
sebentar kami semua langsung menuju pantai untuk bermain-main. Kami bermain lempar
tangkap bola dan bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah
menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada pukul 6.00 kami
kembali ke pantai lagi untuk menyaksikan matahari terbenam sambil memakan snack yang kami
bawa dari rumah. Kami menginap semalam di hotel dan pulang keesokan harinya."

Untuk membuat paragraf seperti diatas maka kita tulis struktur html dasar yaitu <html>, <head>,
dan <body> lalu kita masukkan bahan untuk membuat paragraf yaitu <p> lalu masukkan isinya,
seperti berikut ...

view plaincopy to clipboardprint?


1. <html>
2. <head>
3. <title>Belajar Membuat Paragraf</title>
4. </head>
5. <body>
6.
7. <p>
8. "Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer.
9. Kami pergi kesana karena diajak oleh Ayah untuk melepas penat.
10. Kami berangkat dari rumah pukul 6 pagi menggunakan mobil dan sampai
11. disana pukul 11 siang.
12. </p>
13. <p>
14. Sesampainya disana kami langsung mencari restoran karena kami semua
15. sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang
16. telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung
17. menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan
18. bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah
19. menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada
20. pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari
21. terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap
22. semalam di hotel dan pulang keesokan harinya."
23. </p>
24.
25. </body>
26. </html>

Perhatikan kode html diatas, karena contoh paragraf terdiri dari dua paragraf maka kode yang
dibuat pun harus menggunakan dua <p> dan dua </p>. Kalian dapat mencoba kode diatas ke
dalam papan tulis yang disediakan dibawah. Lalu bagaimana agar paragraf yang kalian
tampilkan memakai huruf miring semua seperti pada contoh diatas? Untuk membuat tulisan
miring atau cetak tebal, atau bergaris bawah kalian harus mengetahui bahan tambahan yang
diperlukan, yaitu <i>, <b>, dan <u>. Masing-masing tag ini merupakan kepanjangan dari italic
(huruf miring), bold (cetak tebal), dan underline (garis bawah). Cara memakai bahan-bahan ini
bagaimana? Sama seperti hamburger kita, dijepit saja isinya, lihat kode dibawah ini ...

view plaincopy to clipboardprint?


1. <html>
2. <head>
3. <title>Belajar Membuat Paragraf</title>
4. </head>
5. <body>
6.
7. <p>
8. <i>
9. "Hari Sabtu lalu aku dan sekeluarga pergi ke Pantai Anyer.
10. Kami pergi kesana karena diajak oleh Ayah untuk melepas penat.
11. Kami berangkat dari rumah pukul 6 pagi menggunakan mobil dan sampai
12. disana pukul 11 siang.
13. </i>
14. </p>
15. <p>
16. <i>
17. Sesampainya disana kami langsung mencari restoran karena kami semua
18. sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang
19. telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung
20. menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan
21. bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah
22. menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada
23. pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari
24. terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap
25. semalam di hotel dan pulang keesokan harinya."
26. </i>
27. </p>
28.
29. </body>
30. </html>

Lihat, mirip seperti hamburger kan :) .

Dalam membuat paragraf tentu kalian sewaktu-waktu akan membutuhkan paragraf yang rata kiri,
rata kanan, rata tengah, dan rata kanan kiri. Untuk membuat ini kalian akan membutuhkan atribut
yang bernama "align". Ada 4 nilai align, yaitu left (rata kiri), right (rata kanan), centre (rata
tengah), dan justify (rata kanan kiri). Sekarang lihat kode dibawah untuk cara pemakaian atribut
ini.

view plaincopy to clipboardprint?


1. <p align="right">
2. Sesampainya disana kami langsung mencari restoran karena kami semua
3. sangat lapar. Kamipun makan dan setelah makan, kami menuju hotel yang
4. telah dipesan Ayah. Setelah beristirahat sebentar kami semua langsung
5. menuju pantai untuk bermain-main. Kami bermain lempar tangkap bola dan
6. bermain kejar-kejaran. Suasananya seru sekali tak terasa waktu sudah
7. menunjukkan pukul 5.00 sore. Kami pun pulang ke hotel dan mandi. Pada
8. pukul 6.00 kami kembali ke pantai lagi untuk menyaksikan matahari
9. terbenam sambil memakan snack yang kami bawa dari rumah. Kami menginap
10. semalam di hotel dan pulang keesokan harinya.
11. </p>

Untuk menjadikannya rata kiri atau tengah tinggal mengganti kode "right" menjadi "left" atau
"centre".

Judul dari paragraf atau Heading dalam bahasa Inggris menggunakan bahan-bahan yang telah
disebutkan di awal tulisan yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. <h1> adalah judul
utama dan paling besar sedangkan <h6> adalah yang paling kecil. Contoh penulisan judul
paragraf dapat kalian lihat dibawah.

view plaincopy to clipboardprint?


1. <h1>Contoh Judul Paragraf</h1>
2. <h2>Contoh Judul Paragraf</h2>
3. <h3>Contoh Judul Paragraf</h3>
4. <h4>Contoh Judul Paragraf</h4>
5. <h5>Contoh Judul Paragraf</h5>
6. <h6>Contoh Judul Paragraf</h6>

Kalian dapat melihat perbedaan keenam judul tersebut dengan menuliskannya di papan tulis.

Pada bagian penjelasan tag dijelaskan atribut-atribut lain yang berkaitan dengan paragraf dan
judul. Kalian dapat menemukannya secara lengkap disana. Pelajaran berikutnya yaitu HTML
link atau tautan.

Browser anda tidak mendukung IFRAME


Tutorial HTML
4. Meletakkan Gambar pada HTML

Gambar adalah salah satu elemen dasar pada halaman situs yang turut meningkatkan cita rasa
suatu situs disamping nilai fungsionalitasnya. Penggunaan gambar pada halaman situs dapat
berupa ilustrasi dari suatu tulisan, foto, elemen halaman, dan iklan. Cara yang termudah untuk
meletakkan gambar ke suatu halaman html adalah dengan menaruh gambar yang bersangkutan
ke dalam folder satu file dengan file htmlnya kemudian dipanggil melalui tag <img>. Yap, tag
ini adalah bahan dasar yang diperlukan untuk meletakkan gambar pada halaman html.

Cara pengunaannya seperti ini, lihat kode dibawah ini

view plaincopy to clipboardprint?


1. <img src="gambar_mobil.jpg" alt="gambar mobil" />

Tag <img> berbeda penggunaannya dengan tag html lain, karena ia tidak menjepit suatu tulisan,
melainkan menutup dirinya sendiri. Coba kalian perhatikan di akhir tag ia menutupnya sendiri
dengan /> bukan? Lalu apa artinya atribut src dan alt? Atribut src adalah atribut yang berisi info
dimana lokasi gambar itu berada. Sedangkan atribut alt berguna untuk menampilkan tulisan yang
keluar apabila browser yang digunakan tidak memperbolehkan tampilnya gambar. Src adalah
kependekan dari Source (sumber) dan Alt adalah kependekan dari Alternative (alternatif teks).

Penempatan gambar terhadap teks juga dapat dimodifikasi melalui atribut align. Silahkan kalian
coba kode berikut di papan tulis di bawah.

view plaincopy to clipboardprint?


1. Teks sejajar
2. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
3. align="bottom" />
4. dengan gambar<br />
5. Teks ditengah-tengah
6. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
7. align="middle" />
8. gambar<br />
9. Teks diatas
10. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
11. align="top" />
12. gambar

Gunakan align="bottom untuk membuat bagian bawah dari gambar rata dengan bagian bawah
tulisan, dan gunakan align="middle" untuk membuat gambar berada di tengah-tengah tulisan,
namun apabila kalian menginginkan bagian atas gambar rata dengan bagian atas tulisan (rata
atas) maka kalian dapat menggunakan align="top".

Pasti kalian juga akan bertanya apabila gambar tersebut tidak diantara tulisan melainkan pada
bagian tersendiri dan tidak diapit oleh teks bagaimana cara membuatnya menjadi disebelah kiri
atau kanan halaman? Gunakan align="left" dan align="right" untuk membuatnya rata kiri dan
rata kanan. Namun apabila kalian ingin membuat gambar yang ditengahkan kalian harus
menambahkan tag <center> dan </center>. Lihat kode dibawah untuk lebih jelasnya.

view plaincopy to clipboardprint?


1. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
2. align="left" /><br /><br />
3.
4. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif"
5. align="right" /><br /><br />
6.
7. <center>
8. <img src="http://klikbelajar.com/wp-content/uploads/authors/1.gif" />
9. </center>

Kalian juga bisa membuat suatu gambar sebagai background dari halaman html kalian. Caranya
cukup mudah yaitu pada tag <body> kalian tambahkan atribut background. Lalu isi dengan nama
file gambarnya.

view plaincopy to clipboardprint?


1. <body background="namafilegambarkalian.gif">

Supaya bagus gambar yang kalian punya sebaiknya berukuran minimal 800 X 600 piksel.
Setelah membaca, kalian juga mencoba ya agar kalian tambah mengerti ingat Practice Makes
Perfect! Juga jangan lupa untuk mengirimi kami hasil screenshot image gallery yang telah
berhasil kalian buat :)

Browser anda tidak mendukung IFRAME

Tutorial HTML
5. Membuat Tautan atau Hyperlink dalam HTML

Hyperlink atau tautan dalam HTMl sangatlah penting karena ia yang menghubungkan antara satu
alaman dengan halaman lain. Untuk membuat Hyperlink, bahan yang diperlukan adalah <a>.
Tag ini kependekan dari anchor. Lihat kode di bawah ini.

view plaincopy to clipboardprint?


1. <a href="http://klikbelajar.com">Klik Saya</a>

kode diatas hasilnya akan seperti dibawah ini

Klik Saya

Atribut href pada tag <a> berfungsi sebagai tempat informasi alamat yang dituju. Apabila kalian
ingin alamat yang dituju adalah google maka tuliskan href="http://www.google.com". Cara
penulisan alamat ini ada dua macam yaitu absolut dan relatif. Penulisan alamat absolut adalah
penulisan alamat yang lengkap sedangkan relatif yang alamat singkatnya. Sekarang begini
anggap kalian tinggal di daerah terpencil di pulau Rote (ada yang tahu pulau Rote?). Kalian
berniat mengirim surat ke Jakarta melalui pos. Kalian pasti akan menuliskan alamat lengkapnya
besert RT RW dan Kelurahannya untuk memastikan surat tersebut sampai di tujuan bukan?
Namun apabila kalian akan mengirim surat ke teman yang rumahnya hanya berbeda 3 rumah dari
rumah kalian, kalian dapat menuliskan nomor rumah dan menitipkannya pada ketua RT untuk
menyampaikannya bukan?

Hal yang sama dapat kalian analogikan ke dalam tipe penulisan alamat href. Tipe Absolut adalah
penulisan alamat lengkap menggunakan RT RW dan Kelurahan yang dalam html contohnya
seperti ini,
view plaincopy to clipboardprint?
1. <a href="http://klikbelajar.com/pelajaran-sekolah/pelajaran-bahasa/bahasa-inggris/
belajar-bahasa-inggris-past-continous/">Klik Saya</a>

Tipe absolut ini digunakan apabila alamat yang dituju jauh diluar tempat penyimpanan halaman
yang kalian edit sekarang. Namun apabila kalian mempunyai dua file dalam satu folder yaitu
coba1.html dan coba2.html, dan kalian sekarang sedang mengedit halaman coba1.html. Apabila
kalian ingin menaruh tautan ke halaman coba2.html maka kalian cukup menulis sebagai berikut

view plaincopy to clipboardprint?


1. <a href="coba2.html">Klik untuk menuju halaman coba2</a>

Lihat perbedaannya, yang absolut menggunakan http:// dan juga menuliskan folder-folder yang
menyertainya, sedangkan yang relatif cukup menuliskan nama file yang dituju karena berada
dalam satu folder.

Hyperlink juga bisa diletakkan dalam gambar. Caranya sama persis seperti menaruh hyperlink
pada tulisan hanya saja tag <a> dan </a> menjepit tag gambar <img>. Sekarang perhatikan kode
di bawah ini.

view plaincopy to clipboardprint?


1. <a href="coba2.html"><img src="gambarkodok.jpg" /></a>

Kode diatas adalah contoh hyperlink dimana ketika gambar kodok di klik maka halaman
coba2.html akan terbuka. Karena gambar "gambarkodok.jpg" ditulis dalam bentuk relatif maka
gambar kodok tersebut diletakkan dalam satu folder yang sama. Jika tidak maka gambar kodok
tersebut tidak akan muncul. Untuk belajar lebih lanjut tentang penempatan gambar pada halaman
web silahkan buka pelajaran sebelumnya "Meletakkan Gambar pada halaman HTML".

Dalam membuat hyperlink juga ada pilihan untuk jendela pembukanya, apakah di halaman yang
sama atau di halaman baru sehingga halaman sebelumnya tidak tertutup. Untuk membuat pilihan
seperti ini tambahkan atribut target pada tag <a>. Lihat kode dibawah ini.

view plaincopy to clipboardprint?


1. <a href="http://klikbelajar.com" target="_blank">Munculkan
2. Klikbelajar.com di halaman baru</a>
3. <a href="http://klikbelajar.com">Munculkan
4. Klikbelajar.com di halaman ini</a>

Apabila kalian menginginkan halaman baru dibuka di jendela yang lain maka gunakan
target="_blank" sedangkan apabila kalian menginginkan halaman yang dibuka pada halaman itu
juga maka hilangkan atribut target maka ia secara default akan membuka pada halaman itu
sendiri.
Tutorial HTML
6. Membuat Tabel pada Halaman HTML

Tabel seperti yang kalian tahu terdiri dari kolom dan baris. Pada tabel data-data dimasukkan
dalam kombinasi antara kolom dan baris tertentu. Beberapa baris dan kolom dari tabel bisa
digabungkan untuk membuat tampilan yang sesuai dengan kebutuhan data kita. Pada html semua
itu dapat dilakukan, namun tentunya kita harus mengetahui terlebih dahulu bahan-bahan apa saja
yang diperlukan untuk meracik sebuah tabel. Untuk meracik sebuah tabel kita akan
membutuhkan bahan-bahan sebagai berikut, <table>, <tr>, dan <td>.

Untuk membuat sebuah tabel maka susun bahan-bahan tersebut menjadi seperti ini,

view plaincopy to clipboardprint?


1. <table>
2. <tr>
3. <td>baris 1, kolom 1</td>
4. <td>baris 1, kolom 2</td>
5. </tr>
6. <tr>
7. <td>baris 2, kolom 1</td>
8. <td>baris 2, kolom 2</td>
9. </tr>
10. </table>

Susunan seperti kode diatas akan membuat sebuah tabel sederhana yang berukuran 2 X 2, yaitu 2
kolom dan 2 baris. Sekarang perhatikan karena konsep dari tabel ini cukup sulit namun akan
menjadi mudah apabila kalian memperhatikan penjelasan berikut.
Tabel dari html adalah berdasarkan kepada baris atau row. Anggap kamu ingin memasukkan data
pada baris pertama kolom pertama maka pertama kali yang kalian harus lakukan adalah
membuat sebuah baris lalu setelah itu membuat kolom, baru setelahnya memasukkan data.
Apabila kalian ingin memasukkan data pada kolom kedua baris pertama maka kalian harus
membuat sebuah baris, kemudian buat kolom pertama, setelah itu buat kolom kedua, baru isi
datanya. Jadi intinya baris dulu baru kolom.

<tr> digunakan untuk membuat suatu baris baru. Sedangkan <td> digunakan untuk membuat
kolom/data. Supaya gampang mengingatnya, ingat saja huruf belakangnya, tr --> r = row, td -->
d = data.

Setelah mengetahui dasarnya, maka selanjutnya kita akan belajar untuk menyatukan 2 kolom
pada sebuah tabel. Lihat contohnya dibawah ini, kita akan membuat sebuah tabel dimana
terdapat 2 kolom yang digabungkan.

1
2 3
4 5

Lihat, pada baris pertama, kolom pertama dan kedua digabung sehingga isi dari kolom tersebut
bisa sepanjang 2 kolom. Biasanya penggabungan kolom seperti contoh diatas digunakan untuk
membuat judul dari tabel.

Lalu sekarang bagaimana cara membuatnya agar bisa digabungkan ? Asal kita mengetahui bahan
tambahannya hal itu mudah sekali untuk dilakukan. Bahan tambahan tersebut berupa atribut dari
<td> yang bernama colspan. Lihat di bawah ini untuk cara penggunaannya.

view plaincopy to clipboardprint?


1. <table>
2. <tr>
3. <td colspan="2">Ini adalah kolom yang digabungkan</td>
4. </tr>
5. <tr>
6. <td>baris 2, kolom 1</td>
7. <td>baris 2, kolom 2</td>
8. </tr>
9. <tr>
10. <td>baris 3, kolom 1</td>
11. <td>baris 3, kolom 2</td>
12. </tr>
13. </table>

Perhatikan bagian "Ini adalah kolom yang digabungkan", sebelumnya terlihat perintah <td
colspan="2"> bukan ? Ini adalah contoh penggunaan colspan. Colspan memerintahkan agar
beberapa kolom digabungkan tergantung dari nilai yang dituliskan. Pada contoh diatas nilai
tersebut adalah "2" sehingga 2 kolom digabungkan menjadi satu dan hasilnya dapat kalian lihat
seperti contoh tabel diatas.

Contoh diatas adalah untuk menggabungkan kolom secara horisontal, namun bagaimana cara
menggabungkan kolom secara vertikal? Berikut ini kita akan belajar untuk menggabungkan
kolom 2 secara vertikal. Lihat tabel dibawah ini.

1
3
2
5

Perhatikan tabel diatas, kolom 2 dan kolom 4 digabung sehingga kolom 4 nya hilang. Untuk
membuat tabel seperti diatas atribut tambahan yang diperlukan adalah rowspan. Mudah bukan
mengingatnya? jika masih dalam satu baris kita menggunakan colspan sedangkan apabila pidah
baris kita menggunakan rowspan. Dibawah ini adalah perintah yang digunakan untuk membuat
tabel seperti diatas.

view plaincopy to clipboardprint?


1. <table>
2. <tr>
3. <td colspan="2">Ini adalah kolom yang digabungkan</td>
4. </tr>
5. <tr>
6. <td rowspan="2">baris 2, kolom 1</td>
7. <td>baris 2, kolom 2</td>
8. </tr>
9. <tr>
10. <td>baris 3, kolom 2</td>
11. </tr>
12. </table>

Kalian dapat mencobanya di papan tulis yang disediakan di bagian bawah halaman ini.

Ada atribut-atribut lain yang berhubungan dengan tabel seperti border, align, cellpadding, dan
sebagainya yang dapat kalian pelajari lebih lanjut di bagian penjelasan tag HTML.

Browser anda tidak mendukung IFRAME

Tutorial HTML
7. Membuat Suatu Daftar Urutan atau List pada HTML

Memo Hari Ini


Yang harus dilakukan :

 Bayar tagihan listrik


 Nganterin Ayah ke bandara

 Beli lampu neon buat di taman


 Ambil cucian di laundry

 Nelpon Mirza

Diatas adalah contoh dari daftar atau list yang dapat dibuat di HTML. List tersebut dapat kalian
buat dengan mudah menggunakan tag yang sesuai yaitu tag <ul>, <ol>, dan <li>.

Dalam membuat suatu list maka sebaiknya kalian bertanya dulu ke diri kalian, apakah list yang
akan kalian buat itu harus berurutan atau tidak. Jika jawabannya adalah berurutan maka kalian
sebaiknya memakai tag <ol>, namun apabila list yang akan dibuat tidak harus berurutan seperti
contoh diatas maka kalian sebaiknya memakai tag <ul>. Tag <li> digunakan untuk membuat
detail dari list tersebut.

Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara berurutan. List yang
ditampilkan nanti oleh tag ini akan menampilkan nomor disebelah kiri dari detail. Lihat contoh
dibawah ini:

Memo Hari Ini


Yang harus dilakukan :

1. Nelpon Mirza
2. Bayar tagihan listrik

3. Ambil cucian di laundry

4. Nganterin Ayah ke bandara

5. Beli lampu neon buat di taman

Contoh diatas adalah versi berurutan dari memo yang ditulis pada contoh sebelumnya.
Perhatikan bahwa sekarang list yang ada menggunakan nomor urut untuk menentukan prioritas
yang harus dikerjakan. Nomor urut ini tampil karena ia menggunakan tag <ol>. Inilah perintah
HTML untuk menampilkan list tersebut.

view plaincopy to clipboardprint?


1. <ol>
2. <li>Nelpon Mirza</li>
3. <li>Bayar tagihan listrik</li>
4. <li>Ambil cucian di laundry</li>
5. <li>Nganterin Ayah ke bandara</li>
6. <li>Beli lampu neon buat di taman</li>
7. </ol>
Kalian dapat melihat disini penggunaan <ol> dan <li> , dimana <ol> digunakan untuk memberi
petunjuk kepada browser bahwa list yang ditampilkan harus menggunakan nomor urut, dan <li>
digunakan untuk membuat detail dari list. Mudah bukan?

Sekarang kalian pasti dapat menebak contoh penggunaan Unordered List, atau list secara tidak
berurut, persis seperti pada contoh pertama. Yap, perintahnya sama dengan Ordered List namun
tag <ol> diganti dengan <ul>. Lihat contoh berikut:

view plaincopy to clipboardprint?


1. <ul>
2. <li>Bayar tagihan listrik</li>
3. <li>Nganterin Ayah ke bandara</li>
4. <li>Beli lampu neon buat di taman</li>
5. <li>Ambil cucian di laundry</li>
6. <li>Nelpon Mirza</li>
7. </ul>

Sangat mudah! kalian dapat mencobanya di papan tulis pada bagian bawah halaman ini.

Ada satu lagi jenis list dalam HTML namun pemakaiannya sangat jarang sekali di luar sana. List
itu adalah Definition List. List ini digunakan untuk menampilkan suatu daftar istilah-istilah
berikut penjelasannya. Contohnya adalah seperti ini:

Obeng
Perkakas yang digunakan untuk memutar suatu skrup
Stop Kontak
Suatu panel yang digunakan sebagai sumber listrik
Mur
Pasangannya baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya
Baut
Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian perempuannya

Perhatikan bahwa tiap istilah berada di sebelah kiri dan penjelasannya berada di bawahnya
dengan agak menjorok ke kanan. Inilah yang disebut dengan Definition List. Untuk membuatnya
kita akan membutuhkan,

 <dl> untuk membuat suatu Definition List


 <dt> untuk menampilkan suatu istilah, kependekan dari Definition Term

 <dd> untuk menampilkan penjelasan dari istilah sebelumnya, kependekan dari Definition
Description

Penggunaan dari tag-tag diatas adalah seperti ini:


view plaincopy to clipboardprint?
1. <dl>
2. <dt>Obeng</dt>
3. <dd>Perkakas yang digunakan untuk memutar suatu skrup</dd>
4. <dt>Stop Kontak</dt>
5. <dd>Suatu panel yang digunakan sebagai sumber listrik</dd>
6. <dt>Mur</dt>
7. <dd>Pasangannya baut, digunakan untuk menjepit sesuatu, bagian laki-lakinya</
dd>
8. <dt>Baut</dt>
9. <dd>Pasangannya Mur, digunakan untuk menjepit sesuatu, bagian
10. perempuannya</dd>
11. </dl>

Kalian dapat mencobanya di papan tulis yang disediakan di bagian bawah halaman ini.
Tutorial HTML
8. Membuat Form Isian pada HTML

Form isian atau borang dalam istilah bahasa Indonesianya, dapat kalian buat di halaman web
kalian untuk berbagai macam keperluan. Misalnya untuk aplikasi buku tamu, login, registrasi,
dan lain sebagainya. Dibanding skill pelajaran html lainnya seperti membuat paragraf atau
memasukkan gambar, membuat form relatif lebih sulit. Untuk itu kalian sebaiknya membaca
setiap petunjuk disini agar lebih mudah memahami cara membuat form ini.

Di bawah ini adalah contoh sebuah form atau borang dengan berbagai macam jenis input.

Top of Form
Nama Kalian :

Password :

Baca
Hobi :
Berenang

Sudah
Pernah ke Klikbelajar.com sebelumnya?
Belum
Mana yang kalian sukai?

Ceritakan tentang diri kalian :


Diatas adalah contoh dari form sederhana yang akan kalian pelajari disini. Sekarang siapkan
bahan-bahannya, yaitu <form>, <input>, <select>, dan <option>.

Sebelum mulai mempelajari tiap tag, ada baiknya kalian mengetahui bahwa untuk membuat
sebuah form yang dapat dikirim dan diproses di server kalian harus mengetahui PHP dan SQL.
Disini kalian hanya mempelajari dasarnya saja yaitu bagaimana cara menampilkan sebuah form
yang baik.

Sekarang kalian lihat form diatas, dan perhatikan bahwa tiap baris mempunyai jenis input yang
berbeda-beda. Apa itu input? Input adalah sesuatu yang dimasukkan oleh pembaca halaman web
kalian misalnya teks. Dari atas ke bawah :

 Text
 Password

 Checkbox

 Radio

 Select

 Textarea

Input tipe Text digunakan untuk memasukkan karakter-karakter yang jumlahnya tidak terlalu
banyak. Berbeda dengan Textarea yang dapat menampung karakter dalam jumlah besar. Contoh
penggunaannya adalah sebagai berikut :

view plaincopy to clipboardprint?


1. Nama : <input type="text" size="25" />
2. Pesan Anda : <input type="textarea" cols="20" rows="20" />

Sedangkan untuk input tipe Password hampir sama dengan Text hanya saja karakter yang
diketik dalam kolom password otomatis akan terlihat ***** untuk menjaga kerahasiaan dari
password tersebut.
Cara membuatnya cukup mudah :

view plaincopy to clipboardprint?


1. Password : <input type="password" size="25" />

Silahkan script html tersebut kalian coba pada papan tulis di bawah.

Checkbox, Radio, dan Select merupakan elemen dari form yang digunakan untuk memilih dari
beberapa pilihan yang disediakan.
Checkbox

Checkbox digunakan jika pilihan yang disediakan dapat dipilih lebih dari satu. Lihat
penggunaannya berikut ini :

view plaincopy to clipboardprint?


1. Pelajaran yang kalian sukai :
2. <input type="checkbox"> Matematika
3. <input type="checkbox"> Fisika
4. <input type="checkbox"> Kimia
5. <input type="checkbox"> Sejarah

Radio

Radio digunakan apabila pilihan yang disediakan hanya dapat dipilih satu saja. Contoh
penggunaannya :

view plaincopy to clipboardprint?


1. Pelajaran yang kalian sukai :
2. <input name="favorit" value="matematika" type="radio"> Matematika
3. <input name="favorit" value="fisika" type="radio"> Fisika
4. <input name="favorit" value="kimia" type="radio"> Kimia
5. <input name="favorit" value="sejarah" type="radio"> Sejarah

Select

Select digunakan apabila tampilan pilihan yang kita sediakan berbentuk dropdown. Sebenarnya
aplikasinya mirip dengan Radio yaitu pilihan yang boleh dipilih hanya satu. Select digunakan
selalu bersamaan dengan Option. Berikut ini adalah contoh penggunaannya :

view plaincopy to clipboardprint?


1. Pelajaran yang kalian sukai :
2. <select name="favorit">
3. <option>Matematika
4. </option><option>Kimia
5. </option><option>Fisika
6. </option><option>Bahasa
7. </option></select>

Silahkan kode-kode diatas dicoba di papan tulis dibawah agar kalian lebih memahami
aplikasinya.

Browser anda tidak mendukung IFRAME

Anda mungkin juga menyukai