Skip to content Skip to sidebar Skip to footer

Widget HTML #1

Home / HTML / Pemrograman / Tutorial

Belajar HTML #04 : Membuat Heading Text, Paragraph, List Item dan Komentar

Membuat Heading Text, Paragraph, List Item dan Komentar

Assalamualaikum wr wb, Halo temen-temen sekarang kita akan masuk ke pembejaran berikutnya pada artikel sebelumnya Belajar HTML #03 : Pengertian dan Struktur. Kita telah mempelajari tentang apa itu HTML dan Strukturnya. Pada artikel ini saya akan membahas Cara Membuat Heading Text, Paragraph, List Item dan Memberi Komentar di HTML.

1. Heading Text

Heading text atau teks heading adalah teks yang digunakan untuk menandakan bagian atau subjudul dalam sebuah halaman web, didalam HTML ada 6 level heading yang dapat digunakan, yaitu h1, h2, h3, h4, h5, dan h6.

  1. h1 adalah level heading utama atau judul utama dari halaman web.
  2. h2 adalah level heading kedua yang digunakan untuk subjudul dari h1.
  3. h3, h4, h5, dan h6 adalah level heading yang lebih kecil yang digunakan untuk sub-subjudul dari h2 dan seterusnya.

Heading memiliki format yang berbeda dari teks biasa, seperti ukuran font yang lebih besar dan Ketebalan yang berbeda.

Contohnya:

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Heading</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
  </body>
</html>
Lihat Preview

2. Paragraph

Di HTML, paragraf ditandai dengan tag <p>. Tag ini digunakan untuk menandai teks yang akan ditampilkan sebagai paragraf yang terpisah satu sama lain, dengan jarak spasi di atas dan di bawahnya.

Contohnya:

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Paragraph</title>
    </head>
       <body>
         <h1>Tentang Saya</h1>
            <p>Haii nama ku rizal ini Paragraph 1<p>
            <p>Aku Suka dengan Perkembangan teknologi ini Paragraph 2</p>
       </body>
</html>
Lihat Preview

3. List Item

HTML memiliki beberapa elemen yang digunakan untuk membuat daftar, di antaranya adalah:

  1. <ul> : digunakan untuk membuat daftar bullet (bulleted list). Elemen ini menampilkan setiap item daftar dengan tanda bullet (biasanya sebuah bullet point atau karakter bullet) di depan.

  2. <ol> : digunakan untuk membuat daftar yang diurutkan (ordered list). Elemen ini menampilkan setiap item daftar dengan nomor di depan.

  3. <li> : digunakan untuk menentukan setiap item dalam daftar. Elemen ini harus digunakan di dalam elemen <ul> atau <ol> .

Contohnya:

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh List Item</title>
  </head>
  <body>
    <h1>Contoh Menggunakan ul</h1>
    <ul>
      <li>Item pertama</li>
      <li>Item kedua</li>
      <li>Item ketiga</li>
    </ul>
    <h1>Contoh Menggunakan ol</h1>
    <ol>
      <li>Item pertama</li>
      <li>Item kedua</li>
      <li>Item ketiga</li>
    </ol>
  </body>
</html>
Lihat Preview

4. Komentar

Komentar di HTML adalah teks yang tidak akan ditampilkan dalam halaman web yang dihasilkan. Komentar digunakan untuk memberikan catatan atau dokumentasi tentang bagian tertentu dari kode HTML.

Komentar ditulis dengan menggunakan tag "<!--" dan "-->". Semua teks yang ditulis di antara kedua tag ini akan diabaikan oleh browser web dan tidak akan ditampilkan.

Contohnya:

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Komentar</title>
  </head>
  <body>
    <h1>Belajar HTML</h1>
    <!--Ini adalah judul-->
    <p>Haloo</p>
    <!--<p>Haloo</p>-->
  </body>
</html>
Lihat Preview

Cukup sekian pembahasan pada artikel kali ini, Jika ada pertanyaan silahkan kirim melalui kolom komentar di bawah.. Pada materi berikutnya kita akan belajar membuat Table di HTML, Terimakasih.