Pengenalan HTML - Fondasi Web Design

1. Pendahuluan

Apa itu HTML: HTML (Hypertext Markup Language) adalah bahasa komputer yang digunakan untuk membuat kerangka atau struktur halaman website di internet.
Fungsi HTML: HTML berfungsi sebagai 'kerangka' yang menyusun elemen-elemen pada website seperti teks, gambar, video, dan link agar dapat ditampilkan dengan benar di web browser.
Bagaimana HTML Bekerja di Web Browser: Web browser seperti Chrome, Firefox, Edge, Safari, atau Opera akan membaca dokumen HTML dan memahami tag-tag yang ada di dalamnya untuk menampilkan konten sesuai struktur yang ditentukan.

2. HTML, CSS, dan JavaScript dalam Web Development

Selain HTML, ada juga bahasa lain yang berperan penting, yaitu CSS (Cascading Style Sheets) dan JavaScript. Berikut adalah analogi sederhana untuk memahami fungsi masing-masing:

HTML: Berperan sebagai kerangka utama yang memberi struktur dasar pada website.
CSS: Berperan sebagai 'baju' yang memberi warna, tata letak, dan gaya tampilan pada elemen-elemen HTML.
JavaScript: Menambahkan interaktivitas, membuat website menjadi lebih hidup dan dapat berinteraksi dengan pengguna.

3. Struktur Dasar HTML

Setiap dokumen HTML memiliki struktur yang terdiri dari elemen-elemen utama, yang ditulis menggunakan tag HTML. HTML tag sendiri terbagi menjadi dua jenis utama, yaitu tag pembuka dan tag penutup.

HTML Tag

HTML terdiri dari komponen-komponen yang disebut HTML Tag, yang digunakan untuk mengidentifikasi dan menyusun elemen-elemen di halaman web.

Tag Pembuka (Opening Tag)
- Tag pembuka digunakan untuk menandai awal suatu elemen.
- Ditulis di antara tanda kurung sudut < > tanpa garis miring.
- Contoh: <html>, <head>, <title>, <body>, <h1>, dan <p>.
Tag Penutup (Closing Tag)
- Tag penutup digunakan untuk menandai akhir elemen yang sama.
- Ditulis mirip dengan tag pembuka tetapi terdapat garis miring (/) di depan nama tag.
- Contoh: </html>, </head>, </title>, </body>, </h1>, dan </p>.

Contoh Format Tag Pembuka dan Penutup

Sebagai contoh, berikut adalah format penulisan tag pembuka dan penutup untuk elemen paragraf:

Pada contoh di atas:

Elemen Utama dalam Dokumen HTML

Berikut adalah penjelasan tentang masing-masing elemen utama yang menggunakan tag pembuka dan penutup:

<!DOCTYPE html>
- Ini adalah deklarasi yang ditempatkan di awal dokumen HTML.
- Menyatakan bahwa dokumen ini menggunakan HTML5, standar terbaru dalam HTML, sehingga browser akan merender dokumen sesuai standar modern.
<html>
- Elemen ini adalah "root" atau elemen utama dari dokumen HTML.
- Semua konten HTML diletakkan di dalam elemen <html>. Ini menandakan awal dan akhir dari sebuah halaman web.
<head>
- Elemen <head> berisi informasi-informasi penting yang tidak terlihat langsung di halaman web tetapi dibutuhkan oleh browser, seperti:
  - Title (<title>) yang muncul di tab browser.
  - Metadata seperti deskripsi halaman dan pengaturan karakter yang digunakan (<meta charset="UTF-8">).
  - Link ke file CSS atau font yang digunakan di halaman.
- Contoh:
```
<head>
    <title>Judul Halaman</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
```
<body>
- Elemen <body> berisi semua konten yang akan terlihat oleh pengguna di halaman web, seperti teks, gambar, video, dan elemen interaktif lainnya.
- Segala yang berada di dalam <body> akan ditampilkan oleh browser.
- Contoh:
```
<body>
    <h1>Halo, Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
</body>
```

Jadi, secara keseluruhan, dokumen HTML yang lengkap memiliki struktur dasar seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
</body>
</html>

4. Elemen Dasar HTML

Heading (<h1> sampai <h6>)
Paragraf (<p>)
Link (<a href="url">)
Gambar (<img src="url" alt="teks alternatif">)

5. Atribut pada Elemen HTML

Apa itu Atribut: Contoh atribut seperti src untuk <img> atau href untuk <a>.

Contoh Penggunaan Atribut:

<a href="https://example.com">Kunjungi Situs</a>
<img src="gambar.jpg" alt="Gambar Contoh">

6. Menyusun Layout Sederhana dengan HTML

List: Menjelaskan ordered list (<ol>) dan unordered list (<ul>)
Tabel: Memperkenalkan <table>, <tr>, <td>, dan <th>

Contoh Penggunaan List dan Tabel:

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

<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>20</td>
  </tr>
</table>

7. Kesimpulan

HTML adalah fondasi dari halaman web dan berfungsi sebagai kerangka dasar. Dengan memahami HTML, kita sudah selangkah lebih dekat untuk membangun website sendiri. Selanjutnya, kita dapat mempelajari CSS untuk mempercantik tampilan dan JavaScript untuk menambahkan interaktivitas.

Halo, saya seorang penulis artikel yang masih dalam tahap belajar dan terus mengembangkan kemampuan di dunia penulisan.

Ilham Maulana

Pengenalan HTML - Fondasi Web Design