Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / HTML / Programming / WEB

Tutorial HTML #1 - Dasar HTML untuk WEB Programming

By : Fikri Ramdani Posting Komentar
Belajar HTML dasar untuk web programming bagi pemula

Assalamualaikum sobat blogger semua! Selamat datang di tutorial pertama dalam seri belajar HTML dasar untuk pemula. Kalau lu punya rencana untuk membuat website, belajar web programming, atau ingin memahami bagaimana sebuah halaman website bekerja, HTML adalah salah satu materi pertama yang wajib dipahami.

Di tutorial ini kita belum akan langsung membuat website yang rumit. Kita mulai dari fondasinya terlebih dahulu: apa itu HTML, bagaimana cara kerja HTML, siapa yang mengembangkannya, apa hubungan HTML dengan CSS dan JavaScript, serta bagaimana struktur dasar sebuah dokumen HTML.

Setelah memahami konsep dasarnya, kita akan langsung mengarah ke tutorial berikutnya untuk membuat halaman HTML sederhana. Jadi, kalau lu benar-benar baru mulai belajar web programming, artikel ini cocok dijadikan titik awal.

📌 Apa Itu HTML?

HTML adalah singkatan dari HyperText Markup Language. HTML merupakan bahasa markah yang digunakan untuk menyusun struktur dan memberikan makna pada konten sebuah halaman web.

Perlu diluruskan sejak awal: HTML bukan bahasa pemrograman. HTML tidak digunakan untuk membuat logika seperti perulangan, percabangan, atau fungsi seperti yang kita temukan pada bahasa pemrograman.

Sederhananya, HTML memberi tahu browser bagian mana yang merupakan judul, paragraf, gambar, tautan, tabel, formulir, dan berbagai elemen lainnya.

Contohnya, kode HTML berikut digunakan untuk membuat sebuah judul dan paragraf:

<h1>Belajar HTML</h1>
<p>Saya sedang belajar membuat website.</p>

Ketika kode tersebut dibuka menggunakan browser, browser akan membaca struktur HTML tersebut dan menampilkannya sebagai judul dan paragraf.

🌐 Bagaimana HTML Bekerja?

Cara kerja HTML sebenarnya cukup sederhana. Ketika lu membuka sebuah halaman website, browser akan menerima dokumen HTML dari server atau membacanya dari file lokal. Setelah itu browser memproses struktur HTML dan menampilkan elemen-elemen tersebut pada layar.

Misalnya, kita memiliki file bernama index.html dengan isi:

<!DOCTYPE html>
<html>
<head>
    <title>Website Pertama Saya</title>
</head>
<body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah website pertama saya.</p>
</body>
</html>

Browser akan membaca elemen-elemen tersebut kemudian membentuk struktur halaman yang dapat dilihat oleh pengguna.

Jadi, HTML dapat kita anggap sebagai kerangka atau struktur dasar sebuah halaman web.

🧱 HTML, CSS, dan JavaScript: Apa Bedanya?

Kalau lu baru masuk dunia web programming, kemungkinan besar lu akan sering mendengar tiga nama: HTML, CSS, dan JavaScript.

Ketiganya mempunyai fungsi yang berbeda, tetapi biasanya digunakan secara bersama-sama dalam pembuatan website.

HTML → Struktur

HTML menentukan struktur dan isi halaman, seperti judul, paragraf, gambar, tombol, tautan, tabel, dan formulir.

CSS → Tampilan

CSS digunakan untuk mengatur tampilan halaman, seperti warna, ukuran teks, jarak, posisi elemen, layout, dan responsivitas.

JavaScript → Interaksi

JavaScript digunakan untuk membuat halaman menjadi lebih interaktif, misalnya menangani klik tombol, memvalidasi input, mengambil data, dan mengubah isi halaman secara dinamis.

Kalau ingin menggunakan perumpamaan sederhana, HTML bisa dianggap sebagai kerangka rumah, CSS sebagai desain dan dekorasinya, sedangkan JavaScript menangani berbagai fungsi dan interaksi di dalamnya.

📜 Sejarah Singkat HTML

HTML memiliki sejarah yang sangat erat dengan lahirnya World Wide Web.

HTML dikembangkan oleh Tim Berners-Lee, seorang ilmuwan komputer yang bekerja di CERN. Pada awal 1990-an, ia mengembangkan berbagai teknologi yang menjadi fondasi World Wide Web, termasuk HTML, HTTP, dan konsep URL.

Tujuan awalnya adalah mempermudah para peneliti dalam berbagi serta menghubungkan informasi melalui dokumen yang dapat diakses menggunakan jaringan.

Dari konsep sederhana tersebut, teknologi web kemudian berkembang sangat pesat. HTML terus mengalami perkembangan dan digunakan bersama teknologi lain untuk membangun berbagai macam website dan aplikasi web.

📅 Perkembangan HTML dari Masa ke Masa

HTML mengalami beberapa tahap perkembangan sejak pertama kali diperkenalkan. Berikut gambaran sederhananya:

  • HTML awal: digunakan untuk menyusun dokumen sederhana yang berisi teks, heading, paragraf, dan tautan.
  • HTML 2.0: membawa berbagai pengembangan standar, termasuk dukungan formulir.
  • HTML 3.x: memperluas kemampuan HTML dan memperkenalkan berbagai fitur baru, meskipun perkembangan standar web pada masa itu cukup kompleks.
  • HTML 4.01: menjadi salah satu standar penting dalam perkembangan web dan semakin mendorong pemisahan antara struktur dokumen dan tampilan.
  • HTML5: memperkenalkan berbagai elemen semantik dan kemampuan bawaan untuk kebutuhan web modern, termasuk elemen audio, video, canvas, dan berbagai fitur lainnya.

Namun ada satu hal penting yang perlu dipahami: HTML modern tidak sebaiknya dianggap sebagai sekadar "versi HTML yang terus naik dari HTML5 ke HTML6, HTML7, dan seterusnya". Standar HTML modern dikembangkan secara berkelanjutan melalui spesifikasi Living Standard.

Artinya, teknologi HTML terus berkembang tanpa harus selalu menunggu munculnya nomor versi besar baru.

✨ Apa yang Bisa Dilakukan dengan HTML?

Meskipun HTML bukan bahasa pemrograman, perannya sangat penting dalam pengembangan website. Dengan HTML, kita dapat membuat struktur berbagai jenis konten pada halaman web.

Beberapa contohnya adalah:

  • Membuat judul dan subjudul menggunakan heading.
  • Membuat paragraf teks.
  • Membuat daftar menggunakan list.
  • Membuat tautan atau hyperlink.
  • Menampilkan gambar.
  • Membuat tabel.
  • Membuat formulir untuk menerima input pengguna.
  • Menampilkan audio dan video.
  • Menyusun struktur halaman menggunakan elemen semantik.

Contoh sederhana sebuah halaman HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Belajar HTML</title>
</head>
<body>

    <h1>Belajar HTML Dasar</h1>

    <p>
        HTML digunakan untuk menyusun struktur
        sebuah halaman web.
    </p>

    <a href="https://example.com">
        Kunjungi Website
    </a>

</body>
</html>

Dari contoh tersebut, lu sebenarnya sudah bisa melihat beberapa komponen penting HTML seperti <html>, <head>, <title>, <body>, <h1>, <p>, dan <a>.

🧩 Mengenal Tag, Element, dan Attribute HTML

Supaya tidak bingung ketika masuk ke tutorial berikutnya, ada tiga istilah dasar yang perlu lu kenal: tag, element, dan attribute.

1. Tag

Tag merupakan penanda yang digunakan dalam HTML. Contohnya:

<p>

Tag tersebut menunjukkan bahwa kita sedang membuat elemen paragraf.

2. Element

Element adalah struktur HTML secara keseluruhan. Contohnya:

<p>Saya sedang belajar HTML.</p>

Di dalam contoh tersebut terdapat tag pembuka, isi, dan tag penutup.

3. Attribute

Attribute memberikan informasi tambahan kepada sebuah elemen HTML.

Contohnya pada hyperlink:

<a href="https://example.com">Kunjungi Website</a>

href merupakan attribute yang menentukan alamat tujuan dari link tersebut.

🔍 Apakah HTML Berpengaruh terhadap SEO?

Ya, struktur HTML yang baik dapat membantu mesin pencari memahami struktur dan konteks sebuah halaman. Namun, perlu diluruskan bahwa menggunakan HTML5 atau tag tertentu saja tidak otomatis membuat sebuah halaman mendapatkan peringkat tinggi di Google.

Yang lebih penting adalah bagaimana seluruh halaman tersebut memberikan informasi yang jelas, relevan, mudah dibaca, dan bermanfaat bagi pengunjung.

Penggunaan elemen semantik seperti:

<header>
<nav>
<main>
<article>
<section>
<footer>

dapat membantu memberikan struktur dan makna yang lebih jelas pada dokumen HTML.

Selain struktur HTML, SEO juga dipengaruhi banyak faktor lain seperti kualitas konten, relevansi terhadap pencarian pengguna, pengalaman halaman, internal linking, performa website, serta berbagai faktor teknis lainnya.

💡 Kenapa Pemula Sebaiknya Belajar HTML Terlebih Dahulu?

Kalau tujuan lu adalah belajar web programming, HTML merupakan salah satu fondasi yang sangat penting.

Framework modern seperti React, Vue, atau berbagai framework lainnya memang membuat proses membangun antarmuka web menjadi lebih canggih. Namun, konsep dasar seperti elemen, atribut, struktur dokumen, formulir, tautan, gambar, dan semantic HTML tetap sangat berguna untuk dipahami.

Dengan memahami HTML terlebih dahulu, lu tidak hanya belajar "cara membuat tampilan", tetapi juga memahami struktur halaman yang sebenarnya dibaca oleh browser.

Setelah HTML sudah cukup dikuasai, perjalanan belajarnya bisa dilanjutkan ke:

  1. HTML untuk struktur halaman.
  2. CSS untuk mengatur tampilan.
  3. JavaScript untuk interaksi dan logika di sisi browser.
  4. Backend seperti PHP, Python, Node.js, atau teknologi lainnya untuk memproses data di server.
  5. Database seperti MySQL atau PostgreSQL untuk menyimpan data aplikasi.

Urutan tersebut bukan aturan mutlak, tetapi cukup masuk akal untuk pemula yang ingin memahami bagaimana sebuah aplikasi web dibangun dari dasar.

🎯 Kesimpulan

HTML adalah bahasa markah yang digunakan untuk menyusun struktur sebuah halaman web. HTML bukan bahasa pemrograman dan biasanya digunakan bersama CSS serta JavaScript untuk membangun website dan aplikasi web.

HTML memiliki sejarah panjang sejak awal perkembangan World Wide Web dan terus berkembang hingga menjadi standar web modern yang digunakan oleh browser saat ini.

Kalau lu baru mulai belajar web programming, jangan terlalu terburu-buru mengejar framework. Pahami dulu fondasinya. Setelah struktur HTML sudah mulai terbiasa, belajar CSS dan JavaScript akan terasa jauh lebih masuk akal.

Di tutorial berikutnya kita akan mulai praktik langsung dengan membuat halaman HTML sederhana menggunakan teks "Hello World".

Kalau ada bagian dari tutorial ini yang masih bikin bingung, silakan tulis pertanyaan atau pengalaman lu di kolom komentar. Kita bahas sama-sama.

Wassalam.

🚀 Sudah Kenal HTML, Sekarang Saatnya Ngoding!

Teori dasarnya sudah kita bahas. Sekarang kita mulai praktik membuat halaman HTML pertama dan melihat bagaimana browser membaca kode yang kita tulis.

Lanjut ke Tutorial #2: Membuat Hello World →

Posting Komentar untuk "Tutorial HTML #1 - Dasar HTML untuk WEB Programming"