Mengelola isi halaman weB
Memeriksa
informasi untuk relevansi dan currency
Software Web Design
Software web design merupakan
perangkat lunak yang berguna untuk membangun/membuat/mendisain halaman-halaman
web, baik yang bersifat statis maupun dinamis.
Software web design terpopuler yang ada
saat ini antara lain:
- Adobe
Image Ready,
- Macromedia
Dreamweaver
- Macromedia
Fireworks,
- Microsoft
Frontpage
- dan
lain sebagainya.
Mengenal
Macromedia Dreamweaver MX
Macromedia
Dreamweaver yang merupakan salah satu software web design
terpopuler dipilih sebagai software web design yang akan
digunakan dalam proses pemelajaran ini
Macromedia
Dreamweaver dipilih karena kompatibilitas dan dukungannya terhadap berbagai
bahasa pemrograman web, antara lain : ASP, JSP, CFM, ASP.NET, PHP, JavaScript,
CSS dan XML
Struktur dasar
dokumen HTML berisi elemen-elemen atau tag, seperti pada gambar berikut :
Keterangan :
<html> </html> : mendefinisikan bahwa teks yang
berada diantara kedua tag tersebut adalah file HTML.
<head> </head> : mendefinisikan head dalam
sebuah file HTML.
<title> </title> : mendefinisikan judul yang
hendak ditampilkan pada browser.
<body> </body> : mendefinisikan teks beserta
formatnya yang hendak ditampilkan sebagai isi halaman web.
Format Teks Dasar
dalam HTML :
Heading, HTML mengenal 6 level heading, mulai 1
(terbesar) sampai 6. heading ditampilkan dengan font lebih besar dan tebal
daripada teks normal
Paragraf, setiap ada paragraf baru diawali dengan
<p>
List, HTML mendukung daftar (list) tidak
bernomor, bernomor dan definisi
Performatted
Text, dalam HTML, spasi,
tab dan baris baru (enter) tidak memiliki pengaruh
Extended
Quotations, untuk
membuat kutipan panjang, sehingga hasilnya menjorok ke dalam, digunakan tag
<blockquote>.
Ganti baris
(line break), untuk
menulis alamat surat dengan baris-baris pendek, tidak bagus jika menggunakan
tag <p> (spasi terlalu lebar)
Garis datar
(horizontal rule), untuk
membuat garis horizontal yang digunakan untuk membatasi bagian-bagian digunakan
tag <hr>.
Memformat
karakter,
<b> atau
<strong> untuk membuat
teks Bold.
<i> atau
<em> untuk membuat
teks Italic.
<tt> atau
<code> untuk membuat
teks typewriter.
Dasar Link HTML:
Hyperlink merupakan sesuatu yang sangat penting di
website, sebab hyperlink akan menghubungkan antara satu halaman dengan halaman
lainnya baik dalam satu website maupun antar website.
Untuk membuat hyperlink digunakan tag <a>. Huruf a
artinya "anchor". Tag <a> biasanya diikuti atribut
"href" dimana nilai dari atribut ini merupakan alamat halaman yang
akan dituju.
Macam-macam link:
1. Relative dan
Absolute Link, link ke suatu dokumen pada direktori lain dapat dibuat dengan
menentukan relative path dari posisi dokumen asal berada. Ini disebut sebagai
relative link.
a href=”Harga/index.html”>Daftar
Harga</a>
Alamat (URL)
dokumen secara lengkap (absolute path) dapat digunakan untuk menentukan tujuan
link, disebut link absolute :
a href=”http://gmail.google.com”>E-mail
Google</a>
2. Link ke suatu
bagian di dokumen lain, misalnya : satu.html dilink ke suatu bagian di
dua.html, caranya adalah :
Pada dokumen
satu.html, dituliskan :
<a
href=”dua.html#BT”>Tiga</a>
Pada bagian yang
dituju, dituliskan :
<a
name=”BT”>Tiga</a>
3. Link ke suatu
bagian di dokumen yang sama, caranya hampir sama dengan langkah di atas :
Pada dokumen
satu.html, dituliskan :
<a
href=”#BT”>Tiga</a>
Pada bagian yang
dituju, dituliskan :
<a name=”BT”>Tiga</a>
4. Mailto, link
yang langsung menuju ke alamat e-mail.
<a
href=”mailto:saya@gmail.com?subject=Masuk ga?”>
Kirim
E-mail</a>
Menyisipkan
Gambar
Atribut ukuran
gambar, bila tidak dituliskan, maka ukuran gambar sesuai ukuran aslinya. Namun
ukuran gambar bisa dibuat dengan nilai tertentu dengan cara menuliskan atribut
height dan width.
Membuat Tabel
Tabel merupakan
cara untuk menampilkan informasi dalam bentuk sel yang terdiri dari kolom dan
baris.
Membuat Frame
Frame HTML
digunakan untuk membuat tampilan HTML yang terbagi menjadi beberapa bagian di
mana setiap bagiannya merupakan satu halaman HTML yang terpisah.
Form merupakan
elemen HTML yang berupa blanko (form) yang dipergunakan untuk menjaring
informasi dari pengguna
Macam-macam form :
Input, dengan tipe :
- Text,
password, checkbox, radio button, reset, submit
dan hidden.
- Text
area.
- Select.
Memperbaharui Halaman WEB
Memperbaharui halaman situs web dengan sesuatu yang
baru, dengan mempertimbangkan kebutuhan pengunjung dan situs web itu
sendiri
Untuk memperbaharui (update) halaman situs web
yang perlu menjadi bahan pertimbangan sejak halaman web tersebut
dirancang adalah kita harus memastikan agar elemen-elemen yang ada pada setiap
halaman mudah untuk di rubah (edit).
Memeriksa informasi untuk relevansi dan keterkinian:
Pada dasarnya dalam proses pembuatan situs web
diperlukan kerjasama antara pihak pengembang dengan klien yang memesan situs web
tersebut.
Dalam menentukan content (content awal,
tambahan maupun revisi) pihak pengembang harus lebih banyak mendengar apa yang
menjadi kebutuhan klien.
Interaktivitas pengguna menjadi jantung sebuah situs web
Beberapa Gagasan yang disampaikan Tord Yard (programmer
flash di WWW.EGO7.COM) tentang pentingnya menambahkan interaktivitas
pada content halaman sebuah situs web :
- Gunakan
umpan balik grafik untuk menginformasikan pengguna tentang elemen
interaktif, seperti status tombol yang bergulung
- Sertakan
suara sebagai bentuk umpan balik tambahan agar content tidak
terlihat membosankan
- Pertimbangkan
pemakaian animasi untuk menerangkan elemen penting, atau untuk meminta
keikutsertaan pengunjung.
Beberapa cara untuk memeriksa informasi content situs web
untuk relevansi dan keterkinian, adalah sebagai berikut :
- Sesuaikan
content situs web dengan tujuan dan fungsi situs tersebut
- Lakukan
riset untuk mencari informasi terbaru yang sesuai dengan content situs
- Content
tambahan atau revisi juga bisa dengan meminta content tersebut ke
pihak klien baik berupa data tertulis maupun elektronik
- Lakukan
konfirmasi dalam menentukan batasan umur sebuah links, apakah akan
dipertahankan atau dihapus
- Pihak
pengembang selaku pembuat situs web bila perlu merevisi content
yang mungkin diperlukan dengan mengkonfirmasikan dahulu dengan pihak klien