Pengertian HTML dan fungsinya

Pengertian HTML

HTML (HyperText Mark up Language) merupakan suatu metoda untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program.

Pengertian HTML bila di jabarkan berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :

Hypertext

Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

Markup

Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web.

Language

Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.

Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.

Perkembangan HTML

Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, ia harus disetujui dulu oleh W3C untuk dievaluasi secara ketat. Setiap terjadi perkembangan suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, browser tak akan bisa menampilkan HTML tersebut.

HTML versi 1.0
Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya (wrapping).

HTMl versi 2.0
Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage interaktif.

HTML versi 3.0
HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2

HTML versi 4.0
HTML versi 4 ini memuat banyak sekali perubahan dan revisi dari pendahulunya. Perubahan ini terjadi di hampir segala perintah-perintah HTML seperti table, image, link, text, meta, imagemaps, form, dan lain- lain.

HTML versi 5
HTML versi 5 ini merupakan HTML versi terakhir pada saat sumber ini diambil. Pada HTML ini memiliki fitur baru yaitu  : Unsur kanvas untuk menggambar, Video dan elemen audio untuk media pemutaran, Dukungan yang lebih baik untuk penyimpanan secara offline, Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section, Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Secara garis besar terdapat 4 jenis elemen dari HTML yaitu :

1. Structural.

Adalah suatu tanda atau kode program yang menentukan level atau tingkatan dari sebuah tulisan (contoh, <h1>Internet</h1> akan memerintahkan browser untuk menampilkan "Internet" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1

 2. Presentational.

Adalah suatu tanda atau kode yang menentukan tampilan dari sebuah tulisan, tidak peduli dengan level dari tulisan tersebut. (contoh : <b>Cetak Tebal</b> maka pada browser akan menampilkan "Cetak Tebal". Namun kode-kode presentational saat ini sudah mulai digantikan dengan penggunaan CSS (Cascading Style Sheets) dan tidak direkomendasikan lagi untuk mengatur tampilan tulisan.

  3. HyperText.

Suatu tanda atau kode program HTML yang menunjukkan hubungan (link) ke bagian lain dari dokumen tersebut atau link ke dokumen lain.

contoh : 

 <a href="http://dejavanta.blogspot.com/">Download software</a>

maka pada browser akan menampilkan "Download software" sebagai sebuah hyperlink yang menuju ke URL http://dejavanta.blogspot.com/

   4. Elemen

Widget yang membuat objek-objek lain seperti tombol <button>, list <li>, dan garis horizontal <hr>, Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web (WWW).

Ada tiga macam link yang dapat kita gunakan :

• Link menuju bagian lain dari page
• Link menuju page lain dalam satu web site
• Link menuju resource atau web site yang berbeda.

Selain markup presentational , markup yang lain tidak menentukan bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets atau biasa disingkat CSS.

Contoh dokumen HTML sederhana adalah seperti di bawah ini :

<!DOCTYPE html>

<html>

  <head>

    <title>'''Hello World''</title>

  </head>

  <body>

    <p>Welcome to my site!</p>

  </body>

</html>

Untuk mencobanya dengan media yang paling sederhana, anda bisa mengetikkannya pada media NOTE PAD yang ada di Windows, kemudian file anda simpan dengan format dokumen html. (contoh : test.html).
Maka ketika file test.html tersebut anda buka, maka file akan langsung mengarah pada web browser untuk membaca / menampilkan hasil dari perintah dokumen HTML tersebut. 

HEAD

Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai keyword. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainnya pada tag META.

Contoh :

<meta name="author" content="dejavanta">

Elemen Body

Bagian BODY, yang dinyatakan dengan tag <BODY>isi content</BODY>, merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.

Tag

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>). 

Tag biasanya merupakan suatu pasangan yang disebut dengan : 

1. Tag awal, yang dinyatakan dalam bentuk <nama tag> 

2. Tag akhir, yang dinyatakan dalam bentuk </nama tag>

Format : <nama tag> teks yang ditampilkan </nama tag> 

Contoh : Untuk menampilkan teks dalam format teks miring. misalnya untuk tampilan : Teks ini terlihat miring di browser anda. maka perintah HTML nya adalah :

<i>Teks ini terlihat miring di browser anda</i>

Atribute

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari suatu tag tersebut.

Misalnya digunakan untuk membuat teks dengan pengaturan rata kiri pada suatu paragraf. Maka tag yang digunakan adalah :

<div style="text-align: left">

dan atribut yang menyertainya adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya bisa berupa center, left, right atau justify.