5. Mengenal Tools Pemrograman Web: Dreamweaver

Dreamweaver merupakan tool/alat untuk memanagement web site dan

INTRO

juga sebagai alat yang mudah sekali untuk membuat halaman web.

Banyak sekali profesional web developer yang menggunakan
Dreamweaver ini untuk membangun dan mengelola suatu web site
dengan hasil yang sangat memuaskan.

Untuk perkuliahan Pemrograman web di D3 Akuntansi TSI ini, Dreamweaver
digunakan sebagai tool untuk membuat design web dengan HTML dan melakukan
coding scripting PHP untuk membuat web yang dinamis.
 Insert bar
Insert bar berisi tombol-tombol untuk memasukkan berbagai type “object”, seperti
image, table, dan layer, ke dalam document Dreamweaver. Setiap object merupakan
bagian dari code HTML yang memungkinkan Anda untuk melakukan berbagai
macam setting atribut object yang Anda masukkan tersebut. Sebagai contoh, Anda
bisa memasukkan table HTML dengan cara click tombol Table yang ada di Inser bar.
Jika Anda suka cara lain, Anda pun bisa memasukkan object HTML dengan melalui
menu Insert yang ada diatas Insert bar.
 Document toolbar
Document toolbar berisi tombol-tombol dan menu pop-up yang menyediakan view
Document window (ada 2 view document window, yaitu: Design View dan Code
View), berbagai view untuk option, dan beberapa perintah operasional seperti preview
kedalam browser (misal browser IE – Internet Explorer).
 Document window
Document window untuk menampilkan document sekarang ini yang sedang Anda
buat atau sedang Anda kembangkan (editing).
 Panel groups
Panel groups merupakan sekumpulan panel group yang secara bersama-sama dalam
satu heading. Untuk melihat lebih detail lagi panel ini (expand), lakukan click tanda
panah expander yang ada di kiri group nama panel tersebut. Untuk mejadikan undock
panel group ini, lakukan drag tanda gripper yang ada di tepi kiri dari judul group bar
ini.
 Tag selector
Tag selector memperlihatkan ke Anda relevansi tag HTML sesuai yang Anda pilih
(selected) di Document window. Anda dapat memilih bagian-bagian document lain
dengan cara cukup melakukan click di nama tag dalam Tag selector.
 Property inspector
Property inspector memperlihatkan ke Anda view dan fasilitas untuk mengubah
berbagai macam property object / text yang sesuai Anda pilih. Setiap type object
memiliki property yang berbeda-beda. Property inspector biasanya ditampilkan
dibawah design area. Property inspector ini juga dapat dilihat dengan cara melakukan
click langsung (short-cut) tombol-tombol yang ada di panel Dreamweaver. Property
inspector ini bisa juga muncul saat ada perubahan object yang terpilih di design area.
Jika Anda merasa tidak memerlukan property inspector ini, dalam arti Anda tidak
ingin terlihat di window Dreamweaver, maka Anda cukup memilih dari menu
‘Window’ di screen Dreamweaver bagian atas dan kemudian pilih uncheck submenu
Property yang ada di menu tersebut (atau dengan sort-cut Ctrl+F3).
Saat ada bagian text yang terpilih (selected) di Document window, maka secara
otomatis panel akan menampilkan fasilitas untuk setting yang dapat digunakan oleh
text terpilih tesebut (seperti yang ditunjukkan gambar dibawah ini), dimana berisi
fasilitas : font, text size, color, atribut text seperti bold dan italic, text alignment, dan
lain-lain. Selain itu panel juga bisa menampilkan informasi asosiasi hyperlink dalam
bagian text yang terpilih tersebut.

Property inspector untuk image ditunjukkan seperti gambar dibawah ini. Dengan
toolbar ini, Anda bisa melakukan setting lebar dan tinggi (width – height) dari suatu
image, merubah asosiasi lokasi hyperlink saat image tersebut di-click, dan alignment
image terhadap keseluruhan window page saat ditampilkan di browser.
 Files panel
Files panel yang terlihat di sebelah
kanan ini, memberikan fasilitas bagi
Anda agar mampu memanage file-file
hasil develop web Anda beserta
informasi folder-foldernya, dimana bisa
merupakan bagian dalam satu PC di
Dreamweaver (localdisk) ataupun
merupakan remote server. Files panel juga menyediakan kemampuan untuk
mengakses semua file di localdisk, seperti layaknya Window Explorer.

 View selector
View selector seperti yang terlihat diatas ini memberikan fasilitas bagi Anda agar
Anda bisa mengubah setting view. Ada 3 pilihan dalam view selector ini, yaitu : Code
view menampilkan code HTML sebenarnya yang sesuai dengan document page
tersebut. Pilihan ini sangat bagus bagi web developer yang lebih familiar dengan
coding dengan HTML. Design view memungkinkan Anda untuk create document
web page tanpa harus tahu bagaimana code HTML-nya. Sedangkan Code and Design
view memungkinkan Anda untuk view code HTML dan view design secara bersama-
sama dan secara simultan sesuai yang Anda ketik dan yang Anda pilih. Pilihan ini
sangat cocok untuk belajar bahasa HTML dengan melihat apa yang Anda lakukan di
Design view dan melihat langsung bagaimana code HTML-nya untuk object yang
Anda buat atau Anda ubah tersebut.

6. HTML dan Dreamweaver
Semua document HTML minimal memiliki struktur 4 tag. Tag pertama : <html> ,
yang gunanya untuk memberitahukan ke browser bahwa yang dibaca oleh browser
tersebut merupakan document HTML. Tag kedua, <head> , dimana gunanya untuk
memberitahu kepada browser letak header document page tersebut. Header page
sebagai tempat untuk informasi document page tersebut, seperti title dari document,
jika dilihat memakai browser IE, maka akan muncul di title bar dari window browser
IE. Sedangkan tag <title> terletak didalam title document page. Selanjutnya tag yang
keempat, <body> , terletak didalam tag HTML sebagai badan (body) dan document.
Sebagian besar tag HTML memerlukan open tag dan close tag dalam format
<tagname> </tagname>.
SAMPLE

<html>

<head>
<title>Belajar HTML</title>
</head>
<body>
Body document: Anda bisa memasukkan text,
hyperlink dan image.
</body>
</html>

Dengan memakai Dreamweaver, maka bisa Anda lakukan dari menu File New..
(Ctrl + N) untuk membuat document page HTML pertama kali, kemudian pilih basic
page, seperti terlihat dibawah ini :

Hasil HTML-nya sebagai berikut :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>
</html>

7. Body HTML
Untuk menambahkan properti tag
<body>, Anda bisa arahkan cursor
mouse yang berupa text selection
ke tag <body> pada area Code
view, kemudian click kanan mouse
Anda, maka Akan terlihat menu
pop-up seperti gambar di samping
ini. Kemudian, pilihlah menu pop-
up ini pada pilihan menu Edit Tag
<body>... atau Anda cukup
dengan sort-cut Ctrl+F5.
Selanjutnya akan muncul fasilitas
window Tag Editor – Body, dan
sekaligus Anda bisa melakukan editing properti dari tag <body> ini, dimana jika
Anda tidak akan mengubah propertinya, Anda cukup mengosongkan saja.

Tag <body> akan berubah propertinya menjadi (misalkan) :

<body bgcolor="#00FF66" background="/painting.jpg" text="#FF0000"
link="#3300FF" vlink="#996699">

Attribute Function
ALINK definisi warna active link.
BACKGROUND URL image yg digunakan untuk document background.
BGCOLOR Definisi warna document background.
BGPROPERTIES Jika diset “FIXED”, maka background image tidak bisa scroll.
LEFTMARGIN Setting lebar margin kiri dlm pixels.
LINK Definisi warna unvisited link.
TEXT Definisi warna text.
TOPMARGIN Setting lebar margin atas dlm pixels.
VLINK Definisi warna yg baru saja link dikunjungi.

8. Format Text HTML
a. Heading
Heading digunakan untuk menampilkan nama bab atau bagian tertentu yang dianggap
sebagai topik utama. Pada HTML terdapat enam level heading mulai dari tag <H1>
sampai dengan <H6>. Anda juga dapat menggunakan tag untuk mengatur ukuran
font, misalkan yang terbesar dengan <H1> atau membuatnya paling kecil dengan
<H6> namun tag ini bukan digunakan untuk keperluan tersebut.


Posisi heading pada dokumen HTML dapat Anda tentukan sendiri. Artinya teks yang
berfungsi sebagai heading dapat Anda tempatkan di kiri, kanan, atau di tengah dalam
dokumen.Untuk mengatur posisi heading, Anda dapat menggunakan atribut ALIGN
pada tag heading. Nilai dari atribut ALIGN dapat diisi dengan salah satu nilai, left
untuk perataan sebelah kiri, right untuk perataan sebelah kanan, atau center untuk
menuliskannya tepat di tengah.


Untuk melihat properti tag heading ini di Dreamweaver bisa dengan cara seperti pada
tag <body> diatas, yaitu Ctrl+F5 dengan cursor text diletakkan tepat di tag <body>.

SAMPLE

<HTML>
<HEAD>

<TITLE>Pemrograman Web</TITLE>
</HEAD>
<BODY>
<H1 Align="Left"> Heading 1 </H1><BR>
<H2 Align="Right"> Heading 2 </H2><BR>
<H4 Align="Center"> Heading 4 </H4>
</BODY>
</HTML>

b. Membuat Baris Baru
Line break <BR> adalah tag yang berfungsi untuk membuat baris baru pada dokumen
HTML tag <BR> ini membuat baris baru tanpa memberi baris kosong.


c. Membuat Paragraf
Anda dapat mulai meletakkan kalimat text di halaman web dalam bentuk paragraf,
maka untuk keperluan ini HTML menyediakan tags <P>. Perintah ini mempunyai
beberapa atribut. Tag <P> umumnya untuk menandai suatu paragraf baru. Anda juga
dapat menggunakan tag <BR> untuk memulai baris baru, namun pemakaian tag <P>
terutama digunakan untuk membuat group paragraf dengan formatting style tertentu.

SAMPLE

<HTML>

<HEAD>
<TITLE>Pemrograman Web</TITLE>
</HEAD>
<BODY>
<P ALIGN="center">Paragraf 1 </P>
<P ALIGN="right">Paragraf 2 </P>
<P ALIGN="left">Paragraf 3 </P>
</BODY>
</HTML>



Sama halnya dengan tag heading, tag paragraf <P> memiliki atribut untuk mengatur
alignment atau pengatur posisi, yaitu left untuk meratakan paragrap di kiri, right untuk
perataan sebelah kanan, dan center untuk meletakkan pada posisi tengah horizontal.

Untuk melihat properti tag paragraf ini di Dreamweaver bisa dengan cara seperti pada
tag <body> diatas, yaitu Ctrl+F5 dengan cursor text diletakkan tepat di tag <P>.

d. Membuat Daftar/List
Dalam praktikum Pemrograman Web ini diperkenalkan cara membuat daftar atau list,
yaitu bisa dengan 3 macam cara, yaitu :
- unordered list
- ordered list
- definisi

i. Unordered List
Unordered list biasanya ditandai dengan pemakaian bullet untuk menandai
sebuah item dari list. Bullet adalah karakter tertentu yang berupa karakter
symbol, misalkan bullet dengan bentuk tanda panah, rumah, segitiga, dan
sebagainya. Untuk membuat list dengan menggunakan sebuah bullet di
gunakan tag <UL> (unordered list) sebagai tanda tag awal dan </UL> sebagai
tanda tag penutup. Untuk item-item di dalam list harus diawali dengan tag
<LI> dan boleh tidak memakai tanda akhir tag.


Bentuk default tanda item dalam tag <UL> adalah bullet. Untuk mengubah
Anda dapat menggunakan atribut TYPE dengan diikuti nilai kontanta.
Konstanta ini mewakili karakter symbol yang akan digunakan. Sedangkan
item-item dari daftar tadi ditandai dengan memberikan tag <LI>.

<HTML>

SAMPLE

<HEAD>
<TITLE>Pemrograman Web</TITLE>
</HEAD>
<BODY>
<UL>
<LI> item pertama </LI>
<LI> item kedua </LI>
<LI> item ketiga </LI>
</UL>
</BODY>
</HTML>

Attribute Description
COMPACT Render list dalam compact form
TYPE=A Setting marker menjadi huruf besar
TYPE=a Setting marker menjadi huruf kecil
TYPE=I Setting marker menjadi uppercase Roman numerals
TYPE=i Setting marker menjadi lowercase Roman numerals
TYPE=1 Setting marker menjadi nomor
START=n Setting marker mulai dari n

ii. Ordered List
Ordered list adalah daftar yang tiap bagiannya disertai dengan penomoran.
Ordered list dimulai dengan tag <OL> dan diakhiri dengan tag </OL>.
Ordered list mempunyai beberapa tipe penomoran yang dapat digunakan,

Apabila Anda menuliskan atribut TYPE pada tag <OL> maka tipe tersebut
akan dipakai sebagai default dari seluruh item. Namun Anda juga dapat
memberikan tipe untuk masing-masing item, yaitu dengan memberikan atribut
TYPE pada tag <LI>. Atribut START dipakai pada tag <OL> dan digunakan
untuk menentukan nomor dari item pertama.


SAMPLE

<HTML>
<HEAD>

<TITLE>Pemrograman Web</TITLE>
</HEAD>
<BODY>
<OL TYPE=A START=3>
<LI> item pertama </LI>
<LI> item kedua </LI>
<LI> item ketiga </LI>
</OL>
</BODY>
</HTML>



iii. Definition List
Definition list adalah daftar yang mempunyai keterangan pada itemnya. Untuk
memakai defenition list Anda dapat menggunakan pasangan tag <DL> dan
</DL>. Tag ini bekerja dibantu oleh tag lainnya, yaitu tag <DT> yang

menandakan item yang dijelaskan dan tag <DD> menyatakan defenisi dari
item.


SAMPLE

<HTML>
<HEAD>
<TITLE>Pemrograman Web</TITLE>
</HEAD>
<BODY>
<DL>
<DT> item pertama </DT>
<DD> sub item pertama </DD>
<DT> item kedua </DT>
<DD> sub item kedua </DD>
<DT> item ketiga </DT>
<DD> sub item ketiga </DD>
</DL>
</BODY>
</HTML>

e. Format Tulisan
Format tulisan ini meliputi : font, bold, italic, dan strong.

9. Graphics di HTML

Gambar adalah elemen yang sangat penting dalam menampilkan informasi. HTML
menyediakan tag <IMG> untuk menampilkan gambar pada halaman web Anda.

<IMG >

Perintah HTML diatas akan menampilkan gambar fotoku.gif dan menampilkan teks
“Ini Foto Asliku” apabila browser mematikan fasilitas penampil grafik. Ekstensi
grafik yang biasa di tampilkan oleh HTML adalah GIF, JPG, dan BMP. Atribut ALT
dipakai untuk menampilkan teks pengganti gambar untuk browser yang tidak
mendukung penggunaan gambar atau apabila client sengaja mematikan fasilitas
tersebut. Anda juga dapat menggunakan atribut align untuk mengatur posisi gambar
terhadap teks yang bersebelahan. Anda juga bisa mengatur lebar dan tinggi gambar
tersebut dengan atribut WIDTH dan HEIGHT. Sedangkan dengan menambahkan
atribut HSPACE dan VSPACE, Anda juga dapat mengatur frame yang mengelilingi
gambar. Selanjutnya untuk properti BORDER sebagai informasi ukuran garis border
yang mengelilingi gambar tersebut.


Untuk melihat properti tag Image ini di Dreamweaver bisa dengan cara seperti pada
tag <body> diatas, yaitu Ctrl+F5 dengan cursor text diletakkan tepat di tag <img>.