Laman

Januari 20, 2013

Tabulasi Pengkodean dalam Blog

Posting ini mungkin hanya berupa dokumentasi mengenai pemberian markup pada dokumen HTML, termasuk posting blog. Fungsinya ± agar dokumen tampak lebih semantik & aksesibel. Mungkin kita jarang memikirkan — bahkan menggunakan — beberapa tag serta simbol HTML berikut dalam posting. Padahal ini merupakan salah satu poin penting untuk meningkatkan keterbacaan dokumen yang kita ciptakan.

DeskrisiTag HTML
Blok paragraf<p>…</p>
Daftar terurut<ol><li>…</li><li>…</li></ol>
Daftar tidak terurut<ul><li>…</li><li>…</li></ul>
Daftar definisi<dl><dt>…</dt><dd>…</dd><dd>…</dd>
<dt>…</dt><dd>…</dd><dd>…</dd></dl>
Kutipan<q>…</q>
Blok kutipan<blockquote><p>…</p></blockquote>
Teks tebal<strong>…</strong>, <b>…</b>
Teks miring<em>…</em>, <i>…</i>
Teks bebas<pre>…</pre>
Blok kode<pre><code>…</code></pre>
Kepanjangan dari<abbr title="">…</abbr>
Teks penting<mark>…</mark>
Teks Kode<code>…</code>
Teks tombol papan ketik<kbd>…</kbd>
Teks dihapus<del>…</del>
Teks superskrip<sup>…</sup>
Teks subskrip<sub>…</sub>
Teks Pranala<a href="" title="">…</a>
Penanda gambar<img src="" alt="" width="" height=""…/>
TabelMenata pembuatan tabel dalam blog
Figure/Lampiran<figure>…<figcaption>…</figcaption></figure>

Kita tinggal menyisipkan teks dalam “dot, dot, dot” (…) dalam tag HTML pada tabel di atas. Sedangkan pada figure dapat dimasukkan gambar, audio, video, blok kutipan, dan sebagainya sebagai fungsi lampiran dari suatu dokumen HTML (sebelum figcaption atau deskripsi lampiran).

Kemudian tabel berikut merupakan beberapa pengkodean tanda baca yang sering digunakan dengan menekan tombol tertentu pada papan ketik. Tetapi hal tersebut mungkin bukan aktivitas yang tepat untuk memaknai dokumen HTML, terutama dalam posting blog.

Simbol beberapa tanda baca
DeskripsiTandaSimbol HTMLNumerik
Ampersand&&amp;&#38;
Spasi &nbsp;&#160;
Lebih kurang±&plusmn;&#177;
Pecahan ¼¼&frac14;&#188;
Pecahan ½½&frac12;&#189;
Pecahan ¾¾&frac34;&#190;
Perkalian×&times;&#215;
Pembagian÷&divide;&#247;
Tanda pisah En&ndash;&#8211;
Tanda pisah Em&mdash;&#8212;
Tanda petik pembuka tunggal&lsquo;&#8216;
Tanda petik penutup tunggal&rsquo;&#8217;
Tanda petik pembuka ganda&ldquo;&#8220;
Tanda petik penutup ganda&rdquo;&#8221;
Ellipsis&hellip;&#8230;
Menit&prime;&#8242;
Detik&Prime;&#8243;

Beberapa uraian penjelas tentang penggunaan simbol beberapa tanda baca adalah sebagai berikut:

  • Perkalian &times; akan lebih baik daripada menekan tombol X pada papan ketik.
  • Pembagian &divide; akan lebih baik daripada menekan tombol / pada papan ketik.
  • Tanda petik, menit, atau detik &lsquo;, &rsquo;, &ldquo;, &rdquo;, &prime;, dan &Prime; akan lebih baik daripada menekan tombol ' dan " pada papan ketik.
  • Tanda pisah &ndash; dan &mdash; akan lebih baik daripada menekan tombol - pada papan ketik.
    • Penggunaan &ndash; yang berarti “sampai dengan”, contoh:
      2012 – 2013
    • Penggunaan &mdash; untuk menjelaskan suatu kata atau frase kata di luar bangun kalimat, contoh:
      Saya pekerja swasta — desain situs web — di salah satu anak perusahaan MiMNeT
—ς∞ς—

Sulit? Tidak ada yang sulit jika kita ingin belajar memulainya. Dulu saya juga tidak memahami pengkodean & kurang begitu tertarik dengan hal tersebut. Namun seiring perkembangan serta pengalaman dalam blogging, ternyata semantik adalah sesuatu hal yang menarik, sehingga menjadi sebuah keharusan ketika ingin membuat dokumen HTML atau XHTML.

Code is poetry
—ς∞ς—

36 komentar:

  1. infonya bermanfaat buat ane,terimakasih gan.

    BalasHapus
  2. nice inpoh gan ... sangat bermanfaat bagi ane yg newbie gene ...

    BalasHapus
  3. trims gan berkat u ilmu ane bertambah lagi.. hihi

    slm kenal..

    BalasHapus
  4. wih mantep banget infonya, gan :)

    BalasHapus
  5. ini baru informasi, lengkap dan bermanfaat kang!!!

    BalasHapus
  6. terima kasih banyak, saya kurang mengerti dengan kode2 html, tetapi ini sangat membantu saya, sebagai kode dasar yang sangat berguna!

    salam sukses

    BalasHapus
  7. pengalaman yang sama, yang di awal tidak ada ketertarikan sama hal yang ginian, tapi lama kelamaan justru hal yang begini yang membuatku tertarik dan tertantang, info yang bermanfaat buat para blogger, :D

    BalasHapus
  8. Kunjungan perdana..sambil baca-baca menambah pengetahuan disini...

    BalasHapus
  9. widihh.. kerennn plus puyeng liat code code nya, hahaha
    tapi thanks infonya bang

    BalasHapus
  10. gan mau tanya nih, untuk Spasi atau Spasi 5 Buah apa Script Htmlnya?
    Mohon Bantuannya!

    BalasHapus
    Balasan
    1. Cukup dengan menyematkan tag &nbsp; atau dengan menggunakan numetik &#160;

      Hapus
  11. informasi ini menambah wawasan saya sedikit" wlaupun jujur saya masih belum memahami Kode" nya

    BalasHapus
  12. wahhh.. keren abis gan..
    saya newbie di blogging tentu sangat membutuhkan tutorial seperti ini.. copass gan ah, langsung.. makasih yaa

    BalasHapus
  13. Kalau tanda seperti ini mas, kode html-nya seperti apa ya!!!
    >
    >>
    banyak digunakan pada breadcrumbs

    BalasHapus
    Balasan
    1. &rsaquo; (&#8250;) dan &raquo; (&#187;), sedangkan kebalikannya tinggal ganti huruf “r” (right) dengan “l” (left) yang memiliki kode numerik &#8249; serta &#171;.

      Hapus
  14. sangata berguna sekali buat blog pemula seperti blogaku..tipsnya serba lengkapkang..thanks atas infonyaa

    BalasHapus
  15. thanks infonya sob, mengingatkanku saat di bangku sekolah dulu

    BalasHapus
  16. keren ini sob,, baru tau tentang kode kode kek gini

    BalasHapus
  17. Mantep infonya, makasih nih ya. . .btw, ada penjelasan mengenai basic atau dasar dari suatu template gak, gan? Misal data:post.body untuk isi, footernya data di bwhnya, dll. . hehe. .

    BalasHapus
    Balasan
    1. Untuk dasar pembuatan template di Blogger™ sudah ada pada posting penyusunan dasar, sedangkan perinci isi dari elemen-elemen tersebut belum, insyaAllah nanti akan di posting juga. Terima kasih.

      Hapus
  18. nice info gan ,berkunjung ke website saya ya www.405arya.blogspot.com

    BalasHapus
  19. terimakasih banyak atas tipsnya sangat bermanfaat sekali untuk saya......!

    BalasHapus
  20. terimakasih sobat. Tutorial Blogger nya sangat bermanfaat.

    http://impoint.blogspot.com

    BalasHapus
  21. artikelnya bisa buat tambah ilmu banget nih, thanks ya :)

    BalasHapus
  22. terimakasi banyak atas tulisan dan postingannya, semoga bermanfaat untuk kita yang membacanya.
    salam kenal yeah

    BalasHapus
  23. Eah lengkap sekali nih, makasih agan atas berbagi informasinya.

    BalasHapus
  24. terima kasih banyak gan udah berbagi ilmunya..
    saya udah bosen tuh gan harus ganti template karena salah pengkodean

    BalasHapus
  25. nice info gan.. lanjutkan
    trims sharenya

    BalasHapus
  26. thank's for your information..
    salam kenal aja gan

    BalasHapus
  27. mantap sekali gan infonya...
    terima kasih udah berbagi

    BalasHapus
  28. apa pengkodean ini selalu di gunakan ya gan? kalau sekarang yang saya lihat malah banyak yang mencari cara praktis dan otomatis dari pada secara manual, padahal hal yang ini harus kita ketahui gan.
    Thanks for share ya gan di tunggu kunjungan baliknya

    BalasHapus
    Balasan
    1. Betul, yang mudah memang yang praktis. Tetapi tidak ada salahnya jika kita mengetahui sedikit tentang markah yang terkandung didalamnya (blog).

      Hapus
  29. mantap banget niiii gannn.............jadi pengen belajar,,,,,

    BalasHapus
  30. kunjungan perdana gant.. sangat bermanfaat gant tutornya.. http://heri-gipzy.blogspot.com

    BalasHapus