Tutorial HTML Dasar

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. Dalam tutorial ini, kita akan mempelajari dasar-dasar HTML untuk membangun struktur halaman web sederhana.

1. Apa itu HTML

HTML adalah bahasa standar untuk membuat halaman web. HTML memberikan struktur pada halaman web menggunakan elemen-elemen yang disebut tag. Tag HTML biasanya memiliki format sebagai berikut:

HTML
copy.png
copy
<tag>Konten</tag>

2. Struktur Dasar HTML

Setiap halaman HTML dimulai dengan deklarasi <!DOCTYPE html>, diikuti dengan elemen-elemen dasar seperti <html>, <head>, dan <body>. Berikut adalah contoh struktur dasar sebuah halaman HTML:

HTML
copy.png
copy
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Judul Halaman</title>
</head>
<body>
  <h1>Selamat Datang di Tutorial HTML</h1>
  <p>Ini adalah paragraf pertama pada halaman web Anda.</p>
</body>
</html>

Penjelasan

  • <!DOCTYPE html>: Menunjukkan bahwa dokumen ini menggunakan HTML5.
  • <html>: Elemen root yang membungkus seluruh konten halaman.
  • <head>: Berisi metadata tentang halaman, seperti <title> untuk judul halaman.
  • <body>: Berisi konten utama yang akan ditampilkan di halaman web.

3. Elemen HTML Utama

  • Heading: Digunakan untuk membuat judul. Ada enam level heading, dari <h1> hingga <h6>.
HTML
copy.png
copy
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
  • Paragraf: Digunakan untuk menulis teks paragraf.
HTML
copy.png
copy
<p>Ini adalah paragraf</p>
  • Tautan: Menghubungkan ke halaman web lain atau situs web.
HTML
copy.png
copy
<a href="https://www.example.com">Kunjungi Example.com</a>
  • Gambar: Menyisipkan gambar ke dalam halaman web.
HTML
copy.png
copy
<img src="gambar.jpg" alt="Deskripsi Gambar">
  • Daftar: Menyusun item dalam daftar, baik yang terurut (<ol>) atau tidak terurut (<ul>).
HTML
copy.png
copy
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

4. Formulir

Formulir digunakan untuk mengumpulkan data dari pengguna. Berikut adalah contoh formulir sederhana:

HTML
copy.png
copy
<form action="/submit" method="post">
  <label for="name">Nama:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Kirim">
</form>

Penjelasan

  • <form>: Elemen yang membungkus seluruh formulir.
  • <label>: Memberikan label untuk elemen input.
  • <input>: Elemen input untuk memasukkan data.

5. Kesimpulan

HTML adalah fondasi dari semua halaman web. Dengan memahami dasar-dasar HTML, Anda dapat mulai membangun halaman web yang sederhana dan efektif. Terus eksplorasi dan belajar lebih banyak tentang elemen HTML lainnya untuk memperluas keterampilan web Anda!