Perkembangan dan teknologi HTML5

Sejarah HTML diciptakan oleh Timothy John Barners Lee pada tahun 1980 pada saat dia bekerja di lembaga CERN (Organisation Européene pour la Recherche Nucléaire), CERN adalah sebuah organisasi riset fisika yang terbesar di dunia. Pada saat itu Tim Barners Lee sedang menjalankan sebuah proyek yang berbasiskan konsep hypertext untuk memfasilitasi pembagian dan pembaharuan informasi diantara para peneliti, tujuan awalnya adalah agar setiap peneliti dapat melakukan share atau membagikan ilmu terhadap apa yang telah ditemukan selama proses penelitian, berkat bantuan dari Robert Cailliau akhirnya prototipe bernama Enquire tercipta dari sinilah Sejarah HTML dan Perkembangan HTML5 dimulai.Setelah Lee tidak bekerja lagi di CERN, Lee memiliki pemikiran bagaimana jika proses share yang dia lakukan di CERN dapat dirasakan peneliti ditempat atau belahan lain, lalu dia bekerja dengan John Poole's Image Computer Systems Ltd pada tahun 1984 sebagai seorang rekan peneliti. Tujuannya bergabung dengan John adalah Untuk Mengembangkan ide yang dia gunakan pada Enquire untuk menciptakan World Wide Web, di mana dia mendesain dan membangun browser yang pertama (bernama World Wide Web dan dikembangkan dalam NEXTSTEP) dan server web pertama yang bernama httpd. Setelah sukses dengan penelitiannya pada tahun 1989, Lee mendirikan sebuah lembaga yang bernama World Wide Consortium (W3C) forum untuk terus mengembangkan Web, dari sinilah sejarah HTML dan perkembangan HTML5 terlahir dan Generasi HTML dimulai.

(sumber: https://www.codepolitan.com/sejarah-dan-perkembangan-html5-belajar-html)

Hypertext Mark up Language atau biasa dikenal dengan HTML merupakan suatu metode 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. HTML merupakan protokol yang digunakan untuk mentransfer data atau dokumen dari web server ke dalam browser (Internet Explorer atau Netscape Navigator). Pengertian HTML sendiri bila dijabarkan berdasarkan kata-kata penyusunannya 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 disini markup menunjukan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada WWW.

Language Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa intruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen. Pada awalnya HTML dikembangkan sebagi subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana dari pada SGML yang lebih di tekankan pada format dokumen yang berorientasi pada aplikasi. HTML sendiri memiliki banyak versi dan versi terbaru saat ini yaitu HTML5. HTML5 adalah versi terbaru teknologi hypertext/web yang sekarang ini masih dalam tahap  pengembangan. HTML5 ini akan menjadi trend teknologi internet masa depan karena sudah diperkaya dengan fitur-fitur ungulan yang tentunya akan menjadi standard pengembangan media informasi berbasis web. Tujuan dibuatnya HTML5 antara lain:

a) Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript.  

b) Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).

c) Penanganan kesalahan yang lebih baik.
d) Lebih banyak markup untuk menggantikan scripting.

e) HTML5 merupakan perangkat mandiri. Sekarang HTML5 sudah mulai digunakan pada beberapa situs-situs besar sebagai uji coba kelayakan fitur serta teknologi baru yang masih terus dikembangkan dari versi sebelumnya yaitu HTML 4.01. Fitur serta perbaikan yang ditanamkan dalam teknologi ini dintaranya adalah video dan audio, database lokal dan css3. Ada beberapa tambahan elemen serta atribut yang memungkinkan HTML5 ini lebih baik dari sebelumnya, walaupun secara mendasar perintah-perintah yang digunakan sangat mirip dengan HTML versi 4.01.

 Namun sebelum mengenal lebih jauh mengenai HTML5 alangkah baiknya perlu diketahui beberapa hal tentang HTML5, diantaranya :

• HTML5

menawarkan elemen-elemen yang umum digunakan dalam sebuah struktur halaman website. Sehingga, penulisan tag setiap elemen dapat terlihat lebih semantic dan mudah dibaca, seperti pada gambar. Terdapat banyak manfaat jika menggunakan struktur seperti ini. Elemen “header” merepresentasikan header dari suatu section. Elemen “footer” juga merepresentasikan footer dari suatu section. Elemen “nav” cocok digunakan untuk merepresentasikan link navigasi. Sedangkan elemen “section” merepresentasikan suatu bagian generic dari dokumen.

• Struktur semantic.

Pada XHTML, programmer HTML bisa saja menjadi pembuat stress programmer CSS karena struktur halaman yang dibuatnya. Harus ada kesepakatan penamaan yang solid antara kedua pihak agar tidak ada masalah  pembacaan struktur halaman. Biasanya, dalam XHTML akan dibuat sebuah “div” dengan id-nya masing-masing.

• Deklarasi doctype baru.

Dalam membuat sebuah halaman dengan HTML5, tentu saja doctype yang digunakan juga harus benar. Doctype pada HTML5 jauh lebih sederhana daripada XHTML, sehingga Anda tidak perlu menghafalnya. Pada doctype untuk XHTML 1.0, Anda harus menuliskannya dengan panjang.

• Validasi email.

Dengan validasi langsung di tampilan, maka dapat mencegah seseorang user untuk memanggil script website dengan input yang salah. Ini dapat mengurangi jumlah request yang tidak valid terhadap script program Anda. HTML5 menawarkan fitur validasi email secara langsung dengan mengubah type dari elemen input menjadi “email”. Namun hal ini sangat disanyangkan karena masih belum

semua browser memberikan support untuk fitur ini.

1. Contenteditable.

Yaitu atribut baru dari HTML5 yang memungkinkan sebuah elemen untuk dimodifikasi langsung pada tampilan. Jika dikombinasikan dengan sedikit Javascript, fitur ini bisa menghasilkan sebuah mekanisme input yang cukup powerful namun mudah untuk dibuat.

2. Internet Explorer Hack.
Seperti biasanya, Internet Explorer selalu terlambat dalam mengimplementasikan teknologi website terbaru, meski Microsoft selalu memiliki teknologi sendiri seperti silverlight untuk browsernya tersebut. Pada IE, secara default semua elemen akan ditampilkan secara “inline”. Untuk itu, Anda harus mendeklarasikan style tersendiri agar tampilan dapat seperti seharusnya.

3. Atribut required.
Satu lagi untuk input pada HTML5, memungkinkan validasi pada sisi client terhadap input yang harus diisi. Dengan demikian, tidak diperlukannya lagi membuat fungsi javascript untuk melakukannya. Cukup menambahkan atribut

“required” pada elemen “input”. Jika tombol submit ditekan, akan muncul pesan error.

 Masih banyak elemen html5 lainnya seperti canvas, video, audio, mark, dan sebagainya. Setiap elemen akan berperilaku berbeda di setiap browser, karena memang standart resminya  belum dikeluarkan oleh W3C.

Menentukan hubungan ke dokumen lain, HTML merupakan suatu bahasa komputer yang termasuk dalam katagori SGML (Standard Generalized Markup Language) dimana bentuknya merupakan file standar ASCII yang berisi kode-kode untuk mengatur dokumen.

• Menentukan ukuran dan alur tulisan.
• Mengintegerasikan gambar dengan tulisan.
• Membuat Pranala.
• Mengintegerasikan berkas suara dan rekaman gambar hidup.
• Membuat form interaktif.
• Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
• Menampilkan tulisan dalam bentuk cetakan tebal
• Menampilkan sekelompok kata dalam bentuk miring.
• Menampilkan naskah dalam bentuk huruf yang miring dengan hasil ketikan mesin ketik.
• Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

 

Selain memiliki fungsi-fungsi yang telah disebutkan diatas HTML juga memiliki  beberapa kegunaan, antara lain:

a.       Membuat link Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web. 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  

b.       Memodifikasi format teks Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini yaitu:

-          Dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

-          Dapat menampilkan teks dalam bentuk cetakan tebal

-          Dapat menampilkan sekelompok kata dalam bentuk miring

-          Dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik -Dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.

c. Menampilkan daftar sesuatu dalam bentuk point-point (item) Dengan HTML kita dapat
    menampilkan daftar atau deretan informasi dalam bentuk  point-point sehingga lebih mudah
    dibaca dan dipahami Membuat link. Konsep hypertext pada HTML memungkinkan kita untuk
    membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam
    World Wide Web. 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

d. Menyisipkan citra Dengan menyisipkan citra maka tampilan page kita akan lebih menarik,
          interaktif dan informatif untuk mendukung data-data lainnya dalam bentuk teks.

e. Menampilkan informasi dalam bentuk tabel Penampilan informasi dalam bentuk tabel ini akan
    mempermudah pembaca untuk memahami informasi yang kita tawarkan. Penggunaan tabel ini
    juga dapat dilakukan untuk menambah nilai estetika dari page yang akan kita rancang.