All Typography Juyo Blogger Template

YZG November 25, 2024

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 YzTheme, terdapat berbagai elemen dan atribut yang dapat Anda gunakan untuk menampilkan teks. Artikel ini akan menspill berbagai elemen dan atribut typography didalamnya.

Caption Image Typography YzTheme

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>

Drop Cap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.

Html code:

Gunakan class: first-letter / drop / dropCap

<p><span class="dropCap">L</span>orem ipsum dolor sit amet,....... </p>

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.

Ini adalah paragraf dengan class Note

Ini adalah paragraf dengan class Success

Ini adalah paragraf dengan class Warning

Ini adalah paragraf dengan class Danger

HTML code:

<p class='note'>Ini adalah paragraf dengan class Note</p>
<p class='success'>Ini adalah paragraf dengan class Success</p>
<p class='warning'>Ini adalah paragraf dengan class Warning</p>
<p class='danger'>Ini adalah paragraf dengan class Danger</p>

Spoiler

HTML code:

<details>
  <summary class="title">Spoiler:</summary>
  <p>Isi spoiler di sini</p>
</details>

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

Table

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

Contoh:

Tombol utama

Tombol kedua

Tombol tidak aktif

Html code:

<a class="btn-primary">Tombol utama<a>
<a class="btn-secondary">Tombol kedua<a>
<a class="btn-inactive">Tombol tidak aktif<a>

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.

YZG

Blogger Template enthusiast.
See collections