Cara Membuat Paragraf di HTML !



Pada artikel ini akan kami berikan sebuah materi yang bisa berikan yaitu bagaimana penulisan tag paragraf dan bagaimana cara membuat paragraf di HTML.

Untuk memahami cara pembuatan paragraf di dalam HTML, kita akan menggunakan contoh struktur HTML yang dibuat pada tutorial sebelum ini, dan menambahkan beberapa text. Silahkan buka kembali text editor, lalu ketikkan kode berikut:

Paragraf yang dimaksud disini adalah paragraf yang dapat membuat elemen dan penulisan di HTML. Kita juga akan kombinasikan beberapa tipe tipe peragraf dengan tag paragraf <p> yang akan kita gunakan yaitu :

  • Paragraf rata kiri align left
  • Paragraf rata kiri align right
  • Paragraf rata kiri align center
  • Paragraf rata kiri align justify
Contoh penggunaan tag paragraf:

<!DOCTYPE html>
<html>
<head>
  <title>Arm4nChannel</title>
</head>
<body>
  Ini adalah paragraf pertama
  Ini adalah paragraf kedua
</body>
</html>

Save sebagai paragraf.html, lalu jalankan di web browser, maka akan muncul seperti ini :


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.

 Termasuk jika kita merubahnya menjadi :

<!DOCTYPE html>
<html>
<head>
  <title>Arm4nChannel</title>
</head>
<body>
  Ini adalah paragraf pertama        Ini adalah paragraf kedua
</body>
</html>

Kita harus memberi tahu web browser bahwa kedua kalimat itu harus terpisah. Dan bahwa masing-masing kalimat itu adalah sebuah paragraf.

Penggunakan 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.

HTML menyediakan tag khusus untuk membuat paragraf. Penulisannya menggunakan huruf p, sebagai berikut : <p>. Mari kita revisi contoh kode HTML sebelumnya, dan menambahkan tag <p>.

<!DOCTYPE html>
<html>
<head>
  <title>Arm4nChannel</title>
</head>
<body>
  <p>ini adalah paragraf pertama</p>
  <p>ini adalah paragraf kedua</p>
</body>
</html>
dan hasilnya akan terlihat seperti ini :



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

Penggunakan Tag break <br>

Tag <br> dengan kepanjangan dari break merupakaan cara lain untuk memisahkan suatu paragraf. Kita dapat menggunakan tag ini dengan mudah akan memisahkan antar paragraf. Berikut contohnya :

<!DOCTYPE html>
<html>
<head>
  <title>Arm4nChannel</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>.

Catatan :Perhatikan penulisan tag <br>, tag break adalah salah satu dari beberapa tag yang tidak memiliki tag penutup, dan bisa ditulis sebagai<br > atau <br />. Penulisan <br /> merupakan bawaan dari xHTML yang dianggap lebih rapi. Namun dalam standar HTML5, penulisan <br> maupun <br /> tetap dianggap valid.

Penggunakan 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>Arm4nChannel</title>
</head>
<body>
  Ini adalah paragraf pertama
<hr>
  Ini adalah paragraf kedua
</body>
</html>

dan berikut adalah hasil dari penggunaan tag <hr> :


Jenis Paragraff daalam Penggunaannya :

Pragraf Rata Kiri :
<p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>
Pragraf Rata Kanan:
<p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>
Pragraf Rata Tengah:
<p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>
Pragraf Rata Kiri Kanan :
 <p align="justivy">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML</p>

Eksekusi dalam HTML :
<!DOCTYPE html>
<html>
<head>
 <title>belajar membuat paragraf</title>
</head>
<body>
 <p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>
 <p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>
 <p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>
 <p align="justivy">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML</p>
</body>
</html>

Informasi untuk materi ini !!!

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> Arm4nChannel</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>


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.

Baca Juga !!

Cara Membuat Judul (heading) di HTML !!



Next
Previous
Click here for Comments

0 komentar:

Bijaklah saat Anda memberikan komentar atau kritik !!