bisasoftware.id https://www.bisasoftware.id/2026 bisasoftware.id melayani dengan sepenuh hati Sat, 06 Jun 2026 23:16:35 +0000 id hourly 1 https://wordpress.org/?v=7.0 https://www.bisasoftware.id/2026/wp-content/uploads/2025/12/cropped-cropped-logo_bs-copy-32x32.png bisasoftware.id https://www.bisasoftware.id/2026 32 32 PRAKTIK 1 – MEMBUAT HALAMAN PROFIL SEDERHANA https://www.bisasoftware.id/2026/praktik-1-membuat-halaman-profil-sederhana/ https://www.bisasoftware.id/2026/praktik-1-membuat-halaman-profil-sederhana/#respond Sat, 06 Jun 2026 23:16:35 +0000 https://www.bisasoftware.id/2026/?p=513 File HTML 
<!DOCTYPE html>
<html>
<head>
<title>Profil Saya</title>

<link rel="stylesheet"
href="style.css">

</head>

<body>

<h1>Profil Saya</h1>

<p>
Saya sedang belajar CSS.
</p>

</body>
</html>

File CSS

body{
    background-color:#f0f0f0;
    font-family:Arial;
}

h1{
    color:blue;
    text-align:center;
}

p{
    font-size:18px;
}

TUGAS PRAKTIK

Buat halaman profil sekolah dengan ketentuan:

  1. Judul berwarna biru.
  2. Background abu-abu muda.
  3. Font menggunakan Arial.
  4. Terdapat:
    • Nama Sekolah
    • Alamat
    • Jurusan
    • Foto Sekolah
  5. Simpan CSS pada file terpisah.

RANGKUMAN

  1. CSS digunakan untuk mengatur tampilan website.
  2. CSS dapat ditulis secara:
    • Inline
    • Internal
    • External
  3. CSS terdiri dari:
    • Selector
    • Property
    • Value
  4. Selector dapat berupa:
    • Element
    • ID
    • Class
  5. CSS dapat mengatur:
    • Warna
    • Background
    • Teks
    • Layout
    • Responsive Design
]]> https://www.bisasoftware.id/2026/praktik-1-membuat-halaman-profil-sederhana/feed/ 0 BAB 7 – MENGATUR TEKS https://www.bisasoftware.id/2026/bab-7-mengatur-teks/ https://www.bisasoftware.id/2026/bab-7-mengatur-teks/#respond Sat, 06 Jun 2026 23:15:13 +0000 https://www.bisasoftware.id/2026/?p=511 Warna Teks 
color:red;

Ukuran Huruf

font-size:24px;

Jenis Huruf

font-family:Arial;

Tebal Huruf

font-weight:bold;

Miring

font-style:italic;

Garis Bawah

text-decoration:underline;

Rata Tengah

text-align:center;

]]> https://www.bisasoftware.id/2026/bab-7-mengatur-teks/feed/ 0 BAB 6 – BACKGROUND https://www.bisasoftware.id/2026/bab-6-background/ https://www.bisasoftware.id/2026/bab-6-background/#respond Sat, 06 Jun 2026 23:14:03 +0000 https://www.bisasoftware.id/2026/?p=509 Background digunakan untuk mengatur latar belakang.

A. Background Color

body{
    background-color:lightblue;
}

B. Background Image

body{
    background-image:url("gambar.jpg");
}

C. Background Repeat

background-repeat:no-repeat;

D. Background Size

background-size:cover;

Gambar memenuhi layar.

]]> https://www.bisasoftware.id/2026/bab-6-background/feed/ 0 BAB 5 – WARNA PADA CSS https://www.bisasoftware.id/2026/bab-5-warna-pada-css/ https://www.bisasoftware.id/2026/bab-5-warna-pada-css/#respond Sat, 06 Jun 2026 23:13:03 +0000 https://www.bisasoftware.id/2026/?p=507 CSS mendukung berbagai format warna.

A. Nama Warna

color:red;
color:blue;
color:green;

B. HEX Color

color:#FF0000;

Merah

color:#00FF00;

Hijau

color:#0000FF;

Biru

C. RGB

color:rgb(255,0,0);

Merah

D. RGBA

color:rgba(255,0,0,0.5);

Angka terakhir menunjukkan transparansi.

]]> https://www.bisasoftware.id/2026/bab-5-warna-pada-css/feed/ 0 BAB 4 – SELECTOR CSS https://www.bisasoftware.id/2026/bab-4-selector-css/ https://www.bisasoftware.id/2026/bab-4-selector-css/#respond Sat, 06 Jun 2026 23:11:51 +0000 https://www.bisasoftware.id/2026/?p=505 Selector digunakan untuk memilih elemen yang akan diberi gaya.

A. Element Selector

Contoh:

h1{
    color:red;
}

Semua tag h1 akan berubah.

B. ID Selector

HTML:

<h1 id="judul">
Belajar CSS
</h1>

CSS:

#judul{
    color:blue;
}

Tanda:

#

digunakan untuk ID.

C. Class Selector

HTML:

<p class="info">
Ini informasi penting
</p>

CSS:

.info{
    color:green;
}

Tanda:

.

digunakan untuk Class.

Perbedaan ID dan Class

IDClass
UnikBisa banyak
Menggunakan #Menggunakan .

]]> https://www.bisasoftware.id/2026/bab-4-selector-css/feed/ 0 BAB 3 – STRUKTUR DASAR CSS https://www.bisasoftware.id/2026/bab-3-struktur-dasar-css/ https://www.bisasoftware.id/2026/bab-3-struktur-dasar-css/#respond Sat, 06 Jun 2026 23:10:28 +0000 https://www.bisasoftware.id/2026/?p=503 Sintaks CSS terdiri dari:

selector{
    property:value;
}

Contoh:

h1{
    color:red;
}

Penjelasan:

BagianKeterangan
h1Selector
colorProperty
redValue

Contoh lain:

p{
    font-size:20px;
}

Artinya:

Semua paragraf memiliki ukuran huruf 20 pixel.

]]> https://www.bisasoftware.id/2026/bab-3-struktur-dasar-css/feed/ 0 BAB 2 – CARA MENULISKAN CSS https://www.bisasoftware.id/2026/bab-2-cara-menuliskan-css/ https://www.bisasoftware.id/2026/bab-2-cara-menuliskan-css/#respond Sat, 06 Jun 2026 23:08:43 +0000 https://www.bisasoftware.id/2026/?p=501 Terdapat tiga cara menuliskan CSS.

A. Inline CSS

CSS ditulis langsung pada tag HTML.

Contoh:

<h1 style="color:red">
Selamat Datang
</h1>

Hasil:

Tulisan berwarna merah.

Kelebihan

  • Mudah digunakan

Kekurangan

  • Sulit dikelola
  • Tidak cocok untuk website besar

B. Internal CSS

CSS ditulis di dalam tag <style>.

Contoh:

<!DOCTYPE html>
<html>
<head>

<style>

h1{
    color:blue;
}

</style>

</head>

<body>

<h1>Belajar CSS</h1>

</body>
</html>

C. External CSS

Cara yang paling direkomendasikan.

File HTML

<link rel="stylesheet" href="style.css">

File CSS

h1{
    color:green;
}

Struktur folder:

website/

│
├── index.html
│
└── style.css

]]> https://www.bisasoftware.id/2026/bab-2-cara-menuliskan-css/feed/ 0 BAB 1 – MENGENAL CSS https://www.bisasoftware.id/2026/bab-1-mengenal-css/ https://www.bisasoftware.id/2026/bab-1-mengenal-css/#respond Sat, 06 Jun 2026 23:06:27 +0000 https://www.bisasoftware.id/2026/?p=498 A. Pendahuluan

Ketika pertama kali belajar HTML, kita dapat membuat struktur halaman web seperti judul, paragraf, gambar, tabel, dan formulir. Namun tampilan website tersebut masih sangat sederhana.

Perhatikan contoh berikut.

HTML Tanpa CSS

<h1>Selamat Datang</h1>

<p>Belajar membuat website.</p>

Hasil:

Selamat Datang

Belajar membuat website.

Tampilannya masih polos dan kurang menarik.

Agar website terlihat profesional, diperlukan CSS.

CSS memungkinkan kita mengatur:

  • Warna teks
  • Warna latar belakang
  • Ukuran huruf
  • Jenis huruf
  • Posisi elemen
  • Animasi
  • Responsive Design
  • Layout Website

B. Pengertian CSS

CSS merupakan singkatan dari:

Cascading Style Sheets

CSS adalah bahasa yang digunakan untuk mengatur tampilan dan tata letak halaman web.

CSS bekerja bersama HTML.

Jika HTML adalah kerangka rumah, maka CSS adalah cat, dekorasi, dan desain interior rumah tersebut.

C. Fungsi CSS

CSS memiliki beberapa fungsi utama:

1. Mempercantik Tampilan Website

Contoh:

h1{
    color: blue;
}

Hasil:

Tulisan menjadi berwarna biru.

2. Mempermudah Pengelolaan Tampilan

Tanpa CSS:

<h1 style="color:red">Judul 1</h1>
<h1 style="color:red">Judul 2</h1>
<h1 style="color:red">Judul 3</h1>

Dengan CSS:

h1{
    color:red;
}

Semua heading otomatis berwarna merah.

3. Membuat Website Responsive

Responsive berarti website dapat menyesuaikan ukuran layar:

  • Komputer
  • Laptop
  • Tablet
  • Smartphone

4. Memisahkan Struktur dan Desain

HTML:

<h1>Profil Sekolah</h1>

CSS:

h1{
    color:green;
}

Prinsip ini membuat kode lebih rapi dan mudah dikelola.

]]> https://www.bisasoftware.id/2026/bab-1-mengenal-css/feed/ 0 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