Blog Review: Good Design (Part 2)
August 20, 2008
Berjumpa lagi kita dalam segmen blog review. Pada artikel lepas, kita telah lihat bagaimana layout sesebuah laman web itu merupakan salah satu elemen yang penting di dalam penyampaian content atau isi sesebuah laman web. Di dalam review kali ini, kita akan lihat ciri kedua iaitu skema font di dalam sesebuah laman web.
Font
atau lebih terkenal dengan panggilan typeface merupakan salah satu elemen yang penting di dalam sesebuah laman web. Melalui interface default Firefox, Yahoo menggunakan Verdana dan Arial dalam persembahan laman web mereka. Begitu juga Google dan Microsoft. Namun begitu, ada juga laman web yang menggunakan Georgia sebagai font utama dalam penyampaian sesebuah laman web seperti iLoveTypography.com.
Dan ada sebabnya mengapa typeface ini sahaja yang digunakan oleh kebanyakan laman web. Selain ia lebih user-friendly, ia juga nampak lebih professional dan standard berbanding yang lain. Di kalangan blog atau web yang ingin direview oleh tutorial @ iLuvIslam.com, kami dapati bahawa IBRAHzine.com menggunakan Comis Sans MS.
Secara general, kami akui bahawa typeface ini amat popular di kalangan kanak-kanak kerana ia menggambarkan suasana ceria. Namun dari segi penampilan, typeface ini gagal membangkitkan elemen formal. Dan bagi memenangi semua lapisan pengunjung, maka typeface lebih sesuai haruslah dipilih.
Berikut merupakan contoh laman web yang baik dalam penggunaan typeface serta mengambil kira lapisan pengunjung sama ada kanak – kanak mahupun dewasa:
Semoga laman web berikut dapat digunakan dan dijadikan sebagai contoh. Secara ringkas, perhatikan laman web yang popular dan typeface yang digunakan oleh mereka dan cara penggunaan. Selamat mencuba!
We’re having a break
August 15, 2008
Ya, apa yang anda baca itu memang benar. Kami ingin berehat seketika untuk merancang beberapa tutorial dan aktiviti buat anda semua. Namun begitu, janganlah anda risau kerana kami akan menyajikan anda dengan beberapa artikel dan video menarik buat peminat seni grafik dan web.
Internet Browser
August 10, 2008
Bercakap tentang Internet Browser, ada yang menggunakan Internet Explorer, Firefox, Opera, Safari dan macam – macam lagi. Namun tahukah anda bahawa sesebuah laman web itu boleh kelihatan berbeza jika dilawati dengan menggunakan browser yang berlainan.
Gambar di bawah menunjukkan sebuah laman web yang sama tetapi dilawati oleh tiga internet browser yang berbeza. Perhatikan betul – betul dan beritahu kepada kami apa perbezaannya.
- Internet Explorer
- Firefox 2.0
- Safari
Di dalam artikel akan datang, tutorial @ iLuvIslam akan berkongsi dengan anda internet browser pilihan kami dan sebabnya. Jumpa lagi!
Special Characters
August 6, 2008
Ada mungkin tidak akan bosan dengan artikel ini. Kali ini, tutorial @ iLuvIslam akan menunjukkan shortcut untuk special characters. Jika anda tidak tahu apakah special characters, berikut merupakan contoh – contohnya:
© ® ² ™
Caranya amat mudah, anda hanya memerlukan butang Alt (sebelah kiri spacebar) dan Numpad.
Jika anda ingin membuat simbol copyright ini, © apa yang anda perlu tekan adalah:
Tekan butang Alt bersama nombor 0, 1, 6, dan 9. (Jangan lepaskan butan Alt sehingga nombor terakhir ditekan dan lepaskan putang Alt setelah selesai) Jika anda lakukannya dengan betul, maka simbol copyright, © akan berhasil. Selamat mencuba!
Inginkah lebih banyak special characters?
Our banner, your design!
August 3, 2008
Setelah sekian lama, kami ingin juga meraikan mereka yang telah mahir di dalam bidang seni reka grafik. Dengan itu, kami ingin mengumumkan bahawa kami kini membuka sebarang sumbangan rekaan banner dari para pelawat tutorial @ iLuvIslam.
HTML Tutorial #4: HTML File (Part 2)
August 2, 2008
Seperti yang dijanjikan di dalam artikel sebelum ini, kami akan terangkan serba sedikit mengenai contoh yang disediakan dibawah.
<html>
<head>
<title>Title of page</title>
</head>
<body>
Laman web pertama saya. <b>Yeay!</b>
</body>
</html>
Penerangan
Seperti yang anda ketahui, kita kini belajar untuk membina laman web yang menggunakan coding Hyper Text Markup Language singkatan kepada HTML. Maka, untuk membolehkan browser mengenali file ini adalah html file, maka tag yang pertama dan terakhir di dalam file ini perlu mempunyai dua elemen iaitu:
- Open tag:
<html> - Close tag:
</html>
Di antara tag <head> dan </head> merupakan header information. Antara elemen yang boleh dimasukkan di antara tag ini adalah seperti berikut:
- Tajuk laman web (biasanya akan tertera pada bahagian kiri atas pada browser). Ia dikodkan dengan menggunakan tag
<title>Tajuk laman web anda</title>. - Boleh juga diletakkan elemen style (akan diterangkan di dalam bab CSS)
- Anda juga boleh memasukkan document description dan keywords yang akan menunjukkan apakah isi kandungan sesuatu dokumen atau laman web itu. Contohnya:
<meta name="description"
content="Laman web tutorial oleh iLuvIslam design team">
<meta name="keywords"
content="laman web, seni grafik, photoshop, GIMP, HTML, CSS">
Di antara tag <body> dan </body>, ia akan menunjukkan apa yang akan dipaparkan di browser pelawat laman web anda. Jadi, jika anda letakkan text atau imej, ia akan memaparkan text atau imej seperti yang dikod oleh anda.
Dan <b> </b> merupakan tag untuk menjadikan sesuatu text itu bold seperti ini.
Semoga sama kita dapat manfaat daripadanya. Pada tutorial akan datang, kita akan lihat bagaimana untuk mengambil satu kod atau script daripada laman web dan gunakannya di dalam laman web yang ingin kita bina. Jumpa lagi, insyaAllah.
HTML Tutorial #5: Kod
August 1, 2008
Di dalam tutorial kali ini, kami akan kongsi dengan anda bagai mana untuk mengambil dan memasukkan kod atau script daripada laman web dan gunakannya di dalam laman web anda.
Sebagai contohnya, kami akan gunakan kod daripada IslamicFinder.org untuk kalendar Masihi dan Hijrah.
Langkah 1: Copy kod tersebut. Highlight kesemuanya > (Right click) Copy
<iframe src="http://www.islamicfinder.org/calendar_service.php?base=g〈=english" frameborder=0 width=180 height=270 marginwidth=0 marginheight=0 scrolling="no"> </iframe>
Kemudian, paste kod tersebut di antara tag <body> </body> pada html file anda. Save dan review. Senang kan? :) Semoga ada manfaatnya.
Di sini, kami kongsikan kepada anda 2 laman web yang anda mampu copy kod dan jadikannya sebagai latihan. Selamat mencuba!
Jika ada sebarang pertanyaan, boleh diajukan di bahagian komen di bawah.
