Belajar HTML Bag. 10 ( Style )
Saturday, August 28, 2010
Labels:
Windows dan Linux
Pada bagian ini kita akan membahas mengenai tag-tag yang digunakan sebagai styler html itu sendiri, tag-tag tersebut antara lain adalah tag <style>dan tag <div>. Ok kita langsung saja bahas satu per satu.
Tag <style>
Tag ini digunakan untuk menambahkan style pada webpage kita. Pada contoh dalam menggunakan tag ini kita akan menggunaka CSS ( Cascading Style Sheet) yaitu sebuah scripting yang digunakan untuk mengcostumize sebuah halaman HTML. Untuk lebih jelasnya perhatikan contoh berikut :
Code :
<html>
<head>
<style type="text/css">
h4 {color:red}
h1 {color:blue}
p {color:green}
</style>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<h4>Contoh penggunaan CSS</h4>
<h1>Contoh penggunaan CSS</h1>
<p>
Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS.
Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS.
Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS.
Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS. Contoh penggunaan CSS.
</p>
</body>
</html>
Hasil :
Penjelasan :
Perhatikan kode diatas, pada bagian header kita menambahkan tag <style> berjenis text/css yang berisi script css yang mengcostumize tag <h4> menjadi berwarna merah, <h1> menjadi berwarna biru dan <p> menjadi berwarna hijau, sehingga saat anda menggunakan tag-tak tersebut pada dokumen html anda, anda akan mendapatkan hasil sesuai yang sudah kita konfigurasikan pada script css kita.
Tag <div>
Tag ini digunakan untuk membuat sebuah bagian atau divisi. Sehingga tag ini banyak digunakan untuk kepentingan styling. Selain digunakan untuk styling, tag ini juga sering dimanfaatkan sebagai pengganti table, karena pada praktiknya loading speed table yang dibuat dengan <div> lebih cepat dimuat daripada table yang dibuat menggunakan <table>. Dikarenakan pada bagian ini kita membahas tentang style, maka saya akan menjelaskan kegunaan tag <div> sebagai styler saja, untuk penggunaan <div> sebagai table akan kita bahas dilain kesempatan. Ok, kita mulai saja dengan contoh agar mudah dimengerti :
Code :
<html>
<head>
<title>
CobaLihatSaja Tutorial
</title>
</head>
<body>
<div style="color:red">
<h3>Contoh penggunaan div untuk keperluan style</h3>
<p>Contoh penggunaan div untuk keperluan styleContoh penggunaan div untuk keperluan style</p>
</div
<div style="color:blue">
<h3>Contoh penggunaan div untuk keperluan style</h3>
<p>Contoh penggunaan div untuk keperluan styleContoh penggunaan div untuk keperluan style</p>
</div
<div style="color:green">
<h3>Contoh penggunaan div untuk keperluan style</h3>
<p>Contoh penggunaan div untuk keperluan styleContoh penggunaan div untuk keperluan style</p>
</div
</body>
</html>
Hasil :
Penjelasan :
Mudah bukan untuk memahami kode diatas? Kita membagi content dari webpage menjadi tiga bagian menggunakan tag <div> dan memberikan style yang berbeda-beda.
Ok selesai sudah perjumpaan kita malam ini. Bye-bye.
Selamat Belajar...dan tetap Semangat...
Terima Kasih Sudah Mampir, Salam Persahabatan...
1 comments:
Terima Kasih mas atas posting sekarang saya sudah tahu manfaat dari perintah div yang sering kita temukan pada halaman internet. Terima kasih, dan Terus Berkarya
Post a Comment