Welcome To My Website
Toggle navigation
  • "Learning Until Life Ending"
User Image

Hendri's Portofolio

Online
  • Dashboard
  • Curriculum Vitae
  • Photo Gallery
  • Portofolio
  • Tutorial Developer
    • HTML
    • CSS
    • Javascript
  • Blogspot

HMTL preview of page detail

  1. HTML
  2. detail

Daftar Materi


Apa itu HTML?

HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat dan menyusun halaman web. HTML digunakan untuk:

  • Menampilkan teks, gambar, link, video, dan elemen lainnya di halaman web.
  • Mengatur struktur konten sebuah situs (misalnya: header, paragraf, list, tabel, dll)
  • Bekerja bersama CSS (untuk tampilan) dan JavaScript (untuk interaktivitas).

Cara kerja HTML di browser

🔁 1. Browser Meminta File HTML

Ketika kamu mengetik alamat web di browser (contoh: www.contoh.com), browser akan mengirim permintaan (request) ke server tempat website itu disimpan.

📥 2. Server Mengirim File HTML

Server merespons dengan mengirimkan file HTML (dan biasanya juga file CSS, JavaScript, gambar, dll).

🧠 3. Browser Membaca & Memahami HTML

Browser mulai membaca file HTML baris per baris dari atas ke bawah, lalu:

  • Membuat struktur halaman (DOM – Document Object Model).
  • Melihat elemen seperti <h1>, <p>, <img>, <a>, dll, dan menafsirkan mereka.
  • Jika ada CSS, browser akan menerapkan tampilan sesuai gaya yang ditentukan.
  • Jika ada JavaScript, browser akan menjalankan fungsi-fungsi interaktif yang tertulis.

🖥️ 4. Browser Menampilkan Halaman ke Layar

Setelah semua konten dan gaya dibaca, browser menampilkan halaman web yang utuh ke layar pengguna sesuai desain HTML dan CSS-nya.

Ilustrasi Singkat:

Kamu mengetik: www.contoh.com

↓

Browser kirim permintaan ke server

↓

Server kirim file HTML + CSS + JS

↓

Browser membaca & merender semua

↓

Kamu melihat halaman web di layar

Struktur dasar HTML:

 <!DOCTYPE html>
 <html>
   <head>
     <title>Judul Halaman</title>
   </head>
   <body>
     <!--- Content Web -->
     <h1>Halo Dunia! </h1>
     <p>Ini adalah paragraf pertama saya ya. </p>
   </body>
 </html>
No Kategori Tag Fungsi
1 Struktur Dasar <!DOCTYPE> Mendefinisikan tipe dokumen (HTML5)
2 Struktur Dasar <html> Elemen pembungkus seluruh halaman HTML
3 Struktur Dasar <head> Berisi informasi metadata (judul, link CSS, script, dll)
4 Struktur Dasar <body> Berisi seluruh konten yang terlihat di halaman web
5 Teks dan Heading <h1> – <h6> Heading/judul dari besar ke kecil
6 Teks dan Heading <p> Paragraf
7 Teks dan Heading <br> Baris baru (line break)
8 Teks dan Heading <hr> Garis horizontal
9 Teks dan Heading <blockquote> Kutipan panjang
10 Teks dan Heading <q> Kutipan pendek
11 Teks dan Heading <strong> Teks tebal
12 Teks dan Heading <em> Teks miring
13 Teks dan Heading <mark> Menyorot teks
14 Teks dan Heading <mark> Menyorot teks
15 Teks dan Heading <small> Teks Kecil
16 Teks dan Heading <del> Teks dicoret
17 Teks dan Heading <ins> Teks tambahan (garis bawah)
18 Teks dan Heading <abbr> Singkatan dengan tooltip
19 Teks dan Heading <code> Teks kode (monospace)
20 Teks dan Heading <pre> Teks dengan spasi tetap
21 Teks dan Heading <span> Elemen inline
22 Teks dan Heading <div> Elemen blok
23 Link dan Media <a> Tautan (link)
24 Link dan Media <img> Gambar
25 Link dan Media <audio> Audio player
26 Link dan Media <video> Video player
27 Link dan Media <source> Sumber media tambahan
28 Link dan Media <track> Subtitle untuk video/audio
29 Link dan Media <iframe> Menyisipkan halaman lain
30 Link dan Media <embed> Menyisipkan konten (misalnya PDF)
31 Link dan Media <object> Menyisipkan objek multimedia
32 Link dan Media <map> dan <area> Peta gambar (image map)
33 Daftar (List) <ul> Daftar tak berurutan
34 Daftar (List) <ol> Daftar berurutan
35 Daftar (List) <li> Item daftar
36 Daftar (List) <dl> Daftar deskriptif
37 Daftar (List) <dt> Istilah dalam deskripsi
38 Daftar (List) <dd> Deskripsi dari istilah
39 Tabel <table> Membuat tabel
40 Tabel <tr> Baris tabel
41 Tabel <th> Judul kolom/baris
42 Tabel <td> Data sel
43 Tabel <thead> Kepala tabel
44 Tabel <tbody> Isi tabel
45 Tabel <tfoot> Kaki tabel
46 Tabel <caption> Judul tabel
47 Tabel <colgroup>, <col> Pengaturan kolom
48 Formulir (Form) <form> Formulir input data
49 Formulir (Form) <input> Input teks, tombol, dll
50 Formulir (Form) <textarea> Kotak teks panjang
51 Formulir (Form) <button> Tombol
52 Formulir (Form) <select> Dropdown
53 Formulir (Form) <option> Pilihan dalam dropdown
54 Formulir (Form) <label> Label untuk input
55 Formulir (Form) <fieldset> Kelompokkan elemen form
56 Formulir (Form) <legend> Judul dari fieldset
57 Formulir (Form) <datalist> Daftar saran input
58 Formulir (Form) <output> Output dari form
59 Formulir (Form) <meter> Indikator nilai
60 Formulir (Form) <progress> Bar progres
61 Gaya dan Skrip <style> Menyisipkan CSS langsung
62 Gaya dan Skrip <style> Menyisipkan CSS langsung
63 Gaya dan Skrip <link> Menghubungkan CSS eksternal
64 Gaya dan Skrip <script> Menyisipkan JavaScript
65 Gaya dan Skrip <noscript> Konten jika JS tidak aktif
66 Gaya dan Skrip <canvas> Gambar dinamis (JS/animasi)
67 Metadata <meta> Informasi metadata (charset, SEO)
68 Gaya dan Skrip <base> Base URL untuk semua link
69 Gaya dan Skrip <title> Judul halaman (tab browser)
70 Tag Semantik (HTML5) <header> Bagian atas (judul/logo/menu)
71 Tag Semantik (HTML5) <nav> Navigasi/menu
72 Tag Semantik (HTML5) <main> Konten utama
73 Tag Semantik (HTML5) <section> Bagian dari halaman (artikel, dsb)
74 Tag Semantik (HTML5) <article> Konten mandiri (post, berita, dll)
75 Tag Semantik (HTML5) <aside> Konten sampingan (sidebar, iklan)
76 Tag Semantik (HTML5) <footer> Bagian bawah halaman
77 Tag Semantik (HTML5) <figure>, <figcaption>> Gambar dengan keterangan
No Kategori Tag Fungsi
Link Referensi

Apa itu Atribut HTML?

Atribut HTML adalah informasi tambahan yang diberikan di dalam tag HTML untuk memberikan pengaturan, informasi, atau fungsi pada elemen tersebut.

Atribut selalu:

  • Ditempatkan di dalam tag pembuka (bukan di tag penutup).
  • Memiliki format: nama="nilai"

Contoh Atribut Umum:

No Tag Atribut Fungsi
1 <a> href, target, title Tujuan link, buka tab baru, tooltip
2 <img> src, alt, width, height Gambar, teks alternatif, ukuran
3 <input> type, name, placeholder, value Jenis input, identitas, teks isian
4 <form> action, method Tujuan dan metode kirim data form
5 <button> type, disabled Jenis tombol, nonaktifkan tombol
6 <div> id, class Untuk CSS dan JavaScript
No Tag Atribut Fungsi

Contoh Studi Kasus

<img src="gambar.jpg" alt="Gambar bunga" width="200">

  • src → lokasi gambar
  • alt → teks jika gambar tidak bisa ditampilkan
  • width → lebar gambar

Atribut Khusus untuk Styling dan JS

<div id="kotak1" class="merah" style="border:1px solid black;" onclick="alert('Halo!')">Klik saya</div>

  • id: memberi identitas unik
  • class: memberi kelompok (untuk CSS)
  • style: menambahkan gaya langsung
  • onclick: menjalankan JavaScript saat diklik

Struktur Dasar HTML

Struktur HTML adalah kerangka utama dari sebuah halaman web. Berikut ada Struktur Dasar HTML

 <!DOCTYPE html>
 <html lang="id">
   <head>
     <meta charset="UTF-8">
     <title>Judul Halaman</title>
   </head>
   <body>
     <h1>Halo Teman! </h1>
     <p>Selamat datang di halaman web saya. </p>
   </body>
 </html>

Penjelasan

  • <!DOCTYPE html>: Menandakan bahwa ini adalah dokumen HTML5.
  • <html>: Elemen utama yang membungkus seluruh dokumen.
  • <head>: Bagian untuk informasi halaman (judul, meta, CSS, JS).
  • <body>: Bagian utama yang menampilkan konten ke pengguna.

Layout HTML (Tata Letak Halaman)

HTML5 memperkenalkan tag semantik untuk mengatur bagian-bagian layout halaman agar lebih jelas:

No Tag Fungsi
1 <header> Bagian atas (logo, judul, navigasi)
2 <nav> Navigasi/menu
3 <main> Konten utama halaman
4 <section> Bagian dalam konten, bisa untuk topik/tema
5 <article> Konten mandiri seperti post atau berita
6 <aside> Konten samping (sidebar, iklan)
7 <footer> Bagian bawah (hak cipta, kontak, link lain)
No Tag Fungsi

Struktur Dasar HTML

Struktur HTML adalah kerangka utama dari sebuah halaman web. Berikut ada Struktur Dasar HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Website Saya</title>
</head>
<body>

  <header>
    <h1>Nama Website</h1>
    <nav>
      <a href="#">Beranda</a> |
      <a href="#">Tentang</a> |
      <a href="#">Kontak</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Artikel Terbaru</h2>
      <article>
        <h3>Judul Artikel</h3>
        <p>Ini adalah isi artikel.</p>
      </article>
    </section>

    <aside>
      <h4>Sidebar</h4>
      <p>Konten tambahan seperti iklan atau link terkait.</p>
    </aside>
  </main>

  <footer>
    <p>© 2025 Nama Anda. Semua hak dilindungi.</p>
  </footer>

</body>
</html>

Formulir HTML (HTML Form)

Adalah elemen dalam HTML yang digunakan untuk mengumpulkan data dari pengguna, seperti nama, email, komentar, pilihan, dll. Data ini biasanya dikirim ke server untuk diproses (misalnya untuk login, pendaftaran, atau survey).


✏️ Elemen Input Umum

No Tag Fungsi
1 <input type="text"> Input teks 1 baris)
2 <input type="password" > Input sandi
3 <input type="email"> Input email
4 <input type="number"> Input angka
5 <input type="checkbox"> Kotak centang
6 <input type="radio"> Pilihan tunggal
7 <input type="file"> Unggah file
8 <input type="submit"> Tombol kirim formulir
9 <input type="reset"> Reset isi formulir
10 <textarea> Input teks panjang
11 <select> + <option> Dropdown pilihan
12 <button> Tombol (bisa custom)
No Tag Fungsi

Contoh Struktur Formulir HTML: 

<form action="/submit" method="post">
  <label for="nama">Nama:</label><br>
  <input type="text" id="nama" name="nama"><br><br>

  <label for="gender">Jenis Kelamin:</label><br>
  <input type="radio" name="gender" value="pria"> Pria
  <input type="radio" name="gender" value="wanita"> Wanita<br><br>

  <label for="hobi">Hobi:</label><br>
  <input type="checkbox" name="hobi" value="membaca"> Membaca
  <input type="checkbox" name="hobi" value="menulis"> Menulis<br><br>

  <label for="pesan">Pesan:</label><br>
  <textarea name="pesan" rows="4" cols="30"></textarea><br><br>

  <input type="submit" value="Kirim">
</form>

🧱 1. Struktur Dasar Tabel

No Tag Fungsi
1 <table> Pembungkus utama tabel
2 <tr> Table row (baris)
3 <td> Table data (sel/kolom isi)
4 <th> Table heading (judul kolom/baris)
No Tag Fungsi

Contoh Struktur Table HTML: 

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Ani</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>22</td>
  </tr>
</table>

🎨 2. Atribut Tabel Penting

No Atribut Keterangan
1 border Ketebalan garis batas (misal border="1")
2 cellpadding Jarak dalam sel (padding)
3 cellspacing Jarak antar sel (spacing)
4 width Lebar tabel atau sel
5 align Penempatan: left, center, right
No Atribut Keterangan

🔗 3. Menggabungkan Sel

🔸 colspan → Menggabung kolom (horizontal)

<tr>
  <td colspan="2">Gabungan 2 kolom</td>
</tr>

🔸 rowspan → Menggabung baris (vertikal)

<tr>
  <td rowspan="2">Gabungan 2 baris</td>
  <td>Baris 1</td>
</tr>
<tr>
  <td>Baris 2</td>
</tr>

Apa itu Semantic HTML?

Semantic HTML adalah penggunaan tag HTML yang memiliki makna (arti) spesifik, bukan sekadar untuk penampilan. Misalnya:

  • <header> → bagian atas halaman
  • <article> → isi artikel
  • <footer> → bagian bawah halaman

Berbeda dengan tag non-semantik seperti <div> atau <span> yang tidak punya arti khusus.

Elemen-Elemen HTML Semantik

No Tag Fungsi
1 <header> Header halaman atau bagian tertentu (judul, logo, menu)
2 <nav> Navigasi atau menu utama
3 <main> Konten utama yang unik pada halaman
4 <article> Artikel mandiri seperti berita, posting blog
5 <section> Bagian terpisah dari konten, biasanya dengan judul
6 <aside> Konten samping, seperti sidebar, iklan, info tambahan
7 <figure> Mengelompokkan gambar dengan caption
8 <figcaption> Keterangan gambar dalam
9 <section> Bagian terpisah dari konten, biasanya dengan judul
10 <mark> Menyoroti teks penting
11 <time> Menandai waktu atau tanggal
No Tag Fungsi

Contoh Penggunaan Semantic HTML : 

<!DOCTYPE html>
<html>
<head>
  <title>Berita Hari Ini</title>
</head>
<body>

  <header>
    <h1>Portal Berita</h1>
    <nav>
      <a href="#">Beranda</a> |
      <a href="#">Berita</a> |
      <a href="#">Kontak</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Judul Berita</h2>
      <p>Diterbitkan pada <time datetime="2025-06-28">28 Juni 2025</time></p>
      <p>Isi artikel berita ada di sini...</p>
    </article>

    <aside>
      <h3>Berita Lain</h3>
      <ul>
        <li>Tips Belajar HTML</li>
        <li>Cara Membuat Tabel</li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2025 Portal Berita. All rights reserved.</p>
  </footer>

</body>
</html>

Manfaat Semantic HTML

  • Mudah dibaca oleh developer
  • Membantu SEO (struktur konten dikenali oleh mesin pencari)
  • Mendukung aksesibilitas (screen reader untuk tunanetra)
  • Struktur lebih rapi dan mudah dipelihara

💡 Apa itu CSS?

CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan/style halaman HTML: warna, ukuran, posisi, layout, dan lainnya.

🎯 Perbedaan HTML dan CSS

No HTML (Struktur) CSS (Tampilan)
1 Menyusun isi/konten Mengatur warna, font, dll
2 Digunakan untuk struktur Digunakan untuk desain
3 <p>Selamat datang</p> p { color: red; }
No HTML (Struktur) CSS (Tampilan)

🧩 3 Cara Menyisipkan CSS ke HTML

1. Inline CSS

Langsung di dalam tag HTML :

<p style="color: blue;">Halo Dunia</p>

2. Internal CSS

Dalam tag <style> di <head>

<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>

3. External CSS

File .css terpisah, disambungkan dengan < link>


<!-- Di file HTML -->
<link rel="stylesheet" href="style.css">
                                            

/* Di file style.css */
p {
  color: red;
}

📦 Contoh Sederhana: HTML + CSS

File: index.html


<!DOCTYPE html>
<html>
<head>
  <title>Contoh CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Selamat Datang</h1>
  <p>Ini adalah contoh penggunaan CSS.</p>

</body>
</html>

2. Internal CSS

File: style.css


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

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

p {
  color: gray;
  font-size: 18px;
}

🖼️ 1. Gambar di HTML (<img>)

Tag: <img>


<img src="gambar.jpg" alt="Deskripsi gambar" width="300" height="200">

🔊 2. Audio di HTML (<audio>)

Tag: <audio>


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

📌 Atribut:

No Atribut Fungsi
1 controls Menampilkan tombol play/pause
2 autoplay Memainkan otomatis (tanpa klik)
3 loop Memutar terus-menerus
4 muted Mulai dalam keadaan mute
No Atribut Fungsi

🎵 Format yang didukung:

  • MP3: audio/mpeg
  • OGG: audio/ogg
  • WAV: audio/wav

🎥 3. Video di HTML (<video>)

Tag: <video>


<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4"> 
</video>

📌 Atribut:

No Atribut Fungsi
1 controls Menampilkan tombol kontrol video
2 autoplay Memutar otomatis saat dimuat
3 loop Memutar ulang video
4 muted Awal video dalam keadaan mute
5 poster Gambar awal sebelum video diputar
No Atribut Fungsi

🧪 Contoh Lengkap: HTML + Gambar + Audio + Video

<!DOCTYPE html>
<html>
<head>
  <title>Media di HTML</title>
</head>
<body>

  <h2>Contoh Gambar</h2>
  <img src="HTML5_logo_and_wordmark.png" alt="Gambar contoh" width="150">

  <h2>Contoh Audio</h2>
  <audio controls>
    <source src="Friendship Wand - Freedom Trail Studio.mp3" type="audio/mpeg">
  </audio>

  <h2>Contoh Video</h2>
  <video width="320" height="240" controls>
    <source src="KEAJAIBAN RASA SYUKUR.mp4" type="video/mp4">
  </video>

</body>
</html>

🔖 Apa itu Meta Tag?

Meta tag adalah informasi (data tentang data) yang diletakkan di dalam <head> HTML untuk:

  • Memberi info ke mesin pencari
  • Mengatur tampilan halaman
  • Mengontrol perilaku browser

🧱 Contoh Struktur Meta Tag Dasar

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Belajar HTML dan CSS dari dasar hingga mahir.">
  <meta name="keywords" content="HTML, CSS, Belajar Web, Pemrograman Web">
  <meta name="author" content="Hendri Agustian">
  <title>Belajar HTML</title>
</head>

📦 Penjelasan Meta Tag Penting

No Tag Fungsi
1 <meta charset="UTF-8"> Mengatur karakter (huruf) agar tampil benar
2 <meta name="viewport"...> Membuat tampilan responsif di HP dan tablet
3 <meta name="description"...> Deskripsi singkat halaman (ditampilkan di Google)
4 <meta name="keywords"...> Kata kunci yang menggambarkan isi
5 <meta name="author"...> Nama pembuat halaman
6 <title>...</title> Judul halaman (muncul di tab browser dan hasil pencarian)
No tag Fungsi

🔍 SEO Dasar (Search Engine Optimization)

SEO membantu halaman web kamu muncul di hasil pencarian Google.

Tips SEO Dasar:

1. Gunakan judul yang relevan

Contoh:

<title>Tips Belajar HTML untuk Pemula</title>

2. Gunakan meta description yang menjelaskan isi halaman

Contoh:

<meta name="description" content="Panduan belajar HTML lengkap untuk pemula, cocok bagi yang baru mulai belajar coding.">

3. Gunakan heading dengan struktur logis

Contoh:

Gunakan <h1> sekali saja, lalu <h2>, <h3>, dll.

4. Gunakan gambar dengan atribut alt

Contoh:

<img src="profil.jpg" alt="Foto Profil Hendri">

5. Gunakan URL dan nama file yang rapi

Contoh:

belajar-html.html lebih baik daripada halaman1.html

6. Gunakan semantic HTML

Contoh:

Tag seperti <main>, <article>, <nav> membantu mesin pencari memahami struktur halaman.

🔸 Prevent Indexing (jika tidak ingin halaman muncul di Google)

<meta name="robots" content="noindex, nofollow">