HTML adalah bahasa yang bahasa yang harus ditamatkan oleh seorang web developer, apalagi bagi Anda yang seorang front-end developer.
Bahasa pemrograman ini juga merupakan komponen yang sangat penting dalam website.
Oleh sebab itu, tidak ada ruginya untuk belajar HTML yang dapat memberikan Anda wawasan baru tentang bahasa pemrograman ini. Yuk, simak sampai habis!
Apa itu HTML?
HTML merupakan singkatan dari HyperText Markup Language dan didefinisikan sebagai bahasa markup untuk pembuatan web.
Bahasa ini terdiri dari sekumpulan simbol-simbol dan kode-kode yang nantinya di-insert ke dalam sebuah file yang mau ditampilkan di internet.
Simbol-simbol yang digunakan pada bahasa ini menggunakan tags berupa simbol bracket “<” dan “>” serta sering kali menggunakan “<p>” untuk menjelaskan sebuah informasi tentang teks dalam dokumen.
Untuk membuat sebuah file HTML, ada standar khusus yang harus diikuti. Standar yang diikuti tersebut mengacu pada ASCII (American Standard Code for Information Interchange).
Keberadaan bahasa pemrograman ini dapat membantu Anda dalam menyusun heading dan paragraf atau membuat link, gambar, dan lainnya yang bisa terlihat di web page.
Web browser yang mendukung bahasa pemrograman ini, seperti Google Chrome, Mozilla Firefox, dan Microsoft Edge.
Sejarah HTML
Perkembangan HTML adalah bahasa pemrograman pertama di World Wide Web (WWW). Pengembang pertamanya adalah orang yang sama dengan penemu WWW, yaitu Tim Berners-Lee.
Awalnya pada akhir tahun 1991, Tim Berners-Lee mempublikasikan dokumen yang disebut “HTML Tags” yang menggambarkan 18 elemen.
Awalnya ini dikembangkan untuk membantu ilmuwan mengakses dokumen yang terdapat di dalam komputer.
Kemudian pada versi 2.0 digunakan standar untuk fitur utama yang berbasis pada penerapan pada tahun 1994 yang selanjutnya pada tahun 1995 HTML 2.0 dipublikasikan sebagai RFC 1866.
Versi ini mampu menampilkan data dan form yang bisa langsung diedit. Versi ini juga adalah cikal bakal dari website interaktif.
Lalu pada tahun 1997, kembali dipublikasikan pada versi 3.2 sebagai W3C Recommendation. Versi ini memberikan fitur baru, yaitu fitur figure, yang berfungsi untuk mendukung tampilan image.
Selanjutnya, pada kurun waktu akhir tahun 1997 dan pertengahan tahun 1998, dipublikasikan lagi HTML 4.0 sebagai W3C Recommendation. Pada versi ini ditambahkan command dasar berupa image, text, table, form, dan link.
Setelah itu pada akhir tahun 1999 hingga pertengahan 2000, muncul kembali dengan versi 4.01.
Versi kali ini juga dipublikasikan dengan standar internasional untuk Hypertext Markup Language, yaitu ISO/IEC 15445:2000. Versi ini adalah versi yang digunakan pada web browser mana pun.
Dan terakhir pada tahun 2104, versi terbaru muncul bernama HTML 5. Versi ini sudah melalui tahap perkembangan hingga dapat membuat tampilan dengan menggabungkan HTML, CSS, dan JavaScript.
Karena versi ini adalah versi paling mutakhir, jadi versi ini menjadi yang paling canggih karena dilengkapi fitur embed video dan audio.
Fungsi HTML
Setelah mengetahui cara kerjanya, jadi sebenarnya seperti apa fungsi HTML itu? Langsung saja kita bahas di bawah ini tentang fungsi-fungsinya.
1. Foundation
Bahasa pemrograman ini berfungsi sebagai pondasi dari sebuah website. Selain itu, apabila dikombinasikan dengan bahasa pemrograman lain akan membuat tampilan website Anda lebih menarik.
2. Creation
Fungsi keduanya adalah dapat membantu dalam membuat halaman website Anda yang dapat membantu Anda untuk menyalurkan berbagai informasi-informasi melalui internet.
3. Tagging
Kemudian fungsi ketiganya adalah bisa menandai teks dan bagian-bagian dari web page.
Dengan bantuan Hypertext Markup Language, maka halaman website Anda akan mudah dibaca oleh orang lain karena tersusun dengan rapi dan menarik.
4. Showing
Selanjutnya adalah dapat menampilkan halaman yang tidak membosankan karena Anda bisa menambahkan gambar, video, maupun audio dengan memanfaatkan bahasa pemrograman ini.
5. Directing
Dan yang terakhir, kini HTML bisa membantu Anda membuat halaman yang bisa mengarahkan pembaca website Anda ke halaman lainnya yang dikenal sebagai hyperlink.
Kelebihan HTML
Hypertext Markup Language memiliki beberapa kelebihan yang menjadikannya bahasa yang sangat penting dalam pengembangan web. Berikut ini adalah beberapa kelebihan utama HTML:
1. Sederhana dan Mudah Dipahami
HTML adalah bahasa yang relatif mudah dipelajari dan dipahami, bahkan oleh pemula. Ini membuatnya menjadi bahasa yang populer bagi banyak orang yang ingin membuat halaman web dasar.
2. Platform-Independen
Hypertext Markup Language dapat dijalankan di berbagai platform dan sistem operasi, sehingga halaman web yang dibuat dengan Hypertext Markup Language dapat diakses oleh berbagai perangkat, termasuk komputer, smartphone, dan tablet.
3. Kompatibilitas
Banyak browser web mendukung Hypertext Markup Language dengan baik, sehingga halaman web yang dibuat dengan HTML umumnya dapat diakses dengan baik di berbagai browser yang berbeda.
4. Pengembangan Terbuka
HTML adalah standar terbuka yang dikembangkan oleh World Wide Web Consortium (W3C).
Ini berarti bahwa siapa saja dapat mengakses spesifikasi Hypertext Markup Language dan berkontribusi pada perkembangannya.
5. Integrasi dengan Bahasa Lain
Hypertext Markup Language dapat dengan mudah diintegrasikan dengan bahasa pemrograman lain, seperti CSS (Cascading Style Sheets), untuk mengatur tampilan halaman web dan JavaScript untuk menambahkan interaktivitas.
Kekurangan HTML
Hypertext Markup Language adalah bahasa dasar untuk membangun halaman web, tetapi memiliki beberapa kekurangan yang perlu dipertimbangkan:
1. Statik
HTML pada dasarnya adalah bahasa markup statis, yang berarti bahwa halaman web yang dibuat dengan Hypertext Markup Language cenderung bersifat statis dan tidak memiliki interaktivitas yang tinggi tanpa bantuan bahasa pemrograman lain seperti JavaScript.
2. Keamanan Terbatas
HTML tidak memiliki banyak mekanisme keamanan bawaan, dan serangan keamanan web seperti Cross-Site Scripting (XSS) dan Cross-Site Request Forgery (CSRF) dapat terjadi jika tidak diatasi dengan benar.
3. Keterbatasan Fungsional
Hypertext Markup Language tidak memiliki banyak fungsionalitas tingkat tinggi seperti database dan pengolahan data.
Anda perlu menggunakan bahasa pemrograman server-side seperti PHP, Python, atau Ruby untuk melakukan tugas-tugas ini.
4. Ketergantungan pada Peramban
Meskipun HTML adalah standar terbuka, setiap peramban web memiliki cara unik untuk menafsirkan dan menampilkan halaman Hypertext Markup Language.
Ini dapat menghasilkan perbedaan dalam tampilan halaman web antar peramban.
Komponen HTML
Sebelum melanjutkan ke cara kerjanya, Anda juga perlu mengetahui komponen-komponennya. Secara umum, komponen tersebut terdiri atas tag, elemen, dan atribut.
1. Tag
Pertama adalah tag, komponen ini yang menandakan awalan dan akhiran yang akan dibaca oleh web browser. Tag menggunakan bracket “<” dan “>” dan apabila dituliskan menjadi <…>.
Tag untuk HTML saat ini mencapai 250 tags dan Anda cukup perlu menghafal tags dasarnya berikut ini:
a. <html>
Tag ini digunakan untuk memulai halaman Hypertext Markup Language yang akan menampilkan elemen-elemen dan konten.
b. <head>
Tag <head> digunakan untuk membuat halaman Hypertext Markup Language yang meliputi tampilan deskripsi di hasil pencarian search engine, style dari konten (CSS), dan lainnya.
c. <title>
Tag ini digunakan untuk membuat judul website.
d. <body>
Tag ini digunakan untuk membuat isi website.
e. <h1> hingga <h6>
Digunakan untuk membuat heading pada bagian isi.
f. <p>
Tag ini untuk memulai sebuah paragraf.
g. <!–>
Dan yang terakhir ini digunakan untuk membuat sebuah komentar.
2. Element
Element adalah kumpulan dari keseluruhan kode dari tag pembuka sampai dengan tag penutup.
Komponen kedua ini terdiri dari tag pembuka, isi konten, dan tag penutup. Selain itu, element juga disebut nested element. Contohnya seperti berikut:
<html>
<body>
<h2>Ayam Geprek<h2>
<p>Ayam geprek adalah makanan yang lezat.</p>
<body>
<html>
3. Attribute
Komponen ketiga ini adalah attribute. Pada bagian ini berisi informasi atau perintah tambahan yang ada di dalam element. Attribute berfungsi sebagai yang menjelaskan command dari tag pada element.
Berikut ini adalah attribute khusus yang digunakan beberapa tag, yaitu:
a. src
Attribute ini bisa digunakan pada tag <img>, <embed>, <iframe>, dan <audio>.
b. action
Attribute kedua ini dapat digunakan pada tag <form>.
c. href
Attribute ketiga ini dapat digunakan pada tag <a> dan <link>.
d. autoplay
Dan yang terakhir, attribute ini dapat digunakan untuk tag <audio> dan <video>.
Attribute juga diimplementasikan dengan bahasa pemrograman JavaScript yang bisa membuat halaman website Anda dapat melakukan aksi-aksi tertentu.
Cara Kerja HTML
Dokumen HTML adalah file yang memiliki format ekstensi .htm atau .html.
Biasanya, sebuah web browser membaca file tersebut dan kemudian melakukan render kontennya sehingga Anda bisa melihatnya melalui web page.
Setiap pages memiliki elemen-elemen yang terdiri dari sekumpulan tags dan atribut. Element adalah building blocks dari web pages.
Sebuah tag yang akan memberi tahu web browser awal dan akhir dari sebuah elemen, sedangkan sebuah atribut akan mendeskripsikan karakteristik dari elemen tersebut.
Terdapat 3 bagian utama dari sebuah elemen adalah:
- Opening tag, bagian ini untuk menjelaskan awalan dari sebuah elemen. Tag ini biasanya menggunakan bracket pembuka dan penutup. Contohnya, saat kita akan membuat paragraf harus dimulai dengan tag <p>
- Content, pada bagian ini adalah bagian bisa Anda lihat di web page
- Dan terakhir pada bagian closing tag ini adalah yang menjelaskan penutupan dari sebuah elemen. Tag yang tertulis di sini mirip seperti pada opening tag namun ditambahkan forward slash, seperti </p>
Kombinasi dari 3 bagian ini akan membentuk element seperti berikut:
<p> Crepes adalah jajanan yang lezat dan bergizi. </p>
Apa Hubungan antara HTML, CSS, dan JavaScript?
Karena untuk membuat tampilan website Anda semakin menarik, HTML memerlukan bantuan dari CSS (Cascading Style Sheets) dan JavaScript untuk membuat konten website yang lebih menarik dan responsif.
Dalam hal ini CSS berperan untuk memberikan styling, seperti background, color, layout, spacing, dan animasi.
Sementara itu, JavaScript berperan untuk menambahkan fungsionalitas dinamis, seperti sliders, pop-up, dan galeri foto.
Ketiga bahasa pemrograman ini adalah bahasa dasar yang penting bagi seorang front-end developer.
Nah, demikian penjelasan tentang bahasa pemrograman HTML. Apakah Anda tertarik untuk mempelajarinya?
Sebagai fondasi web modern, HTML memainkan peran penting dalam membangun tampilan dan struktur halaman website.
