Belajar HTML Dari Nol: Pengenalan Dasar HTML untuk Pemula

Updated: 12 Sep, 2024 • 0 • min read

Table of Contents

Pengenalan Dasar HTML untuk Pemula
HTML (Hypertext Markup Language) adalah bahasa standar yang digunakan untuk membuat halaman web. Dengan HTML, kita bisa mengatur bagaimana sebuah halaman ditampilkan di browser. Bagi yang baru belajar atau sudah berpengalaman, ada beberapa kode dasar HTML yang sering digunakan dalam membangun website. Artikel ini akan membahas kode-kode tersebut dengan jelas dan mudah dipahami.

Apa Itu HTML?

Sebelum kita masuk ke pembahasan kode dasar, ada baiknya kita memahami terlebih dahulu apa itu HTML. HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web. Setiap elemen di dalam halaman web, mulai dari teks, gambar, hingga link, diatur menggunakan HTML.

Dengan HTML, kita bisa menambahkan berbagai elemen ke dalam halaman web seperti heading, paragraf, gambar, tautan, dan lain-lain. HTML sendiri terdiri dari elemen-elemen yang disebut tag. Tag ini memiliki pasangan, di mana ada tag pembuka dan tag penutup, contohnya <p>...</p> untuk membuat paragraf.

Struktur Dasar HTML

Setiap dokumen HTML harus memiliki struktur dasar yang terdiri dari beberapa bagian penting. Berikut adalah struktur HTML dasar yang sering digunakan:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman</title>
</head>
<body>
    <!-- Konten halaman web ditulis di sini -->
</body>
</html>

Penjelasan singkat mengenai elemen-elemen tersebut:

<!DOCTYPE html> - Deklarasi tipe dokumen yang menandakan bahwa dokumen ini menggunakan HTML5.
<html> - Elemen root yang berfungsi sebagai pembungkus untuk seluruh isi halaman HTML.
<head> - Bagian ini berisi informasi meta, seperti karakter set, viewport, judul halaman, dan link ke stylesheet atau script.
<body> - Tempat semua konten halaman seperti teks, gambar, dan link ditampilkan.

Heading (Judul)

Heading adalah elemen penting dalam HTML yang digunakan untuk menandai judul dan subjudul dalam sebuah halaman. HTML memiliki enam tingkatan heading, mulai dari <h1> hingga <h6>, di mana <h1> adalah heading paling penting dan <h6> adalah yang paling rendah.

Heading tidak hanya membantu dalam struktur halaman, tetapi juga sangat penting untuk SEO. Mesin pencari seperti Google menggunakan heading untuk memahami struktur konten di sebuah halaman. Berikut adalah contoh penggunaan heading:

<h1>Ini adalah Judul Utama</h1>
<h2>Ini adalah Sub Judul</h2>
<h3>Ini adalah Sub-Sub Judul</h3>

Paragraf

Elemen <p> digunakan untuk membuat paragraf di dalam HTML. Paragraf membantu memecah teks menjadi bagian-bagian yang lebih kecil dan lebih mudah dibaca. Berikut adalah contoh kode HTML untuk paragraf:

<p>Ini adalah contoh paragraf dalam HTML.</p>

Paragraf yang baik seharusnya tidak terlalu panjang dan harus memuat satu ide utama untuk memudahkan pembaca memahami konten.

Gambar

Gambar dalam HTML dapat ditambahkan menggunakan elemen <img>. Elemen ini tidak memerlukan tag penutup dan memiliki beberapa atribut penting seperti src (sumber gambar) dan alt (teks alternatif jika gambar tidak bisa ditampilkan).

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

Pastikan Anda selalu menggunakan atribut alt untuk mendeskripsikan gambar, karena hal ini penting untuk aksesibilitas dan SEO.

Tautan (Link)

Untuk menambahkan tautan dalam HTML, kita menggunakan elemen <a>. Atribut yang paling penting dalam elemen ini adalah href, yang menentukan URL tujuan dari tautan tersebut.

<a href="https://www.contoh.com">Kunjungi Contoh.com</a>

Tautan bisa digunakan untuk mengarahkan pengguna ke halaman lain atau bahkan ke bagian tertentu dari halaman yang sama.

Daftar (List)

HTML mendukung dua jenis daftar, yaitu daftar berurutan (ordered list) dan daftar tidak berurutan (unordered list). Untuk membuat daftar berurutan, gunakan elemen <ol>, sedangkan untuk daftar tidak berurutan, gunakan <ul>. Setiap item di dalam daftar ditandai dengan elemen <li>.

<ul>
    <li>Item pertama</li>
    <li>Item kedua</li>
    </ul>

<ol>
    <li>Langkah pertama</li>
    <li>Langkah kedua</li>
</ol>

Kesimpulan

Kode dasar HTML yang telah dibahas di atas adalah pondasi penting untuk membangun halaman web yang fungsional. Dengan memahami dan menguasai elemen-elemen seperti <html>, <head>, <body>, heading, paragraf, gambar, dan tautan, Anda sudah memiliki dasar yang kuat untuk membuat website yang menarik dan lebih SEO-friendly.

Semoga artikel di atas bisa sedikit membantu bagi teman-teman, artikel ini hanyalah sebuah pengenalan kecil, sebenarnya masih banyak sekali kode html yang belum di posting diatas, seperti kode untuk memutar musik, mengubah gaya huruf, mengubah warna teks, text berjalan, dan banyak lagi.

KUMASHARE