BAB II LANDASAN TEORI 2.1. Pengertian Perancangan Perancangan adalah proses merencanakan segala sesuatu terlebih dahulu (Kamus Bahasa Indonesia, 1988, h: 927). Perancangan merupakan penggambaran, perencanaan, pembuatan sketsa dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi (Sardi, 2004, h: 27). 2.2. Pengertian Internet Internet berasal dari kata Interconection 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. Yang mengatur integrasi dan komunikasi jaringan komputer ini adalah protokol-protokol yang umum disebut TCP/IP. TCP (Transmission Control Protocol) yang memastikan bahwa semua hubungan bekerja dengan benar, sedangkan IP (Internet Protocol) yang mentransmisikan data dari satu komputer ke komputer lain. TCP/IP secara umum antara lain berfungsi untuk memilih rute terbaik transmisi data, memilih rute alternatif jika suatu rute tidak dapat digunakan, mengatur dan mengirimkan paket-paket pengiriman data dan lain-lain (Permana, 1999, h: 1). Internet bisa diumpamakan seperti kumpulan-kumpulan network yang saling berhubungan dan berkomunikasi dengan menggunakan standar atau bahasa yang umum. Internet bukanlah suatu lembaga dan tidak dimiliki oleh seseorang, tetapi hanyalah suatu sistem jaringan yang mendunia, sehingga internet juga bisa dikatakan sebagai sebuah network yang berskala besar. Internet merupakan jaringan besar yang dibentuk oleh interkoneksi jaringan komputer dan komputer 4
tunggal di seluruh dunia, lewat saluran telepon, satelit dan sistem telekomunikasi lainnya (Ellsworth, 1997, h:3). 2.3. Pengertian Web site Web site merupakan kumpulan halaman web yang saling terhubung dan file-filenya saling terkait. Web terdiri dari page atau halaman, dan kumpulan halaman yang dinamakan home page. Home page berada pada posisi teratas, dengan halaman-halaman terkait berada di bawahnya. Biasanya setiap halaman di bawah home page disebut child page, yang berisi hyperlink ke halaman lain dalam web (Gregorius, 2000, h: 30). Web site awalnya merupakan suatu layanan sajian informasi yang menggunakan konsep hyperlink, yang memudahkan surfer atau pengguna internet melakukan penelusuran informasi di internet. Informasi yang disajikan dengan web menggunakan konsep multimedia, informasi dapat disajikan dengan menggunakan banyak media, seperti teks, gambar, animasi, suara, atau film. 2.3.1. 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 (Sampurna, 1996, h: 3). Salah satu penyebab utama pesatnya pertumbuhan world wide web adalah kemudahan dalam penggunaannya. Pada web, kita cukup mengklik tombol mouse pada suatu link untuk mendapatkan suatu informasi, dan link tersebut secara otomatis akan membawa kita ke informasi yang kita inginkan. Sistem yang menghubungkan informasi-informasi melalui link ini disebut dengan nama hypertext. Dengan semakin berkembangnya world wide web, istilah hypertext ini kemudian berubah menjadi hypermedia, di mana link-link penghubung antar informasi bukan lagi hanya berupa suatu teks, tetapi juga bisa berupa suatu file multimedia, seperti gambar, suara, atau video.
Bekerja pada web mencakup dua hal penting, yaitu: software web browser dan software web server. Kedua software ini bekerja seperti sebuah sistem clientserver. Web browser yang bertindak sebagai client memungkinkan kita untuk menginterpretasikan dan melihat informasi pada web, sedang web server yang bertindak sebagai server memungkinkan kita untuk menerima informasi yang diminta oleh browser. Jika suatu permintaan akan suatu informasi datang, web server mencari file yang diminta tersebut dan kemudian mengirimkan ke browser yang memintanya. 2.3.2. 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 (Sampurna, 1996, h: 11). Sebelum mengakses berbagai macam informasi pada suatu web site, kita akan menemui suatu web page pembuka yang disebut sebagai home page. Jadi pada dasarnya home page adalah suatu sarana untuk memperkenalkan secara singkat tentang apa yang menjadi isi dari keseluruhan web site dari suatu organisasi atau pribadi. 2.3.3. Browser Browser merupakan suatu program yang dirancang untuk mengambil informasi-informasi dari suatu server komputer pada jaringan internet. Informasiinformasi ini biasanya dikemas dalam page-page, di mana setiap page bisa memiliki beberapa link yang menghubungkan web page tersebut ke sumber informasi lainnya (Sampurna, 1996, h: 2). Jika suatu link di klik, browser akan melihat alamat dari tujuan link tersebut dan kemudian mencarinya di web server. Jika browser menemukan alamat dari tujuan link tersebut, browser akan menampilkan informasi yang ada, dan jika tidak menemukannya browser akan memberikan suatu pesan yang menyatakan bahwa alamat dari tujuan link tersebut tidak dapat ditemukan.
2.4. Pengertian HyperText Markup Language (HTML) HyperText Markup Language adalah suatu format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform komputer ke platform komputer lainnya tanpa perlu melakukan suatu perubahan apapun. Dokumen HTML sebetulnya adalah suatu dokumen teks biasa, sehingga di platform apapun dokumen tersebut dapat dibaca (Sampurna, 1997, h: 13). Dokumen HTML disebut sebagai markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Dengan sistem hypertext pada dokumen HTML, kita tidak harus membaca suatu dokumen secara berurutan dari atas ke bawah. Kita dapat menuju ke topik tertentu secara langsung dalam dokumen dengan menggunakan teks penghubung yang akan membawa kita ke suatu topik atau dokumen lain secara langsung. HTML tidak berdiri sendiri, agar ia dapat bertugas dalam membangun halaman web, ia harus di tulis dalam software atau aplikasi tertentu, yang dikenal sebagai HTML editor. HTML editor inilah yang bertugas untuk menerjemahkan bahasa HTML menjadi halaman web yang siap di lihat oleh para surfer di seluruh dunia. Secara umum, ada dua jenis HTML editor, yaitu Text Editor dan WYSIWYG Editor. 1. Text Editor Biasa digunakan oleh mereka yang sudah mahir dalam menggunakan bahasa HTML, karena melalui editor jenis ini kita dapat langsung menuliskan kode-kode HTML satu persatu, sesuai prosedur teknis yang berlaku. Untuk editor jenis ini, kita dapat menggunakan Notepad. 2. WYSIWYG Editor Adalah solusi bagi mereka yang belum mahir dalam menggunakan bahasa HTML. Pada jenis aplikasi ini, kita dapat membangun halaman web
dengan lebih mudah, karena apa yang terlihat di layar akan sama dengan hasil yang anda dapatkan. Untuk editor jenis ini, kita dapat menggunakan editor Microsoft FrontPage maupun Macromedia Dreamweaver. 2.4.1. Struktur Dokumen HTML Elemen pada HTML dapat didefinisikan sebagai suatu kode tertentu yang akan menyediakan tempat untuk meletakkan beberapa kode di dalamnya. Berbeda dengan tag yang menangani satu kode saja. Untuk lebih jelasnya perhatikan gambar di bawah ini: <HTML> <HEAD> <TITLE> judul halaman web </TITLE> </HEAD> <BODY> tempat untuk menempatkan seluruh informasi </BODY> </HTML> Gambar 2.1 Skema struktur dokumen HTML Jadi jelas bahwa elemen merupakan satu bagian yang besar yang terdiri dari banyak kode-kode yang disebut tag itu. Dokumen HTML diawali dengan tag <HTML> dan di akhiri dengan tag </HTML>. Elemen pada HTML akan memisah dokumen menjadi dua bagian utama, antara lain: 1. Elemen <HEAD> </HEAD> Merupakan bagian kepala, tempat untuk menuliskan keterangan mengenai judul halaman web, nama pengarang dan script atau program kecil. 2. Elemen <BODY> </BODY> Merupakan bagian badan atau isi, tempat untuk menuliskan informasi yang akan ditampilkan pada browser. Tag hanyalah bagian dari elemen. Tag adalah kode-kode yang digunakan untuk men-setting dokumen HTML. Dari tiap-tiap teks programnya, di mulai
dengan tanda <Tag-awal> dan di akhiri dengan tanda </Tag-akhir>. Untuk membuat dokumen HTML, perlu mengetahui dan mempelajari elemen serta tagtag yang digunakan untuk menandai bagian-bagian dari suatu dokumen dengan menggunakan program editor teks biasa yaitu notepad, atau dengan yang berbasiskan WYSIWYG seperti Microsoft FrontPage dan Macromedia Dreamweaver. 2.5. Macromedia Dreamweaver MX 2.5.1. Sekilas Macromedia Dreamweaver MX Macromedia Dreamweaver MX merupakan software yang dikenal sebagai software web authoring tool, yaitu software untuk desain dan layout halaman web. Dreamweaver MX juga memiliki kemampuan bukan hanya sebagai software untuk desain web saja tetapi juga untuk editing kode serta pembuatan aplikasi web dengan menggunakan berbagai bahasa pemrograman web, antara lain JSP, PHP, ASP, dan ColdFusion. Saat ini Dreamweaver merupakan software utama yang digunakan oleh web desainer maupun web programmer dalam membangun suatu situs web. Hal ini disebabkan ruang kerja, fasilitas, dan kemampuan Dreamweaver yang mampu meningkatkan produktivitas dan efektivitas dalam desain maupun membangun suatu situs web. Selain fasilitas untuk desain layout halaman web maupun aplikasi database, Dreamweaver juga dilengkapi dengan fasilitas untuk manajemen situs yang cukup lengkap. 2.5.2. Ruang Kerja Macromedia Dreamweaver MX Dreamweaver MX memiliki layout ruang kerja yang berbeda dengan versi sebelumnya. Versi Dreamweaver MX memiliki tiga macam layout ruang kerja. Ruang kerja pertama memiliki layout kerja yang hampir sama dengan versi sebelumnya. Ruang kerja kedua merupakan versi standar dari Macromedia Dreamweaver MX, sedangkan yang ketiga merupakan layout ruang kerja yang berasal dari HomeSite yang diutamakan untuk editing kode. Dreamweaver MX
memberikan fleksibelitas bagi penggunanya dalam menentukan ruang kerja yang diinginkan. Pada gambar 2.2 kita dapat melihat ruang kerja Macromedia Dreamweaver MX beserta komponen-komponennya. Insert bar Document toolbar Document window Panel groups Tag selector Property inspector Site panel Gambar 2.2 Tampilan ruang kerja Dreamweaver MX Insert Bar
Komponen ini mengandung tombol-tombol untuk menyisipkan berbagai macam objek, seperti image, tabel, dan layer ke dalam dokumen. Document Toolbar Komponen ini mengandung tombol-tombol dan menu pop-up yang menyediakan tampilan berbeda dari document window (seperti Design view dan Code view), pilihan menampilkan ruler, grid, dan beberapa operasi umum, seperti preview di browser. Document Window Komponen ini merupakan komponen di mana dokumen kita dibuat dan ditampilkan. Kita menyisipkan teks, image dan objek lain di bagian ini. Panel Groups Panel groups adalah kumpulan panel berkaitan yang dikelompokkan bersama di bawah satu judul. Tag Selector Tag selector terletak pada status bar, tepatnya di bawah document window yang berfungsi menampilkan hierarki tag di sekitar pilihan yang aktif pada Desain view. Property Inspector Property inspector memberikan fasilitas untuk melihat dan mengubah berbagai properti objek yang dipilih atau teks. Setiap macam objek memiliki properti yang berbeda. Site Panel Site panel memberikan fasilitas untuk mengatur file dan folder yang membentuk situs Web kita. Site panel sebenarnya merupakan anggota dari Files panel group selain Assets panel. Panel ini memiliki fungsi yang cukup penting karena memungkinkan kita bekerja dan mengatur file-file dari situs Web dengan efisien.
2.6. Peta Navigasi Navigasi digunakan untuk menjelajah halaman demi halaman dalam suatu situs web, dalam navigasi biasanya disertai tombol-tombol yang akan mengantarkan pengunjung ke halaman yang diinginkan (Hakim, 2004, h: 21). Navigasi termasuk struktur terpenting dalam pembuatan suatu multimedia. Peta navigasi merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat membantu mengorganisasikan seluruh elemen multimedia dengan pemberian perintah dan pesan. Beberapa dasar struktur pembuatan peta navigasi, adalah: 2.6.1. Struktur Navigasi Linier Struktur yang mempunyai satu rangkaian cerita yang berurut antara satu halaman dengan halaman lainnya terhubung secara seri. Perpindahan halaman secara satu persatu, misalnya dari halaman pertama menuju halaman tiga harus melalui halaman dua terlebih dahulu. Struktur ini biasa digunakan untuk menampilkan unsur keindahan dan data sebagai informasi. Gambar 2.3 Struktur Navigasi Linier
2.6.2. Struktur Navigasi Non Linier Struktur ini merupakan pengembangan dari struktur linier. Perpindahan antar halaman secara langsung di perkenalkan atau membentuk suatun percabangan. Gambar 2.4 Struktur navigasi non linier 2.6.3. Struktur Navigasi Hierarki Struktur ini dalam menampilkan data membentuk suatu percabangan yang berdasarkan kriteria tertentu. Tampilan data terdiri dari master page atau halaman utama dan slave page atau halaman pendukung.
Gambar 2.5 Struktur navigasi hierarki 10
2.6.4. Struktur Navigasi Campuran Struktur ini merupakan gabungan dari struktur linier, non linier dan hierarki. Banyak digunakan untuk pemakaian interaksi yang tinggi. Gambar 2.6 Struktur navigasi campuran