Beranda / Pemrograman / Web / Elemen Kutipan HTML | Tutorial HTML 10

Elemen Kutipan HTML | Tutorial HTML 10

Oleh sopyan • November 12, 2023 • 7 Dilihat • 4 Menit membaca •

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>

Ini adalah kutipan dari
blog filesop.com:

<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

Penjelasan Program 1

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>

Browser akan menambahkan
tanda kutip di sekitar kutipan.

Tujuan dari filesop.com
: <q>menjadi situs tutorial
elektronika, pemrograman dan komputer yang lengkap</q>

</body>

</html>

Hasil Program 2

Penjelasan Program 2

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>

<abbr title=“Hyper Text Markup Language”>HTML</abbr> adalah bahasa markup untuk website

Menandai sebuah singkatan akan memberikan informasi yang berguna untuk
browser, mesin translator dan mesin pencari

</body>

</html>

Hasil Program 3

Penjelasan Program 3

Di baris 4 kita membuat paragraf dengan menyisipkan sebuah
singkatan.
Di baris 6 kita membuat sebuah paragraf.

Baca juga: Panduan Lengkap HTML Form Attributes yang Wajib Lo Tahu! (Tutorial HTML Part 54)

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>

Elemen HTML address digunakan untuk membuat informasi kontak dari
dokumen atau artikel.

Ditulis oleh Sopyan.

Kunjungi kami di:

filesop.com

Indonesia

</address>

</body>

</html>

Hasil Program 4

Penjelasan Program 4

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>

<cite>Harry Potter</cite> oleh J.K. Rowling, rilis tahun 1992.

</body>

</html>

Baca juga: Panduan Lengkap HTML Forms: Bikin Formulir Keren di Website! (Tutorial HTML Part 53)

Hasil Program 5

Penjelasan Program 5

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>

Baca juga: Perbedaan HTML vs XHTML: Panduan Lengkap (Tutorial HTML Part 52)

Hasil Program 6

Penjelasan Program 6

Di Baris 3 kita membuat teks yang ditulis dari kanan ke kiri.