CARA MEMBUAT PARAGRAF DI HTML (tag <p>)
Paragraf di HTML
Pada Belajar HTML Dasar kali ini kita akan membahas tentang tag paragraf, bagaimana penulisan
tag paragraf dan bagaimana cara
membuat paragraf di HTML.
Paragraf merupakan bagian bab dalam suatu karangan (biasanya
mengandung satu ide pokok dan penulisannya dimulai dengan garis baru); alinea (Kamus Besar
Indonesia (KBBI) Online).
Di dalam sebuah
dokumen HTML, tentunya terdapat paragraf yang digunakan untuk membangun sebuah
wacana (artikel) atau tulisan di dalamnya.
Pada pembahasan
kali ini, akan dijelaskan cara
membuatan paragraf di HTML, dimulai dengan penggunaan tag <p> untuk
membuat paragraf, tag <br> untuk membuat baris baru dan tag <pre>
untuk preformatted text (menampilkan teks di browser sesuai dengan yang
ditulis).
Membuat Paragraf Dengan Tag <p>
Tag P (<p>) itu adalah singkatan dari paragraph. Jadi,
pada dasarnya tag ini memang dirancang khusus bagi para pembuat website untuk
membuat paragraf. Dengan kata lain, <p> itu berfungsi untuk membuat
paragraf.
Silahkan buka kembali text editor, lalu ketikkan kode
berikut:
Contoh penggunaan tag paragraf:
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE
html>
<html>
<head>
<title>Title
dari Websiteku</title>
</head>
<body>
<p>Ini
adalah paragraf pertama</p>
<p>Ini
adalah paragraf kedua</p>
</body>
</html>
|
Save sebagai paragraf.html, lalu jalankan di web browser.
Hasilnya adalah sebagai berikut :
Pada tag <p> terdapat atribut align yang digunakan
untuk menampilkan paragraf dengan rata kanan, kiri, tengah ataupun kiri dan
kanan. Namun, atribut align tidak didukung oleh HTML5 karena sudah diganti
dengan penggunaan CSS.
Berikut ini nilai pada atribut align :
Nilai
|
Fungsi
|
Left
|
Untuk meratakan heading ke kiri
|
Right
|
Untuk meratakan heading ke kanan
|
Center
|
Untuk meratakan heading ke tengah
|
Justify
|
Untuk meratakan teks ke kiri dan kanan
|
Membuat Paragraf Dengan Tag Break <br>
Cara lain untuk
memisahkan kedua paragraf adalah dengan menggunakan tag <br> (br
singkatan dari break).
Contoh penggunaan tag <br>:
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<title>title dari
websiteku</title>
</head>
<body>
ini adalah paragraf pertama
<br />
ini adalah paragraf kedua
</body>
</html>
|
Jika kode HTML diatas dijalankan, maka hasilnya hampir sama dengan
menggunakan tag <p>. Namun pemisahan paragraf menggunakan
tag <br> bukanlah untuk membuat paragraf.
Tag <br> berfungsi
untuk memisahkan sebuah bagian text dengan text lain. Jika yang kita butuhkan
adalah struktur paragraf, maka gunakan tag <p>.
Namun dalam standar
HTML5, penulisan <br> maupun <br /> tetap dianggap valid.
Tag Untuk Penebalan <em> dan Garis Miring <strong>
Di dalam sebuah paragraf, kadang kita perlu untuk membuat
penekanan pada kata-kata tertentu. Penekanan ini bisa dilakukan dengan
menebalkan kata, atau dengan garis miring.
Tag emphasis (penekanan) terdiri dari 2
tag, <em> untuk emphasis, dan <strong>
untuk strong emphasis.
Pada umumnya web browser akan menampilkan <em> sebagai
garis miring, dan <strong> dengan penebalan huruf.
Contoh penggunaan
tag <em> dan <strong>:
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<head>
<title>title dari
websiteku</title>
</head>
<body>
<p>ini adalah kalimat
<em>pertama</em>,
sedangkan ini adalah kalimat
<strong>kedua</strong></p>
</body>
</html>
|
Walaupun tanda
spasi tidak akan dianggap dalam HTML, namun untuk membuat
kode HTML, menjorokkan (indent) beberapa baris dalam suatu
tag akan membuat kode mudah dibaca.
Kita juga akan
menemukan bahwa HTML memiliki tag <i> (italic)
untuk memiringkan huruf, dan <b> (bold) untuk
menebalkan huruf. Pakar HTML yang mendukung pemisahan konten
dengan tampilan tidak menyarankan menggunakan tag <i> dan <b>,
karena kedua tag ini akan mempengaruhi tampilan dari HTML.
Tampilan halaman
web seharusnya di tangani oleh CSS, bukan di dalam kode HTML.
Pada xHTML, tag <i> dan <b> sudah dianggap usang dan
tidak akan dipakai lagi, namun dalam spesifikasi HTML5, tag
<i> dan <b> kembali dianggap relevan.
Pembahasan lebih
jauh tentang cara penulisan dan cara men-format text dalam HTML, akan dibahas
secara lebih detail pada Belajar HTML Dasar Lanjutan: Tag dan
Atribut untuk Pembuatan Text dan Format Text HTML.
Setelah memahami cara
pembuatan paragraf di dalam HTML, pada Belajar HTML Dasar selanjutnya, kita akan mempelajari Cara Membuat Judul di HTML menggunakan tag <h1>.
loading...
No comments:
Post a Comment