MEMBUAT DAFTAR DAN DESKRIPSINYA

Selain daftar berurutan dan daftar tak berurutan, dalam HTML ada juga jenis daftar yang disertai dengan pendeskripsian dari tiap itemnya.
Membuat daftar dengan item yang lengkap disertai dengan deskripsinya, tag yang digunakan adalah:

<dl>

Mendefinisikan daftar

<dt>

Mendefinisikan item

<dd>

Mendefinisikan keterangan item

Contoh:

Jika ditulis: Beberapa alternatif aplikasi browser ponsel yang pernah saya kenal antara lain: <dl> <dt>Opera Mini</dt> <dd>Browser Ponsel yang merupakan pilihan utama dari yang paling sering saya gunakan</dd> <dt>Ucweb</dt> <dd>Pilihan kedua dari yang paling sering saya gunakan.</dd> </dd> <dt>Bolt</dt> <dd>Sebenarnya cukup lumayan, tapi saya kurang tertarik dengan tampilanya.</dd> <dt>Morange </dt> <dd>Yang ini juga cukup lumayan, tapi saya jarang gunakan. </dd> <dt>Teashark<dt> <dd>Pernah sekali mencoba, tapi sepertinya tidak cukup bersahabat dengan ponsel saya.</dd> </dl> Hasilnya adalah: Beberapa alternatif aplikasi browser ponsel yang pernah saya kenal antara lain: Opera Mini Browser Ponsel yang merupakan pilihan utama dari yang paling sering saya gunakan Ucweb Pilihan kedua dari yang paling sering saya gunakan. Bolt Sebenarnya cukup lumayan, tapi saya kurang tertarik dengan tampilanya. Morange Yang ini juga cukup lumayan, tapi saya jarang gunakan. Teashark Pernah sekali mencoba, tapi sepertinya tidak cukup bersahabat dengan ponsel saya.

Setelah melihat contoh diatas, silahkan coba untuk dipraktekan sendiri.

Untuk diketahui, gabungan tag <dl> <dt> dan <dd> ini ternyata tidak menampilkan secara maksimal pada browser bawaan pada hp saya sendiri, SE K608i yang telah di sulap menjadi K600i.
Namun sangat jelas hasilnya jika pada browser Operamini.

Sebelumnya | Berikutnya

DAFTAR TAK BERURUTAN

Jika pada posting sebelumnya adalah mengenai Membuat daftar berurutan, kali ini adalah membuat daftar tak berurutan.
Oh ya, untuk sekedar diketahui juga, semua posting yang ada di PELANGLANG MAYA ini adalah di ketik dengan ponsel dengan menggunakan teks editor yang terdapat di operamini mod. Belum punya opmin mod? Coba cari di postingan terdahulu, Jad dan Jar.

Langsung saja ke konteks utamanya, belajar html.
Untuk membuat daftar tak berurutan, atau daftar yang itemnya ditandai dengan simbol-simbol tertentu, caranya hampir sama dengan membuat daftar yang berurutan. Hanya saja, jika pada yang berurutan menggunakan tag <ol>(ordered list), sedangkan untuk yang tidak berurutan adalah dengan menggunakan tag <ul>(unordered list) yang juga disertai dengan tag <li>. Jadinya seperti ini, <ul><li>item</li></ul>.
Atribut yang digunakan untuk tag <ul> ini adalah, "disc(standar)", "circle", dan "square".
Untuk mengetahui bagaimana cara kerjanya, perhatikan contoh di bawah ini.
Contoh 1:

Jika ditulis: Beberapa merk ponsel terkenal antara lain: <ul> <li>Nokia</ li> <li>Sony Ericsson</li> <li>Samsung</li> <li>Siemens</li> <li>Motorolla> </ul> Hasilnya adalah: Beberapa merk ponsel terkenal antara lain: Nokia Sony Ericsson Samsung Siemens Motorolla

Contoh diatas adalah tampilan standar dari tag <ul> yang tanpa menggunakan atribut.
Contoh 2:

Jika ditulis: Beberapa merk ponsel terkenal antara lain: <ul type="circle"> <li>Nokia</li> <li>Sony Ericsson</li> <li>Samsung</li> <li>Siemens</li> <li>Motorolla</li></ul> Hasilnya adalah: Beberapa merk ponsel terkenal antara lain: Nokia Sony Ericsson Samsung Siemens Motorolla

Jika ditulis: Beberapa merk ponsel terkenal antara lain: <ul type="square"> <li>Nokia</li> <li>Sony Ericsson</li> <li>Samsung</li> <li>Siemens</li> <li>Motorolla</li></ul> Hasilnya adalah: Beberapa merk ponsel terkenal antara lain: Nokia Sony Ericsson Samsung Siemens Motorolla

Contoh diatas adalah penggunaan tag <ul> dengan atributnya, baik dengan "square", ataupun "circle", masing-masing memiliki tanda item dengan ciri khas tersendiri.

Sebelumnya | Berikutnya

MEMBUAT DAFTAR BERURUTAN

Tag <ol>.
Tag <ol> berfungsi untuk mendefinisikan sebuah list atau daftar yang berurutan. Dan dalam penggunaannya, tag <ol> di ikuti dengan tag <li> yang mendefinisikan item dalam daftar.
Cara penulisanya adalah dengan menyisipkan tag <li> diantara tag <ol> dan penutupnya seperti ini, <ol><li>item</li></ol>.Sementara atribut untuk tag <ol> adalah "type" dan "start".
Type adalah untuk menentukan seperti apa model urutan yang ingin ditampilkan dalam browser. Nilai yang dapat digunakan adalah:

• "1" untuk 1,2,3...dst (standar).
• "A" untuk A,B,C...dst.
• "a" untuk a,b,c...dst.
• "i" untuk i,ii,iii,iv,...dst.
• "I" untuk I,II,III,IV...dst.

Start, untuk menentukan mulai urutan item yang mana/ke berapa yang ingin ditampilkan dalam browser.

Untuk lebih jelasnya, perhatikan beberapa contoh berikut ini.
Contoh 1:

Tulis: Beberapa merk ponsel terkenal antara lain: <ol> <li>Nokia</li> <li>Sony Ericsson</li> <li>Samsung</li> <li>Siemens</li> <li>Motorolla</li> </ol> Hasilnya adalah: Beberapa merk ponsel terkenal antara lain: Nokia Sony Ericsson Samsung Siemens Motorolla

Pada contoh diatas tag <ol> tanpa menggunakan atribut apapun, maka yang ditampilkan dalam browser adalah tampilan standar. Yaitu model urutan yang dimulai dari angka "1" dan seterusnya.

Contoh 2:

Jika ditulis: Beberapa merk ponsel terkenal antara lain: <ol type="A"> <li>Nokia</li> <li>Sony Ericsson</li> <li>Samsung</li> <li>Siemens</li> <li>Motorolla</li> </ol> Maka hasilnya adalah : Beberapa merk ponsel terkenal antara lain: Nokia Sony Ericsson Samsung Siemens Motorolla

Dan jika ditulis: Beberapa merk ponsel terkenal antara lain:<ol type="I"> <li>Nokia</li> <li>Sony Ericsson</li> <li>Samsung</li> <li>Siemens</li> <li>Motorolla</li> </ol> Maka hasilnya adalah : Beberapa merk ponsel terkenal antara lain: Nokia Sony Ericsson Samsung Siemens Motorolla

Pada contoh di atas, value/nilai "A" digunakan untuk A, B, C.. dst. Dan "I" untuk I, II, III... dst.
Silahkan coba sendiri untuk value yang lain.

Contoh 3:

Jika ditulis: Beberapa merk ponsel terkenal antara lain: <ol type="1" start="3"> <li>Samsung</li> <li>Siemens</li> <li>Motorolla</li> </ol> Maka hasilnya: Beberapa merk ponsel terkenal antara lain: Samsung Siemens Motorolla

Pada contoh di atas menjelaskan bagaimana atribut start bekerja. Dengan memberikan valu "3" maka urutan daftar item dimulai dari 3.

Sebelumnya | Berikutnya

KODE HEXA WARNA

Terkait dengan belajar mengatur teks, berikut ini adalah beberapa contoh warna dan kodenya.
Mengingat diri saya yang bukan type "teliti", harap dimaklumi jika ada ketidakcocokan antara kode dan warnanya. Sampe pegel neh jempol buat ngetik...;D

#000000	#000033	#000066	#000099	#0000CC	#0000FF	#003300
#003333	#003366	#003399	#0033CC	#0033FF	#006600	#006633
#006666	#006699	#0066CC	#0066FF	#009900	#009933	#009966
#009999	#0099CC	#0099FF	#00CC00	#00CC33	#00CC66	#00CC99
#00CCCC	#00CCFF	#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC
#00FFFF	#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF	#336600
#336633	#336666	#336699	#3366CC	#3366FF	#339900	#339933
#339966	#339999	#3399CC	#3399FF	#33CC00	#33CC33	#33CC66
#33CC99	#33CCCC	#33CCFF	#33FF00	#33FF33	#33FF66	#33FF99
#33FFCC	#33FFFF	#660000	#660033	#660066	#660099	#6600CC
#6600FF	#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF	#669900
#669933	#669966	#669999	#6699CC	#6699FF	#66CC00	#66CC33
#66CC66	#66CC99	#66CCCC	#66CCFF	#66FF00	#66FF33	#66FF66
#66FF99	#66FFCC	#66FFFF	#990000	#990033	#990066	#990099
#9900CC	#9900FF	#993300	#993333	#993366	#993399	#9933CC
#9933FF	#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF	#CC0000
#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF	#CC3300	#CC3333
#CC3366	#CC3399	#CC33CC	#CC33FF	#CC6600	#CC6633	#CC6666
#CC6699	#CC66CC	#CC66FF	#CC9900	#CC9933	#CC9966	#CC9999
#CC99CC	#CC99FF	#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC
#CCCCFF	#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FF0000	#FF0033	#FF0066	#FF0099	#FFCC00	#FFCC33	#FFCC66
#FFCC99	#FFCCCC	#FFCCFF	#FFFF00	#FFFF33	#FFFF66	#FFFF99
#FFFFCC	#FFFFFF	#222222	#222244	#222288	#2222AA	#2222BB
#2222EE	#224422	#224444	#224488	#2244AA	#2244BB	#2244EE
#228822	#228844	#228888	#2288AA	#2288BB	#2288EE	#22AA22
#22AA44	#22AA88	#22AAAA	#22AAEE	#22EE22	#22EE44	#22EE88
#22EEAA	#22EEEE	#442222	#442244	#442288	#4422AA	#4422EE
#444422	#444444	#444488	#4444AA	#4444EE	#448822	#448844
#448888	#4488AA	#4488EE	#44AA22	#44AA44	#44AA88	#44AAEE

Untuk yang menggunakan browser di PC/Laptop, bisa melihat tabel warna lebih lengkap lagi Di sini

Selain warna-warna/kode-kode di atas, masih banyak lagi jenis warna yang lain. Dan terkait dengan belajar html, kita dapat mengganti semua nama warna yang ada dengan kode-kode tertentu.

Sebelumnya | Berikutnya

HEADING DAN PARAGRAF HTML

Membuat Heading

Heading itu apa ya? Saya sendiri kurang begitu paham..
Mungkin, kurang lebihnya heading adalah isi bagian atas pada suatu tulisan, artikel, bab, ataupun postingan atau yang biasa disebut dengan judul, yang pada umumnya ukuran teksnya lebih besar daripada teks yang terdapat pada seluruh isi tulisan. Betul tidak? Mohon pencerahanya jika saya keliru.

Langsung saja, belajar HTML saya kali ini adalah tentang heading yang ditandai dengan tag antara <h1> s/d <h6>.
Untuk lebih jelasnya bagaimana cara kerja tag <h1> - <h6>, perhatikan contoh berikut ini:

Jika ditulis: <h1>Kepala Satu</h1> <h3>Kepala Tiga</h3> <h4>Kepala Empat</h4> <h5>Kepala Lima</h5> <h6>Kepala Enam</h6> Hasilnya adalah: Kepala Satu Kepala Tiga Kepala Empat Kepala Lima Kepala Enam

Pada contoh diatas, sekilas saja ternyata hampir sama dengan jika menggunakan tag <font> yang di ikuti dengan atribut size seperti pada Belajar sebelumnya.
Namun demikian, jelas berbeda. Karena fungsinya sebagai "heading", maka secara otomatis browser akan memberikan baris yang lain untuk kata/kalimat berikutnya.
Dan dari beberapa informasi yang pernah saya dapatkan, tag untuk heading ini adalah yang lebih memiliki peran penting dalam hal SEO.

SEO itu apa? Maaf, sebaiknya jangan dulu tanyakan kepada saya.

Membuat Paragraph

Untuk membuat paragraph dalam sebuah artikel, tag yang digunakan adalah <p>.
Langsung ke contoh:

Tulis: <p>Ini adalah paragraph pertama pada artikel belajar HTML</p> <p>Dan ini adalah paragraph kedua pada artikel belajar HTML</p> Hasil: Ini adalah paragraph pertama pada artikel belajar HTML Dan ini adalah paragraph kedua pada artikel belajar HTML

Perataan

Untuk mengatur perataan baris kata pada suatu paragraph, yaitu dengan menambahkan atribut "align" berserta nilainya yaitu left, center, right.
Contoh:

Jika ditulis: <p align="left">Ini adalah paragraph pertama rata kiri pada artikel belajar HTML</p> <p align="center">Dan ini adalah paragraph kedua rata tengah pada artikel belajar HTML</p> <p align="right">Ini adalah paragraph ketiga rata kanan pada artikel belajar HTML</p> Hasilnya: Ini adalah paragraph pertama rata kiri pada artikel belajar HTML Dan ini adalah paragraph kedua rata tengah pada artikel belajar HTML Ini adalah paragraph ketiga rata kanan pada artikel belajar HTML

Terkait Dengan Paragraph

Untuk pindah ke baris berikutnya pada penulisan dengan html, tombol "Enter" pada komputer atau tanda "Panah bengkok kebawah-kiri" pada ponsel, tidak akan dapat berfungsi sebagaimana mestinya. Untuk masalah ini, tag <br> adalah yang berfungsi untuk pindah ke baris berikutnya.
Contoh:

Jika ditulis: Ini baris pertama<br>Ini baris kedua<br>Ini baris ketiga Hasilnya: Ini baris pertama Ini baris kedua Ini baris ketiga

Jika ingin memberikan baris kosong, maka cukup tambahkan tag <br> beberapa kali sesuai yang di inginkan.

Menjorok Ke Dalam

Untuk membuat paragrap yang letaknya jadi agak menjorok ke dalam, tag yang di perlukan adalah <blockquote>
Contoh:

Tulis: <p>Ini hanya paragraph standar yang terletak sebagaimana mestinya.</p><p><blockquote>Sedangkan ini adalah paragraph baru yang menjorok ke dalam</blockquote></p> Hasilnya: Ini hanya paragraph standar yang terletak sebagaimana mestinya. Sedangkan ini adalah paragraph baru yang menjorok ke dalam.

Doooh... mata ngantuk jempol pegel, hooaaem...
Udahan dulu yah, besok disambung lagi.

Sebelumnya | Berikutnya