Kamis, 10 April 2014

Ide Mengenai Tata Letak Situs

Dengan mengaplikasikan beberapa tweak HTML, tata letak situs dapat lebih mudah dikenali robot mesin penelusuran dan dengan tujuan tersebutlah posting ini dibuat.

DipoDwijayaS-Prestisewan-Gambar-IconHTML.gif

Misalnya Anda ingin membagi tata letak situs menjadi dua seksi, yang terdiri dari:
  1. Seksi Kiri, yang umumnya memuat item menu, iklan dan hal lainnya.
  2. Seksi Kanan atau Bagian Utama, yang memuat konten utama yang berisi teks, foto dan video.
Dibawah ini adalah tampilan dasar tata letak situs.

Seksi Kiri
ITEM1
ITEM2
ITEM3
Bagian Utama

HTML yang diaplikasi pada tampilan dasar tata letak situs di atas adalah:

<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="20%" bgcolor="#D9BBBB" class="defaultfont">
<font class="defaultfont"><b>Seksi Kiri</b></font><br>
ITEM1<br>
ITEM2<br>
ITEM3<br>
</td>
<td valign="top" bgcolor="#FAFBA3" rowspan="2">
<table> 
<tbody><tr>
<td valign="top" class="defaultfont">
<b>Bagian Utama</b>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>

Jika Anda jeli maka akan diketahui bahwa Seksi Kiri tampak berada di atas pada Bagian Utama yang membuat robot mesin telusur menilai Seksi Kiri adalah bagian utama yang sebenarnya bukan Seksi Kanan atau Bagian Utama. Untuk mengatasi hal tersebut maka perlu membuat melakukan sedikit improvisasi dimana pengaplikasian Rowspan dibagian <td> akan menjadi solusinya.

Berikut ini adalah HTML yang dioptimisasi.

<table width="80%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td 
width="10%" height="1"></td><td valign="top" bgcolor="#FAFBA3" rowspan="2"><table><tbody><tr><td 
valign="top" class="defaultfont"><b>Bagian Utama</b></td></tr></tbody></table></td></tr><tr><td 
bgcolor="#D9BBBB" class="defaultfont"><b>Seksi Kiri</b>

ITEM1

ITEM2

ITEM3

</td></tr></tbody></table>

Hasil HTML yang dioptimisasi.

Bagian Utama
Seksi Kiri
ITEM1
ITEM2
ITEM3

Semoga bermanfaat !

Tidak ada komentar:

Posting Komentar


Liputan Internet

DipoDwijayaS-Prestisewan-Gambar-LiputanInternet.png

Liputan Telekomunikasi

DipoDwijayaS-Prestisewan-Gambar-LiputanKomunikasi.png

Join 100+ Bookmarking Sites