Hypertext Markup Language: Pengertian, Fungsi dan Contoh

  1. Home
  2. »
  3. Pengertian
  4. »
  5. Hypertext Markup Language: Pengertian, Fungsi dan Contoh
Hypertext Markup Language_ Pengertian, Fungsi dan Contoh

Teroopong – HTML atau Hypertext Markup Language adalah bahasa yang digunakan untuk membuat halaman web. Dalam dunia perangkat gadget dan ilmu komputer, HTML merupakan komponen penting yang digunakan untuk mengatur format teks, gambar, dan elemen lainnya pada halaman web. Singkatnya, HTML adalah bahasa yang memberi tahu browser web cara menampilkan konten halaman web.

Pengertian HTML

HTML adalah singkatan dari “Hypertext Markup Language” atau “bahasa markup”. Hypertext mengacu pada hyperlink yang digunakan dalam halaman HTML untuk menghubungkan ke halaman lain. Markup merujuk pada tag yang digunakan untuk menandai dan mengatur tata letak halaman serta elemen di dalamnya. HTML terdiri dari kode dan simbol tertentu yang dimasukkan ke dalam file dokumen untuk ditampilkan pada layar komputer.

Fungsi HTML

Fungsi HTML

  1. Membuat Halaman Web: HTML adalah bahasa standar untuk membuat halaman web. Setiap elemen di halaman web, seperti teks, gambar, dan tautan, diatur dan disusun menggunakan kode HTML.
  2. Menandai Teks: Salah satu fungsi utama HTML adalah memberikan struktur pada teks. Ini termasuk membuat teks menjadi tebal (<strong>), miring (<em>), atau dengan garis bawah (<u>). Penggunaan tag-tag HTML ini memungkinkan pengaturan tampilan teks secara visual.
  3. Dasar Website: HTML menjadi dasar dari pembuatan website. Meskipun HTML dapat membuat halaman web yang berfungsi, penggunaan bahasa pemrograman lain seperti JavaScript dan styling dengan CSS memberikan lebih banyak fungsionalitas dan estetika pada halaman web.
  4. Menampilkan Elemen: HTML digunakan untuk menampilkan berbagai elemen di halaman web. Ini termasuk gambar (<img>), video (<video>), audio (<audio>), tabel (<table>), formulir (<form>), dan banyak lagi. Dengan menggunakan tag-tag HTML yang sesuai, elemen-elemen ini dapat ditempatkan dan ditampilkan dengan benar di halaman web.
  5. Membuat Formulir Online: Salah satu fitur penting HTML adalah kemampuannya untuk membuat formulir online. Formulir HTML memungkinkan pengguna untuk memasukkan data atau informasi ke dalam halaman web dan mengirimkannya ke server untuk diproses. Ini memungkinkan interaksi pengguna yang lebih dinamis di web, seperti pendaftaran, pengisian survei, atau pengiriman pesan.
Baca juga:   Harga Pembuatan Website: Berapa Biaya Membuat Website?

Sejarah HTML

HTML pertama kali dikembangkan oleh Tim Berners-Lee dari CERN pada tahun 1990. Versi pertama HTML dirilis pada tahun 1993. Sejak itu, HTML terus berkembang dan diperbarui dengan versi-versi yang baru seperti HTML 4.01, XHTML, dan yang terbaru adalah HTML5. HTML5 masih dalam tahap spesifikasi draf dan belum menjadi standar resmi. HTML menjadi standar resmi pada tahun 2000 dan menjadi dasar dari hampir semua halaman web yang ada saat ini.

Baca juga:   Cara Login WordPress: Solusi dan Tips Mengatasi Masalah

Contoh HTML

Berikut ini adalah contoh HTML lengkap untuk membuat halaman sederhana:

Contoh HTML

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Contoh Halaman HTML</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #444;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>

<header>
<h1>Contoh Halaman HTML</h1>
</header>

<nav>
<a href=”#”>Beranda</a> |
<a href=”#”>Tentang Kami</a> |
<a href=”#”>Kontak</a>
</nav>

<section>
<h2>Selamat Datang di Contoh Halaman HTML</h2>
<p>Ini adalah contoh halaman web sederhana yang dibuat menggunakan HTML.</p>
<p>HTML (Hypertext Markup Language) adalah bahasa yang digunakan untuk membuat halaman web.</p>
</section>

<footer>
<p>Hak Cipta &copy; 2024 Contoh HTML</p>
</footer>

</body>
</html>

Penjelasan Struktur Kode HTML

Dalam contoh ini, terdapat struktur dasar dari sebuah halaman HTML:

  • <!DOCTYPE html>: Deklarasi untuk jenis dokumen HTML.
  • <html>: Elemen utama yang mengelilingi seluruh konten halaman.
  • <head>: Bagian kepala dokumen yang berisi informasi meta dan judul halaman, serta link ke stylesheet (CSS).
  • <meta charset=”UTF-8″>: Menentukan set karakter yang digunakan (UTF-8).
  • <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: Mengatur tampilan responsif untuk perangkat seluler.
  • <title>: Menentukan judul halaman yang akan ditampilkan di tab browser.
  • <body>: Bagian badan dokumen yang berisi semua konten yang akan ditampilkan di halaman web.
    Dalam <body>, terdapat:
  • <header>: Bagian atas halaman yang berisi judul utama.
  • <nav>: Navigasi halaman web.
  • <section>: Bagian utama konten halaman.
  • <footer>: Bagian bawah halaman yang berisi informasi tambahan atau hak cipta.
Baca juga:   3 Strategi Digital Marketing yang Terbukti Meningkatkan Penjualan

Contoh ini juga mencakup sedikit CSS untuk memberi tampilan halaman web yang lebih menarik dan terstruktur. Dengan demikian, HTML adalah fondasi yang penting dalam pembuatan halaman web, memungkinkan pengaturan struktur, tampilan, dan fungsionalitas dasar dari suatu situs web.

Teroopong
Teroopong

Kami adalah Jasa Digital Marketing solusi lengkap untuk membawa bisnis Anda ke level berikutnya dalam era digital ini.

Artikel Terkait dan
Bisnis Hebat Dimulai dari Sini!

Isi Formulir Sekarang untuk Layanan Website, Branding, dan Medsos yang Profesional.