Politeknik Telkom

Pemrograman Web

PEMROGRAMAN WEB

POLITEKNIK TELKOM BANDUNG 2008

i

Politeknik Telkom

Pemrograman Web

PENULIS: SURYATININGSIH, S.T. WARDANI MUHAMAD, S.T.

Dilarang menerbitkan kembali, menyebarluaskan, atau menyimpan baik sebagian maupun seluruh isi buku dalam bentuk dan dengan cara apapun tanpa izin tertulis dari Politeknik Telkom Hak cipta dilindungi undang-undang @ Politeknik Telkom 2008 No part of this document may be copied, reproduced, printed, distributed, modified, removed and amended in any form by any means without prior written authorization of Telkom Polytechnic. Copyright @ 2008 Telkom Polytechnic. All rights reserved

ii

Politeknik Telkom

Pemrograman Web

KATA PENGANTARAssalamualaikum Wr. Wb Segala puji bagi Allah SWT karena dengan karunia-Nya courseware ini dapat diselesaikan. Atas nama Politeknik Telkom, kami sangat menghargai dan ingin menyampaikan terima kasih kepada penulis, penerjemah dan penyunting yang telah memberikan tenaga, pikiran, dan waktu sehingga courseware ini dapat tersusun. Tak ada gading yang tak retak, di dunia ini tidak ada yang sempurna, oleh karena itu kami harapkan para pengguna buku ini dapat memberikan masukan perbaikan demi pengembangan selanjutnya. Semoga courseware ini dapat memberikan manfaat dan membantu seluruh Sivitas Akademika Politeknik Telkom dalam memahami dan mengikuti materi perkuliahan di Politeknik Telkom. Amin. Wassalamualaikum Wr. Wb. Bandung, Desember 2007

Christanto Triwibisono Wakil Direktur I Bidang Akademik & Pengembangan

iii

Politeknik Telkom

Pemrograman Web

DAFTAR ISIKATA PENGANTAR ............................................................................................................. iii DAFTAR ISI .............................................................................................................................. iv DAFTAR GAMBAR ................................................................................................................ ix DAFTAR TABEL...................................................................................................................... xi 1 PENGANTAR PEMROGRAMAN WEB ............................................................ 1-1 1.1 Pendahuluan ............................................................................................................. 1-2 1.2 Sejarah Internet ....................................................................................................... 1-2 1.3 Konsep Dasar Internet ......................................................................................... 1-4 1.3.1 HTTP (Hypertext Transfer Protocol) ...................................................................... 1-4 1.3.2 URL (Uniform Resource Locator) ...................................................................... 1-5 1.3.3 Protokol Transfer ................................................................................................... 1-5 1.3.4 DNS (Domain Names System) ............................................................................ 1-6 1.4 Konsep Dasar World-Wide Web (WWW)..................................................... 1-7 1.5 Istilah-istilah Internet.............................................................................................. 1-8 1.5.1 E-mail (Electronic Mail) ............................................................................................ 1-8 1.5.2 Homepage ................................................................................................................ 1-8 1.6 Tool pada Client/Server ........................................................................................ 1-9 1.6.1 Browser .................................................................................................................... 1-9 1.6.2 Web Server.............................................................................................................. 1-9 1.6.3 Database Server ...................................................................................................... 1-9 2 DESIGN HALAMAN WEB ................................................................................... 2-1 2.1 Pengenalan HTML ................................................................................................... 2-2 2.1.1 HTML Editor............................................................................................................ 2-2 2.1.2 Struktur Dasar HTML............................................................................................ 2-3 2.2 Memformat Dokumen HTML .............................................................................. 2-5 2.2.1 Bagian Body .............................................................................................................. 2-5 2.2.2 Membuat Heading ................................................................................................... 2-5 2.2.3 Memformat Paragraf............................................................................................... 2-7 2.2.4 Line Breaks ............................................................................................................... 2-8 2.2.5 Teks Preformat ..................................................................................................... 2-10 2.2.6 Memformat Bentuk Tulisan ................................................................................ 2-11 2.2.7 Tag Font .................................................................................................................. 2-12 2.2.8 Karakter Spesial .................................................................................................... 2-14 2.2.9 Membuat Garis Horizontal ................................................................................. 2-16 2.3 List............................................................................................................................ 2-18 2.3.1 List Tanpa Urutan (Unordered Lists)................................................................... 2-18 2.3.2 List Berurut (Ordered Lists) .............................................................................. 2-19 2.3.3 Definition Lists ...................................................................................................... 2-22 2.3.4 List Bersarang (Nested Lists) ............................................................................. 2-23 3 LINK DAN GAMBAR............................................................................................ 3-1 3.1 Link ............................................................................................................................ 3-2iv

Politeknik Telkom

Pemrograman Web

3.1.1 Membuat Link antar Dokumen HTML ............................................................... 3-3 3.1.2 Relative Links versus Absolute Pathnames ........................................................ 3-4 3.1.3 Membuat Link ke Bagian Tertentu dalam Dokumen ....................................... 3-6 3.2 Gambar ..................................................................................................................... 3-8 3.2.1 Gambar sebagai Hyperlink .................................................................................. 3-10

.......................................................................................................................... 3-10 4 FORM ........................................................................................................................ 4-1 4.1 Form .......................................................................................................................... 4-2 4.2 Membuat Input Field .............................................................................................. 4-3 5 LAYOUT HALAMAN WEB ................................................................................. 5-1 5.1 Tabel .......................................................................................................................... 5-2 5.1.1 Membuat Tabel........................................................................................................ 5-2 5.1.2 Menambahkan Judul Tabel .................................................................................... 5-3 5.1.3 Memformat Baris .................................................................................................... 5-4 5.1.4 Memformat Kolom ................................................................................................. 5-5 5.1.5 Mengatur CELLSPACING dan CELLPADDING .............................................. 5-7 5.1.6 Lebih Lanjut dengan Tabel .................................................................................... 5-8 5.2 Frame....................................................................................................................... 5-10 5.2.1 Frame Syntax ......................................................................................................... 5-11 5.2.2 Frame Target ......................................................................................................... 5-13 5.2.3 Penggunaan Frame ................................................................................................ 5-13 6 CSS ( Cascading Style Sheet) ................................................................................ 6-1 6.1 Keuntungan Menggunakan CSS ............................................................................ 6-2 6.2 Penempatan CSS ..................................................................................................... 6-2 6.2.1 Inline Style Sheet ..................................................................................................... 6-2 6.2.2 Embedded Style Sheet ........................................................................................... 6-3 6.2.3 Linked Style Sheet................................................................................................... 6-4 6.3 Aturan Penulisan pada CSS ................................................................................... 6-5 6.4 CSS Selector ............................................................................................................ 6-6 6.5 CSS untuk Memanipulasi Font .............................................................................. 6-9 6.6 CSS untuk Memanipulasi Color dan Background ........................................... 6-10 6.7 CSS untuk Memanipulasi List.............................................................................. 6-11 6.8 CSS untuk Memanipulasi Text ........................................................................... 6-11 6.9 CSS untuk Memanipulasi Table .......................................................................... 6-12 7 PEMROGRAMAN JAVASCRIPT ......................................................................... 7-1 7.1 Pengantar Pemrograman Client Side dan Server Side......................................... 7-2 7.2 Pengantar Javascript................................................................................................ 7-3 7.2.1 Struktur Dasar JavaScript ...................................................................................... 7-3 7.2.2 Meletakkan JavaScript dalam Dokumen HTML ................................................ 7-5 7.3 Tipe Data dasar ....................................................................................................... 7-8 7.3.1 Mendeklarasikan Variabel ...................................................................................... 7-8 7.3.2 Jangkauan dari Variabel ........................................................................................ 7-10 7.4 Tipe Data (Literal) ................................................................................................ 7-10 7.4.1 Integer(bilangan bulat).......................................................................................... 7-11v

Politeknik Telkom

Pemrograman Web

7.4.2 7.4.3 7.4.4 7.5 7.5.1 7.5.2 7.6 7.6.1 7.6.2 7.6.3 7.6.4 7.6.5 7.6.6 7.6.7 7.6.8 7.7 7.8 8 8.1 8.1.1 8.1.2 8.2 8.2.1 8.2.2 8.2.3 8.2.4 8.3 8.3.1 8.3.2 9 9.1 9.1.1 9.1.2 9.1.3 9.1.4 9.2 9.2.1 9.2.2 9.2.3 9.2.4 9.2.5 10 10.1 10.1.1

Float (bilangan desimal)........................................................................................ 7-11 String .................................................................................................................... 7-11 Booleans ................................................................................................................. 7-12 Konversi Jenis Variabel ........................................................................................ 7-12 parseInt() ................................................................................................................ 7-12 parseFloat() ............................................................................................................ 7-13 Operator ................................................................................................................ 7-13 Operator Pemberi Nilai (Assignment operator) ............................................ 7-13 Operator Perhitungan (Arithmetic Operator) ............................................... 7-14 Operator Afektasi................................................................................................. 7-15 Operator Inkrementasi........................................................................................ 7-15 Operator Pemanipulasi Bit (Bitwise operator) ............................................... 7-15 Operator Logika (Logical Operator) ................................................................ 7-16 Operator Pembanding (Comparison Operator) ............................................ 7-17 Operator String..................................................................................................... 7-18 Ekspresi ................................................................................................................... 7-18 Derajat Operator ................................................................................................. 7-19 STRUKTUR KONTROL DAN FUNGSI ........................................................... 8-1 Struktur Kontrol ..................................................................................................... 8-2 Percabangan (Kondisional) .................................................................................... 8-2 Pengulangan (Looping) ............................................................................................. 8-4 Fungsi......................................................................................................................... 8-9 Mendefinisikan Fungsi............................................................................................. 8-9 Pemanggilan Fungsi ............................................................................................... 8-11 Parameter dari Fungsi .......................................................................................... 8-13 Menggunakan Fungsi-fungsi Bawaan (Built-in Function) ................................ 8-14 Kejadian (Event) ..................................................................................................... 8-15 Macam-macam Kejadian ...................................................................................... 8-15 Contoh Penggunaan Kejadian ............................................................................. 8-16 OBJECT, FRAME DAN FORM PADA JAVASCRIPT ...................................... 9-1 Penggunaan Objek .................................................................................................. 9-2 Menciptakan Objek Sendiri ................................................................................... 9-2 Objek Standar JavaScript ....................................................................................... 9-4 Metoda ...................................................................................................................... 9-5 Object Browser ...................................................................................................... 9-7 Penanganan Frame dan Form pada JavaScript ................................................... 9-9 Window dan Frame................................................................................................ 9-9 Properti Objek Window ....................................................................................... 9-9 Metode Objek Form ............................................................................................ 9-11 Objek element....................................................................................................... 9-11 Metode element .................................................................................................... 9-12 PENGANTAR PEMROGRAMAN WEB DENGAN PHP ............................. 10-1 Pengenalan Lingkungan Kerja Web Server ...................................................... 10-2 Instalasi Apache Web Server, PHP & MySQL sebagai DBMS Pendukung . 10-2vi

Politeknik Telkom

Pemrograman Web

10.1.2 10.1.3 10.2 10.2.1 10.2.2 10.2.3 10.3 10.4 10.4.1 11 11.1 11.2 11.3 11.4 11.4.1 11.4.2 11.5 12 12.1 12.1.1 12.1.2 12.1.3 13 13.1 13.2 13.3 13.4 13.5 13.6 13.7 13.8 13.9 14 14.1 14.1.1 14.1.2 14.1.3 14.1.4 14.2 14.2.1 14.2.2 14.2.3 14.2.4 14.2.5

Membuat halaman web sederhana dengan PHP ............................................. 10-3 Penggunaan Komentar pada PHP ...................................................................... 10-4 Tipe data ................................................................................................................. 10-4 Array .................................................................................................................... 10-5 Object .................................................................................................................... 10-7 Resource ................................................................................................................. 10-7 Variable PHP .......................................................................................................... 10-8 Operator ................................................................................................................ 10-9 Menggunakan Operator Aritmatika .................................................................. 10-9 STRUKTUR KONTROL DAN FUNGSI (PHP) ............................................. 11-1 Kondisional............................................................................................................. 11-2 Pengulangan ............................................................................................................ 11-2 Membuat Fungsi .................................................................................................... 11-3 Menggunakan fungsi bawaan PHP ...................................................................... 11-4 Math Function ........................................................................................................ 11-4 String Function ...................................................................................................... 11-5 Class ........................................................................................................................ 11-6 MENGOLAH DATA DALAM FORM ............................................................ 12-10 Menyiapkan Form ............................................................................................... 12-11 Menangkap Variabel dari Form ........................................................................ 12-11 Metode Get.......................................................................................................... 12-13 Metode Post......................................................................................................... 12-14 MYSQL DENGAN PHP ...................................................................................... 13-1 Pengenalan MySQL ............................................................................................... 13-2 Tes Koneksi ke server MySQL .......................................................................... 13-2 Membuat Database pada MySQL....................................................................... 13-4 Membuat Tabel pada MySQL ............................................................................. 13-5 Insert Data ............................................................................................................. 13-7 View Data ............................................................................................................... 13-9 Searching Data..................................................................................................... 13-10 Delete Data.......................................................................................................... 13-12 Update Data......................................................................................................... 13-14 KEMANAN DATA ............................................................................................... 14-1 Session..................................................................................................................... 14-2 Memulai Session ..................................................................................................... 14-2 Menyimpan Data Session..................................................................................... 14-2 Mengakses Data Session ...................................................................................... 14-3 Membersihkan dan Menghapus Session ........................................................... 14-5 Cookie..................................................................................................................... 14-8 Memulai cookie ....................................................................................................... 14-8 Menggunakan Cookie ......................................................................................... 14-10 Menguji cookie .................................................................................................... 14-10 Menghapus cookie .............................................................................................. 14-11 Multiple cookies .................................................................................................. 14-12

vii

Politeknik Telkom

Pemrograman Web

14.2.6 Cookies Array. .................................................................................................... 14-13 14.3 SQL Injection ....................................................................................................... 14-14 14.3.1 Pengertian SQL Injection................................................................................... 14-14 14.3.2 Sebab terjadinya SQL Injection ........................................................................ 14-14 14.3.3 Bug SQL Injection berbahaya ?......................................................................... 14-14 14.3.4 Apa saja yang diperlukan untuk melakukan SQL Injection ? ...................... 14-14 14.3.5 Contoh sintaks SQL Injection .......................................................................... 14-14 DAFTAR PUSTAKA

viii

Politeknik Telkom

Pemrograman Web

DAFTAR GAMBARGambar 2-1 Lembar Kerja Microsoft FrontPage................................................................ 2-2 Gambar 2-2 Tampilan MyPage.html ...................................................................................... 2-5 Gambar 2-3 Contoh Heading................................................................................................. 2-6 Gambar 2-4 Contoh Format Paragraf .................................................................................. 2-8 Gambar 2-5 Contoh Penggunaan Line Break dan Center ................................................ 2-9 Gambar 2-6 Contoh Penggunaan Teks Preformat........................................................... 2-10 Gambar 2-7Contoh Menggunakan Tag pada Teks ........................................................... 2-12 Gambar 2-8 Contoh Tag Font dan Atributnya ................................................................. 2-14 Gambar 2-9Contoh Penggunaan Karakter Spesial ........................................................... 2-16 Gambar 2-10 Contoh membuat Garis Horizontal .......................................................... 2-17 Gambar 2-11 Contoh Unordered List ............................................................................... 2-19 Gambar 2-12 Contoh Ordered List ................................................................................... 2-20 Gambar 2-13 Contoh Penomoran dengan Ordered List ............................................... 2-21 Gambar 2-14 Contoh Definition List ................................................................................. 2-22 Gambar 2-15 Contoh Nested List ...................................................................................... 2-23 Gambar 3-1 Tampilan Halaman dok_awal.htm .................................................................. 3-3 Gambar 3-2 Tampilan Halaman dok_tujuan.htm ............................................................... 3-4 Gambar 3-3 Contoh Link untuk Mengirim Email ............................................................... 3-6 Gambar 3-4 Contoh Link ke Bagian Tertentu dalam Dokumen ................................... 3-7 Gambar 3-5 Contoh Penggunaan Atribut pada Tag ............................................. 3-9 Gambar 3-6 Contoh Gambar sebagai Hyperlink.............................................................. 3-10 Gambar 5-1 Contoh Pembuatan Tabel ................................................................................ 5-4 Gambar 5-2 Contoh Memformat Kolom ............................................................................ 5-7 Gambar 5-3 Contoh Pengaturan Cellspacing dan Cellpadding ....................................... 5-8 Gambar 5-4 Contoh Penyisipan Gambar pada Tabel ...................................................... 5-10 Gambar 5-5 Contoh Penggunaan Frame............................................................................ 5-16 Gambar 6-1 Contoh inline CSS ............................................................................................. 6-3 Gambar 6-2 Contoh penggunaan embedded style sheet ................................................. 6-4 Gambar 6-3 Contoh penerapan linked style sheet ............................................................ 6-5 Gambar 6-4 Contoh selector tag .......................................................................................... 6-7 Gambar 6-5 Contoh selector bebas ..................................................................................... 6-8 Gambar 6-6 Contoh selector class ....................................................................................... 6-8 Gambar 6-7 Contoh selector ID ........................................................................................... 6-9 Gambar 7-1 Tampilan Halaman Hello.html ......................................................................... 7-7 Gambar 8-1 Contoh Tampilan Kotak Dialog .................................................................... 8-14 Gambar 9-1 Hirarki objek browser & objek HTML pada JavaScript ............................. 9-7 Gambar 9-2 Contoh Penggunaan Properti Status pada Status Bar .............................. 9-11 Gambar 10-1 Hubungan Client dan Server dalam Web ................................................. 10-2 Gambar 10-2 Komponen Pendukung Aplikasi Web........................................................ 10-2 Gambar 12-1 Hasil ekekusi skrip variabel.php .............................................................. 12-12ix

Politeknik Telkom

Pemrograman Web

Gambar 12-2 Hasil eksekusi skrip Hasil.php ................................................................... 12-12 Gambar 12-3 Hasil eksekusi MetodeGet.html................................................................ 12-13 Gambar 12-4 Hasil eksekusi Proses.php dengan metode get ...................................... 12-14 Gambar 12-5 Hasil Eksekusi Proses.php dengan metode post ................................... 12-15 Gambar 13-1 Hasil eksekusi skrip KoneksiMySQL.php saat terhubung dgn server . 13-3 Gambar 13-2 Hasil eksekusi skrip Database.php ............................................................ 13-4 Gambar 13-3 Hasil eksekusi skrip BuatTabel.php ............................................................ 13-6 Gambar 13-4 hasil eksekusi skrip FormInput.php ............................................................ 13-8 Gambar 13-5 Hasil eksekusi skrip InputMHS.php ............................................................ 13-9 Gambar 13-6 Hasil eksekusi skrip TampilMHS.php ....................................................... 13-10 Gambar 13-7 Hasil eksekusi skrip FormCari.php .......................................................... 13-11 Gambar 13-8 Hasil eksekusi skrip CariMHS.php .......................................................... 13-12 Gambar 13-9 Hasil eksekusi skrip TampilDelete.php ................................................... 13-13 Gambar 13-10 Hasil eksekusi skrip HapusMHS.php ..................................................... 13-14 Gambar 13-11 Hasil eksekusi skrip TampilUpdate.php ................................................ 13-16 Gambar 13-12Hasil eksekusi skrip FormEdit.php .......................................................... 13-16 Gambar 13-13 Hasil eksekusi skrip EditMHS.php .......................................................... 13-17 Gambar 14-1 Mengakses data session-1 ............................................................................ 14-4 Gambar 14-2 Mengakses data session-2 ............................................................................ 14-4 Gambar 14-3 Menghapus data session ............................................................................... 14-6 Gambar 14-4 Membersihkan nilai pada data session ....................................................... 14-8 Gambar 14-5 Menampilkan nilai cookie ........................................................................... 14-11 Gambar 14-6 Multiple cookies........................................................................................... 14-12 Gambar 14-7 Cookies Array.............................................................................................. 14-13 Gambar 14-8 Penerapan SQL Injection ........................................................................... 14-15 Gambar 14-9 SQL injection melalui URL ........................................................................ 14-16

x

Politeknik Telkom

Pemrograman Web

DAFTAR TABELTabel 2-1 Tabel Jenis Bullet .................................................................................................. 2-18 Tabel 2-2 Tipe Penomoran pada Ordered List ................................................................ 2-20 Tabel 3-1 Tabel Atribut dalam Tag .............................................................................. 3-2 Tabel 3-2 Jenis-Jenis Atribut pada Tag ..................................................................... 3-8 Tabel 4-1 Jenis- Jenis Atribut dalam Tag ............................................................ 4-2 Tabel 4-2 Jenis- Jenis Atribut pada Input Field Tipe Text ................................................ 4-3 Tabel 4-3 Jenis-Jenis Atribut pada Input Field Tipe Checkbox ........................................ 4-4 Tabel 4-4 jenis-Jenis Atribut pada Input Field Tipe Radio ................................................ 4-4 Tabel 4-5 Jenis-Jenis Atribut pada Input Field Tipe Button .............................................. 4-4 Tabel 4-6 Jenis-Jenis Atribut pada Input Tipe Textarea .................................................... 4-5 Tabel 4-7 Jenis-Jenis Atribut Pada Input Field Tipe Select ............................................... 4-6 Tabel 5-1 Jenis-Jenis Atribut pada Tag .............................................................. 5-2 Tabel 5-2 Jenis Jenis Atribut pada Tag .................................................................. 5-5 Tabel 5-3 Jenis Jenis Atribut pada Tag .................................................................. 5-5 Tabel 5-4 Jenis Jenis Target Frame .................................................................................. 5-13 Tabel 6-1Satuan ukuran untuk value ..................................................................................... 6-6 Tabel 6-2 Property Font.......................................................................................................... 6-9 Tabel 6-3 Property Background dan Color....................................................................... 6-10 Tabel 6-4 Property List.......................................................................................................... 6-11 Tabel 6-5 Property Text ....................................................................................................... 6-11 Tabel 6-6 Property Table ...................................................................................................... 6-12 Tabel 7-1 Cadangan Kata pada Javascript ............................................................................ 7-9 Tabel 7-2 Karakter khusus JavaScript. ................................................................................ 7-12 Tabel 7-3 Daftar Operator Assignment ............................................................................. 7-14 Tabel 7-4 Jenis Operator Aritmatika .................................................................................. 7-14 Tabel 7-5 Jenis Operator Afektasi....................................................................................... 7-15 Tabel 7-6 Jenis Operator Inkrementasi.............................................................................. 7-15 Tabel 7-7 Jenis Operator Logika ......................................................................................... 7-16 Tabel 7-8 Jenis Operator Pembanding ............................................................................... 7-17 Tabel 7-9 Derajat/Prioritas Operator ................................................................................ 7-19 Tabel 8-1 Penulisan Menggunakan Pernyataan If ................................................................ 8-2 Tabel 8-2 Penggunaan Pernyataan Switch-Case ................................................................. 8-4 Tabel 8-3 Penggunaan Pernyataan for .................................................................................. 8-5 Tabel 8-4 Contoh Script Pengulangan While ...................................................................... 8-6 Tabel 8-5 Contoh Sript Penggunaan Fungsi....................................................................... 8-10 Tabel 8-6 Jenis - Jenis Kejadian pada JavaScript ................................................................ 8-15 Tabel 9-1 Objek Standar JavaScript ...................................................................................... 9-5 Tabel 9-2 Macam-macam Objek Browser ........................................................................... 9-8 Tabel 9-3 Macam-macam Metoda Objek Window............................................................ 9-8 Tabel 9-4 Properti dari Objek Element ............................................................................. 9-11xi

Politeknik Telkom

Pemrograman Web

Tabel 9-5 Metode-Metode dari Elemen Objek-Objek .................................................... 9-12 Tabel 10-1 Jenis-Jenis Tag PHP ............................................................................................ 10-3 Tabel 10-2 Jenis-Jenis Komentar pada PHP ....................................................................... 10-4 Tabel 10-3 PHP Mendukung 8 Tipe Data Primitif ............................................................ 10-4 Tabel 10-4 Macam-macam Operator Aritmatika ............................................................. 10-9 Tabel 10-5 Macam-macam Operator Logika .................................................................... 10-9 Tabel 11-1 Statement Kondisional pada PHP ................................................................... 11-2 Tabel 11-2 Statement Kondisional pada PHP ................................................................... 11-3 Tabel 13-1 Tipe Data pada MySQL ..................................................................................... 13-5 Tabel 14-1 Jenis Argumen pada Cookie............................................................................. 14-9

xii

Politeknik Telkom

Pemrograman Web

1 PENGANTAR PEMROGRAMAN WEB

Overview

Dalam era teknologi informasi dan komunikasi sekarang ini setiap orang sangat membutuhkan alat komunikasi yang dapat menjangkau berbagai informasi di belahan dunia manapun. Dengan kehadiran internet yang merupakan sebuah sistem komunikasi global yang menghubungkan komputerkomputer dan jaringan komputer di seluruh dunia, maka segala informasi yang diperlukan dapat dicari dengan mudah. Setiap orang dari berbagai latar belakang yang berbeda dapat bertukar informasi tanpa perlu berinteraksi secara fisik. Internet ini dimanfaatkan oleh perusahaan, pemerintahan maupun perorangan untuk membangun aplikasi yang disebut web site. Web site ini dipergunakan salah satunya untuk tujuan memperkenalkan profil perusahaan atau pemerintahan. Melalui web site tertentu, kita dapat berkirim email kepada seseorang di luar negeri tanpa harus repot menulis di kertas, memasukkan ke dalam amplop dan mengirimnya lewat kantor pos.

Tujuan

1. 2. 3. 4. 5. 6.

Mengenal sejarah internet Memahami dasar-dasar internet Mengenal istilah-istilah internet Memahami konsep dasar pada web Memahami pemodelan Client/Server Mengenal Client/Server tools1-1

Pengantar Pemrograman Web

Politeknik Telkom

Pemrograman Web

1.1

Pendahuluan

Komputer pertama kali dibuat hanyalah sebagai mesin yang berdiri sendiri (stand alone). Untuk melakukan perpindahan informasi dari satu komputer ke komputer lainnya dibutuhkan tape, disk, disket dan lain-lain. Jalan untuk berbagi informasi tersebut, dibuatlah koneksi. LAN, atau disebut juga Local Area Network, merupakan jaringan komputer terkecil yang menghubungkan 2 atau lebih komputer untuk berbagi informasi. Dengan konsep koneksi jaringan untuk membentuk jaringan dari jaringan terciptalah internet. Internet itu sendiri merupakan singkatan dari Interconnected Network of Networks.

1.2

Sejarah Internet

Internet bukanlah satu fenomena baru. ARPAnet (US Defense Advanced Research Projects Agency) atau Departemen Pertahanan Amerika pada tahun 1969 membuat jaringan komputer yang tersebar untuk menghindarkan terjadinya informasi terpusat, yang apabila terjadi perang dapat mudah dihancurkan. Jadi bila satu bagian dari sambungan network terganggu dari serangan musuh, jalur yang melalui sambungan itu secara otomatis dipindahkan ke sambungan lainnya. Setelah itu Internet digunakan oleh kalangan akademis (UCLA) untuk keperluan penelitian dan pengembangan teknologi. Dan baru setelah itu Pemerintah Amerika Serikat memberikan ijin ke arah komersial pada awal tahun 1990. 1957 1959 1967 1969 1970 1972 1973 1974 1976 Ringkasan Sejarah : : Advanced Research Projects Agency (ARPA) dibentuk oleh Departement of Defence (DoD) USA. : Len Kleinrock menulis paper tentang packet switching. : Disain awal dari ARPANET diterbitkan. : DoD menggelar pengembangan ARPANET : ARPANET mulai menggunakan Network Control Protocol : InterNetworking Working Group (INWG) dibentuk untuk mempromosikan standar yang sudah disepakati bersama. Spesifikasi dari telnet, RFC 318, diusulkan. : Ide ethernet dijabarkan dalam thesis PhD dari Bob Metcalfe. Spesifikasi untuk File Transfer, RFC 454, diusulkan. : Disain dari TCP/IP dijabarkan secara rinci oleh Vint Cerf dan Bob Kahn dalam "A Protocol for Packet Network Intercommunication". : UNIX-to-UNIX Copy (UUCP) dikembangan oleh Bell Labs.1-2

Pengantar Pemrograman Web

Politeknik Telkom

Pemrograman Web

1981 1982 1983 1984 1986 1987 1988

: : : : : : :

1989 1990

: :

1991

:

1992

:

1993

:

BITNET mulai beroperasi. TCP/IP menjadi protokol untuk ARPANET dan ini dispesifikasikan oleh DoD. BSD UNIX release 4.2 menggunakan TCP/IP. Jumlah Internet hosts melewati batas 1000 host. Domain Name Service (DNS) mulai lahir. NSFNET dilahirkan dengan kecepatan backbone 56Kbps. Jumlah Internet hosts melewati batas 10.000. UUNET didirikan untuk memberikan akses komersial untuk Usenet dan UUCP. Sebuah "Internet Worm" berhasil melumpuhkan Internet, sekitar 6000 host terkena akibatnya. NSFNET meningkatkan kecepatan backbone menjadi 1,544 Mbps (T1). Jumlah Internet hosts melewati batas 100.000. Tim Berners-Lee dari CERN mensirkulasikan porposalnya yang berjudul "Information Management: A Proposal". DoD menghentikan ARPANET. Tim Berners-Lee mensirkulasikan proposal World Wide Web (WWW). Dikembangkan sebuat program WWW, sebuah WYSIWYG browser dan editor. Brewster Kahle (Thinking Machines) mengembangan Wide Area Information System (WAIS). Paul Lindner dan Mark McCahill (University of Minnesota) meluncurkan Gopher. Phillip Zimmerman meluncurkan Pretty Good Privacy (PGP). CERN meluncurkan library WWW. Jumlah Internet hosts melampaui 1.000.000. University of Nevada mengeluarkan sistem Veronica. Sebuah WWW browser yang bernama Viola diluncurkan oleh Pei Wei dan didistribusikan bersama CERN WWW. NSF membuat InterNIC untuk menjalankan Internet servis seperti pendaftaran domain. Versi pertama dari Mosaic (untuk X Window) yang dikembangkan oleh Marc Andreesen dikeluarkan oleh NCSA. White House online. National Information Infrastructure Act lolos dan pemerintah Amerika Serikat mulai lebih serius dalam bidang Web.1-3

Pengantar Pemrograman Web

Politeknik Telkom

Pemrograman Web

1994

:

1995

:

Pizza hut online, merupakan contoh pertama dari aplikasi komerisal Internet. Spam mail menjadi kasus besar setelah sebuah lembaga hukum yang bernama Canter & Siegel menyebarkan mail ke seluruh dunia tentang servis untuk mendapatkan "green card". First Virtual menjalankan "CyberBank" yang pertama. Compuserve, America Online, dan Prodiy mulai memberikan servis akses ke Internet. Perusahaan Marc Andreesen, Netscape Communication Corporation, menjadi publik dan menjadi nomor 3 tertinggi untuk harga Initial Public Offering (IPO) share di NASDAQ. NFS tidak lagi menggratiskan pendaftaran domain. Domain mulai membayar $50/tahun.

1.3

Konsep Dasar Internet

Internet yang berasal dari kepanjangan Interconnected Network adalah sebuah sistem komunikasi global yang menghubungkan computer - komputer dan jaringan - jaringan komputer di seluruh dunia. Setiap komputer dan jaringan terhubung secara langsung maupun tidak langsung ke beberapa jalur utama yang disebut internet backbone dan dibedakan satu dengan yang lainnya menggunakan unique name yang biasa disebut dengan alamat IP 32 bit. Contoh: 202.155.4.230. Komputer dan jaringan dengan berbagai platform yang mempunyai perbedaan dan ciri khas masing - masing (Unix, Linux, Windows, Mac, dan lain-lain) bertukar informasi dengan sebuah protokol standar yang dikenal dengan nama TCP/IP (Transmission Control Protocol / Internet Protocol). TCP/IP tersusun atas 4 layer ( network access, internet, host-to-host transport dan application ) yang memiliki protokolnya sendiri-sendiri. Bila anda mempunyai komputer minimal prosessor 486, Windows 95, Modem, dan line telepon, maka anda bisa bergabung dengan ribuan juta komputer lain di seluruh dunia dan mengakses harta karun informasi di internet.

1.3.1

HTTP (Hypertext Transfer Protocol)

HTTP merupakan suatu protokol yang menentukan aturan yang perlu diikuti oleh Web Browser dalam meminta atau mengambil suatu dokumen dan oleh Web Server dalam menyediakan dokumen yang diminta web

Pengantar Pemrograman Web

1-4

Politeknik Telkom

Pemrograman Web

browser. Protokol ini merupakan protokol standar yang digunakan untuk mengakses dokumen HTML.

1.3.2

URL (Uniform Resource Locator)

URL adalah suatu sarana yang digunakan untuk menentukan lokasi informasi pada suatu Web Server. URL diibaratkan sebagai suatu alamat, dimana alamat tersebut terdiri dari: Protokol yang digunakan oleh suatu browser untuk mengambil informasi. Nama dari komputer dimana informasi tersebut tersedia. Path serta nama file dari suatu informasi. Format umum URL : Protokol_transfer://nama_host/path/nama_file

1.3.3

Protokol Transfer

Protokol transfer adalah suatu protokol yang digunakan untuk pengiriman informasi di internet. HTTP adalah salah satu protokol transfer yang merupakan standar untuk suatu dokumen web. Selain protokol HTTP, dalam internet juga dikenal beberapa protokol lain diantaranya adalah : FTP (File Transfer Protocol), protokol ini untuk mengunduh (download) dan mengunggah (upload) suatu file di FTP server. Dengan hal ini kita dapat bertukar file dengan cepat. Pada saat ini banyak program atau software yang bebas untuk di download dari manapun di Internet. Telnet, protokol yang digunakan untuk login ke suatu server komputer. Telnet memungkinkan kita dapat mengakses komputer yang letaknya jauh dari komputer kita. Dengan telnet kita bisa mengetikkan unix command dari satu komputer ke komputer yang lain, dengan kata lain kita bisa melakukan akses jarak jauh (remote access). Untuk menggunakan Telnet kita harus mempunyai IP address atau domain name, dan mempunyai hak untuk mengakses yaitu dengan login name dan password. SSH (Secure Shell) didesain untuk menggantikan telnet dengan kelebihan dalam keamanan, beroperasi melalui TCP dan menyediakan autentifikasi dan komunikasi yang aman.Pengantar Pemrograman Web 1-5

Politeknik Telkom

Pemrograman Web

Gopher, protokol ini untuk mengakses server gopher yang menyediakan informasi dengan mengggunakan suatu sistem menu atau melalui hubungan ke telnet News (Network News Transfer Protocol , NNTP), protokol ini digunakan untuk mendistribusikan berita di Usenet. Usenet adalah suatu sistem yang dirancang sebagai forum diskusi dengan berdasarkan pada topik-topik yang disebut newsgroup. Contoh : ftp://sgi2.mi.politekniktelkom.ac.id/multimedia : Browser anda bertindak sebagai cliet FTP dan mengakses direktori pub pada server sgi2.mi.politekniktelkom.ac.id gopher://wiretrap.spies.com : browser anda bertindak sebagai client gopher pada wiretrap.spies.com news:comp.infosystems.www.announce : Browser anda bertindak sebagai client Usenet dan mengakses artikel-artikel pada newsgroup comp.infosystems.www.announce

1.3.4

DNS (Domain Names System)

Komputer-komputer di internet menggunakan suatu format penamaan standar untuk mempermudah pengelolaan server komputer di internet yang berkembang dengan cepat. Sistem penamaan server komputer ini adalah Domain Names System (DNS). DNS membuat suatu tingkat-tingkat domain, yang merupakan kelompok komputer-komputer yang terhubung ke internet. Tabel 1.1 Nama-nama Domain di Indonesia Nama Domain Com edu, ac.id gov, go.id int Mil net org Jenis Organisasi Organisasi komersial Lembaga Pendidikan Lembaga Pemerintah Lembaga Internasional Organisasi militer Provider internet Organisasi umum

Pengantar Pemrograman Web

1-6

Politeknik Telkom

Pemrograman Web

1.4

Konsep Dasar World-Wide Web (WWW)

World Wide Web merupakan suatu kumpulan informasi pada beberapa server komputer yang terhubung satu sama lain dalam jaringan internet. Informasi-informasi dalam web mempunyai link-link yang menghubungkan informasi tersebut ke informasi lain di dalam jaringan internet. Sistem yang menghubungkan informasi-informasi melalui link ini disebut dengan nama hypertext. World Wide Web menyediakan pengguna Internet akses ke berbagai macam media yang dikemas dengan sederhana. WWW adalah aplikasi yang paling menarik di internet, penting dan banyak digunakan. Dengan WWW ini kita dapat dengan mudahnya mendapatkan informasi, tidak hanya teks, gambar bahkan multimedia. Informasi yang diletakkan di WWW disebut homepage ataupun situs (sites) yang memiliki alamatnya masing-masing. Untuk melihat isinya dibutuhkan suatu web browser, misalkan Internet Explorer, Netscape Navigator, Opera, Mozilla, dan lain-lain. Semakin berkembangnya World Wide Web, istilah hypertext menjadi hypermedia, dimana link-link penghubung antar informasi bukan lagi berupa suatu teks, tetapi juga bisa berupa suatu file multimedia seperti gambar, suara dan video. Bekerja pada web mencakup 2 hal penting, yaitu : Software Web Browser Software Web Server Kedua software ini bekerja seperti sebuah sistem client-server. Web browser bertindak sebagai client yang memungkinkan anda untuk menginterpretasikan dan melihat informasi pada web, sedangkan web server yang bertindak sebagai server memungkinkan anda untuk menerima suatu informasi yang diminta oleh browser. Jika suatu permintaan (request) akan suatu informasi datang, web server mencari file yang diminta tersebut dan kemudian mengirimkan ke browser yang memintanya. Perhatikan ilustrasi di bawah ini :

Pengantar Pemrograman Web

1-7

Politeknik Telkom

Pemrograman Web

Request

Response

Web Browser

Web Server

Gambar 1.1 Hubungan Client dan Server dalam Web

1.5 1.5.1

Istilah-istilah Internet E-mail (Electronic Mail)

E-mail merupakan salah satu aplikasi atau fasilitas yang paling banyak digunakan di Internet, mempunyai konsep yang sama dengan surat dalam bentuk kertas hanya saja untuk mengirimkannya tidak diperlukan layanan kantor pos karena e-mail adalah surat berbentuk elektronik yang dikirimkan melalui internet. E-mail merupakan alat komunikasi yang murah dan cepat. Seperti halnya konsep surat melalui pos, email memiliki alamat yang bisa dituju secara elektronik, contoh alamat email adalah emailku@yahoo.com. Dengan email ini kita tidak hanya bisa mengirimkan teks saja tapi juga gambar, data, dan lain-lain. Dalam pengirimannya kita bisa mengirimkan ke lebih dari satu orang sekaligus.

1.5.2

Homepage

Setiap perusahaan atau pribadi yang memiliki informasi di WWW memerlukan suatu alamat (URL) khusus yang disebut web site. Setiap informasi ini disimpan dalam suatu file yang berbeda-beda yang disebut Web Page. Di dalam web page inilah tersimpan berbagai informasi dan link yang menghubungkan suatu informasi ke informasi lainnnya, baik itu di dalam suatu web page yang sama ataupun dalam web page lain pada web site yang berbeda. Sebelum mengakses berbagai macam informasi pada suatu web site, anda akan menemui suatu web page pembuka yang disebut sebagai home page. Home page ini merupakan halaman pertama dari suatu web site yang biasanya berisi tentang apa dan siapa dari perusahaan atau organisasi pemilik web site tersebut.Pengantar Pemrograman Web 1-8

Politeknik Telkom

Pemrograman Web

1.6 1.6.1

Tool pada Client/Server Browser

Browser merupakan tool yang berada di sisi client. Untuk mengakses web, anda memerlukan suatu program yang disebut Web Browser. Browser merupakan suatu program yang dirancang untuk mengambil informasiinformasi dari suatu server komputer pada jaringan internet. Informasiinformasi ini biasanya dikemas dalam page-page, dimana setiap page bisa memiliki beberapa link yang menghubungkan web page tersebut ke sumber informasi lainnya. Pertama kali munculnya www, browser hanya mampu menampilkan inforamsi dalam bentuk teks. Lynx merupakan salah satu contoh browser teks. Tahun 1993, NCSA membuat browser Mosaic yang memiliki kemampuan lebih baik dan dapat menampilkan gambar. Sejak kemunculan NCSA Mosaic, www mulai berkembang dengan pesat.Perkembangan ini menjadi jauh lebih cepat lagi setelah muncul browser Netscape Navigator dari Netscape Communication. Netscape memiliki kecepatan jauh lebih bagus daripada Mosaic dalam menampilkan informasi baik teks maupun gambar. Kemudian dunia browser semakin semarak setelah Microsoft mengeluarkan browser Internet Explorer. Baik Netscape dan IE telah mendukung penggunaan berbagai jenis objek multimedia serta VRML dan Java.

1.6.2

Web Server

Web Server merupakan tool yang berada di sisi server yang akan memproses permintaan data dari web browser. Ada beberapa jenis web server yang banyak digunakan sekarang ini, antara lain : Internet Information Server 5.0 (IIS 5.0) yang berjalan pada Windows 2000, Personal Web Server 4.0 (PWS 4.0) yang berjalan pada Windows 98, Apache Web Server (http://httpd.apache.org) yang merupakan web server gratis yang mendukung PHP.

1.6.3

Database Server

Database Server merupakan tool yang berada di sisi server yang merupakan perangkat lunak sistem manajemen database (Database Management System DBMS), berfungsi untuk pengelolaan data pada sebuah web site. Beberapa DBMS yang dapat digunakan untuk membangun database antara lain : Oracle, MySQL, Ms. SQL Server dan Ms. Access.Pengantar Pemrograman Web 1-9

Politeknik Telkom

Pemrograman Web

Rangkuman1. 2. Internet adalah sebuah sistem komunikasi global yang menghubungkan komputer-komputer dan jaringan-jaringan komputer di seluruh dunia. World Wide Web menyediakan pengguna Internet akses ke berbagai macam media yang dikemas dengan sederhana. WWW adalah aplikasi yang paling menarik di internet, penting dan banyak digunakan. Dengan WWW ini kita dapat dengan mudah mendapatkan informasi, tidak hanya teks, gambar bahkan multimedia. Sistem kerja web seperti sebuah sistem pemodelan client/server, yang mencakup software web browser (contohnya Internet Explorer) dan software web server ( contohnya Apache). Melalui aplikasi e-mail, setiap orang dapat saling berkirim surat elektronik tanpa perlu menulis dalam kertas dan mengirimkannya ke kantor pos. Untuk mempermudah pengelolaan, server komputer di internet mengikuti sistem penamaan yang disebut Domain Names System (DNS), contoh : www.politekniktelkom.ac.id

3. 4. 5.

Latihan

1. 2.

Jelaskan pengertian dari Internet! Siapakah yang pertama kali menerapkan penggunaan internet? Dan digunakan untuk keperluan apakah? 3. Apa yang Anda ketahui mengenai World Wide Web! 4. Gambarkan hubungan client dan server dalam sebuah web! 5. Jelaskan sistem client-server pada aplikasi web! 6. Apa yang dimaksud dengan E-mail? 7. Jelaskan minimal dua macam Protokol Transfer yang Anda ketahui! 8. Jelaskan fungsi DNS dan sebutkan beberapa nama domain yang ada di Indonesia! 9. Apa yang dimaksud dengan web browser? 10. Apa yang dimaksud dengan web server?Pengantar Pemrograman Web 1-10

Politeknik Telkom

Pemrograman Web

2 DESIGN HALAMAN WEB

Overview

Untuk membangun sebuah web site, diperlukan modal dasar berupa bahasa yaitu Hypertext Markup Language(HTML). Setiap tampilan pada halaman web dapat diformat menggunakan tag HTML sesuai dengan kebutuhan pengguna.

Tujuan

1. 2. 3. 4. 5.

Mengenal dasar-dasar HTML Membuat dokumen HTML dan melakukan pemformatan dokumen yang sederhana. Membuat teks preformat dan karakter spesial Membuat list pada dokumen HTML Membuat list bersarang pada dokumen HTML

Design Halaman Web

2-1

Politeknik Telkom

Pemrograman Web

2.1

Pengenalan HTML

HyperText Markup Language adalah bahasa yang digunakan untuk membuat suatu situs web atau homepage. Setiap dokumen dalam Web ditulis dalam format HTML. Semua format dokumen, hyperlink yang dapat di klik, gambar, dokumen multimedia, form yang dapat di isi dan sebagainya didasarkan atas HTML.

2.1.1

HTML Editor

Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor biasa seperti notepad. Namun sekarang ini di pasaran terdapat banyak sekali HTML editor (software yang digunakan untuk membuat atau mendesain halaman web), contohnya Macromedia Dreamweaver, Adobe GoLive, Microsoft FrontPage.

Gambar 2-1 Lembar Kerja Microsoft FrontPage

Design Halaman Web

2-2

Politeknik Telkom

Pemrograman Web

Kemudahan Microsoft FrontPage : Pengeditan What You See Is What You Get (WYSIWYG) Menambahkan, menghapus dan mengubah teks. Menambahkan paragraf dan gaya karakter ke dalam teks. Mengubah huruf, ukuran dan warnanya. Memasukkan tabel, gambar, garis horisontal dan hyperlink dalam dokumen web yang anda buat. Drag-and-drop hyperlink dan gambar dari dokumen yang lain.

2.1.2

Struktur Dasar HTML

Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa yang mengandung kode penanda yang disebut tag HTML yang digunakan untuk mengatur format tampilan suatu dokumen. Kode ini diselipkan ke dalam teks HTML, berfungsi untuk mengontrol format dan layout dalam dokumen, menunjuk ke suatu hyperlink, dan lain-lain. Tag HTML ini menggunakan simbol khusus untuk menandakan suatu kode instruksi, simbol ini adalah kurung siku, < dan >. Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat case-sensitif artinya sama dengan ataupun . Pada umumnya banyak dari pemakai HTML menggunakan huruf besar dalam penulisan tag HTML sehingga menyebabkan kode-kode ini terlihat jelas, sehingga mempermudah proses pembacaan. Semua dokumen HTML terdiri dari dua bagian logikal, yaitu: bagian kepala (head). Secara umum, bagian kepala dari dokumen HTML berisi informasi umum mengenai dokumen dan bagian badan (body) yaitu berisi dokumen yang sebenarnya. Setiap dokumen HTML harus dimulai dan diakhiri dengan tag yang mendeklarasikan suatu dokumen sebagai dokumen HTML. Struktur dasarnya adalah sebagai berikut: Judul Form/Caption ISI WEB Design Halaman Web 2-3

Politeknik Telkom

Pemrograman Web

Keterangan: .. Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML. .. Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META. .. Sebagai titel atau judul halaman/form, digunakan sebagai identifikasi dokumen. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar). .. Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin. Contoh dari penggunaan tag seperti ini:

Judul dari dokumen HTML My Homepage

Untuk mencoba script di atas, anda bisa membuka aplikasi notepad ataupun program teks editor yang lain. Tuliskan script di atas dan simpan dengan ekstensi *.html atau *.htm, misalkan MyPage.html. Bukalah dokumen html yang telah anda buat tadi dengan menggunakan web browser, misalkan Internet Explorer. Maka akan terlihat tampilan seperti di bawah ini.

Design Halaman Web

2-4

Politeknik Telkom

Pemrograman Web

Gambar 2-2 Tampilan MyPage.html

2.2 2.2.1

Memformat Dokumen HTML Bagian Body

Pada bagian tag digunakan untuk mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin. 1) Background : digunakan untuk mengatur latar belakang dengan gambar/image. 2) Bgcolor : digunakan untuk mengatur warna latar belakang dokumen, dengan warna putih sebagai default-nya. 3) Teks : digunakan untuk mengatur warna teks dokumen, dengan warna hitam sebagai warna default. 4) Link : Untuk mengatur warna link dokumen dengan warna biru sebagai warna default 5) Vlink : Untuk mengatur warna visited link dokumen dengan default ungu 6) Alink : digunakan untuk mengatur warna active link dokumen dengan default merah.

2.2.2

Membuat Heading

Heading digunakan untuk mengatur ukuran huruf pada header. Tag heading .., "n" mempunyai nilai antara 1 - 6 atau antara sampai , dengan merupakan ukuran terbesar dan merupakan ukuran terkecil.

Design Halaman Web

2-5

Politeknik Telkom

Pemrograman Web

Dalam banyak dokumen, heading pertama digunakan sebagai judul tulisan. Heading ini mempunyai atribut untuk menentukan letak tulisan, di kiri, kanan ataupun tengah. Jika atribut ini tidak ditambahkan, maka heading akan otomatis rata kiri. Contoh penggunaannya : Belajar membuat HTML yuk My Homepage Heading tingkat 1 Heading tingkat 2 Heading tingkat 3 Heading tingkat 4 Heading tingkat 5 Heading tingkat 6 Heading 1 rata kiri Heading 2 rata tengah Heading 3 rata kanan

Tampilan dari script diatas dapat dilihat pada gambar berikut ini :

Gambar 2-3 Contoh HeadingDesign Halaman Web 2-6

Politeknik Telkom

Pemrograman Web

2.2.3

Memformat Paragraf

Dalam membuat paragraf, ada beberapa hal yang harus diperhatikan. Dengan adanya perbedaan browser web yang berjalan pada komputer yang berbeda, memiliki kemampuan untuk menampilkan grafis yang berbeda sehingga menyebabkan dokumen yang ditampilkan juga ikut berbeda-beda. Seperti pada pembuatan paragraf pada HTML ini akan berbeda letaknya untuk browser web yang memiliki ukuran satu halaman penuh dan yang tidak. Untuk membuat paragraf ini digunakan tag , hal yang perlu dicatat adalah tag ini akan mengabaikan spasi dan pindah baris. Dalam pembuatan paragraf pun, kita bisa menggunakan atribut ALIGN untuk mengatur letak paragraf, rata kiri, tengah ataupun rata kanan. Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY. Contoh penggunaan paragraf dapat dilihat pada script berikut ini. Belajar membuat HTML yuk My Homepage Paragraf rata kiri Lajunya perkembangan Teknologi Informasi semakin meningkatkan penggunaan sumber daya yang bersifat digital. Sejak kemunculan internet, merupakan suatu titik terang bukan hanya bagi masyarakat IT, tetapi sekarang sudah berdampak ke seluruh lapisan masyarakat. Paragraf rata tengah Lajunya perkembangan Teknologi Informasi semakin meningkatkan penggunaan sumber daya yang bersifat digital. Sejak kemunculan internet, merupakan suatu titik terang bukan hanya bagi masyarakat IT, tetapi sekarang sudah berdampak ke seluruh lapisan masyarakat.

Design Halaman Web

2-7

Politeknik Telkom

Pemrograman Web

Paragraf rata kanan Lajunya perkembangan Teknologi Informasi semakin meningkatkan penggunaan sumber daya yang bersifat digital. Sejak kemunculan internet, merupakan suatu titik terang bukan hanya bagi masyarakat IT, tetapi sekarang sudah berdampak ke seluruh lapisan masyarakat.

Tampilan di browser akan seperti ini.

Gambar 2-4 Contoh Format Paragraf

2.2.4

Line Breaks

Line breaks digunakan untuk menambahkan baris baru pada teks dalam dokumen HTML dengan cara menambahkan tag
. digunakan untuk membuat teks dalam posisi di tengah. Setiap teks yangDesign Halaman Web 2-8

Politeknik Telkom

Pemrograman Web

terdapat diantara dan akan ditempatkan di tengahtengah margin kiri dan kanan. Contoh script penggunaan Line Breaks dan : Belajar membuat HTML yuk My Homepage Penggunaan Line Breaks Contoh penggunaan line break
baris baru
sudaaaahhh

contoh teks ditengah

Hasilnya :

Gambar 2-5 Contoh Penggunaan Line Break dan Center

Design Halaman Web

2-9

Politeknik Telkom

Pemrograman Web

2.2.5

Teks Preformat

Berbeda dengan pembuatan paragraf yang mengabaikan setiap tambahan spasi, tag ini akan membuat spasi ikut diperhitungkan. Dengan kata lain tag akan menampilkan teks pada halaman web sesuai dengan yang kita tuliskan dan dengan tag ini data tabular dapat dibuat. Biasanya spasi dan tab ini digunakan untuk membuat baris dan kolom, yang membutuhkan banyak spasi untuk membuat urutan baris dan kolom. Berikut ini contoh penggunaan dari tag . Belajar membuat HTML yuk My Homepage Penggunaan Teks Preformat Contoh dibawah adalah penggunaan tag Preformat membuat tabel
Tabel data mahasiswa ---------------------------------Nama Umur ---------------------------------Adi Sasongko 19 Budi Swarga 20 Chev Sampurna 18 Della Rossa 19 ---------------------------------

untuk

Hasil :

Gambar 2-6 Contoh Penggunaan Teks PreformatDesign Halaman Web 2-10

Politeknik Telkom

Pemrograman Web

2.2.6

Memformat Bentuk Tulisan

Untuk pengaturan teks, terdapat beberapa tag yang dapat digunakan. Cara menggunakannya adalah awali dengan , terus masukkan tulisan yang akan diatur dan akhiri dengan . Tag-tag yang dapat digunakan untuk mengatur teks adalah : Bold text Italic text Underscore Typewriter Strikeout - draws a line through the text Text berkedip (lebih baik jangan digunakan) Digunakan untuk quoting text Ukuran teks akan lebih besar satu ukuran Ukuran teks akan lebih kecil satu ukuran Membuat tekssuperscript membuat tekssub script Abbreviations Untuk akronim Digunakan untuk indexing Membuat short inline quotation Membuat variable name, selalu dalam italics.Contoh menggunakan tag untuk teks ini bisa dilihat dari script di bawah ini. Belajar membuat HTML yuk My Homepage Contoh menggunakan Tag pada Teks

tag untuk menebalkan huruf

tag untuk membuat huruf miring

tag untuk membuat hurufsuperscript

tag untuk membuat hurufsubscript

untuk membuat huruf yang digaris bawahi

untuk membuat huruf yang lebih BESAR

untuk membuat huruf yang lebih kecil

Design Halaman Web 2-11Politeknik TelkomPemrograman WebTampilan dari Script di atas akan terlihat seperti berikut ini.Gambar 2-7 Contoh Menggunakan Tag pada Teks2.2.7Tag FontTag digunakan untuk mengatur huruf dokumen HTML. Tag FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR.Design Halaman Web 2-12Politeknik TelkomPemrograman WebSIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar. FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic. COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya). Contoh menggunakan tag font ini bisa dilihat dari script di bawah ini. ::: Ukuran, Jenis dan Warna Font::: Ukuran font 1
Ukuran font 2
Ukuran font 3
Ukuran font 4
Ukuran font 5
Ukuran font 6
Ukuran font 7
Hasilnya :Design Halaman Web2-13Politeknik TelkomPemrograman WebGambar 2-8 Contoh Tag Font dan Atributnya2.2.8Karakter SpesialTerdapat empat karakter yaitu tanda lebih kecil (), tanda dan (&) dan kutip ganda (), yang mempunyai arti khusus dan digunakan sebagai kode dalam HTML sehingga tidak dapat digunakan secara langsung sebagai teks dalam dokumen HTML kita. Untuk menggunakan karakter-karakter di atas ke dalam dokumen HTML, diperlukan suatu karakter spesial untuk menggantikan karakter-karakter di atas. Karakter spesial tersebut antara lain : < karakter spesial untuk < > karakter spesial untuk > & karakter spesial untuk & " karakter spesial untuk " @ karakter spesial untuk @ karakter spesial untuk karakter spesial untuk karakter spesial untuk karakter spesial untuk karakter spesial untuk spasi yang tak dapat dipecahDesign Halaman Web 2-14Politeknik TelkomPemrograman WebDibawah ini script untuk memperlihatkan contoh penggunaan karakter spesial dalam dokumen HTML : Belajar membuat HTML yuk My Homepage Penggunaan Karakter Spesial Berikut ini contoh penggunaan karakter spesial
Sekarang kita mencoba menggunakan tanda lebih kecil seperti ini < dan sekarang kita akan coba menggunakan tanda lebih besar seperti ini >. Bagaimana? dapat terlihat kan? yang akan ditampilkan saat ini adalah tanda dan &. tanda kutip ganda " dan tanda @ seperti yang sering digunakan dalam alamat email. Pernah lihat tanda atau tanda atau tanda atau tanda . Pasti salah satunya sudah pernah lihat kan? &nbsp ;Terlihat perbedaannya tidak? ya, saya tambahkan beberapa spasi di kalimatnya. Hasilnya akan terlihat seperti gambar di bawah ini.Design Halaman Web2-15Politeknik TelkomPemrograman WebGambar 2-9 Contoh Penggunaan Karakter Spesial2.2.9Membuat Garis HorizontalTag digunakan untuk membuat garis horizontal pada jendela browser. Defaultnya adalah membuat garis yang solid. Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE. digunakan untuk membuat garis yang tidak ada efek baying-bayang 3-D. untuk menentukan panjang garis dalam satuan pixel, default 2. untuk menentukan ketebalan garis. untuk membuat garis dengan letak sebelah kiri (left), kanan (right) atau tengah (center-default). Contoh pembuatan garis horizontal : Belajar membuat HTML yuk My Homepage Membuat Garis Horizontal Design Halaman Web 2-16Politeknik TelkomPemrograman WebGaris horizontal biasa (Shade dan solid) Garis horizontal No Shade Garis horizontal dengan ukuran 10 (berongga, bukan solid) Garis horizontal dengan Lebar 100 Garis horizontal dengan lebar 50% dari lebar dokumen Garis horizontal dengan lebar 100 dan diletakkan di sebelah kiri Garis horizontal dengan ukuran 10, lebar 100 dan diletakkan di sebelah kanan Hasilnya akan terlihat seperti gambar di bawah ini.Gambar 2-10 Contoh membuat Garis HorizontalDesign Halaman Web 2-17Politeknik TelkomPemrograman Web2.3ListDaftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus/simbol. Terdapat tiga tipe list yang dapat digunakan, yaitu:2.3.1List Tanpa Urutan (Unordered Lists)Tag

untuk membuat daftar item dengan tanda bullet (tidak bernomor). List entri didefinisikan dengan tag . Pada jenis ini tidak memerlukan pengurutan data. Kita juga dapat menentukan jenis bullet yang akan digunakan dengan menentukan type-nya. Beberapa tipe yang dapat dipilih ditunjukkan pada tabel di bawah ini : Tabel 2-1 Tabel Jenis Bullet Tipe Disc Circle Square Penjelasan Bullet berbentuk cakram Bullet berbentuk lingkaran Bullet berbentuk kotakContoh penggunaannya adalah sebagai berikut : Belajar membuat HTML yuk Membuat List tanpa urutan apel jeruk mangga jambu Hasilnya akan terlihat seperti gambar di bawah ini.Design Halaman Web2-18Politeknik TelkomPemrograman WebGambar 2-11 Contoh Unordered List2.3.2List Berurut (Ordered Lists) Juga digunakan untuk membuat daftar item bernomor, dengan tiap item dapat menggunakan angka arab atau romawi. List entri juga didefinisikan dengan tag . Contoh pembuatan list berurut adalah sebagai berikut : Belajar membuat HTML yuk Membuat List berurut apel jeruk mangga jambu Hasilnya akan terlihat seperti gambar di bawah ini.Design Halaman Web 2-19Politeknik TelkomPemrograman WebGambar 2-12 Contoh Ordered List Atribut yang ada pada Ordered List adalah TYPE dan START. Beberapa type penomoran yang dapat digunakan pada ordered list ditunjukkan pada tabel di bawah ini : Tabel 2-2 Tipe Penomoran pada Ordered List Tipe I i a A Penjelasan Angka ditampilkan dalam angka romawi huruf besar Angka ditampilkan dalam angka romawi huruf kecil Angka ditampilkan dalam abjad huruf kecil Angka ditampilkan dalam abjad huruf besarPada tag juga terdapat atribut START untuk memulai list dari nomor tertentu. Pada tag terdapat atribut VALUE untuk melewati nomor yang tidak diinginkan. Contoh penggunaannya adalah sebagai berikut: Belajar membuat HTML yuk Membuat List berurut Contoh penggunaan atribut START dan VALUE
Design Halaman Web 2-20Politeknik Telkom apel jeruk mangga jambu Contoh penggunaan atribut START type=A
apel jeruk mangga jambu Pemrograman WebdanVALUEdenganGambar 2-13 Contoh Penomoran dengan Ordered ListDesign Halaman Web 2-21Politeknik TelkomPemrograman Web2.3.3Definition ListsDefinition lists biasanya digunakan untuk membuat suatu list singkatan dan definisinya atau istilah-istilah. Definition List dinyatakan dengan tag dan diantara tag tersebut ditambahkan tag Definition Term yaitu bagian istilah yang dijabarkan dan tag Definition Data yang merupakan penjabaran dari istilah. Contoh : Belajar membuat HTML yuk Membuat Definition LIsts HTTP HyperText Transfer Protocol FTP File Transfer Protocol Gambar 2-14 Contoh Definition ListDesign Halaman Web 2-22Politeknik TelkomPemrograman Web2.3.4List Bersarang (Nested Lists)Dalam pembuatan list bersarang menggunakan tag-tag yang telah dijelaskan sebelumnya seperti tag , dan . Contoh pembuatan list bersarang adalah sebagai berikut : Belajar membuat HTML yuk Membuat List Bersarang List item Number 1 List item number 2 Item 2 sub-item A Item 2 sub-item B List item number 3 Item 3 sub-item A Item 3 sub-item B Gambar 2-15 Contoh Nested ListDesign Halaman Web 2-23Politeknik TelkomPemrograman WebRangkuman1. 2. 3. 4.HyperText Markup Language adalah bahasa yang digunakan untuk membuat suatu situs web atau homepage. Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat case-sensitif artinya sama dengan ataupun . Untuk mengatur tampilan pada dokumen HTML dapat dilakukan dengan mengatur warna latar belakang, format teks, pewarnaan teks dan pengaturan paragraf. List ada tiga macam antara lain : ordered list, unordered list dan definition list. Dari ketiga macam list tersebut dapat dibuat bentuk List Bersarang.Latihan1. a. b. c. d. e. 2. 3. 4. 5. 6.Jelaskan masing-masing fungsi dari tag-tag berikut ini :
Jelaskan perbedaan antara dan ! Untuk pengaturan font dapat digunakan atribut size, face dan color. Jelaskan masing-masing atribut tersebut dan berikan conroh penggunaannya! Tuliskan tag HTML untuk karakter spesial @, &, , , spasi! Sebutkan jenis-jenis list yang ada pada dokumen HTML! Tuliskan perintah HTML untuk membuat list dengan menggunakan penomoran angka Romawi!Design Halaman Web2-24Politeknik TelkomPemrograman Web3 LINK DAN GAMBAROverviewKeunggulan dokumen HTML adalah dapat melakukan link ke dokumen yang berlainan atau ke dokumen yang sama. Selain menggunakan teks sebagai link, dapat pula menggunakan gambar maupun aplikasi multimedia sebagai link. Menggunakan relative links lebih memudahkan dalam manajemen file apabila terjadi perpindahan aplikasi web ke komputer yang berbeda.Tujuan1. 2. 3. 4. 5.Membuat link antar dokumen HTML Relative Links versus Absolute Pathnames Membuat link ke bagian tertentu dari dokumen (anchor) yang sama Memasukan gambar ke halaman HTML Membuat link dari gambar3-1Link dan GambarPoliteknik TelkomPemrograman Web3.1LinkKelebihan dari HTML adalah kemampuannya untuk link (menyambungkan) daerah teks ataupun gambar ke dokumen yang lain. Browser memberi tanda daerah ini biasanya dengan warna yang berbeda dan garis bawah, untuk menunjukkan kalau daerah tersebut merupakan hypertext link. Hypertext tag pada HTML menggunakan anchor yaitu tag . Dalam pembuatan dokumen HTML diperlukan keterhubungan antar dokumen. Keterhubungan ini dibagi dalam 2 (dua) kategori : 1. 2. Keterhubungan antara satu dokumen dengan dokumen yang lain Keterhubungan kepada suatu bagian pada dokumen itu sendirinama_linkSintak tag link adalah sebagai berikut: url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan nama_link adalah nilai yang akan ditampilkan di browser sebagai teks link atau tombol penghubung. Tulisan yang terletak antara dan akan terdapat garis bawah dan atribut warnanya dapat diatur dalam tag . Dikenal 3 (tiga) istilah dalam pengalamatan link : 1. 2. 3. Link relatif Link ini menggunakan alamat relatif file dituju. Misal : Tujuan Link absolut Link ini menggunakan alamat absolut file yang dituju. Misal : Tujuan Link dalam dokumen yang sama Link ini menggunakan alamat pada bagian tertentu di dokumen itu sendiri. Misal : Kembali ke atasBeberapa atribut yang dapat ditambahkan dalam tag diantaranya : Tabel 3-1 Tabel Atribut dalam Tag Atribut Href Name Target Title Kegunaan Menunjukkan url yang dituju Memberikan nama pada bagian tertentu pada dokumen Menunjukkan target ditampilkannya link Menunjukkan title dari link ketika cursor digerakkan di sekitar area hyperlink3-2Link dan GambarPoliteknik TelkomPemrograman Web3.1.1Membuat Link antar Dokumen HTMLUntuk membuat link/penghubung dengan target ke dokumen / halaman yang berbeda, anda harus membuat dokumen yang dituju / target dan disimpan dalam direktori tertentu, baik pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang. Untuk mencoba membuat link, silahkan buat script berikut dan beri nama masing-masing dokumen dengan dok_awal.htm dan dok_tujuan.htm. Membuat halaman awal dok_awal.htm : Belajar membuat HTML yuk Membuat Relative Link Contoh membuat Link yang sederhana

Untuk pindah ke dokumen yang lain,ikuti link pertama ini dengan klik disini Hasil :Gambar 3-1 Tampilan Halaman dok_awal.htmLink dan Gambar3-3Politeknik TelkomPemrograman WebMembuat halaman target link dok_tujuan.htm Relative Link Ini dokumen dengan nama file : dok_tujuan.htm, yang dituju oleh Relative Link pada dokumen dok_awal.htm Gambar 3-2 Tampilan Halaman dok_tujuan.htm3.1.2Relative Links versus Absolute PathnamesSecara umum, anda diharapkan menggunakan relative link, dikarenakan penulisannya lebih pendek. Selain itu akan memudahkan jika diharuskan memindahkan grup dokumen ke lokasi yang lain karena relative path tersebut akan tetap bisa digunakan. Tetapi anda bisa menggunakan Absolute Pathname ketika kita diharuskan membuat link ke lokasi yang tidak secara langsung terkait. Untuk penggunaan Absolute Pathname ini diharuskan mencantumkan URL (Uniform Resource Locator) yang menspesifikasikan lokasi suatu file dalam server yang lain. Bentuk dari URL ini terlihat sebagai berikut : Scheme ://host.domain[:port]/path/filename Scheme itu sendiri bisa berupa : http file yang terletak di server World Wide Web (WWW). ftp file pada server FTPLink dan Gambar 3-4Politeknik TelkomPemrograman WebUntuk port, dapat diisi dengan nomor port jika dibutuhkan. Nomor port ini bersifat optional, dicantumkan ketika dibutuhkan. Contoh penggunaan script anchor dengan Absolute pathname adalah sebagai berikutJadwal acaracontoh penggunaan port (jika memang dibutuhkan)Jadwal acaraLink ke direktori adalah ditujukan ke satu file default dalam direktori tersebut seperti index.html (pada umumnya), welcome.html ataupun homepage.html. Contoh : http://www.mtv.com ditujukan ke http://www.mtv.com/index.html yang sebenarnya ditujukan ke file yang berada di: www.mtv.com/public/.www/index.html Untuk membuat link yang ditujukan untuk mengirimkan email, bisa dilakukan dengan formatnama linkContoh penggunaannya adalah sebagai berikut. Judul dari dokumen HTML Kritik dan saran dapat anda layangkan ke Layanan Customer Link dan Gambar3-5Politeknik TelkomPemrograman WebTampilannya sebagai berikut :Gambar 3-3 Contoh Link untuk Mengirim Email3.1.3Membuat Link ke Bagian Tertentu dalam DokumenUntuk membuat link ke bagian tertentu dalam dokumen yang sama, harus diberikan nama anchor. Perbedaan dengan link yang berbeda dokumen adalah tujuan / target link, jika dalam dokumen yang sama yang dituju adalah nama anchor tetapi kalau dokumen yang beda yang dituju adalah nama file / dokumen yang bersangkutan. Untuk memberi nama anchor, atribut yang dipakai adalah NAME pada tag anchor dan untuk membuat link cukup memberikan tanda # setelah nama file dalam URL. Misal: Bab 1 atau dapat ditulis lengkap: Bab 1 dan untuk nama anchornya:1.1 Sekilas Sejarah InternetContoh penggunaan : Membuat Link Ke Bagian dalam Dokumen Link dan Gambar3-6Politeknik TelkomPemrograman Web Membuat Link ke Bagian dalam Dokumen Bab 1
Pada bab ini akan dijelaskan tutorial membuat dokumen HTML.
Mulai dari membuat dokumen HTML yang sederhana sampai membuat sebuah web.
Sebagai pendahuluan, coba klik link ini untuk menuju ke bagian lain pada dokumen ini.. 1.1 Sekilas Sejarah Internet
Bab ini adalah bagian lain pada dokumen yang dituju ketika link pada Bab 1 diklik.
Untuk kembali ke Bab 1, klik disini Hasilnya:Gambar 3-4 Contoh Link ke Bagian Tertentu dalam DokumenLink dan Gambar3-7Politeknik TelkomPemrograman Web3.2GambarUntuk menampilkan gambar atau animasi gif pada halaman web menggunakan tag sebagai berikut :Beberapa atribut yang digunakan pada tag antara lain : Tabel 3-2 Jenis-Jenis Atribut pada Tag Atribut Alt Align Border Height Hspace Src Width Vspace Contoh : Judul dari Dokumen HTML Teks ini di bagian tengah dari tinggi gambar dengan lebar=30% Teks ini terletak pada bagian bawah dari tinggi gambar Link dan Gambar 3-8Kegunaan Menampilkan alternatif text pada image jika mouse berada diatasnya Mengatur perataan posisi gambar (center, left, right) Mengatur lebar border/bingkai pada gambar Mengatur tinggi image Mengatur letak gambar Menentukan sumber file, lokasi dimana file disimpan Mengatur lebar image Mengatur letak gambarPoliteknik TelkomPemrograman WebGambar akan terletak di sebelah kanan teks dengan lebar=80 dan tinggi=60



Gambar akan terletak di sebelah kiri teks



Teks ini terletak pada bagian atas dari tinggi gambar Gambar 3-5 Contoh Penggunaan Atribut pada Tag Link dan Gambar 3-9Politeknik TelkomPemrograman Web3.2.1Gambar sebagai HyperlinkUntuk menjadikan image sebagai hyperlink, dapat dilakukan seperti contoh di bawah ini: Halaman Awal Selamat Datang di Situs Pribadi Saya untuk bisa menjelajahi situs ini, silahkan klik pada gambar berikut

Selamat menikmati penjelajahan di situs ini. Hasilnya seperti gambar di bawah ini :Gambar 3-6 Contoh Gambar sebagai HyperlinkLink dan Gambar 3-10Politeknik TelkomPemrograman WebRangkuman1. 2. 3. 4. 5. Kelebihan dari HTML adalah kemampuannya untuk link (menyambungkan) daerah teks ataupun gambar ke dokumen yang lain. Link dibagi dalam dua kategori, yaitu link antara satu dokumen dengan dokumen yang lain dan link kepada suatu bagian pada dokumen itu sendiri. Ada tiga istilah dalam pengalamatan link, yaitu link relatif, link absolut dan link dalam dokumen yang sama. Penggunaan relative link penulisannya lebih pendek, selain itu akan memudahkan jika diharuskan memindahkan grup dokumen ke lokasi yang lain karena relative path tersebut akan tetap bisa digunakan. Absolute Pathname digunakan ketika kita diharuskan membuat link ke lokasi yang tidak secara langsung terkait. Untuk penggunaan Absolute Pathname ini diharuskan mencantumkan URL yang menspesifikasikan lokasi suatu file dalam server yang lain. Untuk menampilkan gambar dalam dokumen HTML menggunakan tag . Sebuah gambar dapat dijadikan link ke dokumen tertentu.6. 7.Latihan1. Link pada dokumen HTML dapat digunakan untuk apa saja? 2. Terdapat tiga istilah pengalamatan link, jelaskan disertai contohnya! 3. Berikan contoh penggunaan link yang ditujukan untuk mengirimkan email ke alamat tertentu! 4. Jelaskan fungsi atribut alt pada penyisipan gambar di dokumen HTML! 5. Berikan contoh penggunaan gambar sebagai hyperlink ke suatu alamat tertentu!Link dan Gambar3-11Politeknik TelkomPemrograman Web4 FORMOverviewUntuk dapat berinteraksi secara lebih menarik, dalam dokumen HTML harus mampu menyediakan fasilitas yang dapat menerima masukan atau isian data dari user. Data isian dari pengguna ini untuk kemudian dapat diproses lebih lanjut menjadi informasi yang dibutuhkan baik oleh user maupun oleh pemilik web itu sendiri. Pengguna web dapat memasukkan inputan pada dokumen HTML melalui elemen form.Tujuan1. 2. 3.Membuat form pada dokumen HTML Mengerti cara penggunaan form pada halaman dokumen HTML. Mampu menggunakan Input Field sesuai kegunaannya.Form4-1Politeknik TelkomPemrograman Web4.1FormForm dalam HTML digunakan untuk menerima masukan atau isian dari user untuk kemudian diolah lebih lanjut menjadi informasi yang dibutuhkan, baik oleh user ataupun pihak yang mempunyai web. Elemen dari form HTML adalah yang menunjukkan awal dari suatu form HTML dan diakhiri dengan . Dalam sebuah dokumen dapat mempunyai lebih dari satu form HTML. Kegunaan Form Berikut ini beberapa contoh kegunaan Form dalam web: Memperoleh data-data user baik nama, alamat dan data lainnya. Untuk mendaftar pada service yang di sediakan. Memperoleh informasi pembelian secara online. Memperoleh feedback dari user mengenai website anda. Sintak penulisan form adalah: elemen-elemen FORM Tag digunakan untuk membuat form dalam dokumen HTML. Tabel 4-1 Jenis- Jenis Atribut dalam Tag Atribut METHOD Deskripsi Menentukan bagaimana data akan di kirim ke server. GET data akan di kirim dengan menggunakan query string pada URL. POST data akan di kirim ke server sebagai block data ke script. Syntax: METHOD=POST|GET Menentukan lokasi dari script yang akan memproses data dari form Syntax: ACTION=URLACTIONForm4-2Politeknik TelkomPemrograman Web4.2Membuat Input FieldDalam form, kita dapat membuat input atau kotak isian yang dapat diisi dengan suatu data oleh user. Tag yang digunakan untuk membuat kotak isian adalah tag . Tipe-tipe input yang tersedia adalah sebagai berikut : 1. Type=TEXT Kotak isian bertipe teks ini menerima data karakter (default) sebanyak satu baris. Tabel 4-2 Jenis- Jenis Atribut pada Input Field Tipe Text Atribut Name Type Value Size Maxlength Contoh :Deskripsi Nama variable dari control yang akan menyimpan nilai dari input field Untuk memberikan value ke input field Jumlah karakter dari input field jumlah karakter maksimum untuk input fieldTampilan : 2. TYPE=PASSWORD Kotak isian bertipe password ini menerima data karakter, tapi tidak akan ditampilkan karena kebutuhan masukan password yang bersifat rahasia. Atribut nya sama dengan input field type text. Contoh :Tampilan : 3. TYPE=CHECKBOX Suatu inputan yang memungkinkan kita memilih satu atau lebih pilihan atau tidak memilih sama sekali, dengan memberikan tanda pada checkbox tersebut.Form 4-3Politeknik TelkomPemrograman WebTabel 4-3 Jenis-Jenis Atribut pada Input Field Tipe Checkbox Atribut Checked Name Type Value Size Tampilan : Deskripsi Untuk memberi default check Nama variable dari control yang akan menyimpan nilai dari input field Untuk memberikan value ke input Ukuran control4. TYPE=RADIO Hanya mengijinkan memilih satu dari banyak pilihan. Setiap radio button control harus memiliki nama yang sama, sehingga user hanya bisa memilih satu option saja. Radio button juga harus secara explisit memberikan nilai ke atribut value. Tabel 4-4 jenis-Jenis Atribut pada Input Field Tipe Radio Atribut Checked Name Type Value Size Tampilan : Deskripsi Untuk memberi default check Nama variable dari control yang akan menyimpan nilai dari input field Untuk memberikan value ke input Ukuran control5. TYPE=BUTTON Tabel 4-5 Jenis-Jenis Atribut pada Input Field Tipe Button Atribut Name Deskripsi Nama variable dari kontrol yang akan menyimpan nilai dari input field4-4FormPoliteknik TelkomPemrograman WebTypeValue Size Contoh : : Mengirimkan form ke URL yang telah didefinisikan pada atribut ACTION pada tag : Browser mengembalikan field dalam form ke dalam nilai default(mengosongkan nilai semua elemen form). Memberikan nama label pada button Menentukan lebar buttonTampilan :Tampilan :6. Tag Tag ini digunakan untuk membuat input teks yang lebar, bisa menampung lebih banyak karakter dibanding input field bertipe TEXT. Teks yang berada diantara tag dan secara default akan ditampilkan sesuai aslinya. Tabel 4-6 Jenis-Jenis Atribut pada Input Tipe Textarea Attribute Name Rows Cols Wrap Contoh : Deskripsi Nama variable dari control yang akan menyimpan nilai dari input field Jumlah baris Lebar kolom text area WRAP=PHYSICAL tampilan word-wraps. Default WRAP=OFFForm4-5Politeknik TelkomPemrograman WebTampilan :7. TYPE=IMAGE NAME=SUBMIT SRC= Mengirimkan informasi form seperti halnya tombol Submit, hanya berbentuk gambar. Contoh :Tampilan :8. Tag dan Digunakan untuk membuat input field yang berbentuk pilihan. Tag dan ini harus digunakan secara bersamasama. Tag ini mendefinisikan pilihan dari item-item. Tag ini dipasangkan diantara tag dan . Tabel 4-7 Jenis-Jenis Atribut Pada Input Field Tipe Select Atribut Name Value Size Multiple Selected Deskripsi Nama variable dari control yang akan menyimpan nilai dari input field Teks yang ditampilkan pada tombol, default = Submit Query Untuk menentukan jumlah baris yang di tampilkan Untuk menentukan apakah user boleh memilih lebih dari satu option atau tidak. Pilihan ini dipilih secara default.Form4-6Polit