Untuk topik kali ini
penulis ingin membahas mengenai lists
pada HTML, dimana list yang dimaksud ialah untuk membuat point-point utama dalam
suatu halaman web. Point utama ini bukanlah merupakan suatu judul, namun
termasuk suatu garis besar yang nantinya akan digunakan. List yang akan dibahas
pada halaman yang satu ini antara lain ordered
list dan unordered list. Kedua list
tersebut sebenarnya sama saja dalam hal fungsi, yaitu untuk membuat point-point
tertentu yang ingin disisipkan. Untuk lebih jelasnya, perhatikan contoh
berikut:
<html>
<head/>
<body>
<ol type='1'>
<li>nomor
1</li>
<li>nomor 2</li>
<li>nomor 3</li>
</ol>
</body>
</html>
Pada contoh diatas,
terdapat sebuah contoh program untuk membuat list dengan ordered list. Dimana pada
ordered list tersebut terdapat type=’1’ yang artinya pada saat program dibuka
dalam browser maka yang terdapat dalam tag <ol>
atau isi dari tag <li> akan
berurut dimulai dari nomor 1. Dengan kata lain pada tag li yang isinya “nomor 1”
akan diberi urutan kesatu, “nomor 2” akan diberi urutan kedua serta seterusnya.
Semua urutan itu akan muncul dengan sendirinya sesuai dengan type pada tag
<ol>. Dan untuk tag <ol> sendiri memiliki beberapa type yang dapat
digunakan, diantaranya angka 1, yang berartikan urut mulai angka 1. Ada type
dengan i, yang artinya urut dengan angka romawi dimulai dengan i. Type dengan
huruf A, yang artinya urut dimulai dari huruf A besar. Ada type dengan a, yang
berartikan urut dimulai dari huruf a kecil serta ada type dengan karakter |
yang artinya urut dengan dimulai angka 1 sama seperti type dengan 1.
Selain dengan menggunakan
ordered list, dapat juga menggunakan unordered list. Dimana pada list yang satu
ini tidak lagi dengan penomoran/urutan yang dapat menunjukan keberapa item
tersebut berada. Pada unordered list, urutan list akan dapat dibentuk point
dengan sebuah bulatan kosong, bulatan hitam serta kotak, tidak lagi dengan
penomoran seperti pada ordered list. Untuk lebih jelasnya, perhatikan contoh
berikut:
<ul type='circle'>
<li>nomor
1</li>
<li>nomor
1</li>
<li>nomor
1</li>
</ul>
Sama saja jika soal
penulisan serta urutan dalam penulisan ordered list dengan unordered list,
dimana awal dengan menggunakan tag dari jenis listnya yang diikuti dengan type
dari list tersebut, serta untuk item pada list itu sendiri menggunakan bantuan
tag <li>. Yang membedakan hanyalah jika dalam ordered list ditandakan
dengan tag <ol>, pada unordered list ditandai dengan tag <ul>. Dan untuk tampilan dari
list tersebut akan mengikuti dengan sendirinya sesuai dengan jenis listnya
serta type dari list tersebut. untuk unordered list terdapat list dengan type disc yang artinya item dalam list akan
diberi urutan dengan sebuah lingkaran hitam, sedangkan untuk circle akan diberi urutan dengan
bulatan kosong, dan untuk square akan
diberi urutan dengan kotak berwarna hitam.
Selain untuk list, pada
topik kali ini penulis ingin menambahkan sedikit mengenai characters formatting, yang mana dalam characters formatting ini
Anda dapat membuat berbagai format karakter sesuai dengan yang diinginkan. Misal
Anda ingin menulis dengan cetak tebal, garis bawah atau dengan huruf yang
miring. Semua dapat dilakukan dengan menggunakan bantuan dari characters
formatting. Sama halnya seperti pada saat Anda ingin menuliskan huruf-huruf
dalam Ms.Word, untuk membuat tulisan tebal Anda dapat menggunakan format bold,
underline untuk garis bawah dan italic untuk tulisan miring. Namun bedanya jika
dalam Ms.Word Anda mengandalkan tools dengan tulisan B/U/I atau menggunakan
ctrl + b/u/i, namun dalam HTML Anda harus menyisipkan tag dari masing-masing
format karakter tersebut. untuk lebih jelasnya, mari perhatikan contoh program
berikut:
<html>
<head/>
<body>
<b>tulisan tebal dengan tag
bold</b><br>
<u>bergaris bawah dengan
underline</u><br>
<i>tulisan miring dengan
italic</i><br>
<s>membuat coretan pada
tulisan</s><br>
5<sup>5</sup> =
25<br>
H<sub>2</sub>O<br>
<big>membuat lebih
besar</big> <font color="red">dan</font>
<small>lebih kecil</small><br>
<pre>tulisan dengan fixed
font</pre><br>
<tt>tulisan dengan fixef font
juga</tt><br>
</body>
</html>
Untuk yang pertama dalam
contoh program tersebut terlihat sebuah tulisan didalam sebuah tag <b>
yang artinya tulisan didalamnya akan diberi format bold atau tulisan tersebut
akan dibuat tebal dibanding dengan tulisan normalnya. Begitupun dengan format
yang berikutnya, tag <u> untuk underline atau memberi garis bawah pada
tulisan, tag <i> untuk membuat tulisan menjadi miring, tag <s>
untuk membuat tulisan dengan garis seperti underline namun garis tersebut bukan
dibawah melainkan ditengan huruf yang membuat coretan pada huruf tersebut. tag
<sup> untuk membuat pangkat pada tulisan dan tag <sub> sebaliknya
untuk menaruh huruf tersebut menjadi berada lebih kebawah dari posisi mulanya. Tag
<big> untuk membuat tulisan menjadi berukuran lebih besar dari ukuran
semula, begitupun dengan tag <small> yang berarti akan membuat tulisan
lebih kecil dari ukuran sebelumnya. Dan untuk tag <font> yang diikuti
color (warna) ialah untuk membuat warna pada tulisan berbeda dengan biasanya,
namun penulis menyisipkan tag font tersebut hanya untuk memisahkan antara
tulisan yang diberi tag <big> dengan tulisan selanjutnya yang diberikan
tag <small>, sedangkan tulisan “dan” sendiri tidak termasuk tag
<big> maupun <small> karena berada diluar kedua tag tersebut. Dan
yang terakhir ialah untuk tag <tt> dan <pre> dimana kedua tag
tersebut berguna sebagai pembuat format dengan fixed font, yang mana bentuk
tulisan tidak seperti pada font sebelumnya.
Alasan penulis ingin
membahas mengenai list pada html serta characters formatting ialah karena kedua
hal tersebut umum sekali digunakan pada halaman html, dan memang sewajibnya
untuk diketahui. Kerap kali pada saat ingin menulis sesuatu di halaman web,
penulis tersebut kebingungan untuk membuat format / list yang digunakan, karena
tidak tahunya tag apa saja yang sebenarnya dibutuhkan. Maka dengan demikian
penulis ingin membahas mengenai topik yang satu ini, jika memang sudah tahu,
setidaknya andaipun suatu saat Anda lupa, namunAnda sudah tahu apa yang Anda
harus cari di internet/buku untuk kedua hal tersebut. sekilas memang terlihat
biasa saja untuk list dan characters formatting, terutama untuk list sendiri
karena memang untuk menulis di sebuah halaman web masih menjadi suatu hal yang
jarang digunakan, bahkan masih banyak pula yang menggunakan penomoran/pengurutan
secara manual yang ditulis langsung dari keyboard, lain halnya dengan characters
formatting yang agak sering digunakan, terutama antara bold, italic dan
underline. Namun untuk selain itu, masih jarang sekali untuk digunakan. Tetapi
perlu diingat, bahwa walau semua itu terlihat biasa saja, namun jika Anda tidak
mengetahui semua hal itu, maka jika suatu saat Anda tengah membutuhkan salah
satunya tanpa dapat ditulis dengan manual dari keyboard, maka semua itu akan
menjadi hal yang mendadak penting dan membuat Anda panik jika memang itu sangat
penting tanpa Anda tahu apa yang harus Anda lakukan untuk menghadapi
format/list tersebut. lagipula menurut penulis, semua characters formatting
tersebut maupun list yang penulis tulis diatas merupakan hal yang umum sekali,
jadi tidak akan membuat sulit untuk dihafal, yang penting tahu dan paham dengan
penggunaan dari setiap tagnya, maka otak dapat lebih mudah mengingat dengan
sendirinya.
Namun lebih baiknya jika
pun memang Anda kesulitan untuk menghafal semua tag tersebut, maka tidak perlu
Anda memaksakan untuk menghafalnya, karena untuk programming bukanlah untuk
dihafal dalam setiap tag/code nya, cukup dengan menggunakannya dalam
pemrograman/latihan sehari-hari, maka semua code/tag tersebut akan dengan
sendirinya tertanam didalam otak (bukan berarti otak Anda isinya berubah
menjadi tag/code pemrograman), bahkan jari pun akan dengan sendirinya mengetik
code yang Anda butuhkan ketika sedang membuat sebuah program. Kuncinya ialah
dengan menggunakannya/mencoba programnya sehari-hari, tidak hanya membaca dan
melihat hasilnya saat belajar tersebut. Sama halnya dengan belajar di sekolah,
pada saat siswa hanya memperhatikan dan membaca slide yang ditampilkan guru,
maka murid hanya akan mengingat dan memahaminya sesaat, lain halnya dengan
menulis dan membacanya kembali dirumah / pada saat berlatih untuk mengerjakan
sebuah soal. Semua itu akan memberikan perbedaan, sedikit perbedaan yang
menghasilkan buah berbeda bernilai fatal. Jadi intinya, penulis sangat berharap
agar Anda tidak hanya membaca dari tulisan penulis ini, namun juga mencoba
programnya dan berlatih untuk membuat program lain selain dari contoh yang
telah diberikan penulis. Jika bisa, cobalah membuat suatu program tanpa melihat
contoh yang Anda punya, karena dengan demikian Anda dapat melatih otak Anda
untuk menghafal dan memahami code.
No comments:
Post a Comment