Belajar HTML dari Nol

HTML, singkatan dari HyperText Markup Language, adalah bahasa dasar yang digunakan untuk membuat struktur halaman web. Hampir setiap halaman yang kita lihat di internet dibangun dengan HTML sebagai fondasinya. Memahami HTML adalah langkah pertama bagi siapa saja yang ingin belajar pengembangan web.

Pada artikel ini analiswinter.com akan membahas konsep dasar HTML, struktur, elemen utama, hingga cara menulis kode HTML yang baik.

Apa itu HTML?

HTML adalah bahasa markup yang digunakan untuk mengatur konten di halaman web. HTML bekerja dengan cara “menandai” (men-tag) berbagai elemen agar browser bisa mengenali dan menampilkan konten tersebut dengan baik. Contohnya:

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

Pada contoh di atas:

<p> adalah tag pembuka,
</p> adalah tag penutup, dan
Konten “Ini adalah paragraf dalam HTML” berada di antara tag pembuka dan penutup.

2. Struktur Dasar HTML

Setiap dokumen HTML memiliki struktur dasar seperti di bawah ini:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Selamat Datang di Belajar HTML</h1>
    <p>Ini adalah paragraf pertama Anda.</p>
</body>
</html>

Penjelasan elemen-elemen di atas:

<!DOCTYPE html>: Menandakan bahwa dokumen ini adalah HTML5.
<html>: Tag pembungkus untuk seluruh konten HTML.
<head>: Berisi informasi tentang halaman, seperti judul (<title>), yang ditampilkan di tab browser.
<body>: Tempat konten utama halaman diletakkan, seperti teks, gambar, dan elemen lainnya.

3. Tag-Tag HTML Penting

Berikut adalah beberapa tag dasar HTML yang sering digunakan:

Tag HTML	Fungsi
`<h1> ... <h6>`	Tag heading untuk judul; `<h1>` terbesar dan `<h6>` terkecil.
`<p>`	Membuat paragraf.
`<a href="url">`	Membuat tautan ke URL tertentu.
`<img src="url" alt="deskripsi">`	Menyisipkan gambar dengan atribut `src` dan teks alternatif `alt`.
`<ul>`, `<ol>`, `<li>`	Membuat daftar (ul=tak berurutan, ol=berurutan, li=elemen daftar).
`<table>`, `<tr>`, `<td>`	Membuat tabel sederhana.
`<div>`, `<span>`	Elemen kontainer untuk grup elemen lainnya; berguna dalam pemformatan dan penataan layout.

4. Contoh Praktis: Membuat Halaman HTML Sederhana

Mari buat halaman sederhana yang menampilkan judul, paragraf, gambar, dan tautan.

<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML Dasar</title>
</head>
<body>
    <h1>Selamat Datang di Panduan Belajar HTML</h1>
    <p>HTML mudah dipelajari dan menyenangkan!</p>

    <h2>Gambar HTML</h2>
    <img src="https://via.placeholder.com/150" alt="Contoh Gambar">

    <h2>Tautan ke Halaman Lain</h2>
    <p>Kunjungi <a href="https://www.example.com">Website Contoh</a> untuk belajar lebih lanjut.</p>
</body>
</html>

Pada contoh di atas:

<img src="URL" digunakan untuk memasukkan gambar dengan URL eksternal.
<a href="URL" digunakan untuk membuat tautan yang mengarah ke website lain.

5. Atribut dalam Tag HTML

Setiap tag HTML dapat memiliki atribut yang memberikan informasi tambahan. Contoh atribut yang sering digunakan:

Atribut	Fungsi	Contoh Penggunaan
`href`	Alamat tautan tujuan	`<a href="https://example.com">`
`src`	Sumber gambar	`<img src="image.jpg">`
`alt`	Deskripsi gambar (penting untuk SEO)	`<img alt="gambar contoh">`
`title`	Judul atau keterangan yang muncul saat hover	`<a title="Kunjungi contoh">`
`style`	Mengatur gaya seperti warna, font, dll.	`<p style="color:red;">`
`class`	Menghubungkan tag ke CSS untuk styling	`<div class="container">`
`id`	Identifikasi unik untuk elemen tertentu	`<h1 id="judul-utama">`

6. Memulai HTML dengan Praktik Langsung

Latihan adalah cara terbaik untuk mempelajari HTML. Anda bisa mulai membuat halaman sederhana dan berlatih menggunakan tag dan atribut di atas. Beberapa platform yang dapat membantu Anda belajar HTML secara langsung adalah:

CodePen: Editor online untuk HTML, CSS, dan JavaScript.
JSFiddle: Alat lain untuk latihan coding langsung.
W3Schools: Tutorial dan latihan HTML interaktif.

7. Tips Belajar HTML

Mulai dari Dasar: Kuasai struktur dasar dan tag-tag penting.
Praktik secara Langsung: Cobalah membuat halaman sederhana.
Pelajari CSS: Setelah memahami HTML, lanjutkan ke CSS untuk membuat tampilan yang menarik.
Lihat Kode Website: Gunakan fitur Inspect Element di browser untuk melihat bagaimana situs lain menggunakan HTML.

8. Kesimpulan

HTML adalah langkah awal untuk menjadi pengembang web. Dengan menguasai HTML, Anda memiliki fondasi yang kuat untuk melanjutkan ke CSS dan JavaScript, yang akan memberikan kemampuan membuat halaman web interaktif dan menarik. Selamat belajar HTML dan semoga panduan ini membantu Anda memahami konsep dasarnya!

Belajar HTML dari Nol