Pernah ingin membuat website sendiri tetapi bingung harus mulai dari mana? Tenang! Dengan HTML, Anda bisa membuat halaman web sederhana hanya dalam 5 menit. HTML (HyperText Markup Language) adalah bahasa dasar untuk membangun struktur website.
Dalam panduan ini, Anda akan belajar:
✔️ Apa itu HTML dan bagaimana cara kerjanya?
✔️ Struktur dasar dokumen HTML
✔️ Tag HTML penting yang wajib diketahui
✔️ Membuat halaman web pertama Anda
Mari mulai! 🚀
1. Apa Itu HTML?
HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web. Setiap elemen di website (teks, gambar, tombol) dibangun menggunakan tag HTML.
Contoh sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>Bagaimana HTML Bekerja?
Browser membaca kode HTML dan menampilkannya sebagai halaman web.
HTML terdiri dari tag (contoh:
<h1>,<p>) yang memberi tahu browser bagaimana menampilkan konten.
2. Struktur Dasar HTML
Setiap dokumen HTML memiliki struktur standar:
<!DOCTYPE html> <!-- Deklarasi tipe dokumen -->
<html> <!-- Tag pembuka dokumen HTML -->
<head> <!-- Bagian metadata (judul, CSS, dll) -->
<title>Judul Halaman</title>
</head>
<body> <!-- Konten yang ditampilkan di browser -->
<h1>Heading Utama</h1>
<p>Paragraf teks.</p>
</body>
</html>Penjelasan:
<!DOCTYPE html>→ Memberi tahu browser bahwa ini adalah dokumen HTML5.<html>→ Elemen utama yang membungkus seluruh halaman.<head>→ Berisi informasi meta seperti judul, link CSS, dan SEO.<body>→ Tempat semua konten yang terlihat di website.
3. Tag HTML Penting yang Wajib Diketahui
✔️ Heading (<h1> sampai <h6>)
Digunakan untuk judul dan subjudul.
<h1>Judul Utama</h1> <!-- Ukuran terbesar -->
<h2>Subjudul</h2>
<h3>Sub-subjudul</h3>✔️ Paragraf (<p>)
Untuk menampilkan teks dalam bentuk paragraf.
<p>Ini adalah contoh paragraf.</p>✔️ Link (<a>)
Membuat hyperlink ke halaman lain.
<a href="https://codekreasi.com">Kunjungi CodeKreasi</a>✔️ Gambar (<img>)
Menampilkan gambar di halaman web.
<img src="gambar.jpg" alt="Deskripsi Gambar">✔️ Daftar (List)
Daftar tidak berurut (
<ul>)<ul> <li>Item 1</li> <li>Item 2</li> </ul>Daftar berurut (
<ol>)<ol> <li>Langkah pertama</li> <li>Langkah kedua</li> </ol>
✔️ Tombol (<button>)
Membuat tombol yang bisa diklik.
<button>Klik Saya!</button>4. Membuat Halaman Web Pertama dalam 5 Menit!
Langkah 1: Buka Text Editor
Anda bisa menggunakan:
Notepad (Windows)
TextEdit (Mac)
VS Code (Rekomendasi)
Langkah 2: Salin Kode HTML Berikut
<!DOCTYPE html>
<html>
<head>
<title>Website Pertamaku</title>
</head>
<body>
<h1>Selamat Datang di Website Saya!</h1>
<p>Halo! Ini adalah halaman web pertama saya.</p>
<a href="https://google.com">Kunjungi Google</a>
<img src="https://via.placeholder.com/150" alt="Contoh Gambar">
<button>Klik Ini!</button>
</body>
</html>Langkah 3: Simpan sebagai File .html
Klik File > Save As
Beri nama
website-pertama.htmlPastikan format disimpan sebagai All Files (bukan .txt).
Langkah 4: Buka di Browser
Buka file yang sudah disimpan dengan klik 2x (akan terbuka di browser default).
Atau, drag file ke browser (Chrome, Firefox, dll).
🎉 Selamat! Anda sudah membuat website pertama!
5. Tips Lanjutan untuk Pemula
Gunakan VS Code untuk fitur auto-complete HTML.
Pelajari CSS untuk mempercantik tampilan website.
Cek Validasi HTML di https://validator.w3.org/.
Kesimpulan
Anda baru saja belajar cara membuat halaman web sederhana dengan HTML dalam 5 menit! 🚀
Ingin belajar lebih lanjut?
✅ Kunjungi CodeKreasi.com untuk tutorial HTML, CSS, dan JavaScript.
✅ Coba tambahkan lebih banyak tag HTML seperti tabel (<table>) dan form (<form>).
Punya pertanyaan? Tulis di komentar! 😊
Tidak ada komentar:
Posting Komentar