Wednesday, May 23, 2007

User Online Status


english  English Version



How many people is online at your blog? you know that or don't?
If you don't know how many people is online at your blog, you can use
a free tracker to know it. That is much site provide this service. Once
of them is www.histats.com. If you
use them tool, you can know how many people online at your blog, how
many people was visited to your blog, and any function. This is
once of example :



histat.jpg




How to get it? please following the steps :




  1. Please visit www.histats.com.




  2. If you was on the histats site, click Register at the top tab.




  3. Content the form with your information, such as email, password, your blog url and etc.




  4. Click Continue button.




  5. Choose the style of histats counter, click Choose a counter from this category.




  6. Please mark the radio button beside the counter style you wanted.




  7. Click Continue button at the bottom of page.




  8. Click at the drop down menu, choose the category which to display at your counter. the choice is : visitor today,
    Page views today, User online, Total visitors, and total page views. Choose empty
    if you want not to display them.




  9. Click Continue button.




  10. Wait a moment, your counter is updating.




  11. Until the process is done, copy your counter code and paste to the Notepad or
    other text editor. Save into your computer.




  12. Logout and close your internet browser.




  13. Done. Now you has have a counter code to add at your blog.






Next step is add your counter code to your blog, please following the steps :




  1. Login to blogger with your ID.


  2. After entering the dasboard page , click Layout.




  3. Click at Page Element tab. See the picture below :

  4.  


    page element

     


  5. Click at Add a Page element.


  6. After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

  7.  


    javascript

     


  8. Open your Counter code, copy and then paste into available column.




  9. Click   save changes
      




  10. Done. Please see the result.


 



Now you have a Counter, and you will know how many people online at your blog.



If you don't like with this counter, you can get at the other site, this
is several site provide the same service :




  • http://www.neoworx.net



  • http://www.webfooted.net



  • http://www.fastonlineusers.com









See you next time at my new tips. Happy blogging.








bahasa indonesia  Versi Bahasa Indonesia



Berbicara masalah blog tools, kayanya saya jarang sekali membahasnya. Dari sekian banyak artikel yang telah saya posting, tercatat baru dua artikel yang membahas tentang blog tools. Untuk itu dalam postingan kali ini akan di bahas salah satu blog tools yang banyak di gunakan oleh para blogger yakni tool untuk mengetahui berapa banyak pengguna/user yang sedang online pada blog milik kita.



Disamping berfungsi sebagai blog tools, tool ini berfungsi juga sebagai aksesori blog yaitu untuk menghiasi halaman blog milik kita agar tampak lebih cantik dan menarik untuk dilihat oleh para pengunjung. Oleh karena alasan tadi banyak penyedia tool ini yang menawarkan tampilan-tampilan yang unik serta menarik di samping fungsi utamanya yakni melacak user yang sedang online di blog kita.



Ok, biar ga bosan baca intermezo yang terlalu panjang dan garing, langsung saja pada topik bahasan utama.Untuk mendapat tool user online status, salah satunya kita bisa mendapatkan dari www.Geovisite.com,
untuk langkah-langkahnya silahkan ikuti langkah berikut :




  1. Silahkan buka www.geovisite.com




  2. Klik tulisan Register yang berada di bawah gambar Geo counter Flash




  3. Tulis alamat email sobat pada kotak kosong di samping tulisan Email




  4. Tulis address blog milik sobat disamping tulisan URL. Contoh : http://rubrik-elektronik.blogspot.com




  5. Tulis kata untuk login di samping tulisan Login (4/12). Contoh : amen24




  6. Tulis password yang di inginkan disamping tulisan password (4/8). Contoh : kinoy




  7. Pilih waktu yang sesuai dengan daerah sobat disamping tulisan Location. contoh :untuk daerah jakarta adalah Asia/Jakarta (GMT+7)




  8. Pilih kategori yang sesuai dengan blog sobat di samping tulisan Category. Contoh : Internet




  9. Pilih bahasa yang sesuai dengan blog sobat di samping tulisan Language of your site. Contoh : English (soalnya kalo indonesia ga ada,
    belum di akui bo)




  10. Pilih judul blog sobat disamping tulisan Title. Contoh : Rubrik Elektronik




  11. Tulis deskripsi dari blog milik sobat pada kotak di samping tulisan Descriptioan. Contoh : All about Electronic, tips, maintenance, until how to
    service the equipment of electronic




  12. Klik tombol yang berlogo disket




  13. Copy salah satu kode HTML yang dinginkan, antara lain : GEOGLOBE, GEOCOUNTER, GEOMAP lalu paste pada program notepad




  14. Silahkan close window browser sobat




  15. langkah selanjutnya adalah memasukan kode HTML tersebut pada kode HTML milik sobat, nah untuk langkah ini sudah saya bahas, silahkan klik di sini untuk membacanya




  16. Selesai.






Agar sobat bisa menentukan pilihan mana yang harus di pilih apakah GEOGLOBE, GEOCOUNTER, atau GEOMAP ? Silahkan klik di sini untuk melihat secara nyata gambar dari ketiga pilihan tadi, tunggu beberapa saat,loadingnya lumayan sedikit lama. Kenapa tidak saya cantumkan di sini,alasannya yaitu agar halaman blog ini tidak terlalu berat untuk di akses makanya sengaja saya pisahkan.



Sebagai tambahan, situs penyedia yang lainnya sobat bisa kunjungi di :




  • http://www.neoworx.net



  • http://www.webfooted.net



  • http://www.fastonlineusers.com



  • http://www.histats.com





Selamat menikmati tool baru...

Tuesday, May 22, 2007

Membuat Read More (2)


Update : saya telah membuat artikel yang lebih mudah untuk di praktekan dalam membuat read more, silahkan baca di sini!

Bagi para sobat yang menggunakan template baru tentu saja akan mengalami kebingungan ketika membaca tutorial terdahulu yang membahas tentang membuat menu Read more.. atau menu Baca selengkapnya.., karena tutorial tersebut memang di peruntukan bagi para sobat yang menggunakan template klasik. Nah bagi sobat yang menggunakan template baru dan ingin menggunakan menu Read more.. juga silahkan ikuti langkah-langkah berikut :





  • Sign in seperti biasa di blogger dengan id milik sobat




  • Klik Setting




  • Klik Formatting




  • Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi tesxt area kosong tersebut dengan kode di bawah ini :






  • <div class="fullpost">




    </div>






  • Klik tombol yang bertuliskan Save Settings




  • Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu mengingat kode tersebut.




Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :




  • Klik menu Dasboard




  • Klik menu Layout




  • Klik menu Edit HTML




  • Klik tulisan Download Full Template




  • Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template,
    kita masih punya back up data untuk mengembalikannya seperti semula




  • Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah,
    sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya




  • Tunggu beberapa saat ketika proses sedang berlangsung




  • Silahkan Sobat cari kode berikut pada kode template milik sobat :






  • <div class='post-body'>






  • Copy kode HTML di bawah ini kemudian paste di bawah kode tadi







  • <b:if cond='data:blog.pageType == "item"'>



    <style>.fullpost{display:inline;}</style>



    <p><data:post.body/></p>



    <b:else/>



    <style>.fullpost{display:none;}</style>






  • Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :






  • <p><data:post.body/></p>





  • Copy kode HTML di bawah ini kemudian paste di bawah kode tadi






  • <a expr:href='data:post.url'>Read More......</a>



    </b:if>





  • klik tombol bertuliskan Save Template



  • Selesai.








Cara Posting Artikel




  • Klik menu Posting




  • Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :







  • <div class="fullpost">




    </div>






  • Tulisankan artikel yang ingin tampak pada blog sebelum kode :






  • <div class="fullpost">






  • Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :






  • </div>





  • Klik tombol bertuliskan PUBLISH POST




  • Klik tulisan Open New Window untuk melihat hasil dari postingan kita,
    kemudian lihat apakah hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan. Coba lihat kembali langkah diatas




  • Selamat mencoba !




Sunday, May 20, 2007

Tutorial HTML (2)

Melanjutkan posting yang terdahulu setelah terselang oleh beberapa artikel tentang blog tutorial maka kali ini saya akan membahas tentang tutorial HTML kembali.Sebelum menginjak kepada topik bahasan ada baiknya para sobat mengikuti bahasan kali ini dengan langsung memfraktekannya agar lebih cepat mengerti. Caranya siapkan terlebih dahulu program notepadnya lalu tuliskan kode HTML seperti dibawah, kemudian apabila telah selesai mempraktekan simpan file tersebut dengan extensi .htm (dot htm). Contoh file : latihan.htm kemudian jalankan dengan internet explorer. silahkan tulis kode-kode berikut :






<html>


<head>


<title>latihan</title>


<body>


Tulis apa-apa yang saya terangkan di sini !


</body>


</html>


 




Kita langsung ke topik bahasan aja ya biar ga bosan.




Elemen dasar HTML




Ada beberapa elemen dasar HTML yaitu :




Elemen Blok Level




Elemen blok level yaitu tingkatan besarnya hurup yang akan di tampilkan pada browser. Elemen blok level yang paling sering di gunakan adalah Heading (h1 sampai h6).Tag heading
ini ini berupa <h1>...</h1> sampai dengan <h6>...</h6>.



Contoh :



<h1>Ini heading 1</h1>


<h2>Ini heading 2</h2>


<h3>Ini heading 3</h3>


<h4>Ini heading 4</h4>


<h5>Ini heading 5</h5>


<h6>Ini heading 6</h6>





Hasilnya akan seperti ini :




Ini heading 1





Ini heading 2



Ini heading 3



Ini heading 4


Ini heading 5



Ini heading 6





Sebenarnya ada cara lain untuk menampilkan berbagai ukuran hurup, yakni memakai
tag <font size="...">.....</font>.



Contoh :







<font size="1">Ini font size 1</font>



<font size="2">Ini font size 2</font>



<font size="3">Ini font size 3</font>



<font size="4">Ini font size 4</font>



<font size="5">Ini font size 5</font>



<font size="6">Ini font size 6</font>



<font size="7">Ini font size 7</font>





Hasil yang akan tampil seperti ini :







Ini font size 1



Ini font size 2



Ini font size 3



Ini font size 4



Ini font size 5



Ini font size 6



Ini font size 7




Itu adalah contoh untuk menampilkan huruf dalam berbagai ukuran.



Untuk kesempatan kali ini, kaya nya udah dulu sobat soalnya belum mandi nih, mo berangkat kerja       hiii.....pantesan dari tadi ada yang bau aneh  




Nantikan seri berikutnya!


Friday, May 18, 2007

Buat Logo & Image Button

Bagi para sobat yang sudah mahir menggunakan program desain grafis semisal adobe photoshop ataupun coreldraw serta teman-temannya yang lain, membuat sebuah logo bukanlah sebuah pekerjaan yang sulit, dan mungkin tutorial ini menjadi tidak menarik untuk di baca. But barangkali ada sebagian dari para sobat sekalian yang satu nasib dengan saya, sebenarnya saya pun boleh di katakan tidak awam banget dengan program-program desain grafis tersebut, akan tetapi tak cukup hanya menguasai tentu saja di perlukan suatu daya kreasi atau imajinasi yang tinggi untuk menciptakan sebuah logo.

Nah kalau ada diantara sobat sekalian yang senasib dan sepenanggungan seperti saya (lho ko jadi ngawur ngomongnya)jangan dulu berkecil hati, seperti biasa ada pepatah mengatakan banyak jalan menuju Roma ((irama)kaya postingan dulu...dah basi)untuk membuat logo kita bisa memakai jasa situs di internet, salah satunya yaitu cooltext.com, Silahkan ikuti langkah-langkah berikut ini :

  1. Silahkan buka alamat http://cooltext.com
  2. Lalu klik tulisan Design a Logo
  3. Klik gambar contoh logo yang sobat sukai
  4. Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog Tutorial
  5. Tulis ukuran yang di inginkan di samping Tulisan Text Size. Misal : 50
  6. Klik logo warna-warni disamping kotak yang ada tulisan Text Color untuk memilih warna tulisan (text).silahkan pilih warna yg sobat sukai
  7. Pilih format image disamping tulisan file format. sebaiknya .JPG atau .GIF
  8. Klik tombol yang bertuliskan Render Logo Design
  9. Tunggu beberapa saat ketika proses pembuatan logo berlangsung
  10. Lihat hasil logo, sudah cocok apa belum? bila belum cocok, klik tulisan Edit this logo ulangi langkah diatas, rubah yang sobat inginkan. Jika sudah cocok, klik tulisan Download Image untuk kita simpan di PC kita
  11. Selesai. Sobat sudah mempunyai sebuah logo.



Agar logo yang kita buat tadi bisa tampil di blog, sobat harus upload gambar tersebut ke blogger.com atau melalui situs lain. Tapi saya lebih suka menyimpannya di situs lain misal www.photobucket.com.

Untuk proses upload di photobucket.com, silahkan ikuti langkah-langkah berikut :

  1. Silahkan buka alamat  http://www.photobucket.com,
  2. Jika belum terdaftar di situs ini, silahkan daftar dulu (gratis bo) dengan meng klik tombol yang bertuliskan Join Now pada sudut kanan atas layar
  3. Sekarang saya asumsikan sobat sudah terdaftar (pastilah cara daftarnya bisa kan)
  4. Silahkan Sign In dengan Id sobat
  5. Bila sudah berada pada halaman Account sobat, Klik tombol yang bertuliskan Browse... Silahkan pilih logo yang tadi di buat
  6. Klin tombol yang bertuliskan Upload
  7. Tunggu beberapa saat ketika proses upload berlangsung
  8. Setelah upload selesai, akan di perlihatkan gambar logo serta kode HTML nya
  9. Copy kode HTML yang ada di sebelah tulisan URL Link. Paste pada program notepad
  10. Silahkan klik tulisan Log Out untuk keluar dari account sobat. tutup layar browser sobat




Nah sekarang sobat tinggal memasukan kode gambar tadi ke blog ke blog sobat, cuma ada sedikit kode yang harus di tambahkan, karena kode tadi baru berupa Link Image saja. Contoh kode link image : http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg. Disini sobat harus menambahkan kode <img src="Link URL logo">, sehingga kode tadi menjadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg">

Maka contoh hasilnya akan seperti ini :





Untuk cara memasukan kode HTML kedalam blog sudah sering di bahas, jika lupa silahkan klik di sini.

Sebagai tambahan, kode HTML di atas adalah kode untuk menampilkan image dengan ukuran yang sebenarnya. Apabila sobat ingin memperbesar atau memperkecil image tersebut, sobat bisa menambahkan beberapa atribut ke dalam kode HTML nya. Contoh : image tadi ingin saya tampilkan dalam ukuran 100px X 40px , maka kode tersebut menjadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg" width="100" height="40" alt="ini contoh saja">

sedikit clue, kode width="..." yaitu untuk ukuran lebar image, jadi untuk memperbesar atau memperkecil image, sobat tinggal menambah atau mengurangi nilainya. kode height="..." yaitu untuk ukuran tinggi image, sobat tinggal menambah atau mengurangi nilainya. Untuk alt="..." yaitu untuk menampilkan tulisan ketika mouse berada pada image tersebut.

Sebagai contoh, hasil dari kode diatas adalah sebagai berikut, silahkan sorot image tersebut untuk melihat efek kode alt="..." :


ini contoh saja



Bagaimana sudah bisa kan? pasti bisa, kan sudah di coba. Sekarang bagaimana cara membuat image button? langkahnya sama saja dengan langkah-langkah di atas, cuma pada saat berada di situs cooltext.com yang sobat klik adalah tulisan Desiggen a Button bukan Design a Logo, contoh image button :










Ok sobat, selamat menikmati hasil karyanya     

Monday, May 14, 2007

IE + FireFox dalam satu komputer

Topik ini saya tulis bermula dari pengalaman saya beberapa bulan yang lalu. Sekarang saya mau flash back sebentar mudah-mudahan tidak membosankan. Ceritanya begini para sobat, di kantor tempat saya bekerja sekarang nih mempunyai beberapa buah komputer, yaitu buat orang-orang bagian akunting, resepsionis, teknisi, serta si bos sendiri. Ya kalo di itung-itung ada 8 buah komputer. Dari dulu, yang namanya browser internet pasti saya selalu memakai Internet Explorer dari Microsoft, tidak pernah browser yang lain.



Saat itu pekerjaan rada dikit, tentunya saya bisa sedikit bersantai ria. Iseng-iseng
saya pinjem tuh kompi nya si mba tukang akunting temen saya, mau liat technorati barangkali ada yang nge link baru ke blog saya.
setelah di buka ntuh kompi, eh saya lihat ada dua browser dalam ntuh kompi yaitu Internet Explorer plus Mozilla FireFox. Wah nyobain ah pake FireFox, katanya sih lebih cepat dan aman di banding dengan Internet Explorer yakni si FireFox ini lebih
kebal terhadap virus-virus semacam Trojan dan teman-temannya.



Aku buka deh langsung ntuh si FireFox, hasilnya lumayan emang rada cepet sih, tapi kayanya rada - rada ada yang beda pada tampilan gambarnya, aku hiraukan saja ga mau mikir panjang-panjang and langsung aja ke www.technorati mau cek yang nge -link ke blog saya. Sesudah di cek, benar saja ada yang pasang link baru tanpa memberi tahu, aku langsung aja di klik ntuh linknya, betapa kagetnya daku saat itu, lho ko gambarnya begini acak-acakan nih blog ada gambarnya yang kepinggir, melorot dan lain sebagai, pokoknya pemandangan yang tidak mengasikan, apa pemilik blog ini ga sadar
apa, blognya ancur begitu. Setelah kejadian yang kurang mengenakan tadi, buru-buru deh aku lihat blog ku, takutnya kaya kejadian tadi. Hasilnya sedikit melegakan, wah untung blogku tidak berantakan, cuma ada sedikit perbedaan saja. Karena penasaran, aku tutup tuh si FireFox dan langsung buka browser pake IE, dan aku balik lagi ke blog yang berantakan tadi, dan ternyata hasilnya sungguh mengherankan juga, yang tadinya aku lihat di FireFox sangat berantakan kalo di lihat pake IE sangat tersusun rapi dan menarik.



Itu tadi pengalaman pertama, pengalaman yang kedua, aku pake IE seperti biasa. yah yang namanya blogger musti rajin-rajin blog walking biar banyak temen. ceritanya saya mampir di suatu blog, wah ini blog berantakan banget (menurut saya lho). Trus baca-baca tuh isi blog, eh ada sedikit artikel dari sang pemilik blog itu sendiri, sedikit penggalan isi artikel tersebut kira-kira ada kata-kata begini :
Buset deh, kebiasaan pake FireFox pas dilihatdi IE, blog ku ancur begini ya.



Menanggapi dua pengalaman tadi, saya mempunyai kesimpulan bahwa sebaiknya bagi para blogger mempunyai banyak browser internet dalam satu komputer, ini tentunya untuk memaksimalkan hasil dari blog kita, terutama bagi para sobat yang blognya berupa blog untuk bisnis, satu pengunjung ke blog sobat, berati satu peluang untuk mendapatkan keuntungan. Nah jika blog para sobat tidak menarik karena sebab tadi dari
perbedaan pemakaian browser, tentunya jangankan mau membaca artikel penawaran bisnis dari sobat baru sampaipun langsung kabur. Ingat, di luar sana ribuan orang atau bahkan jutaan orang memakai browser yang berbeda dengan kita, maka itu tadi sobat harus mempunyai banyak browser pada komputer sobat, minimal dua browser paling terkenal di dunia yakni Internet Explorer dan Mozilla FireFox.



Bagi para sobat pengguna template buatan bukan dari blogger sendiri, coba cek blog sobat, barangkali blog sobat berantakan kalau di lihat di browser lain. Bagi para sobat pecinta program HTML text berjalan <marquee>, hati-hati karena program ini tidak di mengerti oleh FireFox, jadi jika sobat menyimpan text terlalu banyak dalam marquee, jangan-jangan blog sobat jadi melorot atau melebar kesamping karena kelebihan quota space. Bagi yang suka pake kode <BLINK> untuk mengedipkan hurup buat narik perhatian pengunjung, kode sobat tidak di mengerti oleh IE tapi di mengerti oleh FireFox. Tentunya dari masing-masing Browser ada kelebihan dan kekurangannya, ya pandai-pandailah kita mensiasatinya.





Kalau di baca-baca, kayanya artikel kali ini bukan blog tutorial ya, lebih cenderung ke tips gitu. biarin aja ya, supaya ga bosen baca tutorial terus, cari yang beda gitu. Oke, thanks ya sobat, selamat mendownload FireFox nya.

Sunday, May 13, 2007

Membuat foto animasi

Lagi-lagi saya berbicara tentang animasi, memang dengan animasi bisa bikin hidup
jadi hidup ( kaya iklan aja ). Ya dalam kesempatan kali ini akan coba di bahas tentang
bagaimana cara membuat animasi gambar ataupun foto. Bagi para sobat (mulai sekarang saya
akan membiasakan diri menyebut anda menjadi sobat, biar lebih familier ya) yang sudah
terbiasa menggunakan program animasi semisal MacroMedia Flash Player ataupun teman-temannya
sudah barang tentu bukan hal yang wah ataupun aneh, tapi bagi sekelompok orang seperti saya ini,
membuat animasi foto adalah suatu hal yang sangat sulit sekali.




Adakah diantara para sobat blogger yang seperti saya? jika jawabannya ada ya kita emang senasib (hiduplah senasib),
tapi jangan dulu patah semangat sobat blogger, pepatah bilang banyak jalan menuju rhoma (irama).. dalam hal inipun
sama ada jalannya yakni kita bisa menggunakan jasa situs-situs pembuat animasi. Di internet buaanyak
sekali situs pembuat animasi foto, jumlahnya ribuan atau bahkan jutaan. Nah sebagai contoh yaitu http://www.slide.com.
Untuk membuat sebuah foto animasi di slide.com, silahkan ikuti langkah-langkah berikut :




  1. Silahkan buka situs www.slide.com



  2. Langkah pertama yaitu sobat harus daftar dahulu pada situs tersebut



  3. Klik tulisan Sign Up untuk melakukan pendaftaran (daftar gratis)



  4. Masukan alamat email sobat pada kolom yang disediakan. isi juga password yang diinginkan



  5. Jika sudah, silahkan klik tombol sign Up, dan otomatis sobat sudah masuk ke halaman account sobat



  6. Langkah selanjutnya adalah melakukan pembuatan animasi



  7. Klik style, untuk memilih gaya dari animasi



  8. klik skin, untuk memilih bingkai animasi



  9. klik Size untuk memilih ukuran



  10. Klik Tombol Select Image, lalu masukan foto/image yang ingin sobat masukan



  11. klik tombol Upload untuk melakukan proses upload foto



  12. Jika proses upload selesai, klik tombolSave



  13. Copy kode HTML yang di berikan, lalu paste pada program notepad



  14. Klik tulisan Log Out untuk keluar dari situs tersebut. Silahkan tutup halaman browser



  15. Langkah selanjutnya adalah memasukan kode HTML animasi tersebut ke dalam blog sobat, nah untuk cara memasukan kode HTML sudah sering saya bahas
    pada postingan terdahulu, jika lupa silahkan klik di sini





Contoh gambar animasi :




  






Ada pula contoh animasi dari http://www.picturetrail.com :






Get Your Own!





Atau para sobat bisa juga daftar di http://www.flickr.com




Selamat mencoba !

Saturday, May 12, 2007

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> , <br> , 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 <HTML> dan di tutup dengan </HTML>, 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 <HEAD> dan di tutup oleh tag </HEAD>, 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