Rabu, 30 Januari 2013

Tips Trick HTML


Menghilangkan garis bawah pada link
Cukup anda tambahkan script berikut pada bagian awal text/HTML anda :
<html>
<head>
<style type=”text/css”>
<!–
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
–>
</style>
<title> Judul </title>
</head>
<body>
</body>
</html>

Membuat link dalam satu halaman
Misalnya : ‘sumber’ akan dilink ke ‘tujuan’ dimana masih dalam satu halaman
Konfigurasi text/HTML pada bagian sumber :
<a href=”#tujuan”>sumber</a>
Konfigurasi text/HTML pada bagian tujuan :
<a name=”tujuan”>tujuan</a>

Membuat halaman web menjadi lebih baik
Aspek yang diukur dari suatu halaman web adalah proses loading yang cepat, tampilan yang menarik, dan kemudahan dalam navigasi. Saya akan membahas satu persatu.
Kecepatan Proses Loading
Sebuah halaman standar tanpa grafik, seharusnya saat loading tidak lebih dari 3 sampai 7 detik. Untuk meload sebuah grafik seharusnya tidak boleh lebih dari 9 detik. Jadi total halaman dengan grafik adalah sekitar 15 detik. Sebagai contoh yang baik yahoo.com, halaman utama mereka diload sekitar 8 detik dengan modem 28.8k.
Untuk mengurangi waktu tersebut, anda perlu berpikir ekstra. Sebagai contoh, jangan meletakkan animasi flash berlebihan, background terang, lebih dari tiga banner dalam satu halaman, dsb. Banyak pengguna internet yang mempunyai desain tampilan yang menarik dan isi yang bagus.
Juga kurangi ukuran dari image anda, banyak image tampak sama walaupun anda telah mengurangi separuh dari warnanya. Anda bisa menggunakan software seperti Paint Shop Pro atau Photoshop.
Tampilan yang Menarik
Jangan sampai menaruh banner lebih dari tiga dalam satu halaman, siapa orang yang mau melihat banyak banner dalam satu halaman.
Kedua, bila halaman anda penuh berisi text jangan sampai membuat background dengan grafik atau image karena hal ini menyebabkan text sulit dibaca.
Ketiga, hindari background berwarna hitam, kecuali halaman anda berhubungan dengan horror atau misteri. Background hitam juga mempunyai kesan ‘negatif’ bagi halaman anda.
Kemudahan dalam Navigasi
Halaman anda harus jelas, jangan menggunakan tabel atau frame yang berbatas. Gunakan warna yang sejuk bagi mata. Juga jangan meloncat tiba-tiba dari halaman yang gelap ke halaman yang super terang. Berilah keterangan pada bagian yang sekiranya sulit atau susah dimengerti. Berilah beberapa option ketika pertama kali pengunjung masuk tetapi jangan berlebihan. Buatlah menu dan submenu serta jangan meletakkan apapun pada suatu menu yang besar. Cobalah untuk tidak mengharuskan pengunjung untuk mengklik pada banner,iklan dan sebangsanya, lebih baik anda gunakan kata2 ‘Click on our sponsor’
Letakkan posisi diri anda sebagai seorang pengunjung, pelajari apa yang mungkin mereka sukai dan yang tidak. Bertindaklah sebagai seorang human ketika anda menerangkan dalam text, bukan sebagai buku. Selanjutnya tunjukkan pada pengunjung bahwa anda selalu memeriksa halaman anda dan yakinkan bahwa mereka harus kembali lagi pada lain waktu.
Sebagai kesimpulan, untuk membuat halaman menjadi lebih baik :
1. Jangan meletakkan animasi atau image berlebihan
2. Jangan menggunakan background image
3. Isi yang bermutu
4. Jangan menggunakan lebih dari tiga banner dalam satu halaman
5. Hindari menggunakan background hitam
6. Kurangi ukuran image dengan mengurangi warna
7. Gunakan desain yang sama dalam setiap halaman anda
8. Jangan menggunakan tabel atau frame berlebihan
9. Gunakan menu dan submenu yang sistematis
10. Gunakan pendekatan personal, seolah anda tahu pengunjung
11. Letakkan posisi anda sebagai seorang pengunjung
Bila anda mempunyai kritik dan pertanyaan, silakan kirim mail

Membuat link e-mail dengan subject sudah terisi
Normalnya link e-mail akan berbentuk seperti :
mailto:A%20HREF=”mailto:email@domain.com”kirim e-mail !</A>
Supaya bila diklik langsung berisi subject maka perlu diubah seperti :
mailto:A%20HREF=”mailto:email@domain.com?Subject=subject e-mail”kirim e-mail !</A>

Membuat daftar list
Misalnya, anda ingin membuat list sbb :
1. text 1
2. text 2
3. text 3
4. text 4
maka dalam text/HTML anda ditulis sbb :
<OL>
<LI>text 1
<LI>text 2
<LI>text 3
<LI>text 4
</OL>
Anda bisa menulis <LI> sebanyak anda inginkan asal diawali <OL> dan diakhiri </OL>.
Atau anda bisa juga menggunakan <UL> dan </UL> yaitu ‘Unordered List’ seperti :
  • text 1
  • text 2
  • text 3
  • text 4
Dengan menulis dalam text/HTML sbb :
<UL>
<LI>text 1
<LI>text 2
<LI>text 3
<LI>text 4
</UL>

Membuat text background dengan warna lain
Feature ini hanya bekerja pada Netscape 4 ke atas dan IE 4 ke atas.
Untuk membuat text background dengan warna lain, cukup anda ketik :
<SPAN STYLE=”background:COLOR”>Tulisan</SPAN>
Dimana COLOR adalah warna (red, yellow, green, black, dsb) dan Tulisan adalah text yang diinginkan.
Contoh : Irwanto Mursetiono

Membuat warna menyala pada link saat mouseover
Hanya bekerja pada IE 4 ke atas.
Dengan script tambahan seperti di bawah maka saat mouseover/pointer mouse ada di atas atau melewati tulisan yg ada, tulisan tersebut akan menyala dengan warna
lain :
<style type=”text/css”>
A:link {color: LINKCOLOR;}
A:visited {color: VISITEDCOLOR;}
A:hover {color: HOVERCOLOR;}
</style>
Dimana LINKCOLOR, VISITEDCOLOR, dan HOVERCOLOR adalah warna (red, yellow, green, black, dsb)

Membuat tombol ‘Go Back’ dengan javascript
Cukup dengan script sederhana berikut :
<FORM>
<INPUT TYPE=”Button” NAME=”Submit” VALUE=”Go Back” onClick=”history.go(-1)”>
</FORM>
Anda akan memperoleh seperti ini :

Dimana tombol ini berfungsi untuk kembali ke halaman sebelumnya.

Konfigurasi warna
Warna dalam text/HTML diqtur dengan menggunakan kode heksadesimal, seperti : #RRGGBB
Disini, RR, GG, dan BB adalah digit heksadesimal mewakili warna Red, Green, dan Blue.
Sebagai contoh :
black = #000000
blue = #0000FF
red = #FF0000
yellow red = #FF4500
white = #FFFFFF
Warna-warna standar yang ada adalah :
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, dan yellow.

1 komentar: