<script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'> </script> 04.1 Pengenalan Format Teks dan Paragraf pada HTML

PENGENALAN APLIKASI WEB

PEMFORMATAN TEKS DAN PARAGRAF

A. KOMPETENSI DASAR

3.5 Menerapkan cara Pemformatan Teks dan Paragraf dalam sajian multimedia interaktif berbasis halaman web dan media interaktif

4.5. Menggabungkan Pemformatan Teks dan Paragraf dalam sajian multimedia interaktif berbasis halaman web dan media interaktif

B. PENDAHULUAN

Dalam HTML dikenal istilah Tag, dimana Tag adalah sebauh penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung siku (<...>), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut.

Contoh: <html>, <head>, <title>,<body>, <p>, <a>, <br> , dan sebagainya.

Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutupnya. Namun, ada juga beberapa tag yang tidak memiliki pasangan penutup. Tag penutup ditulis dengan menambahkan garis miring (/) di depan nama tag.

Berikut ini daftar tag-tag dasar yang sering digunakan.

Berikut ini beberapa yang perlu diperhatikan pada saat menulis:

1. Tag-tag wajib

Ada beberapa tag yang wajib ada di HTML. Tag ini harus kamu tulis.. kalau tidak, bisa jadi kode HTML-mu akan error menurut validator W3C.

Berikut ini daftar tag yang wajib ada di HTML:

<!DOCTYPE html> — untuk deklarasi type dokumen;

<html> — tag utama dalam HTML;

<head> — untuk bagian kepala dari dokumen;

<title> — untuk judul web;

<body> — untuk bagian body dari dokumen.

2. Gunakan Huruf Kecil

Hindari menggunakan huruf besar dalam menuliskan naama tag dan sebaiknya gunakan huruf kecil saja.

Huruf kecil lebih gampang diketik dan juga akan membuat kode HTML terlihat lebih bersih dan rapi.

Contoh: (bagus)

<body>

<p>Belajar tentang tag di HTML</p>

</body>

Contoh: (buruk)

<BODY>

<P>Belajar tentang tag di HTML</P>

</BODY>

Tapi khusus untuk tag <!DOCTYPE html> ditulis dengan huruf besar. Sebenarnya bisa juga dengan huruf kecil dan akan valid menurut validator W3C.

Tapi untuk dokumen XHTML, menggunakan DOCTYPE dengan huruf kecil akan mengakibatkan error.

3. Pastikan Menutup Tag dengan Benar

Tag HTML nantinya akan ditulis bertumpuk-tumpuk. Artinya, di dalam tag ada tag lagi. Kadang kita sering salah dalam menutup tag yang bertumpuk ini. Akibatnya, kode HTML kita tidak valid.

Contoh Salah : <i><b><u>merebus</i></b></u>

Contoh Benar : <i><b><u>merebus</u></b></i>

C. TAG JUDUL

Untuk membuat Judul, Sub Judul, Sub Bab dan seterusnya. Ada 6 tag heading yang bisa digunakan dari tag <h1> sampai tag <h6>.

D. TAG PEMFORMATAN TEKS

HTML menggunakan tag seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring. Berikut Tag-tag HTML untuk pemformatan teks.

Ø Tag HTML Format Teks

Ø Tag HTML “Keluaran Computer”

Ø HTML Citations, Quotations, and Definition Tags

E. TAG PARAGRAF

Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.

Paragraf pada HTML dibuat dengan tag <p>. Selain tag ini, ada juga tag pendukung lain seperti <div>, <hr>, <br>, dan <pre>.

Ø Tag <p>

Contoh :

Atribut untuk Paragraf

Biasanya paragraf ditambahkan dengan beberapa atribut seperti align, id, class, dll.

Ø Tag <br>

Berfungsi untuk membuat baris baru

tag <br> adalah tag yang tidak memiliki pasangan penutup. Cara menutupnya, tambahkan saja garis miring seperti ini <br />.

Tag <br> boleh ditutup, boleh juga tidak. Namun, sebaiknya ditutup agar valid menurut validator W3C.

Ø Tag <hr>

Berfungsi untuk membuat garis

Ø Tag <Pre>

Pada kasus tertentu, kita ingin menampilkan paragraf dengan format yang lebih spesifik. Contohnya seperti pantun dan puisi yang paragrafnya diulis dengan garis baru dan juga indentasi.

Hal ini bisa dilakukan dengan bantuan tag <br>. Namun ada juga tag lain yang bisa jadi alternatif, yakni tag <pre>.

Tag <pre> (preformatting) merupakan tag yang digunakan untuk menampilkan teks atau paragraf dalam format yang sudah kita tentukan di HTML.

Ø Tag <div>

Tag <p> dan Tag <div>, memiliki perilaku yang hampir sama. Tapi tag <div> sebenarnya bukanlah tag untuk membuat paragraf, melainkan tag untuk membuat layout web.

Kadang tag <div> sering ‘disalahgunakan’ untuk membuat paragraf.