BAB II LANDASAN TEORI

BAB II LANDASAN TEORI 2.1 Pengertian Perancangan Perancangan adalah proses merencanakan segala sesuatu terlebih dahulu. Perancangan merupakan penggambaran, perencanaan, pembuatan sketsa dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi. (Sardi Irawan, 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. (Prihatoni, 2005, 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 tunggal di seluruh dunia, lewat saluran telepon, satelit dan sistem telekomunikasi lainnya. (Isak Rickyanto, 2002, h:3). 4

5 2.3 Pengertian Website 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. (Isak Rickyanto, 2002, 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, 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

6 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.

7 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, 1996, 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.

8 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

9 menggunakan program editor teks biasa yaitu notepad, atau dengan yang berbasiskan WYSIWYG seperti Microsoft FrontPage dan Macromedia Dreamweaver. 2.5 Sekilas Tentang Macromedia Dreamweaver MX Selain Flash, Macromedia juga mengeluarkan produk software yang bernama Dreamweaver. Dreamweaver adalah sebuah HTML editor profesional untuk mendesain visual dan mengelolah situs web maupun halaman web yang berurusan dengan kode-kode HTML secara manual atau lebih menyukai bekerja dalam lingkungan secara visual dalam melakukan editing. (Ferry Herlambang, Trik Eksplorasi Dreamweaver MX, PT. Elex Media Komputindo, Jakarta, 2005). 2.5.1 Mengatur ruang kerja (windows) Anda bisa bayangkan bagaimana rasanya bekerja pada ruangan milik orang lain. Semua peralatan, penataan ruang, dan alat kerja lainnya tentu tidak sesuai dengan keinginan anda. Tentu anda merasa tidak nyaman bekerja pada kondisi seperti itu. Bekerja akan merasa menyenangkan jika ruang kerja sesuai dan penataan sesuai dengan keinginan kita. Pada Dreamweaver MX, anda bisa mengatur ruang kerja sesuai dengan keinginan anda. Pada saat pertama kali anda memulai Dreamweaver MX,sebuah kotak dialog akan terbuka memberikan penawaran kepada anda untuk memilih tampilan ruang kerja yang ingin anda gunakan. Suatu saat jika anda ingin mengubah tampilan, anda bisa menggunakan kotak dialog Preferences pada menu Edit. Untuk memilih layout ruang kerja, lakukan langkah-langkah berikut ini : 1. Klik Edit >> Preferences. 2. Pada kotak dialog Preferences, pada Category pilih General. 3. Pada option General, tekan tombol Change Workspace. 4. Pada kotak dialog Workspace Setup, pilih salah satu layout yang tersedia. 5. Klik OK

10 Gambar 2.2 Kotak dialog Preferences Gambar 2.3 Kotak dialog Workspace Setup 1. Dreamweaver MX Workspace Ruang kerja ini adalah ruang kerja yang saling terintegrasi berbasis MDI (Multiple Document Interface). Semua jendela dokumen dan panel terintegrasi pada satu jendela besar, dengan panel grup yang berada disisi kanan. Pilihan ini direkomendasikan bagi kebanyakan pemakai.

11 Gambar 2.4 Dreamweaver MX workspace 2. Dreamweaver 4 Workspace Pilihan ini akan mengembalikan anda ketampilan lama seperti pada Dreamweaver 4. Setiap dokumen akan berada pada jendela yang terpisah. Jika anda telah terbiasa dengan tampilan ruang kerja Dreamweaver 4, dan tidak ingin beralih ketampilan lain, anda bisa memilih ruang kerja ini. Gambar 2.5 Dreamweaver 4 Workspace

12 2.5.2 Jendela dan Panel Sebelum melangkah kebagian lain, sebaiknya anda mengenal terlebih dahulu elemen yang ada pada ruang kerja Dreamweaver MX untuk mempermudah kerja anda nantinya. (Ferry Herlambang, Trik Eksplorasi Dreamweaver MX, PT. Elex Media Komputindo, Jakarta, 2005). Insert bar Document window Panel groups Document toolbar Welcome window Tag selector Property inspector Site panel Gambar 2.6 Jendela dan Panel pada Dreamweaver MX

13 a. Welcome Window Welcome Window menyediakan beberapa petunjuk dan informasi fitur baru Dreamweaver MX. Gambar 2.7 Welcome Window b. Insert Bar Insert bar berisi tomboluntuk memasukkan beberapa jenis objek, seperti gambar, tabel, dan layer ke dokumen. Tiap objek yang anda masukkan pada dasarnya adalah potongan kode HTML yang dapat anda atur atributnya. Gambar 2.8 Insert Bar

14 c. Document Toolbar Document toolbar berisi tombol dan pop-up menu yang menyediakan beberapa cara untuk menampilkan dokumen (seperti Design view dan Code view), beberapa option dan beberapa operasi umum seperti melakukan preview dokumen ke browser. Gambar 2.9 Document toolbar d. Document Window Document Window menampilkan dokumen yang sedang anda buat dan edit. e. Property Inspector Property Inspector adalah tempat anda dapat mengubah beberapa properti yang dimiliki oleh objek atau teks yang anda pilih. Tiap jenis objek atau teks memiliki properti yang berbeda. f. Panel Groups Panel Groups adalah kumpulan beberapa panel sejenis yang diletakan pada satu tempat. g. Site Panel Pada Site Panel anda bisa mengatur file dan folder yang akan anda gunakan untuk site anda. Windows Explorer (Windows) atau Finder (Macintosh) akan menggunakan pengaturan ini untuk menampilkan file dan folder pada disk lokal anda dan memperlakukan file dan folder tersebut seperti ketika anda mengupload-nya ke server.

15 2.5.3 Menu Berikut ini keterangan singkat tentang menu yang ada pada Dreamweaver MX. Menu berisi submenu yang biasanya yang ditampilkan sebagai dropdown menu yang akan muncul ketika anda menekan tombol menu utama. Gambar 2.10 Menu pada Dreamweaver MX a. File Menu File menu berisi menu standar untuk menu File dan Edit, seperti New, Open, Save, Cut, Copy, dan Paste. File menu juga berisi beberapa perintah tambahan, seperti Preview in Browser dan Print Code. b. Edit Menu Edit menu berisi perintah seleksi dan pencarian, seperti Select Parent Tag dan Find and Replace, dan menyediakan akses ke Keyboard Shortcut Editor dan Tag Library Editor. c. View Menu View Menu mengijinkan anda melihat tampilan dokumen dengan beberapa cara (seperti Design View dan Code View) dan untuk menampilkan atau menyembunyikan beberapa elemen pada dokumen dan peralatan yang dimiliki Dreamweaver. d. Insert Menu Insert menu menyediakan alternatif untuk memasukkan objek pada dokumen.

16 e. Modify Menu Pada menu ini anda bisa mengubah properti elemen halaman web atau item lainnya yang anda pilih. Menggunakan menu ini, anda bisa mengedit atribut tag, mengubah tabel dan elemen tabel dan menampilkan beberapa tindakan yang dapat anda lakukan untuk item pada library dan templates. f. Text Menu Menu ini menyediakan perintah yang anda perlukan untuk melakukan pemformatan pada text. g. Commands Menu Menyediakan akses untuk beberapa macam perintah, termasuk untuk membuat album foto dengan cepat dan melakukan optimasi gambar menggunakan program lain. h. Site Menu Menyediakan item menu untuk membuat, membuka, dan mengedit site. i. Window Menu Menyediakan akses kesemua panel, inspectors, dan jendela pada Dreamweaver. j. Help Menu Menyediakan akses ke dokumentasi yang dimiliki oleh Dreamweaver MX, termasuk petunjuk cara penggunaan Dreamweaver MX, membuat ekstensi untuk Dreamweaver MX, dan meterial lainnya yang dapat membantu anda menggunakan Dreamweaver dengan lebih baik.

17 2.5.4 Melakukan Preview Dokumen pada Browser Untuk melihat hasil kerja dan pengeditan suatu dokumen, sebaiknya anda melihat dokumen tersebut pada browser. Hal ini untuk memastikan apa yang telah anda lakukan dapat bekerja dengan baik. Untuk menampilkan dokumen pada browser, lakukan salah satu langkah dibawah ini : Pada menu, tekan File >> Preview in Browser, lalu pilh browser yang anda inginkan. Jika anda belum memilih browser, klik Edit >> Preferences atau Dreamweaver >> Preferences (Mac OS X), pada Category pilih Preview in Browser, lalu pilih browser yang anda inginkan. a. Tekan F12 untuk menampilkan dokumen pada browser utama. b. Tekan Control+F12 (windows) atau Command+F12 (Macintosh) untuk menampilkan dokumen pada browser kedua. 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 (Prihatoni, 2005, 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.

18 Gambar 2.11 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 suatu percabangan. Gambar 2.12 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.

19 Gambar 2.13 Struktur navigasi hierarki 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.14 Struktur navigasi campuran