Hypertext Markup Language atau yang biasa disingkat
HTML pertama kali diciptakan dan dikembangkan oleh Tim Berners-Lee pada awal
tahun 1990-an yang pada saat itu masih bekerja di CERN. HTML diciptakan dengan tujuan sebagai cara
sederhana namun efektif untuk mengkodekan dokumen elektronik. HTML pertama kali
dipopulerkan dengan menggunakan browser Mosaic.
Perkembangan
HTML
· HTML
versi 1.0 adalah versi pertama sejak lahirnya nama html tersebut. Versi ini
memiliki kemampuan untuk heading, paragraph, hypertext, bold dan italic text,
wrapping serta memiliki dukungan dalam peletakkan sebuah gambar.
· HTML
versi 2.0 ( 14 Januari 1996 ). Pada versi ini ada beberapa tambahan kemampuan
diantaranya penambahan form comment, hal ini menyebabkan adanya sebuah
interaktif dan mulai dari versi ini yang menjadikan sebuah pionner dalam
perkembangan homepage interaktif.
· HTML
versi 3.0 ( 18 Desember 1997 ). HTML versi 3.0 juga disebut-sebut HTML+ yang mempunyai
kemampuan dalam beberapa fasilitas diantaranya adalah penambahan fitur table
dalam paragraph, akan tetapi versi ini tidaj bertahan lama.
· HTML
versi 3.2 ( 14 Januari 1997 ). HTML versi ini adalah penyempurnaan dari HTML
versi 3.0. keluarnya versi ini dikarenakan adanya beberapa kasus yang timbul
pada pengembang browser yang telah melakukan pendekatan dengan cara lain yang
justru hal tersebut menjadi popular. Maka dibakukan versi 3.2 untuk
mengakomodasi praktek yang banyak digunakan oleh pengembang browser dan
diterima secara umum. Dapat dikatakan versi 3.2 ini merupakan versi 3.2 yang
dikembangkan oleh beberapa pengembang browser seperti Netscape dan Microsoft.
· HTML
versi 4.0 ( 18 Desember 1997). Versi ini sudah terdapat penambahan pada link,
meta, image dan lain-lain sebagai penyempurnaan versi 3.2.
· HTML
versi 4.01 ( 24 Desember 1999 ). HTML versi 4.01 menjadi rekomendasi W3C. HTML
4.01 adalah minor update-koreksi dan perbaikan bug dari HTML 4.0.
· XHTML
versi 1.0 ( 20 Januari 2000 ). XHTML 1.0 merumuskan HTML 4.0 dalam XML.
· HTML
5 ( 22 Januari 2008 ). HTML 5 meningkatkan interoperabilitas dan mengurangi
biaya pengembangan dengan membuat aturan yang tepat tentang bagaiman untuk
menangani semua elemen HTML, dan bagaimana memulihakan dari kesalahan. Beberapa
fitur dalam HTML 5 adalah fungsi untuk audio embedding, video, grafik, sisi
penyimpanan data klien, dan dokumen interaktif. HTML 5 juga mengandung
unsur-unsur baru seperti <nav>, <header><footer>, dan
<figure>. Yang termasuk kelompok kerja diantaranya AOL, Apple, Google,
IBM, Microsoft, Mozilla, Nokia, Opera dan banyak lagi vendor lainnya.
Pengertian
HTML
, HTML ( Hyper Text Markup
Language ) didefiniskan sebagai sebuah bahasa markup yang digunakan untuk
membuat sebuah halaman web dan menampilkan berbagai informasi dalam sebuah
browser internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan
didunia penerbitan dan percetakan yang disebut dengan SGML ( Standard
generalized Markup Language ), HTML adalah sebuah standard yang digunakan
secara luas untuk menampilkan halaman web. HTML saat ini merupakan standard
internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web
Consortium (W3C).
HTML berupa kode-kode tag yang menginstrusikan browser
untuk menghasilkan tampilan sesuai yang diinginkan. Sebuah file yang merupakan
file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla firefox
atau aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki
kemampuan browser.
HTML dokumen tersebut mirip dengan dokumen teks
biasa, hanya dalam dokumen ini sebuah teks biasa memuat instruksi yang ditandai
dengan kode atau lebih dikenal dengan TAG tertentu.
HTML (HyperText Markup Language)adalah
bahasa dengan tanda-tanda khusus yang digunakan di awal era web untuk
menyajikan informasi. HTMLmerupakan script yang digunakan untuk
menyusun/membuat dokumen web yang apabila kita melakukan desain terhadap html
berarti kita telah melakukan tindakan pemograman. Namun HTML bukanlah sebuah
bahasa pemograman karena hanya berisikan perintah-perintah tertentu agar dapat
diakses atau diterjemahkan oleh browser. Jika kita ingin membuat suatu website
atau blog maka pengetahuan tentang html ini sangat penting sebagai dasar utama.
Secara mendasar, dokumen html mempunyai susunan sebagai berikut:
<html>
<head>
<title>Judul</title>
</head>
<body>
.
.
.
</body>
</html>
Kode HTML diawali dengan
<html> dan diakhiri dengan </html>. Beberapa hal penting dalam kode
html :
- Tanda <> menyatakan sebuah tag
- Pada umumnya tag berpasangan. Contohnya <html> dengan </html>,
<head> dengan </head> dan <body> dengan </body>.
- Tag yang tidak berpasangan antara lain adalah <br> dan <hr>.
- Pada tag yang berpasangan, tag yang berkedudukan sebagai tag penutup
mempunyai bentuk berupa </>.
Contoh: Ketiklah script di bawah ini kemudian simpan dengan nama lat1.html.
<head>
<title>Belajar HTML</title>
</head>
<body>
Ini adalah web pertama saya.
</body>
</html>
Untuk melihat hasilnya,
silakan jalankan browser favorit Anda, dengan cara membuka file lat1.html yang
sudah Anda buat tadi dengan menggunakan browser seperti contoh tampilan dibawah
ini saya menggunakan browser Mozila Firefox :
Keterangan:
Tag
<TITLE> digunakan
untuk memberi judul dokumen HTML. Judul ini dapat Anda lihat pada pojok kiri
atas (title bar) browser. Ketika orang akan mem-bookmark web Anda, maka judul
inilah yang akan disimpan. Pada contoh di atas judul dokument html yaitu
"Belajar HTML"
<BODY> adalah isi dokumen yang akan ditampilkan
dibrowser Anda. Isi dokumen pada contoh di atas adalah " Ini adalah web
pertama saya."
Terdapat dua pilihan dalam
mendesain html :
Menuliskan secara manual
tag-tag html ke dalam dokumen html. Bagi para pemula pilihan ini dirasa lebih
tepat karena dengan menuliskan tag-tag html satu persatu maka akan menambah
pemahaman mengenai cara kerja dan perintah-perintah dalam HTML,
meskipun cara ini akan menguras banyak waktu tetapi segala sesuatu tidak ada
yang instan oleh karenanya berusaha lebih keras akan lebih baik dan akan terasa
hasilnya ketika kita sudah mampu mengusai html. Cara manual ini dapat dilakukan
dengan menuliskan kode-kode html pada program editor seperti notepad.
Menggunakan editor praktis
yaitu sebuah program khusus yg didesain untuk membuat, melakukan editing bahkan
mempublishnya ke internet. Adobe dreamweaver merupakan salah
satu program yang banyak digunakan oleh para desainer web dalam mendesain html.
Para pemula yang malas untuk belajar kebanyakan memilih pilihan yang kedua ini
karena praktis dan tidak menguras waktu.
Struktur Dasar
HTML
Struktur dasar html secara
umum terbagi menjadi 2 bagian yaitu header dan body. Komponen penyusun dari
html meliputi tag, elemen, dan atribut.
Tag
Tag adalah suatu teks khusus (markup) yang terdiri
dari dua karakter yaitu < dan >. 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 biasanya merupakan
suatu pasangan yang disebut dengan : 1. Tag awal, dinyatakan dalam bentuk
<nama tag> 2. Tag akhir, dinyatakan dalam bentuk </nama tag>.
Format : <nama tag> teks yang ditampilkan </nama tag>. Contoh :
untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di
browser anda dengan perintah HTML <i>Teks ini terlihat miring di browser
Anda</i>
Contoh ketiklah kode berikut lalu simpan dengan nama tag.html
<<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
Ini adalah web pertama saya.
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<i>tulisan ini terlihat miring</i>
<b>tulisan ini terlihat tebal</b>
<u>tulisan ini bergaris bawah</u>
Maka setelah dokumen tag.html dibuka
dengan menggunakan mozilla firefox maka tampilannya akan seperti gambar di
bawah ini.
Element
Element terdiri atas tiga bagian, yaitu tag pembuka,
isi, dan tag penutup. Tag-tag yang ditulis secara berpasangan pada suatu
element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag
lainnya.Contoh untuk menampilkan judul dokumen pada browser digunakan element
title yaitu:
<title> merupakan tag pembuka,
Diisi dengan judul (isi)
</title> merupakan tag penutup
Berikut ini contoh beberapa macam element:
Element HTML
Merupakan kepala dari
dokumen HTML. Tag <head> dan tag </head> terletak di antara tag
<html> dan tag </html>.
Sintaks:
<html>
...........
</html>
Element title
Merupakan judul dari dokumen
HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag
</title> terletak di antara tag <head> dan tag </head>.
Sintaks:
<title>
.........
</title>
Element head
Elemen <head>
merupakan elemen yang berisikan informasi mengenai halaman web yang tengah
dibuka, yang tidak akan ditampilkan secara visual di halaman browser. Sintaks
<head>
.....
</head>
Pada halaman web modern,
umumnya elemen mengandung:
elemen title, yang
menunjukkan judul dari halaman yang tengah dibuka dan muncul pada toolbar
browser.
elemen meta, yang menunjukan
informasi meta data mengenai halaman web yang tengah diakses.
elemen link, yang menunjukan
hubungan antara halaman web yang dibuka dan file lain. Umumnya digunakan untuk
“memasukkan” file CSS ke halaman web yang bersangkutan.
elemen script, digunakan
untuk memasukkan script yang bekerja pada sisi klien seperti JavaScript.
Selain keempat elemen di
atas, terdapat juga elemen style yang digunakan untuk memasukkan perintah
stylesheet dan base untuk menetapkan alamat dan target dari semua link yang
berada di dalam halaman web. Bagaimanapun, elemen base jarang dijumpai
penggunaannya dan elemen style jarang digunakan karena paradigma saat ini untuk
memisahkan stylesheet dengan halaman web agar mudah dalam pengorganisasiannya.
Element body
Element ini untuk
menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak
di bawah tag <head> dan tag </head>.
Element BODY mempunyai atribut-atribut yang menspesifikasikan khususnya warna
dan latar belakang dokumen yang akan ditampilkan pada browser.
Sintaks:
<body text="v"
bgcolor="w" background="uri" link="x"
alink="y" vlink="z">
..............
</body>
Pada dasarnya, elemen yang
diletakkan diantara tag <body> terdiri dari tiga jenis:
Markup struktural:
menunjukan tujuan dari text. contoh, tag heading <h2></h2>
Markup presentasional:
menunjukan tampilan dari informasi, terlepas dari fungsinya. contoh:
<strong></strong>
Markup hypertext: markup
yang membuat bagian dari dokumen menghubungkan ke dokumen yang lain. contoh:
<a href=""></a>
Atribut
Atribut text memberikan
warna pada teks, bgcolor memberikan warna pada latar belakang dokumen HTML,
background memberikan latar belakang dokumen HTML dalam bentuk gambar, link
memberikan nilai warna untuk link, alink memberikan warna untuk link yang
sedang aktif, vlink memberikan warna untuk link yang telah dikunjungi. Jika
atribut bgcolor dan background keduanya dispesifikasikan maka atribut
background yang akan digunakan, akan tetapi jika nilai atribut background
(gambar) tidak ditemukan pada dokumen HTML maka atribut bgcolor yang akan
digunakan.
Atribut mendefinisikan
property dari suatu element HTML, yang terdiri atas nama dan nilai.
Penulisannya adalah sebagai berikut:
<TAG>
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
>
.................
</TAG>
Secara umum nilai atribut
harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat
warna teks menjadi kuning dan latar belakang halaman web menjadi hitam,
penulisannya adalah <body bgcolor="black"
text="yellow">
Mimpi terakhir yang kepikiran sih baru sampe ini. kalau buat jodoh sih cuma pengen yang bisa diajak usaha bareng,mapan bareng-bareng juga ngga apa-apa, akhlaknya oke, otaknya ga kalah oke, bisa membentuk keluarga yang samawa dan menuntun ke jalan yang benar.
