Beranda / html / Komputer / Pemrograman / Web

Paragraf HTML | Tutorial HTML 7

Oleh Sopyan Posting Komentar
Assalamualaikum sobat, di artikel kali ini kami akan membagikan tutorial bagaimana caranya membuat paragraf di HTML beserta contoh programnya, berikut adalah tutorialnya.

Paragraf HTML

Apa itu paragraf ? Paragraf adalah sebuah blok teks yang selalu dimulai pada baris baru.

Untuk membuat sebuah paragraf kita bisa menggunakan tag <p>.

Ketika kita menggunakan tag <p>, browser akan secara otomatis menambahkan margin (spasi) sebelum dan sesudah paragraf.

Contoh Program 1 : Paragraf HTML

<!DOCTYPE html>
<html>
        <body>
                
                <p>Ini paragraf</p>
                <p>Ini paragraf</p>
                <p>Ini paragraf</p>
                
        </body>
</html>

Hasil Program 1

contoh program 1 paragraf html

Penjelasan Program 1

contoh program 1 paragraf html
  • Di baris 1, <!DOCTYPE html> artinya kita membuat dokumen HTML5.
  • Di baris 2 hingga baris 10, <html>...</html> adalah akar dari dokumen html.
  • Di baris 3 sampai baris 9, <body>...</body> adalah tubuh dari dokumen html yang akan ditampilkan oleh browser.
  • Baris 5 hingga baris 7, tag <p> digunakan untuk membuat paragraf.

Tampilan HTML Pada Browser

Dengan menggunakan kode HTML kita tidak akan tahu pasti browser akan menampilkannya seperti apa.

Kita akan mendapatkan hasil yang berbeda pada layar besar, kecil ataupun jendela yang kita ubah ukurannya.

Meskipun kita menambahkan spasi atau baris tambahan pada kode HTML kita, hal itu tidak akan mengubah tampilan di browser.

Ketika halaman ditampilkan, spasi dan baris tambahan yang kita buat di kode HTML akan secara otomatis dihapus oleh browser.

Contoh Program 2 : Tampilan HTML

<!DOCTYPE html>
<html>
  <body>
          <p>Paragraf ini
          mengandung banyak baris baru
          di dalam source code,
          tapi akan dihiraukan oleh 
          browser.</p>
                
          <p>Paragraf ini
          mengandung banyak spasi
          di dalam source code
          tapi browser akan 
          menghiraukannya.</p>
                
          <p>Jumlah baris dalam sebuah paragraf akan berbeda, tergantung dari besar dan kecilnya jendela browser, jika kalian mengubah ukuran jendela browser maka jumlah baris pada paragraf ini juga akan berubah</p>
        </body>
</html>

Hasil Program 2

hasil program 2 tampilan html

Penjelasan Program 2

Contoh Program 2 tampilan html
  • Di baris 4 hingga baris 8, kita membuat paragraf dan di kode program tersebut kita membuat banyak sekali baris baru, namun browser menghiraukannya.
  • Di baris 10 hingga baris 14, kita membuat paragraf dengan banyak sekali spasi, tapi hasil di browser tidak tampak adanya spasi yang banyak itu.
  • Di baris 16 , kita membuat paragraf dengan teks yang panjang sehingga kalian tahu jika kita voba ubah ukuran dari browser maka jumlah baris paragraf tersebut akan berubah juga.

Garis Horizontal HTML

Untuk membuat sebuah garis horizontal atau jeda tematik pada halaman HTML, kita bisa menggunakan tag <hr>.

Elemen <hr> ini digunakan untuk memisahkan konten (menentukan perubahan) di halaman HTML.

Tag <hr> tidak memiliki tag akhir atau disebut sebagai tag kosong.

Contoh Program 3 : Garis Horizontal HTML

<!DOCTYPE html>
<html>
        <body>
                <h1>Ini Judul 1</h1>
                <p>beberapa teks</p>
                <hr>
                
                <h2>Ini Judul 2</h2>
                <p>beberapa teks</p>
                <hr>
                
                <h2>Ini judul 2</h2>
                <p>beberapa teks</p>
        </body>
</html>

Hasil Program 3

Hasil Program 3 tag <hr>

Penjelasan Program 3

Kode program 3 tag hr
  • Di baris 1, <!DOCTYPE html> adalah deklarasi bahwa dokumen yang kita buat adalah dokumen HTML5.
  • Di baris 2 sampai baris 15, tag <html>...</html> adalah akar dari dokumen html yang kita buat.
  • Di baris 3 hingga baris 14, tag <body> adalah tubuh dari dokumen html yang akan ditampilkan di browser.
  • Baris 4, tag <h1> adalah membuat judul pertama.
  • Baris 5, baris 9 dan baris 13, tag <p> digunakan untuk membuat paragraf.
  • Baris 8 dan baris 12, tag <h2> kita gunakan untuk membuat judul kedua.
  • Pada baris 6 dan baris 10 kita membuat garis horizontal menggunakan tag <hr>.

Cara Membuat Baris Baru HTML

Untuk membuat sebuah baris baru atau jeda baris maka kita bisa menggunakan tag <br>.

tag <br> juga merupakan tag kosong karena tidak memiliki tag akhir.

Contoh Program 4 : Menggunakan tag <br>

<!DOCTYPE html>
<html>
        <body>
                <p>Ini adalah <br> sebuah paragraf <br> dengan baris baru</p>
        </body>
</html>

Hasil Program 4

Hasil program 4 tag br

Penjelasan Program 4

Kode program 4 tag br
  • Di baris 1 <!DOCTYPE html> artinya kita membuat dokumen HTML5.
  • Baris 2 sampai baris 8, tag <html> adalah akar dari dokumen html.
  • Baris 4 sampai baris 6, tag <body> adalah tubuh dari dokumen html yang akan ditampilkan di browser.
  • Baris 5, tag <p> digunakan untuk membuat paragraf dan tag <br> digunakan untuk membuat jeda baris atau baris baru.

Masalah Pada Tag <p>

Ketika kita menggunakan tag <p> pada tulisan yang memerlukan banyak spasi atau banyak baris baru, hal itu akan diabaikan oleh browser.

Contoh Program 5 : Masalah tag <p>

<!DOCTYPE html>
<html>
        <body>
                
                <p>Dalam HTML, setiap baris baru dan spasi akan diabaikan:</p>
                
                <p>
                        
                       Ini hari minggu.
                       
                       Ini hari senin.
                       
                       Ini hari selasa.
                       
                       Ini hari rabu
                        
                </p>
                
        </body>
</html>

Hasil Program 5

hasil program 5 masalah tag <p>

Penjelasan Program 5

Contoh program 5 masalah paragraf html
  • Di baris 8 sampai baris 18, kita membuat teks dengan banyak baris baru namun hal itu akan diabaikan oleh browser.

Elemen HTML <pre>

Jika kita ingin mempertahankan baris baru dan spasi yang kita buat dalam kode HTML, kita bisa menggunakan tag <pre>. tag <pre> mendefinisikan sebuah pre formatted text.

Teks yang berada di dalam elemen <pre> ditampilkan menggunakan font dengan lebar tetap (biasanya Courier).

Contoh Program 6 : elemen <pre>

<!DOCTYPE html>
<html>
        <body>
                
                <p>Tag pre akan mempertahankan spasi dan baris baru:</p>
                
                <pre>
                        
                       Ini hari minggu.
                       
                       Ini hari senin.
                       
                       Ini hari selasa.
                       
                       Ini hari rabu
                        
                </pre>
                
        </body>
</html>

Hasil Program 6

contoh program 6 tag pre

Penjelasan Program 6

Kode program 6 tag pre
  • Di baris 8 sampai baris 18, kita menggunakan tag <pre> sehingga spasi dan baris baru yang telah kita buat akan ditampilkan apa adanya pada browser.

Referensi Tag HTML

Berikut adalah tabel tag yang telah kita pelajari.

Tag awal Deskripsi
<!DOCTYPE> Mendefinisikan tipe dari dokumen
<html> Mendefinisikan akar dari dokumen HTML
<body> Tubuh dari dokumen HTML yang tampil di browser
<h1> hingga <h6> Untuk membuat judul atau heading
<p> ini adalah tag paragraf
<a> Mendefinisikan sebuah hyperlink
<img> Mendefinisikan sebuah gambar
<br> tag ini digunakan untuk membuat baris baru
<hr> Digunakan untuk membuat garis horizontal
<pre> Membuat pre formatted text atau teks yang sudah di format

Itulah tutorial tentang paragraf HTML, semoga postingan kali ini dapat membantu kalian memahami tentang paragraf di HTML, sampai jumpa di artikel selanjutnya.

Posting Komentar untuk "Paragraf HTML | Tutorial HTML 7"