Kamu tahu gak, bahwa HTML menjadi bahasa pemrograman yang paling banyak digunakan pada website saat ini? Oleh karena itu, penting bagi kamu untuk mempelajari HTML, terutama jika kamu berminat dalam membuat dan mengembangkan website. Bahkan, belajar HTML menjadi dasar yang harus dikuasai oleh setiap pengembang website yang ingin menekuni bidang ini.
Apa sih HTML itu?
Ilustrasi Kode HTML. Sumber: feeCodeCamp
Dalam pembuatan website, HTML atau Hypertext Markup Language berfungsi untuk menentukan struktur tampilan dan konten. Namun, HTML tidak bekerja sendiri, melainkan membutuhkan bantuan CSS dan JavaScript agar tampilan website terlihat menarik dan interaktif.
Perlu diketahui bahwa syntax pada HTML selalu dimulai dengan tag di dalam <> dan diakhiri dengan tag </>.
Mempelajari HTML
Ilustrasi Kode HTML. Sumber: Computer Bild
Dalam mempelajari HTML, ada 2 alat yang harus disiapkan, yaitu aplikasi text editor dan browser. Fungsi dari text editor adalah untuk menulis sintaks dalam proses pengkodean, sedangkan browser berguna untuk melihat hasil kode yang telah dibuat.
Ada beberapa aplikasi text editor yang dapat digunakan untuk belajar HTML, antara lain Sublime, Notepad++, dan Visual Studio Code. Namun, jika belum memiliki aplikasi tersebut, Notepad bisa menjadi alternatif yang cukup baik. Untuk browser, disarankan untuk menggunakan Firefox, Chrome, atau Edge. Dengan menggunakan tools tersebut, kamu bisa memulai proses belajar HTML dengan mudah dan efektif.
Yuk, Buat File HTML Pertama Kamu!
Setelah mempersiapkan tools yang diperlukan, langkah selanjutnya adalah membuat file HTML pertama. Cara membuatnya sangatlah mudah. Pertama, buka aplikasi text editor yang telah disiapkan sebelumnya. Selanjutnya, tulislah kode HTML pertama seperti contoh di bawah ini.
Jika sudah selesai mengetik, simpan file tersebut dengan nama index.html.
Kamu bisa melihat hasilnya dengan membuka file HTML tersebut di browser. Pertama-tama, klik dua kali pada file yang sudah kamu buat tadi. Jika muncul pilihan aplikasi, pilihlah browser untuk membukanya. Kemudian, kamu akan melihat tampilan “Halo Dunia!” di dalam browser.
Struktur Dasar HTML
Ilustrasi Kode HTML. Sumber: Unsplash
Jika kita perhatikan dengan seksama kode yang telah kita ketik di aplikasi text editor tadi, kita akan melihat bahwa terdapat tiga tag yang sangat penting, yaitu <html>, <head>, dan <body>. Tag-tag tersebut merupakan struktur utama atau dasar yang membentuk sebuah halaman web dengan menggunakan HTML. Struktur ini sangat penting karena memberikan kerangka atau landasan dalam menuliskan konten dan menentukan tampilan yang akan ditampilkan pada browser.
Deklarasi
Pada awal kode HTML yang telah kamu buat, terdapat bagian yang disebut deklarasi. Deklarasi ini berfungsi untuk menyatakan jenis dokumen yang digunakan dan jenis tipe dokumen tersebut. Sebagai contoh pada kode HTML yang diberikan sebelumnya, terdapat deklarasi <!DOCTYPE html> yang menandakan bahwa HTML yang digunakan adalah versi 5.
Pada bagian selanjutnya terdapat tag <html lang=”en”>. Tag <html> harus selalu hadir di setiap dokumen HTML. Tanpa adanya tag tersebut, file HTML tidak dapat di-compile dan outputnya tidak akan muncul di browser. Sedangkan atribut lang=”en” menunjukkan bahwa dokumen yang dibuat menggunakan bahasa Inggris.
Tag <html> ditutup dengan </html>. Namun sebelum itu masih ada dua tag penting yang akan dibahas di bawah ini.
Head
Bagian head dalam file HTML merupakan bagian penting yang terletak di antara tag <html> dan <body>. Head biasanya digunakan untuk menyimpan informasi yang tidak ditampilkan ke pengguna, seperti meta tag, tautan ke file CSS, tautan ke file JavaScript, deskripsi halaman, dan lain sebagainya. Contoh tag tersebut antara lain:
Body
Bagian body pada dokumen HTML merupakan inti dari tampilan halaman web yang akan ditampilkan pada browser. Semua konten yang terlihat pada halaman web, seperti teks, gambar, video, dan lainnya ditempatkan pada bagian ini. Tak heran kalau biasanya bagian body ini lebih banyak dibandingkan bagian lainnya.
Penulisan bagian body dimulai dengan tag <body> dan di bagian akhir ditutup dengan </body>. Umumnya, setelah tag </body>, file HTML akan berakhir dan ditutup dengan </html>.
Apa itu Tag, Elemen, dan Atribut?
Dalam proses belajar HTML, kamu juga perlu memahami tentang tag, elemen, dan atribut. Hal ini sangat penting karena tag, elemen, dan atribut digunakan untuk menentukan struktur, style, dan konten dari sebuah halaman web.
Sumber: Medium
Tag dalam HTML adalah simbol penanda yang terdiri dari kurung siku (<>) dan berisi nama tag atau elemen HTML. Setiap tag memiliki awalan dan akhiran yang harus diberi penanda dengan tanda garis miring (/). Beberapa tag juga memiliki atribut yang digunakan untuk memberikan informasi tambahan mengenai suatu elemen HTML. Contoh tag yang sering digunakan dalam HTML antara lain <head>, <body>, <p>, dan masih banyak lagi.
Setiap tag pada HTML selalu memiliki penutup yang dibuat dengan menggunakan tanda kurung siku terbalik dan garis miring (/). Contohnya seperti </head>, </body>, dan <p>. Tujuannya adalah untuk menandai akhir dari sebuah elemen HTML.
Sumber: freeCodeCamp
Elemen pada HTML adalah komponen-komponen yang terdiri dari tag pembuka, isi, dan tag penutup (jika diperlukan). Beberapa elemen juga dapat memiliki atribut. Berikut ini adalah contoh elemen pada HTML:
<p align=”center”>Halo Dunia!<p>
Dalam contoh tersebut, terdapat sebuah elemen <p> yang memiliki atribut align=”center”. Isinya adalah teks “Halo Dunia!”.
Sumber: SlidePlayer
Atribut adalah kata khusus yang ditempatkan di dalam tag pembuka untuk mengubah perilaku elemen. Atribut juga disebut sebagai modifier. Pada contoh sebelumnya, terdapat atribut align=”center” yang berfungsi mengubah posisi teks Halo Dunia! sehingga muncul di tengah layar.
Referensi.
Malasngoding, https://www.malasngoding.com/tutorial-html-lengkap/ Diakses pada 21 Maret, 2023.
Course-net, https://course-net.com/blog/belajar-html-untuk-pemula/ Diakses pada 21 Maret, 2023.
idcloudhost, https://idcloudhost.com/panduan-lengkap-belajar-html-untuk-pemula/ Diakses pada 21 Maret, 2023.