bagian 1 : pendahuluan - E

BAGIAN 1 :
PENDAHULUAN
INTERNET
Internet berasal dari kata interconnection networking yang mempunyai arti hubungan
berbagai komputer dengan berbagai tipe yang membentuk sistem jaringan yang mencakup
seluruh dunia (jaringan komputer global) dengan melalui jalur telekomunikasi seperti telepon,
wireles, dan sebagainya. Jaringan komputer ini diintegrasikan oleh protokol-protokol yang
umum disebut TCP/IP. TCP (Transmission Control Protocol) memastikan bahwa semua
hubungan bekerja dengan benar, sedangkan IP (Internet Protocol) mentransmisikan data dari
satu komputer ke komputer lain. TCP/IP secara umum berfungsi untuk memilih rute terbaik
transmisi data, memilih rute alternatif jika suatu rute tidak dapat digunakan, mengatur dan
mengirimkan paket-paket data, dan lain-lain.
Untuk dapat menggunakan fasilitas internet, biasanya Anda harus berlangganan ke salah
satu ISP (Internet Service Provider). Dengan memanfaatkan internet, pemakai komputer di
seluruh dunia dimungkinkan untuk mencari berbagai informasi yang dibutuhkan, memakai
data bersama-sama, berkomunikasi dengan cara saling kirim e-mail atau menggunakan
fasilitas chatting, membahas topik tertentu pada news group, dan lain-lain.
WEB SERVER DAN WEB BROWSER
WWW (World Wide Web) merupakan jaringan beribu-ribu komputer yang dikategorikan
menjadi dua: client dan server dengan menggunakan software khusus membentuk sebuah
jaringan yang disebut jaringan client-server. Dalam cara kerja WWW ada dua hal yang
terpenting yaitu software web server dan software web browser.
Web server menyimpan/menyediakan informasi dan memproses permintaan dari client,
apabila ada client yang meminta informasi maka server mengirimkannya. Informasi yang
diakses dapat berupa teks, gambar, suara, maupun animasi. Server juga mengirimkan
perintah-perintah ke client bagaimana cara menampilkan semua informasi tersebut dalam
bentuk HTML (Hypertext Markup Language). Client membuat permintaan informasi dan
kemudian menangani pengaksesan informasi kepada end user.
Web browser merupakan suatu software yang dirancang untuk mengambil informasiinformasi dari suatu server komputer pada jaringan internet. Software web browser ini juga
biasa disebut dengan browser saja. Beberapa contoh browser yang banyak digunakan antara
lain:
1
2
3
4
5
Internet Explorer dari Microsoft Corporation
Netscape Navigator dari Netscape Communication
OPERA dari Opera Software ASA
Mosaic buatan NCSA
Lynx, browser teks pada sistem Unix
WEBSITE
Website (situs web) merupakan alamat URL (Uniform Resource Locator) yang berfungsi
sebagai tempat penyimpanan data dan informasi dengan topik tertentu. Suatu situs web
terdiri atas:
1
Web page (halaman web), merupakan halaman khusus dari website tertentu yang
tersimpan dalam bentuk file. Dalam web page tersimpan berbagai informasi dan link yang
menghubungkan suatu informasi ke informasi lain baik dalam web page yang sama
maupun web page yang lain pada website yang berbeda.
2 Homepage (halaman utama) merupakan halaman pertama atau sampul dari suatu
website yang biasanya digunakan untuk memberikan informasi singkat mengenai isi dari
website tersebut dan siapa pemiliknya.
Website yang ada di internet dapat dikategorikan menjadi:
1
Web statis, yaitu web berisi/menampilkan informasi-informasi yang sifatnya statis (tetap).
2
Web dinamis dan interaktif, merupakan web yang dapat menampilkan informasi secara
dinamis dan up-to-date serta dapat melakukan interaksi dengan user. Agar dapat
memberikan informasi yang relevan, website dinamis biasanya terhubung dengan
database sehingga informasi yang ditampilkan pada website sesuai dengan data yang
ada pada database. Untuk membuat website yang bersifat dinamis dan interaktif
diperlukan bahasa pemrograman khusus.
PEMROGRAMAN WEB
Teknologi pemrograman web dibedakan menjadi dua:
1
Client-side programming. Client-side programming merupakan teknik pemrograman web
dimana perintah program dijalankan di web browser, sehingga ketika client meminta
dokumen yang mengandung script, maka script tersebut akan didownload dari servernya
kemudian dieksekusi pada browser yang bersangkutan. Pemrograman web yang
tergolong client-side programming: JavaScript, VbScript, HTML.
2
Server-side programming. Pada server-side programming, perintah-perintah program
(script) terlebih dahulu dieksekusi di web server, kemudian hasilnya dikirimkan ke browser
dalam bentuk HTML biasa. Pemrograman web yang tergolong server-side programming:
CGI/Perl, ASP, JSP, PHP, ColdFussion, dan sebagainya.
BAGIAN 2 :
HTML (HYPERTEXT MARKUP LANGUAGE)
HTML (hypertext markup language) merupakan suatu format yang digunakan dalam
pembuatan dokumen dan aplikasi yang berjalan di halaman web. HTML dirancang untuk
digunakan tanpa tergantung pada suatu platform tertentu. Dokumen HTML adalah suatu
dokumen teks biasa dan disebut markup language karena menggunakan tanda-tanda
tertentu yang disebut tag untuk mengatur bagaimana suatu dokumen ditampilkan pada
browser.
Pada mulanya HTML didesain untuk menjadi sebuah bahasa yang menggambarkan suatu
struktur dokumen yang tidak terikat pada perangkat keras dan perangkat lunak tertentu.
Tetapi dalam penggunaannya, HTML menjadi semacam bahasa untuk mengatur format
tampilan dokumen saja. HTML dirasakan sangat terbatas untuk mendukung pembuatan
aplikasi-aplikasi rumit pada website.
Untuk membuat program aplikasi yang berjalan di atas web, Anda harus terlebih dahulu
menguasai HTML. Saat ini telah banyak terdapat paket aplikasi yang dapat digunakan untuk
membuat halaman web secara WYSIWYG (what you see is what you get) seperti Microsoft
FrontPage, Macromedia DreamWeaver, Netscape Composer dan sebagainya, yang
memudahkan Anda untuk merancang suatu halaman web tanpa harus menguasai tag-tag
HTML. Akan tetapi untuk menjadikan halaman web Anda lebih dinamis dan lebih interaktif,
penguasaan terhadap terhadap tag-tag HTML akan sangat diperlukan.
Untuk membuat situs web yang dinamis dan interaktif, tidak cukup dengan mengandalkan
HTML saja, terlebih lagi dalam membangun suatu web database. Anda akan melibatkan
bahasa scripting seperti PHP, ASP, JavaScript, dan sebagainya. Dalam bahasa scripting,
script diletakkan di antara tag-tag HTML, sehingga tanpa penguasaan terhadap tag-tag
HTML tentu saja Anda tidak akan tahu dimana akan meletakkan suatu script di dalam suatu
dokumen HTML. Sebaliknya banyak tag HTML yang dimasukkan di dalam suatu script,
misalnya untuk pindah baris, membuat tabel, memasukkan gambar, link, dan untuk keperluan
lainnya. Tentu saja Anda harus mengetahui tag apa saja yang diperlukan untuk keperluan
tersebut.
STRUKTUR 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.
Dikatakan markup language karena HTML berfungsi untuk memformat file dokumen teks
biasa untuk bisa ditampilkan pada web browser sesuai keinginan. Hal tersebut dapat
dilakukan dengan menambahkan elemen atau sering disebut sebagai tag.
Elemen HTML biasanya berupa tag-tag yang berpasangan dan setiap tag ditandai dengan
simbol “<” dan “>”. Pasangan dari sebuah tag ditandai dengan simbol ” / “. Misalnya
pasangan dari tag <contoh> adalah </contoh>. Dalam hal ini <contoh> disebut 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 tidak bersifat case sensitive, artinya penggunaan huruf kecil
ataupun kapital tidak menjadi masalah. Script HTML dapat dituliskan dalam text editor seperti
Notepad, kemudian disimpan dengan ekstensi .htm atau .html. Untuk mengeksekusi file
HTML dapat dilakukan dengan menggunakan browser seperti Internet Explorer atau
Netscape Navigator melalui menu File|Open, kemudian browse ke lokasi dan nama file
dimana file HTML disimpan.
Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut:
<html>
<head>
<title>berisi teks yang akan muncul pada title bar browser</title>
</head>
<body>
berisi teks, gambar, atau apapun yang ingin ditampilkan
pada halaman web ada pada bagian ini.
</body>
</html>
Seperti terlihat, struktur file HTML diawali dengan sebuah tag <html> dan ditutup dengan
tag </html>. Di dalam tag ini terdapat dua bagian besar, yaitu bagian yang diapit oleh tag
<head>.....</head> dan tag <body>.....</body>.
Bagian yang diapit oleh tag <head>.....</head> merupakan header dari halaman HTML
dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti
<title>.....</title> yang berfungsi untuk menampilkan judul pada title bar window web
browser dan tag lain misalnya <meta>.
Bagian yang diapit oleh tag <body>.....</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
kepada pengguna nantinya.
KODE WARNA
Sebelum mempelajari lebih jauh tentang tag-tag HTML alangkah baiknya terlebih mengetahui
kode warna yang akan sering digunakan dalam penulisan tag-tag HTML. Pengaturan warna
untuk halaman HTML menggunakan kode warna RGB (red, green, blue) yang mana setiap
warna ditampilkan dalam dua digit nilai heksadesimal. Setiap bagian dua digit kode
menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau, dan biru. Sebagai
contoh 00 pada dua digit pertama berarti tidak ada warna merah, dan seterusnya.
Berikut ini adalah contoh beberapa kode warna standar:
Warna
Aqua = Cyan (biru air)
Aquamarine (biru kehijauan)
Black (hitam)
Blue (biru)
Brass (kuning tua)
Chocolate (cokelat)
Copper (keunguan)
Fuchsia (merah keunguan)
Gray (abu-abu)
Green (hijau)
Lime (hijau terang)
Magenta
Heksa
#00FFFF
#70DB93
#000000
#0000FF
#B5A642
#5C3317
#B87333
#FF00FF
#808080
#00FF00
#00FF00
#FF00FF
Warna
Maroon (merah tua)
Navy (biru gelap)
Olive (hijau kekuningan)
Orange
Pink (merah muda)
Purple (ungu)
Red (merah)
Silver (perak)
Teal (biru kehijauan)
Violet
White (putih)
Yellow (kuning)
Heksa
#800000
#000080
#808000
#FF7F00
#FF6EC7
#800080
#FF0000
#C0C0C0
#008080
#9F5F9F
#FFFFFF
#FFFF00
BAGIAN HEAD
Bagian head tidak harus ada pada sebuah dokumen HTML, tetapi pemakaian head yang
benar akan meningkatkan kegunaan suatu dokumen HTML. Bagian ini menyimpan informasi
yang berguna mengenai dokumen. Isi bagian head tidak ditampilkan ketika dokumen HTML
diakses melalui browser, kecuali bagian title yang merupakan judul dokumen. Elemenelemen yang terdapat pada bagian head antara lain:
Tag <title>
Tag ini digunakan untuk memberi judul dokumen. Judul dokumen sebaiknya tidak terlalu
panjang, tetapi mampu mencerminkan isi dari dokumen.
<title>judul dokumen</title>
2.1.1. Tag <base>
Tag ini berfungsi untuk menentukan basis URL sebuah dokumen. Basis URL ini berguna bila
dalam dokumen tersebut terdapat link-link yang bersifat relatif, agar link tersebut tetap
bekerja meskipun dokumen dipindahkan ke direktori lain atu ke komputer lain. Elemen
<base> mempunyai sebuah atribut, yaitu href yang menunjukkan sebuah alamat URL.
<base href=”http://www.situsku.com”>
2.1.2. Tag <link>
Tag ini berfungsi untuk menunjukkan relasi antar dokumen HTML. Penggunaanya:
<link rev=”made” href=mailto:[email protected]>
2.1.3. Tag <meta>
Tag ini sangat berguna untuk memberikan deskripsi mengenai suatu dokumen HTML, seperti
refresh, description, author (pengarang), keyword (kata kunci), dan lain-lain. Properti
description dan keyword merupakan properti yang penting dan dijadikan referensi bagi
kebanyakan program search engine yang ada di internet untuk menemukan suatu situs.
<meta name=”keywords” content=”asyik, lucu,humor”>
BAGIAN BODY
Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen <body>.
Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks, warna link,
dan lain-lain.
Atribut elemen body
background
bgcolor
text
link
vlink
alink
bgproperties
topmargin
leftmargin
= lokasi dan nama file latar belakang image dokumen
= warna latar belakang dokumen, default putih
= warna teks dokumen, default hitam
= warna link dokumen, default biru
= warna visited link dokumen, default ungu
= warna active link dokumen, default merah
= [fixed|none] (mengatur properti gambar latar belakang)
= batas atas dokumen (pixel)
= batas kiri dokumen (pixel)
PENGATURAN FORMAT DOKUMEN HTML
2.1.4. Heading <hn>
Tag heading <hn> berfungsi untuk memformat heading (judul dan sub-judul) dari suatu
halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada
enam buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h6>.
Latihan01.html
<html>
<head>
<title>Latihan-1: Heading</title>
</head>
<body bgcolor=#003399 text=#FFFF00>
<h1>TOKO BUKU SERBA MURAH</h1>
<h2>Toko kami menyediakan</h2>
<h3>Alat Tulis</h3>
<h4>Pensil, Ballpoint, Penggaris, Dll.</h4>
<h3>Buku-buku Pelajaran</h3>
<h4>Ilmu pasti, Ilmu bumi, Sejarah, Dll.</h4>
<h3>Peralatan Kantor</h3>
<h4>Meja, Kursi, File manager, Dll.</h4>
</body>
</html>
2.1.5. Paragraph <p>
Tag paragraph <p> berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web
Anda. Untuk mengatur perataan paragraf, digunakan atribut: align=[ left | center | right],
sebagai defaultnya adalah left.
2.1.6. Break <br>
Tag break <br> berfungsi untuk memberikan baris baru dalam halaman web Anda.
Walaupun dalam pengetikan pada text editor terdapat perpindahan baris, namun browser
akan membacanya sebagai satu baris apabila tidak terdapat tag <br>.Tag break tidak
memerlukan tag penutup </br>.
2.1.7. Horizontal Rule <hr>
Tag horizontal rule <hr> berfungsi untuk menampilkan garis horisontal di halaman web
Anda. Tag ini sekaligus akan membuat baris baru. Tag <hr> tidak memerlukan elemen
penutup </hr>.
Atribut elemen horizontal rule
align
= [ left | center | right ] (perataan horisontal, default center)
size
= tebal garis, pixel, default 2
width
= lebar garis, pixel atau persen, default 100%)
color
= warna garis batas
noshade (garis solid)
Latihan02.html
<html>
<head>
<title>Latihan-2: Paragraf dan Break</title>
</head>
<body bgcolor=#990066 text=#FFCCFF>
<h1>TOKO BUKU SERBA MURAH</h1>
<hr width=50% align=left>
<h2>Toko kami menyediakan</h2>
<h3>Alat Tulis</h3>
<p>Pensil<br>Ballpoint<br>Penggaris<br>Dll.</p>
<h3>Buku-buku Pelajaran</h3>
<p>Ilmu pasti<br>Ilmu bumi<br>Sejarah<br>Dll.</p>
<h3>Peralatan Kantor</h3>
<p>Meja<br>Kursi<br>File manager<br>Dll.</p>
</body>
</html>
2.1.8. Preformatted <pre>
Tag <pre> digunakan untuk membuat tampilan dokumen pada browser sama dengan
tampilan pada text editor (preformatted). Dengan menggunakan tag <pre> maka tag <p> dan
tag <br> tidak diperlukan lagi.
Latihan03.html
<html>
<head>
<title>Latihan-3: Penggunaan Tag PRE</title>
</head>
<body bgcolor=#FFFFCC>
Tag pre dapat digunakan untuk membuat tampilan seperti ini:
<pre>
Tabel Mahasiswa:
======================================================
|Id | Nama Mahasiswa | No. Mhs
| Jurusan | Sem. |
======================================================
| 1 | Budi S.
| 02.01.2109 | Teknik
| 4
|
| 2 | Yulia Prastica | 02.02.2233 | Manajemen | 4
|
| 3 | Andi Mulyana
| 01.02.1234 | Manajemen | 6
|
| 4 | Leni Susanti
| 00.01.0909 | Teknik
| 8
|
======================================================
Script program:
for($id = 1; $id <= 4; $id++)
{
if($nama != “”)
print($nama);
else
print(“Kosong”);
}
</pre>
</body>
</html>
PEMFORMATAN KARAKTER
Font pada halaman HTML dapat diformat sesuai dengan desain yang Anda tentukan, baik
ukuran, jenis maupun warna dengan menggunakan tag <font>.
Atribut elemen font
size
= ukuran huruf, default 3
color
= warna huruf, default black
face
= nama_huruf
Elemen ragam karakter
<b> teks bold </b>
: menghasilkan teks tebal (bold)
<i> teks italic </i>
: menghasilkan teks miring (italic)
<u> teks underline </u>
: menghasilkan teks bergaris bawah (underline)
Latihan04.html
<html>
<head>
<title>Latihan-4: Format Karakter</title>
</head>
<body bgcolor=#000000 text=#FFFFFF>
<h1 align=center>
<font color=#FFFF00 face=Arial>TOKO BUKU SERBA MURAH</font></h1>
<hr width=360 align=center>
<font size=5><b>Toko kami menyediakan</b></font>
<p align=left><font color=red><b><u>Alat Tulis</u></b></font></p>
<p align=left><i>Pensil<br>Ballpoint<br>Penggaris<br>Dll.</i></p>
<p align=center>
<font color=cyan><b><u>Buku-buku Pelajaran</u></b></font></p>
<p align=center>
<u><i>Ilmu pasti<br>Ilmu bumi<br>Sejarah<br>Dll.</i></u></p>
<p align=right>
<font color=lightgreen><b><u>Peralatan Kantor</u></b></font></p>
<p align=right>
<b><u><i>Meja<br>Kursi<br>File manager<br>Dll.</i></u></b></p>
</body>
</html>
ELEMEN LIST
Properti <li> digunakan untuk menampilkan informasi dalam bentuk daftar (list). Ada dua
jenis daftar yang dikenal di HTML, yaitu list dalam format bullet (unordered list <ul>) dan
dalam bentuk nomor (ordered list <ol>).
Atribut elemen list
Ordered list <ol
type=tipe_list>
type = [ 1 | a | A | i | I ] (tipe penomoran, default 1)
Unordered list <ul
type=tipe_list>
type = [ disc | square | circle ] (tipe bullet, default disc)
Latihan05.html
<html>
<head>
<title>Latihan-5: Menggunakan List</title>
</head>
<body bgcolor=#990066 text=#FFCCFF>
<h1>TOKO BUKU SERBA MURAH</h1>
<hr width=50% align=left>
Toko kami menyediakan
<h2>Alat Tulis</h2>
<ol>
<li>Pensil
<li>Ballpoint
<li>Penggaris
<li>Dll.
</ol>
<h2>Buku-buku Pelajaran</h2>
<ol type=A>
<li>Ilmu pasti
<ul>
<li>Fisika
<li>Kimiya
<li>Biyologi
</ul>
<li>Ilmu bumi
<li>Sejarah
<li>Dll.
</ol>
<h2>Peralatan Kantor</h2>
<ol type=i>
<li>Meja
<li>Kursi
<ul type=square>
<li>Kursi lipat
<li>Kursi plastik
<li>Kursi-kursian
</ul>
<li>File manager
<li>Dll.
</ol>
</body>
</html>