HTML melalui Dreamweaver

Mendesain Web menggunakan Dreamweaver (1)
(Friday, 27 May 2005) - Kontribusi dari Administrator - Terakhir diperbaharui (Friday, 08 July 2005)
Sejak kelahiran world wide web (WWW) pada tahun 1989, perkembangan internet mejadi sangat pesat, hingga sekarang
ini internet telah menjadi kebutuhan sehari-hari. WWW yang semula dirancang sebagai media inetrent untuk bertukar
informasi dan menghubungkan sumber daya yang tersedia di internet lewat sarana hyperlink, ternyata berkembang
sebagai sarana hiburan, komersial, sampai promosi. Bahkan, internet sekarang identik dengan web, yang berwarna-
warni dan gemerlap. Tidak terlalu salah anggapan tersebut, karena WWW dirancang kompatibel dengan semua
teknologi internet terdahulu, seperti e-mail, gopher, FTP, bahkan IRC. Berkembang pesatnya WWW membuat semua hal
yang berhubungan dengan internet dikenal dengan awalan web, seperti web server, web design, webmaster, dan web
programmer. Bidang desain web terus berkembang seiring berkembangnya penggunaan web sebagai sarana kehadiran
seseorang, sebuah organisasi, atau satu perusahaan di internet. Jika dulu, spesifikasi HTML sebagai bahasa
pemrograman web hanya mencakup paragraf, gambar, dan link, kini telah mencakup pengaturan style, font, warna,
pemrograman script dan multimedia, serta animasi yang membuat web semakin hidup.



Pembuatan situs web identik dengan HTML, walaupun sekarang ada beberapa teknologi alternatifnya, naumn hanya
HTML yang mempunyai standar yang baku dan cukup dipatuhi oleh semua pihak. Teknologi HTML dikembangkan dan
distandarisasi oleh organisasi nirlaba W3C (World Wide Web Consortium), dengan standar terakhir versi 4.01. Untuk ke
depannya, HTML perlahan-lahan akan digantikan oleh standar baru, XML, yang lebih fleksibel. Sebagai proses transisi,
W3C menetapkan standar XHTML 1.0 sebagai jembatan antara HTML dan XML. Standar-standar lain untuk membuat
situs web adalah :

- Java, yang dibuat oleh Sun Microsystems (http://www.sun.com)

- Flash, yang dibuat oleh Macromedia (http://www.macromedia.com)

Kedua teknologi tadi bisa membuat situs web tanpa HTML/XML sama sekali, namun diperlukan program tambahan
(plugin) untuk mengaksesnya melalui browser web. Ada juga teknologi lain yang bersifat melengkapi HTML, yaitu :

- JavaScript, yang dikembangkan Netscape bersama Sun Microsystems

- ActiveX, ASP, dan Windows Media yang dikembangkan Microsoft (http://www.microsoft.com)

- RealMedia, yang dikembangkan RealSystems (http://www.real.com)

- PHP (http://www.php.net) dan Perl (http://www.perl.com), yang dikembangkan komunitas open source

- ColdFusion, buatan Macromedia

Teknologi di atas bersifat melengkapi HTML dengan menambahkan kemampuan interaktif/dinamik situs web yang dibuat
dengan HTML.



Pemrograman HTML sama saja dengan pemrograman dengan bahasa pemrograman seperti Basic, Pascal, atau C.
Yang dibutuhkan hanya editor teks murni dan kompiler/interpreter untuk menerjemahkannya ke dalam format yang
dipahami komputer. Untuk HTML, interpreter/kompiler yang dibutuhkan adalah browser web yang mendukung standar
HTML terakhir, yaitu versi 4.01 (CSS level 1/2) dan XHTML versi 1.0. Beberapa browser yang populer antara lain:

- Internet Explorer, buatan Microsoft, dipakai oleh hampir 90% pengguna internet. Tersedia untuk platform Windows dan
Mac.

- Netscape/Netscape Communicator (http://www.netscape.com), buatan AOL (http://www.aol.com), pernah menjadi
browser terpopuler sampai tahun 1998. Tersedia untuk platform Windows, Mac, Unix,dan Unix/ Linux.

- Mozilla (http://www.mozilla.org), browser open source yang disponsori Netscape, dikembangkan sejak tahun 1997.
Tersedia untuk platform Windows, Mac, dan Unix/Linux.

- Opera (http://www.opera.com), buatan Opera Software, browser kuda hitam yang cepat dan lincah. tersedia untuk
platform Windows, Mac, Unix/Linux, Symbian, dan BeOS.

- Konqueror (http://www.kde.org), merupakan bagian dari KDE (K Desktop Environment), tampilan desktop di Linux.
Tersedia untuk platform Linux.

- Lynx, browser berbasis teks yang cepat (karena tidak menampilkan gambar/multimedia), tersedia untuk platform
DOS/Windows dan Unix/Linux.

Browser yang baik untuk keperluan pembuatan desain web adalah yang mendukung standar terakhir (HTML 4.01, CSS
level 1/2, XHTML 1.0, XML 1.0) dan tersedia untuk platform-platform yang dominan, dalam hal ini Windows, Mac, dan
Linux.



Kita bisa mendesain situs web menggunakan editor teks biasa, seperti Notepad (Windows) atau vi (Unix/Linux), namun
untuk mendesain situs web modern, dengan tata letak grafik dan aliran teks nonstandar, diperlukan program desain web
khusus. Bagi yang lebih menyukai pemrograman manual, tersedia program editor yang lebih baik, dilengkapi highliting
kode (pengodean warna), browser internal, shortcut untuk pengetikan tag, sampai pengecek sintaks kode. Program-
program editor yang cukup populer antara lain :

- Macromedia Homesite (Windows)

- Arachnophilia (Windows) (http://www.arachnoid.com)

- Evrsoft 1st Page 2000 (Windows) (http://www.evrsoft.com)

- BareBone Editor (Mac) (http://www.barebone.com)

- BlueFish (Linux) (http://bluefish.openoffice.nl)

- Quanta/Quanta Plus (Linux) (http://quanta.sourceforge.net)

Bagi yang menginginkan lebih, tersedia program dengan tampilan grafik (WYSIWYG) yang berangkat dari konsep
desktop publishing. Kita mengatur tata letak kata dan gambar di halaman web tanpa menyentuh kode HTML. Program
inilah yang akan membangkitkan kode HTML untuk rancangan kita. Program-program semacam ini lebih mahal dan
memakan resource hardware lebih besar dibandingkan editor. Program-program jenis ini yang populer antara lain :

- Microsoft FrontPage (Windows)

- Macromedia Dreamweaver (Windows/Mac)

- Adobe GoLive! (Windows/Mac) (http://www.adobe.com)

- NetObjects Fusion (Windows) (http://www.netobjects.com)

Program-program ini ada yang menyediakan template siap pakai bagi pengguna pemula. Tinggal pilih salah satu
template yang tersedia, lalu mengisi data-data yang diperlukan, dan situs web sudah siap dalam sekejap.

Ada cara lain untuk membuat situs web, yaitu menggunakan HTML converter yang terdapat dalam program pengolah
kata. Hampir semua program pengolah kata populer menyediakan fasilitas ini. KIta tinggal membuat dokumen di
program itu seperti biasa, menambahkan hyperlink, menyisipkan gambar atau grafik lain di dalamnya, lalu
menyimpannya sebagai file berformat HTML. Program pengolah kata yang menyediakan fasilitas ini antara lain:

- Microsoft Word versi 97 ke atas (Windows/Mac)

- StarOffice Writer versi 5.1 ke atas (Windows/Unix/Linux)

- Corel WordPerfect versi 7 ke atas (Windows/Mac, versi 8 tersedia untuk Linux)

- OpenOffice.org Writer (Windows/Unix/Linux)



Dreamweaver adalah program desain web berbasis WYSIWYG yang sangat populer. Program ini mula-mula
dikembangkan untuk platform Apple Macintosh, sedangkan untuk Windows Macromedia mengembangkan program
Backstage Designer. Karena Backstage Designer gagal, macromedia kemudian mem-port Dreamweaver ke Windows
dan ternyata sukses, bahkan berhasil menyaingi Microsoft FrontPage di kalangan profesional dan pengguna mahir.
Keunggulan Dreamweaver antara lain :

- Sinkronisasinya dengan standar kode HTML, sehingga kode HTML yang dihasilkannya dapat dibaca dan diedit oleh
program lain. Dalam paket penjualannya, Dreamweaver dilengkapi program editor HTML Homesite (Windows) atau
Barebone Editor (Mac) untuk menyunting kode HTML lebih lanjut.
- Kemampuan HTML dinamiknya serta JavaScriptnya mampu mengatasi dualisme browser IE/Netscape, sehingga bisa
dibaca di kedua browser itu. Berbeda dengan FrontPage yang cuma bisa dibaca di Internet Explorer saja (maklum, satu
pabrik)

- Integrasinya dengan Flash (satu pabrik juga) membuat penyisipan objek Flash ke dalam desain web menggunakan
Dreamweaver sangat mudah dan langsung bisa diedit.

- Tidak banyak menggunakan ekstensi yang aneh-aneh (seperti FrontPage extension) yang membutuhkan server
khusus (Windows NT atau Linux/Unix ditambah modul FrontPage). Sebaliknya, Dreamweaver mendukung semua
pemrograman web seperti ColdFusion (satu pabrik lagi), JSP, ASP, PHP, CGI/Perl, bahkan WML. Untuk pengembangan
situs e-commerce berbasis ASP, tersedia program Dreamweaver Ultradev.

- Dengan Macromedia Extensions Manager dan dukungan komunitas Macromedia Exchange, kita bisa mendownload
banyak program tambahan dan plugin secara gratis dari internet.

Tentu saja semua itu tidak didapat dengan gratis. Harga program ini cukup mahal untuk ukuran program sejenisnya,
sekitar US$ 300, sedangkan FrontPage cuma US$ 179, dan tersedia dalam paket Microsoft Office (mulai edisi Small
Business). Namun, untuk versi terbarunya, Dreamweaver MX, tersedia dalam satu paket Macromedia Studio MX, yang
berisi program-program Dreamweaver, Flash, Fireworks, ColdFusion Studio, Homesite, dan Freehand dengan harga
ekonomis (dibandingkan beli satu-satu).



Prinsip penggunaan Dreamweaver sebenarnya sederhana, yaitu :

- Jangan mengharapkan template built-in. Dreamweaver tidak mengemas template siap pakai, kecuali Anda mau
mendownloadnya dari internet

- Sebaliknya, Anda dibebaskan membuat template sendiri dengan memanfaatkan fasilitas Dreamweaver

- Sebelum membuat halaman web, buat dulu situs web anda, di bagian server. BUat folder khusus untuk menampung
situs web anda, misalnya di c:\My Documents\My Webs\Namasitus

- Buatlah template terlebih dahulu dengan pendekatan mudah. Anggaplah halaman web sebagai kliping, dengan layer
sebagai potongan-potongan koran/majalah yang akan ditempel

- Buatlah layer kosong, isi dengan gambar/teks/grafis lain yang ingin Anda tempatkan dalam halaman web Anda

- Atur ukuran dan penempatan layer dalam halaman web, dengan patokan lebar halaman harus sesua resolusi layar
yang digunakan (640x480, 800x600, atau 1024x768). Gunakan patokan dalam preferences untuk mengatur lebar
halaman (sekitar 620 untuk resolusi 640x480 atau 760 untuk resolusi 800x600)

- Sesuaikan pengaturan ukuran dan penempatan layer, lalu simpan sebagai template (save as template)

- Jika menginginkan tampilan yang berbeda antarhalaman, langsung saja simpan sebagai halaman web, dengan
memberi judul pada page properties

- Untuk penyesuaian lebih lanjut, editlah kode HTML yang tersedia secara langsung (melalui codeview) atau
menggunakan Homesite

- Berhubung layer hanya didukung browser versi 4 ke atas, Anda bisa mengonversi layer ke tabel, untuk memastikan
kompatibilitasnya dengan browser kuno menggunakan menu convert layer to table. Anda bisa mengonversinya kembali
ke layer dengan menu convert table to layer

- Gunakan Link validation untuk mengontrol link antarhalaman web yang Anda buat, jika ada link yang rusak (broken
links), perbaiki link di halaman tersebut

- Gunakan fasilitas HTML validation untuk mengecek sintaks kode HTML

- Gunakan browser favorit Anda untuk melihat tampilan situs web Anda

- Ada beberapa fasilitas tambahan yang bisa dimanfaatkan, seperti image map, image swap (gambar berubah jika
didekati mouse), dan flash button untuk menambah cantik tampilan web Anda

- Jika komputer Anda terhubung ke internet/web hosting, Anda bisa melakukan administrasi situs web Anda lewat FTP
server yang tersedia

- Jika kurang jelas, tersedia banyak bantuan di Dreamweaver. Ada help, tutorial, dan juga referensi HTML dari O'Reily

- Tersedia juga opsi untuk penggunaan CSS, yang sangat dianjurkan untuk memisahkan tampilan dari konten, di tab
styles

- Asset Manager mendaftar semua sumber daya yang digunakan di situs web yang sedang dibuat, seperti gambar,
movie, audio, script, link, dan template