Rabu, 27 Mei 2009

Tutorial HTML

Bagi kawan-kawan yang sudah pernah berkunjung ke blog ini, mungkin tahu bahwa hari ini blog ku ada banyak perubahan, yo'i.. yang tadinya sangat anti gambar sekarang tiba-tiba jadi lautan gambar, coba saja lirik kebawah, tadinya banner yang terpasang hanya beberapa buah saja tapi sekarang jadi ngebaris kaya tentara mau berangkat perang.
Yups..tadinya cuma iseng-iseng masukin banner dari teman-teman blog lain, eh keterusan.. ya udah sekarang semua gambar dari feedburner.com aku masukin semua..sekalian biar rame..

Dan mulai hari ini topik bahsan pun akan ada sedikit perubahan, yakni ga cuma ngebahas blog tutorial doank tapi ngebahas juga soal HTML, ini saya lakukan karena ada diantara sahabat saya yang hoby obrak-abrik template blognya tapi masih menemui kesulitan karena masih bingung soal perintah-perintah HTML, ya ngga jauhlah dari saya yang setiap edit HTMl musti inga inga dulu perintah HTML nya ma'lum baru belajar jadi belum pada hapal.

Baiklah sobat, kita kembali ke (laptop) bahasan utama artikel ini yaitu mengenai HTML.
Apa itu HTML ?

HTML (Hypertext Markup Language)adalah merupakan suatu standar bahasa program yang di gunakan untuk menampilkan dokumen-dokumen web. (itu menurut saya bro, kalo salah ya mohon di maafkan).

# Mengenal Tag HTML


Perintah-perintah dalam HTML biasa di sebut dengan TAG. TAG ini kebanyakan mempunyai pasangan, yakni TAG pembuka dan penutup. Misal <b>...</b>, <i>...</i> dan lain sebagainya, dan TAG yang mempunyai pasangan ini juga bersifat Override yakni dapat menimpa fungsi TAG sebelumnya. Contoh : sebuah teks yang sudah di buat miring oleh tag <i> ... </i>, dapat di timpa oleh tag <b> ... </b> sehingga akan melahirkan dua hasil perintah yang berbeda sekaligus yakni kombinasi hurup miring dan hurup tebal, contoh :

ini hanya <b><i>contoh </i></b> saja sobat

yang akan tampil di browser adalah :


ini hanya contoh saja sobat


di samping TAG yang mempunyai pasangan, ada juga tag yang tidak memerlukan pasangan, misal TAG <hr />, ataupun <input>

Sebuah Tag tidaklah sensitif terhadap Case (hurup besar atau kecil), jadi mau di tulis hurup besar ataupun huruf kecil akan menghasilkan fungsi yang sama. Sebagai contoh : fungsi Tag <b>....</b> akan sama dengan Tag <b>....</b>.

# Struktur dokumen HTML


Sebuah dokumen HTML terbagi kedalam tiga bagian utama, yakni HTML, HEAD, serta BODY.

HTML

Sebuah dokumen HTML haruslah diawali dengan tag dan di tutup dengan, Tag ini adalah sarana untuk memberikan informasi kepada browser bahwa apa-apa yang di tulis di dalamnya merupakan sebuah dokumen HTML.

HEAD

Bagian header dari sebuah dokumen HTML diawali oleh tag dan di tutup oleh tag , dan di dalam header di isi pula dengan tag title yakni judul dari dokumen, tag title ini di tulis dengan tag pembuka <title> dan di tutup oleh tag </title>, contoh : title dari blog ini adalah Blog Tutorial jadi untuk tittle nya di tulis seperti ini <title> Blog Tutorial </title>, akan tetapi di blogger.com untuk penulisan title tidak harus di tulis langsung pada tag title karena sudah di otomatisasi, alamatnya yaitu <$BlogPageTitle$>. Dalam pengisian title ini seyogya nya jangan asal-asalan, karena title merupakan hal pertama yang di lihat oleh search engine.

Di dalam Header pun di isi pula dengan tag META, tag META ditulis dengan tag <meta>, tag META ini biasanya memuat informasi mengenai dokumen HTML. dengan tag META kita bisa menentukan keyword, content,refresh, dan lainnya sebagainya. Khusus tentang tag META keyword akan di bahas lebih lanjut pada postingan selanjutnya.

BODY

Semua dokumen HTML yang di simpan di dalam BODY semisal teks, image, link, dan lain sebagainya akan di tampilakan dan bisa di lihat di dalam browser.

Ok sahabat, mungkin pengenalan pertama mengenai HTML di cukupkan sekian dulu dan akan di teruskan pada postingan-postingan selanjutnya.

Baca selengkapnya »»

Panduan membuat Blog di Blogspot

Mungkin ada diantara anda-anda yang belum tahu tentang blog dan bertanya-tanya tentang blog, maka saya akan mengulas sedikit tentang blog menurut versi saya sendiri.

1. Apa itu Blog ?

Blog ( singkatan dari Web log) adalah situs yang sifatnya lebih pribadi, yaitu lebih berat kepada penggambaran dari si pembuat blog itu sendiri.

Blog dibuat oleh para desainer penyedia blog agar bekerja secara otomatis dan mudah untuk dioperasikan , jadi bagi kita-kita yang masih bingung dengan bahasa pemrograman untuk membuat sebuah website tidak jadi persoalan. Apabila anda sudah bisa membuat sebuah account email di internet, maka dalam membuat blog pun saya yakin anda bisa.೨Isilah Alamat Email dengan alamat email anda (tentunya yang valid)

2. Cara membuat blog

Seperti halnya e-mail, dalam membuat blog pun kita harus mempunyai sebuah account terlebih dahulu, oleh karena itu silahkan daftarkan diri anda terlebih dahulu di free blog provider (penyedia hosting/domain blog gratis). Free blog provider sangatlah banyak terdapat di internet dan beberapa yang populer saat ini adalah http://www.blogger.com, http://www.wordpress.com serta http://blogsome.com.

Dalam kesempatan kali ini saya akan mengulas tentang cara pembuatan blog di http://www.blogger.com, Silahkan anda klik gambar dibawah untuk mendaftar.


Setelah anda berada pada situs blogger.com, anda akan melihat gambar seperti gambar di atas. Silahkan lakukan langkah-langkah berikut ini :

  1. Klik tanda anak panah yang bertuliskan " CIPTAKAN BLOG ANDA "
  2. Isilah Alamat Email dengan alamat email anda (tentunya yang valid)
  3. Isikan kembali alamat email anda tadi pada form Ketik ulang alamat email
  4. Tuliskan password yang anda inginkan pada form Masukkan sebuah password
  5. Isikan kembali password anda tadi pada form Ketik ulang sandi (password)
  6. Isi Nama Tampilan dengan nama yang ingin anda tampilkan
  7. Tulis tulisan yang tertera pada form Verifikasi Kata. Beri tanda tik/cek pada kotak di pinggir tulisan Saya menerima Persyaratan dan Layanan.
  8. Klik gambar anak panah yang bertuliskan "LANJUTKAN"
  9. Tuliskan judul blog yang anda inginkan (nanti bisa di rubah lagi) pada form Judul Blog
  10. Tulis nama situs anda pada form Alamat Blog (URL)
  11. Tulislah tulisan verifikasi yang ditampilkan pada form Verifikasi kata, jika sudah selesai klik gambar panah yang bertuliskan "LANJUTKAN".
  12. Pilihlah gambar (template) yang anda inginkan (nanti bisa di rubah lagi), kemudian klik gambar anak panah yang bertuliskan "LANJUTKAN"
  13. Setelah keluar tulisan "Blog Anda telah di iptakan". Klik gambar panah bertuliskan "MULAI POSTING". Silahkan anda tuliskan semau anda, jika sudah selesai klik tombol "MEMPUBLISKAN POSTING".

3. Isi ( Content ) blog :

Bagi para pemula, biasanya mereka bingung setelah daftar membuat blog apa yang harus di isi( diposting ) dalam sebuah blog. Isi ( content ) dari sebuah blog tentu saja terserah kepadasi pemilik blog itu sendiri, apakah mau di isi puisi, perjalan hidup, teknik, ataupun apa saja. Nah di sini saya menyarankan, isilah blog anda tersebut dengan minat ataupun hoby serta keahlian anda sendiri, karena tentu saja di luar sana banyak sekali orang yang tentunya sama minat dan hoby nya dengan anda, sehingga mereka akan tertarik untuk membaca tulisan-tulisan anda. copy by kang Rohman

Baca selengkapnya »»

Cara Membuat Kotak Komentar Blogger di Bawah Postingan

Sebelumhanya hanya berupa link "Post a Comment", maka yang sekarang lain, sekarang kotak komentarnya langsung muncul persis dibawah postingan (seperti kotak komentar dibawah ini). Dengan adanya kotak komentar yang seperti ini, akupun rela mengganti kotak komentarku haloscan tempo hari dengan comentbox yang ini. Walaupun kotak komentar ini masih dalam draft blog tapi sudah bisa dinikmati.
Inilah cara membuat kotak komentar blogger yang berada dibawah postingan.
Login ke http://draft.blogger.com, Ingat yang http://draft.blogger.com bukan blogger.com.

  • Trus ke menu Setting-->Comments. Kemudian ganti "Comment Form Placement" menjadi "Embedded below post" (lihat gambar dibawah)


  • Kemudian klik "Save Setting"

    Sekarang coba kamu lihat blogmu dan coba di klik salah satu postinganmu kemudian lihat hasilnya, apakah sudah ada kotak komentarnya yg dibawah postingan atau belum. kalau sudah berarti langkahnya cukup disini. Kalau belum ikuti langkah berikut ini.
    (ini karena kode HTML tiap2 template itu berbeda. Untuk template default dari blogger yang baru, kode HTMLnya sudah berubah, sedangkan template yg lama atau ambil dari luar ada yg belum dan ada juga yg sudah).

  • Selanjutnya pergi ke menu "Layout-->Edit HTML"

  • Beri tanda centang kotak "Expand widget templates".

  • Trus cari kode berikut ini :

    <p class='comment-footer'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <data:postCommentMsg/></a>
    </p>
    </b:if>


  • Kemudian ganti kode tersebut dengan kode dibawah ini:

    <p class='comment-footer'>
    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    <b:else/> <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl'> <expr:onclick='data:post.addCommentOnclick'>
    <data:postCommentMsg/></a>
    </b:if> </b:if> </p> </b:if>


    Lihat deh hasilnya, coba kamu klik salah satu postingan kamu, maka dibawahnya akan muncul kotak komentar seperti punyaku ini (Bagi yang berhasil).

    referensi: analogikan.web.id
  • Baca selengkapnya »»

    Pasang Jam di Sidebar

    Agar blog anda tampak cantik dan menarik untuk di lihat, maka anda bisa memasang beberapa aksesori blog, salah satunya adalah dengan cara memasang jam. Jam ini bisa anda dapatkan secara gratis pada situs http://www.clocklink.com. Untuk melihat contoh blog yang memasang jam blog silahkan lihat di sini.

    Dan bagi anda yang ingin blognya di pasang jam blog juga, silahkan ikuti langkah-langkah berikut :

    1. Silahkan klik link berikut --> http://www.clocklink.com
    2. Jika sudah berada pada situs tersebut, silahkan klik tulisan Want a clock on your Website ?
    3. Silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal, Animation, dll
    4. Jika di rasa sudah menemukan model jam yang anda sukai, klik tulisan View HTML tag yang berada di bawah jam yang anda sukai tadi
    5. Klik tombol yang bertuliskan Accept
    6. Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk indonesia bagian barat pilih GMT +7:00
    7. Set ukuran jam yang anda sukai di samping tulisan size
    8. Copy kode HTML yang di berikan pada notepad
    9. Paste kode HTML yang di copy tadi pada tempat yang anda inginkan
    10. Selesai


    Karena kode jam blog ini adalah merupakan suatu kode HTML, maka bagi anda yang masih bingung cara menempatkan kode HTML pada template blog, silahkan baca kembali postingan saya terdahulu di sini

    Selamat mencoba.

    Baca selengkapnya »»

    Cara Pasang Statistik dan Tracker

    Salah satu blog tool sekaligus sebagai aksesori blog yang sering di gunakan oleh para blogger yakni memasang statistik dan tracker. Dengan adanya statistik blog, maka kita yang mpunya blog ataupun yang berkunjung pun dapat mengetahui berapa pengunjungkah yang pernah berkunjung ke blog kita. selain itu juga bisa sekaligus sebagai tracker yakni kita bisa mengetahui para pengunjung blog kita datang dari mana, apakah dari search engine, blog lain ataupun darimana saja kita dapat mengetahuinya.
    Sekarang bagaimana caranya kita membuat statistik tersebut? cara yang mudah yaitu kita menggunakan situs penyedia statistik. Di internet banyak sekali situs penyedia statistik gratis, sebagai contoh adalah situs http://www.sitemeter.com. Berikut adalah contoh tool yang bisa kita pilih :



    Untuk mendapatkannya silahkan ikuti langkah-langkah berikut :
    1. Silahkan kunjungi situs http://www.sitemeter.com.
    2. Klik tulisan Sign Up untuk melakukan pendaftaran
    3. Klik tombol bertuliskan Next
    4. Klik tombol Next lagi
    5. Isi semua tabel yang ada lalu klik tombol Next lagi
    6. Isi lagi tabel yang ada, lalu klik tombol Next lagi
    7. Klik tombol Next lagi
    8. Klik tombol Next lagi ( cape dech next..next tyuss )
    9. Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan buka email yg anda berikan
    10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda untuk login ke sitemeter.com
    11. Silahkan login dengan id anda
    12. Bila sudah login, Klik menu Manager
    13. Klik Menu Meter Style untuk memilih gaya dari site meter anda
    14. Pilih style yang anda sukai, kemudian klik tombol Select
    15. Klik menu HTML Code
    16. Klik tulisan Adding site Meter to a Blogger.com Site
    17. Copy semua kode HTML yang di berikan lalu paste pada Notepad
    18. Klik menu Logout untuk keluar dari situs tersebut
    19. Selesai, tinggal memasukan kode yang kita dapat ke dalam blog kita


    Sekarang tugas kita adalah memasukan kode yang sudah kita dapat ke dalam blog, ikuti langkah- langkah berikut :

    khusus blog dengan template klasik :
    1. Sign in di blogger dengan id anda
    2. Klik menu TEMPLATE
    3. Klik Edit HTML
    4. Klik Edit (yang ada pada bar menu browser anda)
    5. Klik Find (on this page)... ⇒ untuk mempercepat pencarian
    6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah blogger (karena dekat dengan tombol blogger) klik Find
    7. Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol Preview untuk melihat perubahan yang terjadi
    8. Jika sudah cocok dengan perubahan tadi, Klik Save Template Changes. Selesai


    Sedikit tambahan, bila anda ingin site meter posisinya berada di tengah-tengah, tinggal tambah kode di bawah ini

    <center> ...kode site meter... </center>



    Untuk blog dengan Template baru :
    1. Login di blogger dengan ID anda
    2. Klik menu layout
    3. Klik Elemen Halaman
    4. Klik Tambahkan sebuah Elemen Halaman
    5. Klik TAMBAHKAN KE BLOG pada menu HTML/JavaScript
    6. Tulis Judul site meter anda pada isian di sebelah form judul (bila ingin ada keterangan. kalau tidak, ya kosongkan saja)
    7. Copy & paste kode Site meter pada kolom isian
    8. Klik tombol Simpan Perubahan
    9. Klik Elemen yang baru anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di drag & drop)
    10. Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan
    11. Bila sudah cocok dengan perubahan tadi, klik tombol SIMPAN
    12. Selesai


    Untuk fungsi site meter sebagai tracker, silahkan anda login ke sitemeter.com trus ya acak-acak deh isinya pasti ketemu....


    Selamat mencoba N moga misinya berhasil :d:D:…..

    Baca selengkapnya »»

    Cara Membuat Background Flasdisk

    Memberi background gambar pada flash disk dan folder Windows Explorer anda
    (For full text with comments please click on the title)




    Pengen memberi gambar background untuk flashdisk maupun folder-folder dalam windows explorer anda? Mungkin 2 cara di bawah ini bisa anda gunakan untuk keperluan tersebut.

    Berikut ini ada script yang bisa anda gunakan untuk memberi background pada windows explorer anda:

    [extshellfolderviews]
    {BE098140-A513-11D0-A3A4-00C04FD706EC} = {BE098140-A513-11D0-A3A4-00C04FD706EC}
    [{BE098140-A513-11D0-A3A4-00C04FD706EC}]
    Atrributes=1
    Iconarea_image=namafile.jpg
    Iconarea_text=01x012c071d
    [.shellclassinfo]
    Confirmfileop=0

    Langkah-langkahnya:
    1. Copy script di atas dan paste di Notepad
    2. Ubah namafile.jpg dalam script di atas dengan nama file gambar yang ingin anda jadikan background.
    2. Simpan dengan nama file eksistensi Desktop.ini di folder yang ingin anda beri background. Jangan lupa letakkan pula gambar yang anda jadikan background dalam folder yang sama!.

    Sudah silahkan refresh dan lihat hasilnya!




    Kalau nggak pengen ribet Download saja
    DISINI, tinggal di extract di folder yang ingin ubah gambar backgroundnya.

    Sebaiknya gunakan background yang cerah, karena font default dari windows explorer berwarna hitam, supaya tulisannya tetap kelihatan. Anda juga bisa menggunakan software Backgound maker maupun folder tweker untuk mengubah font default windows yang berwarna hitam menjadi warna lain.

    Untuk beberapa komputer cara di atas tidak berfungsi, entah kenapa saya sendiri kurang tahu sebabnya. Di komputer saya pun cara di atas tidak bisa, tapi di komputer teman saya dapat berfungsi dengan baik.

    Tapi jangan berkecil hati dulu jika ternyata cara pertama di atas tidak bisa berjalan di komputer anda , masih ada solusi lain yakni dengan menggunakan software Background Maker. yang Bisa anda Download
    DISINI



    Cara Penggunaannya:
    1. Taruh software Background Maker di folder yang ingin anda beri background
    2. Jalankan Software Backgound Maker kemudian tekan next >
    3. customize This Folder, pada Customize--> centang semuanya (3 pilihan)
    4. Change Folder Template biarkan kosong trus Next > lagi
    5. Modify Background and Filename Appereance
    pilih Browse cari file gambar yang ingin anda gunakan untuk background. atau anda bisa langsung memilih menggunakan gambar background dari beberapa pilihan yang telah disediakan. tentukan juga Warna Text (kalau backgound anda gelap, ubah warna text dengan yang cerah supaya tulisannya kelihatan)
    6. Add Folder comment biarkan kosong lalu klik Next >
    7. Klik Finish

    Sudah... Silahkan Refresh dan lihat hasilnya! kalau tidak sesuai anda bisa mengulangi lagi langkah-langkah diatas, hingga menemukan background yang lebih sesuai dengan keinginan anda. Selamat Bereksperimen!

    Baca selengkapnya »»

    Cara Membuat Blog

    Penulis catatan harian di internet atau halaman web. Blogger ini merupakan pengguna internet yang rajin mengisi weblog. Salah satu kiprah Blogger yang signifikan di tahun 2004 adalah keterlibatan mereka dalam kampanye calon presiden Amerika Serikat. Kubu John Kerry bahkan mendirikan weblog yang mencatat kegiatan kampanye sehari-hari calon presiden dari Partai Demokrat itu. Kalau nggak pengen ribet Download saja
    DISINI

    Dalam konvensi nasional kedua kubu, blogger juga mendapatkan porsi khusus. Undangan bagi para blogger untuk meliput gelaran tersebut sempat membuat iri jurnalis konvensional.

    Adam L. Penenberg, kolumnis Wired, menyebut masa depan jurnalisme berada di tangan para blogger. Ia menyebut sekarang adalah saatnya bagi blogger untuk mencari berita sendiri dan bukan hanya mengomentari berita yang ada.

    Hal itu terjadi dalam bencana gempa dan tsunami yang melanda Asia di penghujung 2004. Lusinan blogger di Srilanka, Thailand dan India memberikan laporan pandangan mata mereka tentang bencana yang melanda.

    Baca selengkapnya »»

    BELAJAR HTML

    Link adalah salah satu komponen penting dalam blog atau website kita. Kali ini kita akan belajar membuat sebuah link yang sederhana berupa text link. Untuk membuatnya tidaklah sulit,yang terpenting adalah tag harus lengkap dan url-nya harus benar agar link tersebut bisa berfungsi normal.
    Bentuk HTML sebuah text link adalah seperti berikut ini

    <a href="url tujuan">text tampilan link</a>


    Bisa kita lihat dalam code HTML di atas terdapat 2 komponen link(yang berwarna biru dan merah) yaitu url tujuan dan text tampilan link.
    Url tujuan adalah url halaman yang akan ditampilkan setelah link tersebut diklik,url ini bisa kita dapatkan dengan cara membuka halaman yang dimaksud dan lihat di kolom web browser,maka address tersebut adalah url halaman yang dimaksud.
    Kita tinggal meng-copy url itu untuk membuat sebuah link yang akan menuju ke halaman tersebut jika diklik. Jangan lupa url harus berbentuk standar yaitu http://....
    Sedangkan text tampilan link adalah tampilan yang memperlihatkan link tersebut,bisa berupa text atau kata2,simbol,huruf dsb.
    Untuk membuat sebuah text link kita hanya perlu mengganti 2 komponen tersebut.
    Cukup mudah sekali!!
    Sekarang mari kita coba terapkan! Kita akan buat sebuah link untuk blog ini.
    Url blog ini adalah
    http://quicklearninghtml.blogspot.com
    dengan text tampilannya adalah BELAJAR HTML!!
    Maka bentuk HTML-nya menjadi seperti berikut ini

    <a href="http://mantannarapidana.blogspot.com/2009/05/belajar-html.html">BELAJAR HTML!!</a>

    Jika code tersebut kita gunakan pada blog atau website kita maka akan terlihat seperti di bawah ini
    BELAJAR HTML!!

    Mudah bukan??
    Selamat mencoba!!
    Jangan lupa setelah jadi coba kita klik sendiri untuk memastikan bahwa link tersebut sudah berfungsi normal seperti yang kita harapkan.

    Baca selengkapnya »»