- See more at: http://blog-rangga.blogspot.com/2013/05/cara-membuat-gambar-berputar-dan_17.html#sthash.0e66RoLT.dpuf
بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Tampilkan postingan dengan label Pengetahuan HTML. Tampilkan semua postingan
Tampilkan postingan dengan label Pengetahuan HTML. Tampilkan semua postingan

Cara Membuat Tabel Pada Postingan Blog

Membuat tabel memang mudah, tetapi untuk menampilkannya pada postingan blog cukup sulit. Kita harus paham kode HTML untuk merangkai tabel agar terlihat utuh. Terkadang dalam beberapa posting atau halaman blog kita ingin membuat sebuah tabel untuk keperluan tertentu, entah itu gambar atau teks. Namun sayangnya pada menu blogger tidak dilengkapi dengan menu pilihan untuk membuat tabel secara otomatis, jadi  pemilik blog harus membuat secara manual dengan script HTML.

Pada dasarnya perintah kode HTML untuk membuat tabel terdiri dari tiga saja, yaitu :
  1. Untuk mengawali perintah membuat sebuah tabel adalah dengan kode HTML <table> dan sebagai penutup perintah membuat tabel tersebut di akhiri dengan kode HTML </table>
  2. Perintah untuk membuat sebuah kolom tabel adalah dengan menggunakan kode HTML  <td>   dan untuk menutup perintah membuat kolom tabel tersebut di akhiri dengan kode </td> 
  3. Sedangkan perintah untuk membuat baris tabel adalah dengan kode HTML <tr>  dan untuk menutup perintah membuat baris tabel tersebut diakhiri dengan kode HTML </tr>
Contoh 1 :
Jika ingin membuat sebuah tabel yang terdiri dari 3 kolom dengan 1 baris, maka kode perintah HTML nya adalah seperti berikut :

<table border="1">
<tr>
<td>KOLOM KE-1</td> <td>KOLOM KE-2</td> <td>KOLOM KE-3</td>
</tr>
</table>

Keterangan :
Perintah Script / kode tersebut hanya dapat dituliskan pada pilihan mode penulisan "HTML", dan perintah Script tersebut tidak akan dapat berjalan jika di tuliskan pada mode penulisan "Text Rich" atau "Compose".

Maka hasil dari perintah kode HTML di atas adalah seperti yang terlihat pada tabel di bawah ini :


KOLOM KE-1 KOLOM KE-2 KOLOM KE-3

Contoh 2 :
Jika ingin membuat sebuah tabel yang terdiri dari 3 kolom dengan 2 baris, maka kode perintah HTML nya adalah seperti berikut :

<table border="1">
<tr>
<td>BARIS KE-1 KOLOM KE-1</td> <td>BARIS KE-1 KOLOM KE-2</td> <td>BARIS KE-1 KOLOM KE-3</td>
</tr>
<tr>
<td>BARIS KE-2 KOLOM KE-1</td> <td>BARIS KE-2 KOLOM KE-2</td> <td>BARIS KE-2 KOLOM KE-3</td>
</tr>
</table>

Keterangan : 
Perintah Script / kode tersebut hanya dapat dituliskan pada pilihan mode penulisan "HTML", dan perintah Script tersebut tidak akan dapat berjalan jika di tuliskan pada mode penulisan "Text Rich" atau "Compose".

Maka hasil dari perintah kode HTML di atas adalah seperti tabel di bawah ini :

BARIS KE-1 KOLOM KE-1 BARIS KE-1 KOLOM KE-2 BARIS KE-1 KOLOM KE-3
BARIS KE-2 KOLOM KE-1 BARIS KE-2 KOLOM KE-2 BARIS KE-2 KOLOM KE-3

Contoh 3 :
Jika ingin membuat sebuah tabel yang terdiri dari 2 kolom dengan 2 baris, kemudian pada baris ke 1 diisi dengan teks atau tulisan sedangkan pada baris kedua diisi dengan gambar , maka perintah kode HTML yang digunakan adalah sebagai berikut :


<table border="1">
<tr>
<td>GAMBAR-1</td> <td>GAMBAR-2</td>
</tr>
<tr>
<td><img src="http://i752.photobucket.com/albums/xx166/sosmiadi/Angry-Birds2.jpg" height="96" width="144" /></td> 
<td><img src="http://images.dailyfreegames.com/thumbs/SPCOST120.jpg" height="96" width="144" /></td>
</tr>
</table>

Keterangan :
  • Perintah Script / kode tersebut hanya dapat dituliskan pada pilihan mode penulisan "HTML", dan perintah Script tersebut tidak akan dapat berjalan jika di tuliskan pada mode penulisan "Text Rich" atau "Compose".
  • Pada text / tulisan yang berwarna merah pada script diatas adalah link URL tempat penyimpanan gambar. Silahkan diganti dengan URL gambar yang akan ditampilkan ke dalam tabel.
  •   height adalah ukuran tinggi gambar, silahkan diatur dan disesuaikan dengan keinginan.
  •   width adalah ukuran lebar gambar, silahkan diatur dan disesuaikan dengan keinginan

Maka hasil tampilan dari perintah kode HTML di atas adalah seperti yang terlihat pada tabel di bawah ini :

GAMBAR-1
GAMBAR-2

Selamat mencoba, semoga dapat bermanfaat
Sumber



Cara Menuliskan Kode HTML Pada Postingan



Jika Anda masih binggung, bagaimana menaruh kode/script HTML ke dalam postingan tentu scriptnya tidak langsung muncul seperti yang kita inginkan, Misalnya, jika kita menuliskan kode <body> dengan cara yang biasa maka hasilnya tidak akan muncul dalam postingan karena kode tersebut langsung diterjemahkan kedalam bahasa HTML. Jadi untuk menuliskan kode <body>, maka yang seharusnya dituliskan supaya bisa muncul kode tersebut adalah ini &lt;body&gt;

Nah bagaimana kalau ada banyak kode yang harus kita posting? tentu sangat merepotkan sekali..! nah mau tahu bagaimana caranya menuliskan kode-kode/script tersebut ke dalam postingan blog?

Ada beberapa cara untuk menuliskan kode-kode tersebut kedalam postingan blog, diantaranya yaitu:

Cara Pertama
  • Gunakan Software-software web design, misalnya Macromedia Dreamwaver, Microsoft Frontpage, Namao Web Editor. Atau bisa juga dengan software-software blogtools seperti post2blog dll.
  • Tuliskan semua kode di area design, kemudian copy kode-kode tersebut dari area HTML Code. Nah kode-kode dalam area HTML Code tersebut lah yang harus diposting.

Cara Kedua :
  • Tuliskan semua kode/script ke dalam notepad
  • Kemudian ganti/replace kode-kode berikut ini :
Kode
Kode Pengganti
<
&lt;
>
&gt;
"
&quot;
  • Sudah tahu kan caranya mereplace di notepad? yaitu dengan memilih menu edit --> replace kemudian pada kotak yang muncul masukkan kode yg akan direplace pada kolom "Find what" terus masukkan kode pengantinya pada kolom "Replace with"terus tekan tombol Replace All.
  • Nah kalau sudah semua baru Anda copy semua kode yang udah direplace all tadi, terus Anda masukkan kedalam postingan tersebut.
Cara Ketiga :
  • Kunjungi situs berikut ini : klik disini
  • Kemudian masukkan kode-kode yang akan Anda posting kedalam kotak yang disediakan, nah kalau sudah tekan tombol "Encode", maka Anda akan mendapatkan script baru untuk diposting di blog Anda.
  • Praktis bukan?
     
Demikianlah cara menuliskan kode/script HTML pada postingan Anda, semoga bermanfaat.
.
SUMATERA EKSPRES L.P.6