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 BackgroundTidak 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 ObjekObjek 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 NAVIGASIMenu 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 UsDalam 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 MenuKeunggulan 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 ImageMacromedia 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
DreamweaverCS4)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 WebAdobe
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 SitusAdobe 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 PemrogramanAdobe
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 InterfaceSalah
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 ViewDreamweaver 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 BerhubunganMengingat 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
NavigatorCSS (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
CSSPerbaikan 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 SetFitur 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
ObjectFitur 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
SitusBaru)Posted on Agustus 3, 2009 by Tomy Hendarman
Membuat Website dengan Dreamweaver CS4Jika 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
PersiapanDalam 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 site3. 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 Definition4. 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 Technology5. 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 website6. 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 file7. 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 Server8. 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 settingKlik 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 settingMembuat Halaman Website
BaruSetelah 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 baru2. 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 layoutPada 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 DesignTulisan 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 WebPada 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.htmlFile : 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.html4. 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
HalamanBaru)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 TextText dan Image
adalah elemen paling penting dalam dunia internet. Keduanya secara
bersama-sama 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 FreelanceWeb 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 :Menjadi Web Desainer FreelanceBerubah menjadi
:Menjadi Web Desainer FreelancePenjelasannya 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 dan
ditutup dengan .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 : ..
Heading 1 .. Heading 2 .. Heading 3 .. Heading 4 .. Heading 5 ..
Heading 67. 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 akan tidak diberlakukan lagi
(deprecated). Untuk melakukan perubahan pada font, langkahnya
adalah sebagai berikut :Pastikan kursor berada pada paragraf
pertamaKlik pada tombol CSS (di bawah tombol HTML)Di sebelah kanan
Targeted Rule, pilih 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 telah
memiliki style yang seragam.Perhatikan bahwa pada jendela Code
telah tertulis kode sebagai berikut :
Kode ini menjelaskan bahwa Tag telah diberi style, yakni diberi
font Arial. Dengan demikian, apabila kita membuat judul di tempat
lain dengan menggunakan Tag , 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 juga akan ditambah dengan kode untuk
warna.
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 CSSTag 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 untuk Heading, Tag untuk Paragraf,
Tag 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 . Hal
ini diprakarsai oleh Netscape dan Microsoft, yang sebetulnya
merupakan tambahan dari Tag HTML standar yang berlaku pada saat
itu.Demikian halnya dengan Tag 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 .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 . Sebaliknya, tanda kurung siku pada penulisan CSS
tidak dipergunakan.Pada latihan terakhir kita sudah menyingung
penggunaan tag yang kemudian kita beri style dengan CSS.Perhatikan
format HTML berikut :Menjadi Web Desainer FreelanceDi bagian atas
pada kode HTML tersebut tertulis sebagai berikut :
Artinya, pada struktur halaman tersebut tulisan Menjadi Web
Desainer Freelance ditempatkan sebagai Heading 1, karena diapit
oleh Tag dan . Sedangkan di bagian pengaturan style CSS, Tag 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 .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 BaruSekarang 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 adalah3. 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:
8. Sampai di sini kita bisa menyimpan file latihan-1.html ini.
Klik pada menu File > Save.Bekerja dengan Kode CSSPada
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 :Menjadi Web Desainer
FreelancePerbedaan tersebut muncul mengingat CSS sebenarnya
merupakan bagian atau elemen dari kode HTML. Hal ini dapat kita
lihat pada bagian kode CSS, sebagai berikut :
Pada kode CSS di atas terlihat jelas bahwa tulisan kode yang
dicetak tebal merupakan Tag HTML. Kode CSS dibuka dengan Tag dan
ditutup dengan Tag . 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 :
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 MenambahkanHyperlink)Posted on Agustus 15, 2009 by Tomy
Hendarman
Menambahkan Judul dan TaglineNah, 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 PRIVATKursus
Komputer Paling Bermutu di Kota AndaHOME | PROFIL | LAYANAN |
KONTAKSelamat Datang di Website Kami5. 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 BerjalanHyperlink
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. Masing-masing
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 Kami6. 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 HyperlinkKetika 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 AbsolutKetika 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 masing-masing. 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 :HOMETag (singkatan dari anchor) mengapit teks yang
dijadikan hyperlink, atribut href=namafile diletakkan di dalam tag
untuk menentukan nama file atau alamat file yang dituju oleh
hyperlink.Link ke Alamat e-mailAlamat 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 : [email protected]. Sorotlah tulisan
[email protected]. 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.