Dalam contoh kali ini, saya membuat polling tentang ?bahasa pemrograman web apa yang
paling anda suka.? Karena ini hanya contoh, saya hanya menyertakan 2 pilihan yakni PHP dan
ASP.Anda dapat menambahkan sendiri pilihan yang ketiga, keempat,dst.

Mari kita mulai membuat polling. Siapkan 4 file berikut :
1. ?asp.txt? lalu ketikkan angka 0 di dalamnya.
2. ?php.txt? lalu ketikkan angka 0 di dalamnya.
Ingat.. Jangan lupa ketikkan angka 0 pada ‘asp.txt’ dan ‘php.txt’. Ini sangat penting. Ada seorang teman yang mengatakan bahwa kenapa program polling ini tidak jalan. Mungkin karena dia lupa mengetik angka 0 didalamnya..
3. File gambar ?poll.jpg? dengan ukuran 100x10px. Ini untuk membuat persentase polling.
Yang ini juga penting. Buat gambar ‘poll.jpg’ dengan photoshop/corel draw atau software pengolah gambar lainnya..
4. ?Index.php? lalu ketikkan script berikut :

<?php
if(@$_GET['isi'])
{
$vote = $_POST['vote'];
if ($vote == “”) // jika belum menentukan pilihan
{
print “Anda belum mengisi polling“;
exit;
}
if($vote == “php”) // menambah 1 untuk pilihan php
{
$buka = fopen(“php.txt”,”r”);
$baca = fgets($buka,65535);
fclose($buka);
$buka = fopen(“php.txt”,”w”);
$baca++;
fwrite($buka,$baca);
fclose($buka);
}
if($vote == “asp”) //menambah 1 untuk pilihan asp
{
$buka = fopen(“asp.txt”,”r”);
$baca = fgets($buka,65535);
fclose($buka);
$buka = fopen(“asp.txt”,”w”);
$baca++;
fwrite($buka,$baca);
fclose($buka);
}
$buka_php = fopen(“php.txt”,”r”);
$bacaphp = fgets($buka_php,65535); //membaca nilai php yang telah di vote
fclose($buka_php);
$buka_asp = fopen(“asp.txt”,”r”);
$bacaasp = fgets($buka_asp,65535); //membaca nilai asp yang telah di vote
fclose($buka_asp);
$total_pemilih = $bacaphp+$bacaasp; //jumlah pemilih
$persentase_php = ($bacaphp/$total_pemilih)*100;
$persentase_asp = ($bacaasp/$total_pemilih*100);
print “Total pemilih : $total_pemilih

“;
print “PHP : “; printf (“%1.0f”,”$persentase_php”); print ” % $bacaphp pemilih
“;
print “ASP : “; printf (“%1.0f”,”$persentase_asp”); print ” % $bacaasp pemilih
“;
}
?>

sebab semua itu pernah gw alamin…

sebuah persahabatan itu bisa menjadi sebuah kehancuran yang tidak bisa di ingkari lg……

Bagaimana Halaman web bekerja?

Halaman web dapat diakses melalui internet apabila halaman tersebut sudah ditaruh pada server web yang terhubung internet. Server yang terhubung dengan internet tersebut dinamakan sebagai “web hosting” . Ada banyak penyedia jasa hosting di internet. Untuk dapat membuka halaman yang telah kita taruh pada web hosting tertentu, maka kita memerlukan alamat khusus. Alamat ini kita sebut dengan nama domain. Sebagai contoh misalnya, ketika kita mengetik http://www.google.com maka secara otomatis kita bisa melihat halaman google pada browser kita. www.google.com inilah yang kita sebut dengan alamat domain.

Langkah-langkah berikut diharapkan bisa memberikan gambaran lebih jelas:

− Pertama tama saya membuat halaman web. Dalam hal ini saya membuat 3 buah halaman berbeda

− Kemudian halaman web tersebut saya taruh (hosting) di server web tertentu. Ada banyak perusahaan penyedia hosting di internet, bahkan sebagian ada yang gratis seperti geocities.com, pandela.com, dll yang tentu saja mempunyai service yang berbeda-beda. Proses pengiriman dari komputer saya menuju ke komputer server biasa disebut dengan istilah upload. Untuk tutorial kali ini saya upload di server web mesin brawijaya pada folder latihan dengan nama file hal1.html, hal2.html, dan hal3.html.

− Setelah semuanya terkirim, berarti 3 halaman tersebut sudah bisa dilihat lewat internet,…asal tahu alamatnya!. Web teknik mesin brawijaya mempunyai alamat domain http://mesin.brawijaya.ac.id , sehingga karena 3 halaman yang kita buat tadi berada pada folder “latihan”, maka untuk bisa melihat halaman 1 kita bisa mengetik http://mesin.brawijaya.ac.id/latihan/hal1.html , berikut penjelasananya:

Informasi: jika anda hanya menulis http://mesin.brawijaya.ac.id saja, maka hal itu berarti halaman yang dibaca adalah file yang mempunyai nama “index.html” atau mungkin index.php, tergantung setting dari server web itu. Biasanya yang dibaca adalah index.html.

Jenis web berdasarkan teknologinya

Web statik

Adalah jenis website yang mana pengguna tidak bisa mengubah content dari web tersebut secara langsung menggunakan browser. Interaksi yang terjadi antara pengguna dan server hanyalah seputar pemrosesan link saja.

Jenis web ini menggunakan client side script, yaitu script-script yang dapat dimengerti oleh komputer klien saja (dalam hal ini browser) seperti html, javascript, dhtml, css, dan lain-lain.

Web Dinamis

Dalam web dinamis, interaksi yang terjadi antara pengguna dan server sangat kompleks. Seseorang bisa mengubah content dari halaman tertentu dengan menggunakan browser. Request yang dikirimkan oleh pengguna dapat diproser oleh server untuk kemudian ditampilkan dalam isi yang berbeda-beda menurut alur programnya.

Jenis web ini menggunakan server side script, yaitu bahasa pemrograman yang dapat diproses oleh server untuk kemudian ditampilkan di browser pengguna dengan client side script.

Contoh dari web dinamis misalnya adalah forum-forum yang ada di internet. Disitu kita bisa mengisi content dari web tersebut, mengubah data diri, dan mengirimkan pesan.

Dasar HTML (tinjauan secara umum)

HTML (HyperText Markup Language) merupakan bahasa dasar yang digunakan untuk bisa menampilkan sebuah situs web pada komputer klien (Client side script). Hal tersebut berarti untuk bisa menampilkan halaman web seesuai yang kita inginkan di browser maka kita harus menulisnya dalam bahasa html.

Untuk memahaminya silahkan perhatikan contoh dibawah:

<html>

<head>

<title>Tutorial dreamweaver</title>

</head>

<body>

<strong>Tinjauan <em>html</em></strong><font color=”#CC0000″> dasar secara <font size=”7″><strong>umum</strong></font>

sekali </font>

</body>

</html>

Dari contoh sederhana di atas dapat dilihat susunan bahasa html pada umumnya. Kita sebut setiap sintak yang berada dalam tanda “<” dan “>” sebagai elemen. Setiap elemen selalu ditutup dengan tag “</……>”. perhatikan elemen <body> di atas misalnya. Elemen tersebut diawali dengan tanda “<body>”, kemudian ditutup dengan “</body>”. Tag-tag yang ada dalam elemen tersebut berarti menjadi bagian dari elemen body.

Mari kita bongkar contoh lainnya. Perhatikan elemen yang berada pada elemen body di atas.

<strong>Tinjauan <em>html</em></strong><font color=”#CC0000″> dasar secara <font size=”7″><strong>umum</strong></font> sekali </font>

Kemudian bandingkan hasilnya jika dilihat di browser

Gambar 2. <Title> ditampilkan pada title bar internet explorer

Perhatikan pada kata “tinjauan html” terlihat bahwa dua suku kata tersebut mempunyai property bold, sehingga dalam bahasa html kedua suku kata tersebut masuk ke dalam element <strong> yang berfungsi untuk merubah property text menjadi bold. Sedangkan suku kata “html” mempunyai property miring, sehingga suku kata tersebut kita masukkan dalam element <em> yang berfungsi merubahnya menjadi text miring.

<strong>Tinjauan <em>html</em></strong>

Sekarang coba pelajari bahasa di bawah ini dengan membandingkannya dengan tampilan pada gambar 2.

<font color=”#CC0000″> dasar secara <font size=”7″><strong>umum</strong></font> sekali </font>

Ada dua elemen dasar dalam sebuah dokumen html (perhatikan script yang tercetak tebal diatas), yaitu elemen head dan elemen body.

Elemen <head> berisi informasi-informasi mengenai dokumen html anda. Elemen ini seperti halnya kepala surat dalam surat-surat resmi. Didalamnya anda dapat menemukan informasi seperti nama pemilik, judul, deskripsi tentang isi dokumen, Judul dokumen, dan lain-lain.

Perhatikan dalam contoh di atas, dalam elemen head, yaitu antara <head> sampai </head> terdapat elemen <title>. Elemen title berfungsi untuk memberikan judul pada dokumen anda. elemen ini akan terlihat pada jendela browser bagian atas (bagian yang dilingkari warna merah pada gambar 2).

Sedangkan elemen <body> merupakan penampung dari elemen-elemen yang langsung ditampilkan dalam halaman web. Silahkan lihat kembali dalam contoh diatas, mengapa kata “tinjauan html dasar secara umum sekali” berada pada element body?…

Baiklah, kita sudah mempunyai bekal yang cukup untuk bisa membuat website dengan dreamweaver, sebab anda tidak perlu menghafalkan semua element-elemen atau tag html. Yang penting adalah kita tahu susunan umum html dan cara kerjanya, untuk selanjutnya kita serahkan dreamweaver untuk membantu kita.

Berkenalan dengan Dreamweaver

Dreamweaver merupakan salah satu software pembuat website yang mempunyai banyak sekali kemudahan dalam pengoperasiannya namun juga sangat powerful dalam pembuatan website. Salah satu keunggulannya adalah kemudahannya dalam berinteraksi dengan macromedia flash, sebuah tool animasi yang sangat populer di internet.

Memulai dreamweaver

Pertama kali dreamweaver dibuka, setelah anda instal sebelumnya, maka akan tertampil jendela yang menanyakan kepada kita untuk memilih jenis layout yang diinginkan.

Gambar 3. Jendela dialog ketika pertama kali dreamweaver di-start

Ada dua pilihan model layout kerja, yaitu model dreamweaver mx, atau model dreamweaver 4. Pada model dreamweaver 4, setiap jendela kerja berdiri sendiri-sendiri. Dalam tutorial ini kita menggunakan layout kerja standart dreamweaver mx karena model layout kerja ini dirasa paling optimal. Checkbox homesite/codebuilder merupakan pilihan untuk mengoptimalkan kerja kita apabila kita lebih banyak bekerja di script. Sangat cocok untuk tingkat lanjut.

Klik OK

Jendela tersebut hanya muncul pada saat pertama kali program dreamweaver dijalankan. Apabila kita menginginkan layout kerja yang berbeda setelah beberapa kali menjalankan dreamweaver, maka kita bisa memunculkan lagi jendela tersebut dengan mengklik:

edit > preferences atau menggunakan shortcut ctrl+U

jendela preferences akan tertampil:

Gambar 4. Tombol untuk menampilkan kembali jendela model layout kerja dreamweaver

Kemudian klik tombol Change Workspace

Fungsi dari preferences ini adalah untuk mengatur semua hal mengenai dreamweaver. Mungkin kita akan memerlukannya nanti ketika dihadapkan pada sebuah masalah pendesainan situs tertentu, namun untuk kali ini kita biarkan pada kondisi default saja. Hal tersebut sudah mencukupi untuk pengerjaan website secara umum.

Setelah itu akan muncul layout kerja dreamweaver. perhatikan gambar 4

Pengenalan interface dreamweaver

Gambar di bawah merupakan gambaran layout kerja dreamweaver mx. Jendela-jendela pembantu yang terdapat pada menu window dikelompokkan pada panel bagian kanan. Seluruh panel bisa disembunyikan dengan mengklik tombol yang ditunjukkan oleh tanda panah.

Gambar 5. Bagian-bagian utama tempat kerja dreamweaver

Design view bekerja layaknya kanvas bagi pelukis. Bagian ini merupakan tempat kita bekerja dalam membentuk sebuah halaman situs. Disini, dengan menggunakan document toolbar kita bisa menampilkan code saja, desain saja atau kedua-duanya.

Gambar 6. Document toolbar. Bisa digunakan untuk mengatur tampilan kerja. Dalam tampilan script saja, tampilan script dan desain, ataukan hanya desain saja.

Insert bar membantu kita untuk memasukkan berbagai berbagai elemen-elemen pembentuk halaman web, seperti gambar, script php, simbol-simbol, shockwave, dan lain-lain. Elemen-elemen tersebut direpresentasikan dalam bentuk icon.

Document toolbar memberikan kita kemudahan untuk melakukan perintah-perintah yang memberikan efek pada seluruh dokumen, seperti halnya judul dokumen.

Property inspector menampilkan berbagai property yang dipunyai elemen tertentu. Kita bisa langsung mengubah properti dari elemen tersebut dengan tool ini, misalnya merubah warna text, memberikan background pada elemen tabel, menggabungkan kolom, dan lain-lain.

Anda bisa membuka atau membuat lebih dari satu dokumen. Dokumen-dokumen yang sudah anda buka akan diurutkan pada bagian bawah design view. Anda tinggal mengklik tombol tersebut untuk berpindah antar halaman. Ditunjukkan oleh tanda panah warna biru pada gambar 5.

Setiap dokumen yang anda buka masing-masing dapat anda minimize, maximize atau anda tutup. Dapat anda lihat pada keterangan di gambar 5.

Gambar 7. Masing-masing halaman baru dreamweaver dipisah ke dalam tab-tab tertentu. Masing-masing tab bisa ditutup, dikecilkan, atau disembunyikan tampilannya.

Sambil jalan, secara otomatis kita akan mengetahui fungsi dari toolbar-toolbar yang tidak dijelaskan dalam subbab ini.

Setelah anda mulai terbiasa dengan layout kerja dreamweaver, kita lanjutkan dengan bagaimana memulai kerja dengan dreamweaver.

Memulai mendesain web dengan dreamweaver

Pengantar web design

Diperlukan sebuah perencanaan yang matang dalam pembuatan sebuah situs web karena sebuah website tidak hanya terdiri dari satu file teks saja. Disitu terdapat beberapa halaman yang saling berhubungan (hyperlink), file-file gambar, file css, javascript, belum lagi file multimedia seperti flash dan video yang kesemuanya harus diupload ke server hosting dengan tempat yang jelas. Dengan semakin kompleksnya komponen penyusun web, maka struktur pemilahan file-file pun juga harus jelas. Misalnya, untuk semua gambar-gambar yang tertampil di website saya buatkan folder sendiri dengan nama “images”, untuk file jenis pdf saya taruh di folder “pdf”, atau mungkin halaman-halaman tentang profil perusahaan saya sendirikan dalam folder “profil”. Hal tersebut akan membantu kita ketika memaintenance sebuah situs.

Dalam merencanakan sebuah situs, ada beberapa hal yang patut menjadi perhatian, yaitu:

− Tentukan apa yang ingin kita sampaikan dalam website yang kita buat. Hal ini akan berkaitan nantinya bagaimana kita membuat jenis informasi tersebut gampang dicerna oleh audience.

− Untuk siapa website ini nantinya? Ketika saya ingin membuat website untuk sebuah situs anak-anak, maka saya akan membuat tampilan situs saya dengan warna2 cerah dan sedikit cartoon karena memang begitulah dunia anak-anak pada umumnya, sebaliknya, apabila saya ingin membuat situs instansi misalnya, maka yang ada dalam bayangan saya adalah desain yang resmi, dan navigasi yang mudah dipahami, karena memang target audiencenya adalah bagi orang umum.

− Resource yang meliputi ketersediaan data, waktu, tenaga, dan dana perlu juga dijadikan pertimbangan dalam menentukan desain sepoerti apa yang bakal kita buat nantinya. Saya rasa tidak perlu ada penjelasan untuk ini.

− Dan NAVIGASI. Navigasi tentu saja sangat penting karena merupakan kemudi untk bisa menjelajah sebuah situs. Buatlah navigasi sejelas-jelasnya dan semudah-mudahnya bagi target audience anda. Untuk mempermudah, gambarkan secara diagram peta situs anda.

Dalam beberapa literatur yang saya dapat, ada beberapa pilihan navigasi yang umum. Mungkin hal ini bisa memberikan anda gambaran seperti apa model navigasi yang akan anda buat nantinya.

1. model linear

Gambar 7. Pada model linear kita bisa mengatur urutan halaman yang dibuka pengguna.

Medel ini biasanya dipakai untuk situs-situs training online atau buku multimedia. Dengan model seperti ini kita dapat mengontrol langkah-langkah yang harus dilalui audience

1. model Hirarki

Gambar 8

Desain ini dapat mempermudah audience menemukan informasi yang dia cari.

1. model terpusat

Dengan model seperti ini maka akan mempercepat navigasi menuju ke topik yang diinginkan dengan 2 klik, namun kekurangannya adalah untk berpindah harus menuju ke halaman depan dahulu

1. Model FULL-WEB-DESIGN

Merupakan gabungan dari ketiga model di atas. Dengan penggabunagn tersebut maka diharapkan akan meningkatkan efisiensi dari navigasi web. Setiap halaman mempunyai navigasi ke halaman lainnya yang dirasa paling perlu untuk dikoneksikan. Sebagai contoh website http://oke.or.id , http://macromedia.com dan lain-lain.

Macromedia dreamweaver mempermudah berbagai tahap di atas. Agar kita tidak dipusingkan dengan kemungkinan terpencarnya file-file yang sudah kita buat sebagaimana yang dijelaskan pada paragraf pertama subbab sebelumnya, maka kita perlu mendefinisikan situs yang akan kita buat. Pendefinisian ini berguna untuk menempatkan website kita yang mungkin kompleks ke tempat khusus tertentu sehingga nantinya akan mempermudah dalam peng-upload-an ke server hosting.

Mendefinisikan situs

OK, sekarang anda telah mempunyai peta situs dengan segala persiapannya. Hal selanjutnya adalah menentukan ditampung dimana pekerjaan pembuatan website ini, dan mau dikirim ke server mana pekerjaan itu nanti sekaligus menentukan parameter dasar lainnya. Hal tersebut yang dimaksud dengan “mendefinisikan situs”. Hal ini sangat penting ketika kita memulai sebuah proyek.

Sebelumnya kita harus tahu dulu jenis situs yang akan kita buat nantinya itu seperti apa. Situs statiskah? Atau situs dinamis?. Masing-masing jenis tersebut mempunyai jalan yang berbeda dalam pendefinisiannya. Karena tutorial ini khusus membahas tentang website statis sampai tingkat lanjut, maka disini kita akan mempelajari pendefinisian situs statis saja.

Silahkan ikuti langkah-langkah berikut:

1. Klik menu site > New Site. Kemudian akan muncul jendela dialog site definition

Gambar 10. Langkah awal pendefinisian sebuah situs

Pastikan tab basic terpilih (perhatikan panah merah). Kemudian isi textbox tersebut dengan nama situs yang anda inginkan. Nama situs anda boleh menggunakan spasi. Buat sesimpel mungkin namun sejelas mungkin. Kemudian klik tombol next

1. Kemudian anda akan dihadapkan pada jendela dialog yang menanyakan apakah anda ingin menggunakan server technology atau tidak. Kita akan mmbangun situs statis, sehingga pastikan option button “No, i dont want to use server technology” terpilih sebagaimana gambar di bawah. Klik tombol next

Gambar 11. Pilihlah opsi pertama jika anda tidak menggunakan teknologi server

1. Pada jendela berikutnya anda akan ditanya mengaenai bagaimana nantinya anda bekerja dengan file-file anda ketika sedang membuat website.

Pilihan pertama adalah “Edit Local Copies on My Computer Then Upload to Server When Ready”, pilihan kedua adalah “Edit Directly on Server Using Local Network”, dan pilihan yang terakhir adalah “Edit Directly on Server Using FTP or RDS”.

− Jika anda memilih pilihan pertama, berarti situs anda nantinya akan dibuat pada tempat tertentu pada harddisk anda, kemudian jika dirasa sudah memenuhi syarat baru kita bisa menguploadnya ke server web. tentukan tempat pada harddisk anda dengan mengisi textbox yang disediakan

− Pilihan kedua berarti anda nantinya akan langsung menempatkan pekerjaan anda pada server yang terhubung dalam sebuah jaringan, Isikan direktory pada server anda pada textbox yang disediakan.

− Pilihan terakhir berarti anda akan langsung bekerja pada server melalui koneksi FTP, tentukan folder pada harddisk anda sebagai tempat untuk salinan situs anda. Checkbox dibawahnya merupakan pilihan apakah nantinya ketika kita save akan langsung dikirim ke server atau tidak.

Disini kita memilih pilihan pertama karena model ini yang paling direkomendasikan.

Klik next

1. Jendela berikutnya yang muncul adalah dialog sharing file. Disiini anda menentukan bagaimana anda terkoneksi dengan server anda. Anda bisa melihat masing-masing penjelasan di bagian help dreamweaver. Silahan mengisi textbox-textbox yang muncul berdasarkan pilihan anda. Apabila anda tidak yakin pilih none saja sebagaimana dalam tutorial ini. Jangan khawatir karena kita bisa mengisinya lagi nanti.

NB : jendela dialog ini tidak akan muncul apabila sebelumnya anda memilih “edit directly on server using local network”

Klik next

1. Jendela yang muncul berikutnya adalah ringkasan dari settingan yang kita buat sebelumnya. Check satu-satu. Apabila perlu perbaikan anda bisa kembali dengan tombol back.

Silahkan klik done jika sudah selesai

Sekarang pendefinisian situs, untuk sementara selesai. Perhatikan pada panel file di bagian site panel bagian kanan. Sekarang anda sudah dibuatkan tempat untuk menampung semua situs anda menurut settingan yang anda isi pada kotak dialok pendefinisian situs. Perhatikan tanda panah merah di bawah. Nantinya semua file yang anda buat akan terlihat di panel tersebut. Contoh situs yang sudah terisi dapat anda lihat pada gambar bagian kanan.

Gambar 12. Lihatlah perbedaan antara situs yang sudah diisi dengan dokumen dan situs yang belum diisi dengan dokumen

Mungkin dalam situs yang kita buat nantinya kita perlu mengelompokan file-file ke dalam folder-folder tertentu maka ada baiknya kita membuat folder itu terlebih dahulu dengan mengklik file > New folder (lihat lingkaran biru pada gambar kanan) kemudian isikan nama folder.

Selanjutnya setelah kita mendefinisikan proyek situs web kita, kita akan belajar bagaimana memulai kerja dengan dreamweaver, termasuk di dalamnya adalah membuat file baru, dan melihatnya melalui browser.

Membuat dokumen, menyimpan, dan menampilkannya pada browser

Pada umumnya untuk memulai dokumen baru di sistem operasi windows sama saja. kita tinggal mencari kata new. Benar,.. tekan file > new maka sebuah jendela dialog akan muncul:

Gambar 13. Disini kita menentukan jenis halaman apa yang akan kita buat.

Disitu banyak sekali terdapat pilihan halaman yang akan kita buat nantinya. Kita pilih Basic page | HTML kemudian klik tombol create.

Nah sekarang anda bebas mau mendesain apa. Isikan sembarang kata pada design view, kemudian isi title pada Document toolbar dengan sembarang judul disini saya isi dengan “tutorial dreamweaver”

Gambar 14. kita coba membuat halaman baru sembarang

Kemudian simpan pekerjaan anda file > save atau ctrl + S. Kemudian akan muncul kotak dialog save as. Perhatikan bahwa secara otomatos dreamweaver akan memilih direktori yang kita definisikan sebelumnya. Klik save

Gambar 15. Kita coba save Halaman Baru tersebut dengan nama index.html

Perhatikan juga bahwa seketika itu juga pada panel file akan terlihat tambahan file baru

Gambar 16. Secara otomatis halaman baru akan tertampil dalam panel file.

Sekarang anda juga bisa melihat hasil pekerjaan anda langsung pada browser dengan mengklik icon preview in browser pada document toolbar atau dengan mengklik tombol F12

Gambar 17. Pilihan utnuk melihat sementara hasil pekerjaan kita di browser.

Nah, hasil kerjaan anda sekarang tertampil di browser internet explorer. Setelah ini yang kita lakukan adalah menguploadnya ke server web. Akan saya jelaskan pada bab akhir nanti tentang bagaimana mengupload proyek kita yang sudah jadi ke server web.

rangkuman

Sebelum masuk ke bab berikutnya, dapat dirangkum bahwa untuk mendesain situs dengan efisien kita bisa meggunakan urutan langkah-langkah sebagai berikut:

1. menetapkan kerangka kerja termasuk didalamnya menentukan jenis desain, menentukan target audience, menentukan model navigasi situs, dan tak kalah pentingnya adalah membuat diagram peta situs.
2. mendefinisikan situs sehingga file-file proyek kita akan lebih terkoordinir dan mudah dalam peng-upload-annya nanti.
3. mulai bekerja membuat situs, termasuk didalamnya membuat folder-folder untuk menampung gambar atau file-file lain sehingga lebih terstruktur, membuat dokumen, menyimpan dokumen, melihatnya pada browser, membuat tampilan menarik, membuat hubungan antar halaman (hyperlink), dll. Bab berikutnya akan membahas tentang masalah ini.
4. setelah situs selesai, kita tinggal menguploadnya ke server web dengan tool-tool yang disediakan oleh dreamweaver. Ini akan dibahas pada bab sendiri.

Membuat Website (Bagian I)

Sebelum masuk lebih detail ke masing-masing elemen, ada baiknya dulu kita mereview ulang tentang struktur HTML situs. Kita sudah tahu bahwa ada dua bagian besar dalam html, yaitu alemen <head> dan elemen <body>.

Elemen <head>

Elemen <head> didalamnya memuat berbagai informasi mengenai situs dan juga bisa dijadikan informasi bagi browser bagaimana sebuah dokumen ditampilkan nantinya, misalkan apakah menggunakan kharakter / huruf cina atau yang lain.

Salah satu tag dalam elemen <head> yang penting adalah <meta> yang berfungsi untuk menampilkan informasi dari sebuah halaman. Tag ini penting sebagai pemberi informasi bagi search engine untuk mengkatalog-kan situs. Dalam dreamweaver kita tidak perlu mengetik kode ini secara manual. Kita bisa membuatnya dengan object <head>.

Gambar 18. Tool yang digunakan untuk memodifikasi element head dalam file html

Masing-masing obyek dapat dijelaskan sebagai berikut:

Meta.

Berfungsi untuk mengisikan berbagai meta tag yang kita inginkan. Ini merupakan tool untuk membantu kita memasukkan meta tag. Ada banyak informasi melalui <meta> selain yang sudah diediakan dreamweaver seperti keyword, description, refresh, base, dan link, sehingga untuk mengisikan tag selain yang saya sebutkan di atas kita bisa menggunakan tool meta tersebut. Lihat contoh di bawah:

Gambar 19. Jendela yang digunakan untuk mengubah-ubah tag meta.

Perhatikan bahwa “creator” tidak disediakan dreamweaver. Dengan object meta kita bisa membuat informasi tersebut. Pembahasan mengenai meta tag banyak tersedia di internet.

Keyword

Berfungsi untuk memberikan informasi kepada search engine mengenai kata kunci apa yang bisa digunakan untuk menampilkan situs kita. Penulisannya harus konsisten dengan isi dari website kita sehingga akan mempermudah pencarian melalui search engine.

Gambar 20. Jendela yang berfungsi mengubah-ubah tag keywords

Description

Berfungsi untuk memberikan informasi mengenai deskripsi dari situs kita. Sebagai tips, untuk mempercepat dan mempertinggi ranking dalam search engine, hendaknya antara keywords dan description ada beberapa kata yang sama. Walaupun sebenarnya google.com tetap akan melist situs kita walaupun tidak ada tag metanya, namun belum tentu bagi search engine yang lain.

Gambar 21. Jendela yang berfungi untuk mengubah-ubah tab description

Refresh

Digunakan apabila kita ingin me-refresh atau me-redirect halaman (dipaksa menuju ke halaman /alamat lain) kita setelah selang waktu tertentu. Gambar di bawah berarti setelah lima detik secara otomatis halaman yang dibuka akan berpindah menuju http://mesin.brawijaya.ac.id.

Gambar 22. Dengan Jendela ini kita bisa me-refresh sebuah halaman atau me-redirect sebuah halaman yang baru dibuka.

Base

Tag <base> berhubungan dengan link. Akan saya jelaskan secara langsung. Apabila kita mempunyai sebuah link menuju ke images/gambar.gif, maka hal tersebut berarti gambar.gif berada pada folder images dalam server web kita. Namun apabila saya mempunyai tag <base> dengan content:

<base href=”http://www.situs.com/contoh/”>

Maka setiap script yang terdapat link “images/gambar.gif” tersebut dianggap berada pada www.situs.com/contoh/images/gambar.gif. bukan lagi berada pada folder images di server kita. Namun karena basenya sudah diubah ke alamat yang lain maka alamat tersebut-lah yang dijadikan dasar dari setiap alamat link.

Saya rasa kita tidak perlu menggunakan ini karena akan terbentur juga masalah kompatibilitas browser.

Link

Ini berguna untuk menghubungkan dokumen kita dengan script luar. Biasanya css. Salah satu hal yang menarik seputar penggunaan tag link adalah favicon. Favicon adalah icon yang tampil pada menu favorit apabila adnda mem-bookmark sebuah halaman. Icon ini juga tampil pada address bar di browser anda. Untuk contohnya anda bisa buka halaman yahoo.com. perhatikan gambar y di address bar tersebut

Anda bisa membuatnya di alamat http://www.favicon.com.

Elemen <body>

Setelah anda menentukan isi dari elemen head ada, sekarang kita belajar pada daerah <body> yang berhubungan dengan masalah tampilan. Yang akan kita pelajari nantinya adalah tentang:

− Text

− Gambar

− List

− Tabel

− Hyperlink

− Image maps

Namun sebelum itu, mungkin muncul pertanyaan bagaimana saya bisa mengatur property dari tag <body> itu sendiri?… caranya gampang. Sekarang coba anda rubah tampilan kerja menjadi code and design view dengan mengklik

Pada jendela code, klik kanan pada tag <body> dan pilih edit tag <body> maka akan muncul kotak dialog baru yang bisa anda gunakan untuk menambah property baru pada tag body anda, misalnya background image, warna background, dll.

Gambar 23. Jendela yang digunakan untuk meng-edit tag-tag html secara grafis

Cara tersebut berlaku juga untuk tag-tag yang lain.

TIPS: Untuk mempercepat belajar html, anda bisa menggunakan tampilan code view dan design view bersamaan dengan mengklik icon . Pelajarilah setiap kode dan bandingkan dengan tampilannya.

TIPS: Untuk mempercepat belajar html, anda bisa menggunakan tampilan code view dan design view bersamaan. Pelajarilah setiap kode dan bandingkan dengan tampilannya.

TENTANG TEXT

Apabila kita bekerja dengan dreamweaver, maka perintah-perintah standart windows seperti cut, copy, paste, undo, redo masih bisa dijalankan. Demikian juga apabila kita menulis text.

Disini kita akan mempelajari tentang bagaimana merubah property-property text seperti warna, ketebalan, alignment, ukuran, kemudian kita juga belajar bagaimana membuat paragraf dan baris baru, dan yang tak kalah pentingnya adalah bagaimana mengisikan karakter-karakter unik ke dalam dokumen kita.

Untuk menjelaskannya, kita buat tampilan seperti di bawah ini:

NB: kita akan bekerja pada situs yang telah kita definisikan. Perhatikan juga bahwa sebelumnya kita sudah membuat folder images pada tempat situs kita.

Gambar 24. Tampilan yang akan kita buat dalam bab ini

Sebelum kita masuk ke langkah pembuatannya, perhatikan bahwa ada beberapa hal yang perlu diperhatikan agar kita bisa secara efisien membuat tampilan seperti itu.

1. dokumen tersebut berjudul “latihan seputar text”. Bisa anda lihat di bagian pojok kiri atas
2. nama file dokumen tersebut adalah text.htm
3. tampilan tersebut dapat kita bagai menjadi 3 paragraf
4. paragraf pertama memiliki 4 baris text dengan baris pertama berhuruf tebal dengan ukuran besar, baris ke tiga text tebal berwarna merah, dan baris ke empat text miring
5. paragraf kedua adalah paragraf biasa
6. paragraf ke tiga baris pertama lebih menjorok beberapa “spasi”

OK, mungkin anda sudah mempunyai gambaran bagaimana membuat tampilan seperti contoh di atas. Berikut ini adalah langkah-langkahnya:

1. pada document toolbar kita isi kotak title dengan “latihan seputar text”. Tekan enter

Gambar 25. Memasukkan title dokumen

1. ketik tulisan pada paragraf pertama baris pertama kemudian shift + enter. Lanjutkan sampai pada baris terakhir. Ketika baris terakhir sudah selesai, langsung tekan enter.

Ketika anda menekan shift+enter, berarti anda membuat baris baru, sedangkan jika anda hanya menekan enter berarti anda membuat paragraf baru.

Contoh html di bawah ini akan menjelaskan pernyataan di atas:

<p>

Ini baris pertama paragraf pertama<br>

Ini baris ke dua paragraf pertama<br>

</p>

<p>

Sedangkan ini adalah paragraf ke dua

</p>

Secara otomatis dreamweaver akan membuat tag <p></p> ketika anda menekan enter saja, dan akan membuat tag <br> jika anda menekan shift+enter sehingga akan terbentuk baris dan/atau paragraf.

1. tulis kalimat pada paragraf ke dua kemudian tekan enter.
2. sebelum kita menulis kata pertama, kita beri spasi dulu agar kelihatan menjorok ke dalam. Hal ini tidak bisa secara langsung kita menekan spasi beberapa kali karena seberapapun kita memberkian spasi dengan keyboard maka yang tertampil hanya satu spasi saja. Hal tersebut bisa diakali dengan memberikan karakter blank. Anda bisa memasukkan “&nbsp;” pada code html anda beberapa kali, namun ada cara yang lebih gampang yaitu dengan menggunakan insert non break space pada insert bar. Dan menekannya beberapa kali

Gambar 26. memasukkan spasi dalam desain kita.

Kemudian lanjutkan dengan menulis isi paragraf ke tiga tersebut.

1. pekerjaan anda akan tampak seperti berikut ini:

Gambar 27. Tampilan sementara yang telah kita buat

Sekarang kita tinggal mengaplikasikan style pada pekerjaan kita. Dimulai dari judul “Academic press series in Engineering” tersebut yang mempunyai property ukuran font 6pt dengan jenis font arial. Untuk mengubah property dari text tertentu kita tinggal mem-blok bagian text yang ingin kita ubah kemudian kita tinggal mengubah parameter yang terdapat pada “property inspector”. Cara seperti ini berlaku juga untuk pengubahan property elemen-elemen yang lain.

Gambar 28. Cara-cara pengubahan Properties dari elemen-elemen situs

Untuk mengubah judul menjadi bertipe arial, dengan ukuran 6, dan tebal, silahkan perhatikan tanda panah biru di atas. Saya rasa gambar tersebut sudah mewakili sebagai penjelasannya.

1. dengan cara seperti langkah 5 diatas, silahkan merubah property text-text lain.

Yang perlu anda rubah tentu saja “J. David Irwin” menjadi bold berwarna merah, “Auburn University” menjadi italic, dan paragraf 1 align= center. Dibawah ini mungkin bisa dijadikan referensi untuk bisa mengubah hal tersebut.

Gambar 29. Berbagai tool yang digunakan untuk mengubah property text

Tentang image (gambar)

format gambar untuk grafis web

Ada tiga format gambar yang dapat digunakan dalam sebuah website, yaitu GIF, JPEG, dan PNG. Masing-masing mempunyai karakter dan kemampuan sendiri-sendiri. Untukk bisa mambuat situs yang efisien, dalam artian mempunyai sedikit waktu download tanpa mengorbankan estetika, kita perlu untuk bisa secara tepat menentukan format apa yang tepat untuk gambar tertentu. Berikut ini secara singkat saya jelaskan mengenai karakteristik masing-masing format gambar.

1. gif
   • mempunyai kedalaman warna maksimal sebesar 255
   • bisa digunakan untuk gambar transparan
   • dapat digunakan untuk animasi
   • mempunyai ukuran yang sangat kecil untuk gambar dengan warna yang sedikit, misalnya gambar tanpa gradasi, untuk garis, gambar text, logo, atau kartun.

Perhatikan gambar berikut:

Gif 64 warna 32 kb

Gif 7 warna 1,2 kb

1. jpeg

· mempunyai ukuran file lebih kecil daripada gif untuk file dangan ribuan warna.

· Biasa digunakan untuk gambar-gambar foto.

Berikut ini contohnya:

Jpeg 60% compresi, 19 kb

Jpeg 100% kompresi, 20 kb

1. png

· merupakan format baru yang bisa dipakai di dunia web. beberapa browser lama memerlukan plugins untuk bisa melihatnya.

· Mempunyai kemampuan kompresi sebagus gif, namun juga mempunyai kedalaman warna yang tinggi.

Gunakanlah format gif apabila dalam gambar anda hanya terdapat sedikit warna, dan gunakanlah jpg apabila gambar anda melibatkan banyak warna. Hal ini akan dibahas lebih detail dalam pendesainan situs tingkat lanjut pada bab berikutnya.

Memasukkan gambar ke dalam dokumen

Untuk memasukkan gambar ke dalam dokumen, ad beberapa cara yang dapat kita lakukan, yaitu:

1. dengan meletakkan cursor pada tempat yang ingin kita taruh gambar, kemudian dalam menu bar kita pilih insert > image
2. dengan meletakkan cursor pada tempat yang ingin kita tempati gambar kemudian ctrl + alt + I
3. klik pada seret icon yang terdapat pada insert bar menuju ke tempat yang diinginkan.
4. mencari gambar di site panel kemudian mnyeretnya ke tempat yang ingin ditempati gambar

Gambar 30. Untuk memasukkan gambar pada desain kita bisa menggunakan metode klik dan seret dari panel files menuju ke tempat yang diinginkan dalam desain

5. menggunakan assets panel. Akan dibahas lebih lanjut pada bab tersendiri

Tampilan di berikut ini akan muncul ketika anda ingin mengisikan gambar ke website anda. Anda boleh mengambil gambar dari mana saja dari direktori-direktori di komputer anda walaupun tidak berada dalam folder situs yang kita definisikan sebelumnya.

Gambar 31. Jendela yang muncul setelah kita men-drag&drop gambar

Pilihan “relative to:” digunakan untuk menentukan alamat file yang kita ambil nantinya dicari dari alamat dokumen ini ataukah dicari dari root.

Misalkan saya mempunyai dokumen dalam folder gambar, kemudian saya juga ingin memasukkan bebek.jpg yang juga berada pada folder tersebut, maka ada dua cara untuk mencari alamat file gambar tersebut, yaitu:

<img src=”bebek.jpg”> —-> relative to document

<img src=”/images/bebek.jpg”> —->relative to site root

Pada relative to document saya langsung menggunakan alamat “bebek.jpg” karena gambar bebek.jpg berada pada hirarki yang sama.

Pada relative to site root, maka bebek.jpg tersebut dicari mulai dari root, sehingga harus ditulis “/images/bebek.jpg” tanda “/” sebelum “images” menandakan menggunakan relative terhadap site root.

Karena gambar yang saya ambil berada di luar site root (perhatikan bahwa alamatnya adalah alamat local file:///I/work/proyek luar/NGAJAR/transparan.jpg) maka jika saya ok akan muncul peringatan sebagai berikut:

Gambar 32. peringatan yang muncul karena gambar berada di luar folder yang sudah didefinisikan sebagai tempat situs.

Dreamweaver mengingatkan bahwa karena file gambar berada di luar site root dari situs yang kita definisikan, maka nantinya gambar tersebut tidak bisa diakses ketika kita upload karena alamatnya menggunakan local address.

Untuk menghindari hal tersebut, dengan meng-klik yes maka dreamweaver akan meng-copy file tersebut dan memasukkannya pada folder yang kita definisikan. Kita bisa menentukan mau ditaruh dimana file tersebut dalam situs kita. Karena sebelumnya kita sudah membuat folder images, kita taruh saja gambar yang ingin kita masukkan ke dalamnya.

Memodifikasi gambar

Sebagaimana text, kita juga bisa menggunakan property inspector untuk mengubah atau memodifikasi gambar.

Gambar 33. beberapa cara untuk mengubah ukuran gambar

Untuk mengatur ukuran gambar, kita bisa mengisikan langsung pada kotak “W” dan “H” dengan satuan pixel atau persen. Atau dengan mennyeret tanda yang ditunjukkan tanda panah di atas. Tanda yang ditunjukkan oleh:

• Tanda panah merah digunakan untuk mengatur lebar gambar
• Tanda panah kuning untuk mengubah panjang gambar
• Tanda panah hijau digunakan untuk secara bebas mengatur kedua-duanya.

Peringatan! : disarankan untuk tidak mengatur ukuran gambar karena dapat mengakibatkan tampilannya menjadi pecah.

Tips : untuk bisa mengatur ukuran gambar menggunakan mouse dengan proporsional, tekanlah tombol shift ketika menyeret tanda panah hijau. Sedangkan untuk mengembalikan ukuran sebenarnya anda bisa menggunakan tombol “reset size”

V Space dan H space digunakan untuk mengatur jarak tepi gambar

Border digunakan untuk membuat bingkai pada gambar anda.

Alt digunakan untuk membuat deskripsi singkat dari gambar kita. Walaupun sepele, tag alt akan sangat berguna terhadap validitas sebuah halaman html. Usahakan selalu mengisi alt! apabila memang tidak ada yang perlu dideskripsikan, anda bisa memilih ”empty” pada dropdown alt tersebut.

Tentang list

ada tiga jenis list yang dapat kita buat menggunakan list, yaitu:

− unordered list

untuk membuatnya, kita bisa mengaktifkan dulu menu tersebut dengan mengklik icon bullet pada property inspector kemudian mulai mengetik. Untuk menambah list kita bisa tekan enter. Sedangkan bila kita ingin merubah beberapa paragraf menjadi berbentuk list, maka kita tinggal mem-blok paragraf-paragraf tersebut kemudian baru kita klik icon bullet pada property inspector.

Peringatan: yang dapat dibentuk menjadi list hanyalah paragraf, yaitu sesuatu yang berada pada tag <p></p>. itulah kenapa untuk membuat list berikutnya kita menekan enter bukan shift + enter.

Gambar 34. Cara yang digunakan untuk membuat list

Ada beberapa model tampilan untuk bullet (titik) anda bisa mengubahnya pada code view kemudian klik kanan pada kode tag <ul> kemudian pilih edit tag <ul>. Maka jendela dialog akan muncul.

Gambar 35. cara untuk mengubah tampilan list

Pada dropdown type anda bisa memilih tampilan dari bullet anda. Cobalah.

− ordered list

ordered list berarti list yang berurutan. Setiap list ddari atas sampai ke bawah diurutkan berdasarkan nomor. Hal ini sama dengan numbering, jika kita pernah menggunakan microsoft word.

Pembuatan jenis list ini sama dengan unordered list. Kita tinggal meng-klik icon ordered list pada property inspector. Selanjutnya sama dengan unordered list.

Gambar 36. Cara yang digunakan untuk membuat list yang berurutan

Ordered list sendiri mempuyai beberapa style. Anda bisa penomorannya bisa anda ubah menjadi alfabet (a, b, c,…), atau angka romawi (i, ii, iii, …). caranya adalah dengan menempatkan cursor pada salah satu list kemudian mengklik tombol list item yang ditunjukkan tanda panah biru pada gambar di atas.

− Nested list

Merupakan kombinasi dari kedua model di atas atau bahkan kombinasi style dari masing-masing jenis list di atas. Perhatikan contoh berikut:

Cara membuatnya dapat anda lihat pada ilustrasi di bawah:

Gambar 37. Cara yang digunakan untuk membuat berbagai variasi list

1. Pertama kita aktifkan dulu tombol ordered list. Kemudiann ketik urutannya. Kita tidak perlu menuliskan hirarki yang tinggi dulu. Tulis saja berurutan tanpa mempedulikan hirarki.
2. Blok pada hirarki yang lebih rendah. Perhatikan gambar di atas, nomor 3 sampai nomor 8 saya blok
3. Klik pada tombol indent, maka secara otomatis bagian yang anda blok akan membuat penomoran sendiri. Karena pada contoh tersebut hirarki yang ke dua mempunyai style romawi, kita ubah stylenya dengan mengklik sembarang tempat pada hirarki yang kedua kemudian menekan tombol “list item”. Dan merubahnya menjadi romawi
4. Ulangi langkah diatas untuk hirarki yang ke-tiga, kemudian ketika masih ter-blok, klik padatombol unordered list.

Tentang tabel

Tabel merupakan bagian yang sangat sangat penting dalam pendesainan web. dengan tabel, kita dapat membuat tampilan web lebih bervariasi. Namun tabel bukannya tanpa kekurangan. Penyusunan tabel yang terlalu rumit, bertumpuk, akan menyebabkan pembacaan yang lebih lama oleh browser. Efisiensi dalam penggunaan tabel sangat penting disini. Kita mulai dengan property-property dasar tabel.

Memasukkan tabel

Kita dapat membuat tabel dengan tiga cara, yaitu:

• Menggunakan tombol tabel pada insert bar di tab common atau di tab table

Gambar 38. icon yang digunakan untuk memasukkan tabel

• Menggunakan menu insert > table
• Menggunakan shortcut ctrl + alt + T

Pertama kali jendela yang muncul ketika anda memasukkan tabel adalah seperti di bawah:

Gambar 39. Jendela yang pertama kali muncul ketika memasukkan table.

Rows : disini kita isikan jumlah baris yang diinginkan

Colums : disini kita isikan jumlah kolom yang diinginkan

Width : panjang tabel. Secara default nilainya adalah 75 persen. Hal tersebut berarti lebar tabel yang kita buat adalah 75 persen dari panjang tampilan. Jika kita memilih satuan persen, maka tabel kita bisa berubah-ubah panjangnya menurut browser. Sedangkan jika kita memilih satuan pixel, maka panjang tabel kita tetap menurut yang kita isikan.

Border adalah bingkai dari tabel kita (tanda panah hitam)

Cell padding : adalah jarak antara dinding sel dengan sesuatu yang diisikan dalam sel tersebut (tanda warna biru)

Cell spacing : jarak antar sel (tanda warna merah)

Gambar 40. Penjelasan mengenai bagian-bagian tabel

Menyeleksi elemen dalam tabel

Untuk menjelaskan bab ini silahkan buat tabel 3 x 3 dengan property default. Berikut ini contoh tabel yang sudah saya beri notasi:

Misalkan kita ingin menyeleksi kolom bagian tengah saja kita bisa kita bisa melkukannya dengan:

• menempatkan cursor pada sel nomor 2 kemudian klik dan seret ke bawah sampai nomor 8.
• Menekan ctrl kemudian mengklik sel yang diinginkan.

Sedangkan untuk menyeleksi seluruh tabel kita bisa melakukannya dengan mengklik pada daerah di luar tabel kemudian menyeretnya melewati tabel atau dengan mengklik bordernya. Tapi bila menggunakan cara tersebut kita akan dapat kesulitan ketika tabel kita berada dalam tabel yang lain yang semuanya tidak mempunyai border seperti contoh di bawah:

Gambar 41. jika table kita bertumpuk-tumpuk, bisa sangat sulit untuk menyeleksi table tertentu. Untuk mempermudahnya gunakanlah tag selector.

Untuk dengan mudah menyeleksi “tabel a” caranya adalah:

1. tempatkan cursor pada tabel a
2. perhatikan bagian tag selector yang terdapat di kiri bawah di atas property inspector berubah menjadi beberapa tombol dengan tulisan tag-tag tertentu. Dalam pekerjaan saya terlihat seperti ini:

Tombol tersebut merupakan alat untuk mempermudah kita memilih tag-tag yang terdapat pada tampilan. Coba klik tombol tersebut dari yang paling kanan, maka yang terseleksi adalah tampilan hasil dari tag <td>, begitu seterusnya

1. klik pada <table> maka tabel yang berada pada kolom tersebut akan terseleksi

Setelah anda seleksi, maka property-property dari elemen tersebut akan tertampil pada property inspector. Dari situ kita bisa merubah property dari obyek yang kita buat. Property dari setiap apa yang kita seleksi akan tertampil di property inspector.

Mengubah property tabel

Sama dengan mengubah ukuran gambar, kita bisa mengubahnya melalui property inspector atau langsung dengan menggunakan cursor.

Gambar 42. cara untuk mengubah property tabel

• Untuk mengubah ukuran tabel kita bisa menggunakan kotak “W” dan “H”
• Untuk mengubah warna background kita bisa gunakan “Bg Color”
• Untuk mengubah warna bingkai (border) kita bisa gunakan “Brdr color”
• Untuk memberikan background dengan obyek tertentu kita bisa menggunakan “Bg Image”.
• Untuk mengatur penempatan tabel kita bisa gunakan “Align”

Tentang hyperlink

Link merupakan elemen terpenting dalam sebuah situs. Elemen ini merupakan jembatan untuk berpindah dari satu halaman ke halaman yang lain dari topik satu ke topik yang lain dalam satu halaman, atau bahkan ke halaman web yang lain atau ke alamat email.

Di bawah ini adalah sintak penulisan html untuk membuat link

<a href=”alamat_link”>text atau gambar</a>

Misalkan untuk membuat link menuju ke halaman kontak.html pada text tertentu maka htmlya adalah:

<a href=”kontak.html”>text tertentu</a>

Sedangkan untuk memberikan link pada gambar tentu saja didalam tag <a> terdapat tag <img>

<a href=”alamat_link”><img src=”kontak.gif” alt=”kontak”></a>

Dijelaskan di atas bahwa kita bisa membuat link yang menuju ke halaman tertentu, situs tertentu, dan bahkan alamat email tertentu. Di bawah ini adalah contoh html untuk beberapa jenis alamat tersebut:

<a href=”http://www.google.com”>link menuju ke google</a>

<a href=”mailto:dk_arismawan@yahoo.com”>mengirim email ke dk_arismawan@yahoo.com</a>

Sedangkan untuk membuka alamat link ke jendela browser yang baru kita bisa menggunakan target=”_blank”

<a href=”http://www.google.com” target=”_blank”>link menuju ke google</a>

Untuk membuat link di dreamweaver sangatlah mudah. Kita tinggal menyeleksi text atau gambar mana yang ingin digunakan sebagai hyperlink kemudian tinggal mengisikan alamat yang ingin dituju pada kotak “link” pada property inspector.

Gambar 43. Cara memasukkan link pada text

Cara kedua adalah dengan meng-klik icon folder (panah merah) kemudian mencari file yang kita tuju. Jika file kita berada di luar root site yang telah kita definisikan maka dreamweaver akan mengcopy file tersebut ke root site kita sehingga nantinya tidak akan terjadi kesalahan alamat.

Cara yang ketiga adalah dengan megklik icon target (tanda panah biru) kemudian menyeretnya pada file yang terdapat pada site panel kita. Ini merupakan cara paling unik yang mempermudah kita membuat situs dengan cepat

Gambar 44. menentukan target link menggunakan target, kita hanya perlu mengklik kemudian drag ke dokumen yang dituju pada panel file.

Link untuk menuju ke tempat tertentu dalam satu dokumen

Kita dapat memberikan link untuk menuju ke tempat tertentu dalam satu dokumen. Link jenis ini sering disebut sebagai anchors. Tempat tertentu dalam sebuah dokumen kita beri named anchor sebagai target untuk link.

Untuk lebih jelasnya silahkan ikuti lagkah berikut:

1. pertama kita buat halaman baru pada situs kita yang mempunyai banyak teks dan paragraf. Disini kita buat saja tiga paragraf yang mempunyai banyak isi. Buat juga tulisan “paragraf 2” pada bagian paling atas dokumen.
2. posisikan cursor anda pada awal paragraf ke dua. Kemudian menu insert > named anchor atau dengan shortcut ctrl + alt + A. Maka akan kelihatan tanda .
3. blok tulisan “paragraf 2” di bagian paling atas. Kemudian gunakan klik target seret dan arahkan ke tanda .

Gambar 45. dengan anchor point kita bisa menuju ke tempat tertentu dalam satu halaman ketika sebuah link di-klik.

1. sekarang anda telah mempunyai link menuji ke tempat tertentu dalam halaman anda. Tekan F12 untuk melihatnya di browser kemudian klik link anda. Apa yang terjadi?

NB : jika ingin melihat perbedaannya maka halaman anda harus panjang sampai bisa di-scroll, atau dengan mengecilkan windows borowser.

Tentang image maps

Jika anda membuat link pada sebuah gambar, maka sudah pasti bahwa area yang bisa anda klik berupa kotakan dengan ukuran sama dengan gambar bukan? Nah dengan image maps kita bisa membuat area link tidak hanya kotak, namun bisa berupa elips atau bangun tak beraturan.

Selain kemampuan tersebut, dengan image maps kita juga bisa membuat area link lebih dari satu buah sehingga kita tidak perlu memecah gambar tersebut menjadi beberapa bagian untuk bisa diberi link yang berbeda.

Untuk bisa membuatnya ikuti langkah berikut ini :

1. Buat halaman baru kemudian masukkan gambar yang besar di dalamnya. Masukkan saja image “imagemaps.gif” yang ada pada cd rom.
2. seleksi gambar yang kita masukkan kemudian silahkan mulai menggambar maps pada gambar anda.

Gambar 46. dengan imagemaps kita bisa membuat lebih dari satu area link pada sebuah gambar.

Untuk “link 1” kita gambar dengan menggunakan icon yang ditunjukkan tanda panah kuning. Untuk “link 2” kita gambar menggunakan icon yang ditunjukkan tanda panah hijau. Untuk “link 3” kita menggunakan icon yang ditunjukkan tanda panah biru.

Jika kita ingin menyeleksi map yang kita buat, maka kita bisa menggunakan icon yang ditunjukkan oleh tanda panah merah.

Untuk memberikan nama map, gunakanlah textbox yang ditunjukkan oleh tanda panah hitam.

Nah, masing-masing map yang kita buat dapat kita masuki alamat link. Untuk melakukannya, alamat link kita masukkan ke dalam textbox yang ditunjukkan oleh tanda panah warna ungu. Setelah selesai silahkan lihat di browser dan klik link yang telah kita buat (F12). Perhatikan area yang bisa di klik.

LATIHAN 1

Sebuah Lembaga Bimbingan Belajar ingin memperkenalkan dirinya ke dunia melalui internet dengan harapan mendapatkan murid yang lebih banyak. Cobalah membuat situs lengkap untuk membantu mewujudkan cita-cita lembaga tersebut.

Aplikasikanlah semua yang sudah dipelajari sebelumnya.

Desain web tingkat lanjut dengan dreamweaver

Menggunakan tabel untuk mengatur tampilan

Table tidak hanya dapat berfungsi sebagai penampil data-data saja, namun dapat juga dipakai untuk mengatur tampilan situs yang lebih rumit. Kita ambil contoh beberapa situs http://oke.or.id berikut:

Dapat anda lihat bahwa dalam situs tersebut berbagai text ditempatkan pada koordinat tertentu dengan baground tertentu pula, belum lagi penempatan gambar-gambar yang ada disitu. Penempatan-penempatan ini nantinya dapat kita atur melalui table.

Untuk tutorial ini kita akan membuat layout web yang umum. Setelah anda mempelajarinya, cara-cara yang diajarkan dapat juga diaplikasikan untuk berbagai jenis website

Sebelumnya kita perlu tahu dulu tentang apa itu seperti apa web layout yang umum. Gambar di atas merupakan contoh yang bagus untuk layout web yang umum. Disana terdapat header, isi dan footer. Header web umumnya diisi dengan nama web dan navigasi umum web. Sedangkan bagian isi dibagi lagi menjadi tiga kolom, yaitu bagian kiri yang biasanya sebagai tempat link-link tertentu, bagian tengan adalah untuk isi dari halaman web tertentu, dan bagian kiri dapat digunakan untuk menampilkan beberapa isi dari halaman yang lainnya. Sedangkan bagian footer biasanya digunakan untuk menampilkan link-link pembantu dan tulisan hak cipta.

Tentu saja tidak sekaku itu dalam membuat website. Kita harus juga melihat kebutuhan dari klien dan juga jenis web yang akan dibuat. Namun apabila anda perhatikan pada kebanyakan website, mereka menggunakan jenis layout yang menyerupai contoh di atas.

Dalam sebuah situs web, kita sering mendengar kata “homepage”. Ini artinya adalah halaman muka, atau halaman yang pertama kali dilihat oleh user. Halaman muka biasanya berbeda dengan halaman-halaman yang lain. Halaman muka tersebut dirancang untuk mewakili isi keseluruhan dari situs. Perhatikan situs http://cnn.com lihatlah bahwa halaman utamanya berbeda dengan halaman isinya.

Halaman utama situs cnn:

Halaman isi situs cnn

Perhatikan layoutnya mirip dengan yang kita bicarakan tadi bukan?.

Sekarang kita mulai saja membuat situs umum yang mirip dengan desain di atas. Yang tertulis disini merupakan pengalaman penulis yang dirasa cukup efisien dalam pembuatannya. Tutorial ini menggabungkan dua software, yaitu photoshop dan dreamweaver. Namun disini kita tidak akan membahas bagaimana membuat tampilan di dalam photoshop, sehingga kita gunakan file gambar yang sudah disediakan dalam CD ROM.

Di folder “table desain” dalam CD ROM anda terdapat gambar tampilan situs yang akan kita buat dengan nama file “mock up.gif”. Mock up.gif tersebut sebelumnya kita buat di photoshop, kemudian kita potong-potong kemudian digabung lagi dalam dreamweaver dengan menggunakan table. Jadi disini intinya adalah, jika kita mendesain situs dengan tampilan yang kompleks, sebelumnya kita buat tampilannya dalam photoshop. Aturlah komponen-komponen web seperti link, gambar, dan lain-lain sampai membentuk tampilan yang kita inginkan. Aplikasikan dasar-dasar dalam mendesain situs disini. Buatlah tampilan semenarik mungkin dengan tanpa membingungkan user ketika melihat situs kita. Setelah selesai, kita potong gambar-gambar yang diperlukan untuk membuat tampilan seperti itu. Sekarang kita pelajari teknisnya.

Bukalah file mockup.jpg.

Kita akan membuat tampilan yang kompleks seperti halaman di atas dengan menggunakan bantuan table.

Ketika desain dalam photoshop anda sudah selesai, sekarang anda menentukan bagian mana yang harus dimasukkan dalam bentuk gambar dan bagian mana yang bisa dibuat background.

Pertama kali kita bagi desain kita menjadi tiga bagian, yaitu bagian header, body, dan footer. Hal ini dilakukan untuk mempermudah kita dalam meng-edit situs nantinya.

Setelah kita menentukan bagian-bagian tersebut, kemudian kita tentukan bagian mana yang harus dijadikan gambar dalam sebuah website. Saya ambil contoh bagian body.

Perhatikan bagian yang dilingkupi warna merah. Kita tidak perlu memasukkan gambar sebesar (15px x 539px) dalam halaman web kita. Kita hanya perlu menggunakan gambar sebesar (15px x 1px) kemudian menempatkannya sebagai background pada baris table sepanjang 539px.

Kita kerjakan bagian header dulu:

Bagian header saya bagi menjadi seperti gambar di bawah:

Bagian 1 dan 3, karena mempunyai warna yang banyak saya simpan dalam bentuk jpeg. Sedangkan bagian tengah tidak mempunyai banyak warna sehingga format gif merupakan pilihan yang baik untuk mengurangi ukuran file.

Bagian 4 tidak perlu saya save dalam bentuk gambar karena dapat diwakili dengan membuat baris table dengan background warna seperti tersebut. Bagian yang perlu untuk disimpan dalam file gambar adalah icon rumah disamping tulisan “home”.

Sedangkan nomor 5 dan 6 kita hanya perlu membuat gambar dengan ukuran panjang 23×1 pixel kemudian menjadikannya background dari table.

Berikut ini rancangan table yang akan digunakan:

Disini kita membuat table dengan tiga kolom (lihat warna merah) kemudian kolom tengah kita isi table baru dengan pembagian antar cellnya seperti gambar hijau. Hal ini dilakukan untuk menghindari pecahnya tampilan jika kita menggunakan satu table dengan banyak cell yang tidak simetris. Dengan membaginya dengan table baru di dalam table, maka jika salah satu sel bertambah ukurannya, maka tidak akan mengganggu table yang lain.

Sebelum memulai bekerja, ada baiknya kita review ulang mengenai bagaimana mengubah property table menggunakan property inspector. Anda bisa membaca pada bagian pertama (berkenalan dengan dreamweaver)

Sekarang kita mulai menyusun ganmbar tersebut dalam dreamweaver. Copy dan paste folder images dalam CD ROM ke dalam folder baru dalam hardisk anda. Kita namakan folder baru tersebut “situs baru”. Kemudian definisikan situs dalam folder tersebut sebagaimana cara yang sudah kita pelajari pada bab sebelumnya.

1. Buatlah table dengan tiga kolom dengan ukuran 770px tepat seperti panjang desain yang kita buat di photoshop. Tabel yang kita buat harus mempunyai border=0, cellpadding=0, cellspacing=0 sehingga tidak akan kelihatan jika dilihat dalam browser.

1. Klik pada kolom pertama kemudian ubah panjang kolom tersebut menjadi sama seperti gambar “header left” yaitu 23 pixel. Kemudian isi backgroundnya dengan gambar “header_left”.

1. Sekarang ulangi langkah nomor 2 untuk kolom paling kiri. Gunakan gambar “header_left” untuk backgroundnya.
2. Sekarang kita masukkan table baru pada kolom yang ditengah. Klik pada kolom di tengah kemudian masukkan table dengan width 724px. Table tersebut mempunyai properties seperti di bawah ini: Row = 3, Column = 3, Border=0, Left padding = 0, Right padding=0
3. sekarang kita akan mengisi masing-masing kolom pada baris satu dengan gambar-gambar yang sudah disediakan. Isi kolom kiri dengan “header1.jpg” kemudian kolom tengah dengan “header2.gif”, dan kolom kanan dengan “header3.jpg”. Nah, kini tampilan header sudah selesai. Kita tinggal meletakkan table tampilan tersebut tepat di tengah tampilan. Caranya dengan mengubah align dari table paling luar menjadi “center”. Untuk menyeleksi table bagian luar kita bisa menggunakan bantuan tag selector sebagaimana gambar dibawah hanya kita tinggal klik sembarang di kolom. Kemudian kita pilih tombol <table> paling kiri.
4. Sekarang kita akan menggabungkan tiga kolom pada baris ke dua table tersebut. Caranya seleksi ketiga kolom tersebut. Tekan control terus klik pada cell yang diinginkan. Kemdian tekan icon yang ditunjukkan oleh tanda panah.

1. Ubah warna background baris tersebut menjadi #A3ADA2 anda bisa mengisikan langsung angka tersebut dalam kolom warna seperti yang ditunjukkan gambar di bawah. Kemudian ubah horizontal alignment-nya menjadi right.

1. Secara umum tampilan header kita telah selesai, kita tinggal mengisi bagian text. Silahkan isi text seperti tampilan yang diinginkan pada baris kedua bagian table yang dalam. Seperti ditunjukkan oleh gambar. Jangan lupa memasukkan juga icon home yang sudah disediakan.

OK untuk sementara bagian header selesai. Masalah warna dan jenis font kita setting nanti. Sekarang kita beranjak ke bagian body. Bagian ini akan sedikit rumit.

Pertama kita bagi bagian body tersebut menjadi seperti bagian di bawah:

Gambar di atas memperlihatkan pembagian dari gambar. Masing-masing warna garis di atas dapat dianggap sebagai calon table yang akan kita buat. Berarti nanti kita akan buat tiga table. Dari situ kira mendapat gambaran tentang gambar mana yang bisa dijedikan background dan bagian mana yang harus disimpan dalam bentuk gambar utuh.

Sekarang kita mulai membuat tabelnya.

1. Di bawah table yang kita buat sebelumnya, kita buat table yang mempunyai 5 kolom (perhatikan warna merah gambar di atas). Untuk bisa membuat table di bawah. Masukkan property table berikut: width=770px, cellpadding=0, cellspacing=0, boder=0.
2. Klik pada kolom 1, kemudian masukkan properties berikut ini: width=23px, background=”header_left.gif”.
3. klik kolom ke-dua kemudian ubah propertynya sebagai berikut: width=151, bgcolor=”#D2DCD1”, vertical alignment = top.

1. klik kolom ketiga, ubah propertynya jadi sebagai berikut: width=33px, background=”body3.gif”, vertical alignment = top. Kemudian isi kolom tersebut dengan gambar “body3img.gif”.

1. klik pada kolom 4 kemudian masukkan property sbb: width=540px, bgcolor=” F6F8F4”, vertical alignment = top.
2. klik pada kolom ke lima kemudian masukkan property sbb: width=23, background=”header_right.gif”.

nah kita sudah membuat base untuk bagian bodynya. Sekarang kita kerjakan bagian menu. Bagian menu tersebut terletak pada kolom ke dua pada table yang telah kita buat sebelumnya, sehingga kita klik terlebih dahulu kolom kedua tersebut sehingga nantinya kolom yang kita buat terletak di situ.

Untuk lebih jelasnya kita langsung aplikasikan cara di atas. Klik pada kolom kedua kemudian shift + enter terlebih dahulu.

1. Buat table dengan property: width = 151, bgcolor=”# C8D3C7”, column=2, rows=15, cellpadding = 0, cellspacing = 0.’
2. seleksi kolom ke dua, kemudian merger semua baris pada kolom tersebut, kemudian ubah bgcolor= DEE5DD. Masukkan image 1px.gif kemudian ubah widthnya menjadi 1px.
3. Klik pada kolom pertama baris paling atas kemudian isi dengan gambar headmenu.gif
4. Klik pada kolom pertama baris ketiga. Kemudian isi dengan property berikut: width=”150px”, bgcolor= DEE5DD. Kemudian isi baris tersebut dengan gambar 1px.gif. dengan begitu maka lebarnya akan berubah menjadi 1 px, mengkuti ukuran dari gambar yang kita masukkan.
5. Ulangi langkah nomer 4 untuk baris yang ganjil (5,7,9,dst).
6. klik pada baris ke dua, kemudian ubah horizontal alignmentnya menjadi right. Isi baris ini sesuai dengan menu yang disediakan.
7. Ulangi langkah nomor 6 untuk baris-baris genap.

Sekarang kita membuat table bagian kanan.

Klik pada kolom ke empat table yang berukuran 770 kemudian masukkan table dengan panjang 100% dengan 1 kolom dan 1 baris. Pada baris pertama isi dengan gambar “atasisi.gif” kemudian isi backgroundnya dengan gambar itu juga.

Tekan tab kemudian masukkan tulisan seperti yang ada di tampilan anda. Terserah anda ingin memasukkan tulisan apapun di situ. Masukkan juga gambar “isi.gif”

Sekarang anda mempunyai tampilan yang mirip dengan desain kita sebelumnya, hanya font dan peletakan isinya yang tidak sama. Anda tidak perlu merisaukan hal ini. Nantinya hal tersebut akan kita ubah tampilannya menggunakan beberapa cara.

Kita lanjutkan saja dengan membuat bagian footernya.

Di bagian footer kita hanya perlu membuat table dengan empat kolom dengan background=”footer.gif”. Kolom yang pertama berukuran 23 pixel dan mempunyai background “header_left.gif”.

Klik pada kolom kedua dan ubah panjangnya menjadi 10px

Klik pada kolom ke tiga kemudian ubah panjangnya menjadi 714px, dengan horizontal alignment = center.

Klik pada kolom ke empat kemudian ubah panjangnya menjadi 23px dan dengan background=header_right.gif.

Untuk bagian menunya, kita bisa masukkan sembarang link. Gunakan saja tanda “#” untuk mewakili link.

Sekarang pekerjaan anda akan tertampil seperti di bawah:

Hal terakhir yang kita lakukan adalah mengubah jenis font dan mengatur penempatanya. Ada dua cara yang bisa kita lakukan untuk mengubah gambar tersebut. Cara yang pertama adalah dengan menggunakan property inspector untuk mengubah property dari text. Caranya kita hanya tinggal memblok teks yang akan kita ubah kemudian kita ubah propertynya menggunakan property inspector. Pada desain di atas kita menggunakan jenis font Tahoma 11 px dengan ukuran 11 px. Di property inspector property tersebut tidak tertampil, maka kita harus menulis “Tahoma” pada jenis font dan mengubah ukurannya menjadi 2pt.

Jika diperlukan font bold, kita hanya perlu meng-klik tombol B saja.

Sedangkan cara yang berikutnya adalah dengan menggunakan CSS (Cascading Style Sheet). Dengan CSS kita bisa mengellompokkan settingan-settingan dari property font di atas pada tempat tersendiri bahkan pada file lain. Karena fleksibilitas dan kemudahannya, kita akan menggunakan cara ini untuk mengatur teks dan properties yang lain.

Bagian yang perlu dirubah untuk bisa memenuhi tampilan desain sebelumnya adalah sbb:

Sekarang kita akan men-setting teks yang telah kita buat menggunakan CSS. Hal pertama yang dilakukan adalah mebuat CSS terlebih dahulu. Caranya adalah dengan menggunakan panel css. Ditunjukkan pada gambar di bawah:

gambar. Untuk membuat css klik pada icon yang ditunjukkan oleh tanda panah

setelah anda klik maka akan muncul jendela dialog seperti di bawah:

Gambar Kotak dialog pembuatan css

Kotak nama digunakan untuk menentukan nama dari elemen css yang nantinya kita load dalam desain kita.

Pada bagian type terdapat 3 pilihan, yaitu

Make custom style sheet

Digunakan apabila kita ingin membuat konfigurasi style baru.

Redefine HTML Tag digunakan apabila kita langsung ingin mengatur konfigurasi tampilan darji tag-tag html kita. Sehingga setelah kita buat css untuk tag <p>, maka dalam html nantinya setiap tag <p> akan diaplikasikan konfigurasi tampilan yang kita definisikan dalam css tadi

Use CSS Selector digunakan apabila kita ingin memasukkan atau memodifikasi tampilan link.

Bagian Define in digunakan untuk menentukan apakah css kita nantinya dibuat dalam html itu sendiri (dalam elemen head) ataukan dipisah ke file lain.

Sekarang kita akan memperbaiki tampilan situs kita sebelumnya menggunakan css. Beberapa property yang kita atur adalah:

1. Bagian tag body mempunyai property : semua margin = 0, dan tidak mempunyai padding, sehingga tampilan kita akan berhimpit ke batas atas kanvas browser.
2. Bagian link menu mempunyai jenis font Tahoma bold, jika mouse dilewatkan, warna font akan berubah menjadi merah.
3. Bagian isi (yaitu tiap paragrafnya) sedikit menjorok ke kanan sekitar 10 pixel.
4. Bagian link pembantu (kanan atas) mempunyai property warnanya putih, jenis font verdana 10px, dan jika mouse dilewatkan akan berubah menjadi hitam.

Sekarang kita mulai membuat CSS untuk memenuhi criteria yang saya sebutkan di atas. Ikutilah langkah-langkah berikut:

Sekarang kita buat css untuk mengatur elemen body.

1. Klik pada “New CSS Style” pada bagian kanan bawah panel design kemudian jendela dialog akan muncul. Pilih pada “redefine html tag” kemudian klik pada dropdown dan pilih <body>. Maka jendela baru akan muncul.

Kotak dialog untuk memasukkan style.

Perhatikan juga pada bagian “Define In” saya memilih This Document Only. Hal tersebut berarti Style kita dikelompokkan pada elemen head dokumen kita. Setelah kita klik OK, kotak dialog di bawah akan muncul:

Dalam Kotak Dialog ini kita memilih property apa saja yang ingin kita masukkan

1. Pilih pada Background kemudian masukkan #374948 pada kotak Background Colornya.
2. Pilih pada box kemudian masukkan angka 0 pada margin dan padding. Pastikan checkbox same for all tercentang. Klik apply, perhatikan perbedaannya. Gini tampilan table yang kita buat berhimpit pada bagian atas. Hal tersebut karena kita mengatur property dari body yang secara default mempunyai margin dan padding sekarng tidak (margin=0 padding=0).

Sekarang masuk ke bagian link menu (bagian kiri). Pada bagian menu tersebut berarti kita akan mengatur tampilan dari link. Untuk membuatnya silahkan ulangi langkah ke-satu di atas, namun dengan property seperti yang ditunjukkan gambar berikut:

1. Klik pada “New CSS Style”

Pilih Use CSS Selector Untuk mengatur tampilan link

Jika anda memilih Use CSS Selector maka anda akan menjumpai tiga jenis css yang bisa diaplikasikan ke link, yaitu:

A:link à Digunakan untuk mengubah tampilan link

A:visited à Digunakan untuk mengubah tampilan link yang telah dikunjungi

A:hover à Digunakan untuk mengubah property link ketika cursor melewatinya

A:active à Digunakan untuk mengubah property link ketika kita mengkliknya.

Dari sini masukkan property masing-masing jenis style link di atas.

Berikut ini property-property yang saya masukkan ke dalam masing-masing jenis di atas:

Untuk a:link :

Untuk a:visited:

Untuk a:hover

Untuk a:active

Nah sekarang tampilan setiap link akan memenuhi CSS yang kita buat. F12 untuk melihat aksinya

Perhatikan bahwa Style yang kita buat sebelumnya tersebut mempunyai efek pada semua tag link yang ada dalam dokumen, padahal jika kita melihat desain yang kita buat sebelumnya, pada bagian link pembantu kanan atas linknya berwarna putih. bagaimana membuat link yang berbeda tersebut adalah dengan membuat custom style sheet untuk link di atas. Kita tidak perlu repot-repot mengulangi langkah-langkah seperti sebelumnya. Kita hanya perlu memodifikasi scriptnya secara langsung. Hal ini dirasa jauh lebih efisien jika dibandingkan dengan membuat css baru satu per satu.

Sekarang masuklah ke tampilan code kemudian perhatikan dalam elemen <head> terdapat script sebagai berikut:

<style type=”text/css”>

<!–

body {

background-color: #374948;

margin: 0px;

padding: 0px;

}

a:link {

font-family: tahoma;

font-size: 11px;

color: #000000;

font-weight: bold;

text-decoration: none;

}

a:visited {

font-family: tahoma;

font-size: 11px;

font-weight: bold;

color: #666666;

text-decoration: none;

}

a:hover {

font-family: tahoma;

font-size: 11px;

font-weight: bold;

color: #CC6600;

}

a:active {

font-family: tahoma;

font-size: 11px;

font-weight: bold;

color: #990000;

text-decoration: none;

}

–>

</style>

Nah script di atas adalah script CSS yang sudah kita buat sebelumnya. Sekarang kita akan membuat css sendiri untuk bagian link kanan atas.

Siahkan copy paste script link yang ada di atas kemudian ubah scriptnya seperti di bawah:

<style type=”text/css”>

<!–

body {

background-color: #374948;

margin: 0px;

padding: 0px;

}

a:link {

font-family: tahoma;

font-size: 11px;

color: #000000;

font-weight: bold;

text-decoration: none;

}

a:visited {

font-family: tahoma;

font-size: 11px;

font-weight: bold;

color: #666666;

text-decoration: none;

}

a:hover {

font-family: tahoma;

font-size: 11px;

font-weight: bold;

color: #CC6600;

}

a:active {

font-family: tahoma;

font-size: 11px;

font-weight: bold;

color: #990000;

text-decoration: none;

}

.kananatas a:link {

font-family: tahoma;

font-size: 11px;

color: #ffffff;

text-decoration: none;

}

.kananatas a:visited {

font-family: tahoma;

font-size: 11px;

color: #666666;

text-decoration: none;

}

.kananatas a:hover {

font-family: tahoma;

font-size: 11px;

color: #CC6600;

}

.kananatas a:active {

font-family: tahoma;

font-size: 11px;

color: #990000;

text-decoration: none;

}

–>

</style>

Sekarang anda sudah membuat style khusus untuk link kanan atas. Yang kita lakukan sesudahnya adalah memanggil code CSS yang kita buat tersebut ke dalam link pembantu. Caranya adalah:

Klik pada salah satu link pembantu kemudian dengan code selector klik pada tag <td> kemudian aplikasikan style tersebut dengan memilih css yang sudah kita buat sebelumnya dalam property inspector perhatikan gambar di bawah:

Sedangkan kalau kita lihat pada bagian isi, tulisannya masih dalam bentuk standart. Kita ingin mengubahnya menjadi Tahoma 11 px. Perhatikan juga dalam isi tersebut mempunyai beberapa paragraph. Untuk mempersingkat pekerjaan kita bisa mengaplikasikan style baru pada tag paragraph <p>.

Silahkan buat style baru untuk P:

Pilih redefine HTML tag dan pilih p

Masukkan property font

Masukkan property box

Klik apply dan kemudian OK. Maka sekarang tampilan anda akan terlihat seperti berikut ini:

Hal terakhir yang kita lakukan adalah mengubah align dari semua table dasar menjadi center.

Sedangkan bagian link kiri anda lihat masih berhimpit pada table. Anda bisa menggunakan karakter spasI (&nbsp;) untuk membuatnya lebih menjorok ke kiri.

1.      Masuk pada direktori utama mysql, seperti perintah berikut:

C:\WINDOWS>cd\apache\mysql\bin

2.      Kemudian ketikkan perintah seperti contoh berikut:

C:\apache\mysql\bin>mysql

Kemudian akan masuk kedalam prompt MySQL seperti tampilan dibawah ini:

1.      Cara untuk membuat sebuah database sekolah baru, mengaktifkan database sekolah, dan membuat table instruktur menggunakan perintah sebagai berikut:

Ketik:

            Mysql> create database sekolah;

            Query OK, 1 row affected (0.01 sec)

            Mysql> use sekolah

            Database changed

            Mysql> create table instruktur(

è    nomor int(6) not null primary key,

è    nama char(40) not null,

è    jenis_kelamin char(25) not null,

è    alamat char(255) not null,

è    kota char(20) not null);

Query OK, 0 rows affected (0.38 sec)

2.      Untuk memasukkan sebuah baris (record) kedalam table MySQL adalah sebagai berikut:

Ketik:

                  Mysql> insert into instruktur

è    Values(‘1’,’Nanang Suwandi’,’Laki-Laki’,’Jl. Pekapuran’,

è    ‘Depok’);

Query OK, 1 row affected (0.34 sec)

Mysql> insert into instruktur

è    Values(‘2’,Ramadhin Tarigan’,’Laki-Laki’,’Jl. Pemda Bogor’,

è    ‘Depok’);

Query OK, 1 row affected (0.00 sec)

Mysql> insert into instruktur

è    Values(‘3’,Agung Setiadi’,’Laki-Laki’,’Jl. Cibinong’,

è    ‘Depok’);

Query OK, 1 row affected (0.00 sec)

3.      Untuk menampilkan isi table menggunakan perintah SELECT, cara penulisan perintah SELECT adalah:

Ketik:

            Mysql> select*from instruktur;

4.      kemudian cara untuk membuat table siswamenggunakan perintah sebagai berikut:

Ketik:

            Mysql> create table siswa(

è    nomor int(6) not null primary key,

è    nama char(40) not null,

è    jenis_kelamin char(25) not null,

è    alamat char(255) not null,

è    kota char(20) not null);

Query OK, 0 rows affected (0.38 sec)

5.   Untuk memasukkan sebuah baris (record) kedalam table MySQL adalah sebagai berikut:

Ketik:

                  Mysql> insert into siswa

è    Values(‘1’,’Singgih Maryu Aji’,’Laki-Laki’,’Jl. Anggrek 06’,

è    ‘Depok’);

Query OK, 1 row affected (0.00 sec)

Mysql> insert into siswa

è    Values(‘2’,Iwan Sanjaya’,’Laki-Laki’,’Jl. Radar Auri’,

è    ‘Depok’);

Query OK, 1 row affected (0.00 sec)

Mysql> insert into siswa

è    Values(‘3’,Saiful Wahyudi’,’Laki-Laki’,’Jl. Garuda’,

è    ‘Depok’);

Query OK, 1 row affected (0.00 sec)

Mysql> insert into siswa

è    Values(‘4’,Wahyu Setiadi’,’Laki-Laki’,’Jl. Ciherang’,

è    ‘Depok’);

Query OK, 1 row affected (0.00 sec)

6.      Untuk menampilkan isi table menggunakan perintah SELECT, cara penulisan perintah SELECT adalah:

Ketik:

                        Mysql> select*from siswa;

7.   kemudian cara untuk membuat table mata_pelajaran menggunakan perintah sebagai berikut:

Ketik:

            Mysql> create table siswa(

è    nomor int(6) not null primary key,

è    nama char(40) not null,

è    jenis_kelamin char(25) not null,

è    alamat char(255) not null,

è    kota char(20) not null);

Query OK, 0 rows affected (0.16 sec)

8.   Untuk memasukkan sebuah baris (record) kedalam table MySQL adalah sebagai berikut:

Ketik:

                  Mysql> insert into mata_pelajaran

è    Values(‘1’,’Nur Sidik’,’Laki-Laki’,’Jl. Jati Jajar’,

è    ‘Depok’);

Query OK, 1 row affected (0.06 sec)

Mysql> insert into mata_pelajaran

è    Values(‘2’,Sri Mulyani’,’Laki-Laki’,’Jl. Cijantung’,

è    ‘Depok’);

Query OK, 1 row affected (0.00 sec)

Mysql> insert into mata_pelajaran

è    Values(‘3’,Abdul Rosyid’,’Laki-Laki’,’Jl. Cililitan’,

è    ‘Depok’);

Query OK, 1 row affected (0.01 sec)

9.      Untuk menampilkan isi table menggunakan perintah SELECT, cara penulisan perintah SELECT adalah:

Ketik:

                        Mysql> select*from mata_pelajaran;

Slackware sebagai salah satu distro paling tua memiliki penggemar yang cukup banyak. Tapi para pemula linux entah kenapa selalu beranggapan bahwa Slackware susah untuk dipelajari, bahkan untuk installasi sekalipun slackware begitu menakutkan untuk pemula.

Sebetulnya slackware tidak lah menakutkan, bahkan installasi nya yang lebih memilih menggunakan text base masih lebih mudah dibandingkan dengan installasi distro lain yang sudah mempergunakan GUI yang cantik.

Keuntungan installasi text base adalah tidak diperlukannya resource hardware yang terlalu besar ketika installasi sehingga installsi akan berjalan lebih cepat.

Biar anda tidak takut dengan installasi text mode Slackware berikut ini saya capture langkah-langkah installasi dari nol sampai Slackware bisa login. Dan seperti biasa apabila anda klik read more maka anda akan menemukan banyak sekali gambar (68 gambar) oleh karena itu sabar aja ya kalo agak lambat buka nya.

Installasi Slackware seperti distro lainnya bisa dilakukan dengan cara boot dari CD atau DVD. Dan untuk bisa boot dari CD atau DVD tentu saja anda harus merubah susunan boot order bios anda menjadi CD atau DVD terlebih dahulu. Setelah itu anda bisa mulai memasukan CD atau DVD Slackware anda dan Installasi pun dimulai seperti berikut ini.

Gambar diatas adalah menu ketika pertama kali kita boot atau biasa disebut lilo (linux loader). Apabila anda tidak memiliki hardware yang memerlukan driver khusus seperti harddisk sata atau scsi maka anda bisa langsung tekan enter untuk boot. Tetapi apabila anda memiliki hardware-hardware khusus silahkan tekan F2 untuk melihat menu bantuan dan F3 untuk melihat daftar cheat boot Slackware.

Cara menggunakan cheat boot tersebut adalah dengan mengetikan nama yang kita inginkan. Misalkan anda menggunakan harddisk sata maka anda tinggal mengetikan sata.i dan enter.

Setelah anda menekan enter maka berikutnya anda akan ditanyakan jenis dari keyboard yang anda pakai. Apabila anda menggunakan keyboard versi US maka anda tidak usah pusing lagi tinggal enter saja dan anda akan dibawa ke gambar berikutnya yaitu tampilan login. Untuk login yang harus anda masukan adalah root enter dan anda tidak akan ditanyakan password.

Setelah berhasil login yang pertama kali harus anda lakukan adalah membuat partisi untuk menginstall Slackware. Dan di Slackware anda diberi tools yang sangat mudah untuk dipakai yaitu cfdisk. Untuk memulai nya cukup ketikan cfdisk seperti digambar berikut ini:

Seperti gambar-gambar diatas anda bisa dengan mudah membuat partisi. Yang harus anda ketahui adalah untuk bergerak antar menu anda bisa menggunakan panah kiri dan kanan. Sementara untuk bergerak antar partisi menggunakan panah atas dan bawah. Untuk memilih salah satu menu anda harus menggunakan enter.

Partisi minimal yang harus anda bikin untuk bisa berhasil Install slackware adalah dua partisi yaitu root ( / ) dan swap. Untuk swap anda bisa mempergunakan maksimal dua kali besar memori yang terpasang di komputer anda apabila memori yang anda miliki kurang dari 512 Mega. Apabila RAM yang anda miliki sudah lebih dari 512 Mega anda cukup membuat swap sebesar RAM yang anda miliki. Supaya satu partisi bisa menjadi swap, anda harus merubah type dari partisi tersebut dari Linux menjadi swap. Caranya adalah dengan memilih partisi yang ingin anda rubah dengan panah atas atau bawah, kemudian pilih type dengan panah kiri atau kanan kemudian enter. Ketika ditampilkan daftar jenis-jenis partisi anda bisa enter dua kali langsung atau anda mengetikan kode dari swap partition yaitu 82.

Apabila anda membuat partisi tidak lebih dari empat partisi anda bisa membuat seluruh partisi sebagai primary partition sementara apabila sudah lebih dari 4, partisi ke 4 dan seterusnya haruslah logical.

Anda juga harus menentukan satu partisi sebagai bootable partition. Biasanya yang di set bootable partition adalah root partition.

Setelah semua selesai berikutnya adalah menuliskan perubahan yang barusan kita buat dengan memilih menu write dan enter kemudian anda harus mengetikan “yes” tanpa tanda kutip untuk konfirmasi sebelum cfdisk menuliskan hasil perubahan yang anda lakukan. Sebelum anda memilih write semua perubahan terhadap harddisk belum dilakukan. Apabila anda merasa ragu dengan perubahan yang anda lakukan anda bisa keluar tanpa write dan harddisk anda masih tetap seperti sebelumnya tidak ada data yang hilang.

Langkah terakhir dari pembuatan partisi adalah memilih quit untuk kembali ke console dan memulai installasi Slackware dengan mengetikan perintah setup dan enter. Anda akan dibawa ke menu installasi Slackware. Yang harus anda pilih pertama kali adalah Addswap yaitu menu untuk mengaktifkan swap partition. Dengan aktifnya swap partition maka apabila memori yang anda miliki tidak cukup besar maka akan sangat terbantu dengan swap partition sebagai memori virtual tambahan.

Secara otomatis Installer slackware akan mendeteksi apakah anda memiliki partisi swap atau tidak anda cukup memilih ok di windows berikutnya kemudian kalau anda tidak yakin dengan kondisi harddisk anda, anda bisa memilih check for bad block sebelum diformat, tetapi ini akan memakan waktu yang lumayan lama. Biasanya saya cukup pilih no saja untuk melanjutkan.

Langkah berikutnya adalah memilih, memformat dan mounting partisi sesuai dengan yang kita inginkan. Apabila anda membuat lebih dari satu partisi Linux maka anda akan diberi daftar partisi yang belum di format. Anda harus memilih satu partisi yang akan dimount sebagai root ( / ) partition pertama kali baru dilanjutkan dengan partisi-partisi lainnya.

File System yang biasa saya pakai dalam installasi adalah reiserfs dengan alasan terasa lebih cepat dan stabil dibandingkan ext2 atau ext3 tapi anda bisa memilih yang mana saja karena disini hanyalah masalah selera saja.

Proses selanjutnya adalah memilih source installasi. Cara paling mudah, murah dan cepat adalah dengan menggunakan CD / DVD. Anda bisa saja menggunakan media yang lain seperti http, ftp atau nfs tetapi tetap tidak akan lebih cepat dan mudah dibandingkan dengan CD / DVD paling ngga anda tidak perlu sibuk mengatur source address dan lain sebagainya. Tetapi cara installasi dari ftp atau http bisa jadi opsi apabila anda tidak memiliki CD / DVD untuk install. Berikut ini screenshoot nya.

Langkah selanjutnya adalah memilih paket yang akan anda install. Apabila anda tidak yakin dengan apa yang anda pilih dan anda memiliki harddisk yang cukup besar (minimal 4Gb) anda bisa memilih semua aplikasi untuk di install dan ini cukup aman bagi anda pemula, daripada memilih dari daftar tersebut, kemudian salah pilih dan Slackware anda tidak jalan toh setelah beres installasi anda bisa memilih aplikasi-aplikasi apa saja yang akan di uninstall.

Disini saya hanya memilih paket-paket yang penting saja seperti base linux system, networking dan compiler karena seperti yang anda lihat sebelumnya bahwa saya hanya memiliki harddisk sebesar 2Gb saja.

Selanjutnya adalah anda sabar menunggu. Perlu beberapa menit untuk menyelesaikan proses installasi ini. Disini anda bisa tinggalkan sebentar komputer anda untuk sekedar membuat secangkir kopi dan cari angin di luar.

Setelah proses install aplikasi selesai selanjutnya adalah memilih source kernel yang akan anda install. Berhubung kita menginstall menggunakan CD / DVD maka anda bisa langsung saja memilih CDROM sebagai source kernel, kemudian anda pilih kernel mana yang akan anda pergunakan. Pilihan pertama yang ditampilkan (di sorot) adalah kernel yang sesuai dengan apa yang anda pilih ketika boot pertama kali menggunakan CD dan biasanya itu adalah type kernel yang paling sesuai dengan komputer anda. Tetapi apabila karena sesuatu hal anda harus merubah pilihan kernel anda bisa dengan mudah memilih jenis kernel yang anda perlukan.

Di windows berikutnya anda akan ditanyakan apakah akan membuat boot disk dan apakah anda memiliki modem atau tidak. Berhubung saya tidak mau membuat boot disk dan tidak memiliki modem maka disini semua saya pilih skip dan no modem.

Selanjutnya adalah menginstall linux loader atau lilo. Anda bisa memilih simple untuk installasi dengan mudah atau anda bisa memilih expert yang walaupun dibilang expert tetapi tetap sangat mudah jadi jangan takut mencoba memilih expert. Untuk pilihan lokasi penginstallan lilo anda bisa memilih MBR tenang saja cukup aman koq. Kalaupun terjadi error anda masih bisa memperbaikinya nanti (kalo bisa)

Berikutnya adalah memilih jenis mouse dan gpm (mouse akan aktif walaupun anda hanya menggunakan console, sangat berguna untuk copy paste text).

Setelah menginstall linux loader selesai selanjutnya adalah setting network, disini anda harus mempersiapkan dulu IP address, netmask, gateway, dns, domain dan host untuk komputer anda ini. Apabila anda tidak tahu coba tanyakan kepada admin jaringan anda. Tetapi apabila anda tidak terhubung ke jaringan tetapi tetap ingin bermain-main dengan slackware anda bisa mengisi setting network disini dengan nilai seadanya asal masih mengikuti kaidah tcp/ip.

Apabila setting network sudah selesai, selanjutnya adalah menu untuk memilih service apa saja yang ingin dijalankan ketika Linux pertama kali dijalankan. Anda bisa memilih secara default saja karena nanti setelah boot pertama anda bisa dengan mudah menghidupkan atau mematikan service ini.

Berikutnya adalah menu untuk menambah font dan pemilihan time zone. Untuk font saya tidak memilih font tambahan saya pilih no saja dan untuk timezone saya sesuaikan dengan lokasi saya, jadi saya pilih Asia/Jakarta.

Kemudian setelah pemilihan timezone selesai, Langkah terakhir adalah membuat password untuk root. Untuk password root ini anda disarankan menggunakan password yang bagus (tidak mudah ditebak dan mengkombinasikan hurup dan angka serta karakter khusus). Apabila anda membuat password yang terlalu lemah atau mudah ditebak maka Slackware akan memberi peringatan bahwa password anda lemah. Tetapi anda tetap bisa memaksakan untuk menggunakan password tersebut.

Dengan selesainya pembuatan password root maka andapun sudah menyelesaikan seluruh tahap installasi Slackware. Selanjutnya adalah kembali ke menu utama installasi, keluar ke console dengan memilih menu exit, dan menekan kombinasi key ctrl + alt + del untuk reboot.

Sekarang tibalah saat nya anda berdo’a. Mudah-mudahan semua yang anda lakukan benar dan Slackware anda bisa dipakai dengan lancar . Contoh berikut adalah hasil installasi yang sukses dimulai dari boot sampai login prompt.

Berhubung keyboard yang saya pakai tidak terlalu bagus (ada beberapa key yang error) jadi untuk mengetik password susah banget ya sementara sekian aja dulu Installasi Slackware telah selesai. Selanjutnya anda bisa berharap saya melanjutkan artikel installasi ini dengan artikel config pertama slackware mudah-mudahan penyakit males nya tidak kambuh terlalu lama.

rfun_2 = Mas Budi Indika

wahyoex = Mas Wahyu Indika

roby46@yahoo.com = Roby