Cara Kerja dan Fungsi HTML

Apa Itu HTML?

HTML "Hypertext Markup Language" Merupakan bahasa standar yang digunakan untuk membuat dan menyusun halaman dan aplikasi web

HTML secara umum biasanya digunakan untuk menyusun bagian paragraf, heading, maupun link pada web, yang . Wlaupun susunannya seperti codingan, akan tetapi HTML bukanlah sebuah bahasa pemrograman.

Karena HTML tidak bisa memberikan fungsi yang dinamis oleh sebab itu HTML bukanlah bahasa pemrograman. HTML dianggap sebagai bahasa standar web resmi, yang dikelola oleh World Wide Web Consortium (W3C), yang bertugas merilis pembaruan rutin HTML.

pada artikel ini, akan membahas apa itu HTML, sejarah dan cara kerja HTML.

Sejarah dan Pengertian HTML 

Hypertext Markup Language atau yang sering disebut HTML merupakan bahasa standar yang sering digunakan untuk membuat halaman website dan aplikasi web. HTML generasi pertama dibuat di di Swiss oleh seorang ahli fisika pada lembaga penelitian CERN, yaitu Tim Berners-Lee. .

Versi pertama HTML dirilis pada tahun 1991 oleh Tim Berners Lee, Versi pertama memiliki 18 tag. Sejak saat itu, setiap kali ada versi terbaru, akan ada tag dan attribute (tag modifier) yang baru.

Ketika Anda menggunakan struktur kode sederhana (tag dan attribute) untuk mark up halaman website. Sebagai contoh Anda membuat sebuah paragraf dengan mengunakan enclosed text di antara tag pembuka <p> dan tag penutup </p>  .

<p>anda dapat memasukan beberapa kata benda mapun nama orang</p>

<p>Anda dapat membuat lebih dari satu</p>

Karena popularitasnya kian lama makin meningkat, HTML dianggap sebagai standar web resmi. HTML dikelola dan dikembangkan oleh W3C World Wide Web Consortium. Berdasarkan HTML Element Reference milik Mozilla Developer Network, saat ini ada 140 tag HTML, meskipun sebagian sudah tidak lagi didukung oleh beberapa versi terbaru browser. Pada tahun 2014, HTML5 mulai diperkenalkan. Yang terdapat semantic baru seperti <artcile>, <header>, dan <footer> yang memperjelas bagian-bagian dalam konten.

Bagaimana Cara Kerja HTML?

Ekstensi file HTML adalah .html atau .htm, yang bisa dilihat dengan mengunakan web browser apa pun (seperti Google Chrome, UC Browser, safari, atau Mozila Firefox). Browser tersebut membaca file HTML dan merender kontennya sehingga pengguna internet bisa melihat dan membaca konten yang kita miliki.

Biasanya, kebanyakan situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Contohnya, halaman beranda, ‘Tentang Kami’, halaman kontak memiliki halaman nya tersendiri.

Masing-masing halaman tersebut terdiri atas serangkaian tags (bisa disebut juga bagian), yang tersusun untuk membentuk sebuah halaman website. Tag tersebut membuat tingkatan urutan yang menyusun konten hingga menjadi bagian, paragraph, heading, dan block di dalam konten lainnya.

Sebagian besar bagian bahasa khusus yang di gunakan untuk web, bahasa ini memiliki tag pembuka dan penutup. <tag></tag>.

Berikut contoh codingan struktur HTML:

<div>

  <h1> Judul Utama konten </h1> 

  <h2> Judul Konten </h2>

  <p>Paragraph pertama</p> 

  <img src="/" alt="Image"> ( untuk menanbahkan gambar ke dalam konten kalian )

  <p> kata kata dalam konten kalian <a href="https://tempatnongkronggaul.blogspot.com/">Tempat Nongkrong </a></p> ( Untuk menambahkan backlink ke dalam konten kalian )

</div>

• Elemen teratas dan terbawah adalah division sederhana (<div></div>) yang bisa Anda gunakan untuk mark up bagian konten yang lebih besar.

• Susunan di atas terdiri atas Judul Utama(<h1></h1>), Sub juduk(<h2></h2), dua paragraf (<p></p>), dan satu gambar (<img>).

• Paragraf selanjutnya meliputi sebuah link (<a></a>) dengan mengisi href yang terdiri atas URL Website kalian.

• Tag gambar memiliki dua bagian, src untuk path gambar dan alt untuk deskripsi gambar.

Selain itu, beberapa contoh penggunaan umum HTML adalah:

• Pengembangan Website. Developer menggunakan kode HTML untuk mendesain tampilan bagian halaman web di browser, seperti teks, hyperlink, foto, dan juga video. 

• Navigasi internet. Pengguna bisa menelusuri dan menyisipkan link antara halaman dan website terkait karena HTML banyak digunakan untuk menyematkan hyperlink. 

• Dokumentasi web. HTML bisa digunakan untuk mengatur dan memformat dokumen, mirip dengan cara kerja Microsoft Word dan juga Excel.

Pengertian dari Tag HTML

Tag HTML mempunyai dua tipe yaitu: block-level dan inline tags.

1. Elemen block-level menggunakan semua ruang yang tersedia dan selalu membuat garis baru di dalam konten mapun artikel kalian. Contoh dari tag block adalah judul dan paragraf.

2. Elemen inline hanya memakai space sesuai dengan kebutuhannya dan tidak membuat garis baru di halaman. Biasanya elemen ini akan menyusun isi konten maupun artikel kalian dari elemen block-level. Contoh dari tag inline adalah link.

Tag Block-Level

Tiga tag block-level yang harus dibuat oleh setiap halaman HTML adalah <html>, <head>, dan <body>.

Tag <html></html> adalah bagian level paling atas yang menyertakan setiap halaman HTML. Tag <head></head> menyimpan informasi meta, seperti judul halaman Website kalian. Tag <body></body> menampilkan semua konten yang kalian buat sehingga muncul pada suatu halaman.

<html> <head> <!-- JUDUL HALAMAN--> </head> <body> <!-- HALAMAN KONTEN --> </body> </html>

Heading memiliki 6 tingkat. tingkat tersebut bervariasi, mulai dari <h1></h1> sampai <h6></h6>, di mana h1 merupakan tingkat judul tertinggi dan h6 adalah tingkat paling bawah. Awal dab juga akhir sebuah paragraph menggunakan tag <p></p>. Division merupakan bagian konten yang lebih besar dan biasanya terdiri atas beberapa bagian paragraf, gambar, video, dan banyak elemen lebih kecil lainnya. tag <div></div> biasanya di pergunakan untuk membuat suatu mark up Anda juga bisa menggunakan tag <ol></ol> untuk list ataupun kalimat yang berurutan dan <ul></ul> untuk list yang berurutan. Masing-masing list elemen harus dibuka dan ditutup dengan tag <li></li>. Sebagai contoh, di bawah ini adalah tampilan dasar berurutan dalam HTML:

<ul> <li>List dan kata item 1</li> <li>List dan kata item 2</li> <li>List dan kata item 3</li> </ul>/blockquote>

Tag Inline

Sebagian besar dari tag inline biasanya digunakan untuk memformat teks maupun elemen lainnya. Hyperlink adalah elemen inline yang mewajibkan adanya tag <a></a> dan kelengkapan href untuk mengindikasi tujuan link yang kalian tuju:

<a href="https://example.com/">Click me!</a>

Gambar (image) juga merupakan elemen inline. Anda dapat menambahkan satu gambar dengan menggunakan <img> tanpa harus menambahkan dengan tag penutup. Hanya saja, Anda disarankan menggunakan kelengkapan src untuk menentukan path gambar, misalnya:

<img src="/images/example.jpg" alt="Example image">

Kelebihan dan Kekurangan dari HTML

Sama seperti hal umum pada bidang lainnya dalam dunia web, bahasa markup ini juga punya kelebihan dan kekurangannya. Berikut kelebihan dari HTML:

• Digunakan secara luas dan memiliki banyak sumber serta komunitas yang sangat besar.
• Dijalankan secara alami di setiap web browser.
• Cukup mudah untuk dipelajari
• tidak memerlukan banyak biayaya untuk belajar hampir sepenuhnya gratis.
• Rapi dan konsisten.
• Menjadi standar resmi web.

Kemudian, kekurangan HTML adalah:

Umumnya digunakan untuk halaman web statis. Untuk halam fitur dinamis, Anda bisa menggunakan bahasa pemograman yang lain seperti JavaScript dan juga bahasa backend, seperti PHP.

Tidak bisa menjalankan logic. Alhasil, semua halaman web harus dibuat secara terpisah meskipun menggunakan beberapa elemen yang sama, seperti header dan footer.

Fitur baru tidak bisa digunakan dengan cepat di beberapa web browser.
Browser terkadang sulit diprediksi. Misalnya, browser versi lama tidak selalu bisa mengerti ataupun merender tag yang lebih baru.

Hubungan HTML, CSS, dan JavaScript

Meskipun dinyatakan sebagai bahasa markup ialah bahasa yang canggih, HTML tidak sepenuhnya bisa membuat website yang profesional dan responsif. Bahasa ini hanya bisa digunakan untuk menambahkan beberapa elemen dan membuat struktur untuk konten kalian. Namun di sisi lain, bahasa ini bisa bekerja secara maksimal dengan bantuan dua bahasa frontend: CSS (Cascading Style Sheets) dan JavaScript. Jika digabungkan, kedua bahasa frontend ini bisa meningkatkan pengalaman pengguna dan memberikan fungsi yang lebih canggih. CSS erat kaitannya dengan styling, seperti background, warna, layout, spacing, dan juga animiasi. JavaScript memungkinkan Anda menambahkan fungsi yang dinamis, seperti slider, pop-up, dan juga galeri foto. Jika digambarkan, berikut perbedaan HTML dan CSS dan juga JavaScript bisa di artikan seperti HTML adalah orang yang tidak mengunakan pakaian apa pun, kemudian CSS adalah bajunya dari orang tersebut, kemudian JavaScript adalah aktivitas dan sikap yang dimiliki orang tersebut.

HTML Adalah

setelah apa yang kalian sudah baca dan juga pelajari sejauh ini menganai pengertian dari HTML maupun juga cara kerja nya. Jadi HTML adalah bahasa markup, bukan bahasa pemrograman, dan tidak mempunyai kemampuan untuk membuat fungsi yang dinamis.

Dengan bahasa markup ini, penguna bisa mengatur dan memformat dokumen secara statis.

Berdasarkan dari cara kerja HTML, kalian bisa menggunakannya untuk membuat struktur konten pada website dan aplikasi web yang kalian miliki (menggunakan codingan yang cukup sederhana).

HTML merupakan level paling bawah dari teknologi frontend dan berfungsi sebagai dasar styling yang bisa kalian tambahkan maupun kalian gabungkan dengan CSS dan fungsi yang dapat dijalakan menggunakan JavaScript.