Web Indo Studio – HTML (HyperText Markup Language) adalah fondasi dari semua halaman web. Dengan HTML, kamu bisa membuat struktur dasar sebuah website, seperti teks, gambar, tautan, dan lainnya. Yuk, kita mulai dari yang paling dasar!
Struktur Dasar HTML
Setiap dokumen HTML memiliki struktur umum seperti ini:
html
<!DOCTYPE html>
<html>
<head>
<title>Profil Saya</title>
</head>
<body>
<h1>Halo, saya Ihsan!</h1>
<p>Saya sedang belajar membuat website dengan HTML.</p>
<img src="foto-profil.jpg" alt="Foto Ihsan" width="200">
<p>Kunjungi <a href="https://example.com">website favorit saya</a>.</p>
</body>
</html>
Penjelasan:
<!DOCTYPE html>: Menyatakan bahwa ini adalah dokumen HTML5.<html>: Elemen utama yang membungkus seluruh konten.<head>: Bagian yang berisi informasi meta, seperti judul dan link CSS.<title>: Judul yang muncul di tab browser.<body>: Tempat semua konten yang terlihat oleh pengguna.
Elemen-Elemen HTML Dasar
Berikut beberapa elemen penting yang sering digunakan:
| Elemen | Fungsi |
|---|---|
<h1> sampai <h6> | Judul, dari yang paling besar (h1) sampai paling kecil (h6) |
<p> | Paragraf |
<a href="url"> | Tautan ke halaman lain |
<img src="gambar.jpg" alt="Deskripsi"> | Menampilkan gambar |
<ul> dan <li> | Daftar tak berurutan |
<ol> dan <li> | Daftar berurutan |
<br> | Baris baru (line break) |
<strong> | Teks tebal |
<em> | Teks miring |
Contoh Halaman HTML Sederhana
<!DOCTYPE html>
<html>
<head>
<title>Profil Saya</title>
</head>
<body>
<h1>Halo, saya Ihsan!</h1>
<p>Saya sedang belajar membuat website dengan HTML.</p>
<img src="foto-profil.jpg" alt="Foto Ihsan" width="200">
<p>Kunjungi <a href="https://example.com">website favorit saya</a>.</p>
</body>
</html>Tips Belajar HTML
- Gunakan editor teks seperti VS Code atau Notepad++.
- Simpan file dengan ekstensi
.html. - Buka file di browser (chrome, Ms Edge, firefox, dll) untuk melihat hasilnya.
- Coba ubah teks dan tambahkan elemen baru untuk bereksperimen.
