Saat ini, sudah ada berbagai tema dan template yang bisa digunakan untuk membuat website dengan praktis. Namun, kamu tetap perlu mempelajari bahasa pemrograman HTML untuk mengkustomisasi berbagai elemen pada websitemu. Hypertext Markup Language (HTML) adalah gabungan dari dua istilah berbeda yang tujuannya sama-sama untuk membangun website.
Meski kamu sudah bisa membuat website dengan mudah tanpa coding, tapi tak ada salahnya mempelajari bahasa dasar yang digunakan komputer untuk menciptakan website. Agar dapat berfungsi optimal, HTML memiliki tag, elemen, serta atribut.
Lantas, apa pengertian ketiganya hingga tips HTML apa saja yang perlu kamu pelajari? Yuk, ikut belajar dari panduan lengkap HTML untuk pemula berikut ini.
Baca juga: Apa itu DBMS? Simak Definisi, Fungsi, dan Jenis-Jenisnya Di Sini
Apa Itu HTML?
Hypertext Markup Language (HTML) adalah bahasa pemrograman standar dalam pembuatan halaman web. Fungsi utama HTML adalah untuk membangun struktur sebuah halaman web dengan berbagai elemen di dalamnya.
Hypertext Markup Language berasal dari gabungan kata “hypertext” yaitu teks atau media berisi link yang bisa mengarahkanmu ke halaman lain di suatu website. Di sisi lain, “markup language” merupakan bahasa komputer yang menggunakan tanda (tag) untuk menerjemahkan perintah di website. Keduanya digabungkan menjadi bahasa untuk membuat struktur website.
Agar dapat menjalani fungsi yang diinginkan manusia, komputer perlu menerima arahan dalam bentuk program yang ditanamkan di dalamnya. Hal ini akan terus berlaku saat kamu belajar HTML. Tapi ingat, HTML bukan bahasa pemrograman, ya.
Baca Juga: Bahasa Pemrograman yang Populer di Dunia
Sejarah Perkembangan HTML
Awalnya, HTML disusun pada 1989 oleh Tim Berners-Lee, salah satu karyawan CERN (organisasi riset nuklir asal Swiss). Tujuan awal pembuatan HTML adalah untuk membantu para peneliti berbagi dokumen dari satu komputer ke komputer lain. Kemudian, sistem ini dikembangkan lagi menjadi “World Wide Web” atau “www”.
Seiring perkembangannya, kini HMTL sudah mencapai versi kelima dengan total 9 versi, termasuk beberapa versi yang tak dirilis resmi. Agar tidak bingung saat belajar HTML nanti, ada baiknya jika kamu mengetahui terlebih dulu, perkembangan versi HTML dari tahun 1990-an.
- HTML 1.0 – versi tidak resmi HTML yang rilis pada Juni 1993.
- HTML 2.0 – versi resmi pertama, dirilis pada 24 November 1995.
- HTML 3.0 – versi ini hanya menjadi draft dan gagal beredar pada Maret 1995 karena banyaknya perubahan yang akhirnya memicu perdebatan.
- HTML 3.2 – 14 Januari 1997 versi ini dirilis resmi pertama kali oleh W3C (World Wide Web Consortium).
- HTML 4.0 – Setelah dikembangkan, versi keempat HTML dirilis pada 2 April 1998.
- HTML 4.01 – Sempat memiliki sedikit kekurangan, akhirnya versi 4.01 yang berisi hasil perbaikan versi 4.0 dirilis di akhir tahun 1999.
- XHTML 1.0 – Mengadopsi XML (Extended Markup Language) untuk menyederhanakan proses penyimpanan dan pengiriman data antarserver, versi HTML yang satu ini akhirnya dirilis pada 26 Januari 2000.
- XHTML 2.0 – Selang dua tahun, versi kedua XHTML dirilis pada Agustus 2002.
- HTML5 – Penggunaan XHTML telah diubah kembali menjadi HTML yang telah dikembangkan untuk bekerja tanpa XHTML oleh anggota organisasi independen W3C, WHATWG (Web Hypertext Application Technology Working Group), pada tahun 2014 hingga saat ini.
Versi HTML5 bisa dianggap paling canggih karena stabilitas dan kesederhanaan sistemnya. Selain itu, bahasa pemrograman ini juga bisa dikolaborasikan dengan CSS (Cascading Sheet Style) dan Javascript untuk membangun sebuah website secara manual menggunakan coding.
Kegunaan HTML
Jika di awal HTML digunakan untuk membantu peneliti memindahkan dokumen ke komputer lain, kini kegunaannya sudah semakin beragam. Beberapa kegunaan HTML yang perlu kamu ketahui adalah:
- Dapat digunakan untuk membuat struktur website, seperti format judul, heading, paragraf, bahkan hingga tabel, list, formulir, dan media seperti gambar atau video.
- Berguna untuk membungkus elemen HTML dan menampilkannya di halaman browser.
- Membuat link yang bisa mengarahkan ke halaman lain menggunakan kode tertentu yang disebut dengan hyperlink.
- Mengingat HTML menggunakan karakter ASCII (American Standard Code for Information Interchange), maka dapat digunakan di banyak OS, seperti MacOS, Windows hingga Linux.
Sederhananya, HTML berguna untuk mengelola serangkaian data sehingga suatu dokumen atau informasi dapat dibagikan atau diakses ke perangkat lain melalui website yang diakses dengan internet. Namun dalam aplikasinya, HTML masih membutuhkan bantuan dari CSS dan Javascript untuk mengembangkan sebuah website.
Baca Juga: CSS Framework untuk Membantu Proses Desain Website
Mengenal Tag, Elemen, dan Atribut pada HTML
Ada tiga komponen utama yang membentuk HTML, yaitu tag, elemen, dan atribut. Ketiga komponen ini akan sering kamu temukan saat mempelajari hingga menggunakan HTML. Apa saja pengertian ketiganya?
Tag
Tag pada HTML berarti penanda awal dan akhiran dari sebuah elemen, inilah yang disebut “markup”. Bagian ini berguna sebagai perintah atau instruksi yang dibaca oleh browser. Ada dua jenis tag yang perlu kamu perhatikan, yaitu tag dengan penutup seperti <p> … </p>, <body> … </body>, atau <title> … </title> dan tag tanpa penutup seperti <link>, <br>, <img>, atau <hr>.
Baca juga: Apa itu Bug? Kenali Jenis, Penyebab, dan Cara Mencegahnya
Elemen (Element)
Elemen adalah bagian yang lebih luas dari tag. Sebab, elemen berisi keseluruhan tag, mulai dari tag pembuka (<>), isi hingga penutup tag (</>) dan atribut yang melengkapi. Tapi jangan lupa, tidak semua tag memiliki penutup, maka perhatikan kembali jenis kodenya saat kamu mengidentifikasi sebuah elemen HTML.
Attribute
Atribut merupakan informasi tambahan dalam sebuah tag. Tidak semua tag memiliki atribut, namun beberapa tag wajib memerlukan atribut agar dapat bekerja, misalnya <a>, <img>, atau <video>. Atribut bisa kamu temui dalam contoh berikut
Baca Juga: SQL: Pengertian, Fungsi Beserta Perintah Dasarnya
Kerangka Dasar HTML
Agar dapat belajar membentuk sebuah halaman web, HTML memerlukan suatu kerangka. Selain dapat mempermudah browser membaca perintahmu, kerangka ini juga bisa membantu kamu mengisi dan mendesain website-mu sesuai keinginan.
Kerangka dasar ini merupakan gabungan dari tag, elemen, dan atribut yang telah dijelaskan tadi. Setidaknya ada lima kerangka dasar atau inti yang sering digunakan saat belajar HTML, yaitu:
<!DOCTYPE html>
Berfungsi untuk mendeklarasikan kepada komputer, tipe dokumen dan kode perintah yang hendak dibuat, yaitu HTML.
<html> … </html>
Tag yang satu ini wajib ada untuk membuat dokumen HTML, karena digunakan sebagai penanda bahwa kamu akan memulai dan mengakhiri dokumen menggunakan kode HTML. Bila perlu, kamu bisa menambahkan atribut “lang=” untuk memilih bahasa yang digunakan, seperti “en” untuk bahasa Inggris atau “id” untuk bahasa Indonesia.
<head> … </head>
Kamu bisa menggunakan tag ini untuk mengisi metadata yang berfungsi pula untuk SEO, seperti deskripsi, judul, kode CSS atau Javascript, dan sebagainya.
<title> … <title>
Title atau judul biasanya muncul di dalam <head>, tag ini berguna untuk menambahkan judul halaman web yang akan ditampilkan di tab browser.
<body> … </body>
Di sinilah kontenmu ditempatkan. Kamu bisa menambahkan beberapa tag yang sering digunakan, seperti <p> … </p> untuk membuat paragraf atau <h1> sampai <h6> untuk menambahkan heading.
Selain beberapa tag penting di atas, masih ada berbagai tag HTML yang bisa kamu gunakan untuk membuat sebuah halaman website. Temukan link untuk kamus HTML di subtopik “Tips Belajar HTML”, ya.
Baca Juga: Kode Warna HTML: Panduan Lengkap
Aplikasi Editor untuk Belajar HTML
Jika ingin belajar HTML, kamu perlu mengetahui apa saja aplikasi yang bisa digunakan sebagai editor untuk membuat HTML. Berikut ini adalah di beberapa aplikasi HTML editor yang dapat kamu coba:
Selain beberapa rekomendasi di atas, kamu juga bisa mengecek berbagai code editor lain untuk web developer dari artikel “Rekomendasi Code Editor Gratis untuk Web Developer”. Apakah salah satu di antaranya pernah kamu gunakan?
Pemilihan Browser
Usai menentukan aplikasi editor untuk belajar HTML, selanjutnya kamu dapat memilih browser yang sesuai dengan sistem operasi atau OS komputermu. Pastikan kamu memilih browser yang cocok agar kode HTML yang telah dibuat bisa tampil dengan optimal.
Selain itu, tak ada salahnya untuk menggunakan lebih dari satu browser untuk melakukan pengecekan, apakah kode HTML yang telah kamu susun dapat berfungsi dengan baik di browser lain. Sebab, hasil coding HTML yang kamu mungkin tidak kompatibel di browser tertentu. Jika sudah selesai memilih, cek hasil eksekusi kode HTML buatanmu.
Baca Juga: 10 Mesin Pencari Selain Google yang Baik dan Aman
Belajar Membuat HTML
Tak lengkap rasanya jika panduan belajar HTML tidak mencantumkan cara sederhana membuat kode HTML. Simulasi yang akan kita lakukan berikut tidak sekompleks pembuatan website, hanya kode mendasar yang bisa kamu praktikkan sendiri dengan perangkat komputer atau laptopmu.
1. Langkah pertama, buka aplikasi Notepad di komputermu.
2. Copy dan paste kode berikut ke Notepad.
<!DOCTYPE html> <html> <head> <title> Belajar HTML di Dewaweb </title> </head> <body> <p> Hello World! </p> </body> </html>
3. Jika sudah, simpan dokumen tersebut dan akhiri dengan ekstensi “.html” agar komputermu dapat membacanya sebagai file HTML, dan bukan text.
4. Buka file HTML yang tadi disimpan dan kamu akan diarahkan ke browser untuk mengakses file tersebut.
5. Jika tampilannya sudah seperti berikut ini, berarti kamu sudah berhasil membuat halaman web kamu dengan HTML. Selamat!
Bagaimana, tidak sulit, ‘kan? Tapi, sekarang halaman ini hanya bisa diakses oleh perangkat komputermu, alias belum bisa diakses oleh publik. Oleh karena itu, kamu memerlukan layanan cloud hosting untuk mengaktifkan website-mu agar dapat diakses secara umum melalui internet.
Baca Juga: Segala Hal yang Perlu Kamu Tahu tentang Cloud Hosting
Tips Belajar HTML
Setelah mengetahui panduan lengkap hingga cara membuat HTML sederhana, ada beberapa tips lagi yang perlu kamu pelajari, yaitu:
- Gunakan huruf non kapital saat menyusun kode HTML agar terlihat rapi, kecuali untuk mendeklarasikan dokumen HTML dengan “DOCTYPE”.
- Ketika menyimpan dokumen HTML, pastikan kamu menambahkan akhiran “.html” di nama file agar komputermu tidak menyimpan dalam format “.txt” yang tidak bisa diterjemahkan komputer sebagai kode HTML.
- Jika ragu, kamu bisa mengecek apakah penulisan HTML kamu sudah benar atau belum, melalui validator.w3.org.
- W3 Schools telah membuat kamus berisi elemen yang bisa digunakan di HTML, kamu bisa mengeceknya dari HTML Element Reference.
- Agar nama URL untuk web kamu terlihat rapi, jangan gunakan spasi ketika memberi nama file. Kamu bisa menggunakan simbol strip (-) atau underscore (_).
- Jika ingin melihat contoh dokumen HTML di halaman website yang kamu kunjungi, klik kanan di halaman tersebut, lalu klik “View Page Source”.
Selain beberapa tips bermanfaat di atas, kamu juga perlu mempelajari beragam jenis tema atau template yang cocok untuk website HTML, karena template website HTML berbeda dengan template untuk WordPress yang bisa langsung digunakan. Perbedaan lainnya, templat website HTML cenderung lebih sederhana dan masih perlu dimodifikasi lagi, sedangkan tema
Baca Juga: Dapatkan Elementor Pro, Elegant Themes, dan LapakInstan Gratis!
Simpulan
Demikian panduan lengkap belajar HTML bagi kamu yang masih pemula. Semoga tips di atas bisa membantumu mempelajari HTML untuk mengembangkan website yang menarik, ya!
Tapi, jika ingin membuat website yang lebih mudah, kamu bisa memanfaatkan cloud hosting yang sudah terpasang CMS seperti WordPress. Di Dewaweb, kamu juga bisa mendapatkan page builder Elementor Pro dan tema premium dari Elegant Themes. Jangan salah pilih, ya, pastikan kamu memilih cloud hosting terbaik agar website-mu aman, cepat, dan selalu bisa diandalkan.
Siap berkreasi? Semoga artikel ini bermanfaat untukmu, salam sukses online!
