Panduan dan Kerangka Dasar HTML

Agustus 08, 2023

HTML adalah singkatan dari "Hypertext Markup Language" (Bahasa Pemformatan Hiperteks). Ini adalah bahasa markup standar yang digunakan untuk membuat dan memformat konten halaman web. HTML digunakan untuk mendefinisikan struktur dan elemen-elemen dalam sebuah halaman web, seperti teks, gambar, tautan, formulir, dan lainnya.

Dalam HTML, halaman web dibangun dengan menggunakan elemen-elemen markup yang diatur dalam hierarki. Setiap elemen memiliki tanda awal dan akhir yang dikenal sebagai "tag", dan konten yang ingin ditampilkan ditempatkan di antara tag tersebut. Tag juga dapat memiliki atribut yang memberikan informasi tambahan tentang elemen.

Contoh beberapa elemen HTML:

`<h1>` sampai `<h6>`: Elemen heading yang digunakan untuk judul halaman dengan tingkat hierarki yang berbeda.
`<p>`: Elemen paragraf untuk teks.
`<a>`: Elemen tautan (link) untuk menghubungkan halaman atau sumber daya.
`<img>`: Elemen gambar untuk menampilkan gambar di halaman.
`<ul>` dan `<li>`: Elemen daftar tak terurut (unordered list) dan item dalam daftar.
`<ol>` dan `<li>`: Elemen daftar terurut (ordered list) dan item dalam daftar.
`<div>` dan `<span>`: Elemen kontainer yang digunakan untuk mengelompokkan dan memformat konten.
`<form>`: Elemen untuk membuat formulir yang memungkinkan pengguna menginput data.
`<input>`, `<textarea>`, `<select>`: Elemen-elemen untuk input teks, area teks panjang, dan pilihan dalam formulir.

HTML bekerja bersama dengan CSS (Cascading Style Sheets) untuk mengatur tampilan dan gaya visual dari elemen-elemen di halaman web. HTML juga dapat berinteraksi dengan JavaScript untuk menambahkan interaktivitas dan fungsi dinamis ke halaman web.

Ketika browser mengurai halaman web, ia menginterpretasikan kode HTML untuk membangun tampilan visual yang dapat dilihat oleh pengguna.

Berikut adalah contoh kerangka dasar HTML yang dapat Anda gunakan sebagai awal dalam membuat halaman web:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <header>
        <h1>Selamat Datang di Situs Saya</h1>
        <nav>
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Layanan</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </nav>
    </header>

    <section>
        <h2>Tentang Kami</h2>
        <p>Kami adalah tim yang berdedikasi dalam...</p>
    </section>

    <section>
        <h2>Layanan Kami</h2>
        <ul>
            <li>Desain Web</li>
            <li>Pengembangan Aplikasi</li>
            <li>Pemasaran Digital</li>
        </ul>
    </section>

    <footer>
        <p>Hak Cipta © 2023 Nama Perusahaan.</p>
    </footer>
</body>
</html>

Penjelasan singkat:

`<!DOCTYPE html>`: Deklarasi tipe dokumen untuk menyatakan bahwa ini adalah halaman HTML.
`<html>`: Elemen root dari halaman HTML.
`<head>`: Bagian ini berisi informasi tentang dokumen, termasuk judul halaman yang akan ditampilkan di tab browser.
`<title>`: Menentukan judul halaman yang akan ditampilkan di tab browser.
`<body>`: Bagian ini berisi konten yang akan ditampilkan di halaman web.
`<header>`: Bagian atas halaman yang biasanya berisi judul utama dan navigasi.
`<nav>`: Elemen untuk menampilkan bagian navigasi.
`<ul>`: Elemen daftar tak terurut.
`<li>`: Elemen item dalam daftar.
`<section>`: Bagian konten yang terpisah dengan judul yang menggambarkan isinya.
`<h1>`, `<h2>`: Elemen heading (judul) dengan tingkat hierarki yang berbeda.
`<p>`: Elemen paragraf untuk teks.
`<footer>`: Bagian bawah halaman yang berisi informasi seperti hak cipta atau informasi kontak.

Anda dapat mengganti teks dan struktur ini sesuai dengan kebutuhan Anda untuk membuat halaman web yang sesuai dengan tujuan Anda.