Ads

Selasa, 11 Januari 2011

membuat tabel dengan HTML

Dapet request dari temen untuk update informasi tentang html lagi (label webdesign) karena memang untuk membuat suatu blog yang rapih dan menarik basic ini sangat diperlukan. Kali ini akan dibahas bagaimana cara membuat tabel dengan HTML, yaa !!! script html ini saya gunakan untuk merapihkan kumpulan iklan dan menu yang ada dikolom kanan halaman ini (http://dibahas.blogspot.com) , cara ini sangat berguna untuk menata dan memanfaatkan space yang ada hanya dengan menambahkan 1 element layout pada blogger.

Berikut script untuk mebuat tabel sederhana seperti ini




isi kolom 1 baris 1




scriptnya adalah seperti berikut








isi kolom 1 baris 1


table width = lebar tabel yang diinginkan
border = garis yang membatasi tabel
untuk menambahkan kolom hanya cukup menambahkan atau mengkopi baris sampai dan letakan dibawah script yang sama. dimana adalah kode pembuka untuk membentuk kolom pada tabel dan adalah kode penutupya.




<-- script kolom baru


isi kolom 1 baris1isi kolom 2 baris1

lihat hasil nya :






isi kolom 1 baris 1 isi kolom 2 baris 1



sekarang kita coba tambahkan baris dari kolom tabel yang sudah ada, berikut adalah scriptnya.











isi kolom 1 baris 1 isi kolom 2 baris 1
isi kolom 1 baris 2 isi kolom 2 baris 2

untuk menambahkan baris kita tinggal mengcopy tanda sampai maka dihasilkan baris ke2 pada tabel. perlu di ingat tanda adalah kode pembuka untuk menciptakan baris pada tabel dan kode penutup untuk mengakhiri baris pada tabel.

bingung melihat script yang berderet, he he he he, pelajarilah terus maka anda akan terbiasa melihatnya bahkan dengan deretan script yang leboh komplex, supaya tidak coba saya beri tanda seperti berikut.










isi kolom 1 baris 1 isi kolom 2 baris 1
isi kolom 1 baris 1 isi kolom 2 baris 1


warna merah menandakan baris pertama dan warna biru menandakan baris kedua. Bagai mana script untuk memberi warna tabel diatas ??? berikut scripnya











bgcolor="blue">isi kolom 1 baris 1 bgcolor="blue">isi kolom 2 baris 1
bgcolor="red">isi kolom 1 baris 2 bgcolor="red">isi kolom 2 baris 2


Sederhana bukan he he he ...... memang untuk membuatnya lebih mudah anda bisa menggunakan HTML editor seperti front page atau dreamweaver dengan GUI interface dengan langkah yang jauh lebih mudah dan tinggal mengcopy – paste kode html ke tag element yang anda tambahkan untuk blog anda, dengan basic yang sudah anda dapat dari bahasan diatas tentunya. Sebagai bocoran . untuk menampilakan iklan pada kolom disamping yang tampak seperti ini .








Saya menggunakan cara ini sebagai cara untuk memanfaatkan space yang tersedia pada kolom samping kanan halaman ini . adapun script dari tampilan diatas adalah sebagai berikut.




Sedikit tambahan penjelasan dari script diatas


a href = adalah script yang digunakan untuk membuat gambar atau text menjadi link atau agar gambar atau text bisa di klik dan diarahkan ke suatu halaman website tertentu , dalam kasus diatas ketika user mengklik gambar sebelah kiri maka akan mengarah ke alamat website http://tinyurl.com/6tby9g akhiri dengan kode
pada akhir objeck yang ingin di link.

target=blank , maksud dari script diatas adalah ketika anda mengklik gambar dan akan mengarah ke suatu alamat website maka alamat website tujuan akan terbuka pada tab atau window baru tanpa merubah window http://dibahas.blogspot.com

img src= , adalah scipt untuk menampilkan gambar ( baca disini untuk penjelasanya ) dimana http://www.blogopics.net adalah image hosting / tempat mengumpulkan file gambar diserver online.

selamat mencoba

1 komentar:

T. Khairil Ahsyar mengatakan...

tugasnya sudah K" periksa, lain kali tolong dirapiin lagi dan ditampilkan script penulisannya, jangan lupa daftarkan blog kamu di follower blog K"...!!!

ubah alamat link blog K". salah tu..!
seharusnya http://www.tengkukhairil.com