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.
Deskrisi | Tag 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=""…/> |
Tabel | Menata 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.
Deskripsi | Tanda | Simbol HTML | Numerik |
---|---|---|---|
Ampersand | & | & | & |
Spasi | |   | |
Lebih kurang | ± | ± | ± |
Pecahan ¼ | ¼ | ¼ | ¼ |
Pecahan ½ | ½ | ½ | ½ |
Pecahan ¾ | ¾ | ¾ | ¾ |
Perkalian | × | × | × |
Pembagian | ÷ | ÷ | ÷ |
Tanda pisah En | – | – | – |
Tanda pisah Em | — | — | — |
Tanda petik pembuka tunggal | ‘ | ‘ | ‘ |
Tanda petik penutup tunggal | ’ | ’ | ’ |
Tanda petik pembuka ganda | “ | “ | “ |
Tanda petik penutup ganda | ” | ” | ” |
Ellipsis | … | … | … |
Menit | ′ | ′ | ′ |
Detik | ″ | ″ | ″ |
Beberapa uraian penjelas tentang penggunaan simbol beberapa tanda baca adalah sebagai berikut:
- Perkalian
×
akan lebih baik daripada menekan tombol X pada papan ketik. - Pembagian
÷
akan lebih baik daripada menekan tombol / pada papan ketik. - Tanda petik, menit, atau detik
‘
,’
,“
,”
,′
, dan″
akan lebih baik daripada menekan tombol ' dan " pada papan ketik. - Tanda pisah
–
dan—
akan lebih baik daripada menekan tombol - pada papan ketik.- Penggunaan
–
yang berarti “sampai dengan”, contoh:
2012 – 2013 - Penggunaan
—
untuk menjelaskan suatu kata atau frase kata di luar bangun kalimat, contoh:
Saya pekerja swasta — desain situs web — di salah satu anak perusahaan MiMNeT
- Penggunaan
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.
infonya bermanfaat buat ane,terimakasih gan.
BalasHapusnice inpoh gan ... sangat bermanfaat bagi ane yg newbie gene ...
BalasHapustrims gan berkat u ilmu ane bertambah lagi.. hihi
BalasHapusslm kenal..
wih mantep banget infonya, gan :)
BalasHapusini baru informasi, lengkap dan bermanfaat kang!!!
BalasHapusterima kasih banyak, saya kurang mengerti dengan kode2 html, tetapi ini sangat membantu saya, sebagai kode dasar yang sangat berguna!
BalasHapussalam sukses
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
BalasHapusKunjungan perdana..sambil baca-baca menambah pengetahuan disini...
BalasHapuswidihh.. kerennn plus puyeng liat code code nya, hahaha
BalasHapustapi thanks infonya bang
gan mau tanya nih, untuk Spasi atau Spasi 5 Buah apa Script Htmlnya?
BalasHapusMohon Bantuannya!
Cukup dengan menyematkan tag atau dengan menggunakan numetik  
Hapusinformasi ini menambah wawasan saya sedikit" wlaupun jujur saya masih belum memahami Kode" nya
BalasHapuswahhh.. keren abis gan..
BalasHapussaya newbie di blogging tentu sangat membutuhkan tutorial seperti ini.. copass gan ah, langsung.. makasih yaa
Kalau tanda seperti ini mas, kode html-nya seperti apa ya!!!
BalasHapus>
>>
banyak digunakan pada breadcrumbs
› (›) dan » (»), sedangkan kebalikannya tinggal ganti huruf “r” (right) dengan “l” (left) yang memiliki kode numerik ‹ serta «.
Hapuswah... keren sobat artikelnya
BalasHapussangata berguna sekali buat blog pemula seperti blogaku..tipsnya serba lengkapkang..thanks atas infonyaa
BalasHapusthanks infonya sob, mengingatkanku saat di bangku sekolah dulu
BalasHapussalam kenal gan
BalasHapuskeren ini sob,, baru tau tentang kode kode kek gini
BalasHapusMantep 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. .
BalasHapusUntuk 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.
Hapusnice info gan ,berkunjung ke website saya ya www.405arya.blogspot.com
BalasHapusterimakasih banyak atas tipsnya sangat bermanfaat sekali untuk saya......!
BalasHapusterimakasih sobat. Tutorial Blogger nya sangat bermanfaat.
BalasHapushttp://impoint.blogspot.com
artikelnya bisa buat tambah ilmu banget nih, thanks ya :)
BalasHapusterimakasi banyak atas tulisan dan postingannya, semoga bermanfaat untuk kita yang membacanya.
BalasHapussalam kenal yeah
Eah lengkap sekali nih, makasih agan atas berbagi informasinya.
BalasHapusterima kasih banyak gan udah berbagi ilmunya..
BalasHapussaya udah bosen tuh gan harus ganti template karena salah pengkodean
nice info gan.. lanjutkan
BalasHapustrims sharenya
thank's for your information..
BalasHapussalam kenal aja gan
mantap sekali gan infonya...
BalasHapusterima kasih udah berbagi
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.
BalasHapusThanks for share ya gan di tunggu kunjungan baliknya
Betul, yang mudah memang yang praktis. Tetapi tidak ada salahnya jika kita mengetahui sedikit tentang markah yang terkandung didalamnya (blog).
Hapusmantap banget niiii gannn.............jadi pengen belajar,,,,,
BalasHapuskunjungan perdana gant.. sangat bermanfaat gant tutornya.. http://heri-gipzy.blogspot.com
BalasHapus