Belajar HTML Bagian 7 : Cara Membuat Paragraf di HTML
November 23, 2017
Add Comment
Paragraf adalah serangkaian kalimat yang terdiri dari satu kalimat pokok dan beberapa kalimat penjelas. Di dalam HTML, tentunya terdapat tag untuk membuat paragraf.
Pada pembahasan kali ini Saya akan menjelaskan cara membuat paragraf di HTML, selain paragraf sobat juga akan mempelajari cara membuat baris baru di HTML. Silahkan baca artikel ini sampai selesai :-).
Tag
HTML menyediakan tag khusus untuk membuat paragraf yaitu tag
Silahkan buka text editor sobat di sini Saya menggunakan Notepad++, lalu ketikan kode di bawah ini :
Jika sudah di ketikan silahkan simpan dengan nama Paragraf.html, lalu buka di browser. Maka hasilnya akan seperti gambar di bawah ini :
Pada tag
Berikut ini contoh penggunaan atribut align :
Maka tampilannya jika dibuka di browser akan seperti gambar di bawah ini :
Silahkan buka text editor sobat lagi, lalu ketikan kode di bawah ini :
Maka tampilannya setelah dibuka di browser akan seperti gambar di bawah ini :
Terlihat jelas "Paragraf pertama" pada "Baris 1", "Baris 2" dan "Baris 3" tersebut tidaklah berada pada baris yang berbeda, namun berada pada satu baris yang sama dengan "Paragraf pertama". Hal ini karena baris tambahan yang berada di dalam tag
Tenang HTML menyediakan tag khusus untuk mengatasi masalah tersebut yaitu dengan menggunakan tag
Tag
Jika sobat ingin menampilkan teks yang sesuai dengan aslinya baik itu tambahan spasi dan baris, maka sobat bisa menggunakan tag
Tag
Silahkan buka text editor sobat, lalu ketikan kode di bawah ini :
Maka tampilannya jika dibuka di browser akan seperti gambar di bawah ini :
Terlihat dari gambar di atas, teks yang ditampilkan di browser sesuai dengan yang sobat ketikan dimana tambahan baris dan spasi akan ditampilkan di browser. Penggunaan Tag
Tag
Jika sobat ingin membuat baris baru di HTML maka sobat bisa menggunakan tag
Berikut ini contoh penggunaan tag
Maka tampilannya jika dibuka di browser akan seperti gambar di bawah ini :
Tag
Setelah sobat memahami cara membuat paragraf di HTML, maka pada artikel selanjutnya sobat akan mempelajari Cara Membuat Heading di HTML.
Pada pembahasan kali ini Saya akan menjelaskan cara membuat paragraf di HTML, selain paragraf sobat juga akan mempelajari cara membuat baris baru di HTML. Silahkan baca artikel ini sampai selesai :-).
Tag <p>
HTML menyediakan tag khusus untuk membuat paragraf yaitu tag <p>. Tag <p> menyatakan awal dari suatu paragraf sedangkan akhir dari suatu paragraf ditandai dengan tag </p>.Silahkan buka text editor sobat di sini Saya menggunakan Notepad++, lalu ketikan kode di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Paragraf di HTML</title>
</head>
<body>
<p>Paragraf pertama</p>
<p>Paragraf kedua</p>
</body>
</html>Jika sudah di ketikan silahkan simpan dengan nama Paragraf.html, lalu buka di browser. Maka hasilnya akan seperti gambar di bawah ini :
Pada tag
<p> sobat juga bisa menambahkan atribut align yang digunakan untuk menampilkan paragraf antara rata kanan, kiri, tengah ataupun kiri dan kanan sesuai keinginan sobat. Berikut ini nilai dari atribut align :| Nilai | Fungsi |
| Left | Untuk meratakan teks ke kiri |
| Right | Untuk meratakan teks ke kanan |
| Center | Untuk meratakan teks ke tengah |
| Justify | Untuk meratakan teks ke kanan dan kiri |
Berikut ini contoh penggunaan atribut align :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Paragraf di HTML</title>
</head>
<body>
<p align="left">Meratakan teks paragraf ke kanan</p>
<p align="right">Meratakan teks paragraf ke kiri</p>
<p align="center">Meratakan teks paragraf ke tengah</p>
<p align="justify">Meratakan teks paragraf ke kanan dan kiri</p>
</body>
</html>Maka tampilannya jika dibuka di browser akan seperti gambar di bawah ini :
Silahkan buka text editor sobat lagi, lalu ketikan kode di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Paragraf di HTML</title>
</head>
<body>
<p>
Paragraf pertama
Baris 1
Baris 2
Baris 3
</p>
<p>
Paragraf kedua Spasi 1 Spasi 2 Spasi 3
</p>
</body>
</html>Maka tampilannya setelah dibuka di browser akan seperti gambar di bawah ini :
<p> akan di abaikan termasuk juga spasi tambahan yang berada di "Paragraf kedua" juga ikut di abaikan.Tenang HTML menyediakan tag khusus untuk mengatasi masalah tersebut yaitu dengan menggunakan tag
<pre>.
Tag <pre>
Jika sobat ingin menampilkan teks yang sesuai dengan aslinya baik itu tambahan spasi dan baris, maka sobat bisa menggunakan tag <pre>. Tag <pre> adalah singkatan dari Preformatted Text yang digunakan untuk teks yang tidak akan di format. Maksudnya jika di buka di browser tampilan spasi dan baris akan sama persis dengan ada yang di dalam tag <pre>.Tag
<pre> termasuk ke dalam Blok level element yang maksudnya teks yang berada di tag <pre> akan ditampilkan di baris baru dan terpisah dari teks yang berada diluar Tag <pre>. Pada umumnya jenis font yang digunakan adalah Monospace dengan panjang karakter yang sama setiap hurufnya.Silahkan buka text editor sobat, lalu ketikan kode di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Paragraf di HTML</title>
</head>
<body>
<pre>
Paragraf pertama
Baris 1
Baris 2
Baris 3
Paragraf kedua Spasi 1 Spasi 2 Spasi 3
</pre>
</body>
</html>Maka tampilannya jika dibuka di browser akan seperti gambar di bawah ini :
Terlihat dari gambar di atas, teks yang ditampilkan di browser sesuai dengan yang sobat ketikan dimana tambahan baris dan spasi akan ditampilkan di browser. Penggunaan Tag
<pre> ini biasa digunakan untuk menampilkan kode program.
Tag <br>
Jika sobat ingin membuat baris baru di HTML maka sobat bisa menggunakan tag <br>. Tag <br> merupakan singkatan dari break.Berikut ini contoh penggunaan tag
<br> di HTML :<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Paragraf di HTML</title>
</head>
<body>
Ini adalah baris 1
<br/>
Ini adalah baris 2
</body>
</html>Maka tampilannya jika dibuka di browser akan seperti gambar di bawah ini :
Tag
<br> termasuk ke dalam single text yang artinya tag <br> tidak memiliki tag penutup, sobat bisa menulis <br> atau <br/>.Refrensi Tag HTML
| Tag | Deskripsi |
|---|---|
| <p> | Membuat paragraf |
| <br> | Membuat baris baru |
| <pre> | Mendefinisikan teks yang tidak diformat |
0 Response to "Belajar HTML Bagian 7 : Cara Membuat Paragraf di HTML"
Post a Comment