Tutoral HTML – bisasoftware.id https://www.bisasoftware.id/2026 bisasoftware.id melayani dengan sepenuh hati Sat, 09 May 2026 10:16:43 +0000 id hourly 1 https://wordpress.org/?v=7.0.4 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 12 : FORM HTML https://www.bisasoftware.id/2026/bab-12-form-html/ https://www.bisasoftware.id/2026/bab-12-form-html/#respond Sat, 09 May 2026 10:16:43 +0000 https://www.bisasoftware.id/2026/?p=494 1. Pengertian Form HTML

Form HTML adalah elemen yang digunakan untuk menerima input data dari pengguna.

Form merupakan bagian paling penting dalam aplikasi web karena digunakan untuk:

  • Login
  • Registrasi
  • Pencarian
  • Kontak
  • Pemesanan
  • Input data ke database

Tanpa form, website hanya dapat menampilkan informasi, tetapi tidak dapat menerima data dari pengguna.

2. Tag Dasar Form

<form>
    <!-- elemen input -->
</form>

Tag <form> berfungsi sebagai wadah untuk seluruh komponen input.

3. Struktur Dasar Form

<form>
    <label>Nama:</label><br>
    <input type="text"><br><br>

    <button type="submit">Kirim</button>
</form>

4. Atribut Penting pada <form>

AtributFungsi
actionMenentukan file tujuan saat form dikirim
methodMetode pengiriman data (GET atau POST)
autocompleteMengaktifkan/menonaktifkan autofill
enctypeDigunakan saat upload file

4.1 Contoh Form dengan Action dan Method

<form action="proses.php" method="post">

5. Elemen-Elemen Form

HTML menyediakan banyak jenis input.

5.1 Text

<input type="text">

Digunakan untuk teks biasa.

5.2 Password

<input type="password">

5.3 Email

<input type="email">

5.4 Number

<input type="number">

5.5 Date

<input type="date">

5.6 File Upload

<input type="file">

5.7 Hidden

<input type="hidden" name="id" value="123">

6. Radio Button

Digunakan untuk memilih satu opsi.

<input type="radio" name="jk" value="L"> Laki-laki
<input type="radio" name="jk" value="P"> Perempuan

Semua radio dalam satu grup harus memiliki name yang sama.

7. Checkbox

Digunakan untuk memilih lebih dari satu opsi.

<input type="checkbox" name="hobi[]" value="Membaca"> Membaca
<input type="checkbox" name="hobi[]" value="Coding"> Coding

8. Textarea

Digunakan untuk teks panjang.

<textarea rows="4" cols="50"></textarea>

9. Select Option

<select>
    <option>RPL</option>
    <option>TKJ</option>
    <option>DKV</option>
</select>

10. Button

<button type="submit">Simpan</button>
<button type="reset">Reset</button>
<button type="button">Klik</button>

11. Label

<label for="nama">Nama</label>
<input type="text" id="nama">

Manfaat:

  • Memudahkan pengguna
  • Accessibility lebih baik

12. Placeholder dan Value

<input type="text" placeholder="Masukkan nama">
<input type="text" value="Andi">

13. Required

<input type="text" required>

Mencegah form dikirim jika kosong.

14. Readonly dan Disabled

<input type="text" value="Data" readonly>
<input type="text" disabled>

15. Fieldset dan Legend

<fieldset>
    <legend>Data Pribadi</legend>
    <input type="text">
</fieldset>

16. Studi Kasus Nyata : Form Pendaftaran Siswa

<!DOCTYPE html>
<html>
<head>
    <title>Form Pendaftaran</title>
</head>
<body>

<h1>Form Pendaftaran Siswa</h1>

<form action="proses.php" method="post">

    <label for="nama">Nama Lengkap</label><br>
    <input type="text" id="nama" name="nama" required><br><br>

    <label for="email">Email</label><br>
    <input type="email" id="email" name="email" required><br><br>

    <label>Jenis Kelamin</label><br>
    <input type="radio" name="jk" value="L"> Laki-laki
    <input type="radio" name="jk" value="P"> Perempuan
    <br><br>

    <label for="jurusan">Jurusan</label><br>
    <select id="jurusan" name="jurusan">
        <option value="">-- Pilih Jurusan --</option>
        <option value="RPL">RPL</option>
        <option value="TKJ">TKJ</option>
        <option value="DKV">DKV</option>
    </select><br><br>

    <label for="alamat">Alamat</label><br>
    <textarea id="alamat" name="alamat" rows="4"></textarea><br><br>

    <button type="submit">Daftar</button>
    <button type="reset">Reset</button>

</form>

</body>
</html>

17. Method GET vs POST

MethodKarakteristik
GETData tampil di URL
POSTData tersembunyi dan lebih aman

Contoh:

<form method="post">

πŸ‘‰ Rekomendasi untuk form penting: gunakan POST.

18. Upload File

<form enctype="multipart/form-data">
    <input type="file" name="foto">
</form>

19. Best Practice Industri

βœ” Selalu gunakan label

βœ” Gunakan name pada semua input

βœ” Gunakan required

βœ” Gunakan method=\"post\"

βœ” Gunakan placeholder seperlunya

βœ” Kelompokkan dengan fieldset

20. Kesalahan Umum Siswa

❌ Tidak memberi atribut name

Data tidak akan terkirim.

❌ Tidak menggunakan label

❌ Salah method

❌ Tidak menambahkan enctype saat upload file

21. Debugging Form

Jika form tidak bekerja:

  1. Periksa atribut name.
  2. Periksa action.
  3. Periksa method.
  4. Periksa required.
  5. Cek Developer Tools.

22. Contoh Form Login

<form action="login.php" method="post">

    <label>Username</label><br>
    <input type="text" name="username" required><br><br>

    <label>Password</label><br>
    <input type="password" name="password" required><br><br>

    <button type="submit">Login</button>

</form>

23. Latihan Siswa

Latihan 1

Buat form login.

Latihan 2

Buat form kontak.

Latihan 3

Buat form pendaftaran lengkap.

24. Mini Project

🎯 β€œForm Pendaftaran Siswa Baru”

Fitur:

  • Text input
  • Email
  • Radio
  • Select
  • Textarea
  • File upload
  • Submit & Reset

25. Kesimpulan

Form HTML adalah fondasi aplikasi web interaktif.

Tag utama:

<form>
<input>
<textarea>
<select>
<button>

]]> https://www.bisasoftware.id/2026/bab-12-form-html/feed/ 0 BAB 11 : ELEMEN AUDIO DAN VIDEO DALAM HTML https://www.bisasoftware.id/2026/bab-11-elemen-audio-dan-video-dalam-html/ https://www.bisasoftware.id/2026/bab-11-elemen-audio-dan-video-dalam-html/#respond Sat, 09 May 2026 10:13:35 +0000 https://www.bisasoftware.id/2026/?p=492 1. Pengertian Elemen Multimedia

Multimedia adalah kombinasi berbagai jenis media digital, seperti:

  • Teks
  • Gambar
  • Audio (suara)
  • Video (gambar bergerak)

HTML menyediakan elemen khusus untuk menampilkan audio dan video secara langsung di browser, yaitu:

  • <audio> untuk suara
  • <video> untuk video

Dengan elemen ini, kita tidak perlu lagi menggunakan plugin tambahan seperti Adobe Flash (yang kini sudah tidak digunakan).

2. Manfaat Audio dan Video pada Website

Audio dan video banyak digunakan pada berbagai jenis website, seperti:

  • Website pembelajaran online
  • Profil perusahaan
  • Website berita
  • Website sekolah
  • Podcast
  • Streaming video
  • Landing page produk

Contoh penggunaan nyata:

  • Guru menyisipkan rekaman penjelasan materi.
  • Sekolah menampilkan video profil.
  • Perusahaan memutar video promosi.
  • Toko online menampilkan video review produk.

3. Elemen Audio HTML

3.1 Pengertian Tag <audio>

Tag <audio> digunakan untuk menampilkan file suara yang dapat diputar langsung di browser.

Sintaks Dasar

<audio controls>
    <source src="audio/lagu.mp3" type="audio/mpeg">
</audio>

3.2 Atribut Penting pada Audio

AtributFungsi
controlsMenampilkan tombol play/pause
autoplayMemutar otomatis
loopMengulang terus
mutedAudio dimulai tanpa suara
preloadMengatur pemuatan file

3.3 Contoh Audio Sederhana

<audio controls>
    <source src="assets/audio/lagu.mp3" type="audio/mpeg">
    Browser Anda tidak mendukung audio.
</audio>

3.4 Contoh Audio dengan Loop

<audio controls loop>
    <source src="assets/audio/background.mp3" type="audio/mpeg">
</audio>

3.5 Contoh Audio Autoplay (Muted)

<audio autoplay muted controls>
    <source src="assets/audio/pembuka.mp3" type="audio/mpeg">
</audio>

Catatan: Banyak browser hanya mengizinkan autoplay jika audio dalam keadaan muted.

4. Elemen Video HTML

4.1 Pengertian Tag <video>

Tag <video> digunakan untuk menampilkan file video secara langsung di browser.

Sintaks Dasar

<video controls width="640">
    <source src="assets/video/profil-sekolah.mp4" type="video/mp4">
</video>

4.2 Atribut Penting pada Video

AtributFungsi
controlsMenampilkan kontrol video
widthLebar video
heightTinggi video
autoplayMemutar otomatis
loopMengulang video
mutedVideo tanpa suara
posterGambar thumbnail sebelum diputar

4.3 Contoh Video Sederhana

<video controls width="500">
    <source src="assets/video/tutorial.mp4" type="video/mp4">
    Browser Anda tidak mendukung video.
</video>

4.4 Contoh Video dengan Poster

<video controls width="600" poster="assets/img/thumbnail.jpg">
    <source src="assets/video/company-profile.mp4" type="video/mp4">
</video>

4.5 Contoh Video Autoplay Loop

<video autoplay muted loop width="600">
    <source src="assets/video/banner.mp4" type="video/mp4">
</video>

5. Struktur Folder Assets untuk Multimedia

Struktur folder yang disarankan:

project/
β”œβ”€β”€ index.html
└── assets/
    β”œβ”€β”€ audio/
    β”‚   └── lagu.mp3
    β”œβ”€β”€ video/
    β”‚   └── profil.mp4
    └── img/
        └── thumbnail.jpg

Contoh pemanggilan:

<audio controls>
    <source src="assets/audio/lagu.mp3" type="audio/mpeg">
</audio>

<video controls width="640">
    <source src="assets/video/profil.mp4" type="video/mp4">
</video>

6. Format File yang Didukung

Audio

  • MP3 (audio/mpeg)
  • OGG (audio/ogg)
  • WAV (audio/wav)

Video

  • MP4 (video/mp4)
  • WebM (video/webm)
  • OGG (video/ogg)

Rekomendasi industri:

  • Audio: MP3
  • Video: MP4 (H.264)

7. Menyediakan Beberapa Format Sekaligus

Audio

<audio controls>
    <source src="audio/lagu.mp3" type="audio/mpeg">
    <source src="audio/lagu.ogg" type="audio/ogg">
    Browser Anda tidak mendukung audio.
</audio>

Video

<video controls width="640">
    <source src="video/tutorial.mp4" type="video/mp4">
    <source src="video/tutorial.webm" type="video/webm">
    Browser Anda tidak mendukung video.
</video>

8. Studi Kasus Nyata

8.1 Website Sekolah

<h2>Sambutan Kepala Sekolah</h2>

<audio controls>
    <source src="assets/audio/sambutan.mp3" type="audio/mpeg">
</audio>

<h2>Video Profil Sekolah</h2>

<video controls width="700" poster="assets/img/sekolah.jpg">
    <source src="assets/video/profil-sekolah.mp4" type="video/mp4">
</video>

8.2 Website Pembelajaran

<h2>Materi Listening Bahasa Inggris</h2>

<audio controls>
    <source src="assets/audio/listening.mp3" type="audio/mpeg">
</audio>

<h2>Video Penjelasan Materi</h2>

<video controls width="600">
    <source src="assets/video/penjelasan.mp4" type="video/mp4">
</video>

9. Best Practice Industri

βœ” Gunakan folder assets/audio dan assets/video

βœ” Kompres file multimedia

  • Audio < 5 MB
  • Video secukupnya agar cepat dimuat

βœ” Gunakan atribut poster pada video

βœ” Sertakan teks cadangan

Browser Anda tidak mendukung video.

βœ” Hindari autoplay dengan suara

10. Kesalahan Umum Siswa

❌ Salah path file

<source src="video.mp4">

Padahal file ada di:

assets/video/video.mp4

❌ Tidak menggunakan controls

Akibatnya pengguna tidak dapat memutar media.

❌ Format file tidak didukung

❌ Ukuran file terlalu besar

Website menjadi lambat.

11. Debugging Multimedia

Jika audio/video tidak tampil:

  1. Periksa path file.
  2. Periksa ekstensi file.
  3. Pastikan browser mendukung format tersebut.
  4. Buka Developer Tools β†’ Console.

12. Contoh Program Lengkap

<!DOCTYPE html>
<html>
<head>
    <title>Multimedia HTML</title>
</head>
<body>

<h1>Website Multimedia Sekolah</h1>

<h2>Audio Sambutan</h2>
<audio controls>
    <source src="assets/audio/sambutan.mp3" type="audio/mpeg">
    Browser Anda tidak mendukung audio.
</audio>

<h2>Video Profil Sekolah</h2>
<video controls width="700" poster="assets/img/thumbnail.jpg">
    <source src="assets/video/profil.mp4" type="video/mp4">
    Browser Anda tidak mendukung video.
</video>

</body>
</html>

13. Latihan Siswa

Latihan 1

Tampilkan satu file audio dengan controls.

Latihan 2

Tampilkan satu file video dengan poster.

Latihan 3

Buat halaman multimedia sekolah yang berisi audio dan video.

14. Mini Project

🎯 β€œWebsite Profil Sekolah Multimedia”

Fitur:

  • Logo sekolah
  • Audio sambutan kepala sekolah
  • Video profil sekolah
  • Navigasi antar halaman

15. Kesimpulan

HTML menyediakan elemen multimedia:

  • <audio> untuk suara
  • <video> untuk video

Elemen ini membuat website lebih interaktif, menarik, dan profesional.

]]> https://www.bisasoftware.id/2026/bab-11-elemen-audio-dan-video-dalam-html/feed/ 0 BAB 10 : TABLE (TABEL) DALAM HTML https://www.bisasoftware.id/2026/bab-10-table-tabel-dalam-html/ https://www.bisasoftware.id/2026/bab-10-table-tabel-dalam-html/#respond Fri, 08 May 2026 01:29:20 +0000 https://www.bisasoftware.id/2026/?p=490 1. Pengertian Table

Table (tabel) dalam HTML digunakan untuk menampilkan data dalam bentuk:

  • Baris
  • Kolom

Tabel sangat sering digunakan pada:

  • Data siswa
  • Data produk
  • Jadwal pelajaran
  • Laporan
  • Dashboard admin

2. Struktur Dasar Table HTML

HTML menyediakan beberapa tag utama untuk membuat tabel.

TagFungsi
<table>Membuat tabel
<tr>Baris tabel
<th>Judul kolom
<td>Isi data

3. Contoh Tabel Dasar

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Kelas</th>
    </tr>

    <tr>
        <td>Andi</td>
        <td>X RPL</td>
    </tr>
</table>

4. Penjelasan Struktur

4.1 <table>

Tag utama pembungkus tabel.

<table>
</table>

4.2 <tr> (Table Row)

Digunakan untuk membuat baris.

<tr>
</tr>

4.3 <th> (Table Header)

Digunakan untuk judul kolom.

<th>Nama</th>

πŸ‘‰ Secara default:

  • Tebal
  • Tengah

4.4 <td> (Table Data)

Digunakan untuk isi data.

<td>Andi</td>

5. Studi Kasus Nyata : DATA SISWA

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Data Siswa</title>
</head>
<body>

<h1>Data Siswa X RPL</h1>

<table border="1">

<tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kelas</th>
    <th>Jurusan</th>
</tr>

<tr>
    <td>1</td>
    <td>Andi</td>
    <td>X</td>
    <td>RPL</td>
</tr>

<tr>
    <td>2</td>
    <td>Budi</td>
    <td>X</td>
    <td>RPL</td>
</tr>

<tr>
    <td>3</td>
    <td>Citra</td>
    <td>X</td>
    <td>RPL</td>
</tr>

</table>

</body>
</html>

πŸ‘‰ Ini adalah contoh real yang sering digunakan di:

  • Sistem sekolah
  • Aplikasi absensi
  • Dashboard admin

6. Studi Kasus Produk Toko Online

<h1>Daftar Produk</h1>

<table border="1">

<tr>
    <th>Produk</th>
    <th>Harga</th>
    <th>Stok</th>
</tr>

<tr>
    <td>Laptop</td>
    <td>Rp7.000.000</td>
    <td>10</td>
</tr>

<tr>
    <td>Mouse</td>
    <td>Rp150.000</td>
    <td>25</td>
</tr>

</table>

πŸ‘‰ Ini contoh real e-commerce.

7. Atribut Penting pada Table

7.1 Border

<table border="1">

Menampilkan garis tabel.

7.2 Width

<table width="100%">

Mengatur lebar tabel.

7.3 Cellpadding

<table cellpadding="10">

Memberi jarak dalam sel.

7.4 Cellspacing

<table cellspacing="0">

Mengatur jarak antar sel.

8. Menggabungkan Kolom dan Baris

8.1 Colspan

Menggabungkan kolom.

<td colspan="2">Gabung Kolom</td>

Contoh:

<table border="1">

<tr>
    <th colspan="2">Data Siswa</th>
</tr>

<tr>
    <td>Andi</td>
    <td>X RPL</td>
</tr>

</table>

8.2 Rowspan

Menggabungkan baris.

<td rowspan="2">RPL</td>

9. Table dengan Gambar

Contoh Produk:

<table border="1">

<tr>
    <th>Foto</th>
    <th>Produk</th>
</tr>

<tr>
    <td>
        <img src="assets/img/laptop.jpg" width="100">
    </td>

    <td>Laptop Gaming</td>
</tr>

</table>

πŸ‘‰ Ini mulai mendekati website nyata πŸ”₯

10. TABLE + LINK

<td>
    <a href="detail.html">Detail</a>
</td>

πŸ‘‰ Digunakan di dashboard admin.

11. BEST PRACTICE INDUSTRI

βœ” Gunakan tabel hanya untuk data

❌ Jangan untuk layout website

βœ” Gunakan <th> untuk header

βœ” Gunakan data yang rapi

βœ” Gunakan CSS untuk desain modern

12. KESALAHAN UMUM SISWA

❌ Salah jumlah kolom

<tr>
    <td>Andi</td>
</tr>

Padahal header ada 3 kolom.

❌ Tidak menutup tag

<td>Andi

❌ Tabel terlalu berantakan

13. DEBUGGING TABLE

Jika tabel rusak:

  1. Cek jumlah kolom
  2. Cek tag ditutup
  3. Cek colspan/rowspan
  4. Rapikan indentasi

14. Contoh Program Lengkap (REAL PROJECT)

🎯 Sistem Data Siswa

<!DOCTYPE html>
<html>
<head>
    <title>Data Siswa</title>
</head>

<body>

<h1>Data Siswa SMK</h1>

<table border="1" cellpadding="10" cellspacing="0">

<tr>
    <th>No</th>
    <th>Foto</th>
    <th>Nama</th>
    <th>Kelas</th>
    <th>Aksi</th>
</tr>

<tr>
    <td>1</td>

    <td>
        <img src="assets/img/siswa1.jpg" width="80">
    </td>

    <td>Andi</td>
    <td>X RPL</td>

    <td>
        <a href="detail.html">Detail</a>
    </td>
</tr>

<tr>
    <td>2</td>

    <td>
        <img src="assets/img/siswa2.jpg" width="80">
    </td>

    <td>Budi</td>
    <td>X RPL</td>

    <td>
        <a href="detail.html">Detail</a>
    </td>
</tr>

</table>

</body>
</html>

15. LATIHAN SISWA

Latihan 1

Buat tabel:

  • Nama
  • Kelas
  • Jurusan

Latihan 2

Buat tabel produk:

  • Foto
  • Nama produk
  • Harga

Latihan 3

Gunakan:

  • colspan
  • rowspan

16. MINI PROJECT

🎯 β€œDashboard Data Siswa”

Fitur:

  • Tabel siswa
  • Foto siswa
  • Link detail
  • Border rapi
  • Minimal 5 data

17. KESIMPULAN

Table HTML digunakan untuk:

  • Menampilkan data terstruktur
  • Membuat dashboard
  • Menampilkan data siswa/produk

Tag utama:

<table>
<tr>
<th>
<td>
]]> https://www.bisasoftware.id/2026/bab-10-table-tabel-dalam-html/feed/ 0 BAB 9 : GAMBAR HTML & MANAJEMEN FOLDER ASSETS https://www.bisasoftware.id/2026/bab-9-gambar-html-manajemen-folder-assets/ https://www.bisasoftware.id/2026/bab-9-gambar-html-manajemen-folder-assets/#respond Sun, 03 May 2026 01:15:59 +0000 https://www.bisasoftware.id/2026/?p=487 1. Pengertian Gambar dalam HTML

Gambar digunakan untuk:

  • Memperjelas informasi
  • Menarik perhatian pengguna
  • Membuat tampilan website lebih profesional

Tag yang digunakan:

<img src="gambar.jpg" alt="deskripsi gambar">

2. Struktur Tag <img>

<img src="lokasi_gambar" alt="deskripsi">

Penjelasan:

AtributFungsi
srclokasi file gambar
altdeskripsi gambar
widthlebar
heighttinggi

3. Contoh Dasar

<img src="gambar.jpg" alt="Pemandangan">

4. Atribut Penting pada Gambar

4.1 Alt (WAJIB di industri)

<img src="logo.png" alt="Logo Sekolah">

Fungsi:

  • SEO
  • Accessibility (screen reader)
  • Jika gambar gagal load

4.2 Width & Height

<img src="foto.jpg" width="200">

4.3 Style (CSS)

<img src="foto.jpg" style="border-radius:10px;">

5. FORMAT GAMBAR YANG DIDUKUNG

FormatKegunaan
JPGfoto
PNGtransparan
GIFanimasi
SVGvector

6. FOLDER ASSETS (WAJIB INDUSTRI πŸ”₯)

6.1 Pengertian

Assets adalah folder untuk menyimpan:

  • Gambar
  • CSS
  • JavaScript

6.2 Struktur Folder Standar

project/
β”‚
β”œβ”€β”€ index.html
β”œβ”€β”€ profil.html
β”‚
β”œβ”€β”€ assets/
β”‚   β”œβ”€β”€ img/
β”‚   β”‚   β”œβ”€β”€ logo.png
β”‚   β”‚   β”œβ”€β”€ banner.jpg
β”‚   β”‚
β”‚   β”œβ”€β”€ css/
β”‚   └── js/

6.3 Kenapa Harus Pakai Assets?

βœ” Rapi
βœ” Mudah dikelola
βœ” Standar industri
βœ” Siap dikembangkan ke framework

7. MENGAMBIL GAMBAR DARI FOLDER

7.1 Contoh

<img src="assets/img/logo.png" alt="Logo">

7.2 Jika dari folder berbeda

<img src="../assets/img/logo.png">

πŸ‘‰ .. = naik folder

8. STUDI KASUS UTAMA (WEBSITE REAL πŸ”₯)

🎯 Kasus: Website Sekolah

Struktur:

sekolah/
β”œβ”€β”€ index.html
β”œβ”€β”€ profil.html
β”‚
β”œβ”€β”€ assets/
β”‚   └── img/
β”‚       β”œβ”€β”€ sekolah.jpg
β”‚       β”œβ”€β”€ siswa.jpg
β”‚       β”œβ”€β”€ logo.png

8.1 index.html

<h1>SMK Teknologi</h1>

<img src="assets/img/logo.png" alt="Logo Sekolah" width="100">

<p>Selamat datang di website sekolah.</p>

<img src="assets/img/sekolah.jpg" alt="Gedung Sekolah" width="400">

8.2 profil.html

<h1>Profil Sekolah</h1>

<a href="index.html">Kembali</a>

<img src="assets/img/siswa.jpg" alt="Siswa belajar" width="400">

<p>Sekolah berbasis teknologi modern.</p>

πŸ‘‰ Ini sudah website real sederhana + gambar nyata

9. GAMBAR SEBAGAI LINK

Contoh:

<a href="profil.html">
    <img src="assets/img/logo.png" alt="Logo">
</a>

πŸ‘‰ Klik gambar β†’ pindah halaman

10. BEST PRACTICE INDUSTRI

βœ” Gunakan folder assets

βœ” Gunakan nama file jelas

logo-sekolah.png

βœ” Gunakan alt yang deskriptif

❌ Salah:

alt="gambar"

βœ” Benar:

alt="Gedung SMK Teknologi"

βœ” Optimasi ukuran gambar

πŸ‘‰ Jangan upload gambar 5MB

11. KESALAHAN UMUM SISWA

❌ Gambar tidak muncul

Penyebab:

  • Salah path
  • Nama file salah
  • Huruf besar/kecil beda

❌ Tidak pakai alt

❌ File berantakan (tidak pakai folder)

12. DEBUGGING GAMBAR

Jika gambar tidak tampil:

  1. Cek path
  2. Cek folder
  3. Cek nama file
  4. Inspect β†’ lihat error

13. LATIHAN SISWA

Latihan 1

Tampilkan 3 gambar dari folder

Latihan 2

Buat gambar sebagai link

Latihan 3

Gunakan alt + width

14. MINI PROJECT

🎯 β€œWEBSITE PROFIL SEKOLAH REAL”

Fitur:

  • Navbar
  • Gambar logo
  • Banner sekolah
  • Halaman profil
  • Semua gambar dari folder assets

15. KESIMPULAN

Gambar + assets adalah kunci untuk:

  • Website terlihat profesional
  • Struktur project rapi
  • Siap ke level berikutnya (CSS, framework)

Tag utama:

<img src="" alt="">
]]> https://www.bisasoftware.id/2026/bab-9-gambar-html-manajemen-folder-assets/feed/ 0 BAB 8 : LINK (HYPERLINK) DALAM HTML https://www.bisasoftware.id/2026/bab-8-link-hyperlink-dalam-html/ https://www.bisasoftware.id/2026/bab-8-link-hyperlink-dalam-html/#respond Sun, 03 May 2026 01:12:09 +0000 https://www.bisasoftware.id/2026/?p=485 1. Pengertian Link

Link (Hyperlink) adalah elemen HTML yang digunakan untuk:

  • Berpindah dari satu halaman ke halaman lain
  • Menghubungkan antar file
  • Mengakses website lain

Tag yang digunakan:

<a href="tujuan">Teks Link</a>

πŸ‘‰ <a> = anchor (jangkar)

2. Struktur Dasar Link

<a href="https://www.google.com">Kunjungi Google</a>

Penjelasan:

  • href β†’ tujuan link
  • Isi tag β†’ teks yang diklik

3. Jenis-Jenis Link

3.1 Link Eksternal

Menuju website lain:

<a href="https://www.google.com">Google</a>

3.2 Link Internal (PENTING πŸ”₯)

Digunakan untuk menghubungkan antar halaman dalam satu website

<a href="profil.html">Profil</a>

πŸ‘‰ Ini yang digunakan untuk membuat website multi halaman

3.3 Link dalam Halaman (Anchor)

<a href="#kontak">Ke Kontak</a>

<h2 id="kontak">Kontak</h2>

3.4 Link Email

<a href="mailto:admin@email.com">Kirim Email</a>

3.5 Link Telepon

<a href="tel:08123456789">Hubungi</a>

4. Atribut Penting pada Link

4.1 target=”_blank”

Membuka di tab baru:

<a href="https://google.com" target="_blank">Buka</a>

4.2 title

Tooltip saat hover:

<a href="profil.html" title="Lihat profil">Profil</a>

5. STRUKTUR FOLDER WEBSITE (WAJIB PAHAM πŸ”₯)

Ini yang membedakan pemula vs siap industri.

5.1 Contoh Struktur

website/
β”‚
β”œβ”€β”€ index.html
β”œβ”€β”€ profil.html
β”œβ”€β”€ kontak.html
β”‚
β”œβ”€β”€ assets/
β”‚   β”œβ”€β”€ css/
β”‚   β”œβ”€β”€ img/
β”‚   └── js/

5.2 Penjelasan

FileFungsi
index.htmlHalaman utama
profil.htmlHalaman profil
kontak.htmlHalaman kontak

6. CARA MENGHUBUNGKAN HALAMAN

6.1 Dari index ke profil

<a href="profil.html">Profil</a>

6.2 Dari profil ke index

<a href="index.html">Home</a>

6.3 Navigasi Lengkap

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="profil.html">Profil</a></li>
    <li><a href="kontak.html">Kontak</a></li>
</ul>

πŸ‘‰ Ini adalah navbar website nyata

7. RELATIVE PATH vs ABSOLUTE PATH

7.1 Relative Path (WAJIB DIGUNAKAN)

<a href="profil.html">Profil</a>

πŸ‘‰ Digunakan dalam project lokal

7.2 Absolute Path

<a href="https://example.com/profil.html">Profil</a>

πŸ‘‰ Digunakan untuk link luar

7.3 Folder Path

Jika file di dalam folder:

<a href="assets/img/gambar.jpg">Gambar</a>

Jika naik folder:

<a href="../index.html">Kembali</a>

πŸ‘‰ .. = naik satu folder

8. STUDI KASUS UTAMA (WEBSITE MULTI HALAMAN)

🎯 Kasus: Website Sekolah

Struktur:

sekolah/
β”œβ”€β”€ index.html
β”œβ”€β”€ profil.html
β”œβ”€β”€ kontak.html

8.1 index.html

<h1>Website Sekolah</h1>

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="profil.html">Profil</a></li>
    <li><a href="kontak.html">Kontak</a></li>
</ul>

<p>Selamat datang di website sekolah.</p>

8.2 profil.html

<h1>Profil Sekolah</h1>

<a href="index.html">Kembali ke Home</a>

<p>Sekolah unggulan di bidang teknologi.</p>

8.3 kontak.html

<h1>Kontak</h1>

<a href="index.html">Kembali ke Home</a>

<p>Email: sekolah@email.com</p>

πŸ‘‰ Ini sudah menjadi website sederhana multi halaman πŸ”₯

9. BEST PRACTICE INDUSTRI

βœ” Gunakan struktur folder rapi

βœ” Gunakan relative path

βœ” Gunakan navbar di semua halaman

βœ” Gunakan nama file konsisten

10. KESALAHAN UMUM SISWA

❌ File tidak ditemukan

πŸ‘‰ Salah:

<a href="Profile.html">

Padahal:

profil.html

⚠ Case sensitive!

❌ Path salah

πŸ‘‰ File di folder tapi tidak ditulis

❌ Tidak ada navigasi balik

πŸ‘‰ User tidak bisa kembali

11. DEBUGGING (WAJIB DIAJARKAN)

Jika link tidak jalan:

  1. Cek nama file
  2. Cek huruf besar/kecil
  3. Cek folder
  4. Klik kanan β†’ inspect

12. LATIHAN SISWA

Latihan 1

Buat:

  • 2 halaman (index & profil)

Latihan 2

Buat:

  • Navigasi 3 menu

Latihan 3

Buat:

  • Link email & telepon

13. MINI PROJECT

🎯 β€œWEBSITE PROFIL DIRI”

Buat struktur:

project/
β”œβ”€β”€ index.html
β”œβ”€β”€ tentang.html
β”œβ”€β”€ kontak.html

Isi:

  • Navbar di semua halaman
  • Link saling terhubung
  • Konten berbeda tiap halaman

14. KESIMPULAN

Link HTML adalah kunci untuk:

  • Membuat website multi halaman
  • Navigasi antar halaman
  • Menghubungkan informasi

Tag utama:

<a href="">...</a>
]]> https://www.bisasoftware.id/2026/bab-8-link-hyperlink-dalam-html/feed/ 0 BAB 7 : LIST (DAFTAR) DALAM HTML https://www.bisasoftware.id/2026/bab-7-list-daftar-dalam-html/ https://www.bisasoftware.id/2026/bab-7-list-daftar-dalam-html/#respond Sat, 02 May 2026 06:24:50 +0000 https://www.bisasoftware.id/2026/?p=483 1. Pengertian List

List (daftar) dalam HTML digunakan untuk menampilkan sekumpulan data dalam bentuk:

  • Daftar berurutan
  • Daftar tidak berurutan
  • Daftar deskripsi

List sangat sering digunakan dalam:

  • Menu makanan
  • Navigasi website
  • Fitur produk
  • Sidebar

2. Jenis-Jenis List di HTML

HTML memiliki 3 jenis list:

JenisTag
Ordered List<ol>
Unordered List<ul>
Description List<dl>

3. Ordered List (<ol>)

3.1 Pengertian

Digunakan untuk daftar yang berurutan (ada nomor).

3.2 Contoh

<ol>
    <li>Bangun tidur</li>
    <li>Sarapan</li>
    <li>Berangkat sekolah</li>
</ol>

3.3 Atribut Ordered List

Type angka/format:

<ol type="A">
    <li>Item</li>
</ol>

Pilihan:

  • 1 β†’ angka (default)
  • A β†’ huruf besar
  • a β†’ huruf kecil
  • I β†’ romawi besar
  • i β†’ romawi kecil

3.4 Studi Kasus (Langkah Tutorial)

<h2>Cara Membuat Akun</h2>

<ol>
    <li>Buka website</li>
    <li>Klik daftar</li>
    <li>Isi data</li>
    <li>Klik submit</li>
</ol>

πŸ‘‰ Digunakan untuk step-by-step

4. Unordered List (<ul>)

4.1 Pengertian

Digunakan untuk daftar tanpa urutan (bullet).

4.2 Contoh

<ul>
    <li>Nasi Goreng</li>
    <li>Mie Ayam</li>
    <li>Sate</li>
</ul>

4.3 Atribut Bullet Style

<ul type="square">
    <li>Item</li>
</ul>

Jenis:

  • disc (default)
  • circle
  • square

4.4 Studi Kasus (Menu Makanan)

<h2>Menu Restoran</h2>

<ul>
    <li>Nasi Goreng</li>
    <li>Ayam Bakar</li>
    <li>Es Teh</li>
</ul>

πŸ‘‰ Ini contoh real di website restoran

5. Description List (<dl>)

5.1 Pengertian

Digunakan untuk menjelaskan istilah.

5.2 Struktur

<dl>
    <dt>HTML</dt>
    <dd>Bahasa markup</dd>
</dl>

5.3 Studi Kasus (Istilah IT)

<dl>
    <dt>HTML</dt>
    <dd>Bahasa untuk membuat website</dd>

    <dt>CSS</dt>
    <dd>Untuk desain tampilan</dd>
</dl>

6. Nested List (List di dalam List)

6.1 Pengertian

List bisa dibuat bertingkat.

6.2 Contoh (Menu Kategori)

<ul>
    <li>Makanan
        <ul>
            <li>Nasi Goreng</li>
            <li>Mie Ayam</li>
        </ul>
    </li>
    <li>Minuman
        <ul>
            <li>Es Teh</li>
            <li>Jus</li>
        </ul>
    </li>
</ul>

πŸ‘‰ Digunakan untuk:

  • Menu kategori
  • Sidebar
  • Dropdown menu

7. Studi Kasus Utama (NAVIGASI WEBSITE)

Ini bagian paling penting πŸ”₯

7.1 Navigasi Sederhana

<ul>
    <li>Home</li>
    <li>Profil</li>
    <li>Kontak</li>
</ul>

7.2 Navigasi dengan Link

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="profil.html">Profil</a></li>
    <li><a href="kontak.html">Kontak</a></li>
</ul>

πŸ‘‰ Ini struktur navbar website asli

7.3 Navigasi Dropdown (Dasar)

<ul>
    <li>Produk
        <ul>
            <li><a href="#">Laptop</a></li>
            <li><a href="#">HP</a></li>
        </ul>
    </li>
</ul>

πŸ‘‰ Ini dasar dari:

  • Dropdown menu
  • E-commerce kategori

8. Contoh Program Lengkap (Menu + Navigasi)

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

<h1>Website Restoran</h1>

<h2>Navigasi</h2>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Kontak</a></li>
</ul>

<h2>Menu Makanan</h2>
<ul>
    <li>Nasi Goreng</li>
    <li>Ayam Bakar</li>
</ul>

<h2>Menu Minuman</h2>
<ul>
    <li>Es Teh</li>
    <li>Jus Jeruk</li>
</ul>

</body>
</html>

9. Best Practice Industri

βœ” Gunakan <ul> untuk navigasi

Karena tidak butuh urutan

βœ” Gunakan <ol> untuk langkah

Misalnya:

  • Tutorial
  • Prosedur

βœ” Gunakan nested list untuk menu kompleks

βœ” Gabungkan dengan <a> untuk link

10. Kesalahan Umum Siswa

❌ Tidak menggunakan <li>

<ul>
    Nasi Goreng
</ul>

πŸ‘‰ Salah

❌ Salah memilih jenis list

πŸ‘‰ Menu β†’ harusnya <ul>, bukan <ol>

❌ Struktur tidak rapi

11. Latihan Siswa

Latihan 1

Buat:

  • 1 ordered list (kegiatan pagi)

Latihan 2

Buat:

  • Menu makanan (unordered list)

Latihan 3

Buat:

  • Navigasi website dengan link

12. Mini Project

🎯 Buat Halaman: β€œWebsite Restoran”

Isi:

  • Navigasi (Home, Menu, Kontak)
  • Menu makanan (list)
  • Menu minuman (list)
  • Minimal 1 nested list

13. Kesimpulan

List HTML digunakan untuk:

  • Menampilkan data terstruktur
  • Membuat menu & navigasi
  • Membuat kategori

Tag utama:

<ul>, <ol>, <li>, <dl>
]]> https://www.bisasoftware.id/2026/bab-7-list-daftar-dalam-html/feed/ 0 BAB 6 : MATERI TEKS FORMATING https://www.bisasoftware.id/2026/bab-6-materi-teks-formating/ https://www.bisasoftware.id/2026/bab-6-materi-teks-formating/#respond Sat, 02 May 2026 06:22:08 +0000 https://www.bisasoftware.id/2026/?p=481 1. Pengertian Text Formatting

Text Formatting dalam HTML adalah teknik untuk mengatur tampilan dan penekanan teks agar lebih:

  • Mudah dibaca
  • Menarik
  • Informatif
  • Memiliki penekanan tertentu

2. Jenis-Jenis Text Formatting

HTML menyediakan beberapa tag untuk memformat teks.

2.1 Teks Tebal (Bold)

<b>Teks Tebal</b>

πŸ‘‰ Hanya mengubah tampilan (visual saja)

2.2 Teks Penting (Strong)

<strong>Teks Penting</strong>

πŸ‘‰ Memiliki makna penting (semantic)

πŸ“Œ Perbedaan penting:

  • <b> β†’ hanya tampilan
  • <strong> β†’ ada arti (penting untuk SEO & accessibility)

2.3 Teks Miring (Italic)

<i>Teks Miring</i>

2.4 Penekanan (Emphasis)

<em>Teks Ditekankan</em>

πŸ“Œ Sama seperti:

  • <i> β†’ visual
  • <em> β†’ makna penekanan

2.5 Garis Bawah

<u>Teks Garis Bawah</u>

2.6 Highlight (Mark)

<mark>Teks Disorot</mark>

2.7 Teks Kecil

<small>Teks kecil</small>

2.8 Coret (Deleted)

<del>Harga lama</del>

2.9 Sisipan (Inserted)

<ins>Harga baru</ins>

2.10 Superscript & Subscript

X<sup>2</sup>
H<sub>2</sub>O

3. Perbedaan Visual vs Semantic (Penting di Industri)

VisualSemantic
<b><strong>
<i><em>

πŸ‘‰ Rekomendasi industri:
Gunakan semantic karena:

  • Lebih SEO friendly
  • Lebih baik untuk screen reader
  • Lebih profesional

4. Contoh Real (Dunia Nyata)

4.1 Contoh Artikel Berita

<h1>Perkembangan Teknologi AI</h1>

<p>
Teknologi <strong>Artificial Intelligence</strong> berkembang sangat pesat.
</p>

<p>
Banyak perusahaan mulai menggunakan <em>AI</em> untuk meningkatkan efisiensi kerja.
</p>

<p>
Namun, penggunaan AI harus dilakukan dengan <mark>bijak</mark>.
</p>

4.2 Contoh Toko Online

<h2>Sepatu Sneakers</h2>

<p>
<del>Rp500.000</del> <ins>Rp350.000</ins>
</p>

<p>
Diskon hingga <strong>30%</strong> hanya hari ini!
</p>

4.3 Contoh Materi Pelajaran

<p>
Rumus luas persegi adalah: L = s<sup>2</sup>
</p>

<p>
Air memiliki rumus kimia: H<sub>2</sub>O
</p>

5. Kombinasi Text Formatting

Tag bisa digabungkan:

<p>
<strong><em>Penting dan ditekankan</em></strong>
</p>

6. Best Practice Industri

βœ” Gunakan semantic tag

Gunakan:

<strong> bukan <b>
<em> bukan <i>

βœ” Jangan berlebihan

❌ Salah:

<b><i><u><mark>Terlalu banyak</mark></u></i></b>

βœ” Benar:

<strong>Penting</strong>

βœ” Gunakan sesuai konteks

  • <mark> β†’ highlight penting
  • <del> β†’ harga lama
  • <ins> β†’ update baru

7. Kesalahan Umum Siswa

❌ 1. Semua teks dibuat bold

<b>Semua teks</b>

πŸ‘‰ Tidak efektif

❌ 2. Tidak menggunakan semantic

<b>Penting</b>

πŸ‘‰ Harusnya:

<strong>Penting</strong>

❌ 3. Over styling

πŸ‘‰ Terlalu banyak format β†’ tidak profesional

8. Studi Kasus (Mini Project)

Kasus: Halaman Promo Produk

<!DOCTYPE html>
<html>
<head>
    <title>Promo</title>
</head>
<body>

<h1>Promo Laptop Gaming</h1>

<p>
Laptop dengan performa <strong>tinggi</strong> untuk gaming dan editing.
</p>

<p>
Harga:
<del>Rp15.000.000</del>
<ins>Rp12.000.000</ins>
</p>

<p>
Promo berlaku sampai <mark>akhir bulan</mark>.
</p>

</body>
</html>

9. Latihan Siswa

Latihan 1

Buat paragraf dengan:

  • <strong>
  • <em>
  • <mark>

Latihan 2

Buat tampilan:

  • Harga lama (coret)
  • Harga baru

Latihan 3

Buat materi pelajaran:

  • Gunakan <sup> dan <sub>

10. Mini Project

Buat halaman:

β€œArtikel Teknologi”

Isi:

  • Judul
  • Paragraf
  • Highlight
  • Penekanan kata penting

11. Kesimpulan

Text Formatting digunakan untuk:

  • Memberi penekanan
  • Memperjelas informasi
  • Membuat tampilan menarik

Gunakan:

<strong>, <em>, <mark>

πŸ‘‰ Hindari hanya fokus ke tampilan, utamakan makna (semantic).

]]> https://www.bisasoftware.id/2026/bab-6-materi-teks-formating/feed/ 0 BAB 5 : MATERI PARAGRAF DALAM HTML https://www.bisasoftware.id/2026/bab-5-materi-paragraf-dalam-html/ https://www.bisasoftware.id/2026/bab-5-materi-paragraf-dalam-html/#respond Sat, 02 May 2026 03:49:56 +0000 https://www.bisasoftware.id/2026/?p=479 1. Pengertian Paragraf dalam HTML

Paragraf dalam HTML digunakan untuk menampilkan teks atau isi konten dalam sebuah halaman web.

Tag yang digunakan adalah:

<p>Ini adalah paragraf</p>

Tag <p> merupakan singkatan dari paragraph.

2. Fungsi Paragraf

Paragraf memiliki beberapa fungsi penting:

  • Menampilkan isi teks utama
  • Membuat konten lebih rapi dan mudah dibaca
  • Memberikan jarak antar blok teks secara otomatis
  • Membantu struktur konten website

3. Cara Kerja Paragraf di HTML

Browser akan secara otomatis:

  • Memberikan jarak atas dan bawah
  • Menampilkan teks dalam satu blok
  • Mengabaikan spasi berlebih

Contoh:

<p>Ini paragraf pertama</p>
<p>Ini paragraf kedua</p>

Hasil:

  • Paragraf akan terpisah dengan jarak

4. Karakteristik Paragraf HTML

4.1 Mengabaikan Spasi Berlebih

HTML tidak peduli jumlah spasi atau enter dalam kode.

<p>
Ini     adalah
paragraf
yang     panjang
</p>

Hasil di browser:

Ini adalah paragraf yang panjang

πŸ‘‰ Semua spasi berlebih akan dirapikan menjadi satu spasi.

4.2 Tidak Otomatis Pindah Baris

Jika ingin pindah baris di dalam paragraf, gunakan:

<br>

Contoh:

<p>
Nama: Budi<br>
Kelas: X RPL<br>
Sekolah: SMK
</p>

4.3 Membuat Garis Pemisah

Gunakan:

<hr>

Contoh:

<p>Paragraf pertama</p>
<hr>
<p>Paragraf kedua</p>

5. Atribut pada Tag <p>

5.1 Atribut style

Digunakan untuk mengatur tampilan teks.

Contoh:

<p style="color:blue;">Teks berwarna biru</p>
<p style="text-align:center;">Teks rata tengah</p>
<p style="font-size:20px;">Teks lebih besar</p>

5.2 Atribut align (tidak direkomendasikan lagi)

<p align="center">Teks tengah</p>

⚠ Catatan:

  • Atribut ini sudah deprecated
  • Sebaiknya gunakan CSS

6. Perbedaan Paragraf dan Heading

ElemenFungsi
<p>Isi teks
<h1> - <h6>Judul

Contoh:

<h1>Judul Artikel</h1>
<p>Ini adalah isi artikel.</p>

7. Best Practice Industri

Sebagai web developer profesional, gunakan paragraf dengan benar:

βœ” Gunakan paragraf untuk isi teks

βœ” Jangan gunakan <br> berlebihan

βœ” Gunakan CSS untuk styling

βœ” Pisahkan konten per ide

Contoh bagus:

<p>HTML adalah dasar dari semua website.</p>
<p>Dengan HTML, kita bisa membuat struktur halaman.</p>

8. Kesalahan Umum Siswa

❌ 1. Tidak menggunakan <p>

Ini teks tanpa paragraf

πŸ‘‰ Salah karena tidak terstruktur

❌ 2. Menggunakan <br> untuk paragraf

Ini paragraf<br><br>
Ini paragraf lagi

πŸ‘‰ Tidak profesional

❌ 3. Paragraf terlalu panjang

<p>Paragraf sangat panjang tanpa jeda...</p>

πŸ‘‰ Sulit dibaca

9. Studi Kasus (Dunia Nyata)

Kasus: Artikel Website Sekolah

<h1>Profil Sekolah</h1>

<p>
SMK Negeri 1 Teknologi adalah sekolah unggulan yang berfokus pada bidang IT.
</p>

<p>
Sekolah ini memiliki berbagai jurusan seperti RPL, TKJ, dan Multimedia.
</p>

πŸ‘‰ Ini adalah contoh penggunaan paragraf yang benar dalam dunia nyata.

10. Contoh Program Lengkap

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Paragraf</title>
</head>
<body>

<h1>Belajar HTML</h1>

<p>HTML adalah bahasa dasar untuk membuat website.</p>

<p>
Dengan HTML, kita dapat membuat teks, gambar, dan link.
</p>

<p>
Nama: Andi<br>
Kelas: X RPL<br>
Sekolah: SMK
</p>

<hr>

<p style="text-align:center;">
Terima kasih telah belajar HTML
</p>

</body>
</html>

11. Latihan Siswa

Latihan 1 (Dasar)

Buat 3 paragraf tentang:

  • Diri sendiri
  • Sekolah
  • Cita-cita

Latihan 2 (Menengah)

Buat halaman HTML berisi:

  • 1 Judul
  • 3 Paragraf
  • 1 <br>
  • 1 <hr>

Latihan 3 (Lanjutan)

Buat artikel:

  • Judul
  • Minimal 5 paragraf
  • Gunakan style (warna / rata tengah)

12. Mini Project

Buat halaman:

β€œProfil Diri Siswa”

Isi:

  • Judul
  • Paragraf perkenalan
  • Paragraf hobi
  • Paragraf cita-cita

13. Kesimpulan

Paragraf adalah elemen penting dalam HTML untuk:

  • Menampilkan isi teks
  • Membuat halaman lebih rapi
  • Membantu pembaca memahami konten

Tag utama:

<p>...</p>

]]> https://www.bisasoftware.id/2026/bab-5-materi-paragraf-dalam-html/feed/ 0 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