Memformat Teks
Tag yang digunakan untuk melakukan format pada teks cukup banyak, kita akan lihat beberapa yang paling sering dipakai.
Formating tipe inline dan block elemen
Tipe markup teks bisa dibedakan ke dalam 2 jenis yaitu tipe inline dan blok
Tipe inline elemen maksudnya teks setelah diformat tidak membentuk baris/blok elemen baru. Melainkan mengikuti elemen yang ada di depannya.
Pada tipe blok, teks akan dibentuk pada baris baru dengan membentuk grup. Bahkan jikapun tipe inline ingin menempel di belakangnya tidak bisa.
Sintaks dan contoh tag formating teks
1. Tag <p>
Digunakan untuk membentuk paragraf. Bersifat: Blok Elemen.
Sintaks:
<p>…</p>
Contoh:
<p> Isian kalimat Anda di sini. </p>
Hasil:
Isian kalimat Anda di sini.
2. Tag <ul> dan <ol>
Dipakai untuk membuat daftar list. Bersifat: Block elemen. Mengenai cara membuat daftar list ada perbedaan bentuk hasil antara tag Tag <ul> dan <ol>. Anda bisa mengeceknya di artikel tersebut.
Sintaks:
<ul>
<li>…</li>
</ul>
Contoh:
Daftar calon gubernur DKI tahun 2017:<ul>
<li>Basuki Tjahaya Purnama</li>
<li>Anies Baswedan</li><li>Agus Yudoyono</li>
</ul>
Hasil:
Daftar calon gubernur DKI tahun 2017:- Basuki Tjahaya Purnama
- Anies Baswedan
- Agus Yudoyono
3. Tag <br>
Dipakai untuk membuat baris baru. Bersifat: Inline Element.
Sintaks:
…<br>…
Contoh:
Isian kalimat Anda akan berhenti di sini<br>sekarang barisan kata ada di baris baru.
Hasil:
Isian kalimat Anda akan berhenti di sini
sekarang barisan kata ada di baris baru.
4. Tag <b> atau <strong>
Bertujuan memberi huruf tebal. Bersifat: Inline element.
Sintaks:
<b>…</b> atau <strong>…</strong>
Contoh:
Begini cara membuat<b> huruf tebal seperti ini</b> mudahkan?
Hasil:
Begini cara membuat huruf tebal seperti ini mudahkan?
Catatan: b dari kata bold.
5. Tag <i> atau <em>
Bertujuan memberi huruf miring. Bersifat: Inline element.
Sintaks:
<i>…</i> atau <em>…</em>
Contoh:
Akhirnya timnas PSSI lolos ke Final piala AFF dan bertemu tim<i>Gajah Putih</i>. Doakan Indonesia menang guys.
Hasil:
Akhirnya timnas PSSI lolos ke Final piala AFF dan bertemu tim Gajah Putih. Doakan Indonesia menang guys.
Catatan: i dari kata italic menandakan kata yang penting, em dari kata emphasis. Khusus em menandakan ada penekanan makna yang lebih mendalam.
6. Tag <u> atau <ins>
Bertujuan memberi garis bawah. Bersifat: Inline element.
Sintaks:
<u>…</u> atau <ins>…</ins>
Contoh:
Usulan moratorium Ujian Nasional (UN)<u>RESMI DITOLAK</u> kamu tahu?
Hasil:
Usulan moratorium Ujian Nasional (UN) RESMI DITOLAK kamu sudah tahu?
Catatan: u dari kata utter menandakan penekanan, memberi tanda pemaknaan, ins dari kata insert.
Khusus tag <ins> dibahas bersama tag berikut.
7. Tag <s> atau <del>
Bertujuan membuat huruf tercoret pada bagian tengah. Bersifat: Inline element.
Sintaks:
<s>…</s> atau <del>…</del>
Contoh:
Indonesia tanah air beta,<s>bukan milik perusahaan asing </s>itu pasti.
Hasil:
Indonesia tanah air beta, bukan milik perusahaan asing itu pasti.
Catatan: s dari kata Strikethrough. Tag ini hanya menampilkan coretan tanpa ada maksud tertentu, hanya variasi format teks saja. Del dari kata delete. Khusus Del coretan menandakan niat menghapus kalimat dan biasanya diikuti update perbaikan menggunakan tag <ins>
Jika contoh di atas digunakan kembali kalimatnya menjadi seperti ini:
Indonesia tanah air beta, bukan milik perusahaan asing termasuk semua orang yang ikut membangun negeri itu pasti.
8. Tag <mark>
Bertujuan tanda berupa warna. Bersifat: Inline element.
Sintaks:
<mark>…</mark>
Contoh:
Hari ini tepat perayaan<mark>harbolnas</mark> “Hari belanja nasional” 2016.
Hasil:
Hari ini tepat perayaan harbolnas “Hari belanja nasional” 2016.
9. Tag <kbd>
Bertujuan membuat teks terkait shortcut tombol komputer. Bersifat: Inline element.
Sintaks:
<kbd>…</kbd>
Contoh:
Untuk melakukan inspeksi laman web pada browser chrome gunakan<kbd>Ctrl+Shift+I</kbd>.
Hasil:
Untuk melakukan inspeksi laman web pada browser chrome gunakan Ctrl+Shift+I.
Catatan: <kbd> dari kata keyboard. Agar menampilkan tampilan yang mirip keyboard komputer lakukan penyesuaian di kode css-nya.
10. Tag <code>
Bertujuan membuat teks terkait potongan kode program. Bersifat: Inline element.
Sintaks:
<code>…</code>
Contoh:
Untuk membuat tutorial seperti ini banyak sekali menggunakan tag<code>code</code>, coba saja lihat souce codenya.
Hasil:
Untuk membuat tutorial seperti ini banyak sekali menggunakan tag code, coba saja lihat souce codenya.
Catatan: <code> biasanya digunakkan bersama tag pre.
11. Tag <q>
Bertujuan membuat quote pendek. Bersifat: Inline element.
Sintaks:
<q>…</q>
Contoh:
<q>Jangan sekali-sekali anda melupakan sejarah</q>.
Hasil:
Jangan sekali-sekali anda melupakan sejarah.
Catatan: <q> idealnya digabung dengan tag <cite>.
12. Tag <cite>
Bertujuan membuat sumber data (citation). Bersifat: Inline element.
Sintaks:
<cite>…</cite>
Contoh:
<cite>sumber: google (<!-- isikan link -->)</cite>.
Hasil:
sumber: google.Catatan: <cite> berisi link yang menuju sumber data.
13. Tag <blockquote>
Bertujuan membuat quote panjang. Bersifat: block elemen.
Sintaks:
<blockquote>…</blockquote>
Contoh:
<blockquote>“The few own the many because they possess the means of livelihood of all ... The country is governed for the richest, for the corporations, the bankers, the land speculators, and for the exploiters of labor. The majority of mankind are working people. So long as their fair demands—the ownership and control of their livelihoods—are set at naught, we can have neither men's rights nor women's rights. The majority of mankind is ground down by industrial oppression in order that the small remnant may live in ease.” —<cite>Helen Keller, 1911 wikipedia<cite>.</blockquote>
Hasil:
“The few own the many because they possess the means of livelihood of all ... The country is governed for the richest, for the corporations, the bankers, the land speculators, and for the exploiters of labor. The majority of mankind are working people. So long as their fair demands—the ownership and control of their livelihoods—are set at naught, we can have neither men's rights nor women's rights. The majority of mankind is ground down by industrial oppression in order that the small remnant may live in ease.” — Helen Keller, 1911 wikipedia.
Catatan: <blockquote> idealnya juga berisi link yang menuju sumber data.
14. Tag <a>
Bertujuan membuat link (yang punya teks jangkar). Bersifat: Inline element.
Sintaks:
<a href='?…'>Teks jangkar</a>
Contoh:
<a href='http://www.contoh.com'>Teks jangkar</a>.
Hasil:
berikut pengenalan bahasa html untuk pemula, adalah link menuju artikel dengan url http://bloggermengajar.blogspot.co.id/2016/09/mengenal-html-dasar.html dengan teks jangkar yaitu pengenalan bahasa html untuk pemula.Catatan: Untuk membuat link tanpa teks jangkar digunakan tag <link>
15. Tag <img>
Bertujuan memasukan gambar. Bersifat: block element.
Sintaks:
<img src='NamaFile.jpg'>
Contoh:
<src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFi9FS4-xDTDnin4Zfyi6ZkHi_tbVjZsJw72o1yUBi0MeQenjFHK_TRZ4Pjtj2lM_XkbgOq9dz2UEIiCFbRHtWm-O4VYeOD62npvdITXIbDQ8GEYkBRI7rUeMVylVROjktxCUpSEG4tXwX/s1600/membuat-link.png' alt="belajar link di HTML" title='belajar membuat link di HTML'/>
Hasil:
Catatan: Tag <img> tidak memiliki tag penutup. Sebuah kebiasaan baik untuk menambahkan atribut Alt agar gambar bisa dimengerti oleh mesin pencari.
Semua tag di atas sangat sering anda temui saat melakukan posting maupun editing artikel. Semoga dengan mengetahui cara melakukan format pada teks akan meningkatkan kualitas konten di mata mesin pencari dan terutama bagi pengunjung setia blog anda.
Sumber: http://www.w3.org/TR/html5/
