HTML: Pengertian, Sejarah, Fungsi, dan Cara Kerjanya

· 9 menit untuk membaca
HTML: Pengertian, Sejarah, Fungsi, dan Cara Kerjanya

Bagi kamu yang ingin menjadi seorang web developer, maka menguasai HTML menjadi hal penting yang perlu kamu pahami. HTML adalah salah satu bahasa markup paling basic dan berperan sebagai komponen penting dalam proses pembuatan dan pengembangan sebuah website.

Melalui artikel ini, kamu nantinya akan diperkenalkan tentang pengertian, fungsi, cara kerja, serta sejarah penggunaan HTML dalam sebagai bahasa markup. Agar kamu bisa lebih mengenal bahasa yang satu ini secara lebih mendalam yang akan mempermudah kamu nantinya dalam pengaplikasiannya.

Apa Itu HTML?

Mungkin masih banyak orang yang bertanya apa itu HTML? Secara singkatan, HTML adalah akronim dari Hypertext Markup Language. Secara arti, maka HTML adalah bahasa markup yang akan digunakan untuk membangun sebuah halaman website.

Dalam penggunaanya sendiri bahasa ini akan menggunakan berbagai kode yang terstruktur. Kode tersebut nantinya berupa teks dan juga simbol yang akan tersimpan dalam sebuah file berformat HTML.

Kumpulan kode itulah yang akan membuat heading, paragraf, gambar, link, dan komponen lainnya dalam sebuah halaman website. Hasil dari HTML itu sendiri nantinya bisa terlihat dengan menggunakan browser.

Sejarah HTML

Berbicara masalah sejarah HTML, maka bahasa ini sendiri diciptakan oleh Tim Berners-Lee pada tahun 1991. Penggunaan bahasa markup ini awalnya merupakan jawaban untuk memudahkan akses dokumen bagi para ilmuwan.

Pada perjalanannya, bahasa markup ini memang berkembang sangat pesat dan cepat. Dalam waktu yang singkat, bahasa ini sudah bisa digunakan untuk kebutuhan umum. Hal ini memang tidak lepas dari penggunaan World Wide Web atau WWW.

Dalam hal ini, keduanya bersinergi untuk membuat informasi lebih mudah disebarkan dan diakses oleh banyak orang.

Sekarang ini, penggunaan Hypertext Markup Language sudah digunakan oleh sebagian besar website yang ada di seluruh dunia. Tentunya, dalam perjalanannya bahasa markup ini juga mengalami berbagai upgrade versi. Pada saat ini, versi yang digunakan adalah HTML5.

Perkembangan Versi HTML

Berikut ini beberapa versi HTML yang perlu kamu ketahui sejak tahun 1995:

1. HTML 2.0

Publikasi Hypertext Markup Language versi ini pertama kali berperan sebagai IETF RFC 1866. Kemudian, terjadi penambahan RFC sejak tanggal 24 November 1995 yang menghasilkan beberapa kemampuan bahasa markup ini.

Mulai dari mampu mengunggah file menurut bentuknya, tabel, peta gambar dengan basis klien, serta internasionalisasi.

2. HTML 3.2

Publikasi pertama Hypertext Markup Language versi 3.2 sebagai Konsorsium World Wide Web pada tanggal 14 januari 1997. Karena IETF telah menutup kelompok kerja mereka sejak tanggal 12 September 1996.

Hypertext Markup Language versi 3.2 awalnya bernama Wilbur yang menghapus semua rumus matematika serta mengadopsi cukup banyak tanda markah visual yang berasal dari perusahaan teknologi Netscape.

3. HTML 4.0

Hypertext Markup Language versi 4.0, publikasi pertamanya menjadi rekomendasi W3C yang mempunyai 3 variasi berbeda. Pertama ketat, yakni segala bentuk elemen terdeprekasi dilarang untuk kamu gunakan.

Kedua transisional, penggunaan elemen terdeprekasi boleh kamu pakai. Ketiga adalah frameset, elemen yang boleh kamu gunakan harus yang ada hubungannya dengan frame.

Hypertext Markup Language versi 4.0 sebelumnya mempunyai kode nama Cougar dan mengadopsi sebagian besar tipe atribut serta elemen yang spesifik bagi peramban. Versi ini juga merupakan sebuah aplikasi SGML yang sesuai dengan IDO 8879.

Setelah versi ini, muncullah Hypertext Markup Language versi 4.01 pada tanggal 24 Desember 1999 dan HTML 5 di tanggal 28 Oktober 2014 yang saat ini kita gunakan untuk membuat website.

Cara Kerja HTML Seperti Apa?

Setelah memahami tentang bagaimana sejarah HTML, mungkin kamu juga bertanya tentang bagaimana cara kerja HTML itu sendiri? Jika HTML adalah bahasa yang bisa dibaca oleh browser, lalu bagaimana hal itu bisa terjadi? Mungkin hal tersebut juga perlu kamu pahami.

Secara sederhana, cara kerja HTML itu sendiri bisa diurai dengan penjelasan sebagai berikut:

  • Langkah awal dalam membuat dokumen dengan format HTML menggunakan aplikasi text editor. Lalu setelah itu, simpan dokumen tersebut dengan format .html atau .htm.
  • Pada proses pembuatannya, maka kamu juga bisa membuat lebih dari satu dokumen HTML. Karena biasanya dalam satu website tidak hanya berisi satu halaman saja. Umumnya terdapat halaman seperti main page, kontak, dan lainnya.
  • Pada setiap dokumen HTML nantinya akan berisi berbagai macam kode yang bisa membangun berbagai komponen dalam website menjadi sebuah struktur. Struktur HTML tersebut umumnya terdiri dari heading, paragraf, gambar, dan lainnya.
  • Untuk melihat hasil dari dokumen yang sudah kamu buat, maka kamu bisa mengaksesnya melalui browser.
  • Agar bisa diakses oleh banyak orang, maka dokumen tersebut perlu kamu online-kan terlebih dahulu. Caranya adalah kamu perlu menggunakan layanan hosting, lalu meng-upload file website yang sudah kamu buat ke laman hosting tersebut.
  • Nantinya, file yang sudah kamu upload akan memiliki nama domain. Orang yang ingin mengakses dokumen tersebut hanya perlu menggunakan nama domain tersebut pada browser.
  • Nantinya, server tempat kamu menyimpan file akan merender file HTML tersebut menjadi tampilan website yang mudah untuk dipahami. Tampilan website itulah yang akan dilihat oleh user pada browser mereka.

Fungsi HTML

Hal lain yang juga perlu kamu ketahui adalah tentang fungsi HTML. Salah satu alasan para programmer banyak yang memilih menggunakan bahasa markup ini adalah karena terdapat berbagai fungsi seperti berikut ini:

1. Membuat Halaman Website

Fungsi HTML yang paling utama adalah untuk membuat halaman website. Bahasa ini merupakan bahasa markup dasar yang akan kamu gunakan ketika akan berbagi informasi dengan menggunakan platform website.

Jika dilihat dari segi penggunaan, maka bahasa yang satu ini juga cukup mudah untuk pengaplikasiannya, bahkan untuk pemula sekalipun. Hal ini juga yang menjadi alasan mengapa bahasa ini banyak digunakan.

2. Pondasi Website

Fungsi berikutnya dari bahasa markup ini adalah sebagai pondasi dari sebuah website. Secara sederhana, penggunaan Hypertext Markup Language sudah cukup untuk membangun sebuah website.

Sementara itu, untuk tampilan yang lebih menarik maka biasanya bahasa ini akan digabungkan dengan bahasa lain, yaitu CSS. Maka dari itu, kamu juga perlu mengetahui cara membuat website dengan HTML dan CSS untuk memperkaya tampilan visual dari website itu sendiri.

Jika ingin website yang lebih memiliki banyak fitur, maka bahasa lainnya yang bisa kamu gunakan seperti Javascript, PHP, atau lainnya. Penggunaan kombinasi dari tiap bahasa inilah yang saat ini banyak programmer gunakan untuk membuat website yang lebih powerfull.

3. Sebagai Penanda pada Halaman Website

Fungsi lainnya dari bahasa HTML adalah sebagai penanda pada teks atau tiap bagian dari sebuah website. Contohnya, dalam setiap teks mungkin kamu akan melihat hal seperti teks yang miring, menggunakan huruf tebal, dan lainnya. Semua hal itu akan diatur dengan menggunakan Hypertext Markup Language.

Sementara pada bagian website, HTML berfungsi untuk menandakan mana bagian footer dan mana yang header. Dimana letak main page, seperti apa bentuk navigasi yang digunakan, apakah menggunakan sidebar atau tidak, dan lainnya.

4. Menampilkan Multimedia

Agar sebuah website terlihat lebih menarik dan tidak membosankan, maka biasanya tidak hanya berisi teks saja. Akan ada beberapa elemen lain, seperti gambar, video, audio, tabel, dan lainnya.

Penggunaan multimedia ini berguna juga sebagai elemen pendukung dari isi website tersebut. Pada penggunaannya, bahasa markup ini akan berguna untuk memastikan semua elemen multimedia tersebut bisa tampil dengan baik.

5. Membuat Direct Page

Ketika membuka sebuah website, mungkin kamu sering melihat tampilan seperti “More Articles”, “Read More”, atau yang lainnya. Tampilan tersebut merupakan hyperlink. Pada pengaplikasiannya, HTML adalah bahasa markup yang dapat kamu pakai untuk membuat hyperlink tersebut bisa aktif.

Fungsi dari hyperlink ini sendiri adalah mengarahkan pengunjung agar bisa mendapatkan informasi yang lebih lengkap. Dalam hal lain, hyperlink ini akan membuat keterkaitan antara satu halaman website dengan halaman yang lainnya.

Sehingga, pengunjung website kamu betah berlama-lama yang berujung pada meningkatnya jumlah trafik.

Pengenalan Tag, Elemen, dan Atribut HTML

Pada penggunaanya, HTML ini memiliki beberapa komponen yang ada di dalamnya. Komponen tersebut adalah tag, elemen, dan atribut. Berikut adalah ulasan singkat dari setiap komponen tersebut:

1. Tag

Komponen yang pertama adalah tag. Tag merupakan komponen yang berfungsi sebagai tanda dari sebuah awal atau akhir suatu perintah HTML. Tag sendiri bisa kamu buat dengan menggunakan tanda kurung sudut, seperti ini <...>, isi di dalam kurung sudut tersebut merupakan nama tag.

Pada setiap tag memiliki fungsi dan perintah yang berbeda. Misalny, untuk membuat judul, heading, paragraf, cetak miring, dan lainnya. Jumlah dari tag sendiri ada banyak, beberapa yang sering digunakan seperti:

  • <html> untuk tanda dari sebuah dokumen html
  • <title> sebagai tanda dari judul website
  • <body> untuk tanda bagian isi website
  • <p> sebagai tanda membuat paragraf

Pada penggunaanya juga tanda tag akan selalu ditulis berpasangan, yaitu sebagai tag pembuka dan juga tag penutup. Untuk tag penutup, maka penulisannya akan ditambahkan garis miring di depan nama tag seperti ini </…>.

2. Elemen

Jika tag adalah penanda, maka elemen adalah keseluruhan tag tersebut, termasuk tag pembuka, isi tag, dan juga tag penutup. Singkatnya, elemen merupakan keseluruhan dari tag yang ada, termasuk di dalamnya simbol dan teks

Contohnya: <p> paragraf pertama </p>

Pada penggunaanya, sebuah elemen memungkinkan untuk berisikan elemen lainnya. Nantinya di dalam elemen tersebut tidak akan hanya berisi satu tag. Contoh dari elemen yang seperti berikut ini:

<html>
<title> contoh elemen </title>
<body>
<h1> Judul </h1>
<p> contoh paragraf </p>
</body>
</html>

3. Atribut

Komponen lainnya dari HTML adalah atribut. Komponen ini akan berfungsi sebagai informasi ataupun perintah tambahan yang ada pada elemen. Dalam hal lain, maka atribut juga akan berfungsi untuk memberikan penjelasan tambahan dari perintah tag pada elemen.

Contoh atribut adalah sebagai berikut <img src=”gambar.jpg” alt “contoh gambar”>.

Arti dari kode di atas adalah tag <img> memiliki dua atribut khusus, yaitu src dan alt. Nantinya, browser akan menampilkan gambar berupa gambar.jpg dengan alt text contoh gambar.

Dari contoh di atas, maka akan terlihat jika dalam satu tag memungkinkan untuk terdapat lebih dari satu atribut. Namun, tidak semua atribut bisa kamu gunakan untuk semua tag. Contoh atribut khusus untuk tiap tag adalah sebagai berikut:

  • attribute src bisa untuk tag <img>, <embed>, <audio>, <iframe>.
  • href bisa untuk tag <a> dan <link>.
  • autoplay bisa untuk tag <audio> dan <video>.

Selain atribut khusus seperti di atas, ada juga yang dinamakan atribut event. Atribut ini akan menentukan aksi yang akan dilakukan pada sebuah elemen. Atribut ini biasanya digunakan pada Javascript, tujuannya adalah membuat halaman website bisa melakukan aksi tertentu.

Contoh atribut event adalah sebagai berikut:

  • onload saat loading selesai.
  • onoffline saat tiba-tiba offline.

Contoh Kode HTML

Setelah berbagai penjelasan tentang HTML, mungkin kamu juga penasaran seperti apa contoh dari kode HTML? Berikut adalah contoh dari kode HTML yang mungkin akan sering kamu gunakan nantinya:

1. HTML Basic

Ini merupakan template yang akan kamu gunakan ketika akan membuat dokumen HTML. Contoh dari kodenya adalah:

<!DOCTYPE html>

<html>

<head>

<title>html basic</html>

</head>

<body>

<h2> contoh heading 2 </h2>

<p> contoh paragraf </p>

</body>

</html>

2. Heading

Kode ini akan kamu gunakan ketika hendak membuat heading atau subjudul. Kamu bisa menggunakan heading 1 sampai 6, tergantung kebutuhan. Adapun contoh dari kodenya seperti berikut ini:

<h1> Contoh Heading 1 </h1>

<h2> Contoh Heading 2 </h2>

<h3> Contoh Heading 3 </h3>

3. Tabel

Dalam sebuah website, mungkin kamu akan melihat sebuah tabel. Biasanya, tabel ini akan kamu pakai untuk memberikan sebuah informasi tambahan ataupun penjelas. Secara sederhana, maka membuat tabel HTML bisa menggunakan kode seperti ini:

<table border="1">

<tr>

<td>Baris 1 Kolom 1</td>

<td>Baris 1 Kolom 2</td>

</tr>

<tr>

<td>Baris 2 Kolom 1</td>

<td>Baris 2 Kolom 2</td>

</tr>

</table>

Dengan kode tersebut, maka hasil yang bisa kamu dapatkan adalah sebagai berikut:

Sementara itu, untuk kebutuhan tabel yang lebih kompleks dan banyak data, maka akan membutuhkan kode HTML yang juga lebih banyak. Contohnya adalah seperti ini:

<table border="1" cellpadding="5">

<tr>

<th rowspan="2">Bulan</th>

<th colspan="2">Pendapatan</th>

</tr>

<tr>

<th>2021</th>

<th>2022</th>

</tr>

<tr>

<td>Januari</td>

<td>1000</td>

<td>2000</td>

</tr>

<tr>

<td>Februari</td>

<td>1500</td>

<td>2200</td>

</tr>

<tr>

<td>Maret</td>

<td>1800</td>

<td>2500</td>

</table>

Dengan kode tersebut maka hasil tabel yang akan kamu dapatkan adalah sebagai berikut:

3. Kode Warna HTML

Selain untuk membuat teks atau multimedia, HTML juga memungkinkan kamu untuk menambahkan warna. Pemakaian warna dengan menggunakan HTML sendiri ada 3 cara dalam sistem penulisannya.

Pertama menggunakan nama warnanya, yang kedua menggunakan kode hexa, dan yang ketiga menggunakan kode RGB. Contohnya adalah:

Kode Nama

Kode Hexa

Kode RGB

Blue

#0000FF

0,0,255

Black

#000000

0,0,0

Brown

#A52A2A

165,42,42

Gold

#FFD700

253,215,3

Green

#0080000

27,128,1

Red

#FF0000

255,0,0

Yellow

#FFFF00

255,255,0

Di atas adalah beberapa contoh kode warna HTML yang bisa kamu gunakan nantinya. Contoh penggunaanya jika kamu aplikasikan pada kode HTML adalah sebagai berikut:

<html>

<head>

<title>Contoh warna</title>

</head>

<body>

<h1 style="color:#7FFFD4">contoh warna</h1>

<h1 style="color:rgb(255, 255, 0)">contoh warna</h1>

<h1 style="color:red"> contoh warna</h1>

</body>

</html>

Dari kode di atas, maka terlihat jika line pertama menggunakan kode hexa, semenatara line kedua menggunakan kode RGB, dan yang ketiga menggunakan kode nama. Adapun hasil yang akan kamu dapatkan adalah sebagai berikut:

Sudah Lebih Mengerti Tentang HTML?

Dari semua penjelasan tentang HTML di atas, menunjukan jika penggunaan bahasa markup yang satu ini memang cukup penting dan mudah. Terutama untuk kamu yang ingin menjadi seorang web developer pemula.

HTML adalah bahasa markup yang akan sering kamu gunakan, ketika berkaitan dengan masalah web. Dari mulai awal pembuatan, struktur, sampai pengembangan maka penggunaan bahasa ini akan selalu kamu gunakan.