Pengantar Dasar Pemrograman HTML Untuk Membuat Website

HTML (HyperText Markup Language) adalah salah satu bahasa pemrograman yang paling dasar dan penting untuk membuat dan membangun situs web. HTML menyediakan struktur dasar yang memungkinkan konten seperti teks, gambar, video, dan elemen lainnya ditampilkan di browser web.

Pengantar Dasar Pemrograman HTML

1. Apa Itu HTML?

HTML adalah bahasa markup standar yang digunakan untuk membuat halaman web. Hal ini mendefinisikan struktur konten dengan menggunakan elemen-elemen seperti teks, gambar, tautan, tabel, dan lainnya. Setiap elemen dalam HTML memiliki tag yang mendefinisikan peran elemen tersebut.

2. Komponen Dasar HTML

Berikut adalah beberapa komponen dasar dari sebuah halaman web menggunakan HTML:

Dokumen HTML
Setiap halaman HTML dimulai dengan <!DOCTYPE html>, diikuti oleh elemen-elemen lainnya.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah paragraf teks di halaman web.</p>
</body>
</html>

Tag Dasar
Beberapa tag umum dalam HTML:
- <h1> ... <h6>: Untuk membuat heading atau judul halaman.
- <p>: Untuk membuat paragraf teks.
- <a>: Untuk membuat tautan (link).
- <img>: Untuk menampilkan gambar.
- <ul> dan <ol>: Untuk membuat daftar (list).
- <table>: Untuk membuat tabel.

3. Struktur Dasar Halaman HTML

Doctype: Memberikan informasi bahwa ini adalah dokumen HTML.
```
<!DOCTYPE html>
```
Elemen HTML:
- <html>: Elemen utama untuk seluruh dokumen HTML.
Elemen <head>:
- Informasi terkait halaman seperti judul, meta tag, dan CSS.
Elemen <body>:
- Tempat untuk menampilkan konten halaman seperti teks, gambar, dan elemen lainnya.

4. Contoh Kode Dasar HTML

Berikut adalah contoh sederhana dari halaman HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Halaman Web</title>
</head>
<body>
    <h1>Selamat Datang di Situs Saya</h1>
    <p>Ini adalah paragraf pertama.</p>
    <a href="https://example.com">Klik di sini untuk menuju contoh situs</a>
</body>
</html>

5. Menambahkan Elemen Lain

Selain elemen dasar seperti paragraf dan heading, Anda juga dapat menambahkan elemen lainnya seperti:

Gambar

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

Tabel

<table>
    <tr>
        <th>Nama</th>
        <th>Umur</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
</table>

6. Menambahkan Gaya dengan CSS

Untuk mempercantik tampilan halaman HTML, Anda bisa menambahkan CSS (Cascading Style Sheets). Contohnya:

HTML

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    }
    h1 {
        color: #333;
    }
    p {
        color: #555;
    }
</style>

Dengan memahami elemen dasar HTML, Anda dapat mulai membuat halaman web sederhana yang bisa berkembang menjadi lebih kompleks seiring waktu.