Assalamu'alaikum poinreaders,
Melanjutkan materi sebelumnya tentang "Tag Pada HTML Part 1 : Basic tag", kali ini saya akan membahas materi mengenai formatting tag, yaitu tag yang digunakan untuk memberikan format style pada teks. Oke untuk lebih jelasnya langsung saja simak ulasannya...
1. <acronym>
Fungsi :
2. <abbr>
Fungsi :
3. <address>
Fungsi :
4. <b>
Fungsi :
5. <bdi>
Fungsi :
6. <bdo>
Fungsi :
Atribut :
Contoh Penulisan :
7. <big>
Fungsi :
8. <blockquote>
Fungsi :
Atribut :
Contoh Penulisan :
9. <center>
Fungsi :
10. <cite>
Fungsi :
11. <code>
Fungsi :
12. <del>
Fungsi :
Atribut :
Contoh Penulisan :
13. <dfn>
Fungsi :
14. <em>
Fungsi :
15. <font>
Fungsi :
Atribut :
Contoh Penulisan :
16. <i>
Fungsi :
17. <ins>
Fungsi :
Atribut :
Contoh Penulisan :
18. <kbd>
Fungsi :
19. <mark>
Fungsi :
20. <meter>
Fungsi :
Atribut :
Contoh Penulisan :
21. <pre>
Fungsi :
Atribut :
Contoh Penulisan :
22. <progress>
Fungsi :
Atribut :
Contoh Penulisan :
23. <q>
Fungsi :
Atribut :
Contoh Penulisan :
24. <rp>
Fungsi :
25. <rt>
Fungsi :
26. <ruby>
Fungsi :
27. <s>
Fungsi :
<s>...</s>
Contoh Penulisan :
28. <samp>
Fungsi :
29. <small>
Fungsi :
30. <strike>
Fungsi :
31. <strong>
Fungsi :
32. <sub>
Fungsi :
33. <sup>
Fungsi :
34. <time>
Fungsi :
Atribut :
Contoh Penulisan :
35. <tt>
Fungsi :
Mendefinisikan teletype teks.
Format Penulisan :
<tt>...</tt>
Contoh Penulisan :
36. <u>
Fungsi :
37. <var>
Fungsi :
38. <wbr>
Fungsi :
Semoga materi yang saya sampaikan kali ini dapat bermanfaat bagi sobat poinreaders, jangan lupa follow akun sosial kami agar sobat poinreaders bisa mendapatkan materi terupdate tentang pemrograman lainnya.
Melanjutkan materi sebelumnya tentang "Tag Pada HTML Part 1 : Basic tag", kali ini saya akan membahas materi mengenai formatting tag, yaitu tag yang digunakan untuk memberikan format style pada teks. Oke untuk lebih jelasnya langsung saja simak ulasannya...
1. <acronym>
Fungsi :
Mendefinisikan akronim.Format Penulisan :
<acronym title="definisi_akronim">...</acronym>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag Akronim</title>
</head>
<body>
<acronym title="Surat Tanda Nomor Kendaraan">STNK</acronym>
</body>
</html>
STNK
2. <abbr>
Fungsi :
Mendefinisikan sebuah singkatan atau akronim. Fungsinya hampir sama dengan tag <acronym>.Format Penulisan :
<abbr title="definisi_singkatan/akronim">...</abbr>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag Singkatan</title>
</head>
<body>
<abbr title="Bahan Bakar Minyak">BBM</abbr>
</body>
</html>
BBM
3. <address>
Fungsi :
Mendefinisikan informasi kontak untuk si penulis/pemilik dokumen atau artikel.Format Penulisan :
<address>...</address>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag Address</title>
</head>
<body>
<address>
Ditulis oleh <a href="mailto:email@domain.com">Denis Julianto</a>.<br>
Alamat :<br>
Banjar, Jawa Barat
</address>
</body>
</html>
Ditulis oleh Denis Julianto.
Alamat :
Banjar, Jawa Barat
4. <b>
Fungsi :
Membuat teks tebal (bold).Format Penulisan :
<b>...</b>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag Bold</title>
</head>
<body>
<b>Ini adalah teks tebal.</b>
</body>
</html>
Ini adalah teks tebal.
5. <bdi>
Fungsi :
Merubah arah teks yang memiliki format arah yang berbeda dari teks yang lainnya.Format Penulisan :
<bdi>...</bdi>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag bdi</title>
</head>
<body>
Nilai <bdi>إيان</bdi> = 90
</body>
</html>
Nilai إيان = 90
6. <bdo>
Fungsi :
Menimpa arah teks.Format Penulisan :
<bdo dir="arah_teks">...</bdo>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| dir | ltr rtl |
wajib | Menentukan arah teks |
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag bdo</title>
</head>
<body>
<p><bdo dir="rtl">Teks dari kanan ke kiri.</bdo></p>
<p><bdo dir="ltr">Teks dari kiri ke kanan.</bdo></p>
</body>
</html>
Teks dari kanan ke kiri.
Teks dari kiri ke kanan.
7. <big>
Fungsi :
Memperbesar ukuran teks sebesar satu point dari defaultnya.Format Penulisan :
<big>...</big>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag big</title>
</head>
<body>
<p>Ini adalah teks normal.</p>
<p><big>Ini adalah teks yang diperbesar.</big></p>
</body>
</html>
Ini adalah teks normal.
Ini adalah teks yang diperbesar.
8. <blockquote>
Fungsi :
Mendefinisikan sebuah kutipan.Format Penulisan :
<blockquote>...</blockquote>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| cite | URL | optional | Menentukan sumber kutipan. |
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag blockquote</title>
</head>
<body>
<blockquote>Ini adalah sebuah kutipan.</blockquote>
</body>
</html>
Ini adalah teks.
Ini adalah sebuah kutipan.
9. <center>
Fungsi :
Untuk perataan tengah pada teks maupun gambar.Format Penulisan :
<center>...</center>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag center</title>
</head>
<body>
<center>Ini adalah teks rata tengah.</center>
</body>
</html>
Ini adalah teks rata tengah.
10. <cite>
Fungsi :
Mendefinisikan judul karya.Format Penulisan :
<cite>...</cite>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag cite</title>
</head>
<body>
<cite>Esensi-esensi Bahasa Pemrograman Java</cite> oleh Bambang Hariyanto. Tahun 2007.
</body>
</html>
Esensi-esensi Bahasa Pemrograman Java oleh Bambang Hariyanto. Tahun 2007.
11. <code>
Fungsi :
Mendefinisikan sebagian dari kode komputer.Format Penulisan :
<code>...</code>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag code</title>
</head>
<body>
<code>ini adalah contoh sebagian dari kode komputer</code>
</body>
</html>
ini adalah contoh sebagian dari kode komputer
12. <del>
Fungsi :
Memberi garis tengah/mencoret sebuah teks.Format Penulisan :
<del>...</del>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| cite | URL | optional | Menentukan URL ke dokumen yang menjelaskan alasan mengapa teks itu dicoret |
| datetime | YYYY-MM-DDThh:mm:ssTZD | optional | Menentukan tanggal dan waktu ketika teks itu dicoret |
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag del</title>
</head>
<body>
<del>Ini adalah sebuah teks yang diberi garis tengah/dicoret.</del>
</body>
</html>
Ini adalah sebuah teks yang diberi garis tengah/dicoret.
13. <dfn>
Fungsi :
Mendefinisikan sebuah istilah.Format Penulisan :
<dfn>...</dfn>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag dfn</title>
</head>
<body>
<dfn>HTML</dfn> adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web.
</body>
</html>
HTML adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web.
14. <em>
Fungsi :
Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring.Format Penulisan :
<em>...</em>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag em</title>
</head>
<body>
<em>Hello Worl!.</em>
</body>
</html>
Hello Worl!.
15. <font>
Fungsi :
Mendefinisikan jenis font, warna, dan ukuran pada teks.Format Penulisan :
<font>...</font>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| color | rgb(x,x,x) #xxxxxx nama_warna |
optional | Menentukan warna teks |
| face | font_family | optional | Menentukan jenis font pada teks |
| size | ukuran_font | optional | Menentukan ukuran font pada teks |
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag font</title>
</head>
<body>
<font color="red">Ini adalah teks berwarna merah.</font><br>
<font face="Arial">Ini adalah teks berjenis font Arial.</font><br>
<font size="5">Ini adalah teks dengan ukuran font 5.</font>
</body>
</html>
Ini adalah teks berwarna merah.
Ini adalah teks berjenis font Arial.
Ini adalah teks dengan ukuran font 5.
16. <i>
Fungsi :
Membuat teks miring.Format Penulisan :
<i>...</i>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag i</title>
</head>
<body>
<i>Ini adalah teks miring.</i>
</body>
</html>
Ini adalah teks miring.
17. <ins>
Fungsi :
Mengganti teks yang telah dimasukkan ke dalam dokumen HTML dan mengubahnya dengan teks yang baru.Format Penulisan :
<ins>...</ins>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| cite | URL | optional | Menentukan URL ke dokumen yang menjelaskan alasan mengapa teks itu diubah |
| datetime | YYYY-MM-DDThh:mm:ssTZD | optional | Menentukan tanggal dan waktu ketika teks itu diubah |
Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag ins</title>
</head>
<body>
Saya suka memakan apel berwarna <del>hijau</del> <ins>merah</ins>
</body>
</html>
Saya suka memakan apel berwarna
hijaumerah
18. <kbd>
Fungsi :
Mendefinisikan input keyboard.Format Penulisan :
<kbd>...</kbd>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag kbd</title>
</head>
<body>
<kbd>Ini adalah teks input keyboard.</kbd>
</body>
</html>
Ini adalah teks input keyboard.
19. <mark>
Fungsi :
Menandai/Menyorot sebuah teks.Format Penulisan :
<mark>...</mark>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag mark</title>
</head>
<body>
<mark>Ini adalah teks yang ditandai/disorot.</mark>
</body>
</html>
Ini adalah teks yang ditandai/disorot.
20. <meter>
Fungsi :
digunakan untuk mengukur data berdasarkan tingkat tertentu atau dikenal dengan istilah gauge.Format Penulisan :
<meter>...</meter>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| form | id_form | optional | Menentukkan satu atau dua lebih form yang mana <meter> element tersebut diperuntukkan baginya. |
| high | angka | optional | Menentukan rentang nilai yang dianggap tinggi |
| low | angka | optional | Menentukan rentang nilai yang dianggap rendah |
| max | angka | optional | Menentukan nilai yang memiliki kisaran maksimum |
| min | angka | optional | Menentukan nilai yang memiliki kisaran minimal |
| optimum | angka | optional | Menentukkan berapa jumlah optimal yang berlaku untuk meteran tersebut |
| value | angka | wajib | Menentukkan nilai saat ini yang berlaku |
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag meter</title>
</head>
<body>
<meter value="0.5">50%</meter>
</body>
</html>
50%
21. <pre>
Fungsi :
Mendefinisikan teks terformat.Format Penulisan :
<pre>...</pre>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| width | angka | optional | Menentukan jumlah maksimum karakter per baris. |
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag pre</title>
</head>
<body>
<pre>Ini adalah teks terformat</pre>
</body>
</html>
Ini adalah teks terformat
22. <progress>
Fungsi :
Merepresentasikan berlangsungya suatu kegiatan atau tugas.Format Penulisan :
<progress>...</progress>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| max | angka | optional | Menentukkan jumlah maksimal kegiatan atau tugas tersebut diperlukan. |
| value | angka | optional | Menentukkan jumlah, sampai berapa kegiatan atau tugas tersebut telah dilaksanakan. |
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag progress</title>
</head>
<body>
Ini adalah sebuah progres<br>
<progress></progress>
</body>
</html>
Ini adalah sebuah progres
23. <q>
Fungsi :
Mendefinisikan sebuah kutipan singkat.Format Penulisan :
<q>...</q>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| cite | URL | optional | Menentukkan sumber kutipan. |
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag q</title>
</head>
<body>
Francis Glassborow : <q>Programmer yang baik menggunakan otaknya, tapi kerangka kerja yang baik menghemat waktu untuk berpikir</q>.
</body>
</html>
Francis Glassborow :Programmer yang baik menggunakan otaknya, tapi kerangka kerja yang baik menghemat waktu untuk berpikir.
24. <rp>
Fungsi :
Mendefinisikan apa yang harus ditampilkan di browser yang tidak mendukung penjelasan pada tag <ruby>.Format Penulisan :
<rp>...</rp>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag rp</title>
</head>
<body>
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
</body>
</html>
漢
25. <rt>
Fungsi :
Mendefinisikan sebuah penjelasan / pengucapan karakter (untuk tipografi Asia Timur).Format Penulisan :
<rt>...</rt>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag rt</title>
</head>
<body>
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
</body>
</html>
漢
26. <ruby>
Fungsi :
Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur).Format Penulisan :
<ruby>...</ruby>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag ruby</title>
</head>
<body>
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
</body>
</html>
漢
27. <s>
Fungsi :
Mendefinisikan teks yang tidak lagi benar.Format Penulisan :
<s>...</s>
Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag s</title>
</head>
<body>
<s>Laptop saya berwarna merah.</s><br>
Laptop baru saya berwarna hitam.
</body>
</html>
Laptop saya berwarna merah.
Laptop baru saya berwarna hitam.
28. <samp>
Fungsi :
Mendefinisikan contoh output dari program komputer.Format Penulisan :
<samp>...</samp>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag samp</title>
</head>
<body>
<samp>Ini adalah contoh output dari program komputer.</samp>
</body>
</html>
Ini adalah contoh output dari program komputer.
29. <small>
Fungsi :
Mendefinisikan teks berukuran kecil.Format Penulisan :
<small>...</small>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag small</title>
</head>
<body>
<small>Ini adalah teks berukuran kecil.</small>
</body>
</html>
Ini adalah teks berukuran kecil.
30. <strike>
Fungsi :
Mencoret teks.Format Penulisan :
<strike>...</strike>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag strike</title>
</head>
<body>
<strike>Ini adalah teks yang dicoret.</strike>
</body>
</html>
Ini adalah teks yang dicoret.
31. <strong>
Fungsi :
Mendefinisikan teks penting.Format Penulisan :
<strong>...</strong>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag strong</title>
</head>
<body>
<strong>Ini adalah teks penting.</strong>
</body>
</html>
Ini adalah teks penting.
32. <sub>
Fungsi :
Mendefinisikan teks subscript.Format Penulisan :
<sub>...</sub>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag sub</title>
</head>
<body>
Ini adalah teks <sub>subscript</sub>.
</body>
</html>
Ini adalah teks subscript.
33. <sup>
Fungsi :
Mendefinisikan teks superscript.Format Penulisan :
<sup>...</sup>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag sup</title>
</head>
<body>
Ini adalah teks <sub>superscript</sub>.
</body>
</html>
Ini adalah teks superscript.
34. <time>
Fungsi :
Mendefinisikan tanggal / waktu.Format Penulisan :
<time>...</time>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| datetime | datetime | optional | Menentukkan tanggal/waktu. |
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag time</title>
</head>
<body>
<time datetime="2016-09-18 08:00">Jadwal hari ini</time> adalah bersih-bersih.
</body>
</html>
adalah bersih-bersih.
35. <tt>
Fungsi :
Mendefinisikan teletype teks.
Format Penulisan :
<tt>...</tt>
Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag tt</title>
</head>
<body>
<tt>ini adalah telepype teks</tt>
</body>
</html>
ini adalah telepype teks
36. <u>
Fungsi :
Membuat teks bergaris bawah.Format Penulisan :
<u>...</u>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag u</title>
</head>
<body>
<u>ini adalah teks bergaris bawah.</u>
</body>
</html>
ini adalah teks bergaris bawah.
37. <var>
Fungsi :
Mendefinisikan sebuah variabel.Format Penulisan :
<var>...</var>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag var</title>
</head>
<body>
<var>ini adalah sebuah variabel.</var>
</body>
</html>
ini adalah sebuah variabel.
38. <wbr>
Fungsi :
Digunakan untuk merepresentasikan posisi sebuah kata atau frase yang dapat dipecah (dipindahkan) ke baris baru (line break).Format Penulisan :
<wbr>Contoh Penulisan :
<!DOCTYPE HTML>Hasil :
<html>
<head>
<title>Tag wbr</title>
</head>
<body>
ini adalah sebuah<wbr>teks.
</body>
</html>
ini adalah sebuahteks.
Semoga materi yang saya sampaikan kali ini dapat bermanfaat bagi sobat poinreaders, jangan lupa follow akun sosial kami agar sobat poinreaders bisa mendapatkan materi terupdate tentang pemrograman lainnya.