Friday, 2024-03-29, 7:04 PMWelcome Guest | RSS

 SMKN 2 Baleendah
   Official Website
SMKN2Baleendah menu
Section categories
My articles [4]
LINUX [3]
trouble shooting [5]
komputer jaringan [6]
komputer jaringan
website [2]
website
troubleshooting komputer [2]
troubleshooting
tips & trik [4]
tips & trik
macremedia flash [1]
macremedia flash
VIDEO TUTORIAL [4]
VIDEO TUTORIAL
Statistics

Total online: 1
Guests: 1
Users: 0

Publisher


Main » Articles » website

ACTIVE SERVER PAGE

Apakah HTML ?

HTML (Hypertext Markup Language) adalah bahasa dari World Wide Web yang dipergunakan untuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program browser. Tiap kali kita mengakses dokumen web, maka sesungguhnya kita mengakses dokumen seseorang yang ditulis dengan menggunakan format HTML. Beberapa orang merasa keberatan jika dikatakan HTML adalah sebuah bahasa pemrograman karena struktur yang dimilikinya dianggap terlalu sederhana, kode-kode dibaca oleh browser baris per baris, dari atas ke bawah. HTML juga tidak memiliki ‘looping’ seperti bahasa pemrograman lain.

Pada HTML dipergunakan hypertext link atau hubungan antara teks dan dokumen lain. Dengan demikian pembaca dokumen bisa melompat dari satu dokumen ke dokumen yang lain dengan mudah.

Web Server

Server World Wide Web berfungsi untuk menyediakan dokumen HTML yang kita buat. Tanpa server, tidak akan ada web dan tidak akan ada kebutuhan HTML lagi. Komunikasi antara browser ke server menggunakan http (Hypertext Transfer Protocol)

Perangkat lunak server World Wide Web tersedia dalam berbagai sistem komputer, dalam bentuk paket komersial maupun non komersial. beberapa diantaranya :

Perangkat lunak Unix

Protokol http, client dan server Web pertama kali dibangun oleh CERN di Swiss pada European Particle Physics Lab sehingga suatu saat pembangunan “httpd” berhasil dipindahkan ke sistem mana saja. Dalam konteks ini, “http” menjadi “httpd”, karena program server UNIX selalu menggunakan nama “daemon”, sehingga penambahan “d” pada “httpd” menunjukkan bahwa ia adalah daemon atau perangkat lunak server, sedangkan http mengarah kepada protokolnya itu sendiri.

Server httpd yang paling banyak digunakan adalah Aphace, kemudian server httpd NCSA (National Center of Supercomputer Application).

Perangkat lunak server Web pada PC

Bagi PC yang menjalankan Microsoft Windows, beberapa waktu yang lalu banyak digunakan versi shareware dari server httpd NCSA dan yang terpaket dalam Windows 95 dan 98 adalah Personal Web Server. Paket komersial dan tidak yang tersedia bagi Windows NT, misalnya seperti Website, Microsoft Internet Information Server. Apache dan IBM Internet Connection Server bagi komputer yang menjalankan  OS/2 sedangkan MACHTTPD, httpd4Mac dan EasyServe untuk Macintosh.

Web browser

Sebagai user kita menggunakan program browser untuk membaca halaman-halaman dokumen yang kita minta dari server di web site. Browser mengirimkan request kepada server akan suatu dokumen atau layanan tertentu, dan jika ada maka server akan memberikan dokumen tersebut dan kemudian hubungan antara keduanya akan terputus. Hubungan akan terjalin kembali bila browser mengirimkan request lagi.

Dokumen yang kemudian tiba pada komputer kita, diterjemahkan oleh program browser dan ditampilkan dilayar monitor. Dokumen tersebut dapat berupa tulisan (teks), gambar, suara (dalam bentuk digital) dan bahkan video.

Ada banyak program browser yang dapat digunakan. Semuanya memiliki kesamaan dalam penggunaan HTML dan pemakaian protokol http. Contoh program browser adalah NCSA Mosaic, Netscape  Navigator, Internet Explorer.

Internet Programming language

Bahasa pemrograman internet mulai dikembangkan sejak adanya keinginan untuk membuat halaman yang aktif. Misalnya adanya animasi, form isian.

Hingga saat ini teknologi yang bersaing dalam bahasa pemrograman internet yaitu Common Gateway Interface, Java, dan ActiveX. Pengembangan aplikasi dengan CGI sangat mahal biayanya, sukar dipelajari dan tidak platform independent. Sebaliknya java, dengan teknologi virtual machine, dan object oriented, menjadikannya bahasa pemrograman internet yang ampuh dan platform independent. Adapun teknologi ActiveX dari microsoft telah diimplementasikan oleh pengembang software web client dengan model Distributed COM, menjadikan teknologi ini juga platform independent.

 

 

 

 

 

 

 

Sebuah dokumen HTML pada dasarnya berstruktur seperti gambar 2.1. Dokumen dibagi menjadi dua bagian besar, yaitu HEADER (bagian atas) dan bagian BODY (tubuh dokumen). Masing-masing ditandai oleh pasangan tag <HEAD> dan <BODY>. Bagian HEAD berisikan judul dokumen dan informasi-informasi dasar lain, sedangkan bagian BODY adalah data dokumennya.

Untuk mengetikkan dokumen, kita menggunakan Notepad atau text editor yang lain.

 

 

 

 

 

 

 

Kedua instruksi yang pertama kali harus dituliskan adalah :

 

<HTML>

….

</HTML>

 

Instruksi ini yang akan memberi tanda awal dan akhir suatu dokumen HTML. Kemudian kita buat bagian HEAD dokumen denga perintah <HEAD> dan </HEAD>. Didalam tag ini kita akan meletakkan judul dokumen , dengan perintah <TITLE> dan </TITLE>.

 

<HTML>

<HEAD>

<TITLE>

The Title of the Document

</TITLE>

</HEAD>

<BODY>

My first HTML Document

</BODY>

</HTML>

 

Contoh kecil dokumen HTML sekarang telah lengkap, berisi semua tag dokumen HTML yang harus ada. Simpan file tersebut dengan nama- misalnya “first.html” dan selanjutnya dapat ditampilkan dalam browser web.

Untuk melihat dokumen HTML secara lokal melalui browser Web (misalkan Internet Explorer) kita buka file tersebut dengan memilih menu FILE dan OPEN FILE.

Headline

Dokumen yang kita buat dapat diperbaiki tampilannya dengan menggunakan tag headline. HTML mendukung enam tingkat headline <H1> sampai dengan <H6>. Untuk headline dengan ukuran kecil, digunakan nomor yang lebih besar misalnya <H2> atau <H5>. Headline secara otomatis akan melakukan pergantian baris dalam dokumen. Untuk menengahkan headline, gunakan kode berikut :

 

<H1><ALIGN=”CENTER”>Level One Headline</H1>

Format Teks

Dokumen yang kita buat sejauh ini belum mengenal pemisah baris dan paragraf. Instruksi <P> merupakan tag yang dipakai untuk mencegah berkumpulnya seluruh teks dokumen menjadi satu paragraf besar juga memberikan jarak antar paragraf. Untuk pergantian baris kita pergunakan instruksi <BR>. Hanya saja instruksi <P> dan <BR> ini bisa sangat melelahkan untuk dokumen yang panjang. Tag <PRE> akan mempermudahnya dengan membuat browser menampilkan teks dalam format aslinya, termasuk spasi dan carriage return. Perintah <PRE> akan sangat bermanfaat untuk membuat dokumen –dokumen yang membutuhkan banyak kolom, seperti tabel.

Blockquote

Tag <Blockquote> memungkinkan untuk meletakkan suatu blok terindentasi sehingga memisahkannya dari tubuh teks. Tidak seperti <PRE>, <Blockquote> tidak mempertahankan carriage return atau spasi kosong yang Anda buat, namun hanya membuat blok teks yang didalamnya sedikit tergeser ke dalam.

Font

Seperti program pengolah kata, HTML mengenal kemampuan untuk membuat teks tebal dengan tag <B>, teks miring dengan <I> dan teks bergaris bawah dengan tag <U>. Untuk memanipulasi ukuran font dengan menggunakan tag <FONT> yang diikuti sebuah atribut SIZE. Misalkan <FONT SIZE =+4> berarti teks yang akan ditampilkan dalam ukuran 4. Ukuran berada diantara angka 1 sampai dengan 7. Tanda + didepan angka jika menginginkan ukuran font yang lebih besar daripada normal. Demikian juga tanda – untuk sebaliknya.

Image

Agar tidak membosankan, ada baiknya bila kita juga menempatkan image (gambar) dalam homepage yang dibuat.

Format Image

Format yang paling terkenal adalah GIF dan JPG. Keduanya banyak sekali dipergunakan dalam dokumen-dokumen HTML sehingga sering disebut sebagai format standar untuk grafik. Secara umum, sebaiknya gunakan GIF bila Anda  berencana menaruh terlalu banyak gambar di dalam dokumen. JPG baik dipergunakan jika Anda berkeinginan untuk meletakkan gambar berupa foto yang memiliki lebih dari 256 warna.

Menempatkan Image

HTML menyediakan suatu mekanisme sederhana untuk memadukan file gambar dengan dokumen web Anda. Instruksi <IMG> adalah sebuah open tag, yang artinya tidak memerlukan tanda penutup. Adapun cara penulisan perintah<IMG> adalah sebagai berikut :

 

<IMG SRC=”/URL/nama_file”>

 

Tag <IMG> selalu diikuti dengan atribut SRC yang menunjukkan lokasi dan nama file grafik yang ingin kita tampilkan. URL (universal Resources Locator) adalah alamat absolut dari file grafik tersebut.

Atribut tambahan untuk instruksi <IMG> adalah ALIGN. Atribut ini  mengendalikan letak (alignment) teks yang berada di baris yang sama dengan grafik terhadap sisi vertikal gambar. Atribut ALIGN ditulis dengan cara sebagai berikut :

 

<IMG SRC=”MyImage.gif” ALIGN=TOP>

Atribut Image

·         WIDTH dan HEIGHT memberikan informasi mengenai ukuran gambar kepada browser sebelum file grafiknya sendiri dikirimkan.

·         VSPACE dan HSPACE yang menentukan jarak diatas dan dibawah (VSPACE) atau di kiri dan di kanan (HSPACE) dari sebuah gambar.

·         BORDER menentukan garis pinggir di sekitar gambar. Bila BORDER diset sama dengan 0, garis pinggir akan dihilangkan dari dokumen .

Hypertext Link

Hypertext atau sering disebut teks interaktif, memungkinkan kita untuk membuat link (sambungan) antara dokumen-dokumen sehingga user dapat memperoleh dokumen-dokumen lain di luar dokumen yang sedang  diakses. Suatu link hypertext, dalam suatu dokumen Web, dapat berupa gambar atau teks. Bila Anda mengklikkan mouse pada link-link tersebut, browser akan membawa Anda menuju ke dokumen lain yang ditunjukkan oleh link tersebut.

Membuat Link

Buatlah contoh file berikut :

 

<HTML>

<HEAD>

<TITLE>

The Title of the Document

</TITLE>

</HEAD>

<BODY>

<A HREF =”MyLink.htm”>Click Here</A>

</BODY>

</HTML>

 

Tag <A HREF =”MyLink.htm”> menyatakan bahwa bagian dokumen yang berada didalam tag ini adalah suatu link yang menuju ke sebuah dokumen HTML lain, yang dalam contoh diatas, bernama ”MyLink.htm”. Sembarang teks atau gambar yang berada diantara tag <A HREF=> dan </A> akan ditampilkan browser dalam bentuk yang berbeda dari bagian dokumen lain. Biasanya browser akan menandai link ini dengan garis bawah pada teks atau garis pinggir berwarna pada gambar. User dapat mengklikkan mousenya pada link ini untuk menuju ke dokumen “MyLink.htm”.

 

Anda dapat mengkaitkan suatu dokumen atau lokasi di Internet yang berada di luar sistem dimana dokumen sekarang berada. Anda dapat menerapkan link dari dokumen Anda ke suatu dokumen yang berada di Web site lain, FTP site, Gopher  site atau ke sembarang sumber daya yang ada di Internet. Cobalah macam link berikut :

 

<A HREF =”http://www.microsoft.com”> Web Microsoft</A>

<A HREF =”ftp://ftp.netscape.com”>FTP Server Netscape</A>

Form

Formulir (form) pada suatu web site disediakan untuk diisi oleh user sehingga memungkinkan untuk bisa berinteraksi dengan pihak penyedia informasi Web.

Merancang Form untuk Dokumen

Form dalam HTML ditandai dengan tag <FORM> dan </FORM>. Sewaktu kita membuat elemen form, kita perlu menentukan bagaimana dan kemana data yang diisikan ke dalam form tersebut akan dikirimkan dari browser ke Web server.

Hal ini dilakukan dengan pernyataan ACTION dan METHOD. ACTION menunjukkan lokasi tempat program CGI yang hendak dijalankan. METHOD menunjukkan bagaimana informasi yang diisikan dalam form harus dikirimkan ke Web server. METHOD yang umum adalah GET dan POST.

TextArea

Ada beberapa elemen form yang dapat kita pergunakan dengan <FORM> yaitu TEXTAREA, SELECT dan INPUT. TEXTAREA dipakai terutama bila kita menginginkan tempat bagi user Web untuk memasukkan informasi yang panjangnya beberapa baris. Perintah yang dipergunakan adalah :

 

<TEXTAREA NAME=”nama” ROWS=n COL=n>

 

NAME menyatakan nama data yang akan dimasukkan ke dalam textarea ini. COLS dan ROWS berturut-turut menentukan banyak lebar textarea dan jumlah baris di dalam textarea. BIla COLS dan ROWS tidak ditentukan dalam kode TEXTAREA, maka nilai yang akan dipergunakan adalah 40 karakter lebar dan 4 baris tinggi.

Select

Terkadang Anda ingin menyediakan beberapa pilihan kepada user dokumen Web Anda sebagai masukan. <SELECT> akan menampilkan suatu daftar yang dapat dipilih oleh user , baik dalam bentuk menu pop-up maupun menu gulung. Perhatikan contoh berikut :

 

 

<HTML>

<HEAD>

<TITLE>

The Title of the Document

</TITLE>

</HEAD>

<BODY>

<FORM>

<SELECT NAME=”pilih”>

<OPTION SELECTED VALUE=”bagus”>Bagus !

<OPTION VALUE=”lumayan”>Lumayan

<OPTION VALUE=”biasa”>Biasa saja

<OPTION VALUE=”jelek”>Jelek

</SELECT>

</FORM>

</BODY>

</HTML>

 

Input

Input adalah elemen form yang mungkin paling banyak dipakai. <INPUT> Dibentuk dalam beragan bentuk, yang dapat berupa kotak teks, tombol-tombol dan checkbox.

 

Macam-macam bentuk <INPUT> adalah :

TEXT, dipergunakan untuk menampilkan kotak teks sebagai masukan dari user. Panjang kotak teks ini dibatsi satu baris saja. Perintah yang dipergunakan adalah:

 

<INPUT TYPE=”text”>

 

TOMBOL, tombol-tombol pilihan dapat ditampilkan dengan perintah :

 

<INPUT TYPE=”radio”>

 

Tombol-tombol akan nampak seperti sebuah lingkaran kosong yang bilamana dipilih, akan berisi lingkaran lain yang berwarna lain yang berwarna hitam didalamnya.

 

<FORM>

Apakah Anda setuju ? <BR>

<INPUT TYPE=”radio” NAME=”pilihan” VALUE=”ya”> Ya>

<INPUT TYPE=”radio”NAME=”pilihan”VALUE=”tidak”> Tidak>

</FORM>

Checkbox

Serupa dengan tombol, Checkbox memungkinkan user dokumen untuk memilih suatu pilihan dari beberapa pilihan yang tersedia, bedanya Checkbox mengijinkan user memilih lebih dari satu pilihan. Perintah yang digunakan :

 

<INPUT TYPE=”checkbox”>

Submit

Pada akhir sebuah form, haruslah terdapat satu tombol yang dipergunakan untuk mengirimkan data-data yang telah dimasukkan ke dalam form. Biasanya tombol ini diberi tulian “SUBMIT”. Perintahnya :

 

<INPUT TYPE=”submit”>

Password

Bentuk input yang lain adalah PASSWORD, yang sebenarnya adalah kotak teks biasa namun tidak menampilkan ke layar data yang dimasukkan didalamnya.

 

<INPUT TYPE=”password”>

Tabel

Tabel bermanfaat untuk menyajikan informasi yang memerlukan banyak kolom dan baris. Namun lebih daripada itu, tabel dapat menjadi alat utama dalam HTML untuk mengendalikan tataletak dokumen Web kita.

Dasar-dasar Tabel

Tabel dibuat dari tag<TABLE> dan </TABLE>. Didalam tag ini dapat dibuat baris-baris tabel dengan perintah <TR> dan </TR>. Didalam <TR> ini kemudian kita dapat menenpatkan perintah <TD> dan </TD>. Sebuah contoh sederhana untuk membuat tabel dengan dua baris dan tiga kolom :

 

<TABLE BORDER=1>

<TR>

<TD>one</TD>

<TD>two</TD>

<TD>three</TD>

</TR>

<TR>

<TD>four</TD>

<TD>five</TD>

<TD>six</TD>

</TR>

</TABLE>

 

Perintah BORDER menentukan besarnya garis pinggir dalam tabel. Bila BORDER dipasang sama dengan nol, maka garis pinggir akan hilang.

 

Lebar tabel keseluruhan dapat diatur dengan menentukan lebar tabel dalam pixel atau persentase di dalam

 

<TABLE WIDTH=x>

 

Sebagai contoh kita akan membuat tabel dengan lebar 80% lebar layar browser, maka perintahnya adalah :

 

<TABLE BORDER=1 WIDTH=80%>

 

Untuk meletakkan data agar berada di tengah-tengah sel tabel, kita memberikan pernyataan ALIGN=CENTER pada <TR>. Atau dapat pula dibuat rata kiri atau rata kanan dengan pernyataan ALIGN=LEFT atau ALIGN=RIGHT. Untuk menentukan tata letak vertikal, digunakan VALIGN. Nilai yang diberikan adalah CENTER, TOP atau BOTTOM. Misalnya:

 

<TR VALIGN=BOTTOM>

 

akan meletakkan teks pada bagian bawah sel tabel.

Frame

Window browser dapat dibagi menjadi beberapa frame. Artinya,  sebuah frame adalah daerah segiempat yang berada di dalam window browser. Setiap frame menampilkan  isi dokumennya masing-masing.

Membuat frame

Untuk membuat frame, kita perlu ada tag <frameset> dan <frame>. Halaman HTML untuk  membuat dua frame bisa seperti berikut:

 

<HTML>

<FRAMESET ROWS="50%,50%">

 <FRAME SCR="page1.htm" NAME="frame1">

 <FRAME SCR="page2.htm" NAME="frame2">

</FRAMESET>

</HTML>

 

Kode  di atas akan menghasilkan dua frame. Perhatikan bahwa property rows digunakan pada tag <FRAMESET>. Artinya kedua frame akan tersusun dalam susunan atas-bawah. Frame atas me-load halaman HTML  page1.htm dan frame bawah menampilkan halaman page2.htm. Hasilnya akan terlihat seperti gambar 2.5.

 

Jika hendak menyusun frame pada susunan kolom kita dapat tuliskan cols sebagai pengganti rows pada tag <FRAMESET>. Bagian “50%,50%” menentukan seberapa  besar ukuran kedua frame. Kita dapat juga menuliskan “50%,*” jika tidak mau menghitung berapa besar frame kedua (dengan ukuran total keduanya 100%). Ukuran juga dapat ditentukan dalam satuan pixel dengan menghilangkan tanda %. Setiap frame harus memiliki nama yang unik melalui property name pada tag <FRAME>.

 

Gambar 2.5. Halaman dengan 2 frame

 

Kita dapat juga membuat tag <FRAMESET> yang berlapis. Berikut ini contohnya:

 

<HTML>

<FRAMESET COLS="50%,50%">

 <FRAMESET ROWS="50%,50%">

  <FRAME SCR="cell.htm">

  <FRAME SCR="cell.htm">

 </FRAMESET>

 <FRAMESET ROWS="33%,33%,33%">

  <FRAME SCR="cell.htm">

  <FRAME SCR="cell.htm">

  <FRAME SCR="cell.htm">

 </FRAMESET>

</FRAMESET>

</HTML>

 

Hasilnya akan seperti berikut:

Menentukan ukuran border dapat dilakukan melalui property border pada tag <FRAMESET>. Jika border=0 berarti tidak digunakan border di antara frame (tidak berlaku pada Netscape 2.x).

Dokumen HTML yang Anda  buat, sampai sejauh ini masih merupakan dokumen statis. Anda mungkin menginginkan halaman web Anda lebih interaktif. Menggunakan JavaScript  yang merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape, akan lebih memudahkan Anda untuk bisa mewujudkannya. JavaScript bersifat Object Oriented, menggunakan banyak karakteristik seperti pada pemrograman C++ dan tentu saja bahasa Java itu sendiri

Category: website | Added by: smkn2be (2009-08-11)
Views: 1093 | Rating: 0.0/0 |
Total comments: 0
Name *:
Email *:
Code *:
Login form
Search