Cara Membuat Markup: HTML Tags and Formatting

Cara Membuat Markup: HTML Tags and Formatting

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web.

Selain itu, HTML juga menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.

Membuat Markup HTML Tags di Blogger tentunya sangat mudah karena apa yang kita butuhkan telah disediakan oleh Blogger.

Contoh yang paling dasar dalam pembuatan Heading Tag di dalam postingan blog seperti H2 (Heading), H3 (Sub Heading) dan H4 (Minor Heading).

Sedangkan, kalau dalam kasusnya di Home Page, Heading Tag akan berubah secara otomatis menjadi H1 untuk Nama Blog, H2 untuk widget dan H3 untuk widget-widget yang berada di Footer.

Contoh di atas adalah Header Tag yang telah menganut SEO Dinamis, artinya Tag-Tag akan berubah secara otomatis mengikuti suatu laman dan sesuai anjuran SEO Search Engine.

Cara Membuat Markup: HTML Tags and Formatting

Pembuatan Formatting sebenarnya lebih rumit dibandingkan pembuatan HTML Tags di atas.

Itu semua karena Formatting menggunakan rumusnya masing-masing seperti tag atau atribut <pre>, <sup>, <i>, <e>, <em>, tab b, tag b strong, dan masih banyak lagi.

Lihat HTML Tags dan Formatting di bawah ini:

Headings

Header one

Header two

Header three

Header four

Header five

Header six

Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs - Apple Worldwide Developers' Conference, 1997

Tables

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

Definition Lists

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.

Unordered Lists (Nested)

• 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

Ordered List (Nested)

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

HTML Tags

These supported tags come from the WordPress.com code FAQ. Address Tag

1 Infinite Loop Cupertino, CA 95014 United States

Anchor Tag (aka. Link) This is an example of a link. 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.

.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;
}

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. Variable Tag This allows you to denote variables.

Untuk membuat HTML Tags dan Formating seperti di atas, silahkan COPAS kode di bawah ini dan buatlah artikel terbaru untuk HTML (bukan Compose) di blog Anda.

<h2>Headings</h2><h1>Header one</h1><h2>Header two</h2><h3>Header three</h3><h4>Header four</h4><h5>Header five</h5><h6>Header six</h6><h2>Blockquotes</h2>Single line blockquote: <br /><blockquote>Stay hungry. Stay foolish.</blockquote>Multi line blockquote with a cite reference: <br /><blockquote>People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things. <cite>Steve Jobs - Apple Worldwide Developers' Conference, 1997</cite></blockquote><h2>Tables</h2><table><thead><tr><th>Employee</th><th>Salary</th><th></th></tr></thead><tbody><tr><th><a href="http://example.org/">John Doe</a></th><td>$1</td><td>Because that's all Steve Jobs needed for a salary.</td></tr><tr><th><a href="http://example.org/">Jane Doe</a></th><td>$100K</td><td>For all the blogging she does.</td></tr><tr><th><a href="http://example.org/">Fred Bloggs</a></th><td>$100M</td><td>Pictures are worth a thousand words, right? So Jane x 1,000.</td></tr><tr><th><a href="http://example.org/">Jane Bloggs</a></th><td>$100B</td><td>With hair like that?! Enough said...</td></tr></tbody></table><h2>Definition Lists</h2><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 <a href="https://www.youtube.com/watch?v=O_HyZ5aW76c" title="We'll Do It Live">explain</a> this one.</dd></dl><h2>Unordered Lists (Nested)</h2><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><h2>Ordered List (Nested)</h2><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><h2>HTML Tags</h2>These supported tags come from the WordPress.com code <a href="http://en.support.wordpress.com/code/" title="Code">FAQ</a>. <strong>Address Tag</strong> <br /><address>1 Infinite Loop Cupertino, CA 95014 United States</address><strong>Anchor Tag (aka. Link)</strong> This is an example of a <a href="http://apple.com/" title="Apple">link</a>. <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 /><pre>.post-title {<br /> margin: 0 0 5px;<br /> font-weight: bold;<br /> font-size: 38px;<br /> line-height: 1.2;<br /> 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;<br />}</pre><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. <strong>Variable Tag</strong> This allows you to denote <var>variables</var>.

Apa Fungsi dan Tujuan HTML Tags dan Formatting?

Sebagai blogger, kita akan menggunakan HTML Tags dan Formatting untuk keperluan dalam pembuatan, pengembangan atau desain ulang sebuah template blogger.

Apalagi ketika sebuah template blogger akan di jual, maka formasi penulisan ini perlu di tulis di blog tersebut.

Nantinya, HTML Tags dan Formatting tersebut akan kita "sandingkan" dengan artikel-artikel seperti Lorem Ipsum Dolor Sit Amet.

Dengan adanya artikel ini, semoga blogger mana pun yang ingin membuat huruf tebal, kata miring, dan banyak lagi. Mungkin itu saja. Semoga berguna, Gan!