Apa itu Teks Terformat pada HTML?

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 <blockqoute><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 di dalam elemen <blockquote> ini dapat berupa sebuah paragraf, heading ataupun list

  1. <blockquote>

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

  3. </blockquote>


Berikut tampilan standar ketika kita sebuah konten berada di dalam <blockquote>.
20191203183740a896e59127ea67da3bc92bf402315f13.jpeg
Pada elemen ini kita dapat menggunakan atribut cite untuk menentukan sumber URL dari sebuah kutipan (Jika kutipan tersebut bersumber dari sebuah situs website).

  1. <blockquote cite="https://id.wikipedia.org/wiki/Situs_web">

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

  3. </blockquote>



Preformatted text

Pada modul sebelumnya, kita sudah mengetahui bahwa HTML akan mengabaikan penulisan spasi yang dituliskan secara berulang dan juga line breaks (baris baru). Tetapi 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:

  1. <pre>

  2.    SAJAK PUTIH

  3.  

  4. Bersandar pada tari warna pelangi

  5. Kau depanku bertudung sutra senja

  6. Di hitam matamu kembang mawar dan melati

  7. Harum rambutmu mengalun bergelut senda

  8.  

  9. Sepi menyanyi, malam dalam mendoa tiba

  10. Meriak muka air kolam jiwa

  11. Dan dalam dadaku memerdu lagu

  12. Menarik menari seluruh aku

  13.  

  14. Hidup dari hidupku, pintu terbuka

  15. Selama matamu bagiku menengadah

  16. Selama kau darah mengalir dari luka

  17. Antara kita Mati datang tidak membelah...

  18.  

  19.                    Karya : Chairil Anwar

  20. </pre>



Sehingga pada browser akan menampilkan hasil yang sama seperti yang kita tuliskan.
20191203184335df8174f80cbbf9a5aa41119f106a2c89.png

Figure

Elemen ini digunakan untuk merepresentasikan 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 mengkelompokkan blok konten yang dapat dipindahkan posisinya dari blok utama sebuah dokumen tanpa mempengaruhi arti dari induk dokumen.
Di dalam elemen figure kita dapat menuliskan elemen <figcaption> sebagai sebuah caption (judul) untuk konten tersebut. Berikut contoh penggunaan figure pada sebuah konten gambar.

  1. <p>Dicoding adalah sebuah perusahaan startup yang bertujuan mengembangkan ekosistem developer di Indonesia.

  2.     Berdiri sejak 5 Januari 2015, Dicoding memiliki platform pembelajaran elektronik di laman Dicoding.com.</p>

  3. <figure>

  4.     <img src="https://i.imgur.com/cs2BJzw.jpg" alt="dicoding" width="200px">

  5.     <figcaption>Dicoding</figcaption>

  6. </figure>

  7. <p>Materi perdana yang menjadi magnet dari awal berdirinya Dicoding hingga kini adalah kelas Menjadi Android Developer

  8.     Expert. Kelas ini dikembangkan oleh Google Developer Expert in Android, Sidiq Permana dan Head of Dicoding Academy,

  9.     Ahmad Imaduddin. Seperti halnya kelas Picodiploma lain, modul online-nya juga hadir dalam bentuk buku berjudul sama

  10. yang telah mendapatkan ijin dan ISBN.</p>


201912031842223de7d9d37f23c17d29b9f3013e9f76c7.jpeg
Contoh lainnya, figure ini dapat kita gunakan untuk me-markup sebuah konten puisi.

  1. <figure>

  2.    <pre>

  3.            SAJAK PUTIH

  4.  

  5.        Bersandar pada tari warna pelangi

  6.        Kau depanku bertudung sutra senja

  7.        Di hitam matamu kembang mawar dan melati

  8.        Harum rambutmu mengalun bergelut senda

  9.  

  10.        Sepi menyanyi, malam dalam mendoa tiba

  11.        Meriak muka air kolam jiwa

  12.        Dan dalam dadaku memerdu lagu

  13.        Menarik menari seluruh aku

  14.  

  15.        Hidup dari hidupku, pintu terbuka

  16.        Selama matamu bagiku menengadah

  17.        Selama kau darah mengalir dari luka

  18.        Antara kita Mati datang tidak membelah...

  19.    </pre>

  20.    <figcaption>Sajak Putih oleh Charil Anwar</figcaption>

  21. </figure>


20191203184350b4657b45eb5dc0e1966ffd1e740149d0.png

*

Post a Comment (0)
Previous Post Next Post