Cara Membuat Paragraf pada HTML

Cara Membuat Paragtaf pada HTML - Artikel ini membahas tentang "Cara Membuat Paragraf pada HTML". Lalu apa itu paragraf?

Paragraf merupakan kumpulan kalimat dengan satu ide pokok. Pada web page, paragraf digunakan untuk menampilkan teks.

Sebuah kalimat ditandai dengan tulisan yang pada baris pertama dan terakhir memiliki jarak yang lebih daripada jarak antar baris kalimat pada paragraf tersebut.

Lalu bagaimana cara "Membuat Paragraf pada HTML"? Berikut ini pembahasannya.

#1 Untuk Membuat Paragraf Menggunakan Tag p

Untuk membuat paragraf pada HTML, gunakan tag </p>.

<p><!--Isi dengan kalimat-kalimat di sini!--></p>

Contoh:

<p>Paragraf adalah suatu gagasan yang berbentuk serangkaian kalimat yang saling berkaitan satu sama lain. Nama lain dari paragraf ialah wacana mini. </p>
<p>Kegunaan dari paragraf adalah untuk menjadi penanda dimulainya topik baru dan memisahkan gagasan-gagasan utama yang berbeda.</p>
<p>Sumber: Wikipedia</p>

Hasilnya:

Paragraf adalah suatu gagasan yang berbentuk serangkaian kalimat yang saling berkaitan satu sama lain. Nama lain dari paragraf ialah wacana mini.

Kegunaan dari paragraf adalah untuk menjadi penanda dimulainya topik baru dan memisahkan gagasan-gagasan utama yang berbeda.

Sumber: Wikipedia

#2 Tambahkan Tag <br> Jika Diperlukan

Selain menggunakan tag <p>, kita juga bisa menggunakan tag <br/>.

Tag <br> sebenarnya bukanlah tag untuk membuat paragraf. Tapi tag ini, biasanya digunakan untuk membantu tag <p>.

Fungsi utama tag <br> adalah untuk membuat baris baru.

Contoh:

<p>Kalimat pertama.<br />
Kalimat kedua.<br />
Kalimat ketiga.<br />
Kalimat keempat.</p>

Hasilnya:

Kalimat pertama.
Kalimat kedua.
Kalimat ketiga.
Kalimat keempat.

#3 Atur Perataan Teks pada Paragraf

Untuk mengatur perataan teks pada paragraf menjadi rata kiri, rata kanan, rata tengah, serta rata kiri dan kanan, kita dapat menambahkan atribut align dengan nilai sebagai berikut.

• text-align:left untuk nilai atribut "rata kiri".
• text-align:right untuk nilai atribut "rata kanan".
• text-align:center untuk nilai atribut "rata tengah".
• text-align:justify untuk nilai atribut "rata kiri dan kanan".

#3.1 Contoh Paragraf Rata Kiri

<p align="text-align:left">Umumnya sebuah web memiliki pengaturan rata kiri untuk setiap paragraf yang dibuat.</p>
<p align="text-align:left">Tapi jika tidak demikian, Anda bisa menambahkan align="text-align:left" pada tag p tersebut.</p>

Hasilnya:

Umumnya sebuah web memiliki pengaturan rata kiri untuk setiap paragraf yang dibuat.

Tapi jika tidak demikian, Anda bisa menambahkan align="text-align:left" pada tag p tersebut.

#3.2 Contoh Paragraf Rata Tengah, Kanan, dan Kiri-Kanan

<p align="center">Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya membuat paragraf ini dengan rata tengah (<strong>center</strong>). Saya menerapkan ini, khusus untuk postingan blog dengan label "Dijual" pada template Lajang Spot.</p>
<p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf ini dibuat dengan rata kanan (<strong>right</strong>). Anda bisa melihatnya sendiri.</p>
<p align="justify">Paragraf memiliki kalimat utama dan kalimat-kalimat penjelas. Paragtaf ini dibuat dengan rata kiri dan kanan (<strong>justify</strong>). Kalimat uama berisi ide pokok atau gagasan utama yang akan dijelaskan oleh kalimat-kalimat penjelas.</p>

Hasilnya:

Ini adalah sebuah paragraf yang berisi beberapa kalimat. Saya membuat paragraf ini dengan rata tengah (center). .

Paragraf adalah kumpulan dari beberapa kalimat yang saling mendukung. Paragraf ini dibuat dengan rata kanan (right). Anda bisa melihatnya sendiri.

Paragraf memiliki kalimat utama dan kalimat-kalimat penjelas. Paragtaf ini dibuat dengan rata kiri dan kanan (justify). Kalimat uama berisi ide pokok atau gagasan utama yang akan dijelaskan oleh kalimat-kalimat penjelas.

#4 Paragraph Style

Kita bisa mengatur style suatu paragraf pada HTML sehingga terlihat tidak seperti biasanya sebagaimana contoh di atas.

#4.1 Baris Pertama Masuk ke Dalam

Baris pertama pada paragraf kadang sering ditulis masuk ke dalam atau ini juga disebut dengan indentasi.

Contoh:

<p style="text-indent: 45px;">Contoh ini baris pertama yang ditulis masuk ke dalam. 
Baris kedua tetap ditulis seperti biasa. 
Dan juga baris Ke-3 ditulis seperti biasa.</p>

Hasilnya:

Contoh ini baris pertama yang ditulis masuk ke dalam. Baris kedua tetap ditulis seperti biasa. Dan juga baris Ke-3 ditulis seperti biasa.

#4.2 Warna untuk Paragraf

Warna bisa kita berikan kepada teks dan background. Properti CSS yang digunakan untuk memberikan warna adalah color (untuk teks) dan background-color (untuk background).

Contoh:

<p style="color: blue;">Contoh paragraf dengan warna teks biru.
Ini baris kedua dari paragraf. Semua teks yang ada di dalam
paragraf ini  akan berwarna biru.</p>

<p style="color: white; background-color:purple">Contoh paragraf dengan 
warna teks putih dan warna background-nya adalah ungu.
Ini baris kedua dari paragraf. Semua teks yang ada di dalam
paragraf ini  akan berwarna putih.</p>

Hasilnya:

Contoh paragraf dengan warna teks biru. Ini baris kedua dari paragraf. Semua teks yang ada di dalam paragraf ini akan berwarna biru.

Contoh paragraf dengan warna teks putih dan warna background-nya adalah ungu. Ini baris kedua dari paragraf. Semua teks yang ada di dalam paragraf ini akan berwarna putih.

#4.3 Mengubah Jenis Font

Tidak suka dengan jenis font yang digunakan, kita bisa menggantinya dengan style CSS.

Kita bisa gunakan properti font-family lalu diberikan nilai dengan nama font yang akan digunakan.

Contoh:

<p style="font-family: Arial;">Ini adalah contoh paragraf yang
menggunakan font Arial. Semua teks pada paragraf ini akan menggunakan
font Arial. Arial adalah salah satu font yang umum digunakan pada
Windows.</p>

<p style="font-family: 'Times New Roman'">Ini adalah paragraf yang menggunakan font Times New Roman. Font ini juga umum digunakan dalam
penulisan teks. Perhatikan penulisan Times New Roman pada style CSS,
ia diapit dengan tanda petik karena mengandung lebih dari satu kata.</p>

Hasilnya:

Ini adalah contoh paragraf yang menggunakan font Arial. Semua teks pada paragraf ini akan menggunakan font Arial. Arial adalah salah satu font yang umum digunakan pada Windows.

Ini adalah paragraf yang menggunakan font Times New Roman. Font ini juga umum digunakan dalam penulisan teks. Perhatikan penulisan Times New Roman pada style CSS, ia diapit dengan tanda petik karena mengandung lebih dari satu kata.

---

Sumber bacaan: www.petanikode.com/html-paragraf

Buka lainnya di Tutorial HTML untuk Blogger Pemula.