Tutorial Desain Web untuk Pemula

Kata-kata Web sebenarnya penyederhanaan dari sebuah istilah dalam dunia komputer yaitu WORLD WIDE WEB yang merupakan bagian dari tekhnologi Internet. World wide Web atau disingkat dengan nama www, merupakan sebuah sistem jaringan berbasis Client-Server yang mempergunakan protokol HTTP (Hyperteks Transfer Protocol) dan TCP/IP (Transmisson Control Protocol / Internet Protocol) sebagai medianya.  Karena kedua sistem ini sedemikian erat hubungan nya, maka untuk saat ini sulit untuk membedakan antara HTTP dengan WWW, mungkin Anda punya pengertian yang lebih spesifik mengenai kedua istilah tersebut..?, Bila demikian berbagilah dengan yang lain melalui SSC Forum. Pada awalnya Internet atau WEB hanya dipergunakan untuk kepentingan Militer yaitu suatu tekhnologi yang dipergunakan untuk mengirimkan pesan rahasia melalui satelit. Akan tetapi lama kelamaan tekhnologi tersebut akhirnya meluas, dan bahkan Internet pada saat ini sudah sama populernya dengan Telephone. Informasi yang dikirimkan lewat Internet dapat diakses keseluruh dunia hanya dalam hitungan menit bahkan detik. Sehingga tekhnologi ini menjadi sangat populer dan cepat sekali perkembangan nya. Boleh dikatakan saat ini Internet sudah tidak menjadi istilah yang asing lagi ditelinga. Suatu Informasi yang dikirimkan lewat Internet dapat berupa Teks, gambar maupun multimedia sehingga Internet juga dimanfaatkan oleh perusahaan-perusahaan untuk mempromosikan Produk-produknya dengan cepat dan mudah.

Informasi dari Internet dapat diakses Keseluruh dunia hanya dalam hitungan detik.

Bahasa dasar dari pemrograman web yaitu HTML (Hyperteks Markup Language). Jadi sebelum Anda mempelajari bahasa pemrograman Internet yang lain seperti, PEARL, PHP, JAVASCRIPT, ASP dan lain sebagainya. Anda diharuskan menguasai dahulu teknik-teknik dasar pemrograman web yaitu HTML. Untuk mempelajari HTML tidaklah begitu sulit, Karena HTML hanyalah sebuah bahasa yang berbasis teks dengan perintah-perintah yang mudah di ingat dan dimengerti oleh kita. Sehingga Anda tidak memerlukan sebuah Compiler (penerjemah bahasa pemrograman ke bahasa mesin) seperti bahasa-bahasa pemrogaman yang lain. Anda cukup menuliskan program-program HTML dengan teks editor apa saja seperti NOTEPAD atau yang sejenisnya, kemudian file itu Anda beri akhiran HTM atau HTML dan dijalankan atau dipanggil melalui sebuah program browser seperti, Internet Explorer, FireFox, Opera, Netscape dan sebagainya. File tersebut langsung diterjemahkan dan ditampilkan di monitor melalui program browser tersebut.

S E B U A H     P E R M U L A A N

Anda tentunya sudah tidak sabar lagi untuk segera mempelajari dasar-dasar design web, dan enggan untuk membaca pengantar-pengantar yang membosankan. Bila demikian OK kita langsung saja pada pokok bahasan kita yaitu mempelajari teknik dasar pemrograman web dengan HTML, yang tentunya bila dasar-dasar HTML ini sudah dikuasai akan mudah mempelajari Bahasa pemrogrman web yang lainnya yaitu JavaScript, PHP, Perl, ASP, Ruby dan sebagainya. Sekarang siapkan Program text editor Anda, bila Anda pengguna WINDOWS jalankan program Notepad atau klik kanan area kosong pada dekstop Komputer Anda pilih NEW -- TEXT DOCUMENT maka file newtext document.txt akan terbentuk dengan sendirinya. Klik dua kali file itu maka Anda akan masuk di text editor dari Notepad dan siap untuk mengetikan perintah-perintah dari program HTML. Bila Anda pengguna LINUX, OS2, MACHINTHOS dan lainnya, Anda dapat menjalankan program text editor yang ada pada Operating System tersebut. atau Anda Dapat mendownload program NOTEPAD++ dari http://www.sourceforge.net, Link untuk mendownload NOTEPAD PLUS ada di pilar kiri situs ini. NOTEPAD PLUS ini bisa juga berjalan di WINDOWS, dan sangat dianjurkan oleh saya untuk memakai NOTEPAD PLUS. sebab program ini selain FREEWARE juga mempunyai fasilitas dan perlengkapan yang lebih baik dari teks editor yang disediakan oleh Operating system. PROGRAM PERTAMA OK saya anggap anda sudah siap untuk mengetikan program-program HTML di text editor. Perintah HTML diawali dengan menuliskan tag/perintah <html> dan diakhiri oleh tag/perintah </html>. Penulisan perintah boleh memakai huruf kecil maupun huruf besar, tak akan ada pengaruhnya. Akan tetapi untuk memudahkan sebaiknya Anda gunakan huruf kecil saja.   Sekarang Anda ketik perintah dibawah ini di text editor Anda.

<html> <body> Ini adalah program HTML pertamaku. </body> </html>

Simpan file tersebut dan beri nama file tersebut dengan nama latihan1.html, lalu jalankan program tersebut dengan browser Anda, kemudian Anda lihat hasilnya, bila Anda menggunakan NOTEPAD++ Anda dapat memilih perintah RUN kemudian pilih Launch in IE bila Anda memakai Internet Explorer sebagai browser Anda, Pilih FireFox bila Anda menggunakan FireFox sebagai browser Anda, atau pilih browser yang Anda inginkan untuk menjalankan file tersebut. Mudah..., Hmm memang mudah. Anda dapat membuat teks diatas lebih panjang lagi kalau Anda mau. Pada Latihan diatas, terdapat perintah <body> dan </body>, peritah yang ada diantara tag itu adalah content atau isi yang ditampilkan di browser. sedangkan tag <html> dan </html> hanya sebagai penanda bahwa file tersebut adalah file HTML, bisakah tag <html> dan tag </html> dihilangkan..?. Hmm.. Bisa saja. bahkan tag <body> dan tag </body> juga bisa Anda hilangkan. Kalau tidak percaya coba hapus semua tag yang ada pada latihan1 diatas, kemudian Anda simpan file tersebut kembali setelah itu Anda jalankan di Browser. Wow.., ternyata bisa juga toh. Lalu untuk apa perintah tersebut dipasang kalau tanpa perintah itu juga hasilnya sama.? Dalam dunia internet terdapat kesimpang siuran dalam hal kompatibelitas antara operating system yang satu dengan yang lainnya, dan antara browser yang satu dengan yang lainnya. Nah karena masalah kampatiblitas inilah maka ada suatu badan atau biro yang memberikan aturan mengenai kompatibelitas dalam penulisan kode-kode HTML Biro tersebut di dibentuk dengan nama W3C. (World Wide Web Consortium), Biro ini yang menentukan apakah suatu document HTML itu valid atau tidak valid. Selain itu biro ini mempunyai hak untuk mengeluarkan aturan mengenai kode-kode HTML. Jadi Walaupun pada dasarnya program browser mengerti dan tetap menjalankan file HTML tanpa adanya tag / perintah <html>, </html>, <body> dan </body> , mengingat masalah kompatibelitas ini penting jadi yah tetap saja Anda harus memulai sebuah file HTML dengan tag <html>, kemudian mengakhiri file HTML dengan tag </html>. Mengenai W3C ini saya pribadi masih sedikit bingung dan sedikit agak ragu, masalah nya begini ;   Pada suatu waktu saya mencoba mengecek file HTML yang saya buat melalui W3C ini, dengan mengirimkan file saya ke http://www.w3c.org/. setelah saya kirimkan file saya ke situs nya W3C tersebut, kemudian didapatkan hasil dari validasi file yang saya kirimkan tersebut. pada hasil result tersebut, didapat bahwa file yang saya kirimkan ke W3C banyak terdapat error. Disana dituliskan baris-baris File HTML yang saya kirimkan tersebut beserta error result nya. Setelah mengetahui hal itu saya mencoba mengecek kembali file HTML saya dan saya perbaiki menurut ketentuan W3C tersebut kemudian saya kirimkan lagi. Setelah dikirimkan lagi untuk yang kedua kalinya, hasil result nya juga sama masih banyak yang error tetapi sedikit berkurang. Saya merasa bingung dan sekaigus heran. Padahal saya sudah mengecek semua tag-tag file HTML yang saya buat itu berdasarkan ketentuan yang diberlakukan oleh W3C tersebut, bahkan saya sempat menggunakan sebuah program utility untuk HTML yaitu HTML TIDY yang saya download dari gudang Open Source http://www.sourceforge.net, setelah di cek oleh program tersebut ternyata file yang saya buat valid dan memenuhi standar W3C, tetapi begitu saya kirimkan kembali file tersebut masih saja terdapat error. Karena penasaran kemudian saya mencari situs-situs yang memasang logo W3C pada situsnya. Konon bila sebuah situs memasang logo tersebut Halaman-Halaman Web nya telah mendapat pengakuan dari biro tersebut. Iseng-iseng saya lihat source file nya. Dimanakah gerangan kesalahan saya tersebut, dengan membandingkan dengan source file dari situs tersebut. Hmm..., setelah saya bandingkan secara teliti ternyata toh tak ada yang istimewa dari situs tersebut, perintah-perintah HTML nya sama saja dengan yang saya buat. Lebih iseng lagi saya mencoba mengirimkan source file yang saya download dari situs tersebut ke situsnya W3C untuk mengecek validasinya, dan Wooooow..!, suatu hal yang sudah saya duga sebelumnya, file HTML tersebut pun masih terdapat error result dari W3C, Nah Loh..!. Bagaimana mungkin situs tersebut berani memasang logo tervalidasi oleh W3C, bila file-file HTML nya pun masih terdapat error result dari W3C. Masih penasaran , Kemudian saya download source file dari situsnya W3C sendiri.., kemudian saya kirimkan kesitus nya sendiri untuk divalidasi. Dan.... Senjata makan Tuan..., file nya juga dilaporkan masih terdapat error result. Wew.. wong file dari situsnya sendiri saja masih ada error result, apalagi file orang lain, begitu pikir saya berprasangka buruk. Entahlah.. mengapa bisa demikian, ada yang tahu..?, tolonglah sekali lagi berbagi di SSC Forum Mengenai hal ini. Ok mari kita lanjutkan materi kita, untuk sementara lupakan saja cerita histeris ini, mungkin nanti Akan saya Lanjutkan lagi mengenai bug atau kesalahan apa dan bagaimana solusinya pada akhir cerita saya nanti. Sampai dimana yah tadi.., Oh iya mengenai tag <html> dan </html>, Jadi pada umumnya sebuah file HTML mempunyai urutan-uratan perintah sebagai berikut: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Perintah ini sebagai penanda bahwa dokumen yang kita buat berdasarkan aturan yang dikeluarkan oleh W3C dan sesuai dengan perintah HTML 4.0. Perintah ini wajib Anda tuliskan diatas file HTML bila Anda ingin mem validasi kan file Anda ke W3C. Tanpa adanya perintah ini file HTML Anda dijamin akan error 100% bila dikirimkan ke W3C. <html> <head> Isi dari Header atau pembuka yang berisi tag-tag berikut: <title> Judul Halaman Web </title> <meta   name="author"   content="Nama programer atau pembuat file HTML"> <meta   name="description"   content="Keterangan mengenai isi dari halaman Web"> <meta   name="keywords"   content="Kata Kunci yang ada pada Halaman Web"> Dan sederetan perintah META lainnya yang akan dibahas nanti. <link   rel="stylesheet"   type="text/css"   href="lokasi file CSS"> Bila Anda memakai file CSS External perintah diatas dituliskan disini Untuk perintah CSS (Cascading Style Sheet) akan dibahas nanti. </head> <body> Isi dari Halaman Web yang akan ditampilkan oleh browser. </body> </html> Perlu diketahui bahwa, program HTML tidak seperti Bahasa pemrograman yang lain yang mengenal perintah JUMP (melompat dari perintah yang satu keperintah yang lainnya), jadi program HTML akan dikerjakan oleh Browser dari atas kebawah dan tidak bisa balik lagi keatas. Dan juga dalam pembuatan file HTML sedapat mungkin hindari karakter-karakter yang merupakan ciri khas dari perintah-perintah HTML seperti, karakter < , > dan  ; . Sekarang kita kembali pada latihan1.html yang telah kita buat sebelumya tadi. Pada file latihan1.html yang telah Anda buat di muka tadi hanya bentuk perkenalan, setelah Anda mengetahui urut-urutan perintah HTML sekarang coba Anda rubah file latihan1.html tadi menjadi seperti dibawah ini. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Latihan Membuat File HTML</title> <meta name="author"   content="Malih Tongtong"> <meta name="description"   content="Uji coba pembuatan file HTML yang sederhana"> <meta name="keywords"   content="Latihan,HTML,Malih,berjalan,baik,atau,tidak"> </head> <body> Ini adalah program HTML pertamaku. </body> </html>

Setelah Anda simpan file diatas, sekarang Anda coba lagi menjalankan nya dengan browser. Apakah Anda melihat perbedaan nya..?, Bila Anda jeli tentunya Anda akan melihat sedikit perbedaan pada tampilan browser Anda, dimana..?.

Tampilan dari file latihan1.html sebelum mengikuti aturan

Sudah menemukan perbedaan nya..?, yah memang ada sedikit perbedaan tampilan pada browser antara file yang pertama kali dibuat dengan yang terakhir ini. Perbedaan nya ada pada bagian atas browser Anda. Pada file pertama sebelum diberi tag <title> , tulisan pada bagian atas browser hanya menyatakan lokasi dari file latihan1.html ditaruh. Sedangkan pada file yang terakhir dibuat setelah memasukan perintah <title> , maka tulisan diatas browser menjadi kata-kata yang dituliskan diantara tag <title> dan </title>. Pada contoh diatas tulisan nya menjadi Latihan Membuat File HTML. Anda dapat merubah judul Halaman ini sesuka hati Anda, yang penting judul tersebut harus ada diantara tag <title> dan </title>. serta penulisan perintahnya harus ada diantara tag <head> dan </head>. Arti dari perintah-perintah META Setelah Anda mengenal perintah <title> serta </title> dan mengetahui fungsinya, selanjutnya mungkin Anda akan menanyakan arti dari perintah <meta> . Pengertian META itu sendiri dalam HTML dapat berarti perintah yang tersembunyi, perintah yang menjadi acuan, perintah yang menjadi standar baku, dan sebagainya, sehingga bila diterjemahkan dalam konteks bahasa sedikit sulit menjelaskannya makna dari kata META ini. Perintah meta dibedakan dari nama (name) yang tertulis, dan isi/arti dari perintah itu (content). Jadi perintah META harus mempunyai atribut NAME dan atribut CONTENT dalam penulisannya. Adapun nama-nama dari perintah META yang sering dipergunkana oleh kebanyakan situs antara lain:

author : Atribut yang menyatakan tentang pembuat atau programer file tersebut. audience : Atribut yang digunakan untuk mengaktifkan pilihan multimedia yang ada pada halaman web itu. Biasanya isi content dari perintah meta ini cuma kata ALL atau DISABLE copyright : Atribut yang menyatakan tentang hak cipta dari file tersebut. content-type : Berbeda dengan perintah meta yang lain, perintah meta ini digunakan sebagai pemberitahuan kepada browser tentang standar baku dari format bahasa dan kode yang digunakan, beberapa standar kode yang berlaku antara lain : ANSI, iso-8859-1, UTF-8 dan sebagainya. Penulisan perintah meta ini boleh dikatakan wajib bila kita menggunakan karakter-karakter tertentu yang akan di tampilkan di browser misalnya karakter huruf Arab, jepang, china, dsb. contoh format penulisannya sebagai berikut : <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> description : Atribut yang digunakan untuk menerangkan isi dari suatu halaman web atau keterangan mengenai maksud dan tujuan situs itu sendiri bisa juga sebagai penjelasan dari suatu produk dan sebagainya. generator : Atribut yang digunakan sebagai pemberitahuan bahwa file ini dibuat oleh suatu software atau program yang disebutkan di dalam isi content. keywords : Atribut yang digunakan sebagai kata kunci untuk pencarian kata pada file tersebut, masing-masing kata kunci dipisahkan dengan tanda koma. robots : Atribut yang digunakan sebagai pemberitahuan kepada Search Engine seperti GOOGLE, agar semua kata yang akan di index mengikuti link-link yang ada pada halaman tersebut, isi content dari perintah meta ini hanya kata ALL yang berarti Semuanya. revisit-after : Atribut yang digunakan sebagai pemberitahuan kepada Search Engine seperti GOOGLE, agar kembali mengecek dan mengindex halaman web ini dalam waktu yang ditentukan. isi content nya menunjukan lamanya waktu, Contoh : < meta name="revisit-after"  content="2 days"> , untuk menyatakan 2 hari.

Masih banyak lagi perintah-perintah dari META ini, daftar diatas adalah beberapa perintah META yang sering dipergunakan oleh kebanyakan situs-situs terkenal. Perintah META boleh dituliskan boleh juga tidak, saya hanya menyarankan sebaiknya perintah meta itu tidak dituliskan semuanya karena akan sedikit memperlambat akses dari pembacaan file. Seperti yang telah diberitahukan pada paragraf diatas, bahwa program HTML dikerjakan oleh browser mulai dari bagian atas file secara ber-urutan sampai ke bawah. Sehingga semakin banyak perintah META yang ditulikan diatas maka akan semakin lama juga akses pemuatan file tersebut di browser.