Sekarang kita akan mencoba melakukan styling terhadap elemen HTML menggunakan Attribute style.
Kita buat terlebih dahulu script dokumen HTML seperti ini :
<!DOCTYPE html>
<html>
<body>
<h1>HELLO WORLD!</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p>
</body>
</html>
Hasilnya seperti ini :
HELLO WORLD!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Selanjutnya kita akan merubah warna background page menjadi misalnya warna powderblue. Maka kita akan menggunakan Attrubute style pada elemen <body> seperti ini :
<body style="background-color:powderblue";>
Save lalu refresh script, maka hasilnya menjadi seperti ini :
HELLO WORLD!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Bagaimana kalau kita ingin memberikan background yang berbeda untuk masing-masing judul dan paragraf ?
Untuk menyelesaikannya, kita lakukan styling pada elemen <h1> dan elemen <p>. Implementasinya begini :
<h1 style="background-color:blue;">HELLO WORLD!</h1>
<p style="background-color:tomato;">Lorem ipsum dolor sit amet,...</p>
Maka akan menjadi seperti ini :
HELLO WORLD!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Berikutnya kita akan merubah warna text nya, maka kembali kita akan mengakses elemen <h1> dan elemen <p>.
<h1 style="background-color:blue; color:white;">HELLO WORLD!</h1>
<p style="background-color:tomato; color:blue;">Lorem ipsum dolor sit amet,...</p>
Disini kita merubah warna text pada judul dengan warna putih dan text pada paragraf dengan warna biru seperti ini :
HELLO WORLD!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Selanjutnya menentukan font pada judul dan paragraf.
<h1 style="background-color:blue; color:white; font-family:verdana;">
HELLO WORLD!
</h1>
<p style="background-color:tomato; color:blue; font-family:courier;">
Lorem ipsum dolor sit amet,...
</p>
Jalankan script :
HELLO WORLD!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Lalu kita tambahkan ukuran fontnya :
<h1 style="background-color:blue; color:white; font-family:verdana; font-size:300%;">
HELLO WORLD!
</h1>
<p style="background-color:tomato; color:blue; font-family:courier; font-size:160%">
Lorem ipsum dolor sit amet,...
</p>
Jalankan script:
HELLO WORLD!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Terakhir kita tambahkan perataan pada judul dan paragraf menjadi rata tengah :
<h1 style="background-color:blue; color:white; font-family:verdana; text-align:center;">
HELLO WORLD!
</h1>
<p style="background-color:tomato; color:blue; font-family:courier; font-align:center;">
Lorem ipsum dolor sit amet,...
</p>
Jalankan script:
HELLO WORLD!
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Baiklah, pada latihan diatas kita telah belajar bagaimana melakukan styling terhadap elemen HTML menggunakan Attribute style.
Kita telah mempelajari bagaimana memberi background-color, text color, font, dan alignment. Nah ini semua disebut dengan property.
Setiap property memiliki nilai tertentu, misalnya property background-color pada contoh di atas di beri nilai powderblue.
Dari sini kita bisa simpulkan bahwa syntax untuk styling elemen HTML adalah sbb :
<tagname style="property: value";>
Dimana property dan value disini berisi property dan value CSS.
Referensi : w3schools.com
| Prev. Chapter | Next Chapter |
|---|---|
| HTML PARAGRAPH |
HTML TEXT FORMATTING |
Tidak ada komentar:
Posting Komentar