SEJARAH & PENGERTIAN HTML

1.        Sejarah HTML

HTML merupakan sebuah dasar ataupun pondasi bahasa pemograman sebuah web page, HTML muncul sebagai standar baru dari kemajuan dan berkembangnnya internet, pada pertama kali muncul internet masih dalam keadaan berbasis text dimana tampilan sebuah halaman web hanya berisikan sebuah text yang monotone tanpa sebuah format dokumen secara visual, bayangkan saja sebuah dokument text yang dikemas dalam bungkus format seperti tipe file .txt atau sering disebut notepad, tanpa paragraph, satu warna, satu ukuran huruf tanpa gambar serta tidak adanya visual format dokumen seperti halnya Ms. Word, hal ini akan sangat membosankan dalam membaca. dan selain itu pertamakali muncul internet user mengakses masih menggunakan sebuah terminal, hal itu jelas sangatlah tidak friendly. Pemograman HTML muncul seiring perkembangan teknologi dan informasi.

·           Pada tahun 1980 IBM mulai untuk mengembangkan sebuah bahasa pemograman dimana text dan format sebuah dokumen dijadikan satu dalam bahasa pemrograman yang sering kita sebut sebagai HTML (Hyper Text Markup Language) akan tetapi pada saat itu pihak IBM memberikan sebuah nama GML (Generalized Markup Language).

·           Pada tahun 1986 ISO mengeluarkan sebuah standarisasi tentang bahasa pemograman tersebut dan menyatakan sebuah nama baru dari GML tersebut dengan sebutan SGML (Standard Generalized Markup Language).

·           Nah mulai pada tahun kelahiran saya yaitu tahun 1989, Sebuah nama HTML muncul dari pemikiran Caillau Tim yang bekerja sama dengan Banners Lee Robert yang ketika itu masih bekerja di CERN memulai mengembangkan bahasa pemrograman ini, dan dipopulerkan pertama kali dengan browser Mosaic. Nah mulailah dari tahun 1990 HTML sangat berkembang dengan cepat hingga mencapai versi HTML versi 5.0 yang digarap pada 4 Maret 2010 kemarin oleh W3C.

·           HTML versi 1.0 ini adalah versi pertama sejak lahirnya nama html tersebut, memiliki sebuah kemampuan untuk heading, paragraph, hypertext, bold dan italic text, wrapping serta memiliki dukungan dalam peletakan sebuah gambar

·           HTML versi 2.0 pada 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 pioneer dalam perkembangan homepage interaktif.

·           Tak lama kemudian HTML versi 3.0 dirilis pada 18 Desember 1997 yang sering disebut sebut sebagai HTML+ yang mempunyai kemampuan dalam beberapa fasilitas diantaranya adalah penambahan fitur table dalam paragraph, akan tetapi versi ini tidak bertahan lama.

·           Dan pada bulan Mei 1996 dikeluarkan versi baru sebagai pengganti dan penyampurnaan versi 3.0 ini yaitu HTML versi 3.2, 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 di bakukan versi 3.2 untuk mengakomodasi praktek yang banyak digunakan oleh pengembang browser dan diterima secara umum, dapat dikatakan bahwa versi 3.2 ini merupakan versi 3.0 yang dikembangkan oleh beberapa pengembang browser seperti Netscape dan Microsoft.

·           Nah yang terakhir perombakan terjadi pada tahun 1999 tepatnya tanggal 24 Desember yaitu HTML versi 4.0, seperti yang kita kenal HTML pada saat ini penambahan link, meta, imagemaps , image dan lain lain sebagai penyempurnaan versi 3.2.

·           Pada tanggal 4 Maret 2010, terdapat sebuah informasi bahwasanya HTML versi 5.0 masih dikembangkan oleh W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0.

2.        Pengertian HTML

HTML merupakan sebuah bahasa pemrograman yang berisikan perintah kepada browser yang telah terinstal pada computer client, HTML adalah kependekan dari Hyper Text Markup Language, dokumen dalam HTML merupakan file text murni yang dibuat dengan sembarang, “sembarang” dalam hal ini pengerjaannya bisa menggunakan editor apa saja seperti notepad, editplus ataupun editor lainnya. File file HTML adalah berisikan beberapa instruksi atau perintah yang kemudian di terjemahkan oleh browser yang ada dikomputer client (user) sehingga isi informasinya dapat ditampilkan secara visual dikomputer pengguna. HTML dikenal sebagai standar bahasa yang digunakan untuk menampilkan dokumen web.

3.        Struktur dasar HTML

HTML merupakan sebuah bahasa pemrograman yang berisikan perintah kepada browser yang telah terinstal pada computer client, Untuk pemahaman dan sejarah HTML silahkan baca “Pengertian dan sejarah HTML”, Bahasa pemograman ini terdapat sebuah elemen, tag dan attribute didalam perintahnya.

Secara umum Web dokumen terdiri dari menjadi dua elemen ataupun section yaitu head dan body, kedua elemen tersebut dipisahkan oleh beberapa tag, untuk lebih jelasnya dapat anda lihat sebuah pola dasar HTML dibawah ini.

<html> <head> “Informasi Tentang Dokumen HTML” </head> <body> “Informasi yang akan ditampilkan dalam web Browser” </body> </html>

Dari pola diatas dapat digambarkan adanya sebuah dokumen HTML mulai dari tag pembuka <html> sampai tag penutup </html>, sedangkan isi dari dokumen html tersebut adalah dua buah elemen atau section yaitu

·           “HEAD” yang dimulai dari tag pembukanya <head> sampai tag penutup head </head>,

Pada elemen ini biasanya berisikan

ü  Title, merupakan judul dokumen

ü  Meta tag, informasi yang akan diberikan oleh pengunjung tentang isi halaman web

Dalam Meta Tag dapat kita isikan beberapa atribut penjelasan antara lain, Content, Name, URL. Sedangkan dalam atribut tersebut terdapat sebuah value, adapun beberapa value yang dapat kita isikan antara lain abstract, author, copyright, description, distribution, expires, keywords, revist, refresh maupun language

ü  Script java, CSS dan beberapa perintah lain yang nantinya akan diesekusi browser tanpa ditampilkan oleh browser untuk sebagian besar, dengan kata lain pada elemen ini kebanyakan hanya mengatur informasi dan visualisasi web tersebut,

Untuk elemen keduanya adalah

·           “BODY” mulai dari tag pembuka <body> sampai tag penutupnya </body> pada elemen ini berisikan informasi dan pengaturannya yang akan ditampilkan dalam browser.

Di dalam bahasa pemrograman HTML terdapat beberapa atributh yang perlu kita pelajari, adapun contoh atributh dan kegunaannya sebagai berikut,

·           <DFN>, untuk menandai sebuah subdefinisi dari daftar ataupun table definisi

·           <STRONG>, Untuk menandai bagian text ataupun kata dari penting dari sebuah kalimat, paragraph ataupun dokumen

·           <VAR>, untuk menampilkan nama variable

·           <CITE>, Menandai kutipan

·           <CODE>, Menampilakan sebuah kode pemrograman

·           <EM>, Penekanan sebuah kalimat

·           <SAMP>, untuk membuat contoh ataupun sample didalam sebuah dokumen

·           <KBD>, menandai suatu text dimana text tersebut harus dimasukan oleh user melalui keyboard

·           <B>, Bold membuat tampilan tebal huruf, kata ataupun kalimat

·           <I>, Italic membuat tampilan miring

·           <U>, Underline membuat tampilan garis bawah

·           <TT>, Membuat tampilan jenis huruf menyerupai huruf mesin ketik

·           <STRIKE>, membuat garis tengah pada sebuah kalimat

·           <BIG>, memperbesar ukuran huruf

·           <SMALL>, memperkecil ukuran huruf

·           <SUP>, menampilkan superscript

·           <SUB>, menampilkan subscript

·           <FONT>, merupakan sebuah pengaturan huruf, kata ataupun kalimat bahkan paragraph di mana dalam atribut ini terdapat value yang mengatur tampilan huruf tersebut seperti color. Size, style dan lainnya

·           <P>, Paragrah untuk membuat sebuah paragraph

·           <BR>, Line break berfungsi untuk mengganti baris

·           <H1>,<H2>,<H3>,<H4>,<H5>,<H6> merupakan sebuah header dimana dari keenam jenis tersebut mempunyai perbedaan ketebalan dan ukuran huruf

·           <PRE> Preformatted Text berfungsi menampilkan text apa adanya

·           <CENTER> membuat sebuah text berada di posisi tengah

·           <LEFT> membuat sebuah text berada di posisi kiri

·           <RIGHT> membuat sebuah text berada di posisi kanan

·           <Basefont size=”pixel”>mengubah ukuran sebuah huruf

·           <HR> Horizontal rule berfungsi untuk membuat garis bawah

·           <OL>, membuat penomoran pada daftar

·           <UL>, Membuat sebuah tanda pada daftar tanpa nomor (bullet)

·           <LI>, tag yang berada di dalam attribute UL ataupul OL digunakan untuk memisah baris daftar yang akan di beri penomoron ataupun tanda bullet

·           <TABLE>, membuat sebuah table

·           <TR>, Membuat row atau baris didalam table <TH>, membuat judul kolom di table <TD> membuat isi pada kolom table, ketiga tag ini diisikan pada atribut table

·           Rowspan, Colspan merupakan pengaturan merge cell pada atribut table

·           <FORM> untuk membuat form

·           <A HREF=”url link”>Hypertext</A> Hyper Link

·           <IMG SRC=”url img”> insert image

Inilah beberapa atributh dasar yang digunakan dalam pemrograman HTML, pada atribut diatas merupakan sebuah tag pembuka yang pada akhir atribut tersebut harus ditutup dengan tag penutup atributh tersebut </…..>, untuk lebih jelasnya dilain waktu saya akan mencoba bahas satu persatu atributh tersebut dan akan saya lengkapi dengan syntax dan contohnya kompleksnya.

4.        Perkembangan  HTML

Hingga kini HTML telah mencapai versi 3.02 yang telah kita pakai sekarang ini

I.              HTML VERSI 1.0

HTML Versi 1.0 merupakan HTML Pionir yang di dalamnya  masih terdapat banyak sekali kelemahan sehingga wajar jika tampilanyang di hasilkan sangat sederhana.Kemampuan yang dimiliki versi 1.0 ini antara lain heading,paragraf,hyper-

Text,list,serta cetak tebal dan miring pada teks.Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan text di sekelilingnya.

II.      HTML VERSI 2.0

Pada versi ini,penambahan kualitas HTML terletak pada kemampuan untuik menampilkan suatu form pada dokumen.Dengan adanya form ini ,maka kita dapat memasukkan nama,alamat,serta saran dan kritikan.HTML Versi 2.0 ini merupakan pionir dari adanya Homepage interaktif.

III.        HTML VERSI 3.0

Versi HTML 3.0 menambahkan beberapa fasilitas baru seperti  FIGURE yang merupakan perkembangan dari IMAGE untuk meletakkan gambar dan tabel.selain itu,HTML ini mendukung adanya rumus-rumus matematika dalam dokumennya.

IV.         HTML VERSI 3.2

HTML Versi 3.2 merupakan HTML yang sering kita gunakan saat ini.Di dalamnya terdapat suatu teknologi untuk meletakkan teks di sekeliling gambar,gambar sebagai latar belakang,tabel,frame stylesheet,dan lain-lain.Selain itu pada HTML Versi ini,kita bisa menggunakan script di luar HTML untuk mendukung kinerja HTML kita tersebut seperti JAVASCRIPT,VBSCRIPT,dan lain-lain

V.            HTML VERSI 4.0

HTML Versi 4.0 ini merupakan HTML Versi terakhir pada saat buku ini dibuat.HTML ini memuat banyak sekali perubahan dan revisi dari pendahulunya .Perubahan ini hampir terjadi di segala perintah-perintah HTML seperti table,image,link,text,meta,imagemaps,form,dan lain-lain.Selain Itu versi ini menambahkan beberapa perintah seperti ABBR,ACRONYM,BDO,BUTTON,FIELDSET,INS,LABEL,LEGEND,OBJECT,OPTGROUP,PARAM,TBODY,TFOOT,THEAD,dan Q.

5.        Mendesain HTML

Mendesain HTML berarti melakukan suatu tindakan pemrograman.itu berarti jika anda desainer Homepage,maka anda adalah seorang programmer.Mendesain Homepage tidaklah hanya sebatas menuliskan perintah-perintah tertentu agar HTML kita dapat di akses di Browser.Mendesain Homepage adalah suatu seni tersendiri.Homepage-yang merupakan implementasi dari HTML-merupakan refleksi dari orang yang membuatnya.Untuk itu kita perlu mendesainnya denagn baik agar para netter merasa tertarik dan betah untuk mengunjunginya(bahkan kalau bisa memboookmark-nya).Mendesain HTML dapat dilakukan dengan dua cara,yaitu dengan menggunakan HTML Editor,seperti Netcape Navigator Gold,microsoftword,dan lain-lain,atau menuliskan script sendiri.Ada kelebihan dan kekurangan dari dua caradiatas.Kelebihan cara pertama,proses desain homepage dapat langsung di lihat dan energi kita tidak banyak di keluarkan.Namun kelemahanny6a dengan HTML Editor ,kita tidak bisa mensisipi suatu perintah tertentu seperti frame,form,dan lain-lain.Sedangkan dengan perintah script sendiri,energikita cukup banyak terkuras,dan hasilnya tak langsung dapat di lihat.script tersebut harus di buka oleh web Browser.Namun kelebihannya kita bebas menyisipi suatu perintah-bahkan perintah yang bukan merupakan default HTML,seperti JAVASCRIPT.

Beberapa web Browser ,Seperti Netscape Navigator,memiliki suatu fasilitas untuk mendesain Homepage lewat HTML Editornya.Cara mendesain seperti ini akan terasa lebih menyenangkan di mana kita tidak perlu menghafal kode-kode perintah dan untuk HTML Editor yang mendukung kemampuan WYSIWYG.hasil desain homepagenya dapat langsung kita lihat.HTML Editor ini bisa dimanfaatkan bagi mereka yang masih awam terhadap bahasa pemrograman HTML ini.caranya,setelah mendesain suatu Homepage tertentu.htm tersebut kita buka lewat text-editor,seperti Notepad for windows.

6.        Bagian-Bagian pada HTML

HTML terdiri dari beberapa bagian fungsinya sebagai tanda suatu kelompk perintah tertentu,misalnya perintah form,frame.

1)        Elemen dan Tag

Elemen pada HTML dapat didefinisikan sebagai suatu kode tertentu yang akan menyediakan tempat untuk meletakkan beberapa kode di dalamnya.Berbeda dengan Tag yang menangani satu kode saja.Untuk lebih jelasnya perhatikan skema elemen di bawah ini.

<HTML>

.......elemen Pembuka..........

<HEAD>

.......di sini dapat anda masukkan kode-kode untuk untuk menuliskan keterangan tentang dokumen anda........

</HEAD>

<BODY>

.....DISINI DAPAT ANDA MASUKKAN KODE-KODE UNTUK ME-LAYOUT TAMPILAN Homepage anda..........

</BODY>

</HTML>

......ELEMEN PENUTUP.............

2)        Referensi Perintah –perintah HTML

Referensi Tag-tag HTML

Color Name    Color HEX      Color

AliceBlue

#F0F8FF

AntiqueWhite

#FAEBD7

Aqua

#00FFFF

Aquamarine

#7FFFD4

Azure

#F0FFFF

Beige

#F5F5DC

Bisque

#FFE4C4

Black

#000000

BlanchedAlmond

#FFEBCD

Blue

#0000FF

BlueViolet

#8A2BE2

Brown

#A52A2A

BurlyWood

#DEB887

CadetBlue

#5F9EA0

Chartreuse

#7FFF00

Chocolate

#D2691E

Coral

#FF7F50

CornflowerBlue

#6495ED

Cornsilk

#FFF8DC

Crimson

#DC143C

Cyan

#00FFFF

DarkBlue

#00008B

DarkCyan

#008B8B

DarkGoldenRod

#B8860B

DarkGray

#A9A9A9

DarkGrey

#A9A9A9

DarkGreen

#006400

DarkKhaki

#BDB76B

DarkMagenta

#8B008B

DarkOliveGreen

#556B2F

Darkorange

#FF8C00

DarkOrchid

#9932CC

DarkRed

#8B0000

DarkSalmon

#E9967A

DarkSeaGreen

#8FBC8F

DarkSlateBlue

#483D8B

DarkSlateGray

#2F4F4F

DarkSlateGrey

#2F4F4F

DarkTurquoise

#00CED1

DarkViolet

#9400D3

DeepPink

#FF1493

DeepSkyBlue

#00BFFF

DimGray

#696969

DimGrey

#696969

DodgerBlue

#1E90FF

FireBrick

#B22222

FloralWhite

#FFFAF0

ForestGreen

#228B22

Fuchsia

#FF00FF

Gainsboro

#DCDCDC

GhostWhite

#F8F8FF

Gold

#FFD700

GoldenRod

#DAA520

Gray

#808080

Grey

#808080

Green

#008000

GreenYellow

#ADFF2F

HoneyDew

#F0FFF0

HotPink

#FF69B4

IndianRed 

#CD5C5C

Indigo 

#4B0082

Ivory

#FFFFF0

Khaki

#F0E68C

Lavender

#E6E6FA

LavenderBlush

#FFF0F5

LawnGreen

#7CFC00

LemonChiffon

#FFFACD

LightBlue

#ADD8E6

LightCoral

#F08080

LightCyan

#E0FFFF

LightGoldenRodYellow

#FAFAD2

LightGray

#D3D3D3

LightGrey

#D3D3D3

LightGreen

#90EE90

LightPink

#FFB6C1

LightSalmon

#FFA07A

LightSeaGreen

#20B2AA

LightSkyBlue

#87CEFA

LightSlateGray

#778899

LightSlateGrey

#778899

LightSteelBlue

#B0C4DE

LightYellow

#FFFFE0

Lime

#00FF00

LimeGreen

#32CD32

Linen

#FAF0E6

Magenta

#FF00FF

Maroon

#800000

MediumAquaMarine

#66CDAA

MediumBlue

#0000CD

MediumOrchid

#BA55D3

MediumPurple

#9370D8

MediumSeaGreen

#3CB371

MediumSlateBlue

#7B68EE

MediumSpringGreen

#00FA9A

MediumTurquoise

#48D1CC

MediumVioletRed

#C71585

MidnightBlue

#191970

MintCream

#F5FFFA

MistyRose

#FFE4E1

Moccasin

#FFE4B5

NavajoWhite

#FFDEAD

Navy

#000080

OldLace

#FDF5E6

Olive

#808000

OliveDrab

#6B8E23

Orange

#FFA500

OrangeRed

#FF4500

Orchid

#DA70D6

PaleGoldenRod

#EEE8AA

PaleGreen

#98FB98

PaleTurquoise

#AFEEEE

PaleVioletRed

#D87093

PapayaWhip

#FFEFD5

PeachPuff

#FFDAB9

Peru

#CD853F

Pink

#FFC0CB

Plum

#DDA0DD

PowderBlue

#B0E0E6

Purple

#800080

Red

#FF0000

RosyBrown

#BC8F8F

RoyalBlue

#4169E1

SaddleBrown

#8B4513

Salmon

#FA8072

SandyBrown

#F4A460

SeaGreen

#2E8B57

SeaShell

#FFF5EE

Sienna

#A0522D

Silver

#C0C0C0

SkyBlue

#87CEEB

SlateBlue

#6A5ACD

SlateGray

#708090

SlateGrey

#708090

Snow

#FFFAFA

SpringGreen

#00FF7F

SteelBlue

#4682B4

Tan

#D2B48C

Teal

#008080

Thistle

#D8BFD8

Tomato

#FF6347

Turquoise

#40E0D0

Violet

#EE82EE

Wheat

#F5DEB3

White

#FFFFFF

WhiteSmoke

#F5F5F5

Yellow

#FFFF00

YellowGreen

#9ACD32