tutorial html – bisasoftware.id https://www.bisasoftware.id/2026 bisasoftware.id melayani dengan sepenuh hati Sat, 07 Mar 2026 04:39:19 +0000 id hourly 1 https://wordpress.org/?v=6.9.1 https://www.bisasoftware.id/2026/wp-content/uploads/2025/12/cropped-cropped-logo_bs-copy-32x32.png tutorial html – bisasoftware.id https://www.bisasoftware.id/2026 32 32 BAB 4 : Elemen Heading pada HTML https://www.bisasoftware.id/2026/bab-elemen-heading-pada-html/ https://www.bisasoftware.id/2026/bab-elemen-heading-pada-html/#respond Fri, 06 Mar 2026 04:35:53 +0000 https://www.bisasoftware.id/2026/?p=473 Pada pembelajaran kali ini, kita akan mengenal materi HTML – Elemen Heading yang biasanya digunakan untuk membuat sebuah judul situs atau judul artikel.

1. Pengertian Heading dalam HTML

Dalam pembuatan halaman web menggunakan HTML (HyperText Markup Language), heading merupakan elemen yang digunakan untuk menentukan judul atau subjudul pada sebuah halaman web.

Heading berfungsi untuk:

  • Menunjukkan struktur atau hierarki isi halaman
  • Mempermudah pembaca memahami bagian-bagian konten
  • Membantu mesin pencari (SEO) memahami topik halaman
  • Membuat tampilan halaman lebih terstruktur dan rapi

Secara default, teks yang menggunakan heading akan tampil lebih besar dan tebal dibandingkan teks biasa.

2. Jenis-Jenis Elemen Heading

HTML menyediakan 6 tingkat heading, yaitu dari h1 sampai h6.

Struktur dasarnya:

<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Sub Judul Level 3</h3>
<h4>Sub Judul Level 4</h4>
<h5>Sub Judul Level 5</h5>
<h6>Sub Judul Level 6</h6>

Penjelasan:

HeadingFungsi
h1Judul utama halaman
h2Subjudul utama
h3Subjudul dari h2
h4Subjudul dari h3
h5Subjudul dari h4
h6Subjudul paling kecil

Semakin besar angka heading, maka ukuran teks biasanya semakin kecil.

3. Contoh Penggunaan Heading

Contoh kode HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Heading HTML</title>
</head>
<body>

<h1>Belajar HTML</h1>
<h2>Pengenalan HTML</h2>
<h3>Sejarah HTML</h3>
<h2>Struktur Dasar HTML</h2>
<h3>Tag HTML</h3>

</body>
</html>

Hasil tampilan di browser kira-kira seperti berikut:

Belajar HTML
    Pengenalan HTML
        Sejarah HTML
    Struktur Dasar HTML
        Tag HTML

Heading membantu pembaca memahami tingkatan informasi dalam halaman web.

4. Hierarki Heading dalam HTML

Heading sebaiknya digunakan secara berurutan dan logis untuk membentuk struktur dokumen.

Contoh struktur yang benar:

h1  : Judul Halaman
 ├── h2 : Bab 1
 │     ├── h3 : Sub Bab
 │     └── h3 : Sub Bab
 ├── h2 : Bab 2
 │     ├── h3 : Sub Bab
 │     └── h3 : Sub Bab

Contoh penggunaan dalam HTML:

<h1>Belajar Pemrograman Web</h1>

<h2>HTML</h2>
<h3>Pengertian HTML</h3>
<h3>Struktur HTML</h3>

<h2>CSS</h2>
<h3>Pengertian CSS</h3>
<h3>Fungsi CSS</h3>

Dengan hierarki seperti ini, struktur halaman akan mudah dipahami oleh manusia maupun mesin pencari.

5. Perbedaan Heading dan Paragraf

Heading sering disalahgunakan untuk membuat teks besar. Padahal fungsi utamanya adalah judul.

Perbedaan:

ElemenFungsi
<h1> - <h6>Judul atau subjudul
<p>Paragraf atau isi teks

Contoh:

<h1>Belajar HTML</h1>

<p>
HTML adalah bahasa markup yang digunakan untuk membuat halaman website.
</p>

6. Aturan Penggunaan Heading yang Baik

Dalam praktik pengembangan web profesional, penggunaan heading harus memperhatikan beberapa aturan berikut:

1. Gunakan hanya satu <h1> dalam satu halaman

h1 sebaiknya digunakan sebagai judul utama halaman.

Contoh:

<h1>Belajar Pemrograman Web</h1>

2. Gunakan heading secara berurutan

Hindari langsung menggunakan h4 tanpa h2 atau h3.

Contoh yang benar:

h1
h2
h3

Contoh yang salah:

h1
h4

3. Gunakan heading untuk struktur, bukan untuk ukuran teks

Jika ingin mengubah ukuran teks, gunakan CSS, bukan heading.

Contoh:

<p style="font-size:30px;">Teks Besar</p>

7. Contoh Halaman Web Menggunakan Heading

Contoh halaman sederhana:

<!DOCTYPE html>
<html>
<head>
    <title>Website Sekolah</title>
</head>
<body>

<h1>SMA Negeri 1 Teknologi</h1>

<h2>Profil Sekolah</h2>
<p>Sekolah unggulan yang berfokus pada teknologi dan sains.</p>

<h2>Program Keahlian</h2>

<h3>Rekayasa Perangkat Lunak</h3>
<p>Belajar pemrograman dan pengembangan aplikasi.</p>

<h3>Teknik Jaringan Komputer</h3>
<p>Belajar jaringan komputer dan administrasi server.</p>

<h2>Kontak</h2>
<p>Email: info@sekolah.sch.id</p>

</body>
</html>

Struktur ini membuat halaman menjadi terorganisir dengan baik.

8. Manfaat Heading untuk SEO

Heading juga penting dalam Search Engine Optimization (SEO).

Mesin pencari seperti Google menggunakan heading untuk:

  • memahami topik halaman
  • mengetahui bagian penting konten
  • menentukan struktur artikel

Contoh struktur artikel SEO:

H1 : Judul Artikel
H2 : Subtopik
H3 : Penjelasan subtopik

Contoh:

H1 : Cara Belajar HTML untuk Pemula
H2 : Apa itu HTML
H2 : Struktur Dasar HTML
H2 : Contoh Program HTML

9. Kesimpulan

Elemen heading merupakan bagian penting dalam HTML yang berfungsi untuk memberikan judul dan mengatur struktur konten pada halaman web.

HTML menyediakan enam level heading yaitu:

<h1> sampai <h6>

Semakin kecil angka heading, semakin tinggi tingkatannya dalam struktur dokumen.

Penggunaan heading yang baik akan membuat:

  • halaman web lebih terstruktur
  • konten lebih mudah dipahami
  • halaman lebih ramah SEO

]]> https://www.bisasoftware.id/2026/bab-elemen-heading-pada-html/feed/ 0 BAB 3 – Atribut Pada HTML https://www.bisasoftware.id/2026/bab-3-atribut-pada-html/ https://www.bisasoftware.id/2026/bab-3-atribut-pada-html/#respond Thu, 25 Dec 2025 02:55:34 +0000 http://localhost/2026/?p=404 Indikator Materi :
1. Memahami atribut pada elemen HTML
2. Menerapkan Tag, Elemen dan Atribut pada HTML

Atribut menyediakan informasi tambahan tentang sebuah elemen HTML. Informasi ini bisa berupa:

  • Pengidentifikasi unik.
  • Sumber file (misalnya untuk gambar atau link).
  • Dimensi (lebar dan tinggi).
  • Petunjuk styling.
  • Dan banyak lagi, tergantung jenis elemennya.

Aturan Penulisan Atribut:

  1. Selalu Ditaruh di Tag Pembuka: Atribut hanya ditulis di dalam tag pembuka elemen, bukan di tag penutup.
  2. Format Pasangan nama="nilai": Setiap atribut terdiri dari dua bagian:
    • Nama Atribut: Menunjukkan jenis informasi yang mau kita kasih (misalnya id, class, src, href, style).
    • Nilai Atribut: Isi dari informasi tersebut, biasanya diapit oleh tanda kutip dua (" "). Tanda kutip satu (' ') juga bisa, tapi kutip dua lebih umum.
    • PENTING: Walaupun kadang browser bisa toleran kalau nilai atribut gak pake kutip (khususnya kalau nilainya satu kata tanpa spasi), sangat disarankan untuk SELALU menggunakan tanda kutip. Ini praktik terbaik biar kode lebih rapi, aman, dan menghindari error tak terduga.

      Contoh penulisan atribut pada elemen HTML :
      <p id=”paragraf1″>Ini paragraf dalam bahasa Indonesia.</p>
      <p class=”paragraf”>This is a paragraph in English.</p>
Contoh praktek bisa menggunakan platform code editor di bawah ini :

See the Pen project by deka wildan (@deka-wildan) on CodePen.

TUGAS !
1. Buatkan syntax html untuk menampilkan paragraf biodata diri dengan background warna kuning !
2. Buat kesimpulan untuk konten berupa paragraf dan non paragraf !

]]> https://www.bisasoftware.id/2026/bab-3-atribut-pada-html/feed/ 0 BAB 2 – Struktur Dasar HTML https://www.bisasoftware.id/2026/struktur-dasar-html-4-dan-5/ https://www.bisasoftware.id/2026/struktur-dasar-html-4-dan-5/#respond Mon, 22 Dec 2025 04:53:19 +0000 http://localhost/2026/?p=131 Indikator Materi :
1. Memahami bentuk struktur dasar HTML 4
2. Memahami bentuk struktur dasar HTML 5

Sebuah dokumen HTML biasanya dimulai dengan tag <html>, yang mengindikasikan bahwa ini adalah dokumen HTML. Di dalam tag <html>, terdapat dua bagian penting, yaitu <head> dan <body>.

Bagian <head> berisi informasi tentang dokumen, seperti judul, informasi meta, dan deskripsi lainnya. Sementara bagian <body> berisi konten yang akan ditampilkan di halaman web. Berikut struktur dasar dari HTML Versi 4 atau lama :

Sedangkan di versi HTML 5, terdapat perbedaan dengan versi sebelumnya, yaitu terdapat tambahan syntax <!DOCTYPE html>, <meta charset=”utf-8″> dan <meta name=”viewport” content=”width=device-width, initial-scale=1″> seperti berikut :

TUGAS !
1. Buatkan struktur dasar html 4 dengan isi konten adalah nama, jenis kelamin, tempat dan tanggal lahir anda menggunakan teks editor notepad !
2. Buatkan struktur dasar html 5 dengan isi konten adalah alamat, hobi, akun instagram dan cita-cita anda menggunakan teks editor notepad !

]]> https://www.bisasoftware.id/2026/struktur-dasar-html-4-dan-5/feed/ 0