Pengertian Dasar Dasar HTML Panduan Beserta Contohnya

HTML, singkatan dari HyperText Markup Language, adalah bahasa markup yang digunakan untuk membuat dan mendesain konten pada World Wide Web. HTML memberikan struktur dan arti pada elemen-elemen pada halaman web, memungkinkan browser untuk merender konten dengan benar.

Struktur Dasar HTML

Setiap halaman web HTML memiliki struktur dasar yang terdiri atas elemen-elemen kunci. Inilah struktur umum dari halaman HTML:

html
<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Halo, Dunia!</h1>
    <p>Ini adalah contoh paragraf.</p>
</body>
</html>

<!DOCTYPE html>: Mendefinisikan dokumen sebagai dokumen HTML5.

<html>: Mengawali elemen HTML yang merupakan elemen akar dari halaman web.

<head>: Berisi informasi-informasi tentang dokumen, seperti judul dan tautan ke file eksternal.

<title>: Menetapkan judul untuk halaman web, yang akan ditampilkan pada tab browser.

<body>: Berisi konten utama dari halaman web, seperti teks, gambar, dan elemen-elemen lainnya.

Elemen HTML Umum

1. Heading Elements (Elemen Heading)

Elemen heading digunakan untuk menampilkan judul atau heading pada halaman web dengan tingkatan yang berbeda (dari <h1> hingga <h6>).

html
<p>Ini adalah contoh paragraf pertama.</p>
<p>Ini adalah contoh paragraf kedua.</p>

3. List Elements (Elemen Daftar)

HTML memiliki dua jenis daftar utama: daftar tak terurut (<ul>) dan daftar terurut (<ol>).

Daftar Tak Terurut (Unordered List):

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

Daftar Terurut (Ordered List):

html
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

4. Link Element (Elemen Tautan)

Elemen tautan (<a>) digunakan untuk membuat tautan ke halaman web lain atau sumber daya.

html
<a href="https://www.example.com">Kunjungi Contoh Situs Web</a>

5. Image Element (Elemen Gambar)

Elemen gambar (<img>) digunakan untuk menampilkan gambar pada halaman web.

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

Contoh Lengkap Halaman HTML

Berikut adalah contoh lengkap sebuah halaman HTML yang mencakup elemen-elemen dasar:

html
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Halaman HTML</title>
</head>
<body>
    <h1>Selamat Datang di Halaman HTML</h1>
    <p>Ini adalah contoh paragraf pada halaman HTML.</p>

    <h2>Elemen Daftar</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <h2>Elemen Tautan</h2>
    <a href="https://www.example.com">Kunjungi Contoh Situs Web</a>

    <h2>Elemen Gambar</h2>
    <img src="gambar.jpg" alt="Deskripsi Gambar">
</body>
</html>

Dengan HTML, Anda dapat membangun landasan halaman web yang akan membentuk struktur dan tata letak dari konten Anda. Kombinasi dengan CSS untuk gaya dan JavaScript untuk interaktifitas, HTML adalah kunci untuk menciptakan pengalaman web yang kaya dan dinamis. Selamat mengeksplorasi dan membangun halaman web Anda sendiri dengan HTML!

Pengertian Dasar Dasar HTML Panduan Beserta Contohnya

Formulir Kontak