Memulai Program Dasar HTML

Pengantar HTML

HyperText Markup Language (HTML) adalah tulang punggung dari hampir semua konten yang Anda lihat di web. Ini bukan bahasa pemrograman seperti JavaScript atau Python, melainkan bahasa markup yang digunakan untuk menyusun dan memberikan struktur pada halaman web. Setiap elemen di halaman—mulai dari teks, gambar, hingga tautan—didefinisikan menggunakan tag HTML.

Memahami program dasar HTML adalah langkah pertama yang krusial bagi siapa pun yang ingin terjun ke dunia pengembangan web. Dengan HTML, kita memberitahu browser bagaimana cara menampilkan informasi kepada pengguna.

Ilustrasi Struktur Dasar HTML <!DOCTYPE html> <html> <head>...</head> <body> <p>Konten Anda</p> </html>

Struktur Dokumen HTML Dasar

Setiap halaman HTML yang valid harus mengikuti struktur dasar tertentu. Struktur ini memastikan browser dapat menginterpretasikan dokumen dengan benar. Berikut adalah kerangka dasar yang wajib Anda ketahui:

  1. <!DOCTYPE html>: Ini bukan tag HTML, tetapi deklarasi yang memberi tahu browser versi HTML mana yang digunakan (selalu HTML5 saat ini).
  2. <html>: Tag akar yang membungkus semua elemen lain dalam dokumen.
  3. <head>: Berisi informasi meta tentang dokumen, seperti judul halaman (yang muncul di tab browser), tautan ke CSS, dan karakter set. Informasi di sini tidak ditampilkan langsung di halaman utama.
  4. <body>: Berisi semua konten yang terlihat oleh pengguna, seperti teks, gambar, tautan, dan tabel.

Contoh Kode Program Dasar

Inilah tampilan minimal dari sebuah file HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Halaman Pertama Saya</title>
</head>
<body>
    <h1>Selamat Datang di Dunia HTML</h1>
    <p>Ini adalah paragraf pertama saya. Tag paragraf adalah <p>.</p>
    <a href="https://www.example.com">Kunjungi Contoh Situs</a>
</body>
</html>

Tag Penting untuk Pemula

Setelah memahami struktur, mari kita lihat beberapa tag esensial yang sering digunakan dalam program dasar HTML:

Heading (Judul)

Digunakan untuk mendefinisikan hirarki judul, dari yang paling penting (h1) hingga yang kurang penting (h6).

<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Sub-Sub Judul</h3>

Paragraf dan Pemformatan Teks

Tag <p> digunakan untuk blok teks standar. Untuk penekanan, kita menggunakan:

Link (Hyperlink)

Tag <a> (anchor) adalah inti dari konsep hypertext. Atribut href menentukan tujuan tautan.

<a href="halaman-lain.html">Tautan Internal</a>
<a href="https://google.com" target="_blank">Tautan Eksternal (Buka Tab Baru)</a>

Gambar

Untuk menyisipkan gambar, kita menggunakan tag <img>. Tag ini bersifat mandiri (self-closing) dan memerlukan atribut wajib:

<img src="foto_saya.jpg" alt="Foto seorang programmer sedang mengetik kode" width="300">

Related Posts