Tutoral 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 Tutoral 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 BAB 1 – Pengenalan HTML https://www.bisasoftware.id/2026/pengenalan-html/ https://www.bisasoftware.id/2026/pengenalan-html/#respond Sun, 21 Dec 2025 13:00:05 +0000 http://localhost/2026/?p=75 Indikator Materi :
1. Memahami Pengertian HTML
2. Memahami Sejarah singkat HTML
3. Memahami Fungsi HTML

Pengertian HTML
Pengertian HTML secara umum, HTML singkatan dari HyperText Markup Language, merupakan  bahasa markup yang digunakan untuk membangun dan menyusun struktur halaman web. HTML bukanlah termasuk ke dalam bahasa pemrograman, melainkan sebuah bahasa markup (tag) yang terdiri dari elemen-elemen untuk memberikan instruksi kepada browser tentang bagaimana konten harus ditampilkan.

Sejarah Singkat HTML
Sedikit menyinggung sejarahnya, bahwa HTML dimulai pada awal tahun 1990-an ketika Tim Berners-Lee, seorang ilmuwan komputer dari CERN (Organisasi Eropa untuk Riset Nuklir), mengembangkan sistem hiperteks untuk berbagi informasi di antara para peneliti. Sistem ini dikenal sebagai World Wide Web.

Pada tahun 1991, Tim Berners-Lee membuat versi pertama HTML yang disebut HTML 1.0. Ini adalah versi sederhana yang mendefinisikan elemen dasar seperti judul, paragraf, dan tautan hiperteks. Pada saat itu, HTML digunakan secara internal di CERN dan tidak banyak dikenal di luar komunitas akademik.

Pada tahun 1993, Marc Andreessen dan timnya di National Center for Supercomputing Applications (NCSA) merilis browser Mosaic yang mendukung HTML. Mosaic menjadi populer dan membantu meningkatkan kesadaran publik tentang World Wide Web. Versi HTML yang digunakan pada saat itu adalah HTML 2.0, yang memperkenalkan beberapa elemen dan atribut baru.

Pada tahun 1995, W3C (World Wide Web Consortium) dibentuk dengan tujuan mengembangkan standar web yang terbuka dan interoperabel. W3C merilis HTML 3.0, tetapi tidak banyak digunakan karena browser pada saat itu belum sepenuhnya mendukung spesifikasi baru.

Kemudian, pada tahun 1997, HTML 4.0 dirilis oleh W3C. Versi ini memperkenalkan fitur-fitur seperti gaya CSS (Cascading Style Sheets) dan skrip JavaScript. HTML 4.01 dirilis sebagai revisi kecil dari HTML 4.0.

Pada tahun 2008, WHATWG merilis spesifikasi HTML5, yang menggabungkan fitur-fitur baru seperti audio dan video, elemen semantik, dan kemampuan interaktif yang ditingkatkan. Kemudian HTML5 menjadi terkenal dan didukung oleh banyak browser modern.

Sejak itu, HTML terus berkembang dengan versi baru dan perbaikan. W3C dan WHATWG bekerja bersama untuk mengembangkan spesifikasi HTML Living Standard, yang merupakan spesifikasi utama HTML saat ini. Spesifikasi ini diperbarui secara berkala untuk mencakup fitur-fitur baru dan perubahan dalam teknologi web.

Fungsi HTML
Fungsi utama HTML adalah untuk mengatur tampilan dan struktur halaman web, serta menyematkan elemen-elemen lain seperti teks, gambar, audio, video, dan tautan.
Berikut adalah beberapa fungsi utama HTML:

  • Struktur halaman
    HTML digunakan untuk membangun struktur dasar halaman web. Dengan menggunakan elemen-elemen HTML seperti <html>, <head>, dan <body>, kamu dapat menentukan elemen-elemen yang ada di halaman dan bagaimana mereka terorganisir.
  • Penyemat konten
    HTML memungkinkan kamu menyematkan berbagai jenis konten ke dalam halaman web. Misalnya, kamu dapat menyematkan teks menggunakan elemen <p> (paragraf), <h1>–<h6> (heading), atau <span> (teks sejajar). kamu juga dapat menyematkan gambar menggunakan elemen <img>, audio menggunakan elemen <audio>, video menggunakan elemen <video>, dan sebagainya.
  • Pembuatan tautan
    HTML memiliki elemen <a> (anchor) yang digunakan untuk membuat tautan atau hyperlink. Kamu dapat menautkan halaman web ke halaman web lain, ke bagian tertentu di halaman yang sama, atau ke berkas-berkas lainnya.
  • Mengatur tampilan
    HTML juga dapat digunakan untuk mengatur tampilan halaman web. Kamu dapat menggunakan elemen-elemen HTML dan atribut-atributnya untuk memberikan gaya dan tata letak yang sesuai, seperti <div>, <span>, dan atribut style. Namun, untuk kontrol gaya yang lebih lanjut, biasanya CSS (Cascading Style Sheets) digunakan secara terpisah.
  • Semantik
    HTML memiliki elemen-elemen semantik yang memberikan arti dan struktur yang lebih bermakna pada konten. Beberapa elemen semantik yang umum digunakan adalah <header>, <nav>, <section>, <article>, <footer>, dan sebagainya. Penggunaan elemen semantik memperbaiki aksesibilitas dan membantu mesin pencari dalam memahami konten halaman.

TUGAS !
1. Tonton video di youtube tentang perbedaan html versi 4 atau lebih lama dengan html versi 5 !
2. Buat kesimpulan tentang perbedaan yang signifikan pada html versi 4 dengan versi 5 !

]]> https://www.bisasoftware.id/2026/pengenalan-html/feed/ 0