Pernah nggak sih, kamu penasaran gimana caranya sebuah website bisa tampil cantik di layar gadget kita? Saat kita scrolling Instagram, browsing artikel favorit, atau bahkan belanja online, semua tampilan yang kita lihat itu dibangun dengan bahasa dasar yang disebut HTML.
Ya, HTML adalah kunci utama yang membuat teks, gambar, tombol, dan elemen lainnya bisa muncul di layar kita.
Nah, buat kamu yang penasaran dan ingin tahu lebih dalam tentang cara kerja website, atau bahkan punya mimpi buat bikin website sendiri, artikel ini adalah tempat yang tepat untuk memulai!
HTML (HyperText Markup Language) adalah fondasi utama dalam pengembangan web. Tanpa HTML, nggak ada website yang bisa berdiri. Jadi, kalau kamu mau belajar bikin website, langkah pertama yang harus kamu kuasai adalah HTML.
Daftar Isi
Pengertian HTML
HTML atau HyperText Markup Language adalah bahasa markup yang digunakan untuk membuat dan menyusun struktur halaman web. Bisa dibilang, HTML adalah fondasi dasar dari setiap situs yang kita lihat di internet.
Kalau diibaratkan, HTML itu seperti batu bata dalam membangun rumah. Batu bata ini bisa disusun untuk membentuk dinding, pintu, dan jendela, begitu juga dengan HTML yang menyusun berbagai elemen dalam sebuah halaman web, seperti teks, gambar, tabel, dan link.
Tapi, HTML bukan satu-satunya yang membentuk tampilan website. Ia bekerja sama dengan CSS (Cascading Style Sheets) untuk memperindah tampilan, dan JavaScript untuk menambahkan interaktivitas.
Sejarah Singkat HTML
HTML pertama kali diperkenalkan oleh Tim Berners-Lee, seorang ilmuwan komputer asal Inggris yang bekerja di CERN (Conseil Européen pour la Recherche Nucléaire) pada akhir tahun 1980-an. Saat itu, para peneliti di CERN membutuhkan sistem yang memudahkan mereka berbagi dokumen hasil penelitian.
Dari situ, Tim Berners-Lee menciptakan ENQUIRE, sebuah software berbasis hypertext yang menjadi cikal bakal HTML. Pada tahun 1989, ia mengembangkan konsep ini lebih lanjut dan merancang sistem yang kini kita kenal sebagai World Wide Web (WWW).
Pada akhir tahun 1991, Berners-Lee menerbitkan dokumen berjudul “HTML Tags”, yang berisi 18 tag awal yang menjadi dasar HTML. HTML sendiri dirancang berdasarkan SGML (Standard Generalized Markup Language), sebuah standar markup yang sudah ada sebelumnya.
Salah satu inovasi terbesar dalam HTML adalah Hyperlink, yang memungkinkan pengguna berpindah dari satu halaman ke halaman lain dengan mengklik teks atau gambar tertentu. Inilah yang membuat internet berkembang pesat seperti sekarang.
Beragam Versi HTML
Sejak diperkenalkan, HTML telah mengalami banyak pembaruan untuk memenuhi kebutuhan web yang semakin kompleks. Berikut adalah perkembangan versi HTML dari yang paling awal hingga yang terbaru:
- HTML 1.0 (1993) – Versi pertama HTML, namun hanya dalam bentuk draft dan tidak dirilis secara resmi.
- HTML 2.0 (1995) – Versi pertama yang resmi dirilis oleh IETF (Internet Engineering Task Force), mencakup elemen dasar HTML.
- HTML 3.2 (1997) – Versi pertama yang dikembangkan oleh W3C (World Wide Web Consortium), menambahkan dukungan untuk tabel, skrip, dan gaya.
- HTML 4.0 (1998) – Memperkenalkan konsep CSS (Cascading Style Sheets) untuk memisahkan tampilan dari struktur halaman web.
- HTML 4.01 (1999) – Versi penyempurnaan dari HTML 4.0, dengan perbaikan bug dan kompatibilitas yang lebih baik.
- XHTML 1.0 (2000) – Pengembangan dari HTML 4.01 dengan aturan yang lebih ketat, mengikuti standar XML.
- HTML5 (2014 – Sekarang) – Versi terbaru HTML dengan banyak fitur baru seperti dukungan untuk video, audio, canvas, serta API yang lebih canggih untuk aplikasi web.
Persiapan Belajar HTML
Kita sudah mengetahui apa itu HTML, begitu pula dengan asal-usulnya. Untuk mulai belajar coding, ini adalah dua hal yang perlu kamu persiapkan:
1. Teks Editor
Untuk membuat website, kamu perlu mulai dari menyusun kodenya, oleh karena itu, kamu membutuhkan tool untuk menulis kode.
Ada banyak pilihan teks editor gratis yang bisa kamu gunakan, seperti Visual Studio Code, Sublime Text, atau Atom. Kamu bisa eksplor pilihan yang ada, dan temukan mana yang paling nyaman untuk kamu.
2. Browser
Untuk melihat hasil kode yang sudah kamu tulis, kamu memerlukan browser. Browser populer seperti Google Chrome, Mozilla Firefox, atau Safari bisa jadi pilihan.
Element, Tag dan Atribut dalam HTML
Untuk mengenal HTML lebih jauh, maka kita juga akan mengetahui element, tag, dan atribut dari HTML. Simak penjelasan singkat berikut.
1. Element
Element dalam HTML adalah kombinasi dari tag pembuka, konten, dan tag penutup. Contohnya <p>ini adalah paragraf.<p>.
2. Tag
Tag adalah penanda yang digunakan untuk membungkus konten. Contohnya <p> untuk paragraf atau <h1> untuk heading. Setiap tag HTML biasanya punya pasangan penutup, contohnya pada tag paragraf <p>Ini tag paragraf</p>.
3. Atribut
Atribut memberikan informasi tambahan pada elemen. Misalnya:
<a href=”https://www.contohwebsite.com”>Kunjungi Contoh Website</a>, di mana href adalah atribut yang menunjukkan link tujuan.
Struktur Dasar HTML
Saat membuat halaman web, kita harus mengikuti struktur dasar HTML agar browser bisa membaca dan menampilkan kontennya dengan benar. Struktur ini terdiri dari beberapa elemen utama yang membentuk satu kesatuan dokumen HTML yang sempurna.
1. Deklarasi Doctype
Bagian pertama dari dokumen HTML adalah deklarasi doctype. Ini berfungsi untuk memberitahu browser versi HTML yang digunakan.
<!DOCTYPE html>
Kode di atas menunjukkan bahwa kita menggunakan HTML5, yang merupakan versi HTML terbaru dan paling banyak digunakan saat ini. Selain itu, kita juga harus membuka dokumen HTML dengan tag:
<html lang="id">
Tag <html> menandakan awal dari dokumen HTML, sedangkan atribut lang=”id” menunjukkan bahwa halaman ini menggunakan bahasa indonesia.
2. Bagian Head
Bagian head adalah tempat menyimpan informasi yang tidak langsung terlihat di halaman web, tetapi sangat penting untuk pengaturan dan optimasi. Struktur dasarnya seperti ini:
<kode>
Agar lebih mudah dimengerti, ini penjelasan dari kode di atas:
- <meta charset=”UTF-8″> → Menentukan jenis karakter yang digunakan (UTF-8 adalah standar untuk menampilkan berbagai simbol dan huruf dari berbagai bahasa).
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> → Mengatur tampilan agar responsif di berbagai perangkat.
- <title>Belajar HTML</title> → Menentukan judul halaman yang muncul di tab browser.
Selain itu, bagian head juga sering digunakan untuk menambahkan CSS (style) dan JavaScript agar halaman web lebih menarik dan interaktif.
3. Bagian Body
Bagian body adalah tempat di mana semua konten yang terlihat oleh pengguna ditampilkan.
<body>
<h1>Selamat Datang di Panduan Belajar HTML</h1>
<p>HTML adalah fondasi dari setiap halaman web yang kamu lihat di internet.</p>
</body>
Tag <h1> berguna untuk menampilkan heading atau judul utama, dan tag <p> untuk menampilkan paragraf teks. Di dalam body, kita bisa menambahkan berbagai elemen seperti gambar (<img>), link (<a>), daftar (<ul>/<ol>), dan masih banyak lagi.
Rekomendasi Situs Belajar HTML
Agar proses mendalami HTML lebih seru, berikut beberapa website yang bisa kamu kunjungi untuk membantu kamu mengasah kemampuan HTML kamu:
W3Schools
W3Schools adalah situs legendaris buat belajar HTML. Materinya lengkap, pembahasannya to-the-point, dan ada fitur “Try It Yourself”, di mana kamu bisa langsung menulis kode di browser tanpa perlu install apa pun.
Selain HTML, ada juga tutorial CSS, JavaScript, dan bahasa pemrograman lain.
Cocok untuk:
- Pemula yang suka belajar dengan contoh langsung.
- Kamu yang ingin cepat memahami konsep dasar HTML tanpa ribet.
Coursera
Coursera menyediakan kursus HTML dari berbagai universitas dan perusahaan teknologi top. Mereka menyediakan versi gratis dan berbayar (dengan sertifikat).
Biasanya kursus di Coursera lebih terstruktur, cocok buat kamu yang suka belajar dengan sistem perkuliahan online.
Cocok untuk:
- Kamu yang mau belajar HTML dengan kurikulum dari universitas ternama.
- Orang yang lebih suka belajar terstruktur dengan video, tugas, dan kuis.
- Kamu yang ingin mendapatkan sertifikat resmi untuk menunjang karir.
CodeCademy
Codecademy punya pendekatan belajar yang unik, yaitu kamu tidak hanya membaca teori, tapi langsung mempraktekannya lewat kuis dan proyek. Setiap materi HTML dijelaskan dengan contoh interaktif, jadi lebih mudah dipahami.
Mereka menyediakan versi gratis, namun jika kamu ingin mencoba fitur lengkapnya (seperti proyek nyata dan roadmap karir) kamu bisa memilih opsi berbayar.
Cocok untuk:
- Belajar HTML dengan latihan interaktif.
- Pemula yang suka belajar sambil praktik langsung.
freeCodeCamp
Kalau kamu serius ingin belajar HTML sambil mengerjakan proyek, freeCodeCamp adalah pilihan terbaik.
Website ini memiliki ratusan jam materi mulai dari dasar sampai lanjutan, plus proyek-proyek yang bisa kamu tambahkan ke portofolio. Semua kursusnya 100% gratis!
Cocok untuk:
- Belajar HTML gratis sambil latihan proyek beneran.
- Kamu yang suka tantangan dan ingin langsung terjun ke dunia nyata pengembangan web.
Github
Meskipun GitHub lebih dikenal sebagai platform hosting kode, ini juga tempat yang bagus buat belajar HTML.
Banyak developer membagikan proyek open-source yang bisa kamu pelajari atau modifikasi. Kamu juga bisa bergabung dalam komunitas dan belajar dari kode yang dibuat oleh profesional.
Cocok untuk:
- Belajar dari kode sumber proyek nyata.
- Kamu yang ingin memahami bagaimana HTML digunakan dalam proyek besar.
- Mereka yang tertarik untuk berkontribusi pada proyek open-source.
Kesimpulan
Belajar HTML dari nol memang terdengar menantang, tapi dengan pemahaman yang tepat dan latihan yang konsisten, siapa pun bisa menguasainya, termasuk kamu.
HTML adalah pondasi utama dalam membangun website, dan dengan menguasainya, kamu sudah mengambil langkah pertama dalam perjalanan web development.
Mulai dari memahami struktur dasar hingga bereksperimen dengan berbagai elemen, kamu bisa terus meningkatkan skill dengan mencoba coding secara langsung.
Jangan lupa manfaatkan berbagai sumber belajar yang telah direkomendasikan, seperti W3School, Coursera, CodeCademy, freeCodeCamp, hingga GitHub untuk memperdalam pemahamanmu.
Hal paling penting adalah jangan takut untuk mencoba dan berlatih. Untuk mendukung perjalanan belajarmu, pastikan kamu memiliki domain dan hosting yang andal agar bisa langsung mempraktikkan hasil belajarmu dalam proyek nyata.
Dapatkan Domain Murah untuk membangun portofolio web pertamamu dan gunakan Web Hosting dari Exabytes agar website Anda berjalan lancar! Semangat belajar dan selamat mencoba!
