Cara Membuat Markup: HTML Tags & Formatting di Blogspot

Arief Ghozaly

Cara Membuat dan Memasang Markup: HTML Tags and Formatting di Blogspot (Blogger)

Singkatnya, HTML Tags dan Formatting adalah bagian dari Tag, Elemen dan Atribut pada HTML - DuniaIlkom.

Tag, Elemen dan Atribut pada HTML ini adalah bahasa Markup yang bertugas untuk membentuk suatu paragraf, list, bullets, paragraf, link, dll.

Hampir semua tag di dalam HTML ditulis secara berpasangan, contohnya seperti <div> dan </div>.

Dalam beberapa contoh pula, tag di HTML juga bisa dipasangkan (atau dibuat) tanpa harus menggunakan kode penutupnya secara langsung, seperti ini:

<div disinicode-disinicode-disinicode />

Nah, karena kebetulan SEO Kraken adalah template blogger premium terbaik 2018 saat ini, semua bahasa Markup HTML Tags dan Formatting sudah tersemat dengan sangat baik.

Cara Membuat Markup: HTML Tags and Formatting di Blogspot

Disini saya akan menjelaskan bagaimana cara membuat Markup HTML Tags dan Formatting, gunakan HTML (bukan Compose) ketika membuatnya.

1. Quote

Kalau ingin membuat Quote atau kutipan (Blockquote), caranya kan sudah ada di edit posting blogger.

Kalau mau mencobanya dengan cara manual, gunakan tag <blockquote> dan </blockqoute> seperti berikut:

<blockquote>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</blockquote>

Sehingga hasilnya akan seperti ini:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

2. Table

Kalau ingin membuat table mah gampang, cuma ya agak lumayan rumit. Copas saja kode dibawah ini, iseng-iseng sekalian belajar.

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

Sehingga hasilnya seperti berikut 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...

3. Definitions Lists Title

Bentuk dari List Title hampir sama seperti Numbered List atau Ordered Lists, cuma sifat List Title agak masuk ke dalam. Cara membuatnya seperti berikut:

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

Sehingga hasilnya seperti berikut ini:

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. Unordered List

Code yang dibutuhkan adalah kode dibawah ini:

<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</li></ul>

Sehingga hasilnya seperti berikut 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

5. Ordered List

Code yang dibutuhkan:

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

Sehingga hasilnya seperti berikut 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

6. Pre Code: Kode Panjang

Kalau ingin menggunakan kode yang panjang dalam satu kalimat baris sehingga kode tidak terpotong oleh sisi kanan BlogPosting, gunakan kode <pre> dan </pre>.

<pre> ----- disini kode pembukanya.
.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;}
</pre> ----- disini kode penutupnya.

Sehingga hasilnya seperti berikut ini:

.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;}

Markup: HTML Tags and Formatting

Untuk mempersingkat waktu, mau mandi, sudah maghrib, nih.....!

<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 seperti berikut ini:

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:

<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₂O, which should push the "2" down. <strong>Superscript Tag</strong> Still sticking with science and Isaac Newton's E = MC², 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.

Sehingga hasilnya seperti berikut ini:

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.

Gaya tulisan ini sangat penting untuk blog-blog yang membahas topik tentang HTML, CSS dan JavaScript.

Masalahnya, enggak semua template blogger include dengan bahasa Markup HTML ini. Alhamdulillah, SEO Kraken mendukung 100%.

Buktinya? Ntuh, diatas nooohhh... Dah ah, mau mandi dulu....

Labels: SEO Kraken

Thanks for reading Cara Membuat Markup: HTML Tags & Formatting di Blogspot. Bagikan postingan ini ke sosial media kamu, ya! :)