Belajar HTML tidak perlu ribet. Dengan panduan step-by-step ini, kamu akan bisa membuat halaman web sederhana dengan cepat dan mudah. Panduan ini cocok untuk pemula yang ingin menguasai dasar HTML secara praktis dan langsung bisa dipakai.
Apa Itu HTML?
HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur halaman web. HTML membantu browser menampilkan teks, gambar, tautan, dan elemen lain secara teratur dan mudah dibaca.
Baca juga: Besar-besaran, Warga AS Akan Gelar Aksi Protes Trump di 1.600 Lokasi
Langkah 1: Membuat Struktur Dasar HTML
Setiap halaman web dimulai dengan struktur dasar berikut:
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<!-- Konten akan ditaruh di sini -->
</body>
</html>
<!DOCTYPE html>memberitahu browser bahwa ini adalah dokumen HTML5<html>adalah elemen utama pembungkus seluruh isi halaman<head>berisi informasi seperti judul dan metadata<body>berisi konten yang akan tampil ke pengguna
Langkah 2: Menambahkan Judul dan Paragraf
Tambahkan judul dan paragraf agar halaman jadi informatif:
htmlCopyEdit<body>
<h1>Selamat Datang di Website Saya</h1>
<p>Ini adalah paragraf pertama yang saya buat menggunakan HTML.</p>
</body>
<h1>sampai<h6>digunakan untuk judul dengan tingkatan berbeda<p>untuk menampilkan teks paragraf
Langkah 3: Menyisipkan Gambar dan Tautan
Untuk mempercantik halaman, tambahkan gambar dan tautan:
htmlCopyEdit<img src="https://via.placeholder.com/150" alt="Contoh Gambar">
<p>Kunjungi <a href="https://www.example.com">website favorit saya</a> untuk belajar lebih banyak.</p>
<img>menampilkan gambar dengan atributsrcdanalt<a>membuat tautan yang bisa diklik
Langkah 4: Membuat Daftar
HTML juga memungkinkan kamu membuat daftar berurutan dan tidak berurutan:
htmlCopyEdit<h2>Daftar Hobi Saya</h2>
<ul>
<li>Membaca</li>
<li>Menulis</li>
<li>Ngoding</li>
</ul>
<ul>untuk daftar tidak berurutan (bullet points)<ol>untuk daftar berurutan (nomor)<li>adalah item daftar
Langkah 5: Membuat Formulir Sederhana
Formulir berguna untuk input data pengguna:
htmlCopyEdit<form>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama kamu">
<br><br>
<input type="submit" value="Kirim">
</form>
Tips Belajar HTML dengan Cepat
- Praktik langsung dengan membuat halaman sederhana
- Gunakan editor teks seperti Visual Studio Code
- Pelajari dokumentasi resmi di MDN Web Docs
- Ikuti tutorial interaktif seperti di W3Schools
Baca juga:Universitas Teknokrat Indonesia: Mahathir Muhammad Lepas Atlet Karate Lampung Menuju SEA Games 2025
Kesimpulan
Dengan mengikuti panduan step-by-step ini, kamu sudah bisa membuat halaman web dasar hanya dalam waktu singkat. HTML adalah fondasi yang wajib dikuasai sebelum melangkah ke CSS dan JavaScript.
Penulis: Indra