Contoh Pemrograman HTML: Fondasi Web Modern

HTML (HyperText Markup Language) adalah tulang punggung dari hampir setiap halaman web yang Anda kunjungi. Memahami dasar-dasar HTML adalah langkah pertama yang krusial bagi siapa saja yang ingin terjun ke dunia pengembangan web. Artikel ini akan memberikan contoh praktis dan penjelasan mengenai elemen-elemen dasar HTML yang sering digunakan.

Struktur Dasar Dokumen HTML

Setiap dokumen HTML harus dimulai dengan deklarasi <!DOCTYPE html>, diikuti oleh elemen akar <html>. Di dalam <html>, terdapat dua bagian utama: <head> (untuk metadata) dan <body> (untuk konten yang terlihat). 

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Halaman Saya</title>
</head>
<body>
    <h1>Halo Dunia</h1>
</body>
</html>

Elemen Konten Utama

Di dalam tag <body>, kita menggunakan berbagai elemen untuk menyusun konten. Contohnya adalah heading (<h1> sampai <h6>), paragraf (<p>), dan tautan (<a>). Tautan adalah inti dari konsep "HyperText", memungkinkan navigasi antar halaman.

Penggunaan Tautan dan Pemformatan Teks

Berikut adalah contoh bagaimana menyematkan tautan eksternal dan menggunakan pemformatan teks seperti tebal (<strong>) atau miring (<em>). 

<p>Kunjungi situs resmi <a href="https://developer.mozilla.org/">Mozilla Developer Network</a> untuk referensi mendalam. Ini adalah teks <strong>penting</strong> dan ini <em>sedikit miring</em>.</p>

Visualisasi Sederhana dengan SVG

HTML juga mampu menampung elemen visual. Walaupun gambar raster (JPEG/PNG) umum digunakan, Scalable Vector Graphics (SVG) adalah format berbasis XML yang sangat baik untuk ikon dan ilustrasi sederhana karena ukurannya kecil dan dapat diskalakan tanpa kehilangan kualitas. Berikut adalah contoh SVG sederhana yang merepresentasikan sebuah kode:

{ <html> } Code Representasi SVG Sederhana dari Struktur Kode

Daftar Terstruktur

Daftar adalah cara fundamental untuk menyajikan informasi secara terorganisir. HTML menyediakan daftar tidak berurutan (<ul>) dan daftar berurutan (<ol>). Setiap item dalam daftar ditandai dengan <li> (list item).

Daftar Tidak Berurutan (UL)

Daftar Berurutan (OL)

  1. Definisikan langkah 1
  2. Lanjutkan ke langkah 2
  3. Selesaikan proses

Tabel Data Sederhana

Untuk menampilkan data tabular, tag <table> digunakan. Meskipun CSS modern sering digunakan untuk tata letak yang kompleks, struktur dasar tabel HTML tetap vital. Tabel terdiri dari baris (<tr>) dan sel data (<td>) atau sel header (<th>). 

<table border="1">
  <tr>
    <th>Nama Properti</th>
    <th>Fungsi</th>
  <tr>
  <tr>
    <td>href</td>
    <td>Alamat tujuan tautan</td>
  </tr>
</table>

Menguasai elemen-elemen dasar ini—struktur, teks, tautan, daftar, dan tabel—memberikan fondasi yang kokoh. Dari sini, Anda dapat melanjutkan untuk mempelajari struktur yang lebih canggih seperti elemen semantik HTML5 (<header>, <article>, <footer>) dan integrasi dengan CSS serta JavaScript. Ingat, HTML adalah tentang *struktur*, sementara CSS mengatur *presentasi*.

Related Posts