Apa itu HTML?
HTML adalah singkatan dari bahasa H yper T ext M arkup L
HTML adalah bahasa markup standar untuk halaman Web
Elemen HTML adalah blok bangunan halaman HTML
Elemen HTML diwakili oleh tag <>
Elemen HTML
Elemen HTML adalah tag awal dan tag akhir dengan konten di antaranya:
<h1>Ini adalah Judul</h1>
Start tag | Element content | End tag |
---|---|---|
<h1> | This is a Heading | </h1> |
<p> | This is paragraph. | </p> |
Atribut HTML
- Elemen HTML dapat memiliki atribut
- Atribut memberikan informasi tambahan tentang elemen
- Atribut datang dalam pasangan nama/nilai seperti charset="utf-8"
Dokumen HTML Sederhana
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
Contoh Dijelaskan
Elemen HTML adalah blok bangunan halaman HTML.
- Deklarasi
<!DOCTYPE html>
mendefinisikan dokumen ini menjadi HTML5 - Elemen
<html>
adalah elemen root dari halaman HTML - Atribut
lang
mendefinisikan bahasa dokumen - Elemen tersebut
<meta>
berisi informasi meta tentang dokumen - Atribut
charset
mendefinisikan set karakter yang digunakan dalam dokumen - Elemen
<title>
menentukan judul untuk dokumen - Elemen
<body>
berisi konten halaman yang terlihat - Elemen
<h1>
mendefinisikan heading besar - Elemen
<p>
mendefinisikan paragraf
Dokumen HTML
Semua dokumen HTML harus dimulai dengan deklarasi tipe dokumen: <!DOCTYPE html>
.
Dokumen HTML itu sendiri dimulai dengan <html>
dan diakhiri dengan </html>
.
Bagian yang terlihat dari dokumen HTML adalah antara <body>
dan </body>
.
Struktur Dokumen HTML
Di bawah ini adalah visualisasi dokumen HTML (Halaman HTML):
Catatan: Hanya konten di dalam bagian <body> (area putih di atas) yang ditampilkan di browser.
Judul HTML
Judul HTML didefinisikan dengan tag <h1>
to .<h6>
<h1>
mendefinisikan judul yang paling penting. <h6>
mendefinisikan heading yang paling tidak penting:
Contoh
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Paragraf HTML
Paragraf HTML didefinisikan dengan <p>
tag:
Contoh
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Tautan HTML
Tautan HTML didefinisikan dengan <a>
tag:
Contoh
<a href="https://www.w3schools.com">This is a link</a>
Tujuan tautan ditentukan dalam href
atribut.
Gambar HTML
Gambar HTML didefinisikan dengan <img>
tag.
File sumber ( src
), teks alternatif ( alt
),
width
, dan height
disediakan sebagai atribut:
Contoh
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
Tombol HTML
Tombol HTML didefinisikan dengan <button>
tag:
Contoh
<button>Click me</button>
Daftar HTML
Daftar HTML didefinisikan dengan tag (daftar <ul>
tidak berurutan/bullet) atau
<ol>
(daftar berurutan/bernomor), diikuti oleh <li>
tag (daftar item):
Contoh
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Tabel HTML
Sebuah tabel HTML didefinisikan dengan sebuah <table>
tag.
Baris tabel didefinisikan dengan <tr>
tag.
Header tabel didefinisikan dengan <th>
tag. (tebal dan di tengah secara default).
Sel tabel (data) didefinisikan dengan <td>
tag.
Contoh
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Pemrograman HTML
Setiap elemen HTML dapat memiliki atribut .
Untuk pengembangan web dan pemrograman, atribut yang paling penting adalah id dan kelas. Atribut ini sering digunakan untuk menangani manipulasi halaman web berbasis program.
Atribut | Contoh |
---|---|
Indo | < id tabel ="tabel01" |
kelas | <p kelas ="normal"> |
gaya | <p style ="font-size:16px"> |
data- | <div data -id="500"> |
klik | <input onclick ="myFunction()"> |
di atas mouse | <a onmouseover ="this.setAttribute('style','color:red')"> |
Tutorial HTML Lengkap
Demikian penjelasan singkat tentang HTML.
Untuk tutorial HTML lengkap, buka Tutorial HTML W3Schools .
Untuk referensi tag HTML lengkap, buka Referensi Tag W3Schools .