Cara Menciptakan 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 ketika 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 bahan ilmu pengetahuan HTML dasar, gejala ini dikenal dengan istilah tag.

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

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

Contoh lainya yaitu instruksi <i> dan </i>. Kode ini berfungsi memiringkan tulisan, menyerupai ini: "Halo, Nama aku Arief Ghozaly."

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

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

Maka, jadinya kurang lebih akan menyerupai ini:

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

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

Cara Membuat Markup: HTML Tags & Formatting

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

Artikel ini cocok buat kau yang memiliki blog, dengan topik metablogging; alias blog yang membahas perihal HTML, CSS, dan JavaScript (JS) menyerupai ABT Blog.

1. Cara Membuat Tabel/Table di Postingan Blog

Kalau ingin menciptakan tabel, atau kotak-kotak menyerupai Microsoft Excel; maka yang diharapkan yaitu tag table, tbody, th, td, tr, dan thead.

Silakan gunakan instruksi 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 menyerupai 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 menciptakan kutipan dari beberapa teks yang ada di dalam artikel, maka gunakan instruksi <blockquote> dan penutupnya yaitu </blockquote> menyerupai ini:

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

Maka, jadinya menyerupai ini:

SEO Kraken Blogger Theme yaitu template blogger paling SEO, keren, ciamik, dan powerfull di Google. Artinya, gampang 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 alasannya yaitu memakai atribut dt dan dd. Contohnya menyerupai 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, jadinya menyerupai 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, jadinya menyerupai 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 yaitu tag yang akan menampilkan instruksi panjang dalam satu bentuk yang tidak sanggup di ganggu gugat oleh bab isi dari artikel yang ada; terpotong atau terputus alasannya yaitu gambar, misalnya.

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

Untuk mengatasi duduk kasus di atas, maka yang diharapkan yaitu instruksi Pre/Code. Kamu sanggup menentukan salah satu di antara keduanya, akan tetapi, saran dari kami yaitu memakai instruksi Pre saja.

Contohnya:

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

Maka, jadinya menyerupai berikut ini:

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

Update: HTML Tags & Formatting Lengkap

Untuk mempersingkat waktu, secara tidak eksklusif kami akan menginformasikan beberapa tag dari HTML yang mungkin kau butuhkan suatu ketika nanti, contohnya untuk rumus matematika atau lainnya.

Kodenya:

<strong>Abbreviation Tag</strong> The abbreviation <abbr title="Cara Membuat Markup: HTML Tags & Formatting">srsly</abbr> stands for "seriously". <strong>Acronym Tag (<em>deprecated in HTML5</em>)</strong> The acronym <acronym title="Cara Membuat Markup: HTML Tags & Formatting">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 jadinya akan tampak menyerupai 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, jadinya akan tampak menyerupai 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 kau berisi artikel metablogging (HTML, CSS, dan JavaScript) atau perihal 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 sanggup mengecek di artikelnya langsung: Cara Membuat dan Memasang Markup HTML Tags & Formatting di Blogger.
Sumber http://addbloggerthemes.blogspot.com

Share this post