Bun No Ichi: Tag HTML

Showing posts with label Tag HTML. Show all posts

1.01.2012

Tag Definition Data dan Atributnya

1/01/2012 05:22:00 AM Bun No Ichi

Tag ini digunakan beriringan dengan tag <DL> dan tag <DT>. <DD> digunakan untuk membentuk susunan yang menandakan bahwa kata yang ditulis setelah tag <DD> merupakan arti dari kata yang tertulis pada tag <DT>.

Contoh :

<DL>

<DT>YUI
<DD>Adalah seorang penyanyanyi cewe asal jepang.

<DT>Yoshioka
<DD>Nama marga dari ayahnya.

<DT>YUI Yoshioka
<DD>Penyanyi cewe asal jepang idola saya.

</DL>

akan menghasilkan ...

YUI: Adalah seorang penyanyanyi cewe asal jepang.
Yoshioka: Nama marga dari ayahnya.
YUI Yoshioka: Penyanyi cewe asal jepang idola saya.

Tag Definition Term dan Atributnya

1/01/2012 05:18:00 AM Bun No Ichi No comments

Tag ini digunakan beriringan dengan tag <DL>. <DT> digunakan untuk membentuk susunan yang menandakan bahwa kata yang ditulis setelah tag <DT> merupakan kata yang akan diartikan.

Contoh :

<DL>

<DT>YUI
<DD>Adalah seorang penyanyanyi cewe asal jepang.

<DT>Yoshioka
<DD>Nama marga dari ayahnya.

<DT>YUI Yoshioka
<DD>Penyanyi cewe asal jepang idola saya.

</DL>

akan menghasilkan ...

YUI: Adalah seorang penyanyanyi cewe asal jepang.
Yoshioka: Nama marga dari ayahnya.
YUI Yoshioka: Penyanyi cewe asal jepang idola saya.

Tag Definition List dan Atributnya

1/01/2012 05:05:00 AM Bun No Ichi No comments

Tag ini digunakan untuk membuat daftar dari arti suatu kata. Cara kerjanya hampir sama dengan tag <UL> dan <OL>, tapi terdapat sedikit perbedaan akan tag <DL> ini dikarenakan tag ini akan menghasilkan tampilan yang tidak memiliki tanda pengurut daftar.

Contoh :

<DL>

<DT>YUI
<DD>Adalah seorang penyanyanyi cewe asal jepang.

<DT>Yoshioka
<DD>Nama marga dari ayahnya.

<DT>YUI Yoshioka
<DD>Penyanyi cewe asal jepang idola saya.

</DL>

akan menghasilkan ...

YUI: Adalah seorang penyanyanyi cewe asal jepang.
Yoshioka: Nama marga dari ayahnya.
YUI Yoshioka: Penyanyi cewe asal jepang idola saya.

Tag <DL> digunakan beriringan dengan tag <DT> dan <DD> untuk membuat daftar dari arti suatu kata tersebut. Tag <DL> hanya digunakan sebagai penanda bahwa suatu daftar tentang arti dari suatu kata sedang dibentuk.

Tag Ordered List dan Atributnya

1/01/2012 04:34:00 AM Bun No Ichi No comments

TYPE

START

Tag ini memiliki fungsi yang hampir sama dengan Tag <UL>, bedanya Tag ini mendaftarkan suatu barang secara berurutan. <OL> sendiri merupakan singkatan dari Ordered List yang berarti daftar yang berurut. Seperti hal-nya <UL> tag ini pun dalam penggunaannya harus disertai dengan Tag <Li> untuk mendefinisikan setiap barang yang didaftar.

Coba perhatikan contoh berikut :

<OL>
<LI>Dari Stasiun Kiaracondong naek angkot
<LI>Sampai di perempatan Binong Lurus
<LI>Ngelewatin Pasar
<LI>Lihat di sebelah kanan jalan Gedung BLK sebelah kiri Kampus ku
</OL>

akan menghasilkan ...

Dari Stasiun Kiaracondong naek angkot
Sampai di perempatan Binong Lurus
Ngelewatin Pasar
Lihat di sebelah kanan jalan Gedung BLK sebelah kiri Kampus ku

Perhatikan, bahwa dalam penulisan tag tersebut kita tidak mengurutkan dan memberi nomor sama sekali, tetapi browser mengartikan tag tersebut mendaftarkan dan memberi nomor secara terurut.

TYPE

Ada banyak jenis pengurutan pada OL. Dengan atribut tipe kita dapat membuat urutan berdasarkan beberapa jenis urutan seperti dibawah ini.

Tipe "1" (default):

<OL type="1">
<LI>Komunikasi Data</LI>
<LI>Kalkulus</LI>
<LI>Sistem Operasi</LI>
</OL>

Tag diatas akan menghasilkan :

Komunikasi Data
Kalkulus
Sistem Operasi

Tipe "A":

<OL type="A">
<LI>Komunikasi Data</LI>
<LI>Kalkulus</LI>
<LI>Sistem Operasi</LI>
</OL>

Tag diatas akan menghasilkan :

Komunikasi Data
Kalkulus
Sistem Operasi

Tipe "a":

<OL type="a">
<LI>Komunikasi Data</LI>
<LI>Kalkulus</LI>
<LI>Sistem Operasi</LI>
</OL>

Tag diatas akan menghasilkan :

Komunikasi Data
Kalkulus
Sistem Operasi

Tipe "I":

<OL type="I">
<LI>Komunikasi Data</LI>
<LI>Kalkulus</LI>
<LI>Sistem Operasi</LI>
</OL>

Tag diatas akan menghasilkan :

Komunikasi Data
Kalkulus
Sistem Operasi

Tipe "i":

<OL type="i">
<LI>Komunikasi Data</LI>
<LI>Kalkulus</LI>
<LI>Sistem Operasi</LI>
</OL>

Tag diatas akan menghasilkan :

Komunikasi Data
Kalkulus
Sistem Operasi

START

Atribut ini digunakan untuk menentukan angka untuk memulai daftar yang akan kita buat. Coba

perhatikan contoh berikut :

Berikut ini adalah sila 3 sampai dengan ke 5 dari Pancasila:
<OL START="3">
<LI>Persatuan Indonesia</LI>
<LI>Kerakyatan yang dipimpin oleh Hikmat Kebijaksanaan dalam Permusyaratan Perwakilan</LI>
<LI>Keadilan Sosial bagi Seluruh Rakyat Indonesia</LI>
</OL>

akan menghasilkan ...

Persatuan Indonesia
Kerakyatan yang dipimpin oleh Hikmat Kebijaksanaan dalam Permusyaratan Perwakilan
Keadilan Sosial bagi Seluruh Rakyat Indonesia

Tag Unordered List dan Atributnya

1/01/2012 04:05:00 AM Bun No Ichi No comments

TYPE

Tag ini merupakan singkatan dari Unordered List, yang berarti daftar yang tidak terurut. Tag ini bekerja bersama dengan Tag <Li>. <UL..> mendefinisikan daftarnya sedangkan <Li> mendefinisikan setiap barang yang ada di daftar tersebut.
Contoh :

Hal yang bisa kamu dapatkan di bunnoichi.blog.com :
<UL>
<LI>Ilmu pengetahuan</LI>
<LI>Hiburan</LI><
<LI>Tedman</LI>
<LI>Informasi menarik</LI>
</UL>

akan menghasilkan ...

Hal yang bisa kamu dapatkan di klikbelajar.com :

Ilmu pengetahuan
Hiburan
Teman
Informasi menarik

<UL> juga bisa digunakan untuk membuat daftar dari beberapa kategori, seperti contoh berikut :

<UL>
<LI>Pemrograman
<UL>
<LI>C++
<LI>VB
</UL>
</LI>
<LI>Pengantar
<UL>
<LI>Aljabar
<LI>Algoritma
<LI>Struktur Data
</UL>
</LI>
</UL>

akan menghasilkan ...

Pemrograman

C++
VB

Pengantar

Aljabar
Algoritma
Struktur Data

TYPE

Atribut ini digunakan untuk menentukan bentuk penanda pada setiap barang yang didaftar. TYPE dibagi menjadi 3, yaitu DISC (lingkaran berisi), CIRCLE (lingkaran kosong), dan SQUARE (persegi)

Contoh DISC :

<UL type="disc">
<LI>Komunikasi Data</LI>
<LI>Kalkulus</LI>
<LI>Sistem Operasi</LI>
</UL>

Tag diatas akan menghasilkan :

Komunikasi Data
Kalkulus
Sistem Operasi

Contoh CIRCLE :

<UL type="circle">
<LI>Komunikasi Data</LI>
<LI>Kalkulus</LI>
<LI>Sistem Operasi</LI>
</UL>

Tag diatas akan menghasilkan :

Komunikasi Data
Kalkulus
Sistem Operasi

Contoh SQUARE :

<UL type="square">
<LI>Komunikasi Data</LI>
<LI>Kalkulus</LI>
<LI>Sistem Operasi</LI>
</UL>

Tag diatas akan menghasilkan :

Komunikasi Data
Kalkulus
Sistem Operasi

Tag Table Data dan Atributnya

12/15/2011 02:43:00 AM Bun No Ichi No comments

ALIGN
VALIGN
BGCOLOR
COLSPAN
ROWSPAN

Tag ini digunakan beriringan dengan tag <Table..> dan tag <TR..>. Tag ini berguna untuk membuat satu sel tabel. Tag ini tidak dapat berdiri sendiri.

Penulisan :

<TD>bunnoichi.blogspot.com</TD>

akan menghasilkan tampilan sebagai berikut :

bunnoichi.blogspot.com

ALIGN

Atribut ini berguna seperti layaknya atribut align pada tag <TR..> yang digunakan untuk menentukan posisi dari setiap isi sel, apakah ingin rata kiri, tengah, atau rata kanan. Bedanya penggunaan atribut ini pada tag <TD..> hanya akan mempengaruhi untuk satu isi sel saja, tidak seperti tag <TR..> yang dapat mempengaruhi satu baris dari tabel.

WIDTH

Atribut ini berguna untuk menentukan lebar dari tag <TD..>. Ukuran yang dapat digunakan adalah pixel dan persen.

Contoh :

<TABLE>
<TR> <TD WIDTH=200>Belajar</TD> <TD WIDTH=400>Mudah</TD> </TR>
<TR> <TD>Asik</TD> <TD>Menyenangkan</TD> </TR>
<TR> <TD>di</TD> <TD>bunnoichi.blogspot.com</TD>
</TR>
</TABLE>

Akan menghasilkan tabel yang memiliki kolom dengan lebar yang berbeda, yang sebelah kiri memiliki lebar 200 pixel dan yang kanan memiliki lebar 400 pixel.

Belajar	Mudah
Asik	Menyenangkan
di	bunnoichi.blogspot.com

Penggunaan satuan persen pada tag lebih fleksibel dikarenakan penentuan ukurannya berupa persentase yang besar dan kecil ukuran dalam pixel-nya mengikuti besar dan kecil ukuran dari tabel. Misal kita memiliki tabel dengan ukuran 200 pixel.

Contoh :

<TABLE>
<TR> <TD WIDTH="30%">Belajar</TD> <TD WIDTH="70%">Mudah</TD> </TR>
<TR> <TD>Asik</TD> <TD>Menyenangkan</TD> </TR>
<TR> <TD>di</TD> <TD>bunnoichi.blogspot.com</TD>
</TR>
</TABLE>

Ingat !! Gunakan tanda kutip pada nilai persentase yang dimasukkan.

Tag diatas akan menghasilkan ukuran kolom kiri dari tabel memiliki lebar 30% dari 200 pixel ukuran tabel yaitu sebesar 60 pixel, sedangkan untuk kolom kanannya memiliki lebar sebesar 70% dari 200 pixel atau sebesar 140 pixel. Sehingga perbandingan antara tabel kiri dan kanan akan tetap stabil 3 : 7, meskipun ukuran tabel diubah-ubah.

Hasilnya :

Belajar	Mudah
Asik	Menyenangkan
di	bunnoichi.blogspot.Com

BGCOLOR

Sama seperti atribut BGCOLOR pada tag <TABLE..> dan tag <TR..> atribut ini berguna untuk menentukan warna latar dari sel. Bedanya penggunaan atribut BGCOLOR pada tag <TD..> hanya akan mempengaruhi satu sel saja.

Contoh :

<table>
<tr>
<td> Belajar </td>
<td BGCOLOR=red> HTML </td>
</tr>
<tr>
<td> bersama </td>
<td> bunnoichi.blogspot.com </td>
</tr>
</table>

Hasilnya :

Belajar	HTML
bersama	bunnoichi.blogspot.com

COLSPAN

Atribut ini digunakan untuk menggabungkan dua atau lebih sel dalam baris yang sama. Fungsinya sama seperti penggunaan 'Merge' dalam Microsoft Excel. Untuk lebih jelasnya lihat penggunaannya dalam beberapa contoh berikut ini.

Contoh I:

<table>
<tr>
<td> Belajar </td>
<td COLSPAN="2"> HTML </td>
<td> mudah </td>
</tr>
<tr>
<td> dan </td>
<td> lengkap </td>
<td> bersama </td>
<td> bunnoichi.blogspot.com </td>
</tr>
</table>

Hasilnya :

Belajar	HTML		mudah
dan	lengkap	bersama	bunnoichi.blogspot.com

Contoh II:

<table>
<tr>
<td> Belajar </td>
<td COLSPAN="3"> HTML </td>
</tr>
<tr>
<td> mudah dan </td>
<td> lengkap </td>
<td> bersama </td>
<td> bunnoichi.blogspot.com </td>
</tr>
</table>

Hasilnya:

Belajar	HTML
mudah dan	lengkap	bersama	bunnoichi.blogspot.com

Contoh III:

<table>
<tr>
<td> Belajar </td>
<td> HTML </td>
<td> mudah dan </td>
<td> lengkap </td>
<td> bersama </td>
</tr>
<tr>
<td COLSPAN="4"> bunnoichi.blogspot.com </td>
</tr>
</table>

Hasilnya:

Belajar	HTML	mudah	dan lengkap
bersama bunnoichi.blogspot.com

Yang harus diperhatikan untuk membuat colspan yang baik dalam html adalah jumlah setiap gabungan sel dan sisanya dalam setiap baris haruslah sama. Seperti contoh satu, pada baris pertama, terdapat 1 sel yang menggabungkan 2 sel, sementara sisanya yang tidak digabungkan ada 2, sehingga jumlah seluruh sel sebenarnya adalah 2 + 2 = 4, sama seperti baris dibawahnya bukan ? ada 4 sel.

Kemudian pada contoh nomor tiga, pada baris pertama, ada satu sel yang menggabungkan 3 sel, sementara sisa sel yang tidak digabung ada 1, sehingga total sel sebenarnya ada 1 + 3 = 4, sama seperti baris dibawahnya bukan ? ada 4 sel. Hal yang sama berlaku juga pada contoh nomor 3 yaitu 4 + 0 = 4.

ROWSPAN

Penggunaannya sama seperti COLSPAN hanya saja yang digabungkan adalah sel-sel dalam kolom yang sama. Untuk lebih jelas langsung saja melihat contoh-contoh berikut ini :

Contoh I:

<TABLE>
<TR>
<TD style="text-align:center">Belajar HTML</TD>
<TD ROWSPAN="2" style="text-align:center">mudah dan lengkap</TD>
<TD style="text-align:center">di</TD>
</TR>
<TR>
<TD style="text-align:center">situs</TD>
<TD style="text-align:center">bunnoichi.blogspot.com</TD>
</TR>
</TABLE>

Hasilnya:

Belajar HTML	mudah dan lengkap	di
situs	mudah dan lengkap	bunnoichi.blogspot.com

Contoh II (gabungan COLSPAN dan ROWSPAN):

<TABLE>
<TR>
<TD colspan="4" style="text-align:center">Belajar</TD>
</TR>
<TR>
<TD rowspan="3" style="text-align:center">mudah dan</TD>
<TD style="text-align:center">lengkap</TD>
<TD style="text-align:center">bersama</TD>
<TD rowspan="3" style="text-align:center">bunnoichi.blogspot.com</TD>
</TR>
<TR>
<TD style="text-align:center">bersama</TD>
<TD style="text-align:center">bunnoichi.blogspot.com</TD>
</TR>
<TR>
<TD style="text-align:center">bersama</TD>
<TD style="text-align:center">bunnoichi.blogspot.com</TD>
</TR>
</TABLE>

Hasilnya:

Belajar
mudah dan	lengkap	bersama	bunnoichi.blogspot.com
	bersama	bunnoichi.blogspot.com
	bersama	bunnoichi.blogspot.com

Untuk membuat ROWSPAN yang baik, hal yang harus diperhatikan ada posisi sel yang di ROWSPAN. Posisi tersebut akan menciptakan sel-sel baru pada baris di bawahnya. Sehingga sel-sel yang akan ditambahkan pada baris di bawahnya harus menyesuaikan dengan jumlah sel pada baris diatasnya. Pada contoh nomor satu, pada baris pertama, terdapat satu sel yang me-ROWSPAN 2 sel. Sedangkan jumlah total sel pada baris pertama ada 3 buah. Artinya, untk membuat tabel yang bagus, pada baris kedua kita cukup menambahkan 2 sel tambahan karena 1 sel telah diciptakan dari hasil ROWSPAN baris sebelumnya.

11.25.2011

11/25/2011 09:38:00 PM Bun No Ichi No comments

Belajar	HTML
bersama	Bun No Ichi

Tag Table Row dan Atributnya

11/25/2011 09:16:00 PM Bun No Ichi No comments

Tag ini merupakan kepanjangan dari Table Row yang berarti baris dari suatu tabel. Di dalam tag ini biasanya diisi dengan beberapa tag <TD..>, sehingga akan membentuk tabel yang memiliki beberapa baris dan beberapa kolom. Tag ini tidak dapat berdiri sendiri, penggunaannya selalu beriringan setelah tag <Table..>.

Contoh penulisan :

<table>
<tr>
<td>Belajar</td>
<td>Membuat</td>
<td>Tabel</td>
</tr>
<tr>
<td>HTML</td>
<td>bersama</td>
<td>Bun No Ichi</td>
</tr>
</table>

Hasilnya berupa tabel yang memiliki dua baris dan tiga kolom :
Lihat disini

ALIGN

Atribut ini digunakan untuk menentukan posisi dari isi tabel apakah rata kanan, tengah, atau rata kiri. Berbeda dengan atribut ALIGN pada tag <Table..> yang berguna untuk menentukan posisi dari tabel pada sebuah dokumen, atribut ini hanya akan menentukan posisi dari isi setiap sel yang berada di dalam sebuah tabel. Atribut ini dapat diatur menjadi LEFT, CENTER, RIGHT.

Contoh:

<table>
<tr ALIGN="LEFT">
<td>Belajar</td>
<td>Membuat</td>
<td>Tabel</td>
</tr>
<tr ALIGN="CENTER">
<td>HTML</td>
<td>bersama</td>
<td>Bun No Ichi</td>
</tr>
<tr ALIGN="RIGHT">
<td>Belajar</td>
<td>Atribut</td>
<td>Align</td>
</tr>
</table>

Hasilnya:
Lihat disini

VALIGN

Atribut ini merupakan singkatan dari vertical align yang berarti perataan vertical dari isi suatu sel. Atribut ini dapat diatur menjadi TOP, MIDDLE, BOTTOM, atau BASELINE.

Contoh:

<TABLE>
<TR VALIGN=TOP >
<TD width="411">bunnoichi.blogspot.com</TD>
</TR>
<TR VALIGN=MIDDLE >
<TD>bunnoichi.blogspot.com</TD>
</TR>
<TR VALIGN=BOTTOM >
<TD>bunnoichi.blogspot.com</TD>
</TR>
</TABLE>

Hasilnya:
Lihat disini

BGCOLOR

Sama halnya seperti atribut BGCOLOR pada tag <Table..> atribut ini juga berguna untuk memberikan warna latar.

Contoh :

<table>
<tr BGCOLOR=red>
<td> Belajar </td>
<td> HTML </td>
</tr>
<tr>
<td> bersama </td>
<td> Bun No Ichi</td>
</tr>
</table>

Hasilnya:
Lihat disini

Tag Table dan Atributnya

11/09/2011 11:06:00 PM Bun No Ichi No comments

Tag ini digunakan untuk membuat tabel pada dokumen HTML. Sebelumnya kita akan membahas tentang guna tabel itu sendiri. Tabel sangat berguna untuk membuat susunan halaman HTML kita menjadi lebih rapi. Dengan tabel kita dapat dengan leluasa menempatkan tulisan atau gambar dengan tatanan yang sangat teratur. Penggunaan tag ini selalui disertai dengan penggunaan tag dan . Tag untuk menyatakan baris dari tabel dan tag untuk menyatakan kolom dari tabel.

Contoh penulisan :

<table>
<tr>
<td>
Tabel ini memiliki dua kolom. Ini kolom pertama.
</td>
<td>
Tabel ini memiliki dua kolom. Ini kolom kedua.
</td>
</tr>
</table>