Modifikasi web dan blog

Menyisipkan Icon Emocotion Dalam Posting

2008-08-06T21:20:00.000-07:00

Setelah sekian lama tidak memposting sebuah tutorial, akhirnya tiba juga saat-saat yang ditunggu. Mohon maaf karena saya sudah lama tidak muncul kepermukaan karena kesibukan diluar. Pada postingan sebelumnya saya membicarakan tentang tips marquee teks (teks berjalan diagonal), google page dan google creator, Setelah keliling-keliling dengan menumpang kendaraan om Google akhirnya saya mendapatkan ide topik postingan kali ini. Walaupun sudah banyak yang telah membuat artikelnya, namun tidak ada salahnya saya juga membuatnya guna kelengkapan postingan dalam blog saya. Topik yang saya cari-cari ini sebenarnya sering terlihat oleh kita pada beberapa blog ataupun website, jumlahnya kadang sedikit kadang juga banyak, apakah itu??

Jawabnya adalah modifikasi web/blog dengan Icon Emocotion, ya icon ini kadangkala dipergunakan untuk mengungkapkan perasaan/emosi sang penulis yang kadangkala tidak bisa diungkapkan hanya dengan kata-kata. Dalam suatu blog/website kadangkala jumlahnya sedikit sebab icon ini memang dipergunakan seperlunya saja, namun bukan berarti icon ini tidak penting, sebagai contoh apabila kita ingin menulis:

" kenapa kamu melakukan itu? "
(" itu" nya terserah anda mau mengartikan apa, he he he)

Dari kalimat tersebut kita tidak mengetahui apakah sang penulis mau bertanya atau mau menyatakan perasaan kecewamenyesalkan suatu perbuatan. maka dengan menggunakan icon emocotion, kalimat tersebut akan tampak jelas seperti dalam kalimat berikut:

"kenapa kamu melakukan itu ?"

Dari kalimat diatas pembaca akan mengerti apa yang dimaksud oleh penulis.

Ok, saya rasa cukup untuk pengantar mengenai Icon Emocotion ini, Dibawah ini akan saya tampilkan beberapa kode beserta bentuk yang akan tampil. Penempatan link icon ini harus ditulis pada kode html posting.

happy

sad

winking

big grin

batting eyelashes

big hug

confused

love struck

blushing

Ptongue

kiss

broken heart

Osurprise

angry

smug

cool

worried

whew!

devil

crying

laughing

straight face

raised eyebrow

rolling on the floor

angel

nerd

talk to the hand

I don't know

not listening

good luck

pumpkin

coffee

idea

skull

bug

alien

frustrated

praying

money eyes

whistling

feeling beat up

peace sign

shame on you

dancing

bring it on

hee hee

chatterbox

not worthy

oh go on

star

hiro

billy

april

yin yang

Note: Dalam penyisipan icon emocotion sebaiknya seperlunya saja sebab jika terlalu banyak pembaca akan merasa bosan dan pusing tujuh keliling

marquee, teks berjalan diagonal

2008-07-29T23:18:00.000-07:00

Lama tidak jumpa, mohon maaf sebelumnya karena kesibukan yang cukup padat tidak sempat menuliskan sebuah posting lagi setelah psoting terakhir saya mengenai google page dan modifikasi playlist lagu, lihat kembali bagi kalian yang belum sempat membaca, luangkan waktu kalian sejenak untuk berjalan-jalan di gubuk saya ini .

Pada postingan sebelumnya saya juga pernah membahas fungsi (tag) marquee atau teks berjalan dimana kita dapat membuat teks berjalan dengan warna yang memarik, arah vertikal atau horizontal, bolak-balik ataupun satu arah. Nah, pada kesempatan kali ini saya ingin menambahkan sebuah trik untuk membuat teks berjalan atau marquee ke arah diagonal dan bolak-balik (bounce, yang dalam arti indonesianya memantul-mantul kali yah? ).

Baiklah kita langsung saja pada topik pembahasan utama, untuk dasar tag marquee saya rasa kalian sudah paham, kalaupun belum kalian dapat mereviewnya di postingan saya sebelumnya.

Berikut ini adalah code marquee text:

<a href="http://modifiweb.blogspot.com" class="style1">Modifiweb</a>

</marquee></marquee>

Hasilnya seperti ini:

Modifiweb

Anda dapat memodifikasi kode diatas untuk melakukan berbagai percobaan modifikasi web. Selamat mencoba!!!

Google Page Creator dan Google Groups

2008-07-15T17:25:00.001-07:00

Postingan saya kali ini membahasa tentang kata kunci yang seringkali tampil dipostingan sebelumnya yang sering juga disebut dengan free webhosting (web hosting/web server gratisan ala google) seperti dalam postingan kita sebelumnya salah satu contohnya posting membuat playlist lagu. Apabila kamu menginginkan musik di blog kamu, maka kalian perlu meng upload file-file tersebut ke web host. Kebanyakan dari kita tidak membayar untuk sebuah situs .com. Akan tetap terdapat banyak situs yang menawarkan hostingan gratis untuk file-file kita, dokumen, foto, dan lainnya. Kebanyakan orang menawarkan (koq jual beli sih? ) dua web hostingan gratis sebagai bahan pertimbangan, Google page creator dan google group.

Google page creator

Kita dapat mempergunakan account google kita (apabila kalian sudah memiliki account gmail, maka account itu dapat dipergunakan) untuk mengakses servis yang ditawarkan oleh google. Google page creator mudah untuk digunakan dan terdapat alat bantu (tools) yang membantu kita dalam membuat halaman web di dalam browser dan mempublikasikannya kedalam web hanya dalam beberapa klik saja.

Sistem kerjanya adalah "apa yang kau lihat itulah yang kau dapat" (keren cing, ). Semuanya diselesaikan dalam layar dan kita tidak perlu mendownload software apapun. Google page creator ini lebih mirip dengan Pagemaker versi simpelnya. Halaman yang kalian buat disimpan (host) di Google server dan halaman yang tampil akan seperti:

http://yourname(red).googlepages.com/.

Tampilan google page creator seperti gambar dibawah, Kita dapat mengubah layout, warna latar, heading, konten, upload gambar, dan mempublikasikannya.

Untuk upload file-file kita dapat melakukannya dari site manager terlihat seperti dalam gambar dibawah:

Ketika kita klik upload tab, maka akan muncul tombol browse untuk mencari file mana yang akan kita upload, setelah kita upload sebuah file maka catat URL dari file tersebut. Kita dapat mengupload sebanyak yang kita mau sampai batasan ukuran 100 MB.

Google Groups

Google group merupakan sebuah servis berlatar belakang komunikasi bagi pengguna untuk dapat dengan mudah berhubungan dengn teman kita, atau orang yang ingin berbagi dalam ketertarikan suatu hal yang sama melalui internet.

Seperti yang dapat kalian lihat, membuat google group cukup mudah, klik tombol "Create a group". Kalian akan dibawa ke halaman yang menyuruh kalin memasukkan nama group, dan deskripsi.gambarApabila kalian tidak ingin mengundang member lain untuk sementara waktu, tinggal klik "Skip this step".

Sekarang kalian telah membuat sebuah google group baru. Apabila kalian ingin meng-upload file klik tab "files" pada panel bagian kanan, dan mulailah mengupload. Apabila kalian menggunakan file-file untuk blog kalian, lihat bahwa tab "Grop settings" lalu pilih "access" pada sub tab dikonfigurasikan sehingga semua orang dapat melihat konten group. Setiap group diberikan jatah 100 MB ruang penyimpanan untuk foto, dokumen, dan file. Jangan lupa mencatat URL file yang kita upload apabila kita berniat menggunakan icon Favicon (icon disebelah judul) atau untuk modifikasi blog/web dengan musik maupun HTML.

Modifikasi player dan playlist lagu

2008-07-05T20:17:00.000-07:00

Setelah cukup lama saya tidak membuat sebuah posting karena kesibukan yang cukup padat, akhirnya waktu yang ditunggu-tunggu tiba juga . Setelah cukup lama surfing sana-sini untuk mencari topik postingan kali ini, akhirnya saya mendapatkan ide untuk membuat sebuah posting yang berkaitan dengan modifikasi web menggunakan musik playlist dan musik player, setelah di postingan sebelumnya kita membahas bagaimana cara menambahkan musik ke blog/web. Disini kita akan membahas apa sih keuntungan manampilkan musik player dan playlist sebagai bagian dari konsekuensi menambahkan musik ke blog/web? baca selengkapnya postingan ini semoga dapat menambah ilmu bagi kita semua, amin .

Sebelum kita membahas jauh tentang topik kita kali ini, ada baiknya kita mengingat kembali postingan modifiweb sebelumnya, yaitu modifikasi blog dengan musik, kita membicarakan bagaimana sebuah musik dapat dimainkan di blog/web atau melalui sebuah hiperlink(?) atau musik player. Tentu saja akan lebih baik apabila kita memiliki daftar beberapa lagu(playlist) sehingga pengunjung blog/web kita dapat memilih lagu yang hendak dimainkan sesuai dengan keinginannya (teori pemuasan konsumen, he he he). Disini kita akan mendiskusikan player musik apa yang baik yang dapat dimainkan baik di Firefox maupun di Internet Explorer.

Sebagaimana yang kita ketahui terdapat beberapa situs yang menawarkan (emang jual beli?) widget player musik yang dapat ditambahkan kedalam blog/web kita, salah satunya adalah google gadget. Kebanyakan dari situs-situs tersebut menawarkan tampilan navigasi yang mudah dipergunakan, bahkan situs-situs seperti Sonific menawarkan lagu berlisensi secara gratis yang dapat ditambahkan ke widget kita. Tetapi situs ini merupakan situs komersial yang maaf dikata, untuk menggunakan jasa mereka maka akan terdapat iklan dan promosi pada widget. Dan lagu-lagu yang tersedia biasanya bukan lagu-lagu terbaru. Apabila kita ingin mengatur pilihan lagu-lagu untuk blog/web kita, ikuti langkah-langkah pada tutorial ini untuk mengupload lagu yang kalian suka dan menambahkan player musik ke blog/web. Jenis musik yang akan dimainkan adalah MP3 karena mempunyai ukuran yang lebih kecil dibandingkan dengan file berekstensi wav.

Playlist

Kita juga dapat mempergunakan file-file berekstension m3u dan asx. Dengan mengklik file tersebut maka musik atau video yang tersimpan di playlist akan dimainkan. Ekstensi yang baru ditemukan adalah .XSPF yaitu ekstensi untuk media digital dan dapaat dimainkan di kebanyakan browser. Untuk info lebih lanjut mengenai XSPF ini silahkan kunjungi situs sourceforge, disana dijelaskan cara kerja player XSPF, player slim yang menampilkan kontrol dasar, versi Extended player yang menyajikan daftar album(playlist), cover album, dan tombol-tombol fugnsional lainnya. Untuk menampilkan player di blog/web kita harus mendwonload terlebih dahulu playernya, sebagai contoh XSPF player dari sourceforge. Kita harus pastikan bahwa file-file player tersebut tidak dalam compressed file (ZIP/rar file). Selanjutnya adalah tahapan peng-upload-an filr-file player ke web server. Kita dapat mempergunakan web server gratisan yang menyediakan jasa akses langsung(direct URL) seperti google pages.

Upload lagu

Tujuan dari upload lagu ini adalah membuat semua pengunjung dapat mendengarkan bagian dari lagu tersebut. Upload file lagu berekstensi MP3 ke server(google pages).

Pembuatan XSPF playlist

Dalam hal ini kita akan menampilkan player XSPF ke dalam blog/web kita. Kalian dapat mengcopy code HTML dibawah ke Notepad:

<?xml version="1.0" encoding="UTF-8"?>

<playlist version="0" xmlns = "http://xspf.org/ns/0/">

<title>Judul yang akan ditampilkan di player </title>

<trackList>

<track>

<location>URL file lagu 1di server </location>

<image>URL gambar 1 untuk modifikasi player </image>

<annotation>Teks yang ditampilkan di lagu 1 </annotation>
</track>

<track>

<location>URL file lagu 2di server </location>

<image>URL gambar 2 untuk modifikasi player</image>

<annotation>Teks yang ditampilkan di lagu 2 </annotation>
</track>
</trackList>
</playlist>

Ganti teks berwarna dengan URL yang berkaitan, bila tidak terdapat gambar album, biarkan kosong pada kode image location. Kita dapat menambahkan beberapa lagu ke dalam playlist dengan mengcopy kode <track> sampai </track> diatas kode </tracklist> dan mengganti teks berwarna merah dengan URL yang berhubungan. Simpan kode diatas ke Notepad dan ketikkan ekstensi file ".XSPF", contoh: "daftarlagu.xspf". Upload file ini ke server anda.

Menambahkan player ke blog/web

Langkah terakhir dari tutorial ini adalah penambahan player ke dalam blog/web. Kode dibawah ini harus ditambahkan ke dalam HTML kode (add page element pada blog).

Ganti beberapa kode:
- domain atau lokasi dimana player di upload (warna biru)
- lokasi playlist musik (merah)
- baground musik player yaitu warna web dalam hal ini biru, kamu dapat melihat kode warna dipostingan sebelumnya.
- Lebar dan tinggi player (warna orange)

Karakter HTML

2008-06-30T20:16:00.000-07:00

Setelah dua postingan terakhir saya yang sedikit kurang berhubungan dengan judul blog, review poker tournament blog dan tips mengatasi spam, yang merupakan iseng-iseng berhadiah, smiley karena postingan tersebut merupakan paid post dari situs buyblogreviews, baru beberapa minggu bergabung disitus tersebut dan bagi kalian yang tertarik dengan program tersebut maka segera daftarkan blog kalian, linknya disini atau klik banner dibawah:

Akhirnya saya dapat melanjutkan menulis posting modifikasi web. Pada kesempatan kali ini kita akan membahas hal-hal kecil yang sering terabaikan didalam web design ataupun modifikasi web, yaitu menampilkan penggunaan karakter-karakter dalam bahasa HTML. Selama ini perhatian utama kita tertuju pada bagaimana tampilan web/blog kita, tata letak elemen halaman, template, dan lain sebagainya dan kita sering melupakan karakter-karakter yang tidak dapat digantikan dengan kata-kata seperti notasi sigma, perpangkatan, hak cipta, dll. Misalnya apabila kita ingin menyatakan sesuatu yang merupakan ciptaan kita, tentu saja tidak enak dipandang dan direnungkan (Lho koq ? ) apabila kita menyatakannya dengan:

"hak cipta by bla-bla.com"

akan lebih baik bila kita menuliskannya seperti ini:

"© by bla-bla.com"

Berikut ini beberapa karakter yang sering dipergunakan:

Karakter	Kode HTML
spasi
'	'
&	&
º	º
½	½
÷	÷
±	±
"	"
<	&lt;
>	>
®	®
¼	¼
©	©
Σ	Σ
¹	¹
²	²
≈	≈
≤	≤
≥	≥
Δ	Δ
α	α
β	β
γ	γ

Perlu diingat bahwa kode karakter-karakter ini merupakan kode HTML sehingga penulisan kode tersebut haruslah dalam bentuk HTML. Sebagai contoh, apabila kita menuliskan sebuah posting, dan ingin menambahkan karakter ke dalam postingan kita tersebut, maka kita harus menambahkan kode HTML tersebut kedalam "mode edit HTML" atau kode HTML postingan kita seperti gambar dibawah.

Poker Tournament Blog Review

2008-06-30T19:56:00.000-07:00

At this beautiful moment, outside my other post(marquee tag, web color, blog music, etc) i would to review a poker tournament blog. If you wanna be a master in poker tournament so it’s the best chance for you, i will try to describe the general view of the site and you can visit the site for more tutorial.

This blog contain so many tutorial such as description of online poker, why should we choose online poker tournament, amazing online poker tournament, tips in online poker, challenges in freeroll poker tournament which allow us playing poker without enrollment fee, party poker, making money from online poker, free poker tournament which can’t be found easily in real poker tournament. We can play poker against people from over the world, prove that we are a poker master, where the game become harder every day with single or multiple table games tournament. Dont play poker tournament before you have finished learn all of tutorial posted by that site.

Last, what else are you waiting for. Visit poker tournament blog for more tutorial and be a master.

Tips proteksi Spam

2008-06-28T18:23:00.000-07:00

Tidak seperti postingan-postingan saya sebelumnya yang berkisar tentang warna web, cara membuat tabel, tag marquee, dll. Tetapi postingan saya kali ini akan membahas permasalahan yang sangat sering mengganggu kita. yaitu Spam.

Spam atau yang dikenal dengan email sampah, jumlahnya dapat mencapai setengah dari keseluruhan email yang kita terima. Spam datang dai berbagai negara dengan jumlah yang besar. Email-email ini lebih sulit ditangani, karena mereka datang dari negara lain yang berada diluar kuasa hukum dan peraturan kita. Karena hubungan internet bersifat global, maka hukum-hukum yang ada tidak dapat menghentikan permasalahan.
Jadi apa yang harus kita lakukan?
Ada beberapa tips untuk proteksi spam:

Lakukan sebisanya menghindari penggunaan email di internet. Terdapat produk yang dinamakan "spam spider" yang akan mencari alamat-alamat email di internet.
Gunakan sofware spam blocking.
Gunakan beberapa alamat email. Apabila kita ingin bergabung dengan suatu forum atau memesan suatu barang, gunakanlah email khusus untuk hal-hal tersebut dan email ini bukanlah email utama kita.
Hindari membuka Attachment yang kita tidak ketahui. Attachment sering mengandung virus, apabila kita tidak mengenal pengirim email, sebaiknya jangan buka attachment nya. Kita juga dapat mempergunakan Firewall yang menyediakan servis filtering attachment.
Bulk-mail atau email-spam. Banyak vendor email yang menyediakan jasa servis bulk-mail atau email-spam, konsepnya apabila kita mengetahui email asing yang kita curigai sebagai spam masuk ke inbox, kita dapat memindahkan email-email ini ke bulk-mail atau email-spam dan secara otomatis email yang berasal dari pengirim yang sama akan dianggap spam dan langsung masuk ke kotak bulk-mail atau email-spam.

Modifikasi web/blog dengan musik

2008-06-24T19:49:00.000-07:00

Blog dengan latar musik?? emang bagus?

Adakalanya kita ingin mempercantik tampilan web/blog dengan tata letak halaman yang baik, template yang unik, format tulisan yang indah, dan disertai dengan tabel(klik disini) maupun gambar-gambar pendukung. Selain cara-cara yang telah disebutkan tadi, terdapat masih banyak cara untuk lainnya untuk memodifikasi web/blog anda, salah satunya dengan membuat latar musik. Dengan cara ini, diharapkan pengunjung akan terhibur dan merasa nyaman untuk berkunjung di blog kita. Dan tentu saja inilah yang diharapkan bagi seorang web designer, trafic. Pemilihan jenis musik juga merupakan faktor yang sangat penting, pengunjung yang beraliran pop tentu saja merasa kurang nyaman apabila disajikan musik rock. Maka pilihan jenis musik yang akan ditampilkan sebaiknya jenis musik yang easy listening(enak diengar), salah satu contohnya adalah musik instrumental. Cara lainnya adalah dengan menampilkan daftar berbagai jenis aliran musik(playlist) sehingga pengunjung memperoleh hak untuk menentukan musik apa yang akan didengarnya. Untuk metode yang disebutkan terakhir akan dibahas dipostingan berikutnya.

Baiklah, tadi hanya sekedar intermezo. Kita akan mulai membahas topik postingan modifikasi web kali ini. Hasil dari postingan kali ini sebaiknya diuji dengan menggunakan dua browser yang berbeda, Firefox dan Internet Explorer. Bergantung dari subyek/kontent dari blog kita, menampilkan musik sebagai background dapat meningkatkan kepuasan pengunjung atau sebaliknya mengganggu ketenangan pengunjung. Bayangkan penderitaan pengunjung dengan bijaksana, jika hanya untuk mendapatkan perhatian dari rekan sekantor atau orant tua ketika musik secara otomatis dimainkan sebagai latar. Tak dapat dipungkiri, ukuran file musik yang besar dapat menyebabkan halaman lebih lambat untuk ditampilkan, disarankan untuk mengkompres lagu dan memberikan pilihan kepada pengunjung untuk memainkan atau menghentikan musik.

Tentu saja untuk memulainya kita harus meng-upload musik ke server(tempat penyimpanan file-file secara online/hosting). Kita dapat mempergunakan jasa hosting gratis Google Page Creator an Google Groups. Setelah kita meng-upload file musik, catat URL file tersebut. Alternatif lainnya, terdapat beberapa situs yang menawarkan download gratis file musik mereka. Kita dapat mencari menggunakan Google search box dengan memasukkan kata kunci seperti "download musik gratis" atau kata kunci artis. Kebanyakan situs-situs penyedia jasa download gratis akan mengarahkan kita ke file yang disimpan di server mereka. Jadi kita bisa mengopi URL file musik yang kita pilih.

Berikutnya kita akan menentukan bagaimana musik akan dimainkan

Ini adalah link teks. Pengunjung situs kita dapat mengakses musik melalui link tersebut.

<a href="URL file musik">Klik disini untuk mendengarkan musik</a>

Ganti tulisan berwarna biru dengan URL file musik. Kode ini dapat kita sisipkan ke postingan blog/web. Apabila kita ingin meletakkannya di template, copy kode tersebut di kode HTML template, untuk blog sisipkan kode tersebut di "add page elements-HTML/Javascript".

Console musik

Sebuah konsole player musik yang dilengkapi dengan pengatur volume, tombol on dan off, akan memberikan pengunjung pilihan bagaimana perlakuan mereka terhadap musik yang akan dimainkan. Kita dapat menyisipkan konsole musik ke postingan blog/web ataupun ke halaman template. Dengan kode dibawah sebuah musik tidak akan dimainkan sampai pengunjung meng-klik tombol play.

<embed autostart="false" height="40" loop="true" playcount="2" src="URL file musik" width="300"/></embed>

Yang akan kita lihat adalah seperti berikut:

(Ini hanyalah contoh bentuk tampilan) Form ini akan terlihat berbeda di Internet Explorer dan Firefox, bergantung dengan plugins yang terinstall.

Catat atribut-atribut berikut dan bagaimana kerja mereka di browser yang berbeda.

Sisipkan URL file musik ke kode
Lebar/width dari contoh adalah "300", apabila kita ingin meletakkannya ke template, lebarnya tidak boleh melebihi lebar template. Sebagai contoh apabila ingin diletakkan di sidebar dengan lebar 150px, maka lebar konsole sebaiknya 140px atau lebih kecil lagi.
Tinggi/height bergantung pada pilihan dan batasan ruang.
Atribut Autostart mempunyai dua pilihan. Apabila kita pilih "true", makan musik akan otomatis dimainkan pada saat halaman di load. Dan pilihan "false" adalah sebaliknya(disarankan untuk memilih "false" sehingga pilihan mendengarkan atau tidak mendengarkan musik bergantung pada pengunjung). Secara default settingan pada IE adalah "false" dan pada Firefox adalah "true", dan pada Firefox file berekstensi .wma dan .wav akan otomatis dimainkan walaupun disetting "false" pada autostart.
Atribut loop mengindikasikan kapan seharusnya musik berhenti ketika telah dimainkan secara keseluruhan. Atributnya secara umum "false" atau "true". Jika atribut "false" diterapkan maka musik akan berhenti apabila telah dimainkan satu kali secara keseluruhan. Dan bila atribut "true" diterapkan, musik akan secara otomatis diulang dan berlanjut sampai tombol stop di klik.
Untuk beberapa versi Netscape browser, atribut lain yang dapat bekerja adalah loop="n" dimana n adalah jumlah. Sebagai contoh bila n=2 maka musik akan dimainkan dua kali lalu berhenti. Jika kita ingin musik dimainkan sekali saja, kita dapat menghapus atribut playcount. Catat bahwa ini hanya dapat bekerja pada Internet Explorer

Musik yang Dimainkan Secara Otomatis

Untuk musik yang akan dimainkan ketika halaman web di load, kode akan tampil dalam document HTML web kita. Catat bahwa tidak ada kontrol bagi pengunjung untuk memilih mendengarkan atau tidak mendengarkan musik, tidak juga pilihan untuk mematikan musik. Untuk melakukannya maka pada kode HTML halaman web kita tambahkan kode berikut dibagian header (diatas ):

<embed autostart="true" height="0" loop="true" src="URL file musik" width="0"/>

Ingatlah untuk mengganti URL file musik ke kode diatas. Tidak terdapat gambar konsole dan pengunjung tidak dapat memilih untuk menghentikan musik. Gunakanlah pilihan ini dengan bijaksana.

Permasalahan yang sering muncul

File musik/lagu dapat berupa format yang tersedia pluginnyaa bagi browser untuk menjalankan file tersebut. Masalah sering terjadi pada format MP3 apabila dijalankan di Frefox, untuk mengecek ketersediaan plugin kita dapat langsung mengunjungi website Mozilla Firefox(atau klik disini)

Pada postingan berikutnya kita akan membahas bagaimana video dimainkan di blog/web dan juga bagaimana menambahkan musik player serta playlist sehingga pengunjung dapat menentukan pilihan musik yang akan dimainkan.

Tabel- Dasar HTML

2008-06-16T23:15:00.000-07:00

Dalam artikel kali ini, kita akan belajar bagaimana caranya membuat tabel di dalam posting web atau sebagai bagian dari desain website kita. Tutorial ini meliputi attribut HTML dan gaya-gaya yang dapat diterapkan pada tabel. Tabel menambahkan dimensi yang berbeda dalam menampilkan konten kita dan kadangkala kita mempunyai jadwal pertandingan sepakbola, menu, dan lagu, harga-harga barang, menuliskannya dalam tabel adalah lebih baik.

Kebanyakan dari kita akan menggunakan maupun melihat tabel yang menampilkan data atau informasi. Bila kalian menggunakan word, tentu saja kalian sudah mengenali istilah-istilah yang akan kita diskusikan disini:

"row" - unit garis horizontal

"column" - unit garis vertikal

"cell" - setiap unit atau data yang dipisahkan oleh garis

Mari kita ambil sebuah contoh untuk menggambarkan bagaimana kode tabel HTML bekerja dan dimana kita dapat menempatkannya.

Penempatan kode tabel

Untuk membuat tabel dalam postingan web/blog, mudahnya ketik didalam kode HTML(gambar dibawah) ketika kalian menulis postingan. Seperti dalam Blog, pilih mode "compose" ketika kita memasukkan kodenya.

Dasar Tabel

Tinggi:	2.2m
Berat:	185kg

Kode HTML untuk tabel diatas adalah:

<table width="200" border="1" cellspacing="2" cellpadding="2"><tbody> <tr> <td>Tinggi:</td> <td>2.2m</td> </tr> <tr> <td>Berat:</td> <td>185kg</td> </tr> </tbody> </table>

Catatan:

Harus dimulai dengan tag <table> dan ditutup dengan tag </table>
Garis dapat diatur menjadi "0" untuk membuat agar garis tidak terlihat
Cobalah untuk menentukan lebar garis. Hal ini meningkatkan kecepatan loading halaman. Ketika kalian melihat source code (masih ingat posting lalu?), alokasi lebar postingan blog terletak dibawah #main atau #main-wrapper dan lebar tabel kalian harus lebih kecil dari itu. Apabila kita tidak menetapkan lebar tabel, secara default lebarnya akan penuh.
Cellpadding adalah jumlah ruang putih antara isi dan garis. Apabila tidak ada cellpadding, kita akan mendapatkan teks sangat dekat dengan garis. Cellpadding Dipergunakan untuk menentukan jarak antara tiap cell
Setiap row dimulai dengan tag <tr> dan diakhiri dangan tag </tr>. Sebagai contoh kita, terdiri dari 2 row, yang berwarna biru adalah row 1 dan yang merah adalah row 2.
Isi setiap row diatur oleh tag <td> (tabel data) dan diakhiri oleh tag </td>. Isi tabel data tidaklah harus selalu teks, kita dapat menyisipkan gambar, video, link, dll. Sebagai contoh, kita akan menggati "Height" dengan code “<img src="Image URL" />” untuk menyisipkan gambar. Untuk lebih lengkapnya kita akan membahasnya di hyperlink dan image link

Format Teks

Kita dapat mengganti jenis huruf yang dipergunakan, ukuran huruf dan warna dan membuat tebal (bold) atau garis miring (italic) lengkapnya lihat diposting yang lalu disini. Kita juga dapat mengatur align left, right, atau center dari cell. Kita rasa metode ini mudah untuk diterapkan tanpa harus mempelajari kode style yang rumit.

Header tabel

S/No.	Inventory	Jml
1.	Buku	50
2.	Meja	22
3.	Lemari	30

Kode untuk tabel diatas adalah

<table border="1" cellpadding="1" cellspacing="0" width="200"><tbody> <tr> <th>S/No.</th> <th>Inventory</th> <th>Qty</th> </tr> <tr> <td>1.</td> <td>Buku</td> <td>50</td> </tr> <tr> <td>2.</td> <td>Meja</td> <td>22</td> </tr> <tr> <td>3.</td> <td>Lemari</td> <td>30</td> </tr> </tbody> </table>

Catatan:

Tag <th> digunakan untuk menandakan konten (isi) sebagai header dan teks akan otomasi tebal (bold) untuk membedakannya dengan isi yang lain.

Row Span and Column Span

Kadangkala, kalian ingin untuk menggabung (merge) beberapa cell, untuk itu cell span row atau column seperti ini:

Menu
Pembuka	Salad	Rp. 5000
Pembuka	Sup	Rp. 7000
Utama	Ikan	Rp. 10.000
	Ayam	Rp. 13.000
	Udang	Rp. 15.000

Kode untuk tabel diatas adalah:

<table border="1" cellpadding="0" cellspacing="0" width="300"><tbody>
<tr>
<td colspan="3">Menu</td>
</tr>
<tr>

<td rowspan="2">Pembuka</td>

<td>Salad</td>

<td>Rp. 5000 </td>

</tr>
<tr>

<td>Sup</td>

<td>Rp. 7000 </td>

</tr>>
<tr>

<td rowspan="3">Utama</td>

<td>Ikan</td>

<td>Rp. 10.000 </td>

</tr>
<tr>

<td>Ayam</td>

<td>Rp. 13.000 </td>

</tr>
<tr>

<td>Udang</td>

<td>Rp. 15.000 </td>

</tr>
</tbody>
</table>

Catatan:

Untuk row paling atas kita merge 3 kolom dan dinamakan "Menu". Pada tag <td>, kita sisipkan colspan="3" untuk menandakan bahwa kata tersebut me-span 3 kolom.
Pada kolom kiri, kata "Pembuka" me-span 2 row, kita sisipkan rowspan="2" kedalam tag <td>.
Sama saja, kata "Main" me-span 3 row, sisipkan rowspan="3" ke tag <td>.

Warna garis, Warna Latar, Gambar Latar

Mari kita sisipkan beberapa warna dalam tabel kita.

Musik	Video
Game

Kode untuk tabel diatas adalah:

<table border="1" bordercolor="#ff3366" cellpadding="0" cellspacing="0" width="200"> <tbody> <tr> <td bgcolor="#33ffcc">Musi</td> <td background="http://www.blogpulp.com/imagehost/images/381245101.jpg">Video</td> </tr> <tr> <td bgcolor="#ff66cc">Game</td> <td><img src="http://www.blogpulp.com/imagehost/images/236728310.jpg" /></td> </tr> </tbody> </table>

Catatan:

Kita telah menambahkan warna garis ke tabel. Coba lihat kembali kode warna untuk memilih warna lainnya.
Untuk menambahkan warna latar ke cell, sisipkan subfungsi "bgcolor"
Kalian dapat membuat latar gambar selain warna seperti pada cell "Video". Upload gambar ke image server dan sisipkan link gambar tersebut.
Pada cell kanan bawah, kita menyisipkan gambar, bukan teks, untuk menunjukkan bagaimana gambar dapat disisipkan ke dalam tabel.

Metode Alternatif

Kita akhiri tutorial kali ini dengan metode alternatif untuk menyisipkan tabel ke dalam posting. Seperti yang telah saya paparkan sebelumnya, bahwa menggunakan program bantuan seperti Dreamweaver atau frontpage ataupun word kita dapat membuat tabel lebih mudah, tanpa harus mengerti bahasa HTML yang cukup memusingkan. Atur formatnya, masukkan isi tabel dan bila selesai, copy tabel tersebut dan paste di posting kita (tentu saja kedalam kode HTML/compose pada blog).

Apabila kalian melihat psoting dalam HTML mode, kalian dapat melihat kode tabel sama seperti yang kita diskusikan diatas.

Tag Marquee

2008-06-12T00:15:00.000-07:00

Apa sich marquee itu? apakah sejenis makanan ringan? Bagaimana bentuknya?? Untuk Apa fungsinya ya???

Semakin banyak tanda tanya didalam hati kita semakin bingunglah diri kita. Mudah-mudahan tanda tanya tersebut akan semakin berkurang seiring dengan membaca tutorial kali ini. Dalam hal ini saya tidak akan terlalu panjang lebar menjelaskan detail-detail marquee dalam bahasa HTML tersebut. Loh kenapa begitu? jawabnya adalah karena saya lebih mengutamakan logikanya daripada mendoktrin.

Baiklah, sebagai pendahuluan saya akan memberikan definisi marquee. Marquee secara umum didefinisikan sebagai text berjalan(berbagai definisi ambigu marquee dari wikipedia disini), fungsi ini biasanya dipergunakan untuk menghemat tempat pada halaman web ataupun untuk mempercantik tampilan web. Sebagai contoh, apabila kita mempunyai link ke situs lain dengan jumlah yang banyak, katakanlah 200 link, tentu saja apabila seluruh link tersebut ditampilkan di halaman web makan sebagian besar halaman web kita akan berisi link dibandingkan postingannya sendiri dan tentu saja tidak semua pengunjung yang senang akan hal ini. Hal ini dapat diatasi dengan fungsi marquee, selain menghemat tempat juga mempercantik tampilan web.

Secara umum tag marquee seperti dibawah

<marquee>text yang akan di modifikasi </marquee>

Fungsi marquee ini tentu saja tidak dapat berdiri sendiri seperti diatas, fungsi ini membutuhkan tambahan/perintah penyokong. Analoginya seperti ini, apabila kita memerintah sebuah teks "ayo berjalan" maka teks tersebut akan berjalan sesuai dengan kebiasaannya yaitu dari kanan ke kiri. Teks juga punya kebiasaan loh. Dan hal ini menjadi masalah apabila kebiasaan/default teks tersbut tidak sesuai dengan yang kita inginkan.

Untuk itulah dibutuhkan penyokong fungsi marquee, seperti yang terangkum dibawah (beberapa penyokong yang sering dipergunakan):

Fungsi penyokong	Kegunaan	Isi
<marquee behavior=" ">	untuk mengatur tingkah teks, berjalan terus, berupa slide atau berlawanan	slide, scroll, altenate
<marquee bgcolor=" ">	untuk memberikan warna latar belakang marquee	warna web
<marquee direction=" ">	untuk menentukan arah pergerakan teks	up, left, down, right
<marquee onmouseover=" " onmouseout=" ">	untuk menentukan pengaruh teks pada saat kursor melewatinya	this.stop, this.start
<marquee scrolldelay=" ">	menentukan laju teks	1 - ~ atau 1% - ~ %
<marquee width=" " height=" ">	mengatur besar tempat yang disediakan untuk marquee	1 - ~ atau 1% - ~ %
<marquee style="text-align:center">	mengatur posisi teks	center, left, right, justify
<marquee style="border:medium black ">	mengatur garis kolom marquee beserta warnanya	medium, thin, thick, dashed, double, dotted, grove, solid, hidden, dll.

Penulisan marquee teks ini dapat disertakan beberapa fungsi penyokong sekaligus, antar fungsi penyokong dipisahkan dengan spasi dan isi penyokong diapit kutip ganda " ".

Beberapa contoh marquee text:

bila kita tulis :

<marquee width="200" height="100" bgcolor="#CCCCCC direction="up" scrolldelay="300%" style="text-align: center" style="border: dotted #33FF66>
testfungsimarqueedulu ah</marquee>

maka hasilnya seperti ini:

test

fungsi

marquee

dulu ah

Note: tanda pada bahasa HTML digunakan untuk menggati garis/row berikutnya

contoh lainnya

<marquee width="200" height="50" bgcolor="red" direction="left" behavior="alternate" scrolldelay="300%" style="text-align: center">
test fungsi marquee dulu ah</marquee>

Hasilnya seperti ini:

test

fungsi

marquee

dulu ah

Saya rasa tutorial marquee ini cukup disini dulu sebab saya sudah capek nich, he he he, nanti saya lanjutkan lagi dikesempatan berikutnya. Dan selamat mencoba, jangan ragu-ragu untuk memodifikasi web anda dengan mencoba mengkombinasikan fungsi-fungsi yang ada.Marquee ini juga dapat dipergunakan di Friendster, pada about me atau customize yang lainnya selama mendukung bahasa HTML.

warna web

2008-06-04T22:04:00.000-07:00

Warna html web (web color/web color) disini

#000000	#333333	#666666	#999999	#CCCCCC	#FFFFFF
© by RMS	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF
#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#3FF66	#33FF99	#33FFCC	#33FFFF
#660000	#660033	#660066	#660099	#6600CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#990000	#990033	#990066	#990099	#9900CC	#9900FF
#FF0000	#00FF00	#0000FF	#FFFF00	#00FFFF	#FF00FF

Tag Font

2008-06-04T20:37:00.000-07:00

Bahasa HTML terdiri dari banyak sekali fungsi, salah satunya fungsi/tag . Tag font biasanya dipergunakan untuk memberikan karakter khusus pada tulisan yang akan ditampilkan di web page.

Dalam tag kita dapat menentukan format tampilan huruf dalam document HTML seperti warna, ukuran, ataupun gaya penulisan.

Fungsi ini diletakkan sebelum kalimat yang akan dimodifikasi dan diakhiri dengan fungsi sebagai penutup.

Secara umum tag seperti dibawah:

bla . . . bla . . . bla . . .

Sebagai contoh:

jika kita ketik:

ini adalah contoh format tulisan

Hasilnya seperti ini

ini adalah contoh format tulisan

Untuk jenis huruf yang dipergunakan (face) dapat ditulis lebih dari satu dipisahkan dengan karakter"," dengan maksud

apabila huruf yang pertama tidak terdapat pada komputer pengunjung web, maka akan dipergunakan huruf yang kedua, dst.

Untuk ukuran huruf, rangenya 1-7, dan 3 adalah ukuran normal huruf. sedangkan warna huruf dapat diketikkan langsung tentunya dalam bahasa Inggris, atau dapat

diisi dengan code warna heksadesimal yang dapat dilihat disini.

Syarat Penulisan Fungsi ini sebagai berikut:

1. Untuk menyatakan banyak jenis tiap jenis dipisahkan dengan karakter "," contoh: courier, times, arial

2. ada tag pembuka dan tag penutup

3. Pernyataan subfungsi didalam tanda kuti ganda dan diawali dengan "="

4. antar subfungsi dipisahkan dengan spasi contoh

Beberapa subfungsi yang berkaitan dengan tag :

1. color, size, face seperti yang telah dijelaskan diatas

2. align=" " untuk mengatur posisi teks, dapat diisi center, left, right

3. dapat ditambahkan dengan untuk bold, untuk huruf, untuk garis bawah. Perhatikan dengan seksama penulisannya dibawah ini, urutan fungsi berserta tag penutupnya

contoh:

test saja

hasilnya seperti ini

test saja

Anda ingin mempercantik web page anda dengan tampilan seperti dibawah ini? tunggu posting berikutnya.

Mau

yang

seperti

ini?

Tunggu

posting

berikutnya

Postingan mengenai efek diatas disini

HTML sebagai dasar web

2008-06-04T20:29:00.000-07:00

Hypertext Markup Language atau yang sering kita kenal dengan HTML merupakan bahasa standar/dasar yang dipergunakan untuk menampilkan document web.
Beberapa hal yang dapat kita lakukan dengan HTML yaitu:

Mengontrol tampilan dari web page dan contentnya
Mempublikasikan document secara online sehingga bisa diakses dari seluruh dunia
Membuat online form yang bisa digunakan untuk menangani pendaftaran, transaksi secara online
menambahkan object-object seperti image, audio, video dalam document HTML

Begitu juga yang yang terjadi dengan situs situs yang ada di dunia maya seperti friendster,youtube, dll, dibuat dengan menggunakan bahasa HTML sebagai dasarnya. Namun, suatu web tidak serta-merta hanya membutuhkan bahasa HTML saja, bahasa-bahasa pemrograman lain seperti CSS, Javascript, dll juga dibutuhkan sehubungan dengan keterbatasan-keterbatasan suatu bahasa web.

Untuk membuat suatu file HTML, dapat dipergunakan program HTML editor antara lain notepad yang merupakan bawaan windows(tentu saja harus mengerti bahasa HTML), bagi anda yang tidak terlalu/tidak mengerti sama sekali bahasa HTML program bantuan seperti macromedia dreamweaver, MS Frontpage, dan masih banyak lagi program lainnya dapat dipergunakan.

Suatu Web page terdiri dari elemen HTML sebagai berikut:

<html>

<head>

<title>judul web page</title>

</head>

<body>

isi web page

</body>

</html>

Demikianlah pengenalan Bahasa HTML secara umum, kita dapat melihat code penyusun suatu web page, klik "View - source/page source" pada tab browser anda.

Pada Postingan berikutnya saya akan mencoba menjelaskan beberapa fungsi HTML untuk mempercantik tampilan web anda, dapat juga dipergunakan pada Friendster. Untuk mempelajari lebih dalam mengenai fungsi-fungsi bahasa HTML, anda dapat surfing di internet karena sudah banyak sekali tutorial mengenai bahasa HTML ini baik yang berbahasa Indonesia maupun bahasa Inggris.