Belajar Dasar HTML Part 7 – Cara Membuat Paragraf Pada HTML (tag p)

Febri Hidayan Komentar

Belajar Dasar HTML Part 7 – Cara Membuat Paragraf Pada HTML (tag p)

Pada kesempatan kali ini kita akan membahas tentang tag paragraf, dimana suatu dokumen didalam website ada paragrafnya. Untuk memahami lebih dalam tentang paragraf di HTML. Bertama bukalah text editor yang kita punya, silakan ketikan kode di bawah ini:

Contoh Penggunaan paragraf

<!DOCTYPE html>

<html>
<head>
                <title>Sekolah Program</title>
</head>
<body>
Ini adalah paragraf pertama
Ini adalah paragraf kedua
</body>
</html>

Setelah selesai mengetiknya save (simpan) dengan nama paragraf.html, lalu jalankan di web browser:

Dari hasil yang kita lihat bahwa paragraf tersebut tidaklah pada baris yang sama melainkan dalam satu barus yang sama. Ingat! Dalam penggunaan HTML space akan diabaikan sepanjang panjang space yang kita buat maka HTML akan mengabaikan itu semua. Untuk menghilangkan hal itu sebuah maka kenalilah tag tag di bawah ini:

Menggunakan Tag (<p>)

Tag <p> atau sering disebut paragraf adalah tag khusus untuk membuat paragraf pada HTML. Dimana suatu website menggunakan tag ini untuk artikelnya yang bisanya kita baca seperti kita membaca artikel ini. Untuk memahaami lebih lanjut lihat ketik kode dibawah ini:

<!DOCTYPE html>
<html>
<head>
                <title>Sekolah Program</title>
</head>
<body>
<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua</p>
</body>
</html>

Hasil saat dijalankan di web browser:

Maka hasilnya akan terlihat bahawa kedua paragraf tersebut telah berada posisi yang sesuai. Pada setiap paragraf, web browser akan memberikan space pada setiap paragrafnya.

Menggunakan Tag <br>

Tag <br> dengan kepanjangan dari break merupakaan cara lain untuk memisahkan suatu paragraf. Ketik kode dibawah ini (cara penggunaan pertama):

<!DOCTYPE html>
<html>
<head>
                <title> Sekolah Program </title>
</head>
<body>
<p> Ini adalah paragraf pertama </p>
<br>
<p> Ini adalah paragraf kedua </p>
</body>
</html>

Hasil saat dijalankan di Web Browser:

Maka saat dijalankan perbedaan space sangat jauh sekali seakan akakan memiliki tiga paragraf. Untuk mengatasi itu semua kita akan membuat satu kode lagi. Ketik kode dibwah ini (cara penggunaan kedua):

<!DOCTYPE html>
<html>
<head>
                <title> Sekolah Program </title>
</head>
<body>
Ini adalah paragraf pertama
<br/>
Ini adalah paragraf kedua
</body>
</html>

Hasil saat dijalankan di Web Browser:

Maka hasilnya akan rapat dan hampir sama dengan penggunaan tag <p>. Namun sedikit berbeda dengan menggunakaan tag <p>, dikarenakan tag <br> hanya untuk memisahkan sebuak teks dengan teks lainnya. Kalau kita ingin menggunakan struktur paragraf maka penggunaan tag <p> sangat diperlukan.

Catatan: hei hei hei!, jangan terlalu terburu buru?. Untuk tag <br> ada dua cara penulisannya yaitu bisa ditulis dengan <br> atau <br/> yang menggunakan forward slash “/”. Kenapa hal itu bisa terjadi? Dikarenakan tag <br/> merupakan bawaan dari xHTML yang dianggap lebih rapi lagi. Namun didalam standar penggunaan HTML5, penulisan tag <br> maupun <br/> tetap saja dianggap valid oleh HTML5.

Menggunakan Tag <hr>

Tag <hr> kepanjangan dari Horizontal Line (garis horizontal) digunakan untuk membuat garis pembatas pada setiap paragraf ataupun kalimat pembeda. Untuk melihat penggunaannya ketik kode dibawah ini:

<!DOCTYPE html>
<html>
<head>
                <title> Sekolah Program </title>
</head>
<body>
Ini adalah paragraf pertama
<hr>
Ini adalah paragraf kedua
</body>
</html>

Hasil saat dijalankan di Web Browser:

Walaupun garis horizontalnya panjang kita bisa mengatasi hal itu semua dengan sedikit menggunakan attribut yaitu width dan align dengan cara ini kita bisa membuatnya sejajar dengan teks yang kita buat. Silakan ganti kode kode pengganti seperti dibawah ini:

<hr width="200px" align="left">

Maka garisnya akan sesuai keinginan kita.

Sedikit Penggunaan Tag Format Teks (tag i, u, b, dan s)

Tag <i> atau italic digunakan untuk membuat teks miring.

Tag <u> digunakan untuk membuat garis bawah pada teks.

Tag <b> atau bold digunakaan untuk membuat tampilan huruf menjadi lebih tebal.

Tah <s> digunakan untuk membuat huruf menjadi tercoret ditengah tengah huruf tersebut.

Untuk menggunakaan tag tag diatas kita bisa sematkan di tag <p> untuk melihat perubahan apa saja yang akan terjadi pada paragraf yang kita buat. Silakan ketik kode dibawah ini:

<!DOCTYPE html>
<html>
<head>
      <title> Sekolah Program </title>
</head>
<body>
<p> sedikit menggunakan <i>teks miring</i>, <u>teks bergaris bawah</u>, <b>teks tebal</b>,dan <s>teks tercoret</s> itulah penggunaan pada tag p</p>
</body>
</html>

Maka hasil di Web Browser:

Dengan adanya format teks kita bisa manfaati tu buat tampilan halaman web HTML kita bisa tampak lebih relavan dan indah dilihat. Dan masih banyak lagi tag format teks yang bisa kita pelajari di pembelajaran selanjutnya. Itulah penggunaan tag format teks, yang bisa kita buat pada artikel ini. Semoga bermanfaat!

Catatan: untuk membuat halaman web HTML kita sangat butuh yang namanya tag <p> untuk membuat tampilan dokumen kita lebih rapi lagi. Apabilah kita juga sematkan tag format teks untuk menandai teks teks penting dalam dokumen kita.

Category HTMLTags Dasar HTML


Mari Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *