Web Tutorial Indonesia 
|
1 2 3 |
<blockquote cite="url"> teks atau paragraf </blockquote> |
Definisi dan Penggunaan
Elemen HTML blockquote merupakan sebuah mekanisme untuk menandai sebuah blok teks yang dikutip dari orang atau dokumen atau sumber lain. Mungkin hanya beberapa baris, atau mungkin berisi beberapa paragraf, kita juga bisa markah lagi teks dalam elemen ini menggunakan elemen p.
Menurut rekomendasi dari W3C menyatakan bahwa penulis web tidak harus mengetik tanda kutip dalam teks ketika mereka menggunakan blockquote, kita bisa mengatur tampilan blockquote dengan CSS .
Secara standar, browser akan membuat konten atau paragraf yang di-blockquote menjadi sedikit maju kearah kanan (perhatikan contoh gambar dibawah). Fitur ini banyak disalahgunakan untuk sekedar membuat indent teks sebagai cara untuk menarik perhatian pada sebuah paragraf atau bagian dari halaman, padahal sudah jelas bahwa elemen ini hanya digunakan untuk sebagai tanda untuk teks yang berupa sumber.
Kalau sekedar tampilan kita bisa mengaturnya dengan CSS, intinya jangan mengatur style dengan markah tapi perlakukan markah hanya sebagai penanda. Contohnya jika anda ingin agar tampilan paragraf sedikit maju kearah kanan, kita bisa mengaturnya dengan memberikan properti CSS margin-left.
Secara sederhana, penggunaan elemen blockquote diperlihatkan pada skrip dibawah ini:
|
1 2 3 |
<blockquote> Ini merupakan contoh paragraf yang merupakan sebuah kutipan panjang, kutipan ini bisa bersumber dari perkataan atau tulisan orang lain. </blockquote> |
Dukungan Browser
| Elemen | |||||
|---|---|---|---|---|---|
| <blockquote> | Ya | Ya | Ya | Ya | Ya |
Latihan Elemen HTML blockquote
Sebagai latihan membuat elemen HTML blockquote mari kita membuat satu file halaman HTML dengan nama index.html, setelah kita membuat halaman web tersebut kita ketikkan skrip berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Contoh blockquote</title> </head> <body> <p>Nyekrip.com merupakan web yang berisikan tutorial membuat program, yang berfokus pada pembaca indonesia yang mempunyai minat dalamhal pemrograman.</p> <blockquote cite="http://www.nyekrip.com"> Nyekrip.com memiliki beragam konten dari tutorial pemrograman, tips trik HTML, tips trik CSS dan lainya. Pada saat ini nyekrip.com masih berfokus untuk memberikan tutorial pemrograman web yang berupa HTML, CSS, JS, PHP dan lainnya. Kedepannya akan disajikan tutorial pemrograman yang lebih luas. </blockquote> <p>Konten Tutorial nyekrip.com ditulis secara detail, mudah untuk dipahami bagi pemula dan memiliki langkah-langkah yang sederhana. Tujuan dari pembuatan web nyekrip.com adalah untuk media sharing pengalaman kami sebagai programmer, dan juga untuk media saling berbagi mengenai tips dan trik dalam dunia pemrograman. </p> </body> </html> |
Jika sudah selesai mengetik-kan skrip diatas, maka jalankan skrip tersebut dengan membuka-nya di browser kesayangan anda. Tampilan dari hasil running skrip seperti gambar dibawah ini.
Contoh Blockquote
Perhatikan gambar diatas, paragraf yang telah di markah akan sedikit maju ke-arah kanan.
Elemen HTML blockquote memiliki atribut:
cite: Atribut ini ditambahkan untuk menentukan sumber kutipan, value atau nilai dari atribut ini adalahurl
Happy Nyekrip!
