Setelah kita belajar tentang HTML dasar pada artikel sebelumnya, sekarang kita akan mempelajari tag <style>
Tag <style> adalah salah satu tag yang lokasi penulisannya terletak di antara tag <head>. Masih ingat kan struktur dasar dari tag HTML?
Kegunaan dari tag <style> adalah untuk mendefinisikan format tampilan dari setiap tag. Langsung saja kita akan membuat contoh untuk mempermudah pemahaman.
Sebagaimana contoh sebelumnya, kita menampilkan tulisan "Ini Judul" pada title window.
<html> <head> <title>Ini Judul</title> </head> <body> </body> </html>
Kita akan menampilkan tulisan Halo Dunia sebagai isi halaman. Untuk itu kita akan meletakkan tulisan "Halo Dunia" pada bagian <body>, sehingga akan tampak seperti ini
<html> <head> <title>Ini Judul</title> </head> <body> Halo Dunia </body> </html>
Kemudian kita akan coba lihat hasilnya pada browser. Maka akan terlihat tulisan Halo Dunia di bagian halaman web.
Kita coba untuk mengganti warna latar belakang menjadi hitam, dan tulisan halo dunia berwarna putih. Kita akan tulis di dalam tag <style> seperti ini
<html>
<head>
<title>Ini Judul</title>
<style>
body{
background-color:black;
color:white
}
</style>
</head>
<body>
Halo Dunia
</body>
</html>
Coba jalankan pada browser, dan kamu akan melihat tampilan yang sama, hanya sekarang warnanya berbeda. Latar belakang berubah warna menjadi hitam, dan tulisannya menjadi putih.
body{
background-color:black;
color:white
}
Kode "body" bertujuan sebagai tag mana yang akan dikenai pengaruh pada style yang kita tentukan. Karena di dalam body tidak ada tag lain, hanya tulisan Halo Dunia, maka kita memberikan style pada body.
Pada perkembangannya nanti, kita akan membuat style pada tag-tag lain. Namun itu setelah kita membahas semua tag-tag penting terlebih dahulu ya.
Ok, segitu dulu bahasan kali ini. Sampai Jumpa di pembahasan berikutnya
Index:
Tutorial HTML: Struktur Dasar dan Tag title
Tutorial HTML: Tag Style
Tutorial Belajar HTML - Tag Heading H1, H2, H3, H4, H5, H6
Posting Komentar
0Komentar