HTML adalah bahasa markup standar untuk membuat halaman website. Bahasa ini berfungsi untuk membuat struktur website hingga menyusun format teks dan gambar pada halaman web.
Walaupun HTML bukan bahasa pemrograman, Anda wajib mempelajarinya jika Anda ingin menjadi web developer yang andal.
Di artikel ini,kami akan menjelaskan secara lengkap apa itu HTML, fungsinya, komponennya, dan cara kerjanya.
Mari simak pembahasannya !
#Apa itu HTML ?
HTML adalah bahasa markup untuk membuat halaman web. Kepanjangan dari HTML adalah Hypertext Markup Language. Artinya, HTML menggunakan simbol tertentu (tag) yang nantinya akan diterjemahkan oleh browser ke halaman web.
Dengan menggunakan tag-tag HTML, Anda dapat membangun struktur halaman, menambahkan konten seperti teks dan gambar, serta memberikan format dan tata letak pada website.
HTML terdiri dari kombinasi teks dan simbol yang disimpan dalam sebuah file. Untuk membuat file HTML, harus mengikuti standar atau format khusus. Format ini tertuang dalam standar kode internasional atau ASCII (American Standard Code for Information Interchange).
Setelah mengetahui pengertian HTML di atas, Anda mungkin penasaran bagaimana sejarah lahirnya HTML hingga saat ini?
Untuk itu, mari simak terlebih dulu sejarah HTML berikut.
#Sejarah HTML
Sejarah HTML pertama kali dikembangkan oleh Tim Berners-Lee, ilmuwan dari organisasi European Organization for Nuclear Research (CERN) pada tahun 1990. Awalnya, markup language diciptakan oleh IBM, perusahaan hardware dan software asal Amerika Serikat
Sejak tahun 1991, Tim Berners-Lee, yang juga penemu world wide web (WWW), mengembangkan HTML sebagai solusi untuk memudahkan para ilmuwan CERN dalam mengakses dokumen satu sama lain.
Barulah di tahun 1993, bahasa markup ini meluncur resmi ke publik dan berkembang menjadi berbagai versi hingga saat ini.
Sampai saat ini HTML5 menjadi versi yang paling update dengan sistem yang paling canggih. Popularitas HTML versi terbaru ini pun sangat pesat. Bahkan, saat ini ada 87,4 persen website yang sudah menggunakan HTML5.
Sejarah penggunaan HTML secara umum ini pun tak bisa lepas dari peran World Wide Web (WWW). WWW dan HTML adalah dua aspek yang saling berhubungan. Karena, HTML adalah dasar untuk membuat halaman website, yang nantinya ditampilkan pada WWW.
#Fungsi HTML
Fungsi HTML adalah untuk mengatur tampilan halaman web. Terutama menyusun teks seperti paragraf dan heading, hingga menambahkan link dan gambar. Berikut adalah beberapa fungsi HTML lainnya:
1. Membuat Struktur Halaman Web
Fungsi utama HTML adalah untuk membangun struktur halaman web. Mulai dari membuat header, footer, navigasi, hingga kontennya.
Peran HTML juga sebagai pondasi halaman web. Sebab, untuk menerapkan beberapa bahasa pemrograman maupun bahasa lainnya seperti CSS dan JavaScript, website membutuhkan struktur yang dibangun dari HTML.
Jadi, tak berlebihan juga jika HTML dikatakan sebagai dasar untuk memahami bahasa pemrograman.
2. Menambahkan Konten Website
Selain membuat struktur, Anda juga bisa memasukkan gambar di HTML dan menambah konten pada halaman web. Sebab, bahasa markup ini memungkinkan Anda menyisipkan ilustrasi dan video, membuat tabel HTML, dan memasukkan media lainnya.
Misalnya, dengan menggunakan tag <p> untuk menambah paragraf, tag <img> untuk memasukkan gambar.
3. Mengatur Format dan Tata Letak
Berikutnya, HTML memungkinkan Anda mengatur format dan mengatur tata letak konten dalam halaman web. Seperti memilih ukuran dan jenis huruf, menentukan warna huruf dengan berbagai kode warna HTML, serta mengatur tata letak konten pada website.
Semisal untuk menandai kalimat cetak tebal, gunakan kode HTML <bold>. Sedangkan untuk memiringkan tulisan, gunakan tag <italic>.
Dengan kode HTML yang tepat, Anda dapat membuat tampilan konten menarik serta mudah dibaca.
4. Mengarahkan Pengguna ke Halaman Website Lain
HTML juga berfungsi mengarahkan pengguna ke halaman atau website lain menggunakan link tertentu. Link ini bisa disematkan ke dalam teks tertentu, alias sebagai anchor text.
Cara membuat hyperlink dengan kode HTML yaitu menggunakan tag <a>. Misalnya:
"<a href="https://offcncs.blogspot.com/">OFFICIAL NEWBIE CYBER SECURITY</a>"
Dengan hyperlink, pengunjung bisa dengan mudah mendapatkan informasi yang saling berhubungan dengan halaman yang sedang dibaca. Anda juga bisa mengarahkan mereka ke landing page tertentu..
#Mengenal Komponen HTML
Setelah mengetahui bagaimana sejarah dan fungsi HTML, sekarang Anda perlu tahu komponen yang terdapat pada bahasa markup ini.
Secara umum komponen HTML terdiri dari Tag, Elemen, dan Atribut.
Lebih detailnya, simak penjelasannya berikut ini:
1. Tag
Tag adalah tanda awalan dan akhiran dalam perintah HTML yang akan dibaca oleh web browser. Tag dibuat dengan menggunakan kurung siku <…>, di mana di dalamnya berisi nama tag.
Setiap tag memiliki fungsi perintah yang berbeda-beda. Mulai dari membuat judul, paragraf, heading, cetak tebal, miring, italic, dan lainnya.
Misalnya: <bold>. Tag tersebut akan meminta browser untuk menampilkan teks dengan format tebal.
Selain itu, tag ditulis secara berpasangan, yaitu tag pembuka dan tag penutup. Pada tag penutup ditambahkan garis miring (/) di depan nama tag.
Tag HTML sendiri awalnya hanya berjumlah 18. Hingga saat ini sudah ada lebih dari 250 tag. Banyak juga, ya. Namun, Anda tak perlu menghafal semua tag yang ada.
Anda hanya perlu mengingat beberapa contoh HTML untuk pemula berikut ini:
a.) <html>, untuk memulai membuat halaman HTML yang mencakup semua konten dan elemen.
b.) <head>, untuk membuat halaman HTML yang mencakup tampilan deskripsi di hasil pencarian Google, style konten (CSS), dan lainnya.
c.) <title>, untuk membuat judul website
d.) <body>, untuk membuat isi website
e.) <h1> <h2> sampai <h6> , untuk mengatur heading konten
f.) <p> , untuk membuat paragraf.
2. Elemen
Elemen merupakan komponen HTML yang berupa keseluruhan kode dari tag pembuka hingga tag penutup. Elemen terdiri dari teks dan simbol yang berupa tag pembuka, isi tag atau konten, dan tag penutup.
Contohnya: <bold>Belajar HTML</bold>
Pada sebuah elemen juga bisa berisi elemen lainnya. Jadi elemen tersebut tak hanya berisi satu tag saja, tetapi banyak tag. Elemen itu disebut nested elements. Sebagai contoh, simak kode berikut:
<html>
<body>
<h2>OFFICIAL NEWBIE CYBER SECURITY</h2>
<p>Hanya Pecinta Dunia Teknologi</p>
</body>
</html>
Jika diperhatikan elemen HTML tersebut, dari tag pembuka <html> lalu tag <body> yang berisi elemen tag heading dan elemen tag paragraf.
3. Atribut
Atribut adalah informasi atau perintah tambahan yang berada dalam elemen. Atribut ini berfungsi sebagai penjelas perintah tag pada elemen.
Misalnya, "<img src=”https://i.ibb.co/hWbKPvK/452f7227-4757-4a4e-8ff2-6371f99d8610.jpg” alt “LOGO MATERI HTML”>".
Tag <img> memiliki atribut khusus yaitu (scr) dan (alt) yang artinya browser harus menampilkan (https://i.ibb.co/hWbKPvK/452f7227-4757-4a4e-8ff2-6371f99d8610.jpg) dengan alt text “LOGO MATERI HTML”.
Dari contoh di atas, dapat diketahui juga kalau jumlah atribut dalam sebuah tag bisa lebih dari satu. Meski demikian, tidak semua atribut bisa digunakan dalam sebuah tag. Berikut ini jenis atribut khusus beberapa tag:
Selain atribut khusus, ada beberapa atribut yang digunakan untuk menentukan aksi pada dilakukan jika terjadi sesuatu pada elemen.
Misalnya , (onload) saat loading selesai, (onoffline) saat tiba-tiba offline, (onresize) ukuran jendela. Atribut tersebut disebut dengan atribut event.
Atribut tersebut nantinya akan diimplementasikan dengan JavaScript. Sehingga halaman website dapat melakukan aksi tertentu.
#Bagaimana Cara kerja HTML ?
Sederhananya, cara kerja HTML yaitu bahasa markup ini menyusun halaman website dengan tag-tag tertentu. Setiap tag punya fungsinya sendiri, sehingga Anda bisa membuat struktur dan tampilan konten yang dibutuhkan. Nantinya, browser akan menerjemahkan tag ini untuk ditampilkan pada website.
Lebih teknisnya, seperti ini. Pertama, Anda membuat file HTML dengan aplikasi editor HTML. Lalu, Anda menyimpannya dengan format .html atau .htm.
Dokumen HTML yang dibuat bisa saja lebih dari satu. Sebab dalam sebuah website, biasanya terdiri dari banyak halaman. Misalnya aja, halaman utama, kontak, blog, dan lainnya.
Nah, masing-masing dokumen, berisi elemen HTML yang akan menyusun bagian heading, paragraf, isi konten, dan lainnya.
Ekstensi file ini dapat dibuka dengan menggunakan web browser seperti Google Chrome, Safari, atau Mozilla Firefox.
Kemudian, agar file HTML dapat diakses oleh banyak orang lewat internet, Anda perlu mengonlinekannya. Untuk melakukan ini, Anda perlu menyewa layanan hosting dan mengupload file website Anda di sana.
Jika sudah upload file HTML, selanjutnya browser akan membaca dan me-render file HTML menjadi tampilan halaman website. Sehingga ketika orang mengakses website lewat internet, mereka dapat mudah membaca informasi yang ditampilkan.
#Jadi, Pengertian HTML adalah…
Pengertian HTML adalah bahasa markup yang berfungsi untuk membuat struktur website sehingga dapat diakses secara umum melalui browser.
Meski awalnya Tim Berners-Lee mengembangkan bahasa markup ini hanya untuk kalangan ilmuwan CERN, versi HTML sudah jauh berkembang. Berkat perkembangannya, HTML terus melahirkan berbagai fitur yang dibutuhkan website. Misalnya, versi terbarunya, HTML5.
Tidak sesulit bahasa pemrograman, siapapun bisa belajar HTML dengan mudah. Kuncinya adalah memahami komponen dasar HTML, cara kerjanya, dan lebih bagus lagi kalau praktik langsung meng-online’kan file HTML Anda ke website.
Tidak ada komentar:
Posting Komentar