Membuat Tabel pada HTML

 

1. Pengenalan Tabel HTML

Tabel pada HTML digunakan untuk menyajikan data terstruktur dalam bentuk baris (rows) dan kolom (columns), seperti data laporan keuangan, jadwal pelajaran, daftar produk, atau perbandingan fitur.

Elemen dasar yang digunakan untuk membangun tabel HTML meliputi:

•         <table> : Elemen utama yang membungkus seluruh komponen tabel.
•       <tr> (Table Row) : Mendefinisikan baris baru di dalam tabel.
•       <th> (Table Header) : Mendefinisikan sel sebagai judul kolom/baris (secara bawaan teks dicetak tebal dan rata tengah).
•       <td> (Table Data) : Mendefinisikan sel biasa yang berisi data/konten tabel.

Contoh Kode Sederhana:

<table border="1"> <tr> <th>Nama</th> <th>Umur</th> <th>Kota</th> </tr> <tr> <td>Andi</td> <td>25</td> <td>Jakarta</td> </tr> <tr> <td>Budi</td> <td>30</td> <td>Bandung</td> </tr> </table>

 

2. Struktur Tabel Semantik (Lanjutan)

Untuk membuat tabel yang rapi, profesional, dan aksebel (*accessible* bagi *screen reader*), HTML5 menyediakan tiga elemen semantik pembagi struktur tabel:

• <thead> : Menampung bagian kepala tabel (header), berisi <tr> dan <th>.
• <tbody> : Menampung bagian utama atau isi data tabel.
• <tfoot> : Menampung bagian kaki tabel (footer), biasa digunakan untuk total, rata-rata, atau catatan kaki.

Contoh Struktur Semantik Lengkap:

<table border="1"> <thead> <tr> <th>Produk</th> <th>Jumlah</th> <th>Harga</th> </tr> </thead> <tbody> <tr> <td>Kopi Aromatic</td> <td>2</td> <td>Rp 30.000</td> </tr> <tr> <td>Teh Melati</td> <td>1</td> <td>Rp 10.000</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">Total Pembayaran</td> <td>Rp 40.000</td> </tr> </tfoot> </table>

 

3. Menggabungkan Sel (Colspan & Rowspan)

Seringkali kita membutuhkan sel yang memuat ruang lebih dari satu kolom atau baris. Untuk mengatasi hal tersebut, HTML menyediakan dua atribut utama:

• colspan (Column Span) : Menggabungkan beberapa kolom secara horizontal (ke samping). Contoh: colspan="2" akan menggabungkan 2 kolom.
• rowspan (Row Span) : Menggabungkan beberapa baris secara vertikal (ke bawah). Contoh: rowspan="2" akan menggabungkan 2 baris.

Contoh Penggunaan Colspan & Rowspan:

<table border="1"> <!-- Contoh Colspan --> <tr> <th colspan="2">Nama Lengkap</th> </tr> <tr> <td>Nama Depan</td> <td>Nama Belakang</td> </tr> <!-- Contoh Rowspan --> <tr> <td rowspan="2">Kategori Produk</td> <td>Elektronik</td> </tr> <tr> <td>Pakaian</td> </tr> </table>

 

4. Tampilan Visual Hasil Tabel

Berikut adalah contoh bagaimana tabel di atas dirender atau ditampilkan secara konseptual:

Produk	Jumlah	Harga
Kopi Aromatic	2	Rp 30.000
Teh Melati	1	Rp 10.000
Total Pembayaran		Rp 40.000

 

5. Praktik Terbaik (Best Practices)

• Gunakan CSS untuk Tampilan Modern — Hindari menggunakan atribut HTML kuno seperti border="1", cellpadding, atau bgcolor di dalam tag HTML. Gunakan CSS (misal: border, border-collapse, padding) untuk penataan gaya yang lebih rapi dan fleksibel.
• Gunakan Tag <caption> — Sertakan tag <caption> tepat di bawah tag <table> untuk memberikan judul atau deskripsi singkat mengenai isi tabel.
• Aksesibilitas (Accessibility) — Gunakan elemen <th> serta atribut scope="col" atau scope="row" agar pembaca layar (screen reader) dapat membantu pengguna disabilitas memahami konteks data.
•  Tabel Responsif — Untuk tampilan di layar smartphone/HP, bungkus tabel dengan <div> bertipe overflow-x: auto agar tabel dapat digeser secara horizontal tanpa merusak layout halaman web.

Continue reading Membuat Tabel pada HTML

Memasukkan Gambar pada HTML

 

Memasukkan Gambar pada HTML

Tujuan Pembelajaran

Setelah mempelajari materi ini, siswa diharapkan mampu:

• Memahami fungsi tag <img> pada HTML.
• Menambahkan gambar ke dalam halaman web.
• Menggunakan atribut src, alt, width, dan height.

 

Apa Itu Gambar pada HTML?

Gambar merupakan salah satu elemen penting dalam sebuah website. Dengan gambar, tampilan website menjadi lebih menarik dan informasi lebih mudah dipahami.

Untuk menampilkan gambar di HTML digunakan tag:

<img>

Tag <img> adalah tag tunggal (self-closing), sehingga tidak memiliki tag penutup.

 

Struktur Dasar Tag <img>

<img src="nama_gambar.jpg" alt="Keterangan gambar">

Penjelasan:

• src (source)
  Menentukan lokasi atau alamat file gambar yang akan ditampilkan.
• alt (alternative text)
  Menampilkan teks pengganti apabila gambar tidak dapat ditampilkan. Atribut ini juga membantu pengguna yang menggunakan pembaca layar (screen reader).

 

Contoh Penggunaan

Misalnya terdapat file gambar bernama kucing.jpg yang berada di folder yang sama dengan file HTML.

<!DOCTYPE html>

<html>

<head>

    <title>Menampilkan Gambar</title>

</head>

<body>

 

<h1>Hewan Kesayangan</h1>

 <img src="kucing.jpg" alt="Gambar seekor kucing">

 </body>

</html>

Hasilnya:

• Judul "Hewan Kesayangan" muncul.
• Gambar kucing.jpg ditampilkan di bawah judul.

 

Mengatur Ukuran Gambar

Ukuran gambar dapat diatur menggunakan atribut:

• width = lebar gambar
• height = tinggi gambar

Contoh:

<img src="kucing.jpg" alt="Kucing" width="300">

atau

<img src="kucing.jpg" alt="Kucing" width="300" height="200">

Keterangan:

• width="300" berarti lebar gambar 300 piksel.
• height="200" berarti tinggi gambar 200 piksel.

 

Menampilkan Gambar dari Folder

Misalnya struktur folder:

Website

│

├── index.html

└── gambar

      └── bunga.jpg

Maka penulisannya:

<img src="gambar/bunga.jpg" alt="Bunga">

 

Menampilkan Gambar dari Internet

Selain dari komputer, gambar juga dapat ditampilkan menggunakan alamat URL.

Contoh:

<img src="https://example.com/gambar.jpg" alt="Gambar dari internet">

 

Contoh Lengkap

<!DOCTYPE html>

<html>

<head>

    <title>Belajar Gambar</title>

</head>

<body>

 

<h1>Belajar HTML</h1>

 

<p>Berikut adalah gambar bunga.</p>

 

<img src="gambar/bunga.jpg"

     alt="Bunga Matahari"

     width="350">

 

</body>

</html>

 

Kesalahan yang Sering Terjadi

1. Nama file salah

❌

<img src="bungaa.jpg">

Padahal nama file sebenarnya:

bunga.jpg

 

2. Folder salah

Misalnya gambar berada di folder gambar, tetapi ditulis:

<img src="bunga.jpg">

Seharusnya:

<img src="gambar/bunga.jpg">

 

3. Lupa menambahkan atribut alt

Kurang baik:

<img src="kucing.jpg">

Lebih baik:

<img src="kucing.jpg" alt="Seekor kucing berwarna putih">

 

Ringkasan

• Tag untuk menampilkan gambar adalah <img>.
• Tag <img> tidak memiliki tag penutup.
• Atribut src digunakan untuk menentukan lokasi gambar.
• Atribut alt digunakan sebagai teks pengganti jika gambar tidak tampil.
• Atribut width dan height digunakan untuk mengatur ukuran gambar.

 

 

Continue reading Memasukkan Gambar pada HTML

Mengenal Kode Heading dan Paragraf Pada HTML

 

Heading (Judul) pada HTML

Apa itu Heading?

Heading adalah tulisan yang digunakan sebagai judul atau subjudul pada halaman web.

Bayangkan seperti buku pelajaran:

• Judul bab → besar
• Subjudul → lebih kecil
• Sub-subjudul → lebih kecil lagi

Di HTML, heading ditulis dengan tag <h1> sampai <h6>.

 Paragraf

Paragraf digunakan untuk menulis teks atau penjelasan pada halaman web.

Tag yang digunakan adalah <p>.

Hasil nya

Perbedaan Heading dan Paragraf

Heading	Paragraf
Untuk judul	Untuk isi teks
Ukuran lebih besar	Ukuran normal
Membuat struktur halaman	Menjelaskan isi
Menggunakan <h1>–<h6>	Menggunakan <p>

Berikut cara membuat heading dan paragraf di html

 

Continue reading Mengenal Kode Heading dan Paragraf Pada HTML

Mengenal HTML

 

Struktur Dokumen HTML

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman website.

Struktur Dasar HTML

<!DOCTYPE html>

<html>

<head>

    <title>Judul Halaman</title>

</head>

<body>

    <h1>Halo Dunia</h1>

    <p>Ini adalah halaman web pertama saya.</p>

</body>

</html>

Penjelasan

• <!DOCTYPE html> → Menentukan bahwa dokumen menggunakan HTML5.
• <html> → Elemen utama yang membungkus seluruh halaman.
• <head> → Berisi informasi halaman seperti judul, stylesheet, dan metadata.
• <title> → Judul halaman yang muncul pada tab browser.
• <body> → Berisi seluruh konten yang ditampilkan kepada pengguna.

---

Perkenalan

HTML terdiri dari Tag, Element, Attribute, dan Comment.

---

HTML Tag, Element, Attribute & Comment

1. HTML Tag

Tag adalah penanda yang digunakan untuk membuat elemen HTML.

Contoh:

<h1>Judul</h1>

<p>Paragraf</p>

Tag pembuka:

<h1>

Tag penutup:

</h1>

---

2. HTML Element

Element adalah keseluruhan bagian HTML yang terdiri dari tag pembuka, isi, dan tag penutup.

Contoh:

<p>Belajar HTML</p>

Element di atas terdiri dari:

• Tag pembuka <p>
• Isi "Belajar HTML"
• Tag penutup </p>

---

3. HTML Attribute

Attribute digunakan untuk memberikan informasi tambahan pada tag HTML.

Contoh:

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

Keterangan:

• href adalah attribute
• Nilainya adalah https://google.com

Contoh lain:

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

---

4. HTML Comment

Comment digunakan untuk memberikan catatan pada kode dan tidak akan ditampilkan di browser.

Contoh:

<!-- Ini adalah komentar -->

---

HTML Tag Untuk Menampilkan Teks

1. Heading

Heading digunakan untuk membuat judul.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

h1 adalah ukuran terbesar dan h6 adalah ukuran terkecil.

---

2. Paragraf

Digunakan untuk membuat paragraf.

<p>Ini adalah paragraf pertama.</p>

---

3. Link / Anchor

Digunakan untuk membuat tautan.

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

    Kunjungi Google

</a>

Membuka halaman baru:

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

    Google

</a>

---

4. Span

Digunakan untuk memberi gaya pada sebagian teks.

<p>

    Saya belajar <span style="color:red;">HTML</span>

</p>

---

5. Huruf Tebal

<b>Teks Tebal</b>

atau

<strong>Teks Penting</strong>

---

6. Huruf Miring

<i>Teks Miring</i>

atau

<em>Teks Ditekankan</em>

---

7. List

Ordered List (Nomor)

<ol>

    <li>HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

</ol>

Hasil:

1. HTML
2. CSS
3. JavaScript

Unordered List (Bullet)

<ul>

    <li>HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

</ul>

---

HTML Tag Untuk Multimedia

1. Gambar

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

Mengatur ukuran:

<img src="gambar.jpg"

     width="300"

     height="200">

---

2. Video

<video controls width="400">

    <source src="video.mp4" type="video/mp4">

</video>

Attribute:

• controls → menampilkan tombol play, pause, volume.

---

3. Suara (Audio)

<audio controls>

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

</audio>

---

4. Halaman Website Lainnya (Iframe)

Menampilkan halaman website lain di dalam halaman web.

<iframe

    src="https://www.wikipedia.org"

    width="600"

    height="400">

</iframe>

---

HTML Tag Untuk Tabel

1. Tabel

Contoh tabel sederhana:

<table border="1">

    <tr>

        <th>Nama</th>

        <th>Umur</th>

    </tr>

 

    <tr>

        <td>Andi</td>

        <td>20</td>

    </tr>

 

    <tr>

        <td>Budi</td>

        <td>22</td>

    </tr>

</table>

Tag Tabel

Tag	Fungsi
table	Membuat tabel
tr	Membuat baris
th	Judul kolom
td	Isi data

---

HTML Tag Untuk Formulir

1. Formulir

Digunakan untuk menerima input dari pengguna.

Contoh:

<form>

 

    Nama:

    <input type="text">

 

    <br><br>

 

    Email:

    <input type="email">

 

    <br><br>

 

    Password:

    <input type="password">

 

    <br><br>

 

    Jenis Kelamin:

    <input type="radio" name="jk"> Laki-laki

    <input type="radio" name="jk"> Perempuan

 

    <br><br>

 

    Hobi:

    <input type="checkbox"> Membaca

    <input type="checkbox"> Olahraga

 

    <br><br>

 

    <button type="submit">

        Kirim

    </button>

 

</form>

Jenis Input Populer

Type	Fungsi
text	Input teks
password	Password
email	Email
number	Angka
date	Tanggal
radio	Pilihan tunggal
checkbox	Pilihan ganda
file	Upload file
submit	Tombol kirim

---

HTML Tag Untuk Membagi Layout Website

1. Layout Website

HTML5 menyediakan tag khusus untuk membagi struktur website.

Contoh:

<body>

 

    <header>

        Header Website

    </header>

 

    <nav>

        Menu Navigasi

    </nav>

 

    <main>

 

        <section>

            Konten Utama

        </section>

 

        <aside>

            Sidebar

        </aside>

 

    </main>

 

    <footer>

        Footer Website

    </footer>

 

</body>

Fungsi Tag Layout

Tag	Fungsi
header	Bagian kepala website
nav	Menu navigasi
main	Konten utama
section	Bagian konten
article	Artikel mandiri
aside	Sidebar
footer	Bagian bawah website

---

Kesimpulan

HTML digunakan untuk membangun struktur halaman web. Elemen penting yang harus dipahami adalah:

1. Struktur dokumen HTML
2. Tag, Element, Attribute, dan Comment
3. Tag teks (Heading, Paragraf, Link, Span, Format Teks, List)
4. Multimedia (Gambar, Video, Audio, Iframe)
5. Tabel
6. Formulir
7. Layout Website

Dengan menguasai HTML dasar, Anda dapat melanjutkan ke CSS untuk mempercantik tampilan dan JavaScript untuk membuat website lebih interaktif.

 

Continue reading Mengenal HTML