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.
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>
<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..? 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.
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>
<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>
<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.
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 hkebanyakan 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.
Tidak ada komentar:
Posting Komentar