Hypertext Markup Language (HTML) adalah bahasa markup yang digunakan untuk membuat dan menyusun halaman web. HTML menyediakan struktur dasar dari sebuah halaman web, yang kemudian bisa ditingkatkan dengan CSS dan JavaScript. Dalam artikel ini, kita akan membahas dasar-dasar HTML dan bagaimana Anda bisa mulai membuat halaman web sederhana.
Struktur Dasar HTML
HTML terdiri dari elemen-elemen yang dikelilingi oleh tag. Tag biasanya terdiri dari tanda kurung sudut (< >) dan sering kali datang berpasangan, dengan tag pembuka dan tag penutup. Berikut adalah contoh struktur dasar dari sebuah dokumen HTML:
htmlSalin kode<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang di Website Saya</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
Penjelasan Struktur
<!DOCTYPE html>: Deklarasi ini memberitahu browser bahwa dokumen ini adalah HTML5.<html>: Elemen root dari dokumen HTML.<head>: Bagian ini mengandung metadata, seperti judul dokumen (<title>) dan link ke file CSS.<title>: Menentukan judul dokumen yang ditampilkan di tab browser.<body>: Bagian ini mengandung konten yang akan ditampilkan kepada pengguna, seperti teks, gambar, dan video.<h1>: Tag heading terbesar, biasanya digunakan untuk judul utama.<p>: Tag paragraf untuk menyusun teks menjadi paragraf.
Baca juga : Bidang BIdang RPL
Elemen-Elemen Dasar HTML
- Heading (Judul)HTML menyediakan enam tingkatan heading, dari
<h1>hingga<h6>, dengan<h1>sebagai yang terbesar dan<h6>sebagai yang terkecil. Contoh:htmlSalin kode<h1>Judul Utama</h1> <h2>Sub Judul</h2> <h3>Sub Sub Judul</h3> - ParagrafTag
<p>digunakan untuk membuat paragraf:htmlSalin kode<p>Ini adalah sebuah paragraf.</p> - LinkTag
<a>digunakan untuk membuat hyperlink. Atributhrefmenentukan URL tujuan:htmlSalin kode<a href="https://www.example.com">Kunjungi Example.com</a> - GambarTag
<img>digunakan untuk menyisipkan gambar. Atributsrcmenentukan path gambar, danaltmemberikan teks alternatif jika gambar tidak dapat ditampilkan:htmlSalin kode<img src="gambar.jpg" alt="Deskripsi Gambar"> - DaftarHTML menyediakan dua jenis daftar: urut (
<ol>) dan tidak urut (<ul>). Item dalam daftar menggunakan tag<li>:htmlSalin kode<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>htmlSalin kode<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
Penutup
HTML adalah dasar dari semua halaman web dan menjadi fondasi yang kuat untuk membangun website. Dengan memahami elemen-elemen dasar HTML dan bagaimana mereka bekerja bersama, Anda bisa mulai membuat halaman web sederhana dan kemudian meningkatkan kemampuan Anda dengan CSS dan JavaScript untuk membuat website yang lebih kompleks dan interaktif. Selamat mencoba!
Baca juga : Destinasi Wisata Terbaik untuk Liburan Lebaran
penulisan : Shinta