Seri Pemrograman Web Dasar : Bagian 2 – HTML Tulang Punggung Website

04/25/2025 audhighasu

Pendahuluan

Setelah memahami konsep dasar web pada bagian pertama, sekarang saatnya kita mengenal HTML (HyperText Markup Language). HTML adalah bahasa markup standar yang digunakan untuk membuat dan menyusun halaman web. Tanpa HTML, tidak ada struktur yang jelas untuk konten yang kita lihat di browser. Mari kita eksplorasi lebih dalam tentang HTML!

Apa Itu HTML?

HTML adalah bahasa yang digunakan untuk mendeskripsikan struktur halaman web. Dengan HTML, kita dapat menentukan elemen-elemen seperti teks, gambar, tautan, tabel, dan banyak lagi. HTML menggunakan tag untuk menandai elemen-elemen ini. Setiap tag memiliki fungsi tertentu dan dapat memiliki atribut untuk memberikan informasi tambahan.

Struktur Dasar HTML

Setiap dokumen HTML dimulai dengan deklarasi <!DOCTYPE html> yang memberi tahu browser bahwa ini adalah dokumen HTML5. Berikut adalah struktur dasar dari sebuah dokumen HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Selamat Datang di Website Saya!</h1>
    <p>Ini adalah paragraf pertama di halaman web ini.</p>
</body>
</html>

Penjelasan Struktur:

<!DOCTYPE html>: Menyatakan bahwa dokumen ini adalah dokumen HTML5.
<html>: Elemen root dari halaman HTML.
<head>: Bagian yang berisi informasi meta, judul, dan link ke stylesheet.
- <title>: Judul halaman yang muncul di tab browser.
<body>: Bagian yang berisi konten yang ditampilkan di halaman.
- <h1>: Heading utama yang menampilkan teks besar.
- <p>: Paragraf yang berisi teks biasa.

Elemen dan Tag HTML

HTML terdiri dari berbagai elemen yang dapat digunakan untuk menyusun konten. Berikut adalah beberapa elemen dasar yang sering digunakan:

1. Heading

HTML menyediakan enam tingkat heading, dari <h1> hingga <h6>, di mana <h1> adalah yang paling penting dan terbesar.

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

2. Paragraf

Untuk menambahkan teks biasa, kita menggunakan tag <p>.

<p>Ini adalah paragraf yang menjelaskan sesuatu.</p>

3. Tautan

Tag <a> digunakan untuk membuat tautan ke halaman lain atau sumber daya.

<a href="https://www.example.com">Kunjungi Website Kami</a>

4. Gambar

Tag <img> digunakan untuk menampilkan gambar. Atribut src menentukan sumber gambar, dan alt memberikan deskripsi gambar.

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

5. Daftar

HTML mendukung dua jenis daftar: daftar terurut (<ol>) dan daftar tidak terurut (<ul>).

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<ol>
    <li>Langkah Pertama</li>
    <li>Langkah Kedua</li>
</ol>

Atribut HTML

Atribut memberikan informasi tambahan tentang elemen HTML. Atribut ditulis di dalam tag pembuka. Contoh atribut yang umum digunakan adalah href, src, dan alt.

<a href="https://www.example.com" target="_blank">Kunjungi Website Kami</a>

Contoh Penggunaan Atribut:

href: Menentukan URL untuk tautan.
target: Menentukan di mana untuk membuka tautan (misalnya, _blank untuk membuka di tab baru).

Kesimpulan

HTML adalah fondasi dari setiap halaman web. Memahami cara kerja HTML dan bagaimana menyusun elemen-elemen dasar sangat penting bagi siapa pun yang ingin terjun ke dunia pengembangan web. Dengan HTML, kita dapat membuat struktur yang jelas dan terorganisir untuk konten kita.

Di bagian selanjutnya, kita akan membahas CSS (Cascading Style Sheets), yang akan membantu kita mempercantik tampilan halaman web yang telah kita buat dengan HTML. Jadi, tetap semangat dan terus belajar!

audhighasu.com