Dokumen HTML

0

Back to: Pemrograman HTML

0

Dokumen HTML

Dokumen HTML (HyperText Markup Language) adalah file teks yang digunakan untuk membuat halaman web dan aplikasi web. Sedangkan HTML sendiri adalah bahasa markup standar untuk web dan memberikan struktur dasar pada halaman web dengan mendefinisikan berbagai elemen seperti paragraf, judul, link, gambar, dan lain-lain.

Struktur Dasar Dokumen HTML

Berikut ini adalah struktur dasar HTML:

  • Setiap dokumen HTML dimulai dengan deklarasi <!DOCTYPE html> yang memberi tahu browser bahwa ini adalah dokumen HTML5.
  • Dokumen HTML biasanya terdiri dari elemen <html>, yang di dalamnya terdapat dua bagian utama: <head> dan <body>.

Elemen Utama Dokumen HTML

Sebuah elemen HTML terdiri dari tag awal, beberapa konten dan tag akhir, seperti contoh di bawah ini:

<nama-tag>Konten dari elemen…</nama-tag>

Tag dan Elemen

Tag HTML biasanya datang berpasangan, seperti <p> dan </p> untuk paragraf. Namun demikian, ada beberapa tag tidak memerlukan penutup, seperti <img> atau <br>.

Elemen HTML adalah seluruh bagian mulai dari tag awal sampai dengan tag akhir:

<h1>Judul Pertama Saya</h1>
<p>Paragraf Pertama Saya</p>

Tag awalKonten elemenTag akhir
<h1>Judul Pertama Saya</h1>
<p>Paragraf Pertama Saya</p>

Berikut adalah elemen yang utama dari HTML:

  • <html>: Elemen akar yang membungkus seluruh konten HTML.
  • <head>: Berisi meta-informasi tentang dokumen, seperti judul (<title>), pengaturan karakter (<meta>), dan link ke CSS atau JavaScript eksternal.
  • <body>: Berisi konten utama halaman web, seperti teks, gambar, link, tabel, formulir, dan elemen multimedia lainnya.

Contoh HTML Sederhana

Berikut contoh HTML yang sederhana:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Judul Pertama Saya</h1>
    <p>Paragraf pertama saya.</p>
</body>
</html>

Penjelasan dari contoh tersebut sebagai berikut:

  • <!DOCTYPE html> mendefinisikan bahwa dokumen tersebut adalah dokumen HTML5.
  • Elemen <html> merupakan elemen akar dari halaman HTML.
  • Elemen <head> berisi meta-info tentang halaman HTML.
  • Elemen <title> mendefinisikan judul dari halaman HTML (yang nampak pada baris judul peramban di tab).
  • Elemen <body> mendefinisikan badan dari dokumen dan merupakan wadah dari semua konten situs web seperti judul, paragraf, gambar, tautan, tabel, daftar dan sebagainya.
  • Elemen <h1> mendefinisikan judul besar.
  • Elemen <p> mendefinisikan sebuah paragraf.

Contoh HTML Lebih Kompleks

Berikut ini contoh HTML yang lebih kompleks:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Dokumen HTML</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Selamat Datang di Halaman Web Saya</h1>
    <p>Ini adalah paragraf pertama saya.</p>
    <a href="https://www.example.com">Kunjungi Example</a>
    <img src="gambar.jpg" alt="Gambar Contoh">
</body>
</html>

Atribut

Elemen HTML dapat memiliki atribut yang menyediakan informasi tambahan tentang elemen tersebut. Contoh atribut adalah href dalam tag <a> untuk mendefinisikan URL tujuan link, atau src dalam tag <img> untuk mendefinisikan sumber gambar.

CSS dan Javascript

Di dalam dokumn HTML juga terkandung CSS (Cascading Style Sheets) yang digunakan bersama HTML untuk mengatur tampilan dan layout halaman web serta JavaScript yang digunakan untuk menambahkan interaktivitas dan fungsi dinamis ke halaman web.

HTML sangat penting dalam pengembangan web karena memberikan fondasi yang memungkinkan pembuatan halaman web yang terstruktur dan interaktif.

Berikutnya kita akan belajar tentang Elemen HTML.

Referensi