Paslen.com – Dalam dunia yang semakin terkoneksi secara digital, memiliki pemahaman dasar tentang HTML (Hypertext Markup Language) adalah langkah penting untuk membangun dan merancang situs web. HTML adalah bahasa markup yang digunakan untuk mengatur struktur dan tampilan konten di web. Dalam artikel ini, kita akan menjelajahi struktur dasar HTML dan bagaimana menggunakannya dalam membangun halaman web yang efektif.
Apa itu HTML?
HTML adalah bahasa yang digunakan untuk membuat halaman web. Singkatnya, HTML adalah “tulang punggung” dari setiap situs web yang kita lihat. Dengan HTML, kita dapat menentukan bagaimana konten akan ditampilkan dan diatur di dalam browser. Selain itu, HTML juga memungkinkan kita untuk menyematkan gambar, video, audio, dan elemen interaktif lainnya ke dalam halaman web.
Struktur Dasar HTML
Setiap dokumen HTML dimulai dengan elemen <html> yang menandai awal dan akhir dari halaman web. Elemen ini memuat semua elemen lainnya dalam dokumen. Struktur dasar HTML juga mencakup elemen <head> dan <body>.
Elemen <head> berfungsi untuk menyimpan informasi tentang halaman web, seperti judul halaman yang akan ditampilkan di jendela browser dan meta tag yang memberikan deskripsi dan kata kunci terkait halaman. Di dalam elemen <head>, kita dapat menambahkan elemen <title>, <meta>, dan lainnya.
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman Web</title>
<meta name="description" content="Deskripsi halaman web Anda">
<meta name="keywords" content="kata kunci, terkait, dengan, halaman, web">
</head>
<body>
<!-- Konten halaman web Anda akan ditambahkan di sini -->
</body>
</html>
Elemen <body> berfungsi untuk memuat konten aktual yang akan ditampilkan kepada pengguna di browser. Di dalam elemen <body>, kita dapat menambahkan teks, gambar, tautan, dan elemen lainnya yang membentuk isi halaman web.
Elemen dan Tag
Dalam HTML, setiap elemen ditandai dengan tag. Tag HTML dikelilingi oleh tanda kurung sudut (<>) dan biasanya memiliki tag pembuka dan penutup. Tag pembuka menandai awal elemen, sedangkan tag penutup menandai akhir elemen. Beberapa elemen, seperti <img> untuk menyematkan gambar, tidak memiliki tag penutup.
Contoh:
<p>Ini adalah sebuah paragraf.</p>
<img src="gambar.jpg" alt="Deskripsi gambar">
<a href="https://www.contohlink.com">Ini adalah tautan</a>
Elemen Penyusun Blok dan Inline
Ada dua jenis elemen dalam HTML: elemen penyusun blok (block-level) dan elemen penyusun inline (inline-level). Elemen penyusun blok memenuhi seluruh lebar halaman dan secara otomatis membentuk baris baru setelahnya. Beberapa contoh elemen penyusun blok meliputi <p>, <div>, dan <h1> hingga <h6>.
Contoh:
<div>
<h1>Judul</h1>
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
</div>
Sementara itu, elemen penyusun inline hanya memenuhi ruang yang dibutuhkan oleh elemen itu sendiri tanpa membentuk baris baru. Contoh elemen penyusun inline meliputi <span>, <a>, dan <img>.
Mempelajari struktur dasar HTML merupakan fondasi yang penting untuk merangkai halaman web yang efektif. Dengan memahami struktur dasar HTML dan menguasai elemen dan tag yang tersedia, kita dapat membangun situs web yang menarik dan mudah diakses oleh pengguna.
Dalam artikel ini, kita telah menjelajahi elemen <html>, <head>, dan <body> sebagai struktur dasar HTML, serta elemen dan tag yang membentuk konten di dalam halaman web. Semoga artikel ini memberikan pemahaman dasar yang berguna bagi Anda dalam perjalanan mempelajari HTML dan membangun situs web yang menakjubkan.
