Internet bukan
lagi menjad kalimat yang asing bagi telinga kita. Bahkan orang awam sekalipun
sudah mengenal apa yang dinamakan internet, kata-kata world wide web (www)
seakan-akan sudah menjadi bagian yang tidak dapat dipisahkan dari kehidupan
modern saat ini. Situs-situs web menampilkan berbagai informasi apapun yang ada
di belahan dunia tidak peduli seberapapun jauhnya.
Untuk membuat suatu situs web yang
menarik dan interaktif, yang tidak hanya sekedar menampilkan informasi, tetapi
dapat berinteraksi dengan user, sehingga suatu situs tidak bersifat statis,
tetapi dapat menjadi bersifat dinamis, membutuhkan kemampuan pemrograman web.
Dalam pendahuluan ini akan diberikan
pengantar tentang pemrograman web. Apa yang dimaksud server-side programming
dan apa yang dimaksud dengan server-side programming.
SERVER
SIDE VS CLIENT SIDE
Teknologi yang digunakan dalam
pemrograman web dibagi menjadi dua yaitu server
side dan client side. Pada server side, perintah-perintah program
dijalankan di server dan dikirimkan ke browser sudah dalam bentuk HTML.
Sedangkan client side, proses akan
dilakukan di web browser. Biasanya client
side digunakan untuk hal-hal yang membutuhkan interaksi user tetapi data
yang ditampilkan tetap dan seragam.
Aplikasi web berjalan pada protokol
HTTP, dan semua protokol di internet selalu melibatkan antara server dan
client. Ketika seseorang mengetikkan suatu alamat di browser, maka browser akan
mengirimkan perintah tersebut ke web server. Jika yang diminta oleh client
adalah file yang mengandung perintah server
side maka server web akan menjalankan dahulu program tersebut lalu
mengirimkannya kembali ke browser dalam bentuk HTML sehingga dapat
diterjemahkan oleh browser. Sedangkan jika yang diminta oleh client adalah file
yang mengandung file client side maka
oleh server file tersebut akan langsung dikirimkan ke browser.
Banyak sekali bahasa pemrograman
yang dipakai pada pemrograman web, diantaranya : CGI/Perl,
Active Server Pages (ASP), Java Server Pages (JSP), PHP, ColdFusion (CFM), dll,
yang kesemuanya itu adalah program server
side. Sedangkan untuk client side
misalnya saja JavaScript, VBScript, HTML.
HTML
Hypertext
Markup Language (HTML) adalah bahasa standar dalam menulis halaman
web, HTML merupakan pengembangan dari standar pemformatan dokumen teks. HTML
sebenarnya adalah dokumen dalam bentuk ASCII atau teks biasa yang dapat
diterjemahkan oleh browser web menjadi suatu halaman yang menarik.
STRUKTUR
DOKUMEN HTML
Sesuai dengan
namanya yaitu Hypertext Markup Language
(HTML) maka dokumen HTML terdiri dari tanda-tanda (markup) untuk menandai perintah-perintahnya (yang selanjutnya akan
kita sebut sebagai tag).
Tag
HTML biasanya adalah tag-tag yang berpasangan dan ditandai dengan simbol <
dan >, sedangkan ‘pasangan’ atau akhir perintah dari sebuah tag ditandai dengan tanda ‘/’, misalnya
pasangan dari tag <tag> adalah </tag>.
Setiap dokumen HTML memiliki
struktur sbb :
<HTML>
<HEAD>
<TITLE>Judul
yang muncul pada title bar web</TITLE>
</HEAD>
<BODY>
Text, gambar
atau isi dokumen HTML anda
</BODY>
</HTML>
untuk lebih
jelasnya, anda buka editor anda (mis : NOTEPAD) lalu ketikkan baris perintah
HTML diatas dan panggil melalui browser web anda.
Heading
Tag
yang pertama kali akan kita pelajari adalah tag heading, yang berfungsi untuk
memformat Heading (Judul/sub judul) dalam sebuah dokumen. Ada 7 buah heading yang dikenal dalam HTML
yaitu <H1> sampai <H7>. Untuk mengetahui ukuran tiap heading, anda
dapat mencoba baris-baris berikut :
<HTML>
<HEAD>
<TITLE>Latihan
Heading</TITLE>
</HEAD>
<BODY>
<H1>Heading
1</H1>
<H2>Heading
2</H2>
<H3>Heading
3</H3>
<H6>Heading
6</H6>
<H7>Heading
7</H7>
</BODY>
</HTML>
Paragraf
Untuk memformat paragraf kita bisa
menggunakan tag <P>. Dengan tag ini kita bisa menentukan alignment (posisi) dari dokumen HTML.
Untuk mengatur posisi tulisan kita menggunakan atribut ALIGN. Atribut ALIGN
diikuti dengan posisi yang diinginkan.
Selain tag <P> ada pula tag
<BR> untuk pindah baris, <HR> untuk membuat garis,
<BLOCKQUOTE> untuk membuat kutipan, <PRE>
untuk menampilkan text sama dengan yang anda ketikkan dalam dokumen HTML, misal
anda mengetikkan :
<HTML>
<HEAD>
<TITLE>TEST</TITLE>
</HEAD>
<BODY>
Hallo
Hallo
Hallo
</BODY>
</HTML>
Maka yang akan ditampilkan oleh browser adalah
HalloHalloHallo
Hal itu terjadi karena HTML tidak mengenali tombol
Enter sehingga tombol tersebut
diabaikan. Untuk mengatasi hal tersebut maka kita menggunakan tag <PRE> tersebut.
<HTML>
<HEAD>
<TITLE>Latihan
Menggunakan Paragraf</TITLE>
</HEAD>
<P ALIGN=”right”>
Tulisan ini rata kanan.
<P ALIGN=”center”>
Tulisan ini akan berada
di tengah dokumen
<P ALIGN=”left”>
Tulisan ini rata kiri
<P align=”left”>
Hallo,<BR>Apakah
anda sudah bisa HTML<BR>
Kalau sudah bisa,
baguslah<BR>
<PRE>
<--------->
| u u |
|
u |
|
--- |
<--------->
</PRE>
</BODY>
</HTML>
Font
Untuk mengatur
jenis, ukuran, warna suatu font, kita bisa menggunakan tag <FONT>, tag
<FONT> ini memiliki beberap atribut diantaranya FACE dan COLOR.
Atribut FACE digunakan untuk
menentukan jenis font yang akan kita gunakan, semisal kita akan menggunakan
jenis font Comic Sans MS, maka kita dapat menuliskan <FONT FACE=”Comic Sans
MS”>. Sedangkan COLOR berfungsi untuk menentukan warna font, bisa dengan
cara menyebutkan nama warna seperti red, green dan blue atau menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya
FF0000 untuk red, 00FF00 untuk green dan 0000FF untuk blue. Ada juga atribut SIZE untuk menentukan ukuran
font
<HTML>
<HEAD>
<TITLE>Latihan
Font</TITLE>
</HEAD>
<BODY>
<FONT FACE=”Comic Sans
MS” COLOR=”red” SIZE=1>
Ini Menggunakan Font
Comic Sans,
warna merah dan ukurannya
1
</FONT><BR>
<FONT FACE=”Monotype
Corsiva” COLOR=”blue” SIZE=3>
Ini menggunakan Font
Monotype Corsiva,
warna biru dan ukurannya
3
</FONT>
</BODY>
</HTML>
Warna
Dokumen
Suatu dokumen
web akan terlihat lebih menarik jika diberi warna-warna atau gambar sebagai
backgroundnya. Untuk itu, pada HTML tersedia atribut-atribut untuk mengatur hal
tersebut, atribut tersebut diletakkan pada tag <BODY> sehingga efeknya
akan dapat dilihat di seluruh dokumen. Atribut yang digunakan dalam tag
<BODY> yaitu :
|
Atribut
|
Fungsi
|
|
BGCOLOR
|
Menentukan
warna background suatu halaman web
|
|
BACKGROUND
|
Menentukan
gambar/images yang akan dipasang sebagai background halaman web
|
|
TEXT
|
Menentukan
warna teks normal
|
|
LINK
|
Menentukan
warna teks yang berfungsi sebagai link
|
|
ALINK
|
Menentukan
warna teks link ketika diklik
|
|
VLINK
|
Menentukan
warna teks link ketika selesai diklik
|
Link
Dalam web, selalu ada yang dinamakan
link, link berfungsi menghubungkan antara satu halaman dengan halaman lainnya.
Untuk link ini HTML menyediakan tag <A> (Anchor). Tag <A> memiliki beberapa atribut mis : HREF untuk
menghubungkan antara satu halam dengan halaman lainnya, dan NAME untuk
memberikan nama pada suatu paragraf/tulisan dalam dokumen HTML, sehingga
mempermudah navigasi dalam suatu halaman web.
<HTML>
<HEAD>
<TITLE>Latihan
Link</TITLE>
</HEAD>
<BODY>
<A
NAME=”top”>Bagian ini ditandai dengan top</A>
<A
HREF=”latihan1.html”>Link ke latihan1.html</A>
<A
HREF=”#top”>Link ke tempat yang ditandai</A>
</BODY>
</HTML>
List
Terkadang
dalam website yang kita buat, kita ingin membuat sebuah daftar, misalnya saja
kita membuat daftar barang inventaris sbb :
·
Meja
·
Kursi
·
Komputer
HTML
menyediakan tag untuk membuat list seperti diatas. Jenis list dalam HTML dibagi
menjadi :
·
Ordered List
·
Unordered List
·
Directory List
·
Menu List
·
Definition List
List yang
paling sering dipakai adalah Ordered List
dan Unordered List, untuk Directory List, Menu List dan Definition List
jarang sekali dipakai.
Ordered
List
Ordered list
adalah daftar yang tiap bagiannya disertai dengan penomoran. Ordered list
diawali dengan tag <OL> dan setiap item dalam list selalu diawali dengan
<LI>. List yang memakai tag <OL> ini tidak harus 1,2,3,dst tetapi
bisa saja a,b,c,dst, i,ii,iii,dst, tergantung pada atribut TYPE yang dituliskan
dalam tag <OL>.
Tipe
penomoran yang dimiliki oleh tag <OL> yaitu :
·
1 -> 1,2,3,…
·
A -> A,B,C,…
·
A -> a,b,c,…
·
I -> I,II,III,…
·
I -> i,ii,iii,…
Unordered
List
Unordered list
biasanya ditandai dengan pemakaian bullet untuk menandai setiap item dalam
list. Unordered list diawali dengan tag <UL>. Sama seperti dalam Ordered
list, pada Unordered list setiap item dalam list selalu diawali dengan
<LI> dan juga memiliki beberapa type, yaitu :
·
TYPE = circle -> Tanda lingkaran
·
TYPE = disk -> Tanda cakram
·
TYPE = square -> Tanda kotak
<HTML>
<HEAD>
<TITLE>Latihan menggunakan
List</TITLE>
<HEAD>
<BODY>
Dibawah ini menggunakan
Ordered List
<OL TYPE=a>
<LI>Apel
<LI>Mangga
<LI>Semangka
</OL>
Dibawah ini menggunakan
Unordered List
<UL TYPE=square>
<LI>Apel
<LI>Mangga
<LI>Semangka
</UL>
Dibawah ini menggunakan
Ordered List mulai 10
<OL TYPE=1
START=10>
<LI>Sepuluh
<LI>Sebelas
<LI>Duabelas
</OL>
</BODY>
</HTML>
Postingan
0 komentar:
Posting Komentar