Panduan Belajar HTML!
Ingin membuat website sendiri tapi bingung mulai dari mana? Tenang, jawabannya adalah HTML (HyperText Markup Language). HTML adalah bahasa dasar yang digunakan untuk membuat struktur halaman web. Hampir semua website yang ada di internet dibangun dengan HTML sebagai fondasinya.
Pada artikel ini, kita akan belajar:
- Apa itu HTML dan fungsinya
- Struktur dasar HTML
- Elemen-elemen penting dalam HTML
- Membuat halaman sederhana dengan teks, gambar, dan link
- Langkah-langkah membuat website portofolio pribadi
1. Apa Itu HTML?
HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur halaman web. HTML berfungsi sebagai kerangka dasar, tempat kita menuliskan teks, gambar, link, hingga video sebelum dihias dengan CSS atau diberi interaktivitas dengan JavaScript.
Bayangkan HTML sebagai tulang dari sebuah website, CSS sebagai pakaiannya, dan JavaScript sebagai ototnya yang membuat gerak.
2. Struktur Dasar HTML
Setiap file HTML memiliki struktur dasar seperti berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar HTML Dasar</title>
</head>
<body>
<h1>Halo, Dunia!</h1>
<p>Ini adalah halaman web pertama saya.</p>
</body>
</html>
Penjelasan:
<!DOCTYPE html>→ Memberi tahu browser bahwa ini adalah dokumen HTML5.<html>→ Elemen utama yang membungkus semua isi.<head>→ Berisi informasi meta, judul halaman, dan link eksternal (CSS/JS).<body>→ Bagian utama tempat konten halaman ditampilkan.
3. Elemen-Elemen Penting dalam HTML
Agar lebih paham, mari kenali elemen HTML yang sering dipakai:
- Heading (
<h1>–<h6>) → Judul atau subjudul artikel. - Paragraf (
<p>) → Menulis teks biasa. - Garis Horizontal (
<hr>) → Membuat garis pemisah. - Tautan (
<a>) → Membuat hyperlink ke halaman lain. - Gambar (
<img>) → Menambahkan gambar. - List (
<ul>,<ol>,<li>) → Membuat daftar poin atau nomor. - Formulir (
<form>) → Untuk input data seperti nama, email, pesan.
Contoh penggunaan:
<h2>Tentang Saya</h2>
<p>Halo! Nama saya Rodhi Faisal Mufid, seorang guru dan web developer.</p>
<img src="profil.jpg" alt="Foto Profil" width="200">
<h3>Hobi Saya</h3>
<ul>
<li>Menulis</li>
<li>Ngoding</li>
<li>Membaca</li>
</ul>
<a href="https://www.heroicweb.com">Kunjungi Website Saya</a>
4. Membuat Halaman HTML Sederhana
Setelah memahami elemen dasar, mari buat halaman web sederhana:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Pertama Saya</title>
</head>
<body>
<h1>Selamat Datang di Website Saya</h1>
<p>Saya sedang belajar HTML untuk membuat website portofolio.</p>
<h2>Kontak</h2>
<p>Email: contoh@email.com</p>
</body>
</html>
Jika Anda menyimpannya dengan nama index.html lalu dibuka di browser, maka website sudah jadi!
5. Membuat Website Portofolio Pribadi dengan HTML
Kini saatnya kita membuat website portofolio sederhana. Portofolio ini bisa digunakan untuk menampilkan profil, pengalaman, dan karya Anda.
Contoh Kode Portofolio HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofolio - Rodhi Faisal Mufid</title>
</head>
<body>
<header>
<h1>Rodhi Faisal Mufid</h1>
<p>Guru | Web Developer | Penulis</p>
<hr>
</header>
<section>
<h2>Tentang Saya</h2>
<p>Saya adalah seorang guru dan pengembang web yang suka menulis dan berbagi ilmu.</p>
</section>
<section>
<h2>Proyek</h2>
<ul>
<li>Website Heroic Web</li>
<li>Aplikasi Belajar Online</li>
<li>Artikel SEO di berbagai blog</li>
</ul>
</section>
<section>
<h2>Kontak</h2>
<p>Email: rodhi@email.com</p>
<p>LinkedIn: <a href="https://linkedin.com">linkedin.com/in/rodhi</a></p>
</section>
<footer>
<hr>
<p>© 2025 Mr Mufid. All Rights Reserved.</p>
</footer>
</body>
</html>
Kesimpulan
Belajar HTML dasar adalah langkah pertama untuk menjadi seorang web developer. Dengan HTML, Anda bisa:
- Membuat struktur halaman web
- Menambahkan teks, gambar, dan link
- Menyusun portofolio pribadi yang bisa dilihat orang lain
Setelah memahami HTML, KIta bisa lanjut belajar CSS untuk memperindah tampilan, lalu JavaScript untuk membuat website lebih interaktif.
Dengan memiliki web portofolio sederhana, peluang Anda di dunia digital, freelance, maupun karier akan semakin terbuka lebar.
0 Comments