Untuk Sobat Androbuntu yang baru belajar bahasa pemrograman, terutama di bidang pengembangan web, maka HTML adalah hal wajib yang harus kalian kuasai. HTML merupakan komponen dasar yang menyusun sebuah web.

Selain HTML, ada juga komponen lain yang menyusun sebuah halaman web, antara lain CSS, JavaScript, database, server dan masih banyak lagi. Namun dapat dikatakan HTML adalah yang terpenting.

Karenanya HTML merupakan yang pertama kali wajib dipelajari oleh orang-orang yang ingin belajar pengembangan web. Entah itu secara otodidak maupun melalui pendidikan resmi seperti perguruan tinggi.

Baca juga: Pengerian Dark Web dan Deep Web Serta Perbedaannya

Pengertian HTML

HTML adalah kepanjangan dari Hypertext Markup Language. HTML merupakan salah satu bahasa markup untuk membangun sebuah halaman web.

Namun jangan keliru dengan menganggap HTML sebagai bahasa pemrograman. HTML bukanlah bahasa pemrograman seperti JavaScript, Python atau C++. HTML hanyalah bahasa markup.

Masih banyak orang yang menganggap HTML sebagai bahasa pemrograman, padahal bukan. Bahasa markup dan bahasa pemrograman adalah dua hal yang sangat berbeda.

Bahasa markup seperti HTML mendeskripsikan struktur dan tampilan konten ke sebuah program (contohnya browser). Tidak ada logika seperti if/else, loop atau semacamnya pada bahasa markup.

Selain HTML, ada juga beberapa bahasa markup lain yang cukup populer seperti XML, Markdown dan YAML. Semuanya memiliki fungsi yang sama, yaitu untuk mendeskripsikan struktur dan tampilan konten.

Sedangkan bahasa pemrograman seperti JavaScript, Python dan semacamnya memberikan instruksi ke komputer untuk dieksekusi seperti logika, pemrosesan data dan pengambilan keputusan.

Sejarah HTML

Pada tahun 1980, IBM (International Business Machines) berhasil menciptakan sebuah bahasa yang menggabungkan simbol atau tag dengan teks. Waku itu IBM masih dikenal sebagai perusahaan pembuat hardware dan software.

6 tahun berlalu, tepatnya pada 1986 bahasa yang tadinya dikenal dengan nama GML ini diubah namanya menjadi SGML (Standart Generlized Markup Language). SGML menjadi bahasa standar unuk pembuatan dokumen dan berkas.

Kemudian pada tahun 1989 CERN (Centre Europeen pour la Recherche Nucleaire) yang kala itu diketuai oleh Tim Berners Lee menyampaikan idenya untuk membuat bahasa yang kini kita kenal sebagai HTML.

Fungsi HTML

HTML berfungsi sebagai dasar atau fondasi dari struktur tampilan situs, misalnya untuk menampilkan heading, paragraf, daftar, kolom, dan lain-lain. Semua struktur situs tersebut ditulis dalam HTML.

Semua gambar, video, audio dan tautan yang saya sisipkan di androbuntu.com juga ditulis menggunakan HTML. Jadi dengan kata lain, bagi seorang pengembang situs, mereka menggunakan HTML untuk menampilkan apa yang ingin mereka tampilkan.

Pengembang situs akan menuliskan tampilan sebuah situs dalam HTML. Kemudian browser akan menerjemahkannya dalam tampilan yang sesuai kepada para pengunjung situs. Semua dilakukan di latar belakang oleh browser, pengunjung hanya “menikmati” hasilnya.

Namun ada kalanya kamu akan melihat sebuah situs memiliki tampilan yang rusak. Entah ada tombol yang letaknya bertantakan, gambar yang tidak muncul, font yang tidak sesuai, atau elemen-elemen lain yang tampil tidak seperti sebagaimana mestinya.

Jika kamu melihat ada situs dengan tampilan rusak seperti itu, ada beberapa kemungkinan. Pertama, situs tersebut memang memiliki kesalahan penulisan HTML yang dilakukan oleh pengembangnya.

Bisa jadi ada satu atau dua baris kode yang salah tulis. Entah karena memang ada karakter yang terhapus atau ada karakter yang seharusnya tidak boleh ada. Sebagai contoh, untuk menampilkan gambar di situs seharusnya menggunakan tag . Jika pengembang salah dalam menuliskan tag tersebut, maka gambar tidak akan muncul di situs.

Hal tersebut biasanya terjadi karena ketidaksengajaan. Entah si pengembang terlalu terburu-buru dalam mengetik tag yang diinginkan, atau memang ada penempatan tag yang tidak sebagaimana mestinya.

Hal lain yang dapat menjadi alasan rusaknya tampilan sebuah situs adalah karena kamu menggunakan browser dengan versi lawas. HTML terus dikembangkan setiap saat, ada tag-tag baru yang terus ditambahkan guna membuat tampilan sebuah situs menjadi lebih menarik.

Browser lama yang kamu gunakan untuk mengunjungi situs-situs dengan tag-tag baru, tidak akan dapat menampilkan situs tersebut dengan sempurna. Tampilan yang ditulis dalam tag baru akan mengalami *error”.

Contoh paling nyata adalah jika kamu mencoba mengakses androbuntu.com menggunakan browser lawas milik Microsoft, Internet Explorer. Browser tersebut akan menampilkan situs ini secara amburadul.

Bukan karena androbuntu.com tidak dikoding dengan baik, namun karena Internet Explorer adalah browser yang sudah usang sehingga tidak dapat membaca kode-kode HTML terbaru.

Cara kerja HTML

Pengembang situs akan menulis kode HTML menggunakan tag (elemen). Contohnya <h1>, <p>, dan lainnya. Tag yang ditulis oleh pengembang ini akan memberi “makna” pada konten di situs seperti judul, paragraf, gambar, dan seterusnya.

Berikut ini ada contoh struktur dasar kode HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Selamat Datang</h1>
    <p>Ini paragraf.</p>
  </body>
</html>

Browser akan membaca file berformat .html saat dibuka. Browser seperti Firefox, Chrome dan Safari akan membaca kode dari atas ke bawah. Dimulai dari baris pertama hingga baris terakhir.

Setelah membaca file, browser akan mengubah kode HTML tersebut menjadi struktur pohon yang disebut dengan DOM atau Document Object Model. Ini merupakan representasi elemen-elemen halaman yang disusun secara hierarkis.

Dan berdasarkan DOM tersebut, browser akan merendernya menjadi tampilan visual ke layar yang dapat dilihat pengguna dalam bentuk teks, gambar, tombol dan lainnya sesuai dengan tag yang ditulis pengembang situs.

Contoh tag HTML yang paling sering digunakan

Ada beberapa tag HTML populer yang paling sering digunakan di sebuah situs, berikut ini adalah beberapa diantaranya:

Struktur dasar

• - elemen root atau pembungkus seluruh halaman
• - berisi metadata seperti judul, link CSS, dan masih banyak lagi
• - berisi konten yang tampil di halaman suatu situs

Teks dan judul

• <1> - <6> - untuk menampilkan judul atau heading, h1 terbesar dan h6 terkecil

• - untuk menampilkan paragraf

• 
  - mengganti baris (line break)

• ---

  • menampilkan garis pembatas horizontal
• - untuk menampilkan teks tebal, bisa juga menggunakan tag
• - untuk mencetak teks miring, bisa juga menggunakan teks
• - untuk membungkus teks kecil untuk di styling

Link dan media

• - hyperlink, untuk menampilkan teks berisi link yang dapat di klik
• - untuk menampilkan gambar

Daftar

• - daftar tanpa urutan (bullet)
• - daftar berurutan menggunakan nomor
• - menampilkan item dalam daftar

Struktur layour

• - pembungkus umum (blok)
• - bagian atas halaman atau section

Kelebihan dan keterbatasan HTML

Tips belajar HTML untuk pemula

Kesimpulan