Typography Infastio Blogger Template

"Beberapa kumpulan typography dan additional html di dalam template blogger Infastio yang dapat kamu gunakan sesuai kebutuhan. yuk disimak!"

Typography, atau tipe teks, adalah salah satu aspek penting dalam desain web. Bagaimana teks ditampilkan, berformat, dan ditempatkan di halaman web Anda dapat memiliki dampak besar pada pengalaman pengguna dan estetika keseluruhan. 

Dalam HTML template Infastio, terdapat berbagai elemen dan atribut yang dapat Anda gunakan untuk menampilkan teks. Artikel ini akan menspill berbagai elemen dan atribut typography didalamnya.

Headings

Elemen ini digunakan untuk membuat heading atau judul. <h1> adalah yang tertinggi, sedangkan <h6> adalah yang terendah dalam hierarki.

Contoh:

Ini adalah Heading H2

Ini adalah Subheading H3

Ini adalah Minor Heading H4

Ini adalah H5

Ini adalah H6

Html code:

<h2>Ini adalah Heading 2</h2>

<h3>Ini adalah Heading 3</h3>

<h4>Ini adalah Heading 4</h4>

<h5>Ini adalah Heading 5</h5>

<h6>Ini adalah Heading 6</h6>

Paragraf

Elemen <p> digunakan untuk menampilkan teks paragraf. Menjadikan <p> sebagai default dalam penulisan artikel akan memberikan banyak keuntungan. Diantaranya adalah: struktur seo yang lebih rapih, dan dukungan penuh widget iklan dalam artikel.

Ordered List (List berurutan) / Numbered List

1. Baris 1
2. Baris 2 tambahkan <br/> / shift + Enter
   Isi Baris 2
3. Baris 3
4. Dst.

Unordered List (List tidak berurutan) ? Bulleted List

Tebal dan Miring

Elemen <strong> digunakan untuk mewajibkan teks menjadi tebal, sementara <em> digunakan untuk menekankan teks.

Contoh:

Teks Tebal

Teks Miring

Html code:

<strong>Teks Tebal</strong>

<em>Teks Miring</em>

Superskrip dan Subskrip

Anda dapat menggunakan <sup> untuk superskrip dan <sub> untuk subskrip.

Contoh:

E = mc²

H₂O

Html code:

E = mc<sup>2</sup>

H<sub>2</sub>O

Teks dengan Garis Bawah

Anda dapat menambahkan garis bawah pada teks menggunakan elemen <u>.

Contoh:

Teks dengan Garis Bawah

Html code:

<u>Teks dengan Garis Bawah</u>

Teks coret

Anda dapat mengatur teks menjadi teks coret dengan menggunakan elemen <s>, <strike>, atau <del>.

Contoh:

Teks Tepi

Typoh

$100

Html code:

<s>Teks Tepi</s>

<strike>Typoh</strike>

<del>$100</del>

Quote

Elemen ini digunakan untuk mengutip teks dari sumber lain.

Contoh:

Ini adalah kutipan dari sumber lain. Kutipan ini dapat berisi beberapa paragraf.

Html code:

<blockquote>
  Ini adalah kutipan dari sumber lain. Kutipan ini dapat berisi beberapa
  paragraf.
</blockquote>

Singkatan / Abbreviation

Elemen <abbr> digunakan untuk menggambarkan singkatan atau akronim.

Contoh:

HTML adalah bahasa markup.

Html code:

<abbr title="Hypertext Markup Language">HTML</abbr> adalah bahasa markup.

Kutipan Citation

Elemen <cite> digunakan untuk mengacu pada sumber teks kutipan.

Contoh:

Desain Web Modern oleh John Doe

Html code:

<cite>Desain Web Modern</cite> oleh John Doe

Preformatted

Elemen <pre> digunakan untuk menampilkan teks dengan presisi yang tinggi, termasuk spasi dan baris baru.

Contoh:

Ini adalah contoh teks dengan presisi tinggi.
Teks ini akan ditampilkan persis seperti yang ditulis di sini.

Html code:

<pre>
Ini adalah contoh teks dengan presisi tinggi.
Teks ini akan ditampilkan persis seperti yang ditulis di sini.
</pre>

Buttons / Tombol

Beberapa html tombol custom yang tersedia dalam template Infastio.

Contoh:

Tombol utama

Tombol kedua

Tombol tidak aktif

Html code:

<button class="btn-primary">Tombol utama<button>

<button class="btn-secondary">Tombol kedua<button>

<button class="btn-inactive">Tombol tidak aktif<button>

Tombol Demo

Tombol Download

Tombol Buy

Tombol Send

Tombol WhatsApp

Tombol Contact

Html code:

<p><a class="btn-demo">Tombol Demo</a></p>
<p><a class="btn-download">Tombol Download</a></p>
<p><a class="btn-buy">Tombol Buy</a></p>
<p><a class="btn-send">Tombol Send</a></p>
<p><a class="btn-wa">Tombol WhatsApp</a></p>
<p><a class="btn-contact">Tombol Contact</a></p>

Keyboard kbd

Code kbd biasa digunakan untuk menampilkan suatu keys yang terdapat di dalam keyboard.

Contoh:

ctrl + x

Html code:

<kbd>ctrl</kbd> + <kbd>x</kbd>

Mark

Code mark biasa digunakan untuk menhighlight suatu kata.

Contoh:

Pilih login

Html code:

Pilih <mark>login</mark>

Kesimpulan

Typography dalam HTML adalah bagian penting dari desain web. Dengan menggunakan berbagai elemen dan properti CSS, Anda dapat mengendalikan tampilan teks secara efektif. Dalam artikel ini, kami telah menjelaskan elemen-elemen dasar, gaya teks, tipe teks khusus, dan elemen lain yang berguna untuk menciptakan tipe teks yang menarik dan informatif dalam HTML. 

Dengan memahami konsep-konsep ini, Anda dapat meningkatkan kualitas desain artikel web Anda dan memberikan pengalaman yang lebih baik kepada pengunjung. Semoga artikel ini bermanfaat dalam memahami typography dalam HTML.