Rama.

Tutorial Belajar HTML Part 2 — Memahami Element dalam HTML: Struktur Dasar Halaman Web

Pada dasarnya, sebuah halaman web dibangun dengan menggunakan

berbagai elemen atau “tags” dalam HTML (Hypertext Markup Language).

Elemen-elemen ini memberikan struktur dasar yang mendefinisikan

bagaimana konten akan ditampilkan di browser. Memahami struktur dasar

halaman web merupakan langkah awal yang penting dalam belajar

pengembangan web.

Elemen-Elemen Kunci HTML

  1. <!DOCTYPE html>

    Elemen ini menandakan versi HTML yang digunakan. Dalam contoh di
    bawah, ini menunjukkan bahwa kita menggunakan HTML5.

  2. <html>

    Ini adalah elemen induk yang menyatakan bahwa dokumen yang ditulis
    adalah dokumen HTML.

  3. <head>

    Bagian ini berisi informasi tentang dokumen seperti judul halaman (dapat
    dilihat di tab browser), tautan ke file CSS, meta informasi, dan lainnya.

  4. <title>

    Elemen ini menentukan judul halaman yang akan ditampilkan di tab
    browser

  5. <body>

    Bagian ini berisi semua konten yang akan ditampilkan di halaman web,
    seperti teks, gambar, tautan, dan elemen-elemen lainnya.

Contoh Struktur Dasar Halaman Web

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman Web Anda</title>
<!– Tambahkan tautan ke file CSS, meta informasi, dan elemen lainnya di sini –>
</head>
<body>
<header>
<h1>Selamat Datang!</h1>
<nav>
<ul>
<li><a href=”#home”>Beranda</a></li>
<li><a href=”#about”>Tentang Kami</a></li>
<li><a href=”#services”>Layanan</a></li>
<li><a href=”#contact”>Kontak</a></li>
</ul>
</nav>
</header>

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman Web Anda</title>
<!– Tambahkan tautan ke file CSS, meta informasi, dan elemen lainnya di sini –>
</head>
<body>
<header>
<h1>Selamat Datang!</h1>
<nav>
<ul>
<li><a href=”#home”>Beranda</a></li>
<li><a href=”#about”>Tentang Kami</a></li>
<li><a href=”#services”>Layanan</a></li>
<li><a href=”#contact”>Kontak</a></li>
</ul>
</nav>
</header>

Penjelasan struktur

  • <header>: Berisi elemen-elemen terkait kepala halaman seperti judul
    besar, navigasi, atau logo.
  • <nav>: Bagian navigasi yang biasanya berisi tautan menu.
  • <main>: Berisi konten utama dari halaman web.
  • <section>: Bagian-bagian yang memiliki konten terpisah, masing-masing
    dengan id yang memungkinkan tautan langsung ke bagian tersebut.
  • <footer>: Bagian penutup halaman yang berisi informasi hak cipta atau
    tautan-tautan penting lainnya.

Dengan memahami elemen-elemen dasar ini, Anda dapat membuat struktur
dasar yang kokoh untuk halaman web Anda. Kemudian, Anda dapat
melanjutkan dengan menambahkan gaya dan desain menggunakan CSS
serta fungsionalitas dinamis dengan JavaScript untuk membuat halaman
web menjadi lebih dinamis dan menarik. Semoga artikel ini membantu
Anda memahami struktur dasar dari sebuah halaman web dalam HTML.