Pengenalan Style Sheet

Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan kelebihan tersendiri.

Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada. Style sheet mendeskripsikan bagaiman tampilan document HTML di layar. Anda juga bias menyebutnya sebagai template dari documents HTML yang menggunakanya.

Anda juga bisa membuat efek-efek sepesial di web anda dengan menggunakan style sheet. Sebagai contoh anda bisa membuat style sheet yang mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru. Atau pada tag <P> yang akan di tampilkan dengan warna kuning dan menggunakan font verdana dan masih banyak lagi yang bisa anda lakukan dengan style sheet.

Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS) technology yang support pada hampir semua web Browser. Karena CSS telah di setandartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser

A. Inline Styles

Ada dua cara untuk merubah style dari web page anda yaitu dengan :

□        Merubah inline style

□        Menulis script untuk merubah style anda.

Dengan meggunakan inline style anda dapat membuat dynamic style tanpa harus menambahkan script ke web anda. Inline styles merupakan style yang bisa kita pasang pada element web tertentu saja.

Contoh:

Jika anda ingin menambahkan style pada <H1> dengan warna merah, anda harus mengeset attribut STYLE dari tag <H1>.

�STYLE=”color:red”>

jika anda ingin menggunakan script untuk memodifikasi inline style, anda dapat menggunakan Style Object. Style Object mensupport semua property yang di support CSS untuk style. Untuk menggunakan property pada script :

1. Hilangkan tanda hubung “-” dari property CSS Style

2. Ganti huruf setelah tanda hubung menjadi Capital.

Contoh:

font-weight menjadi fontWeight text-align menjadi textAlign

B. Istilah-istilah dalam Style Sheet

Style rule

Cascading style sheet merupakan kumpulan aturan yang mendefinisikan style dari document. Sebagai contoh kita bisa membuat aturan style yang menentukan bahwa semua <H2> di tampilkan dengan warna orange.

Style sheet

Style sheet dapat dapat di embedded ke HTML document. Atau disebut embedded style sheet. Style sheet juga bisa dibuat sebagai external file dan di link ke document HTML. Style role bisa di kenakan pada bagian tertentu dari web page. Sebagai contoh anda bisa menentukan paragraph tertentu di tampilkan dengan style bold dan italic sementara yang lain tetap seperti biasa.

Selector

selector { property1: value; property2:value, . . .} H1{ color:green; background-color:orange} Style sheets terdiri dari dua bagian:

1.Selector

Bagian pertama sebelum tanda “{}” disebut selector

2. Declaration

Terdiri dari property dan nilainya.

====BERSAMBU=====

Iklan

Buat Web PHP + database MySQL dengan tangan kosong

Kalau ingin membuat web dengan Dreamweaver atau Frontpage, mungkin semua orang bisa. Tapi web tersebut hanya web standar yang tidak mempunyai database sehingga orang hanya dapat melihat isi dari web tersebut , tanpa bisa ikut berpastisipasi seperti memberikan komentar. Kalau mau bikin web PHP dengan database, kita kan perlu belajar PHP programming? Tidak juga… Sekarang banyak tools web template yang open source (ada source programnya sehingga bisa di ubah-ubah)dan GRATIS tentunya. Nah simak liputan kami tentang beberapa tools yang kami anggap mudah dan bagus untuk membuat website PHP lengkap dengan database. Untuk mencoba membuat web dengan php + mysql di komputer lokal, anda perlu menginstall software php dan mysql dahulu di komputer anda. Software php bisa anda download di: http://www.php.net/downloads.php

Untuk mysql, sebaiknya anda pakai yang versi 4.0, karena versi 5.0 masih baru dan belum banyak tools open source yang sudah bisa memanfaatkannya. anda bisa download di: http://www.mysql.com/

Kalau anda langsung memasukkannya di Internet, akan jauh lebih mudah, karena rata-rata Internet server di dunia maupun Indonesia, telah dilengkapi dengan fasilitas yang dapat membaca php dan mysql. Anda tinggal membuat database mysql saja di control panel web anda (hubungi provider web anda atau tempat anda menyewa server (web hosting) kalau tidak jelas caranya).

Berikut adalah beberapa tools Open Source yang berguna bagi anda untuk membuat web php dengan database mysql dari pertama:


Drupal

Ini merupakan salah satu tools yang kami anggap mudah sekali dan dengan download yg kecil (< 500KB) untuk membuat web, anda juga bisa merubah design dan tampilan dr web anda. Berikut adalah infonya yang kami kutip dari web-nya:

Drupal is an open-source platform and content-management system for building dynamic Web sites. It offers a broad range of features and services including user administration, publishing work flow, discussion capabilities, news aggregation, metadata functionalities using controlled vocabularies, and XML publishing for content-sharing purposes. Equipped with a powerful blend of features and configurability, Drupal can support a diverse range of Web projects ranging from personal Weblogs to large community-driven sites.

download Drupal di sini

Postnuke

Kalau anda menginginkan fitur web php + mysql database dengan fitur yang lebih lengkap dengan adanya forum, web chat, search dan security, anda bisa coba yang satu ini. Di bawah ini, adalah info yang kami kutip dari web-nya:

Some may see Postnuke (PN) as a weblog or content management system. But PN is more than that, PostNuke is a community, content, collaborative management system, a C3MS. It’s your electronic toolbox, a set of tools allowing you to build a dynamically generated web site that five years ago would have cost hundreds of thousands of dollars to launch.

Download Postnuke di sini
Forum tanya jawab di: http://forums.postnuke.com/
Postnuke Manual + FAQ di: http://news.postnuke.com/FAQ.html

Kalau anda kebetulan mengerti sedikit PHP dan ingin men-desain ulang program open source PHP yang anda dapat, anda bisa memakai program PHP Designer. Program ini GRATIS dan anda bisa download programnya di sini

Kalau anda ingin web yang khusus hanya untuk forum saja atau berisi forum saja (web forum), atau anda ingin memasukan forum terpisah dari web, anda bisa download PHP Bulletin Board di: http://www.phpbb.com/

Tutorial Macromedia Dreamweaver

Mendefinisikan local site

  1. Setelah masuk ke Dreamwever, dari menu Site pilih New Site.
  2. Pada bagian Site Name, tuliskan nama web Anda. Misalnya Gratisan. Sedangkan Local Root Folder adalah folder tempat Anda akan menyimpan semua file untuk web yang Anda buat, termasuk file images, audio, javascript, css, dan sebagainya. Klik pada icon untuk mem-browse.

  3. Setelah selesai klik OK.

  4. Maka akan muncul window baru. Setelah Anda mencapai langkah ini berarti Anda sudah bisa memulai membuat halaman web baru.

Membuat halaman web pertama

  1. Dari menu File pilih New.
  2. Tentukan title, warna background dan link untuk halaman web Anda. Dari menu Modify, pilih Page Properties.
    Untuk mengganti warna background dan link, klik pada icon . Sedangkan untuk mengganti background image, klik pada tombol Browse.

    Title = title atau judul halaman web
    Background image = image yang digunakan sebagai background
    Text = warna teks
    Links, Visited Links, Active Links = warna link

  3. Untuk mengakhiri klik tombol OK.
  4. Supaya aman simpan dulu file tersebut dengan mengklik menu File – Save.

Membuat tabel

Langkah ini sangat penting untuk dicermati karena hampir semua halaman web memakai tabel. Anda tidak akan dapat membuat halaman web yang warna-warni tanpa unsur tabel. Anda juga tidak dapat membuat halaman web seperti halaman yang sedang Anda baca ini tanpa tabel. Untuk membuat dan memodifikasi tabel pada Dreamweaver caranya adalah sebagai berikut :
(Supaya tutorial ini lebih maksimal hasilnya ada baiknya Anda membaca artikel di sini terlebih dahulu)

  1. Dari menu Insert, pilih Table. Atau tekan Ctrl + Alt + I.

    Rows Jumlah baris
    Columns Jumlah kolom
    Width Lebar tabel yang bisa dinyatakan dalam persen maupun dalam pixel
    Border Ukuran border tabel
  2. Hasilnya adalah seperti gambar di bawah ini.

  3. Untuk mengganti warna background pada tabel, letakkan pointer mouse pada cell (kolom atau baris –pada gambar di bawah ditandai dengan tanda silang warna merah–) yang akan Anda ganti warnanya lalu klik icon yang terletak pada Properties.
    Untuk mengganti warna background lebih dari satu baris atau kolom drag pointer mouse dari cell yang satu ke cell selanjutnya.

Membuat rollover image

Kalau Anda rajin menjelajah internet tentu sering menemui situs yang memakai efek rollover image. Efek tersebut dibuat dengan menggunakan javascript. Untuk membuat efek tersebut Anda harus menuliskan kode javascript tersebut. Tapi dengan bantuan Macromedia Dreamweaver Anda dapat membuat rollover image tanpa harus menuliskan sebaris pun kode javascript. Penasaran ? Ikuti langkah di bawah ini :

Untuk Dreamweaver 3, dari menu Insert, pilih Rollover Image.
Untuk Dreamweaver 4, dari menu Insert, pilih Interactive Images – Rollover Image. Maka akan muncul kotak dialog seperti di bawah ini :

Kotak dialog Insert Rollover image

Lalu isi pada kotak yang tersedia yang meliputi :

Image Name Nama image
Original Image Gambar asli
Rollover Image Gambar yg dijadikan sebagai rollover
Go to URL Halaman web yang akan dituju

Mendeteksi browser yang dipakai pengunjung web

Seperti kita ketahui bersama antara Netscape Navigator dan Internet Explorer terdapat sedikit ketidakcocokan. Maksudnya ada kalanya suatu halaman web jika dilihat dengan IE dapat tampil dengan bagus sementara jika dilihat dengan NN agak sedikit acak-acakan. Atau sebaliknya.

Anda sebagai seorang designer web tentunya ingin mendapatkan tampilan web yang sempurna, baik jika dilihat dengan IE maupun NN. Untuk mengatasi masalah tersebut sebenarnya tidak susah-susah amat, salah satu caranya adalah dengan mendeteksi browser yang dipakai oleh client atau orang yang melihat web kita. Lalu halaman web yang akan ditampilkan disesuaikan dengan browser tersebut. Misalnya jika yang dipakai adalah IE maka yang ditampilkan adalah file satu.html, sedangkan jika yang dipakai adalah NN yang ditampilkan adalah file dua.html.

Kita akan mencoba membuat pendeteksi browser dengan menggunakan Macromedia Dreamweaver. Ikuti langkah-langkah berikut ini :

1. Dari menu Window, pilih Behaviors atau dengan menekan F8.

Dari combo box Events For, pilih IE 4.0. Tekan tombol , lalu pilih Check Browser.

2 Maka akan muncul window Check Browser seperti terlihat pada gambar di samping. Di sini Anda harus melakukan beberapa pengisian.

Jika yang digunakan adalah NN 4.0 maka …. Terdapat 3 pilihan yaitu, Stay on this Page, Go to URL, dan Go to Alt URL.

Jika Anda memilih Stay on this Page maka halaman inilah yang akan ditampilkan jika pengunjung web Anda memakai NN 4.0.

Sebaliknya pada bagian IE 4.0 Anda harus mengisinya dengan Go to URL dan pada bagian URL Anda harus mengisi dengan halaman web yang akan ditampilkan jika si pengunjung memakai IE 4.0.
3 Untuk mengaplikasikannya tekan tombol OK. Nah sekarang halaman web Anda sudah siap untuk mendeteksi browser yang digunakan oleh pengunjung web Anda.

Membuat jump menu

Klik Kanan -> Tutorial Klik Kanan -> PHP Yahoo Google

Pernah melihat jump menu seperti di atas ? Menu seperti itu biasa digunakan sebagai navigasi yang akan “mengantar” pengunjung web untuk menuju halaman yang lainnya. Dengan Macromedia Dreamweaver kita dapat membuat jump menu dengan mudah. Langkahnya adalah sebagai berikut :

1. Dari menu Insert, pilih Form Object – Jump Menu
2. Pada bagian Text ketikkan nama item yang akan muncul pada menu list.
3. Pada bagian When selected, Go to URL pilih file yang akan dibuka. Caranya dengan mengklik tombol Browse dan memilih file yang diinginkan, atau langsung ketikkan path file yang akan dibuka. Untuk file yang akan dibuka Anda bisa memilih file pada situs yang sama atau bisa juga berupa alamat web, misalnya http://www.yahoo.com
4. Jika Anda ingin menambahkan tombol Go maka beri tanda check pada Insert Go Button After Menu.
5. Tekan tombol untuk memasukkan menu item ke dalam daftar.
6. Ulangi langkah 2-5 untuk menu item yang lain.

Mengecek link pada situs Anda

Bagus tidaknya sebuah situs tidak hanya ditentukan oleh bentuk desainnya, tapi juga oleh “kebenaran” link yang terdapat pada situs tersebut. Suatu situs dengan desain yang yahud tapi linknya banyak yang rusak/salah (broken link) tentu tidak menarik dikunjungi.

Oleh karena itu saat Anda mendesain situs perhatikan apakah link-link yang Anda buah sudah benar atau belum. Dengan menggunakan Dreamweaver Anda dapat dengan mudah mengecek link mana saja yang salah (broken link) untuk kemudian Anda perbaiki. Untuk mengecek broken link dan memperbaikinya, caranya adalah sebagai berikut:

1. Jika Anda ingin mengecek link dari satu file Html maka dari menu File, pilih Check Link. Tapi jika Anda ingin mengecek link dari semua halaman web yang ada pada situs Anda, klik menu Site, pilih Check Links Sitewide.

2. Waktu yang diperlukan untuk pencarian broken link ditentukan oleh banyak tidaknya link dan halaman web Anda. Tentunya semakin banyak link dan halaman web, semakin lama proses pencarian.

Jika broken link ditemukan maka akan muncul tampilan seperti gambar di atas.

3. Untuk memperbaiki broken link tersebut, pilih file yang akan diperbaiki dan klik pada icon folder (yang berwarna hijau). Setelah itu browse ke directory di mana Anda menyimpan file yang sesungguhnya.

Tips & Trik Desain Web

Tips & Trik Desain Web

Membuat link tanpa garis bawah

Anda tidak suka dengan garis bawah yang terdapat pada link ? Di bawah ini trik yang bisa Anda gunakan untuk menghilangkan garis bawah tersebut
<A HREF=”page.html” STYLE=”TEXT-DECORATION: NONE” > Link tanpa garis bawah </A>
Trik tersebut dapat digunakan pada MS Internet Explorer dan Netscape Navigator 4.0 atau lebih.

Download dari website tanpa menggunakan FTP

Apakah Anda mempunyai web site dan ingin membagikan software dari web site Anda ? Tapi Anda tidak mempunyai akses ke server FTP. Jangan bingung ! Anda tetap bisa melakukannya walaupun tanpa FTP. Caranya : gunakan link yang mengarah pada file download.
<a href=”freeware.zip”> Download file DI SINI </a>

Pertimbangkan penggunakan Applet Java

Dengan menggunakan aplet Java Anda bisa membuat halaman web yang indah. Tetapi terlalu banyak menggunakan applet Java akan mengakibatkan lambatnya loading. Untuk itu perlu Anda pikirkan “untung – ruginya” sebelum Anda memakai applet Java. Ingat masih banyak netter yang menggunakan komputer dengan akses internet yang lambat.

Baca lebih lanjut