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.
Lamp.
Hal

:
:
:

04/M/II/2010

Undangan

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
Waktu
Tempat
Hiburan
.
Catatan

:
:
:
:
.
:

Minggu, 7 Februari 2010
pukul 19.30 wib s.d selesai
www.marsudiyanto.net
1. Lee HyoRi
2. Rhoma Irama
untuk peserta yang ingin berpartisipasi diharap menyiapkan Susi sendiri, karena panitia hanya menyediakan 3 Susi untuk 3 tamu pertama

Demikian hal ini kami sampaikan, atas perhatian dan kehadirannya diucapkan terima kasih.

Tembusan :
1. Kapolsek Mawar
2. Danramil Mawar
3. Arsip (?)


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… πŸ˜€

34 thoughts on “Bedah Surat

  1. swiippp. Akhirnya dibedah juga rahasianya. hehehhee…. tak kopas dulu ya Pak πŸ˜‰

    [Reply]

  2. 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]

  3. Pak kalo ‘br’ untuk spasi, kalo ‘tr’ dan ‘td’ untuk apa pak?

    tr itu untuk awal dan akhir row
    td itu awal dan akhir kolom
    Mirip worksheet Excel… πŸ˜€

    [Reply]

  4. makan ok aja pak ins, tapi baru denger istilah bedah surat, πŸ˜€ πŸ˜€ πŸ˜€

    salam sukses pak ins, sory saya masih ngumpulin ide buat pak ins πŸ˜€

    [Reply]

  5. tapi masih banyak yang invalid XHTML nya Pak πŸ™

    Sudah saya ujicoba di beberapa blog dan ternyata normal semua… πŸ˜€
    Di WP jelas jalan, di blogspot juga sama.
    (kalau multiply sich saya nggak tau karena nggak suka

    [Reply]

  6. 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]

  7. Wow, ternyata kode HTML-nya njelimet gitu ya, Pak?
    Wela, entah bisa apa gak saya mengikutinya.
    bahkan untuk cuma nyontek sekalipun. πŸ˜€

    [Reply]

  8. @Pak Mars
    Mungkin yang dimaksud INVALID ini adalah ketika di check pada Validator W3 mungkin Pak

    Trims… πŸ˜€

    [Reply]

  9. Tapi bener juga, setelah saya cek pakai M3 (Mawar Tiga) ada kelebihan ‘;’ satu biji dan sudah saya edit-dit-dit…Wis tak ilang ilingi ketoke kok gak ono sing kliwatan…

    [Reply]

  10. @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…

    OOoooo
    Tak kiro yang html postingan.
    Kalau yg footer itu mungkin iya, karena saya nggak pernah cek sampai ke sana2…
    Trims Mas…

    [Reply]

  11. Kayaknya dibuat dengan Macromedia DreamWeaver bisa juga ya pak, aku wis nyoba-nyoba juga kok. Nggak usah mikir kodene.

    Mungkin bisa Pak…
    Saya malah belum nyoba.
    Kalau html ibaratnya batik tulis, lha kalau itu tadi ibaratnya batik cap.

    [Reply]

  12. perlu ditelaah lebih dalam lagi Pak, untuk kode ini saya betul2 lelet mempelajarinya. Trims sekali.
    Salam hangat selalu.

    [Reply]

  13. Oo.. caranya begitu ya Pak..pakai model tabel..makasi deh atas bedah suratnya yang unik dan kreatif…

    [Reply]

Leave a Reply

Your email address will not be published. Required fields are marked *