Langsung ke konten utama

Kode HTML Wajib Bagi Blogger

Basic HTMLBagi Anda yang sudah lama berkecimpung di dunia online (web/blog) tentu sudah tahu dan akrap dengan yang namanya HTML. Tapi bagaimana dengan yang masih NEWBI ? Singkatnya HTML (Hypertext Markup Language) adalah merupakan suatu standar bahasa program yang di gunakan untuk menampilkan dokumen-dokumen web (salah satu bahasa pemograman untuk membuat website/blog).

Saya tidak akan membahas detail tentang HTML yang ngejlimet itu, bukan karena saya tidak mau tapi karena saya memang bukan ahlinya, hehehe...:-D. Yang ingin saya sharing kali ini adalah kode-kode/tag-tag HTML yang wajib menurut saya kita ketahui bila terjun ke dunia online seperti blog, website, dan bisnis online. terutama bagi pengguna blogspot seperti saya, upss.. ketauan dech kalau masih make gratisan, hehehe...LOL.

Kenapa blogspot? karena blogspot miskin plugin, tools, dan feature sehingga terkadang kita harus mengutak-atik kode HTML-nya sendiri. Lain dengan wordpress yang kaya dengan plugin dan feature, kita tinggal klak klik and drag langsung beres, tanpa harus banyak bergumul dengan kode-kode HTML.
Pertama kali terjun ke dunia online, web dan blog, saya sempat ragu dan bertanya, apa saya harus menguasai kode2/tag-tag HTML baru bisa berhasil di dunia online?, baru lihat kode-kode aja udah bikin migren, apalagi suruh bikin template sendiri. Tapi dengan seiring waktu saya pun mulai mengerti dan bisa memilah-milah mana kode2 HTMLyang perlu saya ketahui dan mana yang ngak. Ini tak lepas dari tujuan utama saya terjun ke dunia online, yaitu bisnis online (internet marketing) atau bahasa parungnya Make Money From Blog, hehehe.... kayak Tukul aja.

Kayaknya pengantarnya kepanjangan ya...? ya udah deh... kita langsung aja ke inti pembahasan.

Membuat Anchor Link

Anchor link adalah sebuah kata atau pharase kata yang mengandung link URL, apabila diklik akan menuju ke suatu alamat URL tertentu.

Contoh :

Kata TONGKONAN ingin diarahkan ke alamat URL "http://tongkonanku.blogspot.com" maka kode HTML-nya adalah :

<a href="http://tongkonanku.blogspot.com">TONGKONAN</a>

Maka jadinya akan seperti ini TONGKONAN.

Dari kode HTML di atas bisa kita tambahkan kode HTML lain (perintah lain), misalnya supaya apabila anchor linknya diklik maka alamat URL yang di tuju akan terbuka di window baru (new window) atau tab baru (new tab). Kode yang ditambahkan adalah target="new" atau target="_blank" terserah mau menggunakan yang mana, fungsinya sama saja. Contoh penerapannya sbb :

<a href="http://tongkonanku.blogspot.com" target="_blank">TONGKONAN</a>

maka hasilnya akan akan seperti ini TONGKONAN, silahkan klik untuk melihat efeknya.

kita juga bisa menambahkan perintah title="isi keterangan" supaya saat kursor menyentuh anchor link, akan muncul tulisan sesuai dengan yang anda inginkan.

<a title="Personal Blog" href="http://tongkonanku.blogspot.com">TONGKONAN</a>

hasilnya seperti ini TONGKONAN, arahkan kursor anda ke kata tongkonan untuk melihat efeknya.


Memunculkan dan mengarahkan Image/Gambar ke alamat URL tertentu

Kadang kala ada sesuatu yang tidak bisa kta jelaskan dengan bahasa tulisan maupun lisan, dan itu hanya bisa dijelaskan dengan bahasa visual melalui gambar/image, flash (animasi) atau video (film). Maka dari itu Kode atau perintah HTML untuk menampilkan dan mengarahkan gambar/image sangat perlu kita kuasai.

Memunculkan Image/Gambar

Kode HTML yang digunakan untuk memunculkan gambar adalah <img src="alamat URL image/gambar"> . Kita juga bisa menambahkan perintah/kode untuk mengatur atau menentukan ukuran gambar/image height="131" dan width="129" ganti angka dalam tanda petik sesuai ukuran gambar yang anda inginkan. Jika perintah height dan width tidak ditambahkan maka gambar akan muncul sesuai ukuran aslinya.

Contoh :

Saya ingin menampil sebuah image yang beralamat di http://img144.imageshack.us/img144/2949/spyenginecopyyj4.jpg dengan lebar=180 dan tinggi=120 (satuan ukuran mengunakan pixel) maka kode HTML-nya adalah :

<img src="http://img144.imageshack.us/img144/2949/spyenginecopyyj4.jpg" height="155" width="217">
Maka Hasilnya seperti ini :
Spyder Man











Kode lain yang bisa kita tambahkan (hight recomended) yaitu ALT="keteragan gambar/keyword"

<img alt="Spyder Man" src="http://feriyunus.page.google.com/ganteng.jpg" height="155" width="217">

Dengan menambahkan kode ini maka apabila ada orang yang mencari image/gambar di mesin pencari (search engine) dengan kata kunci yang berhubungan dengan keteranagan gambar/image pada blog kita, maka gambar/image di blog kita akan muncul di halaman hasil pencarian search engine. Keuntungannya adalah apabila gambar tersebut diklik maka orang tersebut akan langsung diarahkan ke blog/website kita (ini merupakan salah satu teknik SEO).


Mengarahkan Image ke alamat URL tertentu

Image/gambar juga bisa kita arahkan ke suatu alamat URL tertentu. Jadi ketika gambar tersebut diklik, maka kita akan dibawa ke alamat URL yang telah kita tentukan. Caranya sangat mudah, tinggal menggabungkan kode2 HTML yang telah kita bahas di atas.

Contoh :

Gambar/Image dengan yang beralamat di http://img150.imageshack.us/img150/8258/parisve2.jpg ingin saya arahkan ke htt://tongkonanku.blogpot.com maka kode HTML-nya adalah :

<a href="http://img150.imageshack.us/img150/8258/parisve2.jpg"><img src="htt://feriyunus.page.google.com/ganteng.jpg"></a>

Perintah2 lain yang telah kita bahas sebelumnya di atas, juga bisa kita tambahkan sehingga jadinya seperti ini :

<a title="TONGKONAN" href="htt://tongkonanku.blogspot.com" target="new"><img alt="Pantai ParangTritis Yogyakarta" src="htt://feriyunus.page.google.com/ganteng.jpg" height="155" widht="217"></a>

Maka hasilnya seperti ini :
Pantai Parangtritis Yogyakarta
Sebenarnya masih ada beberapa Kode HTML lagi yang Wajib kita ketahui/kuasai bila kita terjun ke dunia web atau blog. seperti membuat teks tebal, miring, bergaris bawah, kemudian menempatkan gambar di sebelah kiri, tengah dan kanan. Tapi karena berhubung saya udah capek dan ngantuk, maka cukup sekian dulu kali ye..., udah ngantuk banget nich.

Untuk kode HTML lainnya, kita bahas di lain waktu aja ya...;-(

Postingan populer dari blog ini

Tempat Download Full Video Hasil Pertandingan Sepakbola

Selain suka dengan dunia gadget dan internet, saya juga termasuk pecinta sepakbola. Karena itu pada postingan kali ini, saya akan berbagi informasi tempat download full video hasil pertandingan sepakbola . Jadi bukan sekedar video highlights pertandingan yang cuma memperlihatkan momen-momen penting saja, seperti peluang dan gol. Kalau itu sih banyak di YouTube .

Tools Tracking Website dan Blog

Tracking Blog/Web merupakan suatu kegiatan yang dilakukan untuk mencari tahu (memonitor) segala kegiatan yang terjadi pada suatu blog atau website . Data-data apa saja yang dapat kita peroleh dari hasil tracking tersebut? dan apa manfaatnya? semuanya telah dibahas mas welly Mulia di sini . Men-track pengunjung artinya mencari tahu informasi dan data seperti : Bagaimana pengunjung menemukan blog/website anda Berapa banyak pengunjung yang datang ke blog/website anda setiap hari Berapa lama mereka browsing di blog/website anda Halaman mana saja yang mereka kunjungi ketika ada di blog/website anda Ada banyak tools tracker yang dapat kita gunakan untuk men-track blog atau website kita, ada yang berbayar ada pila yang gratis. Selama ini saya menggunakan lebih dari satu tools tracker untuk men- track atau memonitor blog saya. Beberapa tools tracker yang ada sekarang yaitu : Google Analytic (milik google) Extrime Tracking (sudah tidak menerima blog dari Indonesia) SiteMe

Tergoda Harga Murah Modem Smartfren AC682 (Modem CDMA)

Beberapa minggu yang lalu saya berniat membeli modem smartfren AC682 . Saya tergoda dengan harga modem-nya yang murah + gratis koneksi internet unlimited dengan speed download up to  3,1 Mbps, selama sebulan . Selain tergoda dengan harganya yang murah dan free access internet cepat selama satu bulan, saya juga memang lagi pengen nyobain akses internet berbasis CDMA. Karena selama hampir tiga tahun berlangganan internet, saya selalu menggunakan akses internet berbasis GSM, mulai dari Indosat M2 (IM2) , telkomflash, dan internet tri (3), menggunakan modem Sierra Wireless AirCard 881U yang ukurannya sebesar handphone. Tapi jangan salah.. ketangguhannya sebesar ukuran fisiknya, cooy…!  :) Mau tahu tips memilih kartu yang paling bagus dan murah untuk internetan? Read this: Kartu Paling Bagus dan Murah untuk Internetan Kembali ke modem smartfren AC682 …!!! Karena harganya yang murah, ditambah gratis internetan selama sebulan, Modem Smartfren AC682 laris manis dipasaran.