Blogging, Search Engine Optimization, Internet, Template, Widget hingga Monetize Blog.

Tag Blockquote, Tag Pre dan Cara Penerapanya

Kita berhadapan dengan banyak sekali tools pada interface di saat membuat sebuah posting di Blogger. Mungkin tools-tools tersebut tidak semua dipahami oleh sebagian rekan-rekan Blogger. Maka dari itu pada beberapa waktu lalu saya menerangkan sekilas pada artikel Panduan dalam Membuat Posting. Dari sekian banyak tools pada interfaces saat membuat posting, masih ada hal lain yang bisa dilakukan untuk mendukung penyajian konten di dalam posting, salah satunya yaitu penerapan tag pre.


Tag Blockquote, Tag Pre dan Cara Penerapanya

Tag Blockquote

Namun pertama, saya ingin mengulas tentang tag blockquote. Mungkin tag ini cukup sering rekan Blogger gunakan karena memang tersedia pada tools saat membuat posting.

Tool Quote

Pertanyaanya, tools ini kamu gunakan untuk apa? Apa fungsi sebenarnya dari tools ini?
Dalam bahasa Indonesia quote berarti kutipan. Blockquote sendiri berarti mempunyai fungsi untuk menandai sebuah kutipan atau paragraf/kalimat penting agar terlihat lebih menonjol dari pada tulisan lain di dalam posting. Contohnya pada paragraf ini, akan terlihat lebih mencolok dari pada tulisan di sekitarnya. Perintah dasar untuk menerapkan tag ini adalah <blockquote> KUTIPAN </blockquote>
Namun kini tools tersebut menjadi multifungsi karena sebagian rekan Blogger menggunakannya untuk berbagai kebutuhan. Contohnya pada Blog yang menyediakan topik tutorial Blog/web, tidak jarang saat membagikan sebuah kode atau script rekan Blogger yang satu ini termasuk saya sendiri menggunakan tag blockquote.

Memang sah-sah saja menyajikan kode atau script menggunakan tag blockquote, namun dengan mengacu pada fungsi asli dari tag tersebut,  penyajian script dengan tag ini sepertinya kurang tepat.

Tag Pre

Ada tag lain yang lebih afdol digunakan untuk penyajian kode atau script pada posting, yaitu tag pre.
PRE atau pre-formated berfungsi ketika kita menulis di mode HTML, apa yang kita tulis akan ditampilkan sesuai aslinya, walaupun kita memberikan ruang pada setiap baris tulisan, tabulasi, atau spasi yang panjang. Perintah dasar untuk menerapkan tag ini adalah <pre> SCRIPT </pre>
Dengan mengacu pada fungsi dari tag pre, penyajian kode atau script di dalam posting akan lebih afdol jika menggunakan tag ini. Karena kita bisa leluasa dalam menuliskan script, karena akan ditampilkan sesuai dengan apa yang kita ketikan.

Kelebihan Tag Pre dalam Penyajian Script

  • Mudah diatur agar script lebih mudah dipahami.
Karena leluasa dalam melakukan pengetikan, misalnya penyajian script bisa dibuat sedemikian rupa sehingga kita bisa membedakan setiap pasang tag pembuka dan tag penutup. Atau lebih mudah lagi jika kita membuat script pada aplikasi Notepad++ atau Adobe Dreamweaver karena script yang terbentuk akan tersusun secara otomatis. Kemudian kita bisa menyajikannya di dalam posting menggunakan tag pre ini tanpa ada perubahan susunan yang berubah secara tidak terduga.

Berikut adalah contoh penyajian script dengan tag <pre> script </pre> dalam mode HTML pada posting.

 <div id='header-inner'>
   <div class='titlewrapper'>
     <h1 class='title'>
       <b:include name='title'/>
     </h1>
   </div>
   <b:include name='description'/>
 </div> 

Namun bila menuliskan script pada mode HTML dan menggunakan tag <blockquote> script </blockquote>, spasi, tabulasi, atau jarak antar baris yang kita berikan akan hilang.
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>

  • Dapat ditambahkan SyntaxHighlighter untuk memberikan efek warna-warni.
Selain tampilan penyajian posting lebih menarik, script atau kode yang disajikan dengan memiliki efek perbedaan warna akan memudahkan kita dalam membedakan setiap elemen di dalamnya, seperti HTML, CSS, Javascript, tag, atribut, dan lain-lain. Bagaimana caranya?
Silakan baca Memberikan efek warna-warni pada script di dalam posting.
Sekian pembahasan mengenai tag blockquote dan tag pre. Semoga setelah mengetahui fungsi aslinya, kita lebih bisa memilih bagaimana penggunaan yang paling tepat untuk tag-tag ini.

Artikel terkait : Tag Blockquote, Tag Pre dan Cara Penerapanya

Artikel B-Tutorial Lainnya :

0 komentar:

Post a Comment

Copyright © 2014-2016 B-Tutorial - All Right Reserved