Pada pembahasan sebelumnya, kita telah mempelajari tentang Tag, Elemen, dan Atribut di dalam HTML. Masih berkenaan dengan itu, pada artikel kali ini kita akan belajar tentang elemen, atribut dan tag-tag dasar yang sering digunakan dalam membuat paragraf pada pemrograman HTML. Untuk itu mari kita awali dengan membuat paragraf di HTML.
Membuat Paragraf di HTML
Paragraf adalah kumpulan teks dari beberapa kalimat yang terlihat pada halaman web. Paragraf digunakan untuk menampilkan teks atau artikel. Namun, sebuah paragraf juga bisa digunakan untuk mengelompokkan gambar dan juga form isian. Beberapa tag yang biasanya digunakan pada paragraf diantaranya : <p>, <div>, <hr>, <br>, dan <pre>.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Paragraf HTML</title>
</head>
<body>
<p>Paragraf adalah kumpulan teks dari beberapa kalimat <br>
yang terlihat pada halaman web. Paragraf digunakan untuk <br>
menampilkan teks atau artikel.</p>
<p>sebuah paragraf juga bisa digunakan untuk mengelompokkan <br>
gambar dan juga form isian. Beberapa tag yang biasanya digunakan <br>
pada paragraf diantaranya : </p>
</body>
</html>
Hasil tampilan di browser:
Atribut dan Tag untuk Paragraf
Biasanya paragraf ditambahkan dengan beberapa atribut seperti align, id, class, dll.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Paragraf di HTML</title>
</head>
<body>
<h1 align="center"> Belajar Paragraf HTML</h1>
<p align="left"> Oleh : Praktek Otodidak</p>
<hr />
<pre>
<p> Paragraf adalah kumpulan teks dari beberapa kalimat <br>
yang terlihat pada halaman web. Paragraf digunakan untuk <br>
menampilkan teks atau artikel.</p>
<hr />
<p>sebuah paragraf juga bisa digunakan untuk mengelompokkan <br>
gambar dan juga form isian. Beberapa tag yang biasanya digunakan <br>
pada paragraf diantaranya : </p>
</pre>
<footer>
<div>© 2022 copyright by Praktek Otodidak</div>
</footer>
</body>
</html>
Hasil tampilan di browser:
Keterangan :
Atribut align merupakan atribut yang digunakan untuk perataan teks pada paragraf, walaupun sebenarnya tugas untuk merubah tampilan dari web lebih baik menggunakan CSS.
tag <p> berfungsi untuk membuat Paragraf pada HTML
tag <br> berfungsi untuk membuat baris baru. Tag ini boleh tidak ditutup.
Tag <hr> adalah tag yang digunakan untuk membuat garis lurus secara horizontal, biasanya digunakan untuk memisahkan beberapa konten atau paragraf.
Tag <pre> (preformatting) merupakan tag yang digunakan untuk menampilkan teks atau paragraf dalam format yang sudah ditentukan di HTML.
Tag <div> Digunakan untuk membungkus teks yang ada di luar artikel, Contoh seperti teks pada footer, header, sidebar, dll. Paragraf yang dibuat dengan tag ini tidak akan memiliki jarak margin antar paragraf.
Membuat Paragraf HTML dengan Style CSS
Sebenarnya pembahasan ini masuk dalam materi CSS, tapi ada baiknya kita mempelajari HTML dan CSS secara bersamaan. Hal ini karena CSS selalu digunakan secara bersamaan dengan HTML.
Balik lagi ketopik pembahasan, Paragraph Style adalah style CSS yang kita berikan kepada paragraf agar tampil lebih menarik. Berikut ini merupakan contoh beberapa style yang bisa diberikan pada paragraf:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial Paragraf di HTML</title>
</head>
<body>
<h1 style="text-align: center"> Belajar Paragraf HTML</h1>
<p style="color: blue;"> Oleh : Praktek Otodidak</p>
<hr />
<p style="text-indent: 45px;"> Paragraf adalah kumpulan teks dari beberapa kalimat <br>
yang terlihat pada halaman web. Paragraf digunakan untuk <br>
menampilkan teks atau artikel.</p>
<hr />
<p style="color: red; background-color:yellow"> sebuah paragraf juga bisa digunakan untuk mengelompokkan <br>
gambar dan juga form isian. Beberapa tag yang biasanya digunakan <br>
pada paragraf diantaranya : </p>
<hr />
<p style="font-family: 'algerian'">Membuat Paragraf HTML dengan Style CSS </p>
<hr />
<br>
<br>
<footer>
<div>© 2022 copyright by Praktek Otodidak</div>
</footer>
</body>
</html>
Keterangan :
style=”text-align: center, Style Paragraph untuk perataan teks (tengah)
style=”color: blue;, Style Paragraph dengan memberikan warna pada teks (biru)
style=”text-indent: 45px;, Style Paragraph baris pertama masuk ke dalam (45px)
style=”color: red; background-color:yellow, Style Paragraph dengan memberikan warna pada teks (merah) dan background (kuning)
style=”font-family: ‘algerian’, Style Paragraph mengganti jenis Font (algerian)
Hasil tampilan di browser:
Pada pembahasan dalam membuat paragraf di HTML ini, kita sudah belajar atribut serta beberapa tag-tag dasar beserta style CSS di HTML. Silahkan dibaca artikel selanjutnya yaitu : Belajar HTML#4 Cara Membuat Heading di HTML
