Cara Membuat Markup: HTML Tags & Formatting

Tutorial: Tips & Trik Cara Membuat dan Memasang Markup: HTML Tags & Formatting di Blogger/Blogspot

Bagi beberapa blogger, mungkin belum pernah mendengar istilah atau belum mengerti apa yang dimaksud dengan tag, elemen, dan atribut pada HTML.

Baik itu tag, elemen, dan atribut; merupakan dasar dari HTML, dan dasar dari seluruh halaman web yang ada di Internet saat ini. - Dunia Ilkom.

Pic by Udemy.com

Pada dasarnya, HTML membutuhkan cara guna memberitahukan apa fungsi sebuah text. Apakah text itu nantinya akan di buat sebagai link (tautan), garis miring, paragraf baru, daftar tulisan, dan banyak lagi.

Dalam materi ilmu pengetahuan HTML dasar, tanda-tanda ini dikenal dengan istilah tag.

Hampir semua tag yang ada di dalam HTML, di tulis secara berpasangan. Jika ada kode pembukanya, maka harus ada kode penutupnya. Akan tetapi, ada juga beberapa tag yang tidak membutuhkan kode pembuka, melainkan langsung menggunakan kode penutup; contohnya adalah kode </br> yang berfungsi memberi "spasi" antara paragraf sebelum dan sesudahnya.

Self Closing Tag atau Void Tag, yakni kode yang bisa digunakan/ditambahkan tanpa harus menambahkan kode pembukanya, atau pun kode penutupnya. Contoh lain dari <br> atau </br> untuk garis baru, adalah <hr> atau </hr> untuk garis horizontal.

Contoh lainya yaitu kode <i> dan </i>. Kode ini berfungsi memiringkan tulisan, seperti ini: "Halo, Nama saya Arief Ghozaly."

Guna kelengkapan artikel, kami akan membuat satu buah kalimat dengan menambahkan gaya tulisan yang ditebalkan (bold), dimiringkan (italic), dan garis tengah (strike through). Contoh text-tag yang akan kami gunakan:

"Halo, Nama saya <b>Arief Ghozaly</b>. Saya lahir dan besar di <i>Aceh</i>. Saat ini fokus saya untuk kuliah, <del>dan mencari nafkah melalui bisnis online.</del>"

Maka, hasilnya kurang lebih akan seperti ini:

"Halo, Nama saya Arief Ghozaly. Saya lahir dan besar di Aceh. Saat ini fokus saya untuk kuliah,
dan mencari nafkah melalui bisnis online."

Bagaimana? Cukup mudah, kan membuat HTML tags dan Formating?

Cara Membuat Markup: HTML Tags & Formatting

Di bawah ini, kami akan membuka rahasia penggunaan tag-tag HTML pada postingan di Blogger/Blogspot.

Artikel ini cocok buat kamu yang mempunyai blog, dengan topik metablogging; alias blog yang membahas tentang HTML, CSS, dan JavaScript (JS) seperti ABT Blog.

1. Cara Membuat Tabel/Table di Postingan Blog

Kalau ingin membuat tabel, atau kotak-kotak seperti Microsoft Excel; maka yang dibutuhkan adalah tag table, tbody, th, td, tr, dan thead.

Silakan gunakan kode di bawah ini:

<table>
<thead><tr>
<th>Employee</th>
<th>Salary</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>John Doe</th><td>$1</td><td>Because that's all Steve Jobs needed for a salary.</td>
</tr>
<tr>
<th>Jane Doe</th><td>$100K</td><td>For all the blogging she does.</td></tr>
<tr>
<th>Fred Bloggs</th><td>$100M</td><td>Pictures are worth a thousand words, right? So Jane x 1,000.</td></tr>
<tr>
<th>Jane Bloggs</th><td>$100B</td><td>With hair like that?! Enough said...</td></tr>
</tbody>
</table>

Hasilnya, kurang lebih akan seperti di bawah ini:

Employee	Salary
John Doe	$1	Because that's all Steve Jobs needed for a salary.
Jane Doe	$100K	For all the blogging she does.
Fred Bloggs	$100M	Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs	$100B	With hair like that?! Enough said...

2. Cara Membuat Kutipan (Blockquote) di Artikel Blogger

Kalau ingin membuat kutipan dari beberapa teks yang ada di dalam artikel, maka gunakan kode <blockquote> dan penutupnya yaitu </blockquote> seperti ini:

<blockquote>SEO Kraken Blogger Theme adalah template blogger paling SEO, keren, ciamik, dan powerfull di Google. Artinya, mudah mengalahkan blog pesaing dalam waktu 2 bulan saja.</blockquote>

Maka, hasilnya seperti ini:

SEO Kraken Blogger Theme adalah template blogger paling SEO, keren, ciamik, dan powerfull di Google. Artinya, mudah mengalahkan blog pesaing dalam waktu 2 bulan saja.

3. Cara Membuat Daftar Isi Artikel di Postingan Blogger/Blogspot

Kami lupa apa sebutannya, tapi di sini kami menyebutnya "List Title".

Bentuknya hampir sama dengan Numbered Lists, atau Ordered Lists. Akan tetapi, "List Title" bersifat agak lebih ke dalam karena menggunakan atribut dt dan dd. Contohnya seperti ini:

<dl>
<dt>Definition List Title</dt><dd>Definition list division.</dd>
<dt>Startup</dt><dd>A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.</dd>
<dt>#dowork</dt><dd>Coined by Rob Dyrdek and his personal body guard Christopher "Big Black" Boykins, "Do Work" works as a self motivator, to motivating your friends.</dd>
<dt>Do It Live</dt><dd>I'll let Bill O'Reilly will explain this one.</dd>
</dl>

Hasilnya bagaimana, sih?

Definition List Title

Definition list division.

Startup

A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.

#dowork

Coined by Rob Dyrdek and his personal body guard Christopher "Big Black" Boykins, "Do Work" works as a self motivator, to motivating your friends.

Do It Live

I'll let Bill O'Reilly will explain this one.

4. Cara Membuat Lists Item: Ordered Lists

Kodenya di bawah ini:

<ol>
<li>List item one <ol><li>List item one <ol>
<li>List item one</li><li>List item two</li><li>List item three</li><li>List item four</li></ol></li><li>List item two</li><li>List item three</li><li>List item four</li></ol></li><li>List item two</li><li>List item three</li><li>List item four</li>
</ol>

Maka, hasilnya seperti ini:

1. List item one
   1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
   2. List item two
   3. List item three
   4. List item four
2. List item two
3. List item three
4. List item four

5. Cara Membuat Lists Item: Unordered Lists

Bentuknya hampir sama dengan "List Title", tapi disebut Undordersts. Kodenya:

<ul>
<li>List item one <ul><li>List item one <ul>
<li>List item one</li><li>List item two</li><li>List item three</li><li>List item four</li></ul></li><li>List item two</li><li>List item three</li><li>List item four</li></ul></li><li>List item two</li><li>List item three</li><li>List item four<gt;
</ul>

Maka, hasilnya seperti ini:

• List item one
  • List item one
    • List item one
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
• List item two
• List item three
• List item four

6. Cara Membuat & Menampilkan Kode Banyak Menggunakan Tag Pre/Code

Pre/Code adalah tag yang akan menampilkan kode panjang dalam satu bentuk yang tidak dapat di ganggu gugat oleh bagian isi dari artikel yang ada; terpotong atau terputus karena gambar, misalnya.

Contohnya seperti ini, dalam beberapa kasus, seringkali kode terpotong di sebelah kanan BlogPosting karena kode yang dipasangkan terlalu panjang. Kami pernah menyinggungnya di sini: Cara Mengatasi Teks Keluar Jaluh dari BlogPosting.

Untuk mengatasi masalah di atas, maka yang dibutuhkan adalah kode Pre/Code. Kamu bisa memilih salah satu di antara keduanya, akan tetapi, saran dari kami yaitu menggunakan kode Pre saja.

Contohnya:

<pre>Halo, Nama saya. Saya lahir dan besar di Aceh. Saat ini fokus saya untuk kuliah, dan mencari nafkah melalui bisnis online.</pre>

Maka, hasilnya seperti berikut ini:

Halo, Nama saya. Saya lahir dan besar di Aceh. Saat ini fokus saya untuk kuliah, dan mencari nafkah melalui bisnis online.

Update: HTML Tags & Formatting Lengkap

Untuk mempersingkat waktu, secara tidak langsung kami akan menginformasikan beberapa tag dari HTML yang mungkin kamu butuhkan suatu saat nanti, misalnya untuk rumus matematika atau lainnya.

Kodenya:

<strong>Abbreviation Tag</strong> The abbreviation <abbr title="Seriously">srsly</abbr> stands for "seriously". <strong>Acronym Tag (<em>deprecated in HTML5</em>)</strong> The acronym <acronym title="For The Win">ftw</acronym> stands for "for the win". <strong>Big Tag&nbsp;<strong>(<em>deprecated in HTML5</em>)</strong></strong> These tests are a <big>big</big> deal, but this tag is no longer supported in HTML5. <strong>Cite Tag</strong> "Code is poetry." --<cite>Automattic</cite> <strong>Code Tag</strong> You will learn later on in these tests that <code>word-wrap: break-word;</code> will be your best friend. <strong>Delete Tag</strong> This tag will let you <br /><del>strikeout text</del>, but this tag is no longer supported in HTML5 (use the <code>&lt;strike&gt;</code> instead). <strong>Emphasize Tag</strong> The emphasize tag should <em>italicize</em> text. <strong>Insert Tag</strong> This tag should denote <br /><ins>inserted</ins>text. <strong>Keyboard Tag</strong> This scarsly known tag emulates <kbd>keyboard text</kbd>, which is usually styled like the <code>&lt;code&gt;</code> tag. <strong>Preformatted Tag</strong> This tag styles large blocks of code. <br />

Sehingga hasilnya akan tampak seperti berikut:

Abbreviation Tag The abbreviation srsly stands for "seriously". Acronym Tag (deprecated in HTML5) The acronym ftw stands for "for the win". Big Tag (deprecated in HTML5) These tests are a big deal, but this tag is no longer supported in HTML5. Cite Tag "Code is poetry." --Automattic Code Tag You will learn later on in these tests that word-wrap: break-word; will be your best friend. Delete Tag This tag will let you
strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead). Emphasize Tag The emphasize tag should italicize text. Insert Tag This tag should denote
insertedtext. Keyboard Tag This scarsly known tag emulates keyboard text, which is usually styled like the <code> tag. Preformatted Tag This tag styles large blocks of code.

Satu lagi, silakan dipelajari lebih lanjut:

<strong>Quote Tag</strong> <q>Developers, developers, developers...</q> --Steve Ballmer <strong>Strike Tag&nbsp;<strong>(<em>deprecated in HTML5</em>)</strong></strong> This tag shows <span style="text-decoration: line-through;">strike-through text</span> <strong>Strong Tag</strong> This tag shows <strong>bold<strong> text.</strong></strong> <strong>Subscript Tag</strong> Getting our science styling on with H<sub>2</sub>O, which should push the "2" down. <strong>Superscript Tag</strong> Still sticking with science and Isaac Newton's E = MC<sup>2</sup>, which should lift the 2 up. <strong>Teletype Tag&nbsp;<strong>(<em>deprecated in HTML5</em>)</strong></strong> This rarely used tag emulates <tt>teletype text</tt>, which is usually styled like the <code>&lt;code&gt;</code> tag.

Maka, hasilnya akan tampak seperti berikut:

Quote Tag Developers, developers, developers... --Steve Ballmer Strike Tag (deprecated in HTML5) This tag shows strike-through text Strong Tag This tag shows bold text. Subscript Tag Getting our science styling on with H₂O, which should push the "2" down. Superscript Tag Still sticking with science and Isaac Newton's E = MC², which should lift the 2 up. Teletype Tag (deprecated in HTML5) This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Seperti yang sudah kami utarakan di atas, penggunaan tag-tag dari HTML ini sangat penting apabila blog kamu berisi artikel metablogging (HTML, CSS, dan JavaScript) atau tentang matematika.

Yang sangat disayangkan, tidak semua template blogger mendukung HTML Tags & Formatting ini. Hanya beberapa tema blogger yang mendukung tag-tag HTML.

Untungnya, SEO Kraken Blogger Theme mendukung 100% HTML Tags & Formatting. Buktinya? Kamu bisa mengecek di artikelnya langsung: Cara Membuat dan Memasang Markup HTML Tags & Formatting di Blogger.

Labels: Tutorial Blogger

Thanks for reading Cara Membuat Markup: HTML Tags & Formatting. Please share this article.

Share this post