Mengedit Web dengan Dreamweaver

Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe
Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan
lebih praktis dibandingkan harus membuat kode html.
Ketika dokumen Adobe Photoshop (download: situs_bisnis.zip) tersimpan dalam bentuk web
maka secara otomatis akan membuat tag html sendiri sehingga tidak perlu bersusah payah
mengetik kode html. Anda dapat membuktikan sendiri seperti nampak pada gambar berikut.

1. Mengubah Objek menjadi Background

Tidak semua gambar (image) yang pada web yang telah kita buat diganti. Jika image tersebut
berfungsi sebagai tombol, maka Anda dapat menambahkan menu pull down agar tampilan
website lebih menarik. Anda juga dapat membuat tombol dalam bentuk mouse over, dan lain
sebagainya.
Pada bagian ini, kita akan mencoba membahas tentang teknik penggantian objek gambar menjadi
latar belakang (backgrdound) agar kita dapat memasukkan beberapa komponen di dalamnya
(teks maupun grafik).

1. Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver.

2. Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan latar
belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik
image di bagian bawah teks New Product.

3. Pada bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak
dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image, bukan

merupakan background. Tekan Del untuk menghapusnya.

4. Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar
belakang (background). Oleh karena nama file yang baru saja dihapus adalah
index_26.gif maka gunakan file tersebut sebagai latar belakang.

5. Ketikkan images/index_26.gif pada kolom Bg.

6. Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar belakang
agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.
2. Memasukkan Objek

Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia
Dreamweaver proses memasukkan objek sangat mudah karena sudah disediakan tool yang
sangat lengkap. Anda tinggal memilih objek apa yang akan dimasukkan. Berikut ini akan
membahas masalah teknik memasukkan objek berupa teks.
1. Letakkan kursor pada tempat yang akan ditambahkan teks.

2. Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.

3. Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut
seperti nampak pada gambar berikut.

4. Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, pertama
kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image.

5. Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.

6. Apabila berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di depan
paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh
gambar tersebut.

7. Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks akan
berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel Properties
pilih Left untuk Align.

MEMBUAT LINK DAN NAVIGASI

Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika mencari
informasi yang dibutuhkan. Sebaiknya menggunakan tombol menu yang umum, seperti: Home,
Product, Service, dan Contact Us
Dalam Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara
mudah. Anda tidak bersusah payah menuliskan script yang panjang dalam bahasa Javascript
karena telah disediakan tool yang sangat mudah dan fleksibel.
1. Membuat Pop-up Menu
Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain yang sejenis
adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi mereka
yang masih awan dengan bahasa Java, tidak perlu bingung karena disediakan panel Behavior
untuk mempermudah dalam pembuatan menu pop-up.
Sebelum membuat pop-up menu terlebih dulu harus menyiapkan nama file sebagai link. Sebagai
contoh: ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer
seperti Acer, HP, BenQ, dan lain sebagainya. Dan ketika user memilih salah satu opsi (missal:
Acer) maka akan terhubung ke file tersebut.
Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti
halaman utama, yaitu menyimpan dengan nama lain (contoh: Save As > acer.html). Diasumsikan,
Anda telah memiliki beberapa file sebagai link yang dimaksud.
1. Pertama kali, klik menu PC.

2. Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih menu
Window > Behaviors.

3. Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk
membuka menu.

4. Selanjutnya pilih Show Pop up Menu.

5. Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu
yang masih kosong.

6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).

7. Kemudian masukkan alamat URL pada kolom Link.

8. Selanjutnya pada kolom Target, pilih _parent.

9. Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan
hal sama seperti pada tahap 6.

10. Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar belakang pop up
menu. Tentukan jenis dan ukuran font yang digunakan. Lalu tentukan pula warna teks dan
warna cell ketika mouse berada di atas teks.

11. Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up
menu.

12. Klik Tab Position untuk menentukan posisi pop up menu.

13. Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.

14. Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.
2. Membuat Rollover Image
Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu juga
menyediakan tool untuk membuat Rollover Image sebagai tombol. Yang harus Anda lakukan
pertama kali adalah menyediakan dua buah gambar yang ukurannya sama tapi warnanya
berbeda.
1. Buatlah duplikasi gambar tombol yang telah ada.

2. Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih
menu Image > Adjustment > Hue/Saturation.

3. Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser
Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan

dokumen tersebut dengan cara menekan Ctrl+S.

4. Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.

5. Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert
> Image Objects > Rollover Image.

6. Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom
Image name kemudian tentukan gambar asli pada kolom Original Image. Untuk
mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk gambar
rollover pada kolom Rollover Image.

7. Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika
tombol tersebut di klik.

8. Untuk melihat hasilnya, tekan tombol F12.

MEMBUAT WEBSITE DENGAN DREAMWEAVER CS 4 (Bagian I

Mengenal Dreamweaver CS4)
Posted on Juli 30, 2009 by Tomy Hendarman

Membuat website bukanlah pekerjaan yang mudah, bahkan boleh jadi merupakan pekerjaan yang
rumit. Bagi kebanyakan orang, pekerjaan membuat website lebih dianggap sebagai sebuah
pekerjaan yang hanya dilakukan oleh para programmer. Bahkan lebih dari itu, pekerjaan
merancang website pun menjadi salah satu pekerjaan yang paling sulit untuk dimengerti. Banyak
programmer yang merasa kesulitan ketika diminta untuk merancang website, mengingat
kemampuan merancang sangat berbeda dengan kemampuan programming. Demikian sebaliknya,
seorang desainer grafis banyak yang merasa kesulitan untuk membuat website, mengingat
kemampuan programming mereka sangat terbatas.

Membuat Website itu Mudah !

Adakah jalan yang dapat mempermudah pekerjaan membuat website ? Pepatah bilang: Banyak
jalan menuju Roma. Kita bisa menggunakan berbagai macam cara untuk membuat website.
Salah satu jalan yang mudah untuk merancang dan membuat website adalah dengan
menggunakan perangkat lunak paling populer untuk membangun website: Adobe Dreamweaver.
Adobe Dreamweaver adalah salah satu perangkat lunak canggih yang dapat Anda gunakan untuk
merancang dan membangun website. Dengan menggunakan Adobe Dreamweaver, pekerjaan
membuat website yang rumit sekalipun akan menjadi pekerjaan yang mudah. Banyak fitur yang
dimiliki oleh Adobe Dreamweaver untuk keperluan pembuatan website, sebagai berikut :
Peralatan Lengkap untuk Merancang Halaman Web

Adobe Dreamweaver memberi kemudahan untuk merancang dan menata halaman demi halaman
website, dengan menyediakan berbagai Tools yang siap pakai. Sangat mudah untuk menyisipkan
elemen-elemen apapun yang kita perlukan, seperti Text, Gambar, atau Media lain sekalipun
(suara, film, animasi flash, dll.)

Dengan cara ini kita bisa membuat halaman website yang canggih dan dilengkapi dengan
berbagai media masa kini, tanpa harus tahu sedikitpun pemrograman di dalamnya. Adobe
Dreamweaver telah menyiapkan berbagai perangkat siap pakai dan akan menuliskan kode-kode
yang diperlukan ketika kita menggunakan perangkat tersebut.

Panel Insert memudahkan kita untuk menyisipkan berbagai jenis text, gambar, atau media lain.
Pengelolaan Situs

Adobe Dreamweaver dilengkapi dengan fitur untuk memudahkan pengelolaan situs, bahkan di
dalamnya telah disiapkan File Transfer Protocol (FTP) yang dapat menghubungkan file-file yang
tengah kita kerjakan dengan server. Dengan kemampuan tersebut, maka kita bisa yakin website
yang sedang kita bangun akan berjalan dengan baik.
Jika kita merancang halaman dengan menggunakan CSS (Cascading Style Sheets), maka
Browser Compatibility Check dan CSS Advisor akan membantu kita menemukan masalah dan
sekaligus memperbaikinya. Hal ini berhubungan dengan penggunaan browser yang berlainan.
Lingkungan Pemrograman

Adobe Dreamweaver memberikan kemudahan untuk dijadikan sebagai lingkungan pemrograman

web. Kita dapat mengedit kode-kode HTML secara langsung dan kemudian berpindah-pindah
dari tampilan programming ke tampilan desain. Dengan fasilitas color-coding, indentasi, dan alat
bantu visual lainnya, Adobe Dreamweaver menjadi sebuah lingkungan yang nyaman untuk
pemrograman web, baik bagi pemula maupun tingkatan yang lebih lanjut.
Adobe Dreamweaver dilengkapi dengan pemrograman untuk lingkungan bahasa Javascript,
ColdFusion, PHP, ASP.NET. Dilengkapi dengan Panel Specialized Insert Menu dan Panel Code
untuk menuliskan pemrograman sesuai dengan bahasa yang kita kuasai.

Panel Code view sekaligus berfungsi sebagai Text Editor dengan fasilitas Color-code, dapat
menuliskan berbagai bahasa scripting.
Apa Yang Baru dalam Dreamweaver CS4 ?

Adobe melakukan banyak perubahan pada Dreamweaver CS4. Perubahan yang dilakukan
menyangkut inovasi pada desain dan pengembangan pada fitur pemrograman. Pada versi ini kita
akan menemukan Dreamweaver yang lebih menyatu dengan produk lainnya dari Adobe,
khususnya Photoshop. Sebagai bagian dari Adobe Creative Suite, maka image yang digunakan
dalam Dreamweaver akan terhubung dengan Photoshop. Dengan cara ini kita akan bisa mengedit
secara langsung image dengan Photoshop dan menyimpan perubahannya.
User Interface

Salah satu hal yang patut dicatat pada Adobe Dreamweaver CS4 adalah tersedianya banyak
pilihan interface yang tersimpan dalam bentuk menu Workspace. Kita dapat memilih konfigurasi
yang paling sesuai untuk dapat menangani pekerjaan yang tengah kita hadapi.
Hal baru lain dalam penangan interface adalah kita diberi kebebasan untuk mengubah
konfigurasi interface dan kemudian hasilnya dapat disimpan dalam bentuk Workspace tersendiri.
Ruang kerja lebih besar dapat kita konfigurasikan hanya dengan memilih workspace Designer
Compact.

Kita dapat memilih layout Interface yang disediakan sesuai dengan fokus pekerjaan.
Live View

Dreamweaver yang terdahulu menggunakan model statis untuk memperlihatkan tampilan web
yang sedang dibuat. Pada Dreamweaver CS4 kemampuan tersebut ditambah dengan fitur baru
yakni Live View. Dengan fitur ini kita dapat melihat hasil akhir yang akurat, lengkap dengan
menu dan tombol yang interaktif.
Live View dibuat dengan menggunakan WebKit rendering engine juga dipergunakan dalam
browser Safari dan Adobe AIR. Dengan fasilitas ini kita dapat melihat preview halaman web
secaara akurat. Selain itu, kita dapat melihat halaman web yang sedang dikerjakan secara
interaktif beserta seluruh bagian yang berhubungan.

Web yang sedang dirancang ditampilkan dengan Live View.

File-file yang Berhubungan

Mengingat website masa kini menggunakan berbagai macam file seperti CSS, Javascript, dan
lain-lain, maka pengelolaannya menjadi semakin rumit. Salah satu fitur baru yang ada di
Dreamweaver CS4 adalah ditampilkannya file-file yang dipergunakan oleh satu halaman
website. File-file tersebut ditampilkan dalam satu deret pada bagian paling atas dokumen yang
tengah dibuka.

File-file yang berhubungan ditampilkan dalam satu deret.

Code Navigator

CSS (Cascading Style Sheets) dewasa ini telah menjadi standar dalam pengaturan tampilan style
pada text dan bagian-bagian lain yang berhubungan dengan tampilan yang dibuat seragam.
Dengan adanya Code Navigator, maka secara cepat kita dapat melihat properti yang
dipergunakan dalam bentuk CSS.

Code Navigator mempermudah proses menampilkan dan memperbaiki properti pada CSS.
Panel Properties Yang Membedakan HTML dan CSS

Perbaikan yang cukup signifikan lainnya adalah pada panel Properties. Adobe Dreamweaver
membedakan kode properti untuk HTML dan CSS. Berbeda dengan versi-versi sebelumnya yang
kadang-kadang pengaturan properti dituliskan sebagai kode HTML biasa atau sebagai kode CSS
dengan nama yang dituliskan secara otomatis, seperti Style1, Style2, dan seterusnya.
Dengan demikian, apabila kita ingin menuliskan style tulisan ke dalam kode HTML, maka
tinggal klik pada tombol HTML. Demikian halnya, apabila kita ingin menuliskan style ke dalam
CSS, maka klik tombol CSS.

Panel Properties pada Dreamweaver CS4 memisahkan kode HTML dan CSS.
HTML Data Set

Fitur baru pada Dreamweaver CS4 ini memungkinkan kita untuk mengubah file HTML biasa
menjadi sebuah sistem database kecil. Contohnya, kita bisa membuat halaman web dengan kode
HTML biasa yang terdiri atas baris dan kolom, kemudian table dengan baris dan kolom tersebut
dapat di-import ke dalam Dreamweaver dalam format lain (menggunakan Javascript atau Spry).
Proses selanjutnya tinggal mengisi data dalam berbagai macam cara.

Panel HTML Data Set untuk membuat dan mengolah data.

Smart Object

Fitur baru ini memungkinkan Dreamweaver untuk membaca dokumen Photoshop (file PSD) dan
memberi dukungan langsung terhadap format file tersebut. Sebagai contoh, kita dapat
memasukkan (insert > image) dokumen Photoshop dan kemudian melakukan optimisasi terhadap
format file yang dipergunakan (misalnya menjadi .gif, .jpeg, atau .png).
Andaikan suatu saat file PSD tersebut telah mengalami perubahan misalnya karena telah diedit,
maka Dreamweaver secara otomatis akan memberitahu dengan memberi tanda panah merah
pada gambar tersebut.

Smart Object memudahkan proses optimisasi dan updating file image.

Demikian, mudah-mudahan informasi ini bermanfaat. Kita lanjutkan ke topik berikutnya.

MEMBUAT WEBSITE DENGAN DREAMWEAVER CS 4 (Bagian II

Menyiapkan Situs Baru)
Posted on Agustus 3, 2009 by Tomy Hendarman

Membuat Website dengan Dreamweaver CS4

Jika Anda orang yang baru mulai belajar membuat website, maka akan ada banyak hal yang
perlu dipelajari dalam cara pembuatan website. Secara umum, banyak orang memulai langkah
pembuatan website dengan membuat sketsa atau rencana kasar. Sketsa kasar biasanya dibuat
dengan berbagai macam cara, misalnya coretan atau gambar di atas kertas. Sketsa tersebut
kemudian dibuat menjadi gambar grafis dengan menggunakan software Desain Grafis seperti
Adobe Photoshop. Langkah selanjutnya adalah membuat halaman HTML dengan menggunakan
Adobe Dreamweaver. Dengan demikian, Adobe Photoshop berperan sebagai software untuk
merancang, sedangkan Dreamweaver menjadi software yang dipergunakan untuk menata
halaman. Kenyataannya, pembuatan situs besar maupun kecil bisa dikelola dengan menggunakan
Adobe Dreamweaver.
Langkah Persiapan

Dalam dunia internet, sebuah situs dikenal karena memiliki identitas yang berbeda dari situs
lainnya. Ibaratnya sebuah barang yang diproduksi oleh pabrik, maka situs tersebut memiliki
merek, citra produk (brand image), warna serta desain yang menjadi ciri khasnya. Dengan
demikian, kita dapat mengenal Google, Yahoo!, WordPress, Facebook, dan sebagainya sebagai
sebuah identitas dari alamat situs yang mereka miliki.
Langkah permulaan membuat situs adalah dengan menentukan hal-hal yang berhubungan dengan
identitas situs dan di mana situs tersebut akan ditempatkan. Berikut ini adalah beberapa langkah
yang bisa kita lakukan untuk menyiapkan sebuah situs baru :

1. Buka Adobe Dreamweaver CS4. Jika Anda belum terbiasa, maka cara
memulai Adobe Dreamweaver adalah dengan memilih tombol Start > All
Programs > Adobe Master Collection CS4 > Adobe Dreamweaver
CS4.
2. Anda akan dihadapkan pada Menu Pembuka Adobe Dreamweaver CS4. Untuk
memulai situs baru, klik pada menu Create New > Dreamweaver Site.

Dreamweaver site
3. Kotak dialog Site Definition akan segera terbuka. Pada form isian pertama
kita bisa menuliskan nama website yang akan kita buat dan pada form kedua
kita bisa mengisikan alamat online secara lengkap website yang akan kita
buat. Tapi, berhubung kita belum menggunakan alamat server secara online,
maka alamat ini sementara tidak perlu diisi. Klik pada tombol Next.

Site Definition
4. Selanjutnya adalah pilihan untuk menggunakan Server Technology (yakni
ColdFusion, ASP.NET, ASP, JSP, dan PHP) atau tidak menggunakan Server
Technology (web statis). Server Technology akan menyebabkan file-file ditulis
dalam format sesuai dengan jenis server. Berhubung pada tahap awal ini
belum menggunakan Server Technology, maka kita bisa lanjutkan ke tahap
berikutnya. Pastikan pilihan masih pada No, I do not want to use a server
technology. Kemudian, klik pada tombol Next.

Server Technology
5. Tahap berikutnya adalah menentukan di mana lokasi file-file kerja kita akan
disimpan. Pada Kotak dialog ini, gantilah form isian di bagian bawah dengan
lokasi folder di mana file-file website akan disimpan.Pastikan pilihan tetap
aktif pada Edit local copies in my machine Cara lain untuk menentukan
lokasi folder adalah dengan browse. Anda bisa klik pada ikon folder dan
menentukan lokasi folder tersebut di harddisk.Selesai menentukan folder
kerja, kita bisa melanjutkan ke proses berikutnya. Klik pada tombol Next.
Penting untuk menyimpan semua file website pada folder yang didaftarkan
pada proses ini. Semua file yang akan di-upload ke server online akan
berhubungan dengan alamat relatif, sehingga harus diletakkan pada satu
folder induk, yakni folder yang didaftarkan.

Folder untuk menyimpan file website

6. Tahap selanjutnya adalah menentukan bagaimana dan di mana file-file
tersebut akan diletakkan pada Remote Server. Proses ini sangat penting
mengingat setelah website terbentuk, maka file-file yang telah dibuat dapat
dikirimkan ke Online Server. Cara yang terbaik untuk mengirimkan file-file
tersebut adalah dengan menggunakan FTP (File Transfer Protocol).Jika Anda
sudah pernah melakukan upload file melalui FTP, maka form-form isian ini
tidaklah terlalu sulit untuk dijelaskan. Anda tinggal mengisi form-form isian
mengenai alamat Web Server (hostname), Folder hosting, FTP Login, dan FTP
Password. Tapi jika Anda belum pernah melakukannya dan belum memiliki
alamat Remote Server, sementara bisa Anda kosongkan.

Setting FTP untuk upload file

7. Nah, berhubung tahapan ini membutuhkan Remote Server, maka untuk

sementara kita bisa lewati. Jangan khawatir karena Adobe Dreamweaver
mengijinkan proses ini dapat dilakukan kemudian. Pengaturan Remote Server
dapat kita isi di lain waktu setelah semua file siap untuk di-upload.Untuk
mengabaikannya, pilih None pada pilihan Remote Server. Lanjutkan dengan
klik tombol Next.

Pilih None pada Remote Server

8. Untuk sementara, tahap persiapan pembuatan situs baru telah selesai.
Namun, apabila semua file telah lengkap dan Anda telah memiliki Hosting
pada sebuah ISP (Internet Service Provider), proses ini dapat Anda lengkapi.

Ringkasan hasil setting

Klik Done untuk mengakhiri.

Perhatikan bahwa di sebelah kanan sekarang telah tersedia folder baru sesuai dengan
yang telah didefinisikan pada tahap sebelumnya.

Folder baru muncul sebagai hasil setting

Membuat Halaman Website Baru

Setelah proses persiapan selesai, kita bisa memulai tahapan awal membuat website. Perlu
diketahui, bahwa halaman website dapat dibuat dengan menggunakan berbagai macam format.
Sebagai contoh, banyak halaman web dibuat dengan format table HTML. Namun, format CSS
lebih dianjurkan mengingat format CSS memiliki banyak kelebihan dan fleksibilitas yang lebih
baik.
Pada contoh latihan pertama ini kita akan menggunakan format HTML mengingat format HTML
adalah dasar dari bahasa yang dipergunakan di web. Sekarang kita bisa mulai membuat halaman
baru. Langkah-langkahnya adalah sebagai berikut :
1. Klik More pada pilihan di bawah kolom Create New. (Alternatif lain adalah
dengan klik pada menu File > New).

Membuat file baru

2. Kotak dialog selanjutnya memperlihatkan jenis dokumen yang akan dibuat,
tipe file, dan template layout yang sudah siap pakai tergantung pada jenis
dokumen yang akan dibuat. Kita dapat mencoba-coba memilih beberapa di
antaranya. Jendela preview di bagian paling kanan akan memperlihatkan
tampilan template yang sedang dipilih.

Kotak Dialog untuk memilih layout

Pada kolom Layout terdapat banyak bentuk kolom yang dapat dipilih. Pada dasarnya
bentuk kolom pada website masa kini menggunakan metoda CSS, sehingga
Dreamweaver menyiapkan layout kolom menggunakan CSS.
Terdapat empat bentuk layout kolom sebagai berikut :

Fixed ; kolom yang tidak dapat diubah, tergantung pada setting pada browser di
komputer pengguna. Lebar kolom menggunakan ukuran piksel.
Elastic ; kolom dapat beradaptasi pada setting text di komputer pengguna, tetapi tidak
berubah ketika browser diperbesar atau diperkecil. Lebar kolom menggunakan ukuran
ems (ukuran pada typography tradisional).
Liquid ; kolom dapat berubah jika browser diperbesar atau diperkecil, tetapi tidak
berubah ketika pengguna mengubah setting text.
Hybrid ; kombinasi dari berbagai tipe kolom.Untuk latihan pertama, kita bisa klik
HTML pada pilihan Page Type dan klik pada None pada pilihan Layout. Klik pada
Tombol Create untuk menyelesaikan proses pembuatan Dokumen baru.
3. Sampai pada tahap ini pembuatan halaman baru dengan format HTML biasa
telah selesai. Anda dapat mencoba menuliskan sebuah kalimat pada bagian
workspace design. Cobalah mengetikkan kalimat berikut : Selamat Datang
di Website Kami.

Jendela Code dan Jendela Design

Tulisan yang telah diketik akan muncul dalam dua jendela, yakni jendela Design dan
jendela Code. Artinya, kita dapat melihat preview website di jendela Design, dan dapat
melihat bagaimana kodenya dituliskan pada jendela Code.
Menyimpan Halaman Web

Pada aplikasi lain, seringkali tempat di mana sebuah file diletakkan tidaklah menjadi masalah.
Namun tidak demikian dengan halaman-halaman website. File-file yang kita ciptakan akan

berhubungan dengan file lain dalam struktur website yang sama. Oleh karena itu, sangatlah
penting untuk meletakkan file-file yang kita buat pada satu folder yang sama.
1. Klik pada menu File > Save.
2. Pada kotak dialog Save As, pastikan Anda meletakkan pada folder yang telah
dibuat pada proses sebelumnya. Jika tidak, carilah folder yang telah dibuat
sebelumnya!
3. Ketikkan pada kotak File name : index.html
File : index.html adalah nama file standar dalam dunia internet yang menjadi
acuan sebuah website. File ini adalah file yang pertama kali dibuka ketika
browser diarahkan untuk membuka alamat website tertentu.

Simpan file sebagai index.html

4. Biarkan kotak Save as type : terisi All Document. Dan pada kotak
Unicode Normalization Form : pilih None.
5. Klik pada tombol Save.

Sampai di sini tahapan awal pembuatan file utama index.html telah berhasil dilakukan. Dengan
demikian kita dapat melanjutkan ke tahap selanjutnya, yakni membuat format text dengan
HTML.

MEMBUAT WEBSITE DENGAN DREAMWEAVER CS 4 (Bagian III

Memulai Halaman Baru)
Posted on Agustus 8, 2009 by Tomy Hendarman

Struktur halaman website dibuat dengan kode-kode HTML. Oleh karena itu, jika kita ingin
menguasai web design, tidak ada jalan lain selain mencoba dan membiasakan diri bekerja dengan
bahasa HTML. Bahasa HTML bukanlah bahasa pemrograman yang rumit. Ia hanyalah sebuah
cara menulis dalam format yang bisa dibaca oleh semua Internet Browser. Kepanjangan dari
HTML adalah Hyper Text Markup Language, artinya adalah bahasa yang bekerja dengan
menggunakan text yang ditandai.

Menambahkan Text
Text dan Image adalah elemen paling penting dalam dunia internet. Keduanya secara bersamasama menjadi elemen pembentuk website. Text dan Image tidak terpisahkan sebagai bagian inti
dari website. Sangatlah jarang kita menemukan website yang hanya terdiri atas teks saja, karena
pasti tidak akan menarik. Demikian sebaliknya, sangat jarang kita menemukan website yang
hanya berupa gambar saja tanpa didampingi oleh teks sebagai penjelasan terhadap gambar
tersebut.
Menambahkan teks dan mengatur format teks dapat dilakukan dengan mudah. Mari kita coba
berlatih membuat halaman web yang berisi satu artikel sebagai berikut :
1. Bukalah Adobe Dreamweaver CS4.

2. Pada menu awal, buatlah file HTML baru. Klik pada tombol HTML di bawah kolom Create
New.

3. Desktop Dreamweaver akan segera terbuka.

Pada jendela Design, ketiklah sebuah artikel yang Anda sukai tanpa melakukan formatting
apapun. Ketiklah beberapa paragraf karena kita akan membutuhkan tulisan yang cukup panjang,
misalnya sebagai berikut :
Menjadi Web Desainer Freelance
Web Desain adalah sebuah tantangan yang menarik. Sebuah pekerjaan yang memadukan
keterampilan merancang halaman dengan kemampuan pemrograman yang canggih. Dua hal
yang wajib dimiliki oleh para jagoan web.
Kemampuan merancang dan kemampuan pemrograman ini tentu membutuhkan penguasaan
yang mumpuni untuk dapat menghasilkan website yang tampil secara menarik, sekaligus mudah
diakses. Ibarat menyatukan dua kutub yang berbeda. Dua kemampuan tadi tentu menyuguhkan
problematika yang sangat bertentangan. Merancang halaman membutuhkan seni dan kreativitas
yang tinggi, yang lebih mengedepankan citarasa, seperti warna, nuansa, keseimbangan, fokus,
irama, dll. Sedangkan kemampuan programming sangat kental dengan disiplin sintax dan
algoritma yang harus taat azas.

Hasilnya akan terlihat seperti di bawah ini :

4. Sekarang kita akan melakukan perubahan terhadap teks yang telah kita buat. Tempatkan
kursor pada jendela Design. Letakkan kursor dan klik pada judul artikel, yakni paragraph
pertama pada tulisan tadi.
5. Untuk mengubah format paragraf pertama, perhatikan pada jendela Properties di bagian bawah
layar. Pada jendela Properties ini kita dapat melakukan perubahan dengan dua macam cara, yakni
mode HTML dan CSS. Kita akan mempelajari penggunaan keduanya nanti. Untuk tahap awal
ini, pilihlah tombol HTML.
Di sebelah kanan tulisan Format, pilihlah Heading 1 dari drop-down menu.

6. Perhatikan, bahwa di jendela Design kita akan melihat paragraf pertama berubah menjadi
huruf dengan ukuran yang lebih besar.

Sedangkan pada jendela Code, kita melihat perubahan kode HTML sebagai berikut :
<p>Menjadi Web Desainer Freelance</p>

Berubah menjadi :
<h1>Menjadi Web Desainer Freelance</h1>

Penjelasannya adalah sebagai berikut :

Bahasa HTML adalah bahasa yang melakukan formatting terhadap teks dengan menggunakan
kode berupa Tag. Penggunaan Tag ditandai dengan kurung tutup siku. Contohnya Tag paragraf
ditandai dengan <p> dan ditutup dengan </p>.
Tag dipergunakan untuk mengapit teks yang diberi format yang berbeda. Terdapat banyak Tag
lain yang berhubungan dengan formatting paragraf. Contohnya jika kita akan menggunakan
format judul artikel (Heading), kodenya adalah sebagai berikut :
<h1> .. </h1> Heading 1
<h2> .. </h2> Heading 2
<h3> .. </h3> Heading 3
<h4> .. </h4> Heading 4
<h5> .. </h5> Heading 5
<h6> .. </h6> Heading 6
7. Perhatikan panel Properties. Berbeda dengan versi sebelumnya, pada Dreamweaver CS4 tidak
ada pengaturan font. Perubahan font hanya dapat dilakukan melalui mode CSS. Hal ini menjadi
pertimbangan mengingat Tag <font> akan tidak diberlakukan lagi (deprecated). Untuk
melakukan perubahan pada font, langkahnya adalah sebagai berikut :
Pastikan kursor berada pada paragraf pertama

Klik pada tombol CSS (di bawah tombol HTML)

Di sebelah kanan Targeted Rule, pilih <New CSS Rule>
Pada bagian Font, pilih Arial, Helvetica, sans-serif dari drop-down menu.

8. Kotak dialog New CSS Rule akan segera tampil memperlihatkan tiga bagian utama, yakni :
Selector Type, Selector Name, dan Rule Definition.
Pada bagian Selector Type, pilih Tag.
Pada bagian Selector Name sekarang akan tertulis h1 sebagai tanda bahwa pengaturan akan
diberlakukan pada Tag h1.
Untuk mengakhiri, klik OK.

9. Dengan melakukan pengaturan melalui

CSS Rule, maka Tag <h1> telah memiliki style yang seragam.
Perhatikan bahwa pada jendela Code telah tertulis kode sebagai berikut :
<style type="text/css">
<!-h1 {
font-family: Arial, Helvetica, sans-serif;
}
-->
</style>

Kode ini menjelaskan bahwa Tag <h1> telah diberi style, yakni diberi font Arial. Dengan
demikian, apabila kita membuat judul di tempat lain dengan menggunakan Tag <h1>, maka
secara otomatis judul tersebut akan diberi style yang sama.
10. Cobalah untuk mengubah warna judul tersebut dengan warna yang Anda sukai. Caranya
adalah sebagai berikut :
Tempatkan dan klik kursor pada tulisan judul.
Pada panel Properties, pastikan tombol CSS sedang aktif. Di sebelah kanan, di bawah drop-down
menu font terdapat kotak kecil untuk mengatur warna. Klik pada kotak tersebut untuk
memunculkan palet warna.
Setelah palet warna muncul, pilih dan klik warna yang Anda inginkan.
Tulisan judul akan berganti warna. Sementara itu, di jendela Code, kode pada Tag <style> juga
akan ditambah dengan kode untuk warna.

<style type="text/css">
<!-h1 {
font-family: Arial, Helvetica, sans-serif;
color: #060;
}
-->
</style>

11. Klik pada menu File > Save untuk menyimpan file yang telah dikerjakan.
12. Beri nama: latihan-1 pada kotak File name. All Document pada kotak Save As Type.

HTML dan CSS

Tag HTML dipergunakan untuk menyusun struktur halaman HTML. CSS dipergunakan untuk
mengatur format pada struktur halaman HTML tersebut. Mungkin pada tahap awal hal ini cukup

membingungkan, namun bisa kita analogikan dengan membangun sebuah bangunan. HTML
dipakai untuk menyusun bangunan tersebut terdiri dari berapa lantai, masing-masing lantai
terdiri dari berapa ruang, dan ruang-ruang tersebut memiliki berapa pintu. CSS dapat
dipergunakan untuk mengatur style dari masing-masing lantai, contohnya jenis bahannya,
warnanya, ketebalannya, dsb, demikian halnya style dari masing-masing ruang dan style dari
masing-masing pintu.
Pada prakteknya, sebuah struktur halaman HTML akan tersusun atas Tag-tag HTML, sebagai
contoh pada halaman HTML akan terdapat Tag <h1> untuk Heading, Tag <p> untuk Paragraf,
Tag <a> untuk Anchor, dsb. Pada struktur halaman tersebut, diperlukan perintah lain untuk
mengatur jenis font, warna, ukuran text, dsb, yang pada era sebelumnya dapat diatasi dengan
penggunaan Tag <font>. Hal ini diprakarsai oleh Netscape dan Microsoft, yang sebetulnya
merupakan tambahan dari Tag HTML standar yang berlaku pada saat itu.
Demikian halnya dengan Tag <table> yang secara luas dipergunakan (baca: disalahgunakan)
untuk mengatur layout halaman website, mengingat pada saat itu tidak ada cara yang lebih
mudah untuk mengatur layout halaman selain dengan memanfaatkan Tag <table>.
CSS dibuat untuk menyediakan berbagai kebutuhan bagi web desainer, dengan berbagai
kemungkinan layout halaman yang canggih dan sekaligus didukung oleh semua internet browser.
Kehadiran CSS bagi web desainer juga dapat memudahkan pengaturan halaman dengan
memisahkan struktur halaman HTML berupa tag-tag HTML, dari style-nya. Dengan demikian,
akan memudahkan maintenance / perawatan website tersebut.
Penulisan CSS sendiri berbeda dengan penulisan tag pada HTML. CSS mengikuti gaya
penulisan Javascript. Pada penulisan HTML, tag akan ditandai dengan kurung siku <tag>.
Sebaliknya, tanda kurung siku pada penulisan CSS tidak dipergunakan.
Pada latihan terakhir kita sudah menyingung penggunaan tag <h1> yang kemudian kita beri style
dengan CSS.
Perhatikan format HTML berikut :
<h1>Menjadi Web Desainer Freelance</h1>

Di bagian atas pada kode HTML tersebut tertulis sebagai berikut :

<style type="text/css">
<!-h1 {
font-family: Arial, Helvetica, sans-serif;
color: #060;
}
-->
</style>

Artinya, pada struktur halaman tersebut tulisan Menjadi Web Desainer Freelance ditempatkan
sebagai Heading 1, karena diapit oleh Tag <h1> dan </h1>. Sedangkan di bagian pengaturan
style CSS, Tag <h1> telah diberi pengaturan style, font-family Arial, dan diberi warna hijau.
Penulisan CSS diawali dengan selector. Pada contoh di atas, h1 adalah selector yang berarti
style ini akan memilih tag h1 dan kemudian mengganti penampilannya. Dengan demikian
Browser internet akan menerapkan style yang ditulis pada CSS dengan selector h1 pada semua
tag <h1>.
Mengingat HTML dan CSS adalah dua bahasa yang berbeda dan letaknya terpisah, sangatlah
penting untuk melihat hasil akhir dengan klik pada tombol Live View.

Menambahkan CSS Baru

Sekarang kita berlatih menerapkan style pada tag yang berbeda.
1. Klik pada tombol Split untuk bekerja dengan dua jendela sekaligus, jendela Code dan jendela
Design.

2. Tempatkan kursor dan klik pada paragraf ke-dua, yakni paragraf yang berisi tulisan Web
Desain adalah
3. Klik tombol CSS pada panel Properties. Kemudian pada bagian menu drop-down Font, ganti
dengan : Arial, Helvetica, sans-serif.
4. Kotak dialog New CSS Rule akan segera terbuka. Pada bagian Selector Type, pilih Tag.
5. Pada bagian Selector Name secara otomatis akan tertulis p. Klik OK untuk mengakhiri.
6. Kembali ke panel Properties. Pada panel Properties akan terlihat mode CSS dengan Targeted
Rule : p. Sekarang kita ganti ukuran teks menjadi 16 px, warna menjadi #333 (Abu-abu tua), dan
alignment menjadi Justify (rata kiri-kanan).

Hasilnya, sekarang pada jendela Design kita akan melihat dua paragraf pada artikel yang telah
kita tulis, ditampilkan dengan font, ukuran, warna, dan perataan yang berbeda dari sebelumnya,
sesuai dengan perubahan yang telah kita lakukan pada panel Properties.
7. Pada jendela Code, kita juga akan melihat ada style p di bawah style h1:
<style type="text/css">
<!-h1 {
font-family: Arial, Helvetica, sans-serif;
color: #060;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #333;
text-align: justify;
}
-->
</style>

8. Sampai di sini kita bisa menyimpan file latihan-1.html ini. Klik pada menu File > Save.

Bekerja dengan Kode CSS

Pada penjelasan sebelumnya kita telah mengenal kode CSS dan HTML. Kita juga telah
mengetahui bahwa cara penulisan kode CSS berbeda dengan kode HTML. CSS tidak

menggunakan kurung siku, sedangkan penulisan Tag HTML menggunakan kurung siku,
contohnya :
<h1>Menjadi Web Desainer Freelance</h1>

Perbedaan tersebut muncul mengingat CSS sebenarnya merupakan bagian atau elemen dari kode
HTML. Hal ini dapat kita lihat pada bagian kode CSS, sebagai berikut :
<style type="text/css">
<!-h1 {
font-family: Arial, Helvetica, sans-serif;
color: #060;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #333;
text-align: justify;
}
-->
</style>

Pada kode CSS di atas terlihat jelas bahwa tulisan kode yang dicetak tebal merupakan Tag
HTML. Kode CSS dibuka dengan Tag <style type=text/css> dan ditutup dengan Tag </style>.
Cara penulisan CSS seperti di atas dinamakan dengan Internal Stylesheet.
Sekarang kita berlatih untuk mengubah kode CSS secara manual, sebagai berikut :
1. Bukalah file: latihan-1.html dengan Dreamweaver CS4.
2. Klik tombol Split untuk bekerja dengan dua jendela sekaligus, Code dan Design.

3. Pada jendela Code, tempatkan kursor di dalam kode CSS.

4. Kita akan mencoba membuat kode CSS secara manual untuk membuat alignment judul
menjadi rata tengah. Pindahkan kursor tepat di belakang kode warna untuk tag h1 (di belakang
kode : color: #060; )
5. Tekan ENTER untuk membuat baris baru.

6. Code Assist akan langsung muncul untuk mempermudah penulisan kode. Anda dapat
menuliskan kode secara manual dengan diketik langsung, atau memilih selector dari Code Assist.

Tuliskan seperti ini :

text-align: center;

7. Kode CSS sekarang akan menjadi seperti ini :

<style type="text/css">
<!-h1 {
font-family: Arial, Helvetica, sans-serif;
color: #060;
text-align: center;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #333;
text-align: justify;
}
-->
</style>

8. Untuk melihat preview dari perubahan kode yang sudah ditulis, klik pada tombol Refresh di
panel Properties.

9. Nah, sekarang pada jendela Design akan terlihat perubahan judul artikel akan berada di
tengah.

10. Simpan pekerjaan Anda. Klik pada menu File > Save.
Dengan contoh latihan di atas, berarti sekarang kita telah mengetahui bahwa kode CSS dapat
dituliskan secara manual. Code Assist dapat membantu kita untuk menentukan nama selector
mana yang akan kita gunakan sekaligus membantu kita menentukan value-nya.
Kita lanjutkan pada topik berikutnya.

MEMBUAT WEBSITE DENGAN DREAMWEAVER CS 4 (Bagian IV

Menambahkan Hyperlink)
Posted on Agustus 15, 2009 by Tomy Hendarman

Menambahkan Judul dan Tagline

Nah, sekarang kita berlatih lagi untuk memperkaya penguasaan kita terhadap kode-kode HTML.
Tag HTML jumlahnya cukup banyak, kita akan mencoba beberapa di antaranya untuk
membentuk halaman HTML sederhana.
1. Bukalah Adobe Dreamweaver CS4.
2. Pada menu awal, buatlah file HTML baru. Klik pada tombol HTML di bawah kolom Create
New.
3. Desktop Dreamweaver akan segera terbuka. Klik tombol Split untuk bekerja dengan dua
jendela sekaligus, Code dan Design.

4. Pada jendela Design, ketiklah tulisan untuk judul website dan semboyannya, misalnya sebagai
berikut :
KURSUS KOMPUTER PRIVAT
Kursus Komputer Paling Bermutu di Kota Anda
HOME | PROFIL | LAYANAN | KONTAK
Selamat Datang di Website Kami

5. Sekarang kita ubah format tulisan judul menjadi Heading 1. Tempatkan kursor pada tulisan
judul di jendela Design. Klik tombol HTML pada panel Properties. Gantilah Format-nya menjadi
Heading 1.

6. Selanjutnya kita akan mengubah style pada tulisan judul tersebut. Kursor masih berada pada
tulisan judul, klik tombol CSS pada panel Properties. Gantilah Font-nya menjadi Arial,
Helvetica, sans-serif.

7. Pada kotak dialog New CSS Rule, gantilah Selector Type menjadi Tag. Selector Name akan
berganti menjadi h1. Klik OK untuk mengakhiri.
8. Kembali ke tampilan sebelumya. Pada panel Properties, klik pada tombol Align Center.

9. Selanjutnya kita akan mengubah format tulisan tagline-nya. Tempatkan kursor pada tulisan
baris kedua.
10. Klik tombol HTML pada panel Properties. Kemudian, gantilah Format-nya dengan Heading
3. Tulisan tersebut akan berukuran lebih besar dan tebal..
11. Untuk membuat tulisan rata tengah, klik pada tombol CSS pada panel Properties. Kemudian
klik pada tombol Align Center.
12. Kotak dialog New CSS Rule segera terbuka. Gantilah Selector Type menjadi Tag. Selector
Name akan berubah menjadi h3. Klik OK untuk mengakhiri.

13. Sekarang kita akan menambahkan garis horizontal sebagai pembatas bagi menu utama pada
halaman ini. Tempatkan dan klik kursor pada posisi terakhir tulisan baris kedua, kemudian klik
pada tombol Horizontal Rule pada panel Insert.

14. Lakukan hal yang sama untuk menambahkan garis horizontal di bawah menu utama.
Tempatkan kursor pada posisi terakhir tulisan baris ketiga, kemudian klik pada tombol
Horizontal Rule pada panel Insert.

Nah, pada contoh di atas kita telah berlatih membuat format Judul dan Tagline untuk digunakan
sebagai judul halaman website. Pada latihan selanjutnya kita akan membuat hyperlink dan
tulisan berjalan (marquee)

Membuat Hyperlink dan Tulisan Berjalan

Hyperlink adalah bagian paling penting dari website. Hyperlink menghubungkan satu halaman
web dengan halaman lainnya. Sebuah website tentu tidak hanya berupa halaman tunggal semata,
melainkan bisa terdiri atas beberapa sampai puluhan atau bahkan ratusan halaman. Masingmasing halaman pada website diberi hyperlink agar pengunjung dapat dengan mudah
menemukan apa yang dicari. Dengan demikian, perencanaan struktur menu pada sebuah website
menjadi hal yang sangat penting.
Hal lain yang biasanya ada dalam sebuah website adalah tulisan berjalan. Tulisan berjalan atau
marquee dipergunakan untuk menyampaikan pesan khusus yang diperlihatkan dengan teks
bergerak. Gerakan yang ditimbulkan oleh marquee akan menarik perhatian pengunjung website.
Hal inilah yang menyebabkan marquee banyak dipakai oleh pemilik website untuk menuliskan
pesan-pesan khusus tadi.
Kita lanjutkan latihan terakhir untuk menambahkan hyperlink sederhana dan tulisan berjalan
pada halaman web yang sudah kita buat.
1. Pada jendela Design, sorotlah tulisan HOME yang akan kita jadikan hyperlink.
2. Pada panel Insert, klik tombol Hyperlink.
Kotak Dialog Hyperlink akan segera muncul memperlihatkan form Text yang sudah berisi
tulisan HOME.
Form Link dapat kita isi dengan nama file. Khusus untuk hyperlink HOME bisa kita isi dengan
file index.html. Cara lain adalah dengan klik pada ikon folder di sebelah kanan drop-down
menu, lanjutkan dengan memilih file index.html.
Form Target untuk sementara bisa kita tinggalkan.
Klik OK untuk mengakhiri.

3. Nah, sekarang tulisan HOME sudah menjadi hyperlink yang dapat berlaku sebagai tombol
menju ke halaman index.html.

Perhatikan bahwa tulisan HOME sekarang menjadi berwarna biru sebagai tanda bahwa tulisan
tersebut telah aktif sebagai hyperlink.
4. Selanjutnya, kita dapat melakukan hal sama dengan langkah yang lebih sederhana untuk
tulisan LAYANAN, GALLERY, dan KONTAK. Caranya adalah sebagai berikut :
Sorot tulisan LAYANAN, kemudian pada panel Properties isilah form Link secara manual,
ketikkan layanan.html. Tekan ENTER.
File layanan.html belum ada karena belum kita buat, jangan khawatir karena kita akan membuat
file ini nanti.

Lakukan hal yang sama untuk tulisan GALLERY, dan KONTAK.

Nah, sekarang keempat hyperlink pada baris menu telah selesai dibuat.
5. Selanjutnya kita akan membuat tulisan berjalan atau marquee. Sorotlah baris terakhir tulisan
pada halaman website kita Selamat Datang di Website Kami
6. Klik tombol Tag Chooser pada panel Insert. Kotak dialog Tag Chooser akan segera terbuka
memperlihatkan semua Tag yang dapat kita pilih.
Klik pada folder HTML tags. Subfolder pada HTML tags akan terbuka.
Klik pada subfolder Page Elements. Kolom di sebelah kanan sekarang akan terisi dengan tag-tag
yang dapat dipilih.
Klik pada marquee yang terdapat di kolom sebelah kanan. Klik tombol Insert untuk
memasukkan tag marquee ke dalam halaman kerja kita.
Klik tombol Close untuk mengakhiri.

7. Tulisan Selamat Datang di Website Kami sekarang telah menjadi marquee. Untuk melihat
hasilnya kita dapat mengaktifkan tombol Live View.

8. Sekarang kita bisa menyimpan file hasil kerja kita. Klik pada menu File > Save As.
Pada kotak dialog Save As, ketik atau pilihlah file index.html. Klik pada tombol Save.
Pada kotak dialog overwrite, klik tombol Yes untuk mengganti file index.html yang telah ada.
Lebih Jauh tentang Hyperlink

Ketika kita berkunjung ke sebuah alamat website yang menarik, biasanya yang kita buka adalah
halaman utamanya (bisa berupa file: index.html). Halaman utama tersebut biasanya
dipergunakan untuk menyimpan segala macam informasi mengenai isi website. Namun, tentu
saja tidak semua informasi disiapkan pada halaman utama. Hal ini disebabkan halaman tersebut
akan menjadi terlalu besar untuk dibuka, terlalu panjang dan menjadi tidak menarik lagi. Sebagai
gantinya, informasi yang banyak tersebut disebar dalam bentuk halaman-halaman tersendiri.
Hyperlink dipergunakan untuk membuat struktur halaman web yang lebih rapi. Pengunjung yang
memerlukan informasi yang lebih rinci dapat mencari pada halaman-halaman lain dengan
berpedoman pada menu yang disediakan. Dengan demikian, menu yang disiapkan dalam bentuk

hyperlink tersebut harus direncanakan dengan baik. Dengan menu yang terstruktur baik, maka
pengunjung akan mudah mengakses informasi yang disediakan.
Hyperlink selain dipergunakan untuk membuka halaman lain di dalam website itu sendiri, juga
bisa dikaitkan ke alamat-alamat lain yang berada di luar website, atau bisa juga dipergunakan
untuk menunjukkan alamat email tertentu. Perbedaan ketiganya ada pada cara penulisan
hyperlink.
Alamat Relatif dan Alamat Absolut

Ketika kita akan mengirimkan surat kepada seseorang yang berada pada ruangan yang sama,
maka kita bisa menuliskan alamat tersebut cukup dengan nama orangnya saja. Pada sampul surat
kita tuliskan nama si A, maka surat tersebut akan sampai pada orang yang dituju.
Penyebutan alamat tersebut akan sedikit berbeda jika orang yang kita kirimi surat berada di
ruangan lain pada gedung yang sama. Contohnya : si A di lantai 3.
Demikian halnya jika kita menyusun website terdiri atas beberapa halaman, misalnya :
index.html, layanan.html, gallery.html, dan kontak.html. Untuk menuju ke halaman yang berbeda
dari alamat sekarang, kita menuliskan alamat tersebut secara langsung, yakni index.html,
layanan.html, gallery.html, atau kontak.html. Hal inilah yang kita lakukan pada latihan
sebelumnya.
Lain halnya jika website yang kita kelola cukup besar, maka dalam struktur direktori file sangat
mungkin dibuatkan folder-folder untuk menyimpan file-file menurut kelompoknya masingmasing. Nah, untuk membuka file HTML yang berada di folder lain, kita dapat menuliskan nama
folder di depan nama file. Contohnya gallery/product.html untuk membuka file product.html
yang berada di dalam folder gallery. Atau ../index.html untuk membuka file index.html yang
berada di folder yang lebih tinggi.
Penyebutan nama file tanpa menyertakan alamat website dinamakan dengan Alamat Relatif.
Disebut alamat relatif karena alamat yang dituju tidak mencerminkan alamat yang sebenarnya.
Apabila kita menyebutkan alamatnya adalah index.html, maka dapat kita bayangkan bahwa
index.html tersebut akan ada pada puluhan juta bahkan sampai milyaran website di seluruh
dunia.
Sebaliknya, jika kita akan menulis surat kepada seseorang yang jauh. Pastikan alamatnya ditulis
secara lengkap dan benar. Contohnya : si A di Lantai 6 gedung X di jalan Salemba, Matraman
JAKARTA. Maka surat tersebut akan sampai pada si alamat, sekalipun dikirim dari luar negeri.
Sama halnya jika informasi yang dimaksud berada pada sebuah file di alamat website tertentu di
luar website kita, maka kita harus menuliskan alamatnya secara lengkap dan benar, misalnya:

http://www.kursusprivat.com/tutorial/index.html. (Perhatikan bahwa penulisan alamat website

ditulis dengan alamat berupa http:// Diikuti dengan alamat website dan file serta folder di
mana file tersebut berada).
Alamat file secara lengkap beserta dengan alamat websitenya dinamakan dengan Alamat
Absolut. Disebut absolut karena file yang dituju tersebut hanya akan ada satu di dunia.
Kedua cara penulisan alamat tersebut di atas diperbolehkan dan akan sering kita gunakan.
Pastikan kita menuliskan alamatnya secara jelas dan benar.
Perhatikan kode HTML yang dipergunakan untuk membentuk link :
<a href=index.html>HOME</a>

Tag <a></a> (singkatan dari anchor) mengapit teks yang dijadikan hyperlink, atribut
href=namafile diletakkan di dalam tag <a> untuk menentukan nama file atau alamat file yang
dituju oleh hyperlink.
Link ke Alamat e-mail

Alamat email seringkali diperlukan bagi pemilik website untuk memudahkan komunikasi dengan
pengunjungnya. Dengan membuat sebuah link ke alamat email tentu akan lebih mempermudah
proses komunikasi ini. Pengunjung dapat menghubungi pemilik website dengan hanya klik pada
link yang disediakan.
Berikut ini adalah langkah-langkah pembuatan link ke alamat email :
1. Tuliskan teks ini di bagian paling bawah halaman index.html :
Alamat email : info@kursusprivat.com

2. Sorotlah tulisan info@kursusprivat.com. Kemudian klik tombol Email Link pada panel Insert.
Kotak dialog Email Link akan segera terbuka memperlihatkan dua form yakni form Text dan
form Email. Secara otomatis dua form tersebut telah diisi dengan alamat email yang telah dibuat
sebelumnya. Form Text adalah untuk menuliskan teks yang dapat dibaca oleh pengunjung. Form
Email adalah untuk menuliskan alamat email.

3. Klik OK untuk mengakhiri.

Alamat email sekarang menjadi berwarna biru sebagai tanda bahwa teks ini sekarang aktif
sebagai link.
Email link jika diklik akan mengaktifkan email client, yakni software yang akan langsung
terbuka untuk menuliskan email ke alamat yang ditulis pada email link. Contoh email client yang
banyak dipergunakan adalah Microsoft Outlook.
4. Sampai di sini kita bisa menyimpan hasil pekerjaan.
Demikian pembahasan mengenai Hyperlink. Kita lanjutkan ke topik berikutnya.