 |
| Everything about basic Pemrograman Internet |
Setelah beberapa waktu yang lalu membahas tentang praktek PHP, JQUERY, AJAX dll. kali ini akan kembali lagi pada dasar-dasar supaya kita bener-bener paham tentang pemrograman web, pemrograman Internet, HTML dan semua pendukungnya
Hypermedia adalah dimana seorang pengguna dengan mudahnya memilih item berikutnya yang diinginkan dan dengan segera ditransport ke lokasi baru yang diinginkan tadi. Sebagai contoh adalah suatu audio CD dimana anda dapat memilih lagu kelima dan langsung dapat didengarkan lagu tersebut. Berbeda dengan sebuah audiotape dimana anda harus mencari
Hypermedia adalah dimana seorang pengguna dengan mudahnya memilih item berikutnya yang diinginkan dan dengan segera ditransport ke lokasi baru yang diinginkan tadi. Sebagai contoh adalah suatu audio CD dimana anda dapat memilih lagu kelima dan langsung dapat didengarkan lagu tersebut. Berbeda dengan sebuah audiotape dimana anda harus mencari
mulai dari lokasi saat ini tape anda hingga diawal lagu yang diinginkan. Ketika konsep ini diaplikasikan pada suatu teks maka akan didapatkan suatu hypertext, dimana dengan {clicking} pada suatu link atau hotspot (hyperlink) anda dengan segera dikirimkan menuju ke lokasi baru dalam halaman yang sama atau halaman baru atau secara bersamaan. Ketika anda melakukan interlink dalam jumlah yang banyak halaman teks pada komputer yang berbeda di segala penjuru dunia, anda seolah-olah mendapatkan sistem seperti jaring laba-laba daripada link-link dan halaman-halaman tersebut. Hal inilah yang dikenal dengan World Wide Web, suatu sistem dimana suatu halaman disimpan pada beberapa web server (penyedia layanan web) yang berbeda-beda, tersambung dengan atau menuju ke internet, kesemuanya itu tersambung bersama. Sistem ini sangatlah bermanfaat karena semua halaman dibuat dalam format yang sama. Format atau “language” ini dinamakan HTML (Hypertext Markup Language) yang merupakan bagian dari standar internasional untuk dokumen elektronik yang dinamakan SGML (Standard Generalized Markup Languages). Pada bab ini anda akan dikenalkan dengan format halaman HTML, anda akan mempelajari tentang komponen yang membuat HTML dan bagaimana membuat halaman yang dapat dipublish di World Wide Web. HTML (Hypertext Markup Language) merupakan salah satu format yang digunakan dalam dokumen dan aplikasi yang berjalan di web browser. Karena itu, untuk bisa melakukan pemrograman aplikasi di atas web Anda harus terlebih dahulu menguasai HTML. Walaupun sekarang telah banyak terdapat tool yang dapat Anda gunakan untuk membuat halaman secara WYSIWYG (what you see is what you get) seperti Dreamweaver, Frontpage dan Netscape Editor, namun Anda tetap harus menguasai HTML terutama untuk membuat aplikasi dengan teknologi CGI
Pembuatan Halaman HTML
Memilih Text Editor
Saat ini ada banyak sekali program aplikasi yang dapat digunakan untuk membuat halaman web. Text Editor adalah program pengolah kata yang paling dasar tanpa ada fitur-fitur yang ‘aneh-aneh’ seperti pengolah kata pada umumnya seperti Ms Word. Salah satu kelebihan dari text editor adalah suatu file yang dibuat dengan program ini disimpan hampir tanpa ada kode rahasia yang tak terlihat seperti halnya dokumen Ms Word atau pengolah kata yang lainnya, yang akan secara drastis akan menimbulkan efek pada dokumen anda saat akan ditampilkan di web browser. Dengan kata lain akan lebih mudah untuk membangun suatu halaman web dengan menggunakan text editor biasa dari pada suatu pengolah kata. HTML editor mempermudah pengguna untuk membuat halaman web dengan cepat dan mudah hanya dengan menekan beberapa buah tombol yang disediakan dan kemudian program aplikasi ini akan menghasilkan “source code” HTML untuk anda, daripada memasukan semua kode-kode HTML dengan mengetikkannya satu persatu. HTML editor merupakan suatu alat yang tepat bagi seorang web developer; meskipun seharusnya juga sangat penting untuk mempelajari dan mengetahui bahasa HTML sehingga anda dapat mengedit kode-kode yang ada dan membetulkan dokumen anda jika tidak dapat dilakukan oleh HTML editor. Ms Word dan Corel WordPerfect versi yang ada saat ini juga telah mempunyai kemampuan untuk membuat halaman web.
Dalam hal ini, kita akan menggunakan text editor standar dari Ms. Windows, yaitu NotePad. Anda dapat melakukan semua latihan dan konsep ini dengan text editor apapun pada berbagai platform yang lain juga.
Memulai NotePad
NotePad adalah text editor standar yang ada baik di versi 16 bit maupun 32 bit sistem operasi Ms
Windows. Untuk memulai NotePad di Ms Windows ikuti langkah-langkah berikut:
1. Click pada tombol “Start” yang ada pada task bar Windows.
2. Click pada “Program” dan lalu click pada menu direktori berlabel “Accessories”.
3. Kemudian click pada shortcut “NotePad”.
Menyimpan File Script
Setelah anda membuat script-script HTML, tentunya anda ingin segera menyimpan file tersebut
dalam ekstensi HTML atau ekstensi lainnya. Ikuti langkah berikut:
1. Click tombol “File” pada taskbar notepad, kemudian pilih “Save”.
2. Pada field isian nama file (filename) , ketikkan namafile.html (“namafile” dapat anda ganti
dengan nama file yang anda sukai, misalnya file1.html)
3. Coba jalankan browser dengan membuka “Internet Explorer”.
4. Click pada menu "File .."
5. Pilih pada option "Open .." yang ada pada menu "File .."
6. Pada dialog box "Open" klik pada tombol "Browse .." dan cari file yang ingin ditampilkan.
7. Selanjutnya pilih tombol "Ok" jika file telah dipilih.
Mengedit File Script
Saat ini anda telah membuka dan menampilkan hasil kerja anda dalam suatu web browser, sekarang anda dapat melanjutkan pekerjaan anda dengan menambahkan dan mengedit file html tersebut, kemudian menyimpan hasil perubahan tersebut dan lalu menampilkan hasil perubahan file itu. Anda akan lebih produktif jika anda belum menutup web browser anda; cukup hanya dengan me-minimize web browser dan melanjutkan pekerjaan anda. Ketika anda ingin menampilkan hasil kerja anda yang sudah diedit:
1. simpan hasil perubahan file html anda
2. pindah ke aplikasi web browser
3. Pada Ms Internet Explorer tekan tombol "REFRESH"
Web Browser akan me-load dokumen yang sama tapi dengan revisi baru tadi. Proses ini adalah
siklus Edit, Save, dan View.
Dasar-Dasar HTML
HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup Language). Dikatakan markup language karena HTML berfungsi untuk ’memperindah’ file teks biasa untuk ditampilkan pada program web browser. Hal ini dilakukan dengan menambahkan elemen atau sering disebut sebagai tag-tag pada file teks biasa tersebut. Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai dengan simbol lebih besar
(<) dan (>). Pasangan dari sebuah tag ditandai dengan simbol garis miring (/). Misalnya pasangan dari tag <contoh> adalah </contoh>. Dalam hal ini <contoh> kita sebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen <contoh> bila ditulis dengan atributnya adalah sebagai berikut: <contoh atribut1=”nilai_atribut1” atribut2=” nilai_atribut2” … >. Dalam penulisan tag HTML tidaklah
case sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah menjadi masalah. Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut:
| <html> <head> <title>teks pada title bar web browser</title> </head> <body> Berisi tentang text, gambar, atau apapun yang tampil pada dokumen web. </body> </html> |
Seperti terlihat, struktur file HTML diawali dengan sebuah tag <html> dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag <head> ... </head> dan tag <body> ... </body>.
Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <title> ... </title> yang berfungsi untuk mengeluarkan judul pada title bar window web browser. Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini Anda akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin Anda sampaikan pada pengguna nantinya.
(Bimo Sunafri hantono)
Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <title> ... </title> yang berfungsi untuk mengeluarkan judul pada title bar window web browser. Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini Anda akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin Anda sampaikan pada pengguna nantinya.
(Bimo Sunafri hantono)
0 komentar:
Posting Komentar