Jumat, 11 Januari 2013

Cara Membedakan CSS, Javascript dan xhtml

23.22    No comments
بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Kita membahas tentang beda CSS juga JAVASCRIPT dan XHTML. Akhir tahun 2010 menjadi sambutan yang teramat indah untuk datangnya tahun baru 2011 dan terutama bagi d’blogger karena blogdetik memberi keleluasaan bagi penggunanya untuk memasang atau menambah kode HTML baru. Tentu saja kebebasan ini akan banyak membawa perubahan yang pastinya tidak semakin memperburuk penampilan blogdetik tetapi justru semakin memperkaya desain blogdetik hingga terlihat heboh dan tak membosankan. Kreativitas baru akan bermunculan dan masing-masing akan memperlihatkan ciri khas berbeda. Banyak widget baru yang sebelumnya tak bisa dimunculkan, saat ini dengan amat mudahnya ikut menghiasi lembar-demi lembar halaman blogdetik. Cantik …. semakin cantik dan akan semakin cantik dan bahkan mungkin saja sebuah exodus besar-besaran akan terjadi. Mereka yang selama ini telah mapan dan malang-melintang di blog lain bisa saja mencoba mengalihkan hokinya di blogdetik. Yah …. bukankan ikutan membangun dan membesarkan blog terbesar di Indonesia dan sekaligus kebanggaan nasional ini tak ada ruginya?! Ho … apalagi posting di blogdetik mampu melesatkan popularitas dengan sangat lebih cepat!

Kembali ke pokok permasalahan yang coba kita bahas tentang kode HTML, posting ini tak akan mengupas dengan panjang lebar, namun hanya akan memberikan beberapa ciri khusus untuk mengenal dan membedakan antara kode CSS, javascript dan xHTML,.

Kode CSS

  1. Secara umum kode CSS ditandai dengan sebuah tag pembuka <style type=”text/css”> dan diakhiri dengan tag penutup </style>
    Contoh: 
    <style type="text/css">
Di sini kode CSS di letakkan!
</style>
  2. Setiap bagian kode dikenal dengan istilah syntax.
    contoh: 
    #box{
       width: 200px;
       height: 300px;
       border: 2px solid blue;
       padding: 12px 8px;
       margin: 20px 5px;
}
  3. Kode CSS bisa disimpan di antara tag pembuka <head> dan tag penutup </head> tetapi bisa juga disimpan di antara tag pembuka <body> dan tag penutup </body>
    Saat menyimpan di antara tag pembuka dan penutup body, kita bisa memanfaatkan penambahan widget blog. Jika di blogspot gunakan Add a Gadget (Tambah gadget) di Elemen Laman (Page Elements), sedang jika di blogdetik gunakanlah Widgetize Any HTML.
  4. Kode CSS dapat disimpan dalam bentuk kode seutuhnya (yang terbungkus dalam tag pembuka dan penutup style), atau anda bisa menyimpannya dalam bentuk link. Jika ini yang ingin anda lakukan upload-lah kode CSS di file hosting kemudian simpan kode CSS tersebut dalam bentuk seperti di bawah ini: 
    <link href="URL-kode-CSS" rel="stylesheet" type="text/css" />
  5. Beberapa kode CSS disimpan dalam bentuk kode yang lain karena seuatu hal berkaitan dengan desain yang direncanakan.
    Contoh: 
    <link href="kode.css" rel="stylesheet" type="text/css" media="screen" />
    media=”screen” bisa juga dalam bentuk berbeda seperti media=”all” dan beberapa yang lain.

Javascript

Mengetahui apakah sebuah kode HTML merupakan javascript dapat dilihat melalui beberapa kode yang digunakan.
  1. Kode diletakkan di antara tag pembuka <script> dan tag penutup </script> atau dalam bentuk yang lain dengan tag pembuka <script type=”text/javascript”> dan tag penutup </script>
    Contoh javascript: 
    <script type="text/javascript">
document.write("<h1>hello d'blogger!</h1>");
</script>
  2. Javascript dapat disimpan ditemplate diantara tag pembuka <body> dan tag penutup </body> atau di antara tag pembuka <head> dan tag penutup </head>

xHTML

Anda dapat menyimpan xHTML di semua bagian template. xHTML ditandai adanya tag pembuka dan tag penutup. xHTML bisa berdiri sendiri sebagai kode membentuk sebuah fungsi, namun dapat juga dipadukan dengan kode CSS ataupun javascript.
Contoh xHTML yang berdiri sendiri untuk membentuk fungsi:
<div style="margin:20px auto;height:200px;width:100px;padding:10px;border:8px inset blue;background:gray;">
Di sini bisa diletakkan teks atau yang lain!
</div>
Contoh xHTML yang dipadukan dengan kode CSS untuk membentuk sebuah fungsi:

kode CSS

.box{
      margin:20px auto;
      height: 100px;
      width: 200px;
      padding: 10px;
      border: 8px inset blue;
      background: gray;
}

xHTML

<div class="box">
Di sini bisa diletakkan teks atau yang lain!
</div>
Selain penggunaan tag pembuka dan penutup DIV, xHTML juga banyak menggunakan tag lain sesuai fungsi, kegunaan dan kebutuhan.

0 komentar:

Posting Komentar