Belajar HTML Dasar : Tag Phrasa

0
2431

Tag frasa telah dideskripsikan untuk tujuan tertentu, meskipun ditampilkan dengan cara yang sama seperti tag dasar lainnya seperti <b>, <i>, <pre>, dan <tt>, yang telah Anda lihat pada materi sebelumnya.

Bab ini akan membawa Anda meihat kegunaan dari semua tag frasa penting, jadi mari kita mulai melihatnya satu per satu.

Emphasized Text (Teks yang Ditekankan)

Apa pun yang diapit dalam elemen <em> … </em> akan ditampilkan sebagai teks yang ditekankan.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Emphasized Text Example </title>

</head>

<body>

 Kata berikut menggunakan jenis huruf <em> ditekankan </em>. 

</body>

</html>

Kode ini akan menampilkan hasil sebagai berikut:

Kata berikut menggunakan jenis huruf ditekankan .

Emphasized Text (Teks yang Ditekankan)

Apa pun yang diapit dalam elemen <mark> … </mark>, akan ditampilkan dan ditandai dengan warna kuning.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Contoh Teks yang Ditandai </ title>

</head>

<body></pre>
<p> Kata berikut telah <mark> ditandai </mark> dengan warna kuning </p>
<pre>
</body>

</html>

Kode ini akan menampilkan hasil sebagai berikut:

Kata berikut telah ditandai </ mark> dengan warna kuning

Strong Text (Teks Kuat)

Apa pun yang diapit dalam elemen <strong> … </strong> akan ditampilkan sebagai teks penting.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Contoh Teks Kuat </ title>

</head>

<body>

 Kata berikut menggunakan jenis huruf <strong> kuat </strong>. </ p>

</body>

</html>

Kode ini akan menampilkan hasil sebagai berikut:

Kata berikut menggunakan jenis huruf kuat . </ p>

Text Abbreviation (Teks Singkatan)

Anda dapat menyingkat teks dengan meletakkannya di dalam tag <abbr> dan menutup </ abbr>. Jika ada, atribut judul harus berisi deskripsi lengkap dan tidak ada yang lain.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Teks Singkatan </ title>

</head>

<body>

 Nama sahabat saya adalah <abbr title = "Abhishek"> Abhy </abbr>. 

</body>

</html>

Kode ini akan menampilkan hasil sebagai berikut:

Nama sahabat saya adalah Abhy .

Elemen Akronim

Elemen <acronym> memungkinkan Anda untuk menunjukkan bahwa teks antara tag <acronym> dan </ acronym> adalah sebuah akronim.

Saat ini, kebanyakan browser tidak merubah tampilan dari konten yang menggunakan elemen <akronim>.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Contoh Akronim </title>

</head>

<body>

 Bab ini mencakup penandaan teks di <acronym> XHTML </acronym>. 

</body>

</html>

Kode ini akan menampilkan hasil sebagai berikut:

Bab ini mencakup penandaan teks di XHTML .

Arah Teks

Elemen <bdo> … </ bdo> adalah singkatan dari Bi-Directional Override dan digunakan untuk mengganti arah teks saat ini.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Contoh Arah Teks </ title>

</head>

<body>

 Teks ini akan ke kiri ke kanan. 

 <bdo dir = "rtl"> Teks ini akan ke kanan ke kiri. </bdo> 

</body>

</html>

Kode ini akan menampilkan hasil sebagai berikut:

Teks ini akan ke kiri ke kanan.

Teks ini akan ke kanan ke kiri.

Ketentuan Khusus

Elemen <dfn> … </ dfn> (atau Elemen Definisi HTML) memungkinkan Anda menentukan bahwa Anda sedang memperkenalkan istilah khusus. Penggunaannya mirip dengan kata-kata miring di tengah-tengah paragraf.

Biasanya, Anda akan menggunakan elemen <dfn> saat pertama kali Anda memperkenalkan istilah kunci. Browser terbaru menyajikan konten elemen <dfn> dalam font miring.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Contoh Istilah Khusus </ title>

</head>

<body>

 Kata berikut adalah istilah <dfn> special </dfn>. 

</body>

</html>

Ini akan menghasilkan hasil sebagai berikut:

Kata berikut adalah istilah special .

Teks Kutipan

Ketika Anda ingin mengutip sebuah kutipan dari sumber lain, Anda harus meletakkannya di antara tag <blockquote> … </ blockquote>.

Teks di dalam elemen <blockquote> biasanya diindentasi dari sisi kiri dan kanan teks sekitarnya, dan terkadang menggunakan font yang dicetak miring.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Blockquote Example </title>

</head>

<body>

 Uraian XHTML berikut diambil dari situs Web W3C: 

<blockquote>
 XHTML 1.0 adalah Rekomendasi pertama W3C untuk XHTML, mengikuti dari versi sebelumnya pada HTML 4.01, HTML 4.0, HTML 3.2, dan HTML 2.0. 
</blockquote>

</body>

</html>

Kode ini akan menampikan hasil sebagai berikut:

Uraian XHTML berikut diambil dari situs Web W3C:

XHTML 1.0 adalah Rekomendasi pertama W3C untuk XHTML, mengikuti dari versi sebelumnya pada HTML 4.01, HTML 4.0, HTML 3.2, dan HTML 2.0.

Kutipan Singkat

Elemen <q> … </ q> digunakan saat Anda ingin menambahkan tanda kutip ganda dalam sebuah kalimat.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Contoh Kutipan Ganda </ title>

</head>

<body>

 Budi sepertinya sudah lewat tadi, <q> Saya rasa saya salah </q>. 

</body>

</html>

Kode ini akan menampilkan hasil sebagai berikut:

Budi sepertinya sudah lewat tadi, Saya rasa saya salah .

Kutipan Teks

Jika Anda mengutip sebuah teks, Anda dapat mengindikasikan sumber yang menempatkannya di antara tag pembuka <cite> dan penutup </cite>

Seperti yang Anda harapkan dalam publikasi cetak, konten dari elemen <cite> diberikan dalam teks yang dicetak miring secara default.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Contoh Kutipan </ title>

</head>

<body>

 Tutorial HTML ini berasal dari <cite> W3 Standard untuk HTML </cite>. 

</body>

</html>

Kode ini akan menampilkan hasil sebagai berikut :

Tutorial HTML ini berasal dari W3 Standard untuk HTML .

Kode Komputer

Kode pemrograman apa pun yang muncul pada halaman Web harus ditempatkan di dalam tag <code> … </code>. Biasanya isi elemen <code> disajikan dalam font monospace, sama seperti kode di sebagian besar buku pemrograman.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Contoh Kode Komputer </ title>

</head>

<body>

 Teks biasa. <code> Ini adalah kode. </code> Teks biasa. 

</body>

</html>

Kode ini akan menampilkan hasil sebagai berikut.

Teks biasa. Ini adalah kode. Teks biasa.

Teks Keyboard

Ketika Anda berbicara tentang komputer, jika Anda ingin memberi tahu pembaca untuk memasukkan beberapa teks, Anda dapat menggunakan elemen <kbd> … </kbd> untuk menunjukkan apa yang harus diketikkan, seperti dalam contoh ini.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Contoh Teks Keyboard </title>

</head>

<body>

 Teks biasa. <kbd> Ini di dalam elemen kbd </kbd> Teks biasa. 

</body>

</html>

Kode ini akan menampilkan hasil sebagai berikut:

Teks biasa. Ini di dalam elemen kbd Teks biasa.

Variabel Pemprograman

Elemen ini biasanya digunakan bersama dengan elemen <pre> dan <code> untuk menunjukkan bahwa konten elemen tersebut adalah sebuah variabel.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Contoh Teks Variabel </title>

</head>

<body>

 <code> document.write ("<var> nama-pengguna </var>") </code> 

</body>

</html>

Kode ini akan menampilkan hasil sebagai berikut:

document.write (" nama-pengguna ")

Program Output

Elemen <samp> … </samp> menunjukkan output sampel dari sebuah program, script, dll. Sekali lagi, ini terutama digunakan saat mendokumentasikan pemrograman atau konsep pengkodean.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Contoh Program Output </ title>

</head>

<body>

 Hasil yang dihasilkan oleh program ini adalah <samp> Hello World! </samp> 

</body>

</html>

Kode ini akan menampilkan hasil sebagai berikut:

Hasil yang dihasilkan oleh program ini adalah Hello World!

Teks Alamat

Elemen <address> … </address> digunakan untuk memuat alamat apa pun.

Contoh :


<! DOCTYPE html>

<html>

<head>

<title> Contoh Alamat </ title>

</head>

<body>

<address> Jl. D.I. Panjaitan No. 33 - Jakarta </address>

</body>

</html>

Kode ini akan menampilkan hasil sebagai berikut:

Jl. D.I. Panjaitan No. 33 – Jakarta

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.