Bedah Surat
Istilah bedah buku sudah biasa, tapi kalau bedah surat kayaknya masih belum familiar. Yang saya maksudkan bedah surat di sini bukan mengkaji dan mengungkapkan isi suratnya, tapi membedah lay outnya atau settingannya.
Untuk mengingatkan kembali contoh surat yang pernah saya tulis sebelumnya, berikut tampilan barunya setelah saya warnai agar saya mudah menjelaskannya.
|
No. |
: |
04/M/II/2010 |
Kendal, 3 Februari 2010 |
Yth. :
Bapak/Ibu/Saudara
Nasabah Blog Metamarsphose
Di tempat.
Bersama ini kami mengundang kehadirannya pada acara “Sensasi Sun Susi” yang diselenggarakan pada :
|
Hari/Tanggal |
: |
Minggu, 7 Februari 2010 |
Demikian hal ini kami sampaikan, atas perhatian dan kehadirannya diucapkan terima kasih.
|
Tembusan : |
 |
Sengaja saya tambahkan warna biar kelihatan bahwa dugaan sebagian sahabat benar adanya. Saya menggunakan teknik tabel dalam pembuatan bagian tertentu yang membutuhkan perataan khusus.
Hanya pada kop surat dan stempel saya gunakan image dengan pertimbangan biar praktis saja, meskipun dengan tabel juga bisa.
Bagi sahabat yang terbiasa klick kanan, pastinya dengan mudah melihat cara apa yang saya gunakan.
Karena cara2nya sama, maka untuk sampel, saya contohkan kolom yang teratas dari surat yaitu yang berisi Nomor Surat, Lampiran dan Hal. Berikut ini kode htmlnya…
<table border="0" width="100%">
<tr>
<td width="10%" valign="top">
<p style="text-align: justify;font-family:georgia;">No.<br>Lamp.<br>Hal</p>
</td>
<td width="2%" valign="top">
<p style="text-align: justify;font-family:georgia;">:<br>:<br>:</p>
</td>
<td width="48%" valign="top">
<p style="text-align: justify;font-family:georgia;">04/M/II/2010<br>-<br>Undangan</p>
</td><td width="40%" valign="top">
<p style="text-align: right;font-family:georgia;">Kendal, 3 Februari 2010</p>
</td></tr></table>
Atur prosentase lebar kolom dan paddingnya (left, top, right dan bottomnya), sesuaikan dengan lebar postingan yang kita buat.
Semoga sahabat tidak kapok belajar html… 
hadoohhh… pertamaaxxsss-e kecekel saiki
[Reply]
swiippp. Akhirnya dibedah juga rahasianya. hehehhee…. tak kopas dulu ya Pak
[Reply]
he he makasiiii Pak Mars yang baik hati..
walau harus berulang ulang aku telaah,
Berkali kali aku telaah lagi,
Berulang kali aku telaah lagi dan lagi,
Lagi lagi aku harus telaah ulang…
[Reply]
akhirnya belajar juga…
setelah diiming2i hasil belajarnya
[Reply]
kok komen saya di sini ilang terus ya pak dhe?
sejak kemaren2
(jangan2 di black list)
[Reply]
saya belum pernah belajar html Pak, semoga aja dengan ini mulai belajarnya. salam sukses selalu
[Reply]
saya belum pernah belajar html, masih gak paham nih, salam sukses selalu.
[Reply]
Assalamu’alaikum wr.wb.
[Reply]
Pak kalo ‘br’ untuk spasi, kalo ‘tr’ dan ‘td’ untuk apa pak?
[Reply]
makan ok aja pak ins, tapi baru denger istilah bedah surat,
salam sukses pak ins, sory saya masih ngumpulin ide buat pak ins
[Reply]
biar ada kodenya, saya masih belum dong
susi, susi… aku bawa nggak ya nanti
[Reply]
tak nyoba ya pak.. mumpung lagi seneng belajar html nih.. hehe..
[Reply]
tapi masih banyak yang invalid XHTML nya Pak
[Reply]
walau dengan jelas dan gamblang penjelasan dr Pak Guru Mars.
saya tetap gak mudeng……………
duh, nasibku jadi murid yg paling tulalit, belajar dan belajar lagi, kok tetap gak donk.
salam.
[Reply]
Wow, ternyata kode HTML-nya njelimet gitu ya, Pak?
Wela, entah bisa apa gak saya mengikutinya.
bahkan untuk cuma nyontek sekalipun.
[Reply]
wah tambah mumet ki..
[Reply]
hehehe tebakan saya betul yo kang? hadiah tolong mentahan aja lah.. kwkwkwkwkwkwwk…
[Reply]
Belajar gitu-gituan pas udah kelar skripsi aja ah.
[Reply]
menarik pak, bisa sekaligus belajar
[Reply]
masih trauma ngutak atik html…pernah hilang semua..hiks…
[Reply]
pak mars sekarang sudah jadi begawan HTML …
nderek sinau pak
[Reply]
@Pak Mars
Mungkin yang dimaksud INVALID ini adalah ketika di check pada Validator W3 mungkin Pak
[Reply]
[Reply]
Dapat tips baru nich, trims boz!
[Reply]
@cah ndeso
di bagian footer bLog ini kan ada
“Theme by NeoEase. Valid XHTML 1.1 and CSS 3. Diedit Sedikit Oleh Pakne Bernas”
nah, maksud saya pas dicek di W3 lewat kLik “XHTML 1.1″ itu Pak…
[Reply]
Kayaknya dibuat dengan Macromedia DreamWeaver bisa juga ya pak, aku wis nyoba-nyoba juga kok. Nggak usah mikir kodene.
[Reply]
Bisa langsung di copy ya mas.
Terima kasih
salam hangat dari Surabaya
[Reply]
perlu ditelaah lebih dalam lagi Pak, untuk kode ini saya betul2 lelet mempelajarinya. Trims sekali.
Salam hangat selalu.
[Reply]
suwe suwe nggawe website dewe iki pak marsus, jenenge MS, saingane WP.
[Reply]
wah..ruwet kodenya
tapi perlu dicoba juga
asyiknya bikin surat model ginian
[Reply]
terimakasih tipsnya mas bravo
hairstyle
[Reply]
Oo.. caranya begitu ya Pak..pakai model tabel..makasi deh atas bedah suratnya yang unik dan kreatif…
[Reply]
pusing deh mempelajari html…
[Reply]