Block Formatting Text: Long Quotations, Preformatted Text, dan Figure

Sejauh ini, kita sudah mengenal paragraf, heading, dan juga list pada HTML. Tapi masih ada beberapa lagi yang merupakan spesial teks format yang dapat kita gunakan yaitu <blockquote>, <pre>, dan <figure>.

Long Quotations

Jika pada konten kita memiliki sebuah kutipan ataupun sebuah testimonial, kita dapat gunakan format long quotations dengan menggunakan tags <blockquote>. Konten dalam elemen <blockquote> dapat berupa sebuah paragraf, heading, ataupun list.

Pada elemen ini, kita dapat menggunakan atribut cite untuk menentukan sumber URL dari sebuah kutipan (jika kutipan tersebut bersumber dari sebuah situs website). Namun, tidak ada tampilan yang berbeda pada browser secara kasat mata.

<blockquote cite="https://id.wikipedia.org/wiki/Situs_web">
  <p>
    Situs web (bahasa Inggris: website) adalah sekumpulan halaman web yang saling berhubungan yang
    umumnya berada pada peladen yang sama berisikan kumpulan informasi yang disediakan secara
    perorangan, kelompok, atau organisasi.
  </p>
</blockquote>

Preformatted Text

Pada modul sebelumnya, kita sudah mengetahui bahwa HTML akan mengabaikan spasi yang dituliskan secara berulang dan juga line breaks (garis baru). Namun, pada beberapa tipe konten, seperti contoh kode atau puisi hal tersebut sangat berarti.

Dengan begitu, terdapat sebuah elemen yang dapat kita gunakan untuk menampilkan konten sesuai yang kita tulis pada text editor. Untuk menggunakannya, kita gunakan elemen <pre> sebagai pembungkus kontennya. Perhatikan contoh berikut.

Figure

Elemen <figure> digunakan untuk mempresentasikan konten tersendiri (self-contained content), seperti ilustrasi, diagram, foto, atau bisa juga sebuah baris kode. Banyak hal yang dapat digunakan dalam elemen ini.

Elemen ini digunakan untuk mengelompokkan blok konten yang dapat dipindahkan posisinya dari blok utama sebuah dokumen tanpa mempengaruhi arti dari induk dokumen.

Dalam elemen <figure>, kita dapat menuliskan elemen <figcaption> sebagai sebuah caption (judul) untuk konten tersebut. Berikut adalah contoh penggunaan figure pada sebuah konten gambar.

Contoh lainnya, elemen figure dapat kita gunakan untuk me-markup sebuah konten puisi.

Inline Formatting Text: Anchor, Emphasized Text, Important Text, dan Short Quotation

Kita sudah belajar mengidentifikasi penggunaan elemen pada konten yang mayor (besar) dengan menerapkan semantic HTML untuk mengorganisasi kontennya. Sekarang, kita akan mengenal beberapa formatting text yang digunakan dalam sebuah baris teks (inline teks).

Sebelum menjelaskan elemen inline untuk formatting text yang dapat digunakan, sepertinya kita perlu membahas sekilas mengenai block dan inline.

Pada standarnya, elemen HTML memiliki dua sifat, yaitu block dan inline. Elemen yang bersifat block selalu membuat baris baru ketika di-render. Contohnya seperti elemen paragraf, list, heading, dan lainnya. Lawan dari elemen tersebut, yaitu elemen inline. Elemen ini tidak menambahkan baris baru ketika di-render. Apa saja elemen tersebut? Mari kita bahas satu persatu.

Anchor

Apa itu anchor? Anchor (jangkar) merupakan elemen yang digunakan untuk membuat sebuah hyperlink ke halaman atau website lain, file, alamat email, atau URL lainnya. Untuk menggunakan elemen ini kita gunakan <a> sebagai tag pembuka dan </a> sebagai tag penutup. Selain itu, ada atribut wajib agar elemen ini berfungsi dengan baik, yaitu href untuk menetapkan sebuah target yang dituju.

Berikut adalah daftar atribut khusus yang dapat digunakan pada elemen ini.

Atribut	Nilai	Deskripsi
download	filename	Menginstruksikan browser untuk mengunduh pada URL yang ditetapkan daripada mengarahkannya.
href	URL	Menetapkan target yang akan diarahkan/unduh ketika pengguna menekan hyperlink.
hreflang	language_code	Menetapkan bahasa dari dokumen target.
ping	list_of_URLs	Menetapkan URL yang akan diberitahu dengan mengirimkan post request ping pada body oleh browser (berjalan di belakang layar) ketika target URL pada hyperlink ditekan. Biasanya atribut ini digunakan untuk pelacakan.
referrerpolicy	no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url	Menetapkan referensi untuk dikirim pada target.
rel	alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, noopener, prev, search, tag	Menetapkan hubungan antara halaman yang ditampilkan dengan target.
target	_blank, _parent, _self, _top	Menetapkan lokasi ketika membuka target contohnya pada sebuah tab, window, atau tab itu sendiri.
media	media_type	Menetapkan tipe media yang digunakan pada target.

Emphasized Text

Gunakan elemen <em> untuk menunjukkan bagian kata yang perlu kita tekankan. Elemen ini menunjukkan stress emphasis atau konten/kata yang perlu mendapatkan penekanan atau perhatian khusus. Berikut contoh penggunaannya.

Pada kalimat pertama, penekanan terdapat pada “siapa” seorang pelajar. Pada kalimat kedua, penekanan terdapat pada “apa” yang sedang ditekuni oleh Oding.

Standarnya, pada browser sebuah kata yang ditekankan akan ditampilkan dalam gaya miring pada teksnya.

Important Text

Gunakan elemen <strong> untuk menunjukkan sebuah teks yang begitu penting (strong importance), serius ataupun mendesak. Artinya, teks tersebut harus dapat perhatian lebih dari teks biasa lainnya.

Standarnya, pada browser sebuah teks yang diberi markup <strong> akan ditampilkan tebal. Lalu, ketika pengguna menggunakan pembaca layar (screen reader), suara yang terdengar akan berbeda. Ini mengartikan bahwa teks tersebut penting, tidak hanya sekadar tebal.

Short Quotations

Gunakan elemen <q> untuk menandai sebuah kutipan dalam sebuah teks. Elemen ini berbeda dengan <blockquote>. Elemen ini digunakan untuk kutipan pendek yang terletak di dalam baris (inline).

Standarnya, sebuah teks yang diberi markup <q> akan ditampilkan di dalam tanda kutip (quotation marks) pada browser.

Elemen quotation marks memiliki atribut cite untuk menentukan sumber URL dari sebuah kutipan (jika kutipan tersebut bersumber dari sebuah situs website). Namun, tidak ada perbedaan yang terlihat secara kasat mata jika dijalankan di browser.

<p>Dilansir dari website Mozilla, <q cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 diluncurkan
   pada 2004 dan menjadi produk yang sukses.</q>
</p>

Inline Formatting Text: Citation, Defining Terms, Subscript, Superscript, Highlighted Text, dan Line Break

Kita sudah belajar banyak formatting text. Namun, ada beberapa sisanya yang belum kita bahas. Tentunya, mereka tidak kalah penting dalam membangun konten halaman web yang lebih baik. Mari kita lengkapi pembahasan ini. Jom!

Citation

Selain sebuah atribut, <cite> juga merupakan sebuah elemen yang digunakan untuk sebuah rujukan pada sebuah dokumen, contohnya sebuah buku, majalah, artikel, dan lainnya.

Standarnya, pada browser sebuah teks yang diberi markup <cite> akan ditampilkan dengan huruf miring (italic).

Defining Terms

Elemen <dfn> digunakan ketika mendefinisikan sebuah istilah (term). Elemen ini harus terletak pada elemen lain yang menaunginya. Contohnya pada sebuah elemen <p> atau elemen <section>. Berikut contoh penggunaannya.

Standar pada browser yakni sebuah teks yang diberi markup <dfn> akan ditampilkan dengan huruf miring (italic).

Subscript dan Superscript

Subscript <sub> dan superscript <sup> adalah elemen yang dapat membuat teks yang ditampilkan tampak kecil, dengan posisi di bawah (sub) atau di atas (sup) dari teks biasanya. Elemen ini digunakan untuk menunjukkan sebuah rumus kimia ataupun matematika.

Highlighted Text

Untuk menandai atau menyorot sebuah teks kita bisa menggunakan elemen <mark>. Elemen ini digunakan ketika terdapat sebuah teks yang memiliki peran penting, biasanya teks tersebut merupakan bagian yang paling relevan atau penting dalam sebuah konteks kalimat.

Standarnya, pada browser teks yang diberi markup <mark> akan ditampilkan dengan background kuning dan teks hitam.

Line Break

Terkadang, kita mungkin perlu menambahkan sebuah baris baru pada sebuah baris teks (termasuk dalam paragraf), tetapi kita mengetahui bahwa browser akan mengabaikan sebuah penulisan spasi ganda ataupun baris baru. Jadi, kita memerlukan sebuah tanda yang dapat digunakan untuk memberitahu browser untuk “Tambahkan baris baru di sini!”.

Inline line break element (<br>) dapat digunakan untuk memberitahu browser untuk memberikan sebuah garis baru pada baris teks. Sama seperti gambar, elemen ini merupakan elemen kosong sehingga kita tidak membutuhkan sebuah tag penutup.

Latihan: Menerapkan Elemen Anchor pada Halaman Profil

Anda sudah belajar banyak sekali elemen-elemen pemberi format teks yang melengkapi pengembangan halaman web. Nah, sekarang waktunya kita berlatih agar materi yang dipelajari dapat terimplementasikan secara langsung.

Tujuan

Pada latihan sebelumnya, kita telah membuat daftar navigasi untuk setiap topik pembicaraan artikel. Nah, pada mulanya, kita berekspektasi daftar navigasi tersebut dapat mengarahkannya ke topik spesifik sesuai topik yang dipilih/tekan. Namun, hal tersebut belum dapat terealisasikan.

Kita akan memanfaatkan elemen anchor dan menambahkan sedikit atribut yang akan berperan dalam masalah di atas. Hasilnya, Halaman Profil sudah dapat dijelajahi dengan daftar navigasi. Sangat menarik, kan?

Alur Latihan

Berikut adalah alur latihan kali ini.

Membuka hasil latihan terakhir dengan VSCode.
Membuat elemen anchor dalam list item pada navigation list.
Memberikan atribut id pada setiap elemen <h2> sebagai topik pembahasan artikel.
Menyesuaikan nilai atribut href sesuai dengan id di setiap elemen <h2>.
Menjalankan halaman web pada browser.

Latihan Menerapkan Elemen Anchor pada Halaman Profil

Berikut adalah langkah-langkah yang perlu diikuti untuk mengerjakan latihan dengan baik.

Silakan buka proyek Halaman Profil terbaru. Gunakanlah code editor apa pun sesuai preferensi Anda. Jika belum memilikinya, silakan Anda unduh dan buka proyek tersebut pada GitHub repository ini.

Untuk menerapkan elemen anchor, tentu saja kita perlu memperbarui kode pada dokumen HTML. Jadi, silakan buka kembali berkas index.html dan tambahkan atau sesuaikan kodenya agar sesuai dengan kode bercetak tebal berikut.

<!DOCTYPE html><html>
  <head>
    <meta charset="utf-8" />
    <title>Halaman Profil Bandung</title>
  </head>
  <body>
    <h1>Bandung</h1>
    <p>
      Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi
      tersebut.
    </p>
 
    <ul>
      <li>
        <a href="#">Sejarah</a>
      </li>
      <li>
        <a href="#">Geografis</a>
      </li>
      <li>
        <a href="#">Wisata</a>
      </li>
    </ul>
 
    <h2>Sejarah</h2>
    <!-- Kode lainnya disembunyikan... -->
  </body>
</html>

Setelah menambahkan elemen anchor pada list item, tampilan navigation list akan menjadi hyperlink dan tampak seperti gambar berikut.

Namun, ketika salah satu item ditekan, tidak ada apa pun yang terjadi. Hal ini karena atribut href belum mengetahui topik yang akan diincar. Nilai href dapat berupa URL untuk mengarahkan ke halaman yang berbeda atau berupa anchor (tanda pagar (#)) yang diikuti dengan nama id dari elemen. Hal ini berguna untuk mengarahkan fokus pengguna pada elemen tersebut.

Oleh karena itu, mari kita berikan atribut id pada elemen-elemen yang akan menjadi target navigasi. Silakan sesuaikan kodenya dengan kode yang memiliki cetakan tebal berikut.

<!DOCTYPE html><html>
  <!-- Kode lainnya disembunyikan... -->
  <body>
    <!-- Kode lainnya disembunyikan... -->
 
    <ul>
      <li>
        <a href="#">Sejarah</a>
      </li>
      <li>
        <a href="#">Geografis</a>
      </li>
      <li>
        <a href="#">Wisata</a>
      </li>
    </ul>
 
    <h2 id="sejarah">Sejarah</h2>
    <img src="assets/image/history.jpg" alt="Sejarah" />
    <!-- Kode lainnya disembunyikan... -->
 
    <h2 id="geografis">Geografis</h2>
    <img src="assets/image/geografis.jpg" alt="Geografis" />
    <!-- Kode lainnya disembunyikan... -->
 
    <h2 id="wisata">Wisata</h2>
    <!-- Kode lainnya disembunyikan... -->
  </body>
</html>

Apakah Anda ingin mencoba melihat hasilnya? Silakan! Namun, tidak ada perubahan yang tampak pada browser karena kita hanya menambahkan identitas pada elemen <h2> saja.

Mari kita lanjutkan! Dari masing-masing elemen <h2> yang telah ditambahkan id, berikan juga pada setiap elemen anchor pada navigation list. Untuk lebih jelas, silakan sesuaikan dengan kode bercetak tebal berikut.

<!DOCTYPE html><html>
  <!-- Kode lainnya disembunyikan... -->
  <body>
    <!-- Kode lainnya disembunyikan... -->
 
    <ul>
      <li>
        <a href="#sejarah">Sejarah</a>
      </li>
      <li>
        <a href="#geografis">Geografis</a>
      </li>
      <li>
        <a href="#wisata">Wisata</a>
      </li>
    </ul>
 
    <h2 id="sejarah">Sejarah</h2>
    <img src="assets/image/history.jpg" alt="Sejarah" />
    <!-- Kode lainnya disembunyikan... -->
 
    <h2 id="geografis">Geografis</h2>
    <img src="assets/image/geografis.jpg" alt="Geografis" />
    <!-- Kode lainnya disembunyikan... -->
 
    <h2 id="wisata">Wisata</h2>
    <!-- Kode lainnya disembunyikan... -->
  </body>
</html>

Sip! Seharusnya, navigasi sudah berfungsi dengan baik. Anda bisa klik salah satu navigation item tersebut untuk menuju topik yang diinginkan sekarang. Berikut hasil perubahan yang telah dilakukan sejauh ini. Betapa senangnya!

Bedah Kode

Hebat! Halaman Profil kita sudah punya navigation list saat ini. Tidak hanya memiliki, tetapi berfungsi dengan semestinya. Mari kita ulas tahapan yang telah dilakukan.

Atribut ID

Atribut id termasuk dalam salah satu dari sekian global attribute. Global attributes merupakan attribute HTML yang diperuntukkan bagi elemen apa pun. Contoh yang kita lakukan pada latihan ini adalah memberikan atribut id pada elemen <h2>.

<body>
  <!-- Kode lainnya disembunyikan... -->
 
  <h2 id="sejarah">Sejarah</h2>
  <img src="assets/image/history.jpg" alt="Sejarah" />
  <!-- Kode lainnya disembunyikan... -->
 
  <h2 id="geografis">Geografis</h2>
  <img src="assets/image/geografis.jpg" alt="Geografis" />
  <!-- Kode lainnya disembunyikan... -->
 
  <h2 id="wisata">Wisata</h2>
  <!-- Kode lainnya disembunyikan... -->
</body>

Ada beberapa penggunaan umum terhadap atribut ini, yaitu menangkap elemen menggunakan JavaScript untuk melakukan manipulasi HTML dan memberikan highlight atau fokus pada elemen tersebut ketika diakses melalui URL. Dalam konteks latihan ini, kita menerapkan hal yang kedua.

Contohnya, perhatikan URL berikut.

https://example.com/#my_example_article_title

Jika URL di atas dijalankan, kita akan diarahkan atau ditujukan secara langsung ke elemen yang memiliki id “my_example_article_title”. Ini merupakan konsep asal dari penerapan anchor pada URL bahwa kita perlu menambahkan karakter pagar (#) sebelum menyebutkan nama id-nya.

Elemen Anchor

Melakukan navigasi antar halaman dapat menggunakan tag anchor. Apakah masih ingat dengan elemen tersebut?

<a href="https://example.com">Website Example</a>

Elemen <a> memiliki atribut wajib agar dapat berfungsi normal. Sebelumnya pernah disinggung bahwa ada global attributes. Nah, bagaimana dengan special attributes atau atribut khusus? Tentu saja ada! Contohnya href untuk elemen anchor.

Sebagaimana penjelasan sebelumnya, kita ingin daftar navigasi dapat mengarahkan pada topik yang dituju.

<ul>
  <li>
    <a href="#sejarah">Sejarah</a>
  </li>
  <li>
    <a href="#geografis">Geografis</a>
  </li>
  <li>
    <a href="#wisata">Wisata</a>
  </li>
</ul>

Dengan demikian, jika elemen anchor diklik, URL pada browser kita akan berubah dan fokus pada elemen ber-id yang sesuai.

Wah, suatu capaian yang bagus. Untuk menambah pengetahuan Anda dari latihan ini, berikut adalah beberapa referensi yang dapat dikunjungi dan disimak.

Bersambung ke:

Search This Blog

Full-Stack Web Developer