23 Agu 2011

Membedahkan HTML, CSS dan JAVASCRIPT

Postingan ini saya tujukan terutama bagi pemula/yang belum bisa bedakan jenis dan tipe code/script yang mereka lihat. Tujuannya adalah agar nantinya tidak salah menempatkan code lagi. maksudnya apa? khususnya pada Multiply kalau tag/code HTML ditempatkan pada yang support HTML dan CSS memiliki tempat sendiri. jadi jangan masukkan CSS pada box welcome atau html pada custom CSS, tentunya tidak nyambung dong, kan masing-masing ada tempatnya (tempatkan sesuatu pada tempatnya), apalagi code tersebut didapatkan dari pen-generate code seperti glitterfy.com atau apalah yang menyediakan fasiltas gituan.

ok lah, mari saya tunjukkan perbedaan diantara makhluk-makhluk yang bernama HTML, CSS, JS, PHP dan kawan-kawannya ini.

HTML:
<title>
<munir>
<manggatiga>
<b>
<a>
<i>
<html>
<body>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
dan harus ditutup dengan garis miring (/)
</title>
</munir>
</manggatiga>
</b>
</a>
</i>
</html>
</body>
</table>

penjelasan:
-> Tag HTML ditandai dengan menggunakan < dan >
-> bila anda mendapatkan potongan code yang disediakan penggenerate code dan melihat ada tanda seperti diatas < dan > maka itu adalah HTML dan akhir elemennya harus ditutup dengan / menjadi </...>.
contoh:
<b> buat huruf tebal </b> hasilnya akan seperti ini buat huruf tebal
<i> buat huruf miring </i> hasilnya buat huruf miring
dan lain-lain termasuk manggatiga bisa dikatakan tag HTML bila ditulis <manggatiga> dan </manggatiga>

untuk pembatas property dan nilai menggunakan sama dengan (=)
ngerti ga lho..?

CSS:
selector {property: value}
#manggatiga {padding: 4 px; margin: 2px;}
.munir {font-size: 1.5em; color: blue; }
p.rokok {max-width: 400 px: magin-left: -12cm;}

ketengan:
-> Code CSS ditandai dengan menggunakan tanda kurung kurawang ({..})
-> # adalah id
-> . adalah class

untuk pembatas property dan value menggunakan titik dua (:)

sudah bisa bedakan? klo memang belum bisa bedakan... berarti memang  otak anda perlu di periksa ulang. hehehe canda ko' jangan tersinggung ya... !!!!

Javascript:

document.write("ini contoh pesan atau document  ditulis dengan JavaScript");
function message() {alert("box alert dengan me-onload event atau peristiwa"); }

penjelasan:
->Script JS ditandai dengan buka kurung dan tutup kurung ()
->JS sangat mirip dengan CSS namun yang membuatnya beda adalah JS merupakan script sedangkan CSS merupakan style.
->JS lebih sangat mirip lagi dengan VBscript apa lagi sama-sama script.
->Baca terus lanjutannya tulisan ini...

PHP (Hypertext Preprocessor)
<?php
echo "Hello World";
$txt = "Hello World!";
$number = 16;
echo $txt1 . " " . $txt2;
?>

penjelasan:
->PHP ditandai variabel $ karena statusnya untuk script server.
->Bila menampilkan pesan menggunakan tanda kutip " dan "

==>>Nah untuk Ajax dan lain-lain nantilah kita bahas.<<==

Kesimpulan :
Untuk masing code dan script harus ada pintu masuknya, apakah itu? code awal sebagai penanda bahwa yeng tertulis didalamnya adalah jenis dan tipe ini. perhatikan dibawah masing-masing pintunya.


<html>
<head>
disini disisipan CSS atau Script
</head>
<body>

disini di tulis isi site
tentu saja menggunakan tag html

</body>
</html>


<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>


<script type="text/javascript">
document.write("Hai semua... jangan lupa titip comentar ya...");
</script>


<script type="text/vbscript">
document.write("Hai semua... jangan lupa titip comentar ya...")
</script>


<?php
echo "Hello World";
$txt = "Hello World!";
$number = 16;
echo $txt1 . " " . $txt2;
?>

yang warna merah tersebutlah pintunya, saya kira seperti itu perbedaan yang paling mendasar....

Tips memodifikasi template

Artikel ini, pertama kali di publikasikan oleh hoctro's dan di publikasikan ulang oleh Abangchris dalam Bahasa Indonesia. Pada postingan kali ini, saya akan memberikan tips bagaimana cara memodifikasi template blogger baru anda dengan mudah... A. Memasuki Halaman Template 1. Jika anda sudah berada di blog anda (sudah login), klik pada menu customize. 2. Jika anda berada dalam suatu blog dan ingin memodifikasi blog anda yang lain, klik pada dashboard. 3. Jika sudah masuk ke dashboard klik layout. 4. Jika sudah masuk ke setting halaman, klik menu template. B. Ganti ke Edit HTML menu. Untuk melihat kode struktur template anda, klik edit HTML. Pada defaultnya, Template tersebut tidak menampilkan struktur lengkap sebuah template untuk setiap widget. Jadi apa yang anda liat adalah sebagian kecil kode dari template tersebut. Lihat gambar di bawah ini : (1) Sebelum memulai memodifikasi template anda, sangat aman apabila anda mendownload dulu template anda. (2) Jika terdapat kesalahan dalam modifikasi template, silahkan upload kembali template anda. (3) Ini adalah suatu cara untuk menampilkan kode template anda sepenuhnya (kasih tanda centang) (4) Untuk menambahkan widget baru, masukan diantar b:section tab di dalam id='sidebar'. C. Menambahkan kode CSS atau Java Script. (1) Cara termudah untuk menambahkan kode CSS yaitu diatas kode html ]]> (2) Nah...kalo untuk kode javascript, cara yang termudah yaitu di bawah kode di atas. Untuk lebih jelasnya...lihat gambar di bawah ini : (3) Selesai......
semoga puas dengan postingnya ya!!!
19 Agu 2011

Daftar tag-tag pada html

Berikut ini adalah tabel tag-tag HTML dan fungsinya:
 Tag Utama
Tag Atribut Deskripsi
<html></html> Baris paling atas dari setiap file HTML
<head></head> Informasi umum dari sebuah halaman web
<title></title> Judul halaman. Terdapat pada head
<body></body> Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth Settingan atribut untuk seluruh dokumen
Modifikasi Teks
Tag Deskripsi Contoh
<b></b> Teks tebal Teks tebal
<i> </i> Teks miring Teks miring
<u> </u> Teks garis bawah Teks garis bawah
<pre></pre> Preformatted teks Contoh teks
<h1></h1> Header 1

Header 1

<h2></h2> Header 2

Header 2

<h3> </h3> Header 3

Header 3

<h4></h4> Header 4

Header 4

<h5></h5> Header 5
Header 5
<h6></h6> Header 6
Header 6
<sub></sub> Subscript Subscript
<sup></sup> Superscript Superscript
Font
Tag Atribut Deskripsi
<font></font> Color, size, name Mengubah gaya suatu huruf
Links
Tag Atribut Deskripsi
<a> </a> Href, target, style, class, name, id Membuat link ke dokumen atau situs lainnya
Gambar
Tag Atribut Deskripsi
<img> Src, alt, name, border, height, width Menampilkan sebuah gambar
Formatting
Tag Deskripsi Contoh
<blockquote></blockquote> Digunakan untuk mengatur text dan gambar dalam suatu tag Contoh text in a block quote format ( “ “ )
<ol></ol> Ordered List (digunakan dengan <li>) 1. Item 1
<ul></ul> Unordered List (digunakan dengan <li>) • Item 1
<li> Elemen List
<dd></dd> Definition List
<dt> Definition Term
<dd> Definition Description
<p></p> Paragraf
<br> Ganti baris
<hr> Garis horizonta
<center></center> Menengahkan elemen
Tabel
Tag Deskripsi Contoh
<table></table> Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background, align, valign Mengatur semua elemen table
<tr></tr> Height, bgcolor, background, align, valign, title Membuat baris baru
<td></td> Height, width, bgcolor, background, align, valign, title, colspan, rowspan Membuat kolom
<th></th> Height, width, bgcolor, background, align, valign, title, colspan, rowspan Header(kepala tabel). Otomatis ke tengah dan tebal
<tbody></tbody> Height, width, align, valign, bgcolor, background Format yang berlaku bagi cell yang diapit tag
<colgroup></colgroup> Height, width, align, valign, bgcolor, background, colspan Format yang berlaku bagi kolom

Form
Tag Deskripsi Contoh
<form></form> Method, action, name, enctype Mengatur elemen dari form
<input type=> Text, password, hidden, radio, checkbox, submit, image, reset Variasi dari tipe elemen input dalam form
<select></select> Name, size Membuat combo-box. Digunakan bersama dengan option
<option> Selected, name, value
<textarea></textarea> Name, rows, cols, wrap Membuat Text Area untuk input text dengan length yang lebih besar dari input text.
wrap Off
virtual
physical
no wrap
word wrap, sent as one line
word wrap, sent with breaks
Anda tidak perlu menghafal semua tag tersebut, nanti malah kepala anda malah pecah!. Cukup hafalkan yang penting-penting saja seperti <table><form><input><ul>. Tidak hafal pun tidak apa-apa kan kita bisa melihat daftar kalau lupa, yang penting kita paham.
18 Agu 2011

Membuat menu dropdown java script (II)

Melanjutkan Postingan kemarin lusa yaitu tentang membuat menu dropdown dengan JavaScript. Pada postingan yang lalu telah di bahas tentang membuat menu dropdown pada template baru, maka pada postingan kali ini akan di bahas mengenai cara pembuatan pada template klasik.

Agar tidak terlalu monoton, pada pembuatan dropdown kali ini akan saya beri sentuhan baru, yaitu pemakaian background yang berbeda. Jika pada postingan yang lalu saya memberikan contoh background banner seperti di bawah ini :









Maka kali ini saya akan memberi contoh banner seperti ini :










Dan contoh menu dropdown yang akan di bahas adalah seperti demo di bawah ini :





Agar tidak terlalu menyita space halaman karena penuh dengan kata-kata yang membingungkan, kita langsung saja pada topik pembahasan. Untuk membuat menu dropdown pada template klasik, silahkan ikuti langkah-langkah berikut ini :


  • Langkah pertama adalah membuat tiga banner untuk background tulisan, banner ini bisa dibuat dengan program design & grafik semisal Adobe photoshop atau Corel Draw ataupun program-program lainya yang sejenis.






  • Langkah kedua adalah mengupload banner-banner yang telah sobat buat, salah satu contoh adalah dengan menggunakan jasa situs www.photobucket.com. Untuk cara menguploadnya saya sudah terangkan, jika belum faham silahkan klik di sini. Saya ambil contoh, banner yang telah saya upload mempunyai URL address sebagai berikut :

    http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif

    http://i162.photobucket.com/albums/t253/rohman24/bannerjava5.gif

    http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif






  • Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :





    1. Sign in di blogger.com dengan id sobat
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy seluruh kode template lalu paste pada program notepad, ini untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting kode template
    5. Tambahkan kode berikut di bawah kode <head> dan sebelum kode </head>, atau jika ingin lebih mudah simpan di bawah kode <title><$BlogPageTitle$></title> :
    6. <script> var last_expanded = ''; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == 'hide') { if (last_expanded != '') { var last_obj = document.getElementById(last_expanded); last_obj.className = 'hide'; } obj.className = 'show'; last_expanded = id; } else { obj.className = 'hide'; } } </script>
    7. Masukan kode berikut diatas kode ]]></b:skin>
    8. .raden{ background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom: 5px; display:block; text-decoration: none; color: #F6E151; } .ogah{ background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:8px; padding-bottom: 5px; display:block; text-decoration: none; color: ##FAF705; height: 18px; } .ogahniye{ background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:8px; padding-bottom: 5px; display:block; text-decoration: none; color: #0572FA; height: 18px; } .hide{ display: none; } .show{ display: block; } a{cursor: hand}
    9. Masukan kode berikut di sidebar blog sobat, dimana saja sesuai dengan keinginan sobat :
    10. <a class="raden"><font size="5"><b>Navigasi</b></font></a> <a class="ogah" onclick="showHide('ogahku1')">Blog Tutorial</a> <div id="ogahku1" class="hide"> <a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html" class="ogahniye">Membuat blog</a> <a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-1.html" class="ogahniye">Membuat link</a> <a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-marquee.html" class="ogahniye">Membuar marquee</a> <a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-icon-yahoo-messenger.html" class="ogahniye">Icon YM</a> </div> <a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a> <div id="ogahku2" class="hide"> <a href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html" class="ogahniye">Yahoo ! Emoticons</a> <a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html" class="ogahniye">Blogger Emoticons</a> <a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-sidebar.html" class="ogahniye">Pasang jam</a> <a href="http://kolom-tutorial.blogspot.com/2007/05/ada-video-di-artikel.html" class="ogahniye">Pasang Video</a> </div> <a class="ogah" onclick="showHide('ogahku3')">My Other Blog</a> <div id="ogahku3" class="hide"> <a href="http://rubrik-elektronik.blogspot.com/" class="ogahniye">Rubrik Elektronik</a> <a href="http://rohman-freeblogtemplate.blogspot.com/" class="ogahniye">Free Blog Template</a> <a href="http://contoh-blog.blogspot.com/" class="ogahniye">Blog Menu D'tree</a> <a href="http://kolom-authorized.blogspot.com/" class="ogahniye">Authorize service</a> </div> <a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a> <div id="ogahku4" class="hide"> <a href="http://free-7.blogspot.com/" target="_blank" class="ogahniye">Free 7</a> <a href="http://jaloee.blogspot.com/" target="_blank" class="ogahniye">Jaloee</a> <a href="http://sundajava.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a> <a href="http://anangku.blogspot.com/" target="_blank" class="ogahniye">Anang</a> </div>
    11. Klik tombol Preview untuk melihat perubahan yang baru di buat
    12. Jika sudah OK, klik tombol Save Changes Template
    13. Selesai.


    Keterangan kode-kode diatas :


    • kode di bawah ini adalah kode untuk mengaktifkan tombol yg di klik, jadi jangan di rubah! kecuali jika obat sudah familier dengan Javascript dan bisa membuat variasi baru dari kode ini :
    • <script> var last_expanded = ''; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == 'hide') { if (last_expanded != '') { var last_obj = document.getElementById(last_expanded); last_obj.className = 'hide'; } obj.className = 'show'; last_expanded = id; } else { obj.className = 'hide'; } } </script>
    • Kode-kode di bawah ini, nilainya harus di sesuaikan dengan kondisi blog sobat :



    • .raden
      --> .raden hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk enyertakan dot ( . ) diepan kata yang di buat.

      background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
      --> ini adalah gambar background untuk tulisan yang saya buat yaitu sebuah ombol.

      text-align:center;
      --> kode untuk membuat tulisan berada di tengah, bisa diganti dengan kata Left untuk sebelah kiri, dan right untuk sebelah kanan.

      width:90%;
      --> lebar dari tombol adalah sebesar 90% dari besarnya space sidebar dimana tombol ini di tempatkan, silahkan ganti nilainya dan sesuaikan dengan ukuran blog sobat.

      font-family: georgia, Helvetica, sans-serif;
      --> Font (jenis hurup) yang dipilih adalah jenis georgia, ini bisa diganti dengan jenis huruf lainnya semisal verdana dan lain-lain.

      padding-left:5px;
      --> batas (jarak) tulisan sebesar 5px dari tepi kiri tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      padding-right:5px;
      --> batas (jarak) tulisan sebesar 5px dari tepi kanan tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      padding-top:5px;
      --> batas (jarak) tulisan sebesar 5px dari tepi atas tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      padding-bottom: 5px;
      --> batas (jarak) tulisan sebesar 5px dari tepi bawah tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      display:block;
      --> block berarti ditampilkan,jadi jangan dirubah.

      text-decoration: none;
      --> Tidak ada tek dekorasi. Sebaiknya jangan di rubah.

      color: #F6E151;
      --> Pemilihan warna, bisa dirubah kode warnanya sesuai dengan keinginan sobat.



      .ogah
      --> .ogah hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.



      .ogahniye
      --> .ogahniye lagi-lagi hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.



      .hide
      display: none;
      --> Pendifinisian untuk .hide disembunyikan (tidak tampil).



      .show
      display: block;
      --> Pendifinisian untuk .show ditampilkan.



      a{cursor: hand}
      Agar gambar mouse berubah jadi gambar tangan ketika berada di atas tombol.


    • Kode yang saya berikan diatas memuat links yang saya miliki, jadi links tersebuat harus di rubah dengan links milik sobat.



    Mudah-mudahan keterangan di atas sudah jelas. Selamat mencoba !

    Icon gratis untuk blog

    Bagi anda yang suka menghiasi blog atau website dengan berbagai macam icon agar terlihat lebih cantik, di bawah ini ada beberapa website yang menyediakan icon-icon cantik untuk bisa di download secara free atau gratis. So pasti anda tidak perlu lagi besusah payah hanya untuk sekedar urusan icon, download dan pasang dengan sesuka hati di blog anda.

    1. http://icontexto.blogspot.com

    Contoh icon yang bisa di download :

    webdev-social-bookmark-pack-180
    Dan masih banyak lagi koleksi icon yang sangat cantik, sayang jika di lewatkan, coba kunjungi saja blognya.

    2. http://jwloh.deviantart.com

    Contoh icon yang bisa di download :

    Aquaticus-Social-180
    Silahkan kunjungi situsnya, dan download berbagai icon yang cantik secara gratis.

    3. http://marcelomarfil.deviantart.com

    Contoh icon yang bisa di download :

    Apollo-180

    Siapa yang mau lihat-lihat dan sekaligus mendoanload icon cantik-cantik ini?

    4. http://www.webappers.com

    Contoh icon :

    Web Application Icon Set

    Dan masih banyak lagi icon-icon cantik lainnya.

    5. http://www.zeusboxstudio.com

    Contoh icon  yang bisa di download :

    Feedicons2

    6. http://www.vistaicons.com

    sky_folder_icons

    7. http://itweek.deviantart.com

    Knob_Buttons_Toolbar_icons_by_iTweek


    8. http://lecoupdulapin.deviantart.com

    leco

    9. http://csscreme.com


    sticky-pack


    10. http://stinky9.deviantart.com
    onibari-light



    Dan banyak lagi icon-icon yang bisa anda dapatkan secara free atau gratis, caranya sangat mudah, anda tinggal tulis keyword Free Icon pada search engine google yang ada di sebelah kanan atas blog ini. Selamat berdownload ria.
     
    ;