DHTML dan CSS
Perkembangan HTML (HiperText Markup Langage) yang statis, dikenal dengan DHTML (Dynamic HTML) yang lebih interaktif. DHTML tidak sebatas gerakan-gerakan yang ditampilkan di dokumen web, namun DHMTL lebih menitikberatkan pada interaktivitas.Kini DHTML adalah HTML biasa ditambah dengan tiga komponen utama yaitu,
- Document Object Model (DOM), untuk mendefinisikan halaman web sebagai objek. Komponen itu bisa berupa text judul, paragraph, grafik (gambar), dan lain-lain.
- Cascading Style Sheet (CSS), untuk memberi karakteristik dan formatting halaman web.
- Bahasa script seperti JavaScript dan VBScript.
Cascading Style Sheet (CSS)
yaitu kode yang berfungsi untuk mengatur style atau tampilan dari dokumen HTML.
- CSS Inline Style
- CSS Internal StyleSheet
- CSS Eksternal StyleSheet
CSS Inline Style
yaitu meletakkan kode CSS pada elemen/tag HTML langsung yang ingin di format.
- Penulisan CSS dengan cara ini di mulai dengan kata style
- Kemudian di ikuti dengan syntax property: value
- Contoh:
<p style="color:#ff0000;">Welcome to CSS </p>
CSS Internal StyleSheet
yaitu meletakkan kode CSS di bagian head sebuah file HTML.
- Menambahkan tag <style type="text/css"> pada bagian header HTML
- Menutup tag tersebut dengan </style>, sehingga kode selengkapnya menjadi:
<html>
<head>
<title>Belajar CSS internal</title>
<style type="text/css"/>
<!-- disini kode CSS -->
</style>
</head>
<body>
</body>
</html>
CSS Eksternal StyleSheet
yaitu peletakkan kode CSS pada file yang berbeda.
- Membuat satu file dengan notepad atau teks editor lain, kemudian simpan dengan ekstensi .css. Misalkan diberi nama style.css
- Memanggil file style.css yang sudah dibuat, caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>
<link rel="stylesheet" type="text/css" href="style.css" />
Sehingga kode selengkapnya menjadi:
<html>
<head>
<title>Belajar CSS internal</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
</body>
</html>
Ada beberapa alasan mengapa cara ini dianjurkan:
- Maintenance kode CSS lebih mudah
- Mengurangi ukuran file HTML, karena kode CSS diletakkan pada file yang berbeda
- Dapat menghemat bandwidth
Yang mana yang lebih baik ?
Dengan banyaknya cara untuk meletakkan kode CSS Anda mungkin bertanya cara yang mana yang sebaiknya dipilih? Jawabannya adalah tergantung kebutuhan. Tapi kalau ditanya pendapat pribadi saya akan menjawab CSS Eksternal StyleSheet.
Bagaimana jika ketiga cara diatas digabungkan?
Jika ketiga cara diatas digabungkan atau jika Anda menggunakan 2 cara, maka web browser akan membuat style baru hasil dari penggabungan style tersebut dengan prioritas:
a. Inline Style,b. Internal StyleSheet
c. External StyleSheet.
Materi Kuliah Pemrograman Web
Senin, 24 Agustus 2009
created by Jupren
