HTML-LINK-LIST
A. LINK HTML
Kelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari satu
teks dan / atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser Web
akan menyorot (“highlight”) teks atau gambar yang diidentifikasi sebagai link dengan warna dan /
atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link (hyperlink atau link).
- TAG ANCHOR
Tag <A> digunakan untuk membuat suatu link kepada dokumen lain dalam web dengan
menambah atribut “href” sebagai definisi lokasi link. Contoh :
<A HREF=”http://www.microsoft.com”> clik here to show it</A>
Ada tiga jenis link yaitu : Link relatif, Link absolute, Link dalam dokumen yang sama.
- Link Relatif
Digunakan jika membuat suatu link pada page anda ke page lain pada komputer yang sama.
Bila dua page berada pada direktori sama, anda dapat menuliskan nama file html seperti
berikut :
<A HREF = “page_2.html”> Next </A>
- Link Absolut
Digunaka apabila anda membuat link ke page web lain yang berada pada web site lain di
internet. Contoh:
<A HREF = “http://www.mangosoft.com”>Click here if you want to see my home page</A>
- Link ke bagian lain dalam dokumen
Link ini dibuat untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dalam
browser web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi untuk
penelusuran dokumen dapat dimudahkan dengan membuat link antar bagian, dengan menandai
setiap bagian tersebut dengan memberinya nama. Sehingga pada tempat di dalam dokumen
akan ada bagian yang bernama, dan di bagian lainnya dapat diletakkan link untuk menuju ke
bagian-bagian tersebut.
Memberi nama suatu bagian dalam dokumen,
Letakkan kursor pada baris atau teks yang menjadi awal dari bagian tersebut,
Sisipkan nama bagian tersebut dengan: <A NAME= “nama bagian”>
Membuat link yang menuju pada bagian dokumen yang sama dapat dilakukan dengan cara yang
sama seperti link absolut atau relatif, namun nama dokumen dalam link diganti dengan nama
bagian dokumen dengan ditambah tanda # yang ditulis sebelum nama bagian tersebut. Contoh:
<A HREF= “#nama bagian”> Bagian tentang link</A>
Pengantar Komputer 2C
Modul: HTML
2
Contoh Link.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<A NAME="TOP">
<A HREF="#LINK RELATIF">Link relatif</A><BR>
<A HREF="#LINK ABSOLUT">Link Absolut</A><BR>
<A HREF="#LINK WITH NEW WINDOW">Link with New Window</A><BR>
<A HREF="#NO UNDERLINE">Link without underline</A><BR>
</A>
<BR>
<A NAME="LINK RELATIF">
<H1>Link secara relatif, lihat contoh di bawah ini:</H1>
<P>
<A HREF="page_2.html">Klik di sini </A>jika mau ke halaman berikutnya.
</P>
</A>
<A NAME="LINK ABSOLUT">
<H1>Link secara absolut, lihat contoh di bawah ini:</H1>
<P>
Klik <A HREF="http://www.mangosoft.com">my home page</A> if you want to
see my personality.
</P>
</A>
<A NAME="LINK WITH NEW WINDOW">
<H1>Membuat window baru untuk link:</H1>
<P>
Open <A HREF="http://www.mangosoft.com" target="_blank"> my home page</A>
with new window.
</P>
</A>
<A NAME="NO UNDERLINE">
<H1>Membuat link tanpa garis bawah:</H1>
<P>
<A HREF="http://www.mangosoft.com" style=" text-decoration:none">Klik
This Link </A> ,
Looks it's not use underline.
</P>
</A>
<HR>
<A HREF="#TOP"> kembali ke atas</A>
<HR>
</BODY>
</HTML>
Pengantar Komputer 2C
Modul: HTML
B. LIST HTML
List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu, jenisjenis
list dalam HTML adalah:
list tanpa nomor
list dengan nomor
list definisi
Unordered List (List tanpa nomor)
Untuk membuat list tanpa nomor (bulleted list):
- Mulai dengan tag pembuka list <UL>
- Masukkan setiap item list dengan menggunakan tag <LI> kemudian tuliskan itemnya (satu
saja), tag penutup item </LI>
- Ulangi lagi langkah kedua untuk menuliskan item list berikutnya
- Akhiri seluruh list dengan sebuah tag penutup </UL>
Unordered list disebut juga sebagai bulleted list, mempunyai bullet default berupa noktah. Jenis bullet
bisa diubah contohnya dengan mengisi atribut “type” dengan disk atau box.
Ordered List (List dengan nomor)
Untuk list dengan nomor, disebut juga ordered list, tag <UL> dubah dengan <OL>, demikian juga
</UL> diganti dengan </OL>. Nomor item secara default adalah menggunakan angka 1,2,3..dst sampai
dengan sejumlah item dalam list tersebut. Untuk keperluan penyajian tertentu kita dapat mengubah
nomor dalam ordered list dengan model angka yang lain, dengan mengisi atribut “type” pada tag <OL>
Pengantar Komputer 2C
Modul: HTML
Selain atribut type, ada juga atribut start, digunakan untuk mendefinisikan nomor awal yang akan
digunakan pada ordered list.
Jika kita ingin list dimulai dari nomor 8, maka penulisannya <OL START = 8>....</OL>.
Contoh Unordered List:
<HTML>
<BODY>
<H4>Default Bullets List:</H4>
<UL>
<LI>Gemblonk</LI>
<LI>Combro</LI>
<LI>Lontong</LI>
</UL>
<H4>Disc Bullets List:</H4>
<UL TYPE="disc">
<LI>Gado-gado</LI>
<LI>Ketoprak</LI>
<LI>Pangsit</LI>
</UL>
<H4>Circle Bullets List:</H4>
<UL TYPE="circle">
<LI>Bajigur</LI>
<LI>Sekutenk</LI>
</UL>
<H4>Nested List:</H4>
<UL TYPE="circle">
<LI>Kue Cucur</LI>
<LI>Uli</LI>
<LI>Tape</LI>
<UL TYPE="square">
<LI>Tape Ketan</LI>
<LI>Tape Singkong</LI>
</UL>
<LI>Kue Basah</LI>
</UL>
</BODY>
</HTML>
TYPE ARTI
I Ditampilkan dengan angka Romawi huruf besar
i Ditampilkan dengan angka Romawi huruf kecil
a Ditampilkan dengan angka abjad huruf kecil
A Ditampilkan dengan angka abjad huruf besar
Pengantar Komputer 2C
Modul: HTML
Contoh Ordered List:
<HTML>
<BODY>
<H4>Numbered List:</H4>
<OL>
<LI>Timun Suri</LI>
<LI>Kolek Pisang</LI>
<LI>Kolek Biji Salak</LI>
</OL>
<H4>Letters List:</H4>
<OL TYPE ="A">
<LI>Pisang Ambon</LI>
<LI>Pisang Batu</LI>
<LI>Pisang Nangka</LI>
</OL>
<H4>Roman Numbers List:</H4>
<OL TYPE="I">
<LI>Getuk Lindri</LI>
<LI>Getuk Singkong</LI>
<LI>Getuk Pisang</>
</OL>
<H4>Lowercase Roman Numbers List:</H4>
<OL TYPE="i">
<LI>Dodol Garut</LI>
<LI>Dodol Nangka</LI>
<LI>Dodol Ketan</LI>
</OL>
</BODY>
</HTML>
List Definisi
Contoh Defenition List:
<HTML>
<BODY>
<H4>Definition List:</H4>
<DL>
<DT>Nasi:</DT>
<DL>
<DT>Nasi Putih</DT>
<DT>Nasi Uduk</DT>
<DT>Nasi Rames</DT>
</DL>
<DT>Sayur:</DT>
<DL>
<DT>Sayur Asem</DT>
<DT>Sayur Lodeh</DT>
</DL>
<DT>Ikan:</DT>
<DL>
<DT>Ikan Abong</DT>
<DT>Ikan Teri</DT>
<DT> Ikan Bandeng</DT>
</DL>
<DT>Sambel Goreng</DT>
<DT>Lalap:</DT>
<DL>
<DT>Jengkol</DT>
<DT>Pete<DT>
<DT>Terong Ijo</DT>
</DL>
</DL>
</BODY>
<HTML>
Pengantar Komputer 2C
Modul: HTML
C. IMAGE LIST
Umumnya browser dapat menampilkan inline image(yaitu, gambar yang disajikan bersamaan dengan
teks), yang mempunyai format X Bitmap (XBM), GIF atau JPEG. Format-format gambar lain juga
dapat digabungkan ke dalam browser web (misalnya: format PNG (Portable Network Graphic). Setiap
gambar akan membutuhkan waktu tambahan untuk didownload dan memperlambat awal penampilan
suatu dokumen dalam browser. Karenanya hati-hati memilih gambar dan menyertakannya ke dalam
suatu dokumen. Untuk menyertakan sebuah inline image dalam dokumen web adalah:
<IMG SRC = “nama image”>
Kriteria pemilihan file gambar berdasarkan jenis format penyimpanan gambar:
- GIF (Graphics Interchange Format);
o Warna 8 bit (256), tidak digunakan untuk menyimpan file gambar berupa foto karena lebih
dari 256 warna.
o Tidak cocok untuk gambar yang mengandung garis.
o Jenis file GIF terdiri dari:
Interlacing, gambar dapat terlihat dalam band (pita), gambar dapat ditampilkan
secara bertahap tidak perlu harus semua file terkirim terlebih dahulu.
Transparent, background gambar transparent.
Animated, beberapa gambar disatukan, ditampilkan secara bergantian menjadi
seperti animasi.
- JPEG (Joint Photographics Experts Group);
o Warna terdiri dari 24 bit, dioptimasi untuk menyimpan file gambar berupa foto, hasil seni
natural, dan bahan yang menyerupai dengan kompresi (4:1).
o Digunakan untuk membuat warna grayscale.
o Tidak cocok untuk gambar yang mengandung garis atau gambar dengan sisi yang tajam.
o Jenisnya terdiri dari:
Progressive JPEG – mirip seperti interlacing GIF.
Optimasi gambar dengan mengurangi jumlah warna.
o Gunakan thumbnails, yaitu membuat gambar dengan ukuran kecil yang mewakili gambar
besar yang sebenarnya.
o Blur image sebelum membuat lebih kecil.
o Tambahkan teks ke dalam gambar yang telah dikonversi ke dalam format 256 warna.
- Animated GIF; adalah sebuah format file gambar gif, di dalamnya tersimpan beberapa gambar gif
yang disatukan dalam satu file, file ini dibuat untuk membuat gambar yang bisa bergerak (animasi).
Atribut ukuran image, kita harus menambahkan 2 atribut tambahan untuk memberi tahu browser
web ukuran image yang harus ditampilkan dalam browser. Atribut tersebut adalah height dan
width, ukuran dinyatakan dalam pixel; height untuk menyatakan tinggi gambar, dan width untuk
menspesifikasikan lebar gambar. Ukuran gambar ini didapat dengan menggunakan software untuk
pemrosesan image.
Pada beberapa browser, atribut ukuran gambar (height dan width) digunakan untuk memperbesar atau
memperkecil gambar. Akan tetapi sebaiknya jangan menggunakan teknik ini karena kurang baik,
sebaiknya ukur dimensi ukurannya secara benar denagn menggunakan aplikasi yang bisa digunakan
untuk mendapatkan ukuran gambar.
Pengantar Komputer 2C
Modul: HTML
Untuk mengatur tampilan gambar (alignment), dapat kita gunakan atribut “align” yang bisa diisi nilai
top, center dan bottom. Agar gambar ditampilkan tanpa teks, dan kita ingin menampilkannya di tengah
paragraf, seperti umumnya logo perusahaan, maka kita dapat menggunakan atribut align pada tag <P>
untuk membuat agar gambarnya diletakkan di tengah. Contoh:
<P ALIGN=”center”><IMG SRC=”nama image”></P>
Contoh image.html:
<HTML>
<BODY>
<P>Gambar dengan ukuran default:<IMG SRC="gambar1.jpg"></P>
<P>Gambar dengan ukuran ditentukan:<BR>
<IMG SRC="gambar1.jpg" WIDTH=200 HEIGHT=300></P>
</BODY>
</HTML>
Pengantar Komputer 2C
Modul: HTML
Alignment Image:
Contoh:
<HTML>
<BODY>
<P>
Sebuah gambar <IMG SRC="./images/bihrt05.gif" ALIGN="bottom" WIDTH=75 HEIGHT=50>
dalam text
</P>
<P>
Sebuah gambar <IMG SRC="./images/an376.gif" ALIGN="middle"> dalam text
</P>
<P>
Sebuah gambar <IMG SRC="./images/an281.gif" ALIGN="top"> dalam text
</P>
<P><B><U><I>Bottom Alignment adalah defaultnya dari image alignment</I></U></B></P>
<P>
<IMG SRC="./images/bart1.jpg" WIDTH=80 HEIGHT=100>Sebuah gambar sebelum text
</P>
<P>
Sebuah gambar sesudah text <IMG SRC="./images/bfly31.gif">
</P>
<BODY>
</HTML>
Pengantar Komputer 2C
Modul: HTML
Floating Image:
<HTML>
<BODY>
<IMG SRC="./images/gigi.gif" ALIGN=left> GIGI ANDA BILA SUDAH MAKAN
<IMG SRC="./images/bawang.gif"> KALAU ANDA TIDAK MAU SEPERTI
<IMG SRC="./images/garfield.gif"><P> BUKANKAH ANDA INGIN MENJADI KUAT, SEKUAT
<IMG SRC="./images/superman.gif" ALIGN=right><BR> ATAU INGIN SELINCAH
<IMG SRC="./images/kungfu3.gif" >.
</BODY>
</HTML>
TEKS ALTERNATIF UNTUK IMAGE
Adakalanya browser yang digunakan oleh surfer adalah browser dengan mode teks, seperti Lynx, tidak
bisa menampilkan gambar atau juga ada pemakai yang mematikan kemampuan untuk menampilkan
gambar pada browsernya, untuk mempercepat penampilan informasi, sehingga hanya teks dari
dokumennya saja yang akan ditampilkan.
Atribut ALT pada tag <IMG> menyediakan tempat untuk menampikan teks sebagai pengganti gambar.
Contoh: <IMG SRC=”acak.jpg” ALT=”Teks ini pengganti gambar”>
Pada beberapa browser teks pada atribut ALT akan ditampilkan secara mengambang untuk memberi
tahu maksud dan gambar, teks ini muncul apabila kita menaruh mouse pointer di atas gambar agak
lama. Bahkan Image pun dapat digunakan sebagi LINK.
Pengantar Komputer 2C
Modul: HTML
Contoh:
<HTML>
<BODY>
<P>
<IMG SRC="./images/sc14.jpg" ALT="SIN-CHAN BERMAIN GITAR" WIDTH=100 HEIGHT=80>
Image ini mempunyai alternatif yaitu menampilkan informasinya berupa teks,
bila browser yang digunakan tidak menampilkan gambar.
</P>
<P>
Klik gambar ini jika ingin link ke halaman lain <A HREF="page2.htm">
<IMG BORDER=0 SRC="./images/iccream3.gif"></A>
</P>
</BODY>
</HTML>
Referensi:
Betha Sidik, Ir. ,Husni I. Pohan, HTML dan XML, Informatika Bandung, Bandung, 2002
Web Desain
7 KONSEP DASAR WEB DESIGN
PENDAHULUAN Sebelum membuat web secara profesional, tugas penting sebagai seorang pengembang web adalah memberikan ide dan gagasan tentang point apa saja yang akan ditampilkan dalam sebuah halaman web. Dengan demikian, seorang pengembang web juga perlu berkonsultasi dengan pemilik web itu sendiri agar segala sesuatu yang menjadi tujuan pemilik web dapat terpenuhi. Lain halnya dengan seorang pengembang web (web developer) yang diberikan kebebasan dalam membuat sebuah web. Pemiliki web umumnya mempercayakan sepenuhnya kepada pengembang web (web developer). Nah, jika demikian maka sebagai seorang pengembang web harus benar-benar membuktikan keterampilannya dalam membuat web secara profesional agar para pemiliki web tidak kecewa dengan karya yang telah dibuat.
Untuk menjadi seorang pengembang web profesional tidaklah mudah karena harus memadukan antara bahasa pemrograman web dengan nilai seni yang terdapat dalam setiap halaman web. Keduanya harus dimiliiki, jika salah satu saja maka belum bisa disebut sebagai seorang pengembang web profesional. Meskipun pintar bahasa php dalam membuat web, tapi jika tidak didukung oleh jiwa seni maka hasilnya kurang maksimal. Begitu pula sebaliknya, jika hanya pandai membuat tampilan halaman web tapi tidak didukung oleh pengetahuan tentang bahasa pemrograman web maka hal itu
Lisensi Dokumen:
Copyright © 2003-2007 IlmuKomputer.Com
Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.
2
Komunitas eLearning IlmuKomputer.Com
Copyright © 2003-2007 IlmuKomputer.Com
akan sia-sia saja. Sebagai seorang pengembang web pemula, tidak perlu berkecil hati jika ingin menjadi seorang pengembang web profesional. Yang terpenting adalah adanya kemauan untuk terus belajar dan belajar lagi agar wawasan tentang pengembangan web terus bertambah. Ada beberapa hal yang perlu diketahui oleh para pengembang web pemula ketika pertama kali ingin membangun sebuah web dari awal. Agar web yang dibuat nampak profesional perlu memahami beberapa konsep dasar dalam mengolah web, mulai dari tool yang digunakan, format gambar yang sesuai, hingga pemilihan warna teks dan latar belakang sebuah halaman web. Berikut ini terdapat beberapa aspek yang perlu diperhatikan dalam membuat sebuah website :
DAPAT DIGUNAKAN (USABILITY)
Usabilitas merupakan hal yang sangat penting dalam merancang web (web design). Memang sangat baik jika memiliki sebuah website dinamis yang nampak profesional dan bagus , namun jika perlu waktu yang sangat lama untuk mendownload sebuah artikal atau penggunaan navigasinya sangat rumit maka tidak heran jika pengguna akan “hengkang” dari website Anda dan tidak akan kembali lagi. Perlu diketahui, umumnya pengguna (user) ingin mendapatkan informasi secara cepat meskipun tampilan website-nya biasa saja. Jika terlalu lama saat mencari informasi maka para pengguna akan langsung menutup halaman web tersebut. Ingat, jangan mengorbankan aspek usabilitas dalam mendesain website.
NAVIGASI (NAVIGATION)
Navigasi juga menjadi hal yang sangat penting dalam sebuah website yang berfungsi untuk membantu pengguna (user) dalam menjelajah website kita untuk mencari informasi yang diinginkan secara mudah. Navigasi yang bagus mencerminkan struktur website yang sangat baik. Kadangkala ditemukan beberapa format navigasi, diantaranya: - Papan Navigasi (Navigation Panel) o Bisanya dalam bentuk menu-menu yang tersusun rapi.
3
Komunitas eLearning IlmuKomputer.Com
Copyright © 2003-2007 IlmuKomputer.Com
o Sebaiknya diatur link pada bagian kiri (dari tangan
Anda) atau di bagian atas dari sebuah halaman web.
o Dapat berupa teks maupun grafik.
o Harus mengambil ruang yang tidak terlalu banyak.
o Posisi navigasi sebaiknya konsisten pada setiap
halamannya. Jika terpaksa menggunakan warna yang
berbeda, pastikan bagian tersebut masih merupakan
satu kesatuan.
Gambar Papan Navigasi
- Tombol Home (Home Button) :
o Tombol ini sangat familiar di kalangan pengembang web.
Fungsi utama tombol ini adalah untuk kembali ke halaman utama (homepage).
o Tombol home dapat ditempatkan pada setiap halaman web kecuali halaman utama
(homepage).
o Tombol home maupun logo perusahaan dapat berfungsi sebagai navigasi dan
sebaiknya diletakkan di bagian kiri atas (dari tangan Anda).
o Pastikan tombol home maupun logo ada pada setiap halaman (kecuali halaman utama)
agar pengunjung (visitor) lebih familiar dengan navigasi tersebut.
Gambar Tombol Home
- Link
o Jika teks memiliki hyperlink sebaiknya diberi garis bawah (underlined).
o Pengunjung mestinya tidak harus disajikan dalam bentuk mouse over atau hover pada
sebuah link untuk menyadarkan pengunjung bahwa teks tersebut adalah sebuah link –
buatlah link yang nyata.
o Sediakanlah lebih banyak teks link (textual link) dalam sebuah website untuk
4
Komunitas eLearning IlmuKomputer.Com
Copyright © 2003-2007 IlmuKomputer.Com
mengijinkan pengunjung ke informasi referensi secara silang.
o Usahakan menyediakan daftar susunan link secara nyata dibandingkan hidden (adanya
hal yang tersembunyi) dalam sebuah teks. Adanya link dalam sebuah teks
mengakibatkan proses membaca sedikit lambat, namun hal ini mungkin saja menjadi
hal yang bagus dengan tujuan menandai (highlight) kata-kata yang khusus.
o Buatlah perbedaan antara internal link (link dalam satu website) dengan external link
(link dengan website lain).
o Jika link tersebut masih dalam satu website (internal link) buatlah link menggunakan
teks yang simple. Jika link tersebut mengarah ke website lain (external link) usahakan
memasukkan alamat lengkap website tersebut dalam teks (misal:
http://www.websitelain.com). Hal itu akan memberikan informasi kepada pengunjung
tentang website yang berbeda sebelum mengklik link tersebut.
Gambar External link
o Apabila menyertakan link eksternal dalam website Anda, jangan membuat link dengan
cara membuka jendela baru (new window) menggunakan target “_blank”. Ini dapat
mengakibatkan pengunjung merasa terganggu.
o Hindari tombol kembali (back button) – yang merupakan perintah umum untuk
kembali ke halaman sebelumnya.
o Jika memiliki link dalam bentuk file berukuran besar seperti .avi atau .pdf, sediakan
ukuran dalam bentuk KB dalam tanda kurung untuk memberikan informasi kepada
pengunjung tentang ukuran file tersebut sebelum mendownloadnya.
o Buatlah kepastian pengunjung untuk mengetahui tentang link yang sudah dikunjungi
(diklik) dengan cara memberi warna yang berbeda. Misalkan dari warna biru ke merah
(artinya: warna biru memberi arti link tersebut belum dibuka sedangkan warna merah
menandakan
link tersebut telah dikunjungi/dibuka).
- Judul html (HTML Title)
o Umumnya berada pada tag html header.
o Judul html (sebagai header) masih relevan dengan halaman sekarang.
5
Komunitas eLearning IlmuKomputer.Com
Copyright © 2003-2007 IlmuKomputer.Com
o Ditampilkan di bagian atas (top title bar) pada sebuah browser.
o Judul html sangat berguna bagi yang membutuhkan sebagai bookmark situs Anda.
Gambar Judul
- Peta situs (Site Map)
o Site map merupakan salah satu bagian dari halaman website yang memberikan
informasi tentang peta situs.
o Site map merupakan struktur yang hirarkis dari sebuah situs dengan link untuk seluruh
halaman yang relevan.
o Memiliki link yang menyolok ke peta situs dari setiap halaman.
Gambar Site Map
- Fasilitas Pencarian (Search Facility)
o Beberapa pengunjung/pengguna lebih memilih fasilitas pencarian sebelum
menggunakan navigasi lain yang disediakan.
o Ada juga beberapa pengguna menggunakan fasilitas pencarian sebagai fasilitas
terakhir yang akan digunakan.
o Pastikan situs Anda memiliki sebuah fasilitas pencarian (search facility).
o Letakkan kotak pencarian dalam posisi yang menyolok pada setiap halamannya.
Gambar Fasilitas Pencarian
- Grafik sebagai Navigasi dan/atau Link (Graphic as
Navigation and/or Link)
6
Komunitas eLearning IlmuKomputer.Com
Copyright © 2003-2007 IlmuKomputer.Com
o Sebagian pengembang web menggunakan grafik/ gambar sebagai link maupun
navigasi. Berhati-hatilah jika melakukan hal tersebut.
o Jika garis tepi (border=”0”) pada tag grafik, hal itu mungkin menjadi jalan yang tidak
jelas bagi pengunjung ketika memberitahukan bahwa gambar tersebut merupakan
sebuah link.
o Jika grafik/gambar tersebut bukan dalam mouseover, pengunjung mungkin tidak akan
melihat kursor berubah menjadi sebuah tangan.
Gambar Grafik sebagai navigasi atau link
o Usahakan dan sediakan link teks (textual link) untuk informasi yang sama sebagai
grafik.
Gambar Textual link
o Jika nilai estetika lebih penting, berilah garis tepi (border=”1”) pada grafik/gambar
sebagai link
KONSEP PENULISAN (WRITING CONCEPT)
Teknik penulisan dalam web berbeda dengan penulisan untuk publikasi (cetak). Waktu
merupakan hal sangat penting bagi mereka yang menggunakan Internet, sehingga para
pengguna Internet tidak
akan membuang waktunya hanya untuk membaca teks yang sangat banyak sekali. Riset
membuktikan bahwa para pengguna cenderung meneliti teks dalam layar monitor.
Selain itu, lebih cepat membaca di layar monitor dibandingkan membaca di atas kertas.
Terdapat beberapa konsep penulisan dalam sebuah web, yaitu:
- Sedikit itu lebih baik – pertahankan konsistensi: buatlah struktur kalimat sesederhana
mungkin, atau buatlah kalimat yang pendek.
- Seringlah menyorot (highlight) kata atau ungkapan yang penting.
- Buatlah bullet atau nomor jika perlu.
- Buatlah panjang halamannya lebih pendek – hindari terlalu banyak menggulung layar
(vertical scroll).
7
Komunitas eLearning IlmuKomputer.Com
Copyright © 2003-2007 IlmuKomputer.Com
- Gunakan link untuk menyorot (highlight) dan mengambil pengguna untuk informasi lebih lanjut. - Hindari penggunaan ungkapan yang tidak deskriptiv, seperti “klik di sini” - coba dan gunakan kata deskriptiv untuk link. - Hindari penggunaan tag <hr> (Horizontal Rule), untuk memisahkan badan teks: gunakan banyak judul, subheading, dan ruang putih sebagai gantinya (hal ini akan nampak lebih bagus dan mudah dibaca, tag <hr> juga banyak yang tidak menyukai. - Hindari perataan teks di tengah-tengah (center) – tidak nyaman untuk dibaca. - Jangan menggunakan semua huruf kapital – tidak nyaman untuk dibaca juga. - Hindari teks miring (italic) secara berlebihan – hal ini juga tidak nyaman untuk dibaca. - Pertahankan isi (content) dari style – gunakan style sheet dan masukakan file lain yang mendukung.
KESEDERHANAAN (SIMPLICITY)
Kesederhanaan merupakan hal penting dalam membuat sebuah web profesional. Sederhana di sini bukan dalam arti tampilan sebuah situs, namun lebih mengarah ke teknik penulisannya. Ada beberapa hal yang perlu diperhatikan agar konsep kesederhanaan tetap dipertahankan, yaitu: - Gunakan Heading dan Sub Heading untuk memisahkan bagian teks. - Gunakan ruang kosong dengan warna putih secara bijaksana. - Pastikan Anda memiliki tidak lebih 12 kata dalam setiap barisnya. - Tulislah isi secara singkat – bukan sebuah karangan. - Sorot (highlight) kata-kata yang penting. - Gunakan warna latar belakang pucat (terang) jika menggunakan teks utama dengan warna gelap. - Gunakan warna latar belakang gelap jika teks utama berwarna terang. - Hindari penggunaan warna yang terlalu banyak, terutama kombinasi yang tajam bagi mereka yang buta warna dalam membaca teks.
MUDAH DIAKSES (ACCESSIBILITY)
Suatu hal yang mudah diakses ke semua orang dengan mengabaikan browser, paltform, sistem operasi, tersambung atau putus merupakan hal yang sangat utama untuk mempertimbangkan ketika merancang sebuah website. Anda tidak perlu menghalangi seorang pengguna web keluar, siapa saja bisa menjadi potensi menjadi pengunjung/ pelanggan. Setelah sebuah website mudah diakses, membuat penggunaan website Anda
8
Komunitas eLearning IlmuKomputer.Com
Copyright © 2003-2007 IlmuKomputer.Com
akan banyak diakses oleh pengguna/pengunjung. Mudah digunakan = Pengunjung akan kembali. Sulit digunakan = Pengunjung akan “kapok”. “Kekuatan Web adalah disukainya web tersebut oleh pengguna di seluruh dunia (Universality). Akses oleh semua orang dengan mengabakan kekurangannya adalah aspek yang sangat penting”. (Tim Berners – Lee, Direktur W3C dan pembuat World Wide Web). Aspek kemudahan dalam mengakses sebuah website perlu mempertimbangkan beberapa hal sebelum merancang web, diantaranya: - Pastikan website Anda mudah digunakan oleh browser utama yang sering digunakan banyak orang maupun web browser lainnya. - Pastikan website Anda mudah digunakan tanpa harus mendownload sebuah plug-in tertentu. - Ujilah website Anda pada tahap pengembangan untuk memeriksa kinerja pada berbagai sistem operasi dengan versi browser berbeda. - Gunakan style sheet untuk memisahkan style dan content. - Gunakan etika tag html untuk menampilkan teks yang dimaksud sehingga memungkinkan pengguna yang masih awam dapat membaca teks secara jelas dengan cara: menggunakan tag <em> atau <strong> pada Heading, usahakan selalu menetapkan teks alternatif untuk grafik (<img src=”gambar.gif” width=”25” height=”35” alt=”keterangan gambar”>) - Periksa penggunaan warna yang kurang bagus dengan berbagai format kebutaan warna (color blindness): jika ragu-ragu – desaturate (buatlah hitam dan putih) rancangan untuk melihatnya apabila masih perlu pertimbangan, jangan menggunakan warna sebagai indikasi adanya perubahan (misal: bagian baru), selalu menggarisbawahi suatu teks berupa link.
KEBUTAAN WARNA (COLOR BLINDNESS)
Sekitar satu dari sebelas orang mungkin tidak mampu menggunakan website Anda berkaitan dengan beberapa format kebutaan warna (color blindness). Yang terbaik, website Anda tidak akan nampak pada orang yang buta warna seperti yang telah Anda rancang. Sialnya lagi, hal ini bisa jadi teks tidak terbaca, navigasi yang sulit digunakan dan elemen lain yang tersembunyi. Anda dapat digunakan oleh mereka yang buta warna, yaitu:
9
Komunitas eLearning IlmuKomputer.Com
Copyright © 2003-2007 IlmuKomputer.Com
- Kebanyakan orang yang buta warna tidak bisa membedakan antara warna merah dengan hijau. - Warna yang teduh akan nampak terang jika dilihat oleh orang yang buta warna. - Format kebutaan warna yang umum adalah: Protanopia tidak mampu menerima warna merah dan Deuteranopia tidak mampu menerima warna hijau, sedangkan Tritanopia tidak mampu warna biru. Bagaimana cara menetralkan kondisi tersebut? - Jangan menggunakan warna sebagai satu-satunya kunci rahasia, oleh karena itu gunakan selalu garis bawah (underline) jika merupakan sebuah llink, sediakan pula arti lain untuk membedakan antar bagian. - Hindari penggunaan warna merah atau hijau saja secara monoton pada website Anda. - Pertahankan tingkat kontras antara teks dan latar belakang. - Gunakan selalu “alt” (teks alternatif) pada setiap grafik.
GRAFIK (GRAPHIC)
Unsur grafik sangat diperlukan dalam sebuah website, karena memiiki beberapa fungsi. Namun jika terlalu banyak menggunakan grafik, bisa jadi website kita akan menimbulkan berbagai masalah. Untuk mengatasi berbagai hal yang tidak diinginkan ketika mendesain web, perlu mempertimbangkan berbagai sudut pandang dalam penggunaan grafik, diantaranya: - Tambahkan grafik seperlunya karena bisa menambah waktu ketika pengguna mendownload artikel yang diinginkan. - Ambillah yang terkecil dalam hal ukuran fisik dan file jika memungkinkan. - Jangan menggunakan navigasi dalam bentuk grafik jika ingin dijadikan beberapa bahasa – hal ini memerlukan pemeliharaan ekstra. - Usahakan selalu mencantumkan spesifikasi tinggi dan lebar dalam tag <img src>. - Usahakan selalu mencantumkan nilai border=”1” dalam tag <img src> atau beberapa browser akan menampilkan warna biru di sekitar tepi gambar jika grafik tersebut merupakan sebuah link. - Usahakan selalu menetapkan teks alternatif dalam tag <img src=”gambar.gif” alt=”keterangan”>. Sebagian orang akan mematikan grafik agar proses koneksi lebih cepat. Jika grafik dimatikan, dan tidak memasukkan teks alternatif maka pengguna tidak mengetahui gambar tersebut.
10
Komunitas eLearning IlmuKomputer.Com
Copyright © 2003-2007 IlmuKomputer.Com
PENUTUP Perkembangan internet yang begitu pesat membuat beberapa developer menambahkan teknologi baru dapat menampilkan aplikasi yang dibutuhkan. Sebagai seorang web developer, tentu saja harus selalu mengikuti perkembangan di dunia maya agar ketika merancang web tidak timbul masalah akibat dari pengguaan teknologi yang sudah kadaluwarsa. Berikut ini terdapat beberapa bahan pertimbangan tentang teknologi yang digunakan ketika merancang sebuah website, yaitu: - Hindari penggunaan teknologi yang sudah lebih dari dua tahun. - Hindari pembuatan website yang memaksa pengguna/ pengunjung harus mendownload software tertentu terlebih dulu. - Jika Anda memiliki teknologi baru dalam sebuah situs, buatlah alamat situs mirror-nya dengan cara memberi pilihan kepada para pengguna sebelum memasuki situs Anda – jangan menggunakan sebuah plug-in browser yang terdeteksi adanya pengalihan jalur link. - Gunakan perencanaan pada situs Anda untuk melihat jika para pengguna menyukai html atau menggunakan teknologi baru yang terpasang dalam situs – tinggalkan teknologi baru jika tidak populer. - Jika Anda membuat website menggunakan teknologi baru, cari tahu tentang usabilitas (kemudahan penggunaan) dari semua jenis website yang ada. - Periksa statistik website Anda untuk melihat berapa banyak pengguna memiliki plug-in terakhir sebelum Anda merancang website.
0 komentar:
Posting Komentar