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 informasi-informasi 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 Internet Explorer dari Microsoft Corporation 2 Netscape Navigator dari Netscape Communication 3 OPERA dari Opera Software ASA 4 Mosaic buatan NCSA 5 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 . Pasangan dari sebuah tag ditandai dengan simbol / . Misalnya pasangan dari tag adalah . Dalam hal ini disebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen bila ditulis dengan atributnya adalah sebagai berikut:

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:

berisi teks yang akan muncul pada title bar browser berisi teks, gambar, atau apapun yang ingin ditampilkan pada halaman web ada pada bagian ini.

Seperti terlihat, struktur file HTML diawali dengan sebuah tag dan ditutup dengan tag . Di dalam tag ini terdapat dua bagian besar, yaitu bagian yang diapit oleh tag ..... dan tag ...... Bagian yang diapit oleh tag ..... merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti ..... yang berfungsi untuk menampilkan judul pada title bar window web browser dan tag lain misalnya . Bagian yang diapit oleh tag ..... 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 Heksa Warna Heksa Aqua = Cyan (biru air) #00FFFF Maroon (merah tua) #800000 Aquamarine (biru kehijauan) #70DB93 Navy (biru gelap) #000080 Black (hitam) #000000 Olive (hijau kekuningan) #808000 Blue (biru) #0000FF Orange #FF7F00 Brass (kuning tua) #B5A642 Pink (merah muda) #FF6EC7 Chocolate (cokelat) #5C3317 Purple (ungu) #800080 Copper (keunguan) #B87333 Red (merah) #FF0000 Fuchsia (merah keunguan) #FF00FF Silver (perak) #C0C0C0 Gray (abu-abu) #808080 Teal (biru kehijauan) #008080 Green (hijau) #00FF00 Violet #9F5F9F Lime (hijau terang) #00FF00 White (putih) #FFFFFF Magenta #FF00FF Yellow (kuning) #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. Elemen-elemen yang terdapat pada bagian head antara lain:

Tag Tag ini digunakan untuk memberi judul dokumen. Judul dokumen sebaiknya tidak terlalu panjang, tetapi mampu mencerminkan isi dari dokumen.

judul dokumen

2.1.1. Tag 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 mempunyai sebuah atribut, yaitu href yang menunjukkan sebuah alamat URL.

2.1.2. Tag Tag ini berfungsi untuk menunjukkan relasi antar dokumen HTML. Penggunaanya:

2.1.3. Tag 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.

BAGIAN BODY Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen . Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks, warna link, dan lain-lain.

Atribut elemen body

background = lokasi dan nama file latar belakang image dokumen bgcolor = warna latar belakang dokumen, default putih text = warna teks dokumen, default hitam link = warna link dokumen, default biru vlink = warna visited link dokumen, default ungu alink = warna active link dokumen, default merah bgproperties = [fixed|none] (mengatur properti gambar latar belakang) topmargin = batas atas dokumen (pixel) leftmargin = batas kiri dokumen (pixel)

PENGATURAN FORMAT DOKUMEN HTML

2.1.4. Heading Tag heading 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 sampai .

Latihan01.html Latihan-1: Heading

TOKO BUKU SERBA MURAH Toko kami menyediakan Alat Tulis Pensil, Ballpoint, Penggaris, Dll. Buku-buku Pelajaran Ilmu pasti, Ilmu bumi, Sejarah, Dll. Peralatan Kantor Meja, Kursi, File manager, Dll.

2.1.5. Paragraph Tag paragraph 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 Tag break 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 .Tag break tidak memerlukan tag penutup .

2.1.7. Horizontal Rule Tag horizontal rule berfungsi untuk menampilkan garis horisontal di halaman web Anda. Tag ini sekaligus akan membuat baris baru. Tag tidak memerlukan elemen penutup . 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 Latihan-2: Paragraf dan Break TOKO BUKU SERBA MURAH Toko kami menyediakan Alat Tulis PensilBallpointPenggarisDll. Buku-buku Pelajaran Ilmu pastiIlmu bumiSejarahDll. Peralatan Kantor MejaKursiFile managerDll.

2.1.8. Preformatted Tag digunakan untuk membuat tampilan dokumen pada browser sama dengan tampilan pada text editor (preformatted). Dengan menggunakan tag maka tag dan tag tidak diperlukan lagi.

Latihan03.html Latihan-3: Penggunaan Tag PRE Tag pre dapat digunakan untuk membuat tampilan seperti ini: 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

Latihan04.html Latihan-4: Format Karakter TOKO BUKU SERBA MURAH Toko kami menyediakan Alat Tulis PensilBallpointPenggarisDll. Buku-buku Pelajaran Ilmu pastiIlmu bumiSejarahDll. Peralatan Kantor MejaKursiFile managerDll.

ELEMEN LIST Properti digunakan untuk menampilkan informasi dalam bentuk daftar (list). Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet (unordered list ) dan dalam bentuk nomor (ordered list ). Atribut elemen list

Ordered list type = [ 1 | a | A | i | I ] (tipe penomoran, default 1)

Unordered list type = [ disc | square | circle ] (tipe bullet, default disc)

Latihan05.html Latihan-5: Menggunakan List TOKO BUKU SERBA MURAH Toko kami menyediakan Alat Tulis Pensil Ballpoint Penggaris Dll. Buku-buku Pelajaran Ilmu pasti Fisika Kimiya Biologi

Ilmu bumi Sejarah Dll. Peralatan Kantor Meja Kursi Kursi lipat Kursi plastik Kursi-kursian File manager Dll.

MENAMPILKAN IMAGE Anda dapat menampilkan gambar dalam halaman HTML, format filenya berupa JPG atau GIF. Untuk menampilkannya digunakan tag .

Atribut elemen image

src = lokasi dan nama gambar

alt = teks alternatif, tex yang ditampilkan ketika gambar disorot dengan mouse

width = lebar gambar, pixel height = tinggi gambar, pixel

align = [ top | middle | bottom | left | right ] (perataan gambar)

border = tebal garis tepi gambar, pixel

MEMBUAT LINK Elemen link berfungsi sebagai penghubung antara suatu halaman dengan halaman lain, atau ke URL lain, bahkan dalam suatu halaman untuk berpindah ke sub judul yang lain.

hypertext

Latihan06.html Latihan-6: Menggunakan Link dan Image Bagian ini dinamai dengan atas Link ke latihan1.html Link ke lokasi yang bernama bawah Memasukkan gambar: Link ke lokasi yang bernama atas Bagian ini dinamai dengan bawah

MEMBUAT TABEL Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Didalam membuat tampilan website yang menarik, para programmer sering menggunakan tabel untuk mempermudah penempatan objek pada dokumen HTML.

Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan tag ..... . Elemen tabel berisi properti ..... untuk menentukan baris (table row) yang di dalamnya terdapat properti ..... untuk menampilkan data pada setiap sel tabel (table data).

Struktur lengkap dari elemen tabel adalah sebagai berikut:

data baris 1 kolom 1

data baris 1 kolom 2 data baris 2 kolom 1 data baris 2 kolom 2

Latihan07.html Latihan-7: Membuat tabel sederhana Berikut contoh tabel dengan rowspan dan colspan: baris 1 kolom 1 baris 1 kolom 2 baris 2 kolom 1 baris 3 kolom 1 baris 3 kolom 2 baris 4 kolom 2

Atribut elemen tabel width = lebar tabel, pixel atau persen

height = tinggi tabel, pixel atau persen

border = tebal garis tepi, pixel

cellspacing = spasi antar sel, pixel

cellpadding = spasi di dalam sel, pixel

align = [ left | center | right ] (perataan tabel)

bgcolor = warna latar belakang tabel

Atribut table row

align = [ left | center | right ] (perataan sebaris sel secara horisontal)

valign = [ top | middle | bottom ] (perataan sebaris sel secara vertikal)

bgcolor = warna latar belakang baris

Atribut table data

rowspan = jumlah baris yang dispan oleh sel (penggabungan baris)

colspan = jumlah kolom yang dispan oleh sel (penggabungan kolom)

align = [ left | center | right ] (perataan horisontal)

valign = [ top | middle | bottom ] (perataan vertikal)

width = lebar sel, pixel atau persen

height = tinggi sel, pixel atau persen

bgcolor = warna latar belakang tabel

Latihan08.html Latihan-8: Mengatur bentuk tabel Latihan menampilkan gambar dan link dalam tabel Kolom sebelah kiri untuk menampilkan gambar, sedangkan baris paling bawah untuk menempatkan link Link ke Latihan 1.05

MEMBUAT FORM Form HTML merupakan tag yang paling penting khususnya dalam membuat aplikasi berbasis web. Form menyediakan properti masukan yang dapat berupa textbox, checkbox, radio button, dan button.

Untuk mendeklarasikan sebuah form digunakan tag ...... Di dalam tag ini akan mendefinisikan elemen-elemen form seperti yang telah disebutkan di atas. Selain tag elemen, form juga dapat menuliskan sembarang teks, tag, image.

Atribut elemen form

action = lokasi dan nama file (file yang menangani form)

method = [ get | post ] (metode HTTP untuk men-submit form)

2.1.9. Properti Masukan Pada Elemen Form 1. Text box

Digunakan untuk memasukkan input berupa text. size = ukuran dari textbox dalam karakter, default 20 maxsize = maksimal banyaknya karakter yang dapat diterima name = nama dari variabel yang dikirim ke suatu aplikasi value = akan menampilkan isinya sebagai nilai default

2. Password Digunakan untuk memasukkan password. size = ukuran dari textbox dalam karakter, default 20 maxsize = maksimal banyaknya karakter yang dapat diterima name = nama dari variabel yang dikirim ke suatu aplikasi

3. Hidden Digunakan untuk mengirim data ke suatu aplikasi yang tidak diinginkan untuk dilihat oleh browser. name = nama dari variabel yang dikirim ke suatu aplikasi value = nilai dari variabel

4. Check box Check box digunakan untuk dapat memilih lebih dari satu pilihan. name = nama dari variabel yang dikirim ke suatu aplikasi value = nilai dari variabel checked (checkbox yang ditandai)

5. Radio button Radio button digunakan untuk dapat memilih hanya salah satu pilihan. name = nama dari variabel yang dikirim ke suatu aplikasi value = nilai dari variabel checked (radio button yang ditandai)

6. Push button Elemen ini biasanya digunakan untuk JavaScript, VBScript, atau script lain untuk menghasilkan suatu aksi. name = nama dari variabel yang dikirim ke suatu aplikasi value = label teks di atas tombol

7. Submit Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama variabel dan nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen FORM. name = nama dari variabel yang dikirim ke suatu aplikasi value = label teks di atas tombol

8. Image submit button Digunakan untuk menggantikan tombol standar submit dengan image. name = nama dari variabel yang dikirim ke suatu aplikasi

9. Reset Digunakan untuk mereset (menghapus) semua masukan dalam form dengan cepat. value = label teks di atas tombol.

10. Text area . . . Elemen untuk memasukkan teks secara leluasa seperti pada notepad. name = nama dari variabel yang dikirim ke suatu aplikasi rows = panjang baris dalam karakter cols = tinggi (jumlah baris)

11. Select . . . Daftar isi dalam properti select menggunakan tag name = nama dari variabel yang dikirim ke suatu aplikasi size = jumlah pilihan yang dapat terlihat

Latihan09.html Latihan-9: Membuat Form Nama : Alamat : Jenis kelamin: Laki-laki Perempuan Tgl. Lahir: 01 02 03 31 - 01 02 03 12 - 1901 1902 1903 2000 Pekerjaan : Pelajar/Mahasiswa Pegawai negeri Karyawan Wiraswasta Hobby : Baca buku Kesenian Olah raga Shopping Komentar :