Menampilkan Tag HTML Pada Halaman HTML

Kadang kita ingin menampilkan tag-tag HTML pada halaman web kita, misalkan kita sedang memberikan tutorial mengenai web developing.

Ada beberapa cara untuk menampilkan tag HTML kedalam halaman web kita, berikut ini beberapa cara tersebut.

Cara Pertama

Menggunakan tag “<pre>”. Tag ini dapat digunakan untuk menampilkan kode program atau text apapun dengan format yang sama, artinya format yang nanti ditampilkan akan sama seperti format aslinya.

Contoh penggunaanya:
<pre>
Ini contoh penggunaan pre,
Anda dapat memasukkan kode program didalamnya.
</pre>

Cara Kedua

Cara kedua adalah dengan menggunakan tag “<xmp>”.

Contoh penggunaannya:
<xmp>
Ini contoh penggunaan xmp
Anda dapat memasukkan kode program didalamnya.
</xmp>

Cara Ketiga

Cara ketiga adalah menggunakan tag “<code>”.

Contoh penggunaanya:
<code>
Ini contoh penggunaan tag code
Anda dapat memasukkan kode program didalamnya.
</code>

Cara Keempat

Cara keempat adalah menggunakan HTML ASCII dalam penulisan tag pembuka dan tag penutup.
& l t ; akan menghasilkan <, sedangkan & g t ; akan menghasilkan >
Perlu diingat tuliskan tag tersebut tanpa spasi.

Contoh penggunaanya:
& l t ; b & g t ; Ini contoh penulisan tag bold & l t ; /b & g t ;

Hasilnya akan terlihat seperti ini ;
<b>Ini contoh penulisan tag bold</b>

Selamat Mencoba! 😀

Clickable Box

Ini pengalaman pribadi saya ketika mengembangkan web. Ceritanya client meminta box yang dapat diklik, jadi biasanya link itu berupa text, namun kali ini berupa box (kotak).

Saya kemudian mencoba berbagai cara, salah satunya dengan memasukkan elemen “<div>” kedalam elemen “<a>”, contohnya seperti ini :

“<a href=’#’> <div style=’width:100px;height:50px;’>Hello Guys</div></a>”

Memang di browser keluarga firefox, seperti opera, safari, dan chrome kode tersebut dapat berjalan lancar. Tapi kita seharusnya memberikan produk terbaik pada client, sehingga kode harus dapat berjalan dengan baik pada semua browser umum, termasuk Internet Explorer milik Microsoft.

Setelah utak-atik sana sini saya menemukan 2 cara untuk melakukannya, kita akan menggunakan CSS sebagai stylernya. 😀

Cara Pertama

Buat CSS seperti dibawah ini, anda bisa ubah stylenya sesuka anda.

a#box {
     width: 100px;
     height: 50px;
     color: black;
}

Kemudian terapkan di kode HTML anda :
<a id=”box”>Ini Contoh Clickable Box</a>

Cara Kedua

Anda bisa menggunakan elemen “div”

#box {
     cursor: pointer;
     cursor: hand;
     width: 100px;
     height: 50px;
     color: black;
}

Kemudian terapkan di kode HTML:
<div id=”box”>Ini contoh clickable box</div>

Semoga bisa membantu! 🙂

5 Fitur Sederhana Namun Penting Dalam Web

Sekarang saya akan berbagi 5 fitur sederhana namun penting dalam desain web, dan sekarang sudah menjadi standard sebuah web.

Fitur Pencarian / Search

Dengan fitur ini, user dapat melakukan pencarian artikel dalam web yang berhubungan dengan keyword yang dia masukkan. Dan secara otomatis web akan menampilkan hasil pencarian, sehingga akan memudahkan user untuk mencari artikel yang dia inginkan.

Perlu diingat kebanyakan web menggunakan icon bergambar kaca pembesar sebagai icon yang menjelaskan bahwa kotak tersebut merupakan daerah pencarian.

Web Layout

Layout web diusahakan konstan. Layout yang dimaksud adalah format halaman, seperti besar tulisan heading, warna tulisan, jenis font, dan lain sebagainya. Sehingga user tidak kebingungan akan arti tiap-tiap teks, warna, dan ukuran font.

User Interface yang Konsisten

Usahakan User interface web konsisten, artinya antara halaman yang satu dengan yang lain tidak berubah-ubah.
Contohnya adalah penggunaan button, usahakan button antara halaman satu dengan yang lain memiliki bentuk dan posisi yang sama, sehingga tidak membingungkan user.

Struktur Form

Usahakan struktur dari form dibuat sebaik mungkin agar user tidak merasa bingung. Misalkan dengan mengelompokkan berdasarkan kriteria tertentu. Contoh: Kelompok data diri (nama, alamat, telepon, dll), Kelompok Pengalaman Kerja (tahun, nama_perusahaan, dll).

Pastikan Ada Fitur Bantuan

Fitur ini sangat penting untuk memudahkan user mengetahui halaman-halaman web (web map), dan juga fitur-fitur apa saja, dan akses fitur tersebut.

Referensi : http://sixrevisions.com/usabilityaccessibility/five-simple-but-essential-web-usability-tips/

CSS dan Cache

Suatu saat saya sedang membangun sebuah website, dan kebetulan sedang berkutat pada CSS-nya.

Saya melakukan edit file via FTP, dan kebetulan koneksi saya lambat sekali, dan traffic web servernya pun juga cukup tinggi.

Setelah saya mengedit sana sini, dan mencoba me-refresh web browser untuk melihat hasil perubahaannya, apa yang saya dapat? Tidak terjadi perubahaan sama sekali pada tampilan web saya.

Saya coba untuk mengulang proses, tapi sama saja tidak terjadi perubahan, bahkan sampai saya bersihkan history, cookies, dll pada web browser, namun hal yang sama terjadi. Tidak ada perubahan.

Saya kemudian mencoba bertanya pada mbah Google, dan akhirnya saya menemukan jawabannya.

Ternyata ketika kita merequest suatu halaman web pada web server, web server akan mengecek, apakah file CSS yang akan digunakan nanti telah digunakan sebelumnya atau tidak. Dalam kondisi internet jelek, apabila CSS telah digunakan sebelumnya, maka file CSS yang baru tidak akan dikirim ke client, yang terjadi adalah file CSS yang lama yang akan dikirim, sehingga client tidak akan melihat perubahaan pada halaman web, walaupun telah dilakukan editing pada file CSS.

Solusinya…

Anda dapat menggunakan versioning pada CSS. Nah apa itu?

Biasanya anda memasukan file CSS dengan cara seperti ini :

Anda dapat menambahkan versi dibelakan file css, sehingga akan menjadi seperti ini.

<link rel=stylesheet type="text/css" href="basics.css?v=1">

Dapat dilihat bahwa saya menambahkan ?v=1 dibagian belakan file basics.css

Cara ini terbukti ampuh untuk menipu sistem cache web server, sehingga ketika kita merequest satu halaman dengan css yang sama, web server akan membaca bahwa file css yang diminta berbeda. Itu yang menyebabkan file css akan tetap di load ulang. 🙂

Setiap kali anda melakukan perubahaan pada file CSS, anda perlu mengubah nilai version tadi.