Coding maniak! Posting sebelumnya di blog ini disinggung tentang ketiga kode editor – CSS, JavaScript dan HTML – sebagai posting tersendiri. Saya ingin memberi penekanan pada ciri khusus masing-masing agar lebih mengenal dan dapat membedakan kode CSS, Javascript dan xHTML. Ini sangat berguna bagi peminat website design.
Perbedaan dan ciri has elemen-elemen website
Berikut ini ulasannya.
Code CSS - website archives
- Secara umum kode CSS diawali dengan tag pembuka <style type=”text/css”> dan diakhiri dengan tag penutup </style> Contoh:
<style type="text/css"> Kode CSS atau property CSS diletakkan disini!!! </style>
- Setiap bagian kode CSS disebut syntax. contoh dibawah ini sebagai SATU syntax.
#box{ width: 200px; height: 300px; border: 2px solid blue; padding: 12px 8px; margin: 20px 5px; }
- Kode CSS disimpan di antara tag pembuka <head> dan tag penutup </head> atau disimpan di antara <body> dan </body>.
- Jika disimpan di antara <body> dan </body>, bisa ditambahkan widget blog. Jika di blogspot gunakan Add a Gadget (Tambah gadget) di Elemen Laman (Page Elements).
- Kode CSS dapat disimpan dalam bentuk kode seutuhnya (terbungkus dalam tag pembuka dan penutup style), atau bisa menyimpannya dalam bentuk link. Jika Anda menyimpan kode CSS dengan cara kedua, maka lakukan upload kode CSS di file hosting kemudian tulis dalam bentuk ini:
<link href="URL-kode-CSS" rel="stylesheet" type="text/css" /> - Beberapa kode CSS disimpan dalam bentuk kode yang lain karena sesuatu hal berkaitan dengan desain yang direncanakan. Contoh:
<link href="kode.css" rel="stylesheet" type="text/css" media="screen" />
Catatan : media=”screen” bisa juga dalam bentuk berbeda seperti media=”all”
Code xHTML - website archives
Anda dapat menyimpan xHTML di semua bagian template. xHTML ditandai adanya tag pembuka dan tag penutup. xHTML bisa berdiri sendiri, namun dapat juga dipadukan dengan kode CSS ataupun javascript. Contoh xHTML yang berdiri sendiri membentuk fungsi:
<div style="margin:20px auto;height:200px;width:100px;padding:10px;border:8px
inset blue;background:gray;">Boleh diletakkan teks, image atau yang lainnya!!!
</div>
Contoh lain:
<div id="header">
<div class="container">
Bisa Anda isi konten obyek apa saja!!!</div>
</div>
<div style="margin:20px auto;height:200px;width:100px;padding:10px;border:8px
inset blue;background:gray;">Boleh diletakkan teks, image atau yang lainnya!!!
</div>
Contoh lain:
<div id="header">
<div class="container">
Bisa Anda isi konten obyek apa saja!!!</div>
</div>
Layer DIV diatas bernama "header" dilengkapi class bernama "container." Misal saja, layer DIV diisi gambar logo asuransi Takaful – misalnya – di bagian header halaman blog. maka akan seperti ini:
<div id="header">
<div class="container">
<img id="logo takaful" src="logo.jpg" alt="logo for website design" /></div>
<!--akhir dari container-->
</div> <!--akhir dari header—>
<!—Akhir dari layer—>
<div id="header">
<div class="container">
<img id="logo takaful" src="logo.jpg" alt="logo for website design" /></div>
<!--akhir dari container-->
</div> <!--akhir dari header—>
<!—Akhir dari layer—>
Tulis komentar html Anda pada setiap penutup tag agar mudah melacak akhir layer atau class. Kelihatannya sepele tetapi ini sangat efektif membantu kebingungan Anda memahami HTML
Untuk mudahnya, layer DIV – yang ditandai tag pembuka <div> dan tag penutup </div> – bayangkan saja layer ini seperti kotak kosong yang dapat diisi bermacam obyek seperti teks, gambar, animasi dan lainnya. Kotak ini bersifat fleksibel dalam ukuran maupun posisinya – mengikuti property CSS yang mengaturnya.
-----------------------
Contoh xHTML yang dipadukan dengan kode CSS dan membentuk sebuah fungsi:
-----------------------
Contoh xHTML yang dipadukan dengan kode CSS dan membentuk sebuah fungsi:
.box{
margin:20px auto;
height: 100px;
width: 200px;
padding: 10px;
border: 8px inset blue;
background: gray;
}
<div class="box">
Di sini bisa diletakkan teks atau yang lain!
</div>
Selain penggunaan tag pembuka dan penutup DIV, xHTML juga menggunakan tag lain, disesuaikan dengan fungsi, kegunaan dan kebutuhan.
Code Javascript - website archives
Mengetahui apakah suatu kode HTML berfungsi sebagai kode Javascript bisa dilihat dari cara penulisan.- Kode diantara <script> dan </script> atau diantara <script type=”text/javascript”> dan </script>.
<script type="text/javascript">
document.write("<h1>Selamat datang d'blogger!</h1>");
</script>
- Javascript dapat disimpan di template diantara tag pembuka <body> dan tag penutup </body> atau diantara <head> dan </head>.
That's all we know
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgqz1Fz0W3QZkeG4LsKvQplfCdmyhCrU3j95NWl1i-XarshrBBaYCr4hKUMKj5XbhHwJRvEFMd3j2pDLZepCzvjQU0kMiNhvbs51qAWczA_Mrw7y_wj0czorZsxBhfr9Y5Q8IN_vsORSA/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
