Home > Panduan > Bedah Surat

Bedah Surat

February 3rd, 2010 Leave a comment Go to comments

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

~ Grazie ~
Categories: Panduan
  1. cah ndeso
    February 3rd, 2010 at 23:04 | #1

    hadoohhh… pertamaaxxsss-e kecekel saiki πŸ‘Ώ

    [Reply]

  2. cah ndeso
    February 3rd, 2010 at 23:04 | #2

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

    [Reply]

  3. nakjaDimande
    February 3rd, 2010 at 23:12 | #3

    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]

  4. Pradna Jogloabang
    February 3rd, 2010 at 23:42 | #4

    akhirnya belajar juga…

    setelah diiming2i hasil belajarnya

    [Reply]

  5. February 3rd, 2010 at 23:44 | #5

    kok komen saya di sini ilang terus ya pak dhe?
    sejak kemaren2

    (jangan2 di black list)

    [Reply]

  6. February 3rd, 2010 at 23:55 | #6

    saya belum pernah belajar html Pak, semoga aja dengan ini mulai belajarnya. salam sukses selalu

    [Reply]

  7. February 4th, 2010 at 00:00 | #7

    saya belum pernah belajar html, masih gak paham nih, salam sukses selalu.

    [Reply]

  8. February 4th, 2010 at 01:16 | #8

    Assalamu’alaikum wr.wb.

    [Reply]

  9. February 4th, 2010 at 01:21 | #9

    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]

  10. ofaragilboy
    February 4th, 2010 at 05:29 | #10

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

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

    [Reply]

  11. budies
    February 4th, 2010 at 08:12 | #11

    biar ada kodenya, saya masih belum dong
    susi, susi… aku bawa nggak ya nanti

    [Reply]

  12. arsumba
    February 4th, 2010 at 08:16 | #12

    tak nyoba ya pak.. mumpung lagi seneng belajar html nih.. hehe..

    [Reply]

  13. February 4th, 2010 at 08:16 | #13

    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]

  14. February 4th, 2010 at 08:47 | #14

    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]

  15. February 4th, 2010 at 09:27 | #15

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

    [Reply]

  16. February 4th, 2010 at 10:33 | #16

    wah tambah mumet ki..

    [Reply]

  17. February 4th, 2010 at 10:52 | #17

    hehehe tebakan saya betul yo kang? hadiah tolong mentahan aja lah.. kwkwkwkwkwkwwk…

    [Reply]

  18. Muji
    February 4th, 2010 at 11:00 | #18

    Belajar gitu-gituan pas udah kelar skripsi aja ah.

    [Reply]

  19. February 4th, 2010 at 11:03 | #19

    menarik pak, bisa sekaligus belajar

    [Reply]

  20. February 4th, 2010 at 11:17 | #20

    masih trauma ngutak atik html…pernah hilang semua..hiks… πŸ™

    [Reply]

  21. ciwir
    February 4th, 2010 at 14:00 | #21

    pak mars sekarang sudah jadi begawan HTML …
    nderek sinau pak

    [Reply]

  22. cah ndeso
    February 4th, 2010 at 15:02 | #22

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

    Trims… πŸ˜€

    [Reply]

  23. Mars
    February 4th, 2010 at 15:11 | #23

    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]

  24. February 4th, 2010 at 15:38 | #24

    Dapat tips baru nich, trims boz!

    [Reply]

  25. February 4th, 2010 at 16:11 | #25

    @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]

  26. CSDW
    February 4th, 2010 at 17:18 | #26

    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]

  27. February 4th, 2010 at 18:09 | #27

    Bisa langsung di copy ya mas.
    Terima kasih
    salam hangat dari Surabaya

    [Reply]

  28. arkasala
    February 4th, 2010 at 18:20 | #28

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

    [Reply]

  29. ndop
    February 4th, 2010 at 20:30 | #29

    suwe suwe nggawe website dewe iki pak marsus, jenenge MS, saingane WP.

    [Reply]

  30. February 5th, 2010 at 09:37 | #30

    wah..ruwet kodenya
    tapi perlu dicoba juga
    asyiknya bikin surat model ginian

    [Reply]

  31. February 6th, 2010 at 19:59 | #31

    terimakasih tipsnya mas bravo
    hairstyle

    [Reply]

  32. TuSuda
    February 7th, 2010 at 19:11 | #32

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

    [Reply]

  33. Badruz
    February 18th, 2010 at 13:59 | #33

    pusing deh mempelajari html…

    [Reply]

  34. iptek
    December 23rd, 2010 at 17:09 | #34

    thanx infonya mas…tambah referensi lg nich

    [Reply]

  1. No trackbacks yet.

silakan buka katalog untuk melihat postingan lainnya
~ terima kasih ~