Beranda / html / Komputer / Pemrograman / Web

Elemen Kutipan HTML | Tutorial HTML 10

Oleh Sopyan Posting Komentar
Assalamualaikum sobat, pada artikel kali ini kami akan membagikan tutorial tentang elemen HTML kutipan, di artikel kali ini kami akan memberikan contoh penggunaaan tag <blockquote>, <abbr>, <q>, <cite>, <address>, dan <bdo>.

Elemen Kutipan HTML <blockquote>

Untuk kutipan yang bersumber dari sumber lain kita bisa menggunakan tag <blockquote>.

browser akan membuat indentansi ketika kita menggunakan elemen <blockquote>.

Contoh Program 1 : Elemen <blockquote>

<!DOCTYPE html>
<html>
<body>
  <p>Ini adalah kutipan dari blog filesop.com:</p>
  
  <blockquote cite="https://www.filesop.com/2016/02/penilaian-portofolio.html">Penilaian adalah suatu proses sistematik untuk mengambil keputusan dengan menggunakan data atau informasi yang diperoleh dari hasil pengukuran, baik dengan tes maupun non tes</blockquote>
</body>
</html>

Hasil Program 1

Hasil Program 1 Elemen <blockquote>

Penjelasan Program 1

Contoh Program 1 Elemen <blockquote>
  • Di baris 4 kita membuat sebuah paragraf.
  • Di baris 6 kita membuat kutipan yang di kutip dari sebuah blog.

HTML Kutipan Singkat Dengan <q>

Untuk melakukan kutipan singkat, kita bisa menggunakan tag <q>.

Dengan menggunakan tag <q>, browser akan memberikan tanda petik di sekitar kutipan.

Contoh Program 2 : Elemen <q>

<!DOCTYPE html>
<html>
<body>
  <p>Browser akan menambahkan tanda kutip di sekitar kutipan.</p>
  
  <p>Tujuan dari filesop.com : <q>menjadi situs tutorial elektronika, pemrograman dan komputer yang lengkap</q></p>
  
</body>
</html>

Hasil Program 2

Hasil Program 2 Elemen <q>

Penjelasan Program 2

Contoh Program 2 Elemen <q>
  • Di baris 4 kita membuat sebuah paragraf.
  • Di baris 6 kita membuat paragraf yang memiliki kutipan singkat di dalamnya.

Tag <abbr> Untuk Singkatan

Untuk mendefinisikan sebuah singkatan atau akronim seperti misalnya : "HTML", "CSS", dan lain sebagainya. Kita bisa menggunakan tag HTML <abbr>.

Sistem pencari, mesin terjemahan, dan browser akan memiliki intormasi yang berguna jika kita menandai singkatan.

Tips : Gunakan atribut title untuk menampilkan deskripsi dari singkatan/akronim ketika pengguna mengarahkan mouse di atas elemen.

Contoh Program 3 : Elemen <abbr>

<!DOCTYPE html>
<html>
<body>
  <p><abbr title="Hyper Text Markup Language">HTML</abbr> adalah bahasa markup untuk website</p>
  
  <p>Menandai sebuah singkatan akan memberikan informasi yang berguna untuk browser, mesin translator dan mesin pencari</p>
</body>
</html>

Hasil Program 3

Hasil Program 3 Elemen <abbr>

Penjelasan Program 3

Contoh Program 3 Elemen <abbr>
  • Di baris 4 kita membuat paragraf dengan menyisipkan sebuah singkatan.
  • Di baris 6 kita membuat sebuah paragraf.

HTML <address> Untuk Informasi Kontak

Untuk membuat informasi kontak dari pemilik atau penulis artikel atau dokumen, kita bisa menggunakan tag <address>.

Informasi kontak dapat berupa alamat media sosial, nomor telepon, alamat rumah, URL, alamat email, dan lain sebagainya.

Teks yang ada didalam <address> oleh browser akan ditampilkan dalam huruf miring dan selalu diberi jeda baris sebelum dan sesudah elemen <address>.

Contoh Program 4 : Elemen <address>

<!DOCTYPE html>
<html>
<body>
  
  <p>Elemen HTML address digunakan untuk membuat informasi kontak dari dokumen atau artikel.</p>
  
  <address>
    Ditulis oleh Sopyan.<br>
    Kunjungi kami di:<br>
    filesop.com<br>
    Indonesia
  </address>
</body>
</html>

Hasil Program 4

Hasil Program 4 Elemen <address>

Penjelasan Program 4

Contoh Program 4 Elemen <address>
  • Di baris 5 kita membuat sebuah paragraf.
  • Di baris 7 hingga baris 12 kita membuat informasi kontak.

HTML <cite> Untuk Judul Karya

Untuk membuat judul sebuah karya (buku, puisi, musik, film, lukisan, dll), kita bisa menggunakan tag <cite>.

Catatan : Nama orang bukanlah sebuah judul karya.

Jika kita menggunakan elemen <cite>, browser akan menampilkannya dengan huruf miring.

Contoh Program 5 : Elemen <cite>

<!DOCTYPE html>
<html>
<body>
  
  <p><cite>Harry Potter</cite> oleh J.K. Rowling, rilis tahun 1992.</p>
  
</body>
</html>

Hasil Program 5

Hasil Program 5 Elemen <cite>

Penjelasan Program 5

Contoh Program 5 Elemen <cite>
  • Pada baris 5 kita membuat paragraf yang memiliki kutipan judul buku.

HTML <bdo> Untuk Mengubah Arah Teks

Untuk mengubah arah teks, kita bisa menggunakan tag <bdo>.

BDO merupakan singkatan dari Bi-directional Override.

Contoh Program 6 : Elemen <bdo>

<html>
<body>
  <bdo dir="rtl">Teks ini akan ditulis dari kanan ke kiri</bdo>
</body>
</html>

Hasil Program 6

Hasil Program 6 Elemen <bdo>

Penjelasan Program 6

Contoh Program 6 Elemen <bdo>
  • Di Baris 3 kita membuat teks yang ditulis dari kanan ke kiri.

Elemen Kutipan HTML

Berikut adalah elemen kutipan yang telah kita pelajari :

Tag Deskripsi
<abbr> Singkatan atau akronim
<address> Intormasi kontak dari pemilik/penulis dokumen
<bdo> Untuk mengubah arah teks
<blockquote> Untuk kutipan dari sumber lain
<cite> Untuk judul sebuah karya
<q> Digunakan untuk kutipan singkat


Itulah Tutorial Mengenai Kutipan HTML, semoga artikel ini dapat bermanfaat, sampai jumpa di artikel selanjutnya, happy a nice day.



Posting Komentar untuk "Elemen Kutipan HTML | Tutorial HTML 10"