1. Home
    2. »
  2. Web Design
    3. » Dasar-Dasar HTML

Dasar-Dasar HTML

Web Design
didi Comments

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur dan konten halaman web. Istilah "markup" mengacu pada penggunaan tag untuk menandai konten dan menentukan bagaimana konten tersebut harus ditampilkan di browser web.

Struktur Dasar HTML

Setiap halaman HTML memiliki struktur dasar yang sama. Ini adalah contoh struktur dasar HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Judul Halaman</title>
</head>
<body>
  <h1>Judul Utama</h1>
  <p>Ini adalah paragraf pertama.</p>
</body>
</html>

 

Penjelasan:

  • <!DOCTYPE html> : Deklarasi tipe dokumen, yang menginformasikan browser bahwa dokumen ini adalah HTML5.
  •  <html> : Tag pembuka dan penutup untuk keseluruhan dokumen HTML.
  •  <head> : Bagian kepala dokumen, berisi informasi tentang dokumen, seperti judul, meta-data, dan tautan ke file CSS.
  •  <title> : Tag yang menentukan judul halaman web yang akan ditampilkan di tab browser.
  •  <body> : Bagian tubuh dokumen, berisi konten yang akan ditampilkan di browser.
  •  <h1> : Tag untuk judul tingkat 1.
  •  <p> : Tag untuk paragraf.

Tag HTML Umum

Berikut adalah beberapa tag HTML umum yang digunakan untuk membuat konten web:

  •  <p> : Untuk membuat paragraf.
  •  <h1>  hingga  <h6> : Untuk membuat judul dengan berbagai tingkat.
  •  <b>, <strong> : Untuk membuat teks tebal (bold / strong).
  •  <i>, <em> : Untuk membuat teks miring (italic / emphasized).
  •  <br> : Untuk membuat baris baru (break line).
  •  <a> : Untuk membuat tautan (hyperlink).
  •  <img> : Untuk menampilkan gambar.
  •  <table>, <tr>, <td> : Untuk membuat tabel.
  •  <ul> : Untuk membuat daftar tidak bernomor (unordered list).
  •  <ol> : Untuk membuat daftar bernomor (ordered list).
  •  <li> : Untuk membuat item daftar (list item).

Contoh Lengkap

Berikut adalah contoh lengkap halaman HTML yang berisi berbagai tag:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Halaman HTML</title>
</head>
<body>

  <h1>Selamat Datang!</h1>

  <p>Ini adalah contoh halaman HTML sederhana.</p>

  <h2>Daftar Makanan Favorit</h2>
  <ul>
    <li>Pizza</li>
    <li>Burger</li>
    <li>Sushi</li>
  </ul>

  <p>Anda dapat mengunjungi situs web kami di <a href="https://www.example.com">https://www.example.com</a>.</p>

  <img src="gambar.jpg" alt="Gambar Contoh">

</body>
</html>
 

Penjelasan:

  • Kode ini menggunakan berbagai tag HTML untuk membuat judul, paragraf, daftar, tautan, dan gambar.
  • src  di tag  <img>  menunjukkan alamat file gambar yang akan ditampilkan.
  • alt  di tag  <img>  menyediakan teks alternatif untuk gambar, yang akan ditampilkan jika gambar tidak dapat dimuat.

Kesimpulan

Ini hanya dasar-dasar HTML. Ada banyak tag dan atribut HTML lainnya yang dapat digunakan untuk membuat halaman web yang lebih kompleks. Dengan memahami dasar-dasar ini, Anda dapat mulai membuat halaman HTML sederhana dan belajar lebih lanjut tentang HTML untuk membuat halaman web yang lebih canggih.

Quiz

Tags

Comments