-->

Iklan bawah header

Belajar HTML Part 3 - Membuat Paragraf di HTML

Paragraf di html

Dalam tutorial kali ini kita akan belajar tentang elemen-elemen dasar pada HTML yang sering digunakan dalam membuat web. Sebelum itu, kamu diharapkan sudah memahami terlebih dahulu tentang apa itu Tag, Elemen, dan Atribut(jika belum, bisa kamu pelajari disini).

Pertama, mari kita mulai dengan mengenal elemen paragraf.

Cara Membuat Paragraf di HTML

Paragraf merupakan sekumpulan kalimat yang saling berhubungan. Pada HTML, biasanya tag paragraf digunakan untuk menampilkan teks atau artikel.

Kita akan menggunakan tag <p> untuk membuat paragraf pada HTML. Selain tag tersebut, juga ada tag pendukung lainnya seperti <div>, <br>, <hr> dan <pre>.

Untuk lebih jelasnya dalam membuat paragraf, lihat contoh berikut:


   <!DOCTYPE html>
<html>
    <head>
         <title>Belajar membuat paragraf di HTML</title>
    </head>
    <body>
          <p>paragraf merupakan sekumpulan kalimat yang saling berhubungan dan akan membentuk sebuah ide atau gagasan baru.</p>
          <p>ini adalah paragraf yang berisi serangkaian kalimat yang saling berkaitan dan bersama-sama menjelaskan satu ide gagasan pokok.</p>
    </body>
</html>

Saat kode diatas dijalankan pada web browser, kamu akan melihat hasilnya seperti ini:

Tampilan Paragraf html

  Tag Break (<br>)

Tag break ini sebenarnya bukanlah tag yang digunakan untuk membuat paragraf. Biasanya tag ini digunakan untuk membantu tag paragraf. Fungsi utama dari tag <br> ini adalah untuk membuat baris.

Contoh penggunaan tag <br>:


   <!DOCTYPE html>
<html>
    <head>
         <title>Contoh Penggunaan Tag Break</title>
    </head>
    <body>
          <p>Buah mangga di dalam peti<br />
                 Mangga dibeli di pasar pagi<br />
                 Cintaku ini bukan cinta terbeli<br />
                 Karena timbul di dasar hati</p>
    </body>
</html>

Hasilnya:

Tag br

Perhatikan contoh kode diatas, karena tag <br> merupakan tag yang tidak memiliki pasangan penutup maka untuk penulisannya kalian hanya tinggal menambahkan garis miring seperti ini <br />.

Tag Horizontal rule <hr>

Tag hr merupakan singkatan dari Horizontal rule yang digunakan untuk membuat garis horizontal. Biasanya digunakan untuk membagi atau memisahkan beberapa konten atau paragraf. Misalnya seperti, terdapat perubahan adegan dalam sebuah cerita atau memisahkan konten menjadi dua bagian dengan topik yang berbeda.

Tag <hr> juga termasuk dalam tag kosong yang tidak memerlukan tag penutup dalam penggunaannya.

Contoh:


 <!DOCTYPE html>
<html>
    <head>
         <title>Contoh Penggunaan Tag Horizontal rule</title>
    </head>
    <body>
           <p>paragraf merupakan sekumpulan kalimat yang saling berhubungan dan akan membentuk sebuah ide atau gagasan baru.</p>
           <hr />
          <p>ini adalah paragraf yang berisi serangkaian kalimat yang saling berkaitan dan bersama-sama menjelaskan satu ide gagasan pokok.</p>
    </body>
</html>

Hasilnya:

Tag hr

Tag <pre> untuk membuat Preformatted text

Tag <pre> merupakan tag yang digunakan untuk teks yang belum diformat. Artinya, jika teks yang kita buat lalu diinput dalam tag <pre>, maka hasilnya akan ditampilkan sesuai dengan apa yang kita inputkan. atau dengan kata lain teks atau paragraf akan ditampilkan dalam format yang sudah kita tentukan di HTML.

Untuk lebih jelasnya lihat kode berikut:


   <!DOCTYPE html>
<html>
    <head>
         <title>Contoh Penggunaan Tag Preformatted text</title>
    </head>
    <body>
           <pre>Dengan kata lain teks akan ditampilkan                  dalam format yang sudah     
                      y      ang sudah ditentukan di HTML </pre>
    </body>
    </body>
</html>

Hasilnya:

Tag pre

Coba perhatikan contoh diatas, spasi akan tetap ditampilkan sesuai dengan format yang telah kita tulis disana. Tag ini menggunakan font monospace yang memiliki panjang karakter yang sama dalam setiap hurufnya.

Tag <div>

div atau division (divisi atau bagian ) merupakan blok konten yang dapat digunakan sebagai kontainer untuk mengelompokan atau meng-groupkan beberapa elemen menjadi satu. Tag <div> ini dapat kita gunakan sebagai wadah untuk menempatkan beberapa elemen menjadi satu bagian, dalam penggunaan tag ini ditujukan untuk mempermudah aplikasi style dengan CSS dan juga perlakuan khusus lainnya yang selanjutnya dapat diberi dengan berbagai aribut seperti  class, id, title dan lainnya.

Contoh:


   <!DOCTYPE html>
<html>
    <head>
         <title>Contoh Penggunaan Tag Div</title>
    </head>
    <body>
           <div id="header">
                <h1>Judul</h1>
                <img src="gambar_logo.jpg" />
           </div>

           <div id="menu">
                <ul>
                    <li><a href="#">Beranda</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
           </div>
           <div id="content">
                <div id="article_1">
                    <p>...isilah dengan artikel....</p>
                </div>
           </div>

           <div id="sidebar">
                <h1>Artikel Terbaru</h1>
                    <ul>
                        <li><a href="#">LINK 1</a></li>
                        <li><a href="#">LINK 2</a></li>
                        <li><a href="#">LINK 3</a></li>
                    </ul>
           </div>

           <div id="footer">
                <p>Footer-Copyright Offaweb 2020</p>
           </div>
    </body>
</html>

Hasilnya:

Tag div

Selanjutnya

Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel