Sejarah HTML

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.

HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993).

HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997.HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997).

Dasar-Dasar HTML

Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat.

Mendesain HTML dapat dilakukan dengan dua cara:

1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain. 

2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.

Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah HTML Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan editing bahkan mem-publish ke internet. Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam mengenai HTML. Sedangkan cara kedua adalah menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat disarakan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi Anda harus melakukan cara-cara konvensional untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan Anda pelajari, karena dengan cara itulah Anda akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML.

Read more »

Posted in: LiputanBlogger

Meningkatkan Pengunjung Traffik dengan Menghubungkan Blog ke Google

Meningkatkan Pengunjung Traffik dengan Menghubungkan Blog ke Google. Salah satu Tips suapaya blog/website kamu di banjiri pengunjung adalah dengan dengan menghubungkan blog/website kamu dengan acount jejaring sosial seperti Facebook, twitter dan Google+. Pada kesemepatan kali ini, saya akan membahas bagaiman menghubungkan blog dengan Google+, jik kamu ingin ingin mengetahui cara menghubungkan blog dengan facebook dan twiiter, tutorialnya dalam waktu dekat akan saya posting, so subcribe artikel pada blog ini untuk mendapatkan artikel-artikel terbaru ke email kamu langsung. Untuk menghubungkan  blolg dengan Google+ caranya sangat gampang, karna sudah terintegrasi langsung di settingan blogger kita. Bagi anda yang belum memiliki acount google+ silahkan daftar dulu, tutorial cara daftar bisa anda lihat di Sini. Oke berikut adalah langkah-langkah menghubungkan blog dengan Acount Google+ Login ke blog kamu, dan masuk ke pengaturan (setting) + Post and Comments Pilih yes pada pilihan share to google+. Perhatikan gambar di bawah google+ setting Simpan pengaturan, dan setiap kamu memposting artikel baru, akan muncul konfirmasi untuk menshare artikel  postingan anda ke google+ Klik share untuk posting artikel di google plus

1. Login ke blog kamu, dan masuk ke pengaturan (setting) + Post and Comments 
2. Pilih yes pada pilihan share to google+
3. Simpan pengaturan, dan setiap kamu memposting artikel baru, akan muncul konfirmasi untuk menshare artikel  postingan anda ke google+
4. Klik share untuk posting artikel di google plus

Nah itu tadi share saya pada pagi pagi hari ini dan jika langkah langkah tadi sudah benar maka di setiap akhir posting ketika anda menklik publikasikan maka akan muncul kotak baru yang berisikan anda ingin menshare artikel tersebut ke teman anda

Read more »

Posted in: LiputanBlogger

Mengganti Tulisan "Older Post / Newer Post" atau "Posting Lama / Posting Baru"

Biasanya dibagian paling bawah artikel kamu terdapat tulisan seperti ini "Older Post / Newer Post" atau "Posting Lama / Posting Baru". Nah mungkin awal-awalnya kamu nggak tahu maksudnya apa tulisan tersebut dan setelah tahu oooo ternyata itu link menuju ke artikel-artikel sebelumnya dan juga artikel-artikel yang baru. Nah mungkin kamu ingin mengganti tulisan tersebut dengan tulisan yang lain, misalnya dengan tulisan "Artikelku Sebelumnya" atau "Coretanku Yang dulu2" atau bahkan dengan sebuah gambar. Nha pingin tahu caranya? mari kita mulai Pelajaranya...

1. Seperti biasanya kita login dulu ke blogger trus pilih "Template --> Edit HTML".
2. Beri tanda centang pada kotak "Expand Widget Template"
3. Cari kode berikut ini, cara nyarinya biar mudah copy kode berikut ini lalu tekan "Ctr + F " dan paste kedalam kotak yg disediakan.

<data:newerPageTitle/>

4 . Ganti kode tersebut dengan tulisan yg kamu inginkan. Tapi jika kamu pingin ganti dengan gambar panah misalnya, ganti dengan kode seperti ini <img src="http://www.geocities.com/kendhin_x/arrow/newblue.gif"/>. text yg dicetak tebal adalah lokasi dari gambar, kamu bisa menggantinya dengan gambar yang kamu inginka atau bisa diganti dengan gambar yang aku sediain dibawah.
5. Yang diatas untuk mengganti tulisan "Newest Post" atau"Posting Baru".
6. Terus untuk tulisan "Older Post" atau "Posting Lama" coba cari kode berikut ini, lokasinya tidak jauh dari kode diatas atau dibawahnya sedikit.

<data:olderPageTitle/>

7. Kalo sudah ketemu ganti lagi dengan tulisan yang kamu inginkan. Jika pingin diganti menjadi gambar coba ganti dengan kode seperti ini <img src="http://www.geocities.com/kendhin_x/arrow/oldblue.gif"/>

8. Jika kamu pingin ganti warna biru jadi warna merah, tinggal ganti"newblue.gif" dengan "newred.gif" dan "oldblue.gif" ganti dengan "oldred.gif"

Berikut ini gambar panah dan kodenya

olblue.gif	newblue.gif
oldblack.gif	newblack.gif
oldgreen.gif	newgreen.gif
oldpink.gif	newpink.gif
oldred.gif	newred.gif
oldyellow.gif	newyellow.gif

Read more »

Posted in: LiputanBlogger

Cara Mengganti Tanggal Posting dg Icon Calender

pertama harus kita lakukan yaitu mengganti setting tanggal dulu, caranya seperti biasa Login dulu ke blogger terus pilihSettings --> Formatting, ganti "date header format" atau "format tanggal menjadi (mm.dd.yyyy) nha yang masih pemula pasti bingung maksudnya kan? itu lho disebelah tulisan "date header format" kan ada kotak yang ada tanggalnya, trus kamu klik dan pilih yang formatnya bulan.tangal.tahun contohnya 1.13.2008 terus simpan

Langkah yang kedua pilih menu Layout --> Edit HTML . Trus beri tanda centang pada kotak Expand Widget Templates, Oh ya, jangan lupa di back-up dulu template kamu. Yang nggak tahu caranya memback-template silahkan lihat dulu artikel ini. udah? kalo udah mari kita mulai ke jeroannya.

1. Cari kode ini <TITLE><data:blog.pageTitle/></TITLE> (tempatnya dibagian atas) kalo dah ketemu taruh script berikut ini dibawahnya persis

<SCRIPT type='text/javascript'>

//<![CDATA[

/*********************************/

/* http://trik-tips.blogspot.com */

/*********************************/

function date_replace(date) {

var da = date.split('.');

var day = da[1], mon = da[0], year = da[2];

var month =

['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");

}

//]]>

</SCRIPT>

2. kalo udah cari kode ini:

.date-header {

margin: 1.5em 0 0;

font-weight: normal;

color: $dateHeaderColor;

font-size: 100%;

}

kalo ggak ada coba cari yang ini

h2.date-header {

margin:1.5em 0 .5em;

}

3. Kalo dah ketemu taruh script berikut dibawahnya

.dateblock {

background: url("http://img600.imageshack.us/img600/3576/bluecalend.gif")

no-repeat;

width: 55px;

margin: 0;

font-weight: bold;

height: 50px;

/*position: absolute;

top: 0;

left: 0;*/

float: left;

text-align: center;

}

.month {

font-size: 11px;

width: 37px;

margin: 0 5px;

text-transform: uppercase;

color: #fff;

}

.day {

color:#3366CC;

font-size: 19px;

width: 37px;

margin: 0 5px;

}

Kode http://img600.imageshack.us/img600/3576/bluecalend.gif

adalah gambar icon kalender. kamu bisa menggantinya dengan gambar-gambar dibawah ini caranya ganti kode gambar tersebut dengan kode gambar berikut ini, misalnya kamu pingin kelender yang berwarna merah, maka ganti kode tersebut jadihttp://img837.imageshack.us/img837/9199/redcalend.gif

http://i246.photobucket.com/albums/gg91/elu_isme/blackcalend.gif	http://img805.imageshack.us/img805/9918/blue2calend.gif	http://img600.imageshack.us/img600/3576/bluecalend.gif
http://img837.imageshack.us/img837/4311/greencalend.gif	http://img137.imageshack.us/img137/3329/orangecalend.gif	http://img196.imageshack.us/img196/8339/pinkcalend.gif
http://img837.imageshack.us/img837/9199/redcalend.gif	http://img220.imageshack.us/img220/3262/ungucalend.gif	http://img818.imageshack.us/img818/1760/yellowcalend.gif

Trus kode color:#3366CC; adalah kode warna

tanggal, kamu bisa menggantinya dengan warna yang lain. 

4. langkah selanjutnya yaitu kamu cari kode ini 

<data:post.dateHeader/>, cara nyarinya biar gampang copy kode tersebut,

terus tekan Ctrl-f dan paste di dalam kotak yang disediakan, nha langsung

ketemu kan. kalo udah ketemu ganti kode tersebut dengan script dibawah ini.

<DIV class='dateblock'>

<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

5. Simpan Template kamu dan lihat hasilnya. Berhasil nggak ya? :t

Kalo misalnya tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode.month { dan juga dibawah kode .day {

NB: Kalo Tanggalnya berubah menjadi tulisan "Undefine" itu pasti kamu tidak memperhatikan tutorial ini dari awal. Coba lihat lagi tutorial ini dari awal dan baca baik-baik perintahnya. 

Selamat mencobaaaaaaaaaa!!!!!!!........

Read more »

Posted in: LiputanBlogger

Membuat Kotak Komentar Blogger di Bawah Postingan

Akhirnya datang juga....
Setelah lama ditunggu-tunggu oleh para penggemar setianya, akhir blogger/blogspot menerbitkan juga comment box atau kotak komentar yang langsung muncul berada dibawah postingan. Kalau dulu hanya berupa link "Post a Comment", maka yang sekarang lain, yg 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 yang dulu (haloscan) dengan comentbox yang ini. Walaupun kotak komentar ini masih dalam draft tapi sudah bisa dinikmati.

Begini nih cara membuat kotak komentar blogger yang berada dibawah postingan.

1. Login ke http://draft.blogger.com, Ingat yang http://draft.blogger.com bukan 

    blogger.com.

2. Trus ke menu Setting-->Comments. Kemudian ganti "Comment Form Placement" menjadi 

    "Embedded below post" (lihat gambar dibawah)

3. 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). 

4. Selanjutnya pergi ke menu "Layout-->Edit HTML"

5. Beri tanda centang kotak "Expand widget templates".

6. 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>

7. 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>

8. Lalu simpan template kamu.

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

Read more »

Posted in: LiputanBlogger