Tipografi


Salah satu tugas utama HTML adalah memberikan struktur dan makna teks (biasa dikenal sebagai semantik) sehingga browser dapat menampilkannya dengan benar. Artikel kali ini akan menjelaskan bagaimana cara HTML dapat digunakan untuk menyusun teks sehingga menjadi sebuah halaman, seperti judul, paragraf, penekanan kata – kata, membuat list / daftar, dan masih banyak lagi.

Judul (Heading)

Untuk judul (Heading) terdiri dari 6 elemen / tag yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Setiap elemen tersebut memiliki tingkatan kata / konten yang berbeda dalam dokumen, seperti <h1>merepresentasikan judul utama, <h2> merepresentasikan sub-judul, <h3> mewakili sub dari sub-judul, dan seterusnya sampai <h6>. Mengapa dikatakan memiliki tingkatan yang berbeda? karena ukuran huruf dari ke 6 tag tersebut memiliki ukuran yang berbeda. Dimulai dari yang terbesar <h1> sampai terkecil <h6>.

Contoh :

<h1>Ini adalah heading / judul 1</h1>
<h2>Ini adalah heading / judul 2</h2>
<h3>Ini adalah heading / judul 3</h3>
<h4>Ini adalah heading / judul 4</h4>
<h5>Ini adalah heading / judul 5</h5>
<h6>Ini adalah heading / judul 6</h6>

Output :

Ini adalah heading / judul 1

Ini adalah heading / judul 2

Ini adalah heading / judul 3

Ini adalah heading / judul 4

Ini adalah heading / judul 5
Ini adalah heading / judul 6

Paragraf

Untuk membuat paragraf seperti yang telah kalian ketahui pada tutorial – tutorial sebelumnya, paragraf dibungkus menggunakan tag <p>. Seperti ini :

<p>Ini adalah paragraf</p>

Output :

Ini adalah paragraf

Hirarki struktur teks

Seperti pada contoh yang sudah dijelaskan di atas, baik itu heading / judul maupun paragraf dalam penerapannya pada sebuah artikel. Tag <h1> akan dijadikan sebagai judul dalam sebuah artikel, <h2>sebagai judul pada setiap bagian / babnya, <h3> akan menjadi sub-bagian dari setiap bagian, dan seterusnya. Serta tag <p> dimanfaatkan sebagai isi konten di artikel tersebut.

Contoh :

<h1>Tutorial HTML Bahasa Indonesia</h1>
<h2>Bab 1: Pengenalan</h2>
<p>Berisi informasi yang perlu kalian ketahui untuk memulai belajar HTML</p>
<h2>Bab 2: Penulisan</h2>
<p>Mulai menulis kode serta mempelajari struktur elemen pada HTML</p>

Output :

Tutorial HTML Bahasa Indonesia

Bab 1: Pengenalan

Berisi informasi yang perlu kalian ketahui untuk memulai belajar HTML

Bab 2: Penulisan

Mulai menulis kode serta mempelajari struktur elemen pada HTML

Peformatan teks

Bukan hanya Judul dan Paragraf, HTML juga memiliki elemen yang dapat memanipulasi teks / huruf seperti teks menjadi tebal <b>, teks menjadi miring <i>, garis bawah <u>, dll.

Membuat teks menjadi tebal

Contoh :

<p>Contoh sebuah <b>teks</b> yang tebal</p>

Output :

Contoh sebuah teks yang tebal

Membuat teks menjadi miring

Contoh :

<p>Contoh sebuah <i>teks</i> yang miring</p>

Output :

Contoh sebuah teks yang miring

Membuat garis bawah pada teks

Contoh :

<p>Contoh sebuah <u>teks</u> yang memiliki garis bawah</p>

Output :

Contoh sebuah teks yang memiliki garis bawah

Membuat garis tengah pada teks

Contoh :

<p>Contoh sebuah <del>teks</del> yang memiliki garis tengah (teks yang dicoret)</p>

Output :

Contoh sebuah teks yang memiliki garis tengah (teks yang dicoret)

Membuat teks menjadi kecil

Contoh :

<p>Contoh sebuah <small>teks</small> yang kecil</p>

Output :

Contoh sebuah teks yang kecil

Membuat subscript (huruf kecil yang berada di bawah teks)

Contoh :

<p>Contoh sebuah <sub>teks</sub> subscript</p>

Output :

Contoh sebuah teks subscript

Membuat superscript (huruf kecil yang berada di atas teks)

Contoh :

<p>Contoh sebuah <sup>teks</sup> superscript</p>

Output :

Contoh sebuah teks superscript

List / Daftar konten

List atau Daftar memang sangat dibutuhkan, ketika kita ingin mencatat menu, petunjuk, langkah – langkah, dll. Daftar juga akan sangat berguna pada halaman web. HTML memiliki 3 elemen yang dapat digunakan untuk mendefinisikan / membuat sebuah list atau daftar konten yaitu <dl><ul>, dan <ol>.

Description List (Daftar dengan keterangan)

Mendefinisikan sebuah nama / istilah pada sebuah daftar.

Contoh :

<dl>
    <dt>Jus</dt>
    <dd>- Melon</dd>
    <dd>- Jeruk</dd>
    <dd>- Mangga</dd>
    <dt>Teh</dt>
    <dd>- Hijau</dd>
</dl>

Output :

Jus
– Melon
– Jeruk
– Mangga
Teh
– Hijau

Ordered list (Daftar yang disusun secara berurutan)

Menyusun tingkatan dalam sebuah daftar, misalnya mengurutkan nama dari abjad atau tingkat kepentingan tertentu. Setiap bagian pada daftar diurutkan menggunakan nomor (1 – 99) atau huruf (a – z).

Contoh :

<ol>
    <li>Jus</li>
    <li>Kopi</li>
    <li>Susu</li>
    <li>Teh</li>
    <li>Soda</li>
</ol>

Output :

  1. Jus
  2. Kopi
  3. Susu
  4. Teh
  5. Soda

Unordered list (Daftar yang disusun tanpa memiliki urutan)

Daftar yang tersusun tanpa memiliki kepentingan tertentu (semua bagiannya sama pentingnya). Biasanya setiap bagian diurutkan menggunakan simbol lingkaran hitam.

Contoh :

<ul>
    <li>Jus</li>
    <li>Kopi</li>
    <li>Susu</li>
    <li>Teh</li>
    <li>Soda</li>
</ul>

Output :

  • Jus
  • Kopi
  • Susu
  • Teh
  • Soda

Daftar yang bercabang

Dalam membuat sebuah daftar, mungkin kalian ingin daftar yang kalian buat tersebut memiliki sebuah cabang (membagi daftar menjadi beberapa sub-bagian lagi di dalam daftar tersebut). Artinya terdapat sebuah daftar di dalam daftar (sama seperti elemen bersarang).

Contoh :

<ol>
    <li>Jus
        <ul>
            <li>Jeruk</li>
            <li>Melon</li>
            <li>Mangga</li>
        </ul>
    </li>
    <li>Kopi</li>
    <li>Susu
        <ul>
            <li>Putih</li>
            <li>Coklat</li>
        </ul>
    </li>
    <li>Teh</li>
    <li>Soda</li>
</ol>

Output :

  1. Jus
    • Jeruk
    • Melon
    • Mangga
  2. Kopi
  3. Susu
    • Putih
    • Coklat
  4. Teh
  5. Soda