Mengenal Apa Itu HTML dan Cara Kerjanya

Development & Security, Web & Development / 2 | | 1

Mengenal HTML ialah singkatan dari HyperText Markup Languange merupakan bahasa web atau markup internet yang berasal dari kombinasi antara text dan informasi berupa simbol atau kode yang akan dimasukan kedalam suatu file guna membuat suatu halaman situs. Secara singkat mengenal HTML adalah bahasa markup internet yang beguna untuk membuat suatu website.

Melalui aplikasi browser atau penjelajah internet seperti Google Chrome, Internet Explorer dan Mozilla Firefox, website yang sudah dibuat lewat HTML akan dapat dilihat oleh siapa saja yang terkoneksi dengan jaringan internet. Dalam mengenal HTML dapat menampilkan bermacam informasi pada software di website browser dan juga formating hypertext yang tertulis dalam ASCII atau American Standard Code for Information Interchange.

 

Mengenal Sejarah Perkembangan HTML

Pada awalnya mengenal HTML pertama kali diciptakan pada tahun 1989 oleh Tim Berners-Lee yaitu salah satu ahli fisika yang berada di lembaga penelitian CERN, Swiss. Saat itu HTML diciptakan untuk mengkodekan beberapa dokumen yang bersifat elektronik secara sederhana dan juga efektif.

Mengenal HTML pada awal perkembangannya telah mengalami bermacam perkembangan pada setiap versinya. Berikut beberapa versi perkembangan dari mengenal HTML, diantaranya:

 

  1. HTML versi 1.0

    Pada versi ini masih terdapat banyak kelemahan dan masih sangat wajar apabila tampilan dari versi ini sangat sederhana. HTML versi 1.0 ini memiliki kemampuan seperti paragraf, hypertext, heading, list dan juga cetak miring maupun tebal pada text. Namun demikian dalam versi ini mampu mendukung gambar pada dokumen tanpa wraping text.

  2. HTML versi 2.0

    Sudah ada penambahan pada kualiatasnya dalam menampilan form pada suatu dokumen. Melalui form ini dapat memasukkan alamat, nama, dan juga saran. Keunggulan versi ini adalah mendukung adanya web interaktif.

  3. HTML versi 3.0

    Pada versi ini sudah ada penambahan beberapa fasilitas seperti FIGURE yaitu sudah dapat meletakkan tabel dan gambar. Tak hanya itu juga telah tersedia rumus-rumus matematika pada dokumen tersebut. Namun tak lama waktu berselang versi ini tergantikan oleh HTML 3.2

  4. HTML versi 3.2

    Salah satu versi yang sering digunakan karena sudah terdapat teknologi yang mendukung dalam meletakkan teks pada sekitar gambar dan gambar sebagai latar belakang, frame, style sheet, tabel dan lainnya. Selain itu versi ini memudahkan Kita dalam menggunakan script yang ada diluar HTML seperti VBScript, dan Javascript sebagai pendukung kinerjanya.

  5. HTML versi 4

    Terdapat beberapa perubahan diantaranya seperti link, meta, image, tabel, form, imagemaps dan lainnya.  Selain itu juga peningkatan pada beberapa fungsi yang ada pada versi sebelumnya.

  6. HTML versi 4.01

    Munculnya versinya sebagai perbaikan dari versi sebelumnya yaitu versi 4, membuat standarisasi untuk atribut dan juga elemen pada script XHTML 1.0.

  7. HTML versi 5.0

    Versi terbaru yang sudah ada sejak tahun 2009 yang ditangani oleh organisasi IETF (Internet Engineering Task Force) dan W3C (World Wide Web Consortium) dengan adanya tambahan memiliki prosedur dalam pembuatan tampilan pada website baru melalui gabungan dari HTML dengan javascript, dan CSS.

Jika mengenal HTML lebih dalam, seperti yang sudah dijelaskan sebelumnya memiliki singkatan dari HypertText Markup Language, namun tahukah Anda apa saja arti dan juga penjelasan dari setiap kata tersebut?

Hypertext, merupakan metode yang berguna untuk berpindah satu halaman website ke halaman website lainnya dengan menggunakan text khusus pada internet yang disebut dengan hyperlink. Cara kerjanya text tersebut apabila Kita klik nantinya Kita akan diarahkan pada halaman website lainnya. Itulah mengapa disebut dengan hypertext.

Markup, cukup terdengar unfamiliar bagi yang belum mengenal tentang HTML, nah Makup ini merupakan hal yang biasa dilakukan dalam tag HTML pada teks yang tersedia guna menandai tipe teks tertentu. Seperti contohnya terdapat tag atau tanda html <i> maka berarti teks dengan tanda tersebut akan berubah jadi italic atau berupa huruf miring, begitu juga contohnya dengan tag <b> berarti bold maka teks akan berubah menjadi tebal.

HTML dibuka dengan tag khusus dengan nama Opening Tag dan ditutup dengan Closing Tag yang disisipi tag  penutup </b>. Namun terkadang juga ada kasus tag tidak mempunyai Opening tag dan Closing Tag sebagai Contoh tag  Gambar <img Src=”UTL GAMBAR” />.

 

Contoh menerapan Struktur dasar  dari HTML (Catatan Anda bisa memanfaatkan Tools dari https://www.w3schools.com/html/ untuk mengeksekusi dan melakukan prakter percobaan Kode HTML Anda) :

 

<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
</head>

<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>

</html>

 

Keterangan :

  • <!DOCTYPE html> – Merupakan deklarasi dari type dokumen dari HTML tersebut
  • <html></html> – Dikenal dengan element utamad dari HTML karena semua element berada di dalamnya.
  • <head></head> – Element ini berfungsi untuk memasukkan suatu konten yang tidak dimunculkan namun tetap diakses pertama kali. Sangat cocok untuk meletakkan beberapa kode pemanggil baik itu JS, CSS dan lainnya. Konten lainnya seperti keyword, deskripsi, CSS, dll.
  • <title></title> – Merupakan judul dari halaman website yang muncul pada bagian tab browser.
  • <body></body> – Berisi konten yang ditampilkan pada browser ketika pengunjung mengakes halaman tersebut.

 

Mengenal Cara kerja HTML

Untuk cara kerjanya sendiri, mengenal HTML bukanlah suatu hal yang sulit karena HTML merupakan dokumen yang juga mirip layaknya tulisan dokumen biasa. Hanya saja pada HTML terdapat kode-kode yang memiliki instruksi tertentu yang dikenal sebagai TAG seperti yang sudah dijelaskan pada keterangan diatas.

Dalam mengenal HTML, lebih fokus dalam penggambaran struktur komponen dan juga format pada suatu halaman situs. Disisi lain website browser berguna dalam hal menginterpretasikan susunan halaman menggunakan warna, dan jenis tulisan, garis, dan juga teks yang ingin ditampilan pada suatu halaman situs.

Dengan menggunakan HTML, sangat membantu para penggunanya dalam mengatur format atau tampilan pada berkas yang nantinya akan dikirimkan lewat media. Tak hanya itu, ketika menetukan format suatu berkas juga dapat menampilkan beberapa kelompok kata dengan beberapa ukuran yang kemudian nantinya digunakan sebagai judul atau heading.

Kemudian juga memungkinkan dalam menampilkan sekelompok kata dalam bentuk cetak tebal, miring, atau merubah ukuran tulisannya menjadi salah satu karakter tertentu yang diinginkan. Perlu diketahui bahwa apabila dalam file dokumen HTML yang memiliki ekstensi dengan akhiran .html atau .htm dapat dilihat menggunakan web browser apa saja contohnya melalui Mozila Firefox, Safari, dan Google Chrome. Umumnya setiap halaman HTML pada suatu website browser akan menyertakan halaman yang berbeda-beda.

Layanan Hosting Murah IDcloudhost

 

Kumpulan Tag-tag pada HTML

Berikut ini adalah daftar tag-tag yang sering digunakan pada saat kita ingin membuat file HTML :

 

Nama Tag Keterangan / Kegunaan
Basic
<!DOCTYPE> Tag untuk menentukan tipe dokumen
<html> Tag untuk membuat sebuah dokumen HTML
<title> Tag untuk membuat judul dari sebuah halaman
<body> Tag untuk membuat tubuh dari sebuah halaman
<h1> to <h6> Tag untuk membuat heading
<p> Tag untuk membuat paragraf
<br> Memasukan satu baris putus
<hr> Tag untuk membuat perubahan dasar kata didalam isi
<!–…–> Tag untuk membuat komentar
Formatting
<acronym> Tag untuk membuat sebuah akronim (tidak disupport lagi di HTML5)
<abbr> Tag untuk membuat sebuah singkatan
<address> Tag untuk membuat kontak alamat
<b> Tag untuk membuat huruf bercetak tebal
<bdi> Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya (tag baru HTML5)
<bdo> Mengganti arah teks
<big> Tag untuk membuat text berhuruf besar (tidak disupport lagi di HTML5)
<blockquote> Tag untuk membuat sebuah bagian text yang dikutip dari sumber lain
<center> Tag untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi di HTML5)
<cite> Tag untuk membuat judul karya
<code> Tag untuk membuat potongan kode komputer di antara text
<del> Tag untuk membuat teks yang telah dihapus dari dokumen
<dfn> Tag untuk membuat sebuah istilah definisi
<em> Tag untuk membuat penekanan teks (tidak disupport lagi di HTML5)
<font> Tag untuk membuat font, warna, dan ukuran untuk teks (tidak disupport lagi di HTML5)
<i> Tag untuk membuat sebuah bagian dari teks yang disesuaikan dengan mood
<ins> Tag untuk membuat teks yang telah dimasukkan ke dalam dokumen
<kbd> Tag untuk membuat input keyboard
<mark> Tag untuk membuat teks yang disorot / ditandai (tag baru HTML5)
<meter> Tag untuk membuat pengukuran skalar
<pre> Tag untuk membuat teks terformat
<progress> Memperlihatkan kemajuan tugas (tag baru HTML5)
<q> Tag untuk membuat kutipan pendek
<rp> Tag untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby (tag baru HTML5)
<rt> Tag untuk membuat sebuah anotasi / pengucapan karakter (untuk tipografi Asia Timur)
<ruby> Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag baru HTML5)
<s> Tag untuk membuat teks yang tidak lagi benar
<samp> Tag untuk membuat contoh keluaran dari program komputer
<small> Tag untuk membuat teks kecil
<strike> Tag untuk membuat teks yang di coret tengah (tidak disupport lagi di HTML5)
<strong> Tag untuk membuat teks penting
<sub> Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia)
<sup> Tag untuk membuat teks superscripted (seperti dalam penulisan akar kuadrat)
<time> Tag untuk membuat tanggal / waktu (tag baru HTML5)
<tt> Tag untuk membuat teks teletype (tidak disupport lagi di HTML5)
<u> Tag untuk membuat teks yang memiliki Gaya yang berbeda dari teks biasa lainnya
<var> Tag untuk membuat sebuah variabel
<wbr> Tag untuk membuat kemungkinan garis-putus
Forms
<form> Tag untuk membuat sebuah form HTML untuk input pengguna
<input> Tag untuk membuat sebuah kontrol input
<textarea> Tag untuk membuat sebuah kontrol input multibaris (text area)
<button> Tag untuk membuat sebuah tombol yang dapat diklik
<select> Tag untuk membuat sebuah daftar drop-down
<optgroup> Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down
<option> Tag untuk membuat pilihan dalam daftar drop-down
<label> Tag untuk membuat sebuah label untuk sebuah elemen <input>
<fieldset> Grup unsur terkait dalam bentuk
<legend> Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details>
<datalist> Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5)
<keygen> Tag untuk membuat key-pair generator kolom input (tag baru HTML5)
<output> Tag untuk membuat hasil penghitungan (tag baru HTML5)
Frames
<frame> Tag untuk membuat sebuah window (bingkai) dalam sebuah frameset (tidak disupport lagi di HTML5)
<frameset> Tag untuk membuat satu set bingkai (tidak disupport lagi di HTML5)
<noframes> Tag untuk membuat sebuah konten alternatif untuk pengguna yang tidak mendukung frame (tidak disupport lagi di HTML5)
<iframe> Tag untuk membuat sebuah bingkai
Images
<img> Tag untuk membuat gambar
<map> Tag untuk membuat gambar-peta
<area> Tag untuk membuat area dalam gambar-peta
<canvas> Digunakan untuk menggambar grafik, melalui scripting (JavaScript ) (tag baru HTML5)
<figcaption> Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5)
<figure> Menentukan konten mandiri (tag baru HTML5)
Audio/Video
<audio> Tag untuk membuat isi suara (tag baru HTML5)
<source> Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>) (tag baru HTML5)
<track> Tag untuk membuat trek teks untuk elemen media (<video> dan <audio>) (tag baru HTML5)
<video> Tag untuk membuat sebuah video atau film (tag baru HTML5)
Links
<a> Tag untuk membuat hyperlink
<link> Tag untuk membuat hubungan antara dokumen dan sumber daya eksternal (paling sering digunakan untuk link ke style sheet)
<nav> Tag untuk membuat navigasi link (tag baru HTML5)
Lists
<ul> Tag untuk membuat daftar dengan selain nomor
<ol> Tag untuk membuat daftar dengan nomor
<li> Tag untuk membuat sebuah item daftar
<dir> Tag untuk membuat sebuah daftar direktori (tidak disupport lagi di HTML5)
<dl> Tag untuk membuat sebuah daftar definisi
<dt> Tag untuk membuat istilah (item) dalam daftar definisi
<dd> Defines a description of an item in a definition list
<menu> Tag untuk membuat deskripsi dari item dalam daftar definisi
<command> Tag untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat meminta (tag baru HTML5)
Tables
<table> Tag untuk membuat tabel
<caption> Tag untuk membuat sebuah caption tabel
<th> Tag untuk membuat sebuah sel header tabel
<tr> Tag untuk membuat baris dalam sebuah tabel
<td> Tag untuk membuat sel dalam sebuah tabel
<thead> Mengelompokan isi header dalam sebuah tabel
<tbody> Mengelompokanisi tubuh dalam sebuah tabel
<tfoot> Mengelompokan isi footer dalam sebuah tabel
<col> Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>
<colgroup> Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat
Style/Sections
<style> Tag untuk membuat informasi style untuk dokumen
<div> Tag untuk membuat sebuah bagian dalam dokumen
<span> Tag untuk membuat sebuah bagian dalam dokumen
<header> Tag untuk membuat sebuah header untuk dokumen atau bagian (tag baru HTML5)
<footer> Tag untuk membuat footer untuk dokumen atau bagian (tag baru HTML5)
<hgroup> Pengelompokan elemen heading (<h1> sampai <h6>) (tag baru HTML5)
<section> Tag untuk membuat bagian dalam dokumen (tag baru HTML5)
<article> Tag untuk membuat sebuah artikel (tag baru HTML5)
<aside> Tag untuk membuat konten lain selain dari konten halaman (tag baru HTML5)
<details> Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan (tag baru HTML5)
<dialog> Tag untuk membuat sebuah kotak dialog atau jendela (tag baru HTML5)
<summary> Tag untuk membuat sebuah judul terlihat untuk elemen <detil> (tag baru HTML5)
Meta Info
<head> Tag untuk membuat informasi tentang dokumen
<meta> Tag untuk membuat metadata tentang dokumen HTML
<base> Menentukan URL dasar / target untuk semua URL relatif dalam dokumen
<basefont> Menentukan standar warna, ukuran, dan font untuk semua teks dalam dokumen (tidak disupport lagi di HTML5)
Programming
<script> Tag untuk membuat script di sisi klien
<noscript> Tag untuk membuat sebuah konten alternatif bagi pengguna yang tidak mendukung script di sisi klien
<applet> Tag untuk membuat sebuah java applet yang ditanam (tidak disupport lagi di HTML5)
<embed> Tag untuk membuat sebuah wadah untuk aplikasi eksternal (non-HTML) (tag baru HTML5)
<object> Tag untuk membuat sebuah objek yang ditanam
<param> Tag untuk membuat sebuah parameter untuk objek

 

Penutup dan Kesimpulan

HTML sendiri merupakan bahasa paling dasar dalam pemrograman pembuatan Website maupun Aplikasi. Saat ini sudah ada keluaran HTML5 dengan beberapa fungsi tag yang lebih mudah dan fleksibel untuk digunakan.

Pada dasarnya HTML  berfungsi sebagai kerangka dasar untuk membuat sebuah website dan pastinya digabungkan  dengan pemrograman lain seperti Javascript, CSS, Java, JS, dll.

Baca  Juga : Tag-Tag Dasar HTML untuk Pemula

Related Post :