HTML (HyperText Markup Language)
HTML adalah bahasa markah yang digunakan untuk membuat dan menyusun halaman web. HTML menggunakan elemen-elemen yang disebut tag untuk menandai konten. Tag ini membantu browser untuk memahami struktur konten seperti judul, paragraf, gambar, tabel, form, dan banyak lagi.
Text Editor
Text editor adalah aplikasi yang digunakan untuk menulis dan mengedit kode HTML dan berbagai bahasa pemrograman lainnya. Beberapa contoh text editor populer untuk mengedit HTML adalah:
- Notepad (Windows)
- TextEdit (macOS)
- VS Code (Visual Studio Code)
- Sublime Text
- Atom
Text editor yang baik biasanya mendukung fitur syntax highlighting, auto-completion, dan dapat dihubungkan dengan extension untuk meningkatkan produktivitas pengkodean.
🟢 Langkah 1 – Struktur Dasar HTML
“Setiap website itu punya kerangka.
Seperti rumah, HTML adalah pondasi dan rangkanya.”
Buat file index.html, lalu isi:
<!DOCTYPE html>
<html>
<head>
<title>Website Pertamaku</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah website pertamaku.</p>
</body>
</html>
Penjelasan:
<!DOCTYPE html>→ memberi tahu browser bahwa ini dokumen HTML<html>→ pembungkus seluruh halaman<head>→ bagian informasi (judul tab)<body>→ semua yang tampil di layar<h1>→ judul besar<p>→ paragraf
Jika dibuka di browser, kita akan melihat teks sederhana.
Inilah website pertama mereka.
🟢 Langkah 2 – Membuat Judul & Paragraf
Sekarang kita buat halaman lebih bermakna:
<h1>Toko Online SMK</h1>
<p>Belanja mudah, cepat, dan terjangkau</p>
Penjelasan :
“Tag
<h1>cocok untuk judul besar,
sedangkan<p>untuk kalimat biasa.”
🟢 Langkah 3 – Membuat Link (Menu)
Tambahkan:
<a href="#">Home</a> |
<a href="#">Produk</a> |
<a href="#">Kontak</a>
Penjelasan:
<a>artinya anchor (link)hrefadalah tujuan link
Ini adalah cikal bakal menu website.
🟢 Langkah 4 – Menampilkan Gambar
Tambahkan gambar dari internet:
<img src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f" width="300">
Penjelasan :
“Website bisa mengambil gambar langsung dari internet.
Kita hanya perlu URL gambarnya.”
🟢 Langkah 5 – Membuat Daftar Produk
<h2>Produk Kami</h2>
<div>
<h3>Kaos Polos</h3>
<p>Harga: Rp 50.000</p>
<button>Beli</button>
</div>
<div>
<h3>Sepatu Sneakers</h3>
<p>Harga: Rp 150.000</p>
<button>Beli</button>
</div>
Penjelasan:
<div>adalah kotak pembungkus- Setiap produk berada dalam satu
<div>
🟢 Langkah 6 – Membuat Tabel Data
<h2>Daftar Harga</h2>
<table border="1">
<tr>
<th>No</th>
<th>Nama Produk</th>
<th>Harga</th>
</tr>
<tr>
<td>1</td>
<td>Kaos Polos</td>
<td>Rp 50.000</td>
</tr>
<tr>
<td>2</td>
<td>Sepatu Sneakers</td>
<td>Rp 150.000</td>
</tr>
</table>
Penjelasan sederhana:
| Tag | Fungsi |
|---|---|
<table> | Membuat tabel |
<tr> | Baris |
<th> | Judul kolom |
<td> | Isi kolom |
🟢 Langkah 7 – Membuat Form Kontak
<h2>Hubungi Kami</h2>
<form>
<p>
Nama:<br>
<input type="text">
</p>
<p>
Email:<br>
<input type="email">
</p>
<p>
Pesan:<br>
<textarea rows="4"></textarea>
</p>
<button>Kirim</button>
</form>
Penjelasan :
“Form digunakan untuk menerima input dari pengguna,
seperti nama, email, dan pesan.”
🟢 Langkah 8 – Mengenal HTML5 Section
Kita coba bungkus bagian-bagian dengan:
<section>
<h2>Produk Kami</h2>
</section>
Penjelasan :
“
<section>digunakan untuk membagi halaman menjadi beberapa bagian,
agar struktur website rapi dan mudah dibaca.”
