HTML merupakan bahasa markup yang digunakan untuk membuat halaman web. Bahasa ini berfungsi untuk mengatur dan memformat konten di dalam sebuah situs web. Meskipun sebenarnya HTML bukan bahasa pemrograman, namun kamu wajib mempelajarinya untuk menjadi web developer yang andal.
Pada artikel ini, PapiTekno akan menjelaskan secara lengkap apa itu HTML, sejarah, fungsi, komponen, dan cara kerjanya. Yuk simak sampai habis!
Apa itu HTML?
HTML (Hypertext Markup Language) adalah bahasa markup standar untuk membuat dan menjelaskan menjelaskan struktur halaman web. HTML menggunakan simbol tertentu (tag) dalam menyusun struktur website agar bisa diterjemahkan oleh browser ke halaman web.
Selain sebagai struktur halaman, HTML juga memungkinkan kamu untuk menambahkan konten seperti teks dan gambar, serta memberikan format dan tata letak pada website kamu. HTML dikelola oleh World Wide Web Consortium (W3C), yang juga bertanggung jawab dalam merilis pembaruan rutin HTML.
Setelah mengetahui apa itu html, mungkin kamu penasaran bagaimana sejarah lahirnya HTML? Berikut kami jelaskan sejarah singkat HTML.
Sejarah HTML
Sejarah HTML berkaitan dengan WWW (World Wide Web) yang menjadi asal muasalnya website terbentuk di dunia. Saat tahun 1980, ada seorang ahli fisika bernama Tim Berners-Lee yang bekerja di CERN (Organisasi Eropa untuk Riset Nuklir). Ia mengusulkan sistem bernama ENQUIRE untuk berbagi dokumen di kalangan ilmuwan CERN. Sembilan tahun kemudian, Berners-Lee mengusulkan sistem markup berbasis internet.
Berners-Lee membuat spesifikasi HTML dan menulis jaringan serta perangkat lunaknya pada akhir tahun 1990. Di tahun yang sama, Berners-Lee dan Robert Cailliau, insinyur sistem data CERN, bekerja sama mengajukan permintaan pendanaan untuk proyek mereka, namun ditolak oleh CERN secara resmi. Pada catatan pribadinya, Berners-Lee mencatat beberapa daerah yang menggunakan hypertext dan membuat sebuah ensiklopedia.
Penjelasan pertama mengenai HTML yang disebarkan kepada publik adalah sebuah dokumen yang disebut “Tanda HTML” yang disebutkan pertama kali oleh Tim Berners-Lee pada akhir tahun 1991. Dokumen tersebut menjelaskan 18 elemen awal dari HTML, yaitu versi sederhana dari HTML.
Saat ini HTML sudah mencapai versi HTML5, yang sebelumnya dirilis pada tahun 2014. HTML5 menyertakan beberapa tag baru seperti <artcile>, <header>, dan <footer> yang menjelaskan struktur website lebih detail.
Komponen-Komponen HTML
Seperti yang sudah kita bahas pada sejarah HTML, bahwa HTML awalnya memiliki 18 elemen awal. Nah, sekarang kita akan membahas komponen-komponen tersebut yang berupa tag, elemen dan atribut dalam HTML.
1. Tag
Tag adalah tanda awalan dan akhiran dalam perintah HTML yang bisa dibaca oleh browser. Penulisan tag dalam HTML menggunakan kurung siku terbuka dan tertutup seperti <…>. Di dalam kurung siku tersebut, kita akan menuliskan nama tag yang sesuai.
Fungsi tag HTML berbeda-beda tergantung dari perintahnya. Tag memungkinkan kita untuk membuat judul, paragraf, heading, cetak tebal (bold), miring (italic), dan masih banyak lagi. Misalnya jika kita ingin membuat teks cetak miring, kita bisa menggunakan tag <i> yang nantinya akan ditampilkan dengan format miring atau italic di browser.
Awalnya tag HTML terdiri dari 18 jenis tag. Namun, saat ini telah ada lebih dari 250 tag yang dapat kita gunakan. Berikut adalah beberapa tag dasar dalam HTML:
- <html>: Digunakan untuk membuat halaman HTML yang mencakup semua konten dan elemen.
- <head>: Digunakan untuk membuat elemen HTML, yang mencakup tampilan deskripsi di hasil pencarian Google, style konten (CSS), dan sebagainya.
- <title>: Digunakan untuk membuat judul halaman.
- <body>: Digunakan untuk membuat bagian isi dari website.
- <h1>, <h2> sampai <h6>: Digunakan untuk membuat heading atau judul pada artikel.
- <p>: Digunakan untuk membuat paragraf.
- <!– –>: Digunakan untuk membuat komentar.
2. Elemen
Sebenarnya elemen masih berkaitan dengan tag. Elemen HTML adalah gabungan antara tag pembuka dan tag penutup. Misalnya, tag <bold>Belajar HTML di PapiTekno.</bold> merupakan sebuah elemen yang terdiri dari tag pembuka <bold> dan tag penutup </bold>.
Namun, elemen tidak selalu hanya berisi teks saja, terkadang elemen juga bisa berisi elemen lain. Hal ini biasanya disebut sebagai nested element atau elemen yang berada di dalam elemen lain. Mudahnya, nested element ini sama seperti seperti kotak dalam kotak.
Berikut adalah contoh kode HTML dengan nested element:
<html>
<body>
<h2>Apa itu HTML?</h2>
<p>HTML adalah bahasa markup standar pada halaman website</p>
</body>
</html>
Dalam contoh tersebut, terdapat elemen <html> yang berisi elemen <body> lau di dalamnya terdapat elemen <h2> dan elemen <p>.
3. Atribut
Atribut adalah kata-kata khusus yang ada di dalam tag pembuka HTML. Penggunaan atribut juga bisa menambahkan makna khusus pada sebuah elemen, dan kita juga bisa menambahkan atribut pada elemen apa pun.
Terdapat beberapa elemen yang wajib menggunakan atribut, misalnya elemen <a>, <img>, <video>, dan lain-lain. Penambahan atribut ini sebenarnya cukup penting dan berpengaruh terhadap SEO website. Berikut beberapa contoh penggunaan atribut pada HTML:
- Src bisa digunakan oleh elemen <img>, <embed>, <audio>, <iframe>.
- Href bisa digunakan oleh elemen <a>, <link>.
- Action bisa digunakan oleh elemen <form>.
- Autoplay bisa digunakan oleh elemen <audio>, <video>.
Dengan menggunakan atribut, kamu bisa memberikan pengaturan tambahan pada elemen HTML sesuai yang kamu inginkan. Ingat, setiap elemen punya atribut yang berbeda, jadi pastikan memilih atribut yang sesuai dengan elemen yang digunakan.
Fungsi HTML
Setelah mengetahui apa itu HTML, apakah kamu penasaran apa saja fungsi dari HTML? Berikut beberapa fungsi dan contoh penggunaan tag HTML:
1. Membuat Struktur Halaman Web
Fungsi utama dari HTML adalah untuk membuat struktur halaman website. Struktur seperti header, footer, navigasi, dan konten website dibangun menggunakan bahasa markup HTML.
HTML berperan penting sebagai pondasi bagi bahasa pemrograman lainnya seperti CSS dan JavaScript. Jika kamu ingin belajar membuat website, maka HTML lah bahasa pertama yang wajib kamu kuasai.
2. Menambahkan Konten Website
Selain membuat struktur website, HTML juga berfungsi untuk memasukan berbagai konten seperti gambar, video, dan media lainnya ke dalam halaman website.
Misalnya saat kamu ingin membuat paragraf baru, kamu bisa menggunakan tag <p>. Sedangkan untuk memasukan gambar ke dalam website, kamu bisa menggunakan tag <img>, berikut contohnya:
<p>Rahmat Abdul Azis</p>
<img src=”https://papitekno.com/wp-content/uploads/2023/09/rahmat-abdul-azis-jpg.webp”>
<p>Saya seorang penulis di PapiTekno.com</p>
Hasilnya:
Rahmat Abdul Azis
Saya seorang penulis di PapiTekno.com
3. Mengatur Format dan Tata Letak Website
HTML juga memungkinkan kamu untuk mengatur tata letak dan format konten pada website. Kamu bisa memilih ukuran teks, jenis huruf dan menentukan warna huruf menggunakan kode warna HTML.
Misalnya saat kamu ingin menandai teks dengan cetak tebal, kamu bisa menggunakan kode html <b>. Sedangkan untuk memiringkan tulisan, kamu bisa menggunakan tag <i>, contohnya:
<b>PapiTekno adalah blog teknologi Indonesia</b>
<i>PapiTekno.com – blog teknologi Indonesia</i>
Saat diterapkan, hasilnya akan menjadi PapiTekno adalah blog teknologi Indonesia. Kemudian pada format italic akan menjadi PapiTekno.com – blog teknologi Indonesia.
4. Mengarahkan Pengguna ke Halaman Website Lain
HTML juga berfungsi untuk membuat hyperlink yang dapat mengarahkan pengunjung ke halaman website lainnya. Kamu dapat menggunakan tag <a> untuk membuat anchor text seperti pada kode berikut:
<a href=”https://www.google.com/”>Google</a>
Saat tag tersebut kamu gunakan, maka kamu akan mendapatkan hyperlink Google seperti teks ini. Penggunaan hyperlink dapat memudahkan pengunjung untuk mendapatkan informasi lebih lanjut melalui laman atau website lainnya.
Cara kerja HTML
HTML bekerja dengan cara menggunakan tag-tag tertentu untuk menyusun halaman website. Setiap tag tersebut memiliki fungsinya masing-masing, sehingga kamu bisa membuat struktur dan tampilan konten yang kamu butuhkan dan nantinya browser akan menerjemahkan tag-tag ini untuk ditampilkan pada website. Untuk membuat HTML bekerja pada browser, berikut adalah langkah-langkahnya:
Pertama, kamu perlu membuat file HTML baik itu menggunakan teks editor ataupun aplikasi editor HTML. Kemudian kamu bisa menyimpan file tersebut menggunakan format .html atau .htm. Dokumen tersebut nantinya bisa kamu buka menggunakan web browser Google Chrome, Safari, atau Mozilla Firefox.
Dokumen dalam sebuah website biasa memiliki lebih dari satu file HTML untuk membuat berbagai halaman. Misalnya halaman utama, kontak, blog, kebijakan privasi dan lain-lain. Setiap dokumen tersebut akan berisi elemen HTML yang merujuk pada bagian-bagian dalam website, seperti heading, paragraf, isi konten, dan lain-lain.
Untuk membuat halaman HTML dapat diakses oleh banyak orang melalui internet, kamu perlu mengonlinekannya terlebih dahulu. Caranya dengan menyewa layanan web hosting dan mengupload file HTML kamu ke dalamnya. Selain itu, kamu juga perlu menyewa alamat domain agar website kamu bisa diakses dengan mudah.
Jika file HTML sudah berhasil terupload, kamu bisa membuka alamat website kamu menggunakan domain. Misalnya website ini memiliki domain PapiTekno.com yang akan memunculkan file HTML yang telah kami upload sebelumnya.
Itulah artikel mengenai pengertian HTML, sejarah, komponen, fungsi dan cara kerjanya. Sebagai seorang web developer kamu wajib menguasai bahasa markup ini agar kamu bisa merancang struktur halaman website dengan baik dan benar. Selamat mencoba!
Hai saya Azis. Saya memiliki ketertarikan dengan komputer sejak sekolah dasar, yang membuat saya menjadi seorang blogger. Kini blogging menjadi hobi saya, semoga tulisan saya dapat bermanfaat untuk Anda. Terima kasih 🙂