HTML dan kerabatnya


Trend aplikasi masa depan adalah aplikasi yang bisa diakses oleh siapa saja, dimana saja, kapan saja dan teknologi web memang menjawab semua itu. Membuat  “hanya sekedar halaman web” zaman sekarang memang mudah. Betapa tidak 1 halaman web bisa anda hasilkan dalam hitungan menit, cukup gunakan fasilitas ekspor  dari program office yang sudah mumpuni seperti Ms Office atau sebangsanya, maka halaman web anda pun sudah siap.

Vendor software juga rajin memperbaiki software mereka agar lebih mudah digunakan. Sebut saja Dreaweaver atau Visual Studio Web Express. Dalam mode design view, anda tinggal melakukan “drag n drop” saja dalam membuat halaman web. Cara “instant” ini tentunya sangat membantu. Saya sendiri juga merasakan hal itu.

Belum lagi program web siap pakai yang berbasiskan script server side sudah bertebaran dimana-mana. sebut saja yang ngetrend seperti  joomla, drupal, phpbb, wordpress, quick cms dan cart, dll yang semakin bertambah jumlahnya. Rasanya menjadi programmer (“instant”) itu semakin mudah saja. Trus yang benar-benar instant coding seperti Phpmaker, AspMaker, CodeThat dsb. Tinggal bikin database dan klak-klik dikit jadi deh. He he programming gampang… pas error mati dah. Atau customize yang tidak didukung si software? Tamat dah riwayatnya nih…! Lho kok jadi bahas coding, bentar balik lagi….

OK…. Sip mulai lagi!

Nah persoalannya sekarang adalah ketika kita dihadapkan pada situasi dimana kita diminta membuat suatu halaman web dengan software yang hanya bisa menampilkan tag-tag html saja, misalnya EditPlus, Notepad++ atau yang paling hebat hanya pakai Notepad bawaan OS Windows atau kalau tidak salah Gedit punya Gnome(linux). Nah disinilah ilmu dasar pembuatan web berperan. Disinilah tempat dimana HTML dan kerabatnya wajib kita kenal.

Saya pernah punya pengalaman berkesan dalam hal ini. Waktu itu saya baru mulai bekerja di perusahaan swasta yang menjadi vendor software perusahaan negara. Sama seperti saat mulai bekerja di tempat saya yang sekarang,  saya juga mendapat mendapat 1 set komputer dengan memory “256” Mb tapi yang dulu tanpa CD ROM dan processornya “Celeron”. Kemudian saya diberi tugas memperbaiki coding web, software yang databasenya berbasis SQL Server yang didalamnya terdapat ratusan ribu data. Belum lagi servernya uji cobanya adalah komputer sendiri. Wah bisa anda bayangkan berapa memory yang dihabiskan komputer saya? Coba jika saat itu saya coding pakai Dreamweaver, he he bisa jadi lambatnya kayak keong deh akslerasi komputer saya waktu itu. “Terpaksa deh” saya pakai EditPlus yang kebetulan juga terinstal di komputer tersebut. Dan… desain web yang indah dan menawan tidak bisa saya temukan di EditPlus. Yang ada hanya tulisan tag HTML dan kerabatnya yang  berwarna-warni  dan belum tertata rapi (“waduh…ampun!!!”). Untungnya HTML dan kerabatnya sudah saya kenal (walaupun belum intim banget) dan EditPlus juga sudah saya kenal saat PKL pada masa kuliah dulu, jadi saya hanya perlu beradaptasi lagi. He he aman deh.

Kisah lainnya ketika saya kunjungan rutin ke klien yang memakai software perusahaan tempat saya bekerja dulu. Si klien ini menanyakan tentang perhitungan data sementara pada software tersebut. Untungnya software tersebut berbasis web dan kebetulan javascript jadi dasar perhitungan sementaranya. Langsung saja saya gunakan menu View Source pada browser si klien dan si Notepadnya OS Windows pun beraksi. Lagi-lagi saya disuguhkan tulisan-tulisan tag yang kali ini tampil monoton berwarna hitam. HTML dan kerabatnya menyapa lagi.

Harusnya sih nda boleh nunjukin source program, tapi apa mau dikata, tanpa diajarin pun mereka bisa klik menu View Source…. He he ok balik lagi!

Apa yang coba saya utarakan disini adalah perlunya kita akan pengetahuan dasar tentang sesuatu hal dalam konteks pembahasan ini adalah pengetahuan dasar tentang HTML sebelum kita melangkah ke hal yang lebih besar yang merupakan pengembangan atau pemanfaatan dari HTML dan kerabatnya. Sama seperti ketika bekerja di suatu perusahaan, tentunya kita akan dikenalkan terlebih dahulu dengan Business Process, Rule, Organization Structure dsb yang berlaku ataupun yang dimanfaatkan oleh perusahaan tersebut. Jika diibaratkan dengan Programming Under Windows, ini adalah MSDN-nya. Pengetahuan dasar inilah Base Knowledge kita (pengetahuan dasar= Base Knowledge beda bahasa aja kayaknya he he…).  Pengetahuan dasar inilah yang bisa dijadikan menu help kita. Tempat dimana kita mengetahui kearah mana langkah kita selanjutnya.

Coba kalo kita dihadapkan pada program baru. Misalnya saya pada ScreenFlash, dimana saya harus bertanya jika tidak tahu…. Gampang tanya teman atau cari di internet aja. Tepat…. Tapi jika internet nda lancar dan teman nda bisa membantu?????  Maka menu help akan sangat berguna.  Tapi sayangnya  ScreenFlash versi 1.7 memaksa kita untuk go Internet jika ingin melihat menu helpnya. Nah pas internet lancar, saya langsung download menu helpnya ScreenFlash. Hebat  ScreenFlash memakai video tutorial. Jadi saya tidak perlu berkhayal langkah demi langkah dalam mempelajari ScreenFlash. Tinggal tonton dan praktek atau play kemudian pause, praktekkan dan play lagi dst. Jadi ingat waktu saya belajar ASP.NET dengan framework AJAX-nya. Yang paling cepat membuat saya mengerti adalah video tutorial ASP.NET yang bisa didownload dari official website ASP.NET.  Kesimpulannya baik itu ScreenFlash ataupun ASP.NET sudah menyediakan video dasar penggunaan ataupun penerapannya jadi ketika kita menemukan suatu kasus, kita bisa mereview kembali video tersebut dalam membantu kita memecahkan kasus yang kita alami.

Simpulin dikit! Sama seperti tadi, pengetahuan dasar HTML dan kerabatnya tentunya akan membantu kita dalam memecahkan berbagai permasalahan yang kita hadapi dimana permasalahan tersebut merupakan permasalahan hasil pengembangan dari HTML dan kerabatnya. Susah juga ngungkapinnya… Hmm gini aja, jika kita sudah tahu dasar pembuatan table dalam HTML tentunya kita akan mudah menambahkan baris baru pada tabel ataupun melakukan merging suatu baris pada tabel. Walaupun kita hanya memanfaatkan program kecil seperti Notepad.

Pengetahuan dasar-dasar HTML dan kerabatnya, akan sangat bermanfaat. Karena pengetahuan ini tidak hanya bisa dipakai oleh pemula tapi juga oleh orang yang sudah mahir program web (sebagai referensi). Web designer apalagi,  bukan hanya perlu tapi wajib tahu HTML dan kerabatnya.  Dapat dipakai juga oleh mereka yang antusias dengan internet (Blogger, yang suka otak-atik situs social networking, dsb). Berguna juga dalam mempelajari SEO (tata cara penulisan tag, keyword dsb). Membantu pelajar juga yang biasanya mendapat pelajaran dasar HTML dan kerabatnya dulu sebelum melangkah ke programming ataupun desain web. Programmer desktop juga perlu misalnya menggunakan file .hta sebagai installer programnya.

Apalagi jika ada video tutorial pemanfaatan fungsi tag HTML dan kerabatnya… Tentunya akan memudahkan kita dalam belajar atau pun mereview kembali fungsi tag HTML dan kerabatnya.

Apa saja HTML dan kerabatnya itu???

HTML & XHTML

HTML merupakan dasar pembuatan halaman web karena program apapun yang kita pakai untuk membuat halaman web, output akhir yang dibaca oleh browser adalah HTML.

Sample tutorial HTML 4

Sample tutorial HTML 4

HTML  dikembangkan lagi jadi XHTML (kalo tidak salah, kalo salah maaf deh!!!). Pernah ada anak SMA yang nanya ke saya cara ngelink ke situs lain yang otomatis membuka tab atau window baru pada browser. Padahal anak ini tidak gaptek Internet. Friendster dia keren, blognya bagus tapi dasar pengetahuan HTML dia tidak punya.  Situs yang dia gunakan hanya menyediakan cara “instan”. Padahal bagi orang yang tahu cara buat hyperlink tentunya hal ini mudah. Tinggal tambah target=”_blank”. Tapi sebagian besar orang masih awam akan hal itu, termasuk anak ini. Ditambah lagi sekarang HTML sudah versi 4. (HTML 5 udah mulai diperkenalkan)

CSS

Nah ini dia sumber keindahan dan kemudahan dalam mendesain website. Sama seperti tadi yang punya situs “instan” yang bagus dan indah belum tentu tahu cara bikin CSS yang benar. Orang yang pintar bikin website pakai CMS belum tentu bisa membuat CMS miliknya punya tampilan yang benar-benar beda dengan website-website lainnya yang juga memakai CMS yang sama yang berarti memakai CSS yang sama pula. Tanpa tahu dasar CSS, mengedit CSS akan menyulitkan kita. Dan sekarang CSS 3.0 sudah didevelop.  Bagaimana, apakah anda sudah menguasai CSS 2.0???

Javascript

Ribuan kode javascript gratis bertebaran di Internet. Ada yang gratis, ada juga yang bayar. Ada juga framework javascript yang sudah siap pakai seperti YUI, Mootols, Dojo, JQuery, ExtJS dll. Sekali lagi tanpa tahu dasar (javascript), kita tidak akan pernah mampu memanfaatkan Script javascript tadi dengan optimal.

Javascript

Teman saya ada yang bilang kalo mengenai javascript itu gampang, tinggal cari di Internet lalu “copy-paste”. Kalo script lancar sih sah-sah aja anggapan tersebut. Sebaliknya kalo scriptnya nda mau jalan alias error? Kalau kita tidak tahu dasarnya gimana mau memperbaikinya? Apalagi trend web 2.0 yang memakai AJAX. Bahkan XML pada AJAX mulai digantikan dengan JSON ataupun YML …. (pusing deh makin banyak istilah aja ni…). Oya javascript menjadi salah satu alternative programming language pada framework Adobe Air.

Kemudian ada lagi XML, VBScript, Jscript, WML, YML dan mungkin masih banyak lagi lainnya yang belum saya ketahui. Namanya juga manusia perlu belajar dan belajar lagi…….

Buat yang baca makasi dah baca!!! Mudah-mudahan tulisan ini bisa memicu anda untuk mengenal HTML dan kerabatnya lebih intim. Happy Learning deh…. Buat yang tidak tahu istilah-istilah dalam tulisan ini silahkan minta bantuan pada paman saya yang baik hati, saya sering memanggilnya dengan sebutan Paman Google….

Peace!!!

OD mlajahdotnulis

One thought on “HTML dan kerabatnya

  1. mantap bro….
    pengalaman saya juga mirip gitu
    tapi akhirnya saya belajar dari teman sehingga bisa dikit (ala kadarnya/kayak makanan aja…) tentang kode html dari sebelumnya tidak tahu sama sekali, beruntung punya 2 teman di sebelah kiri yang banyak membantu, akhirnya VMANCER BLOG SITE bisa seperti sekarang…

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s