Cara Menginput atau memasukan isyarat CSS ke dalam halaman HTML
HTML atau Hypertext Markup Language intinya merupakan kumpulan kode-kode dalam bentuk tag yang disusun untuk memperlihatkan menampilkan objek berupa teks, gambar, audio, dan video, ataupun dokuen lainnya. Tag-tag tersebut dibentuk menurut fungsi dan kegunaannya, menyerupai untuk menghasilkan tabel <table>, untuk menghasilkan paragraf <p>, dan lain-lain.Nah CSS atau Cascading Style Sheet digunakan untuk mendesain tag-tag HTML tersebut biar dapat tampil lebih manis sesuai dengan keingingn kita.
Sekarang bagaimana cara memasukan dan memadukan isyarat CSS ke dalam HTML.
Secara garis besar, ada 3 cara memasukan isyarat CSS ke dalam dokumen HTML yaitu
- Inline Style
- Internal Style
- External Style
1. Metode Inline Style Sheet
Metode Inline Style Sheet ialah cara memasukan/menginput isyarat CSS secara eksklusif ke dalam isyarat di dalam HTML dalam ruang lingkup tag <body> dengan menggunakan atribut style. Berikut teladan penggunaan sistem Inline Style CSS :
<html>Jika script di atas dilaksanakan di browser, maka akan tampil menyerupai di bawah ini :
<head>
<title>Contoh Inline Style CSS</title>
</head>
<body>
<h1 style="background-color:blue; color:white" >
Text ini akan bewarna putih dengan background warna biru
</h2>
</body>
</html>
2. Metode Internal Style Sheets
Metode Internal Style Sheets atau disebut juga Embedded Style Sheets. Dengan metode ini kode CSS dipisahkan dari tag HTML, tetapi nasih tetap ditulis dalam satu halaman HTML.Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada suatu tag <style>. Tag style ini mesti berada pada bab <head></head> dari halaman HTML.
<!DOCTYPE html>Jika script di atas dilaksanakan di browser, maka akan tampil menyerupai di bawah ini :
<html>
<head>
<title>Contoh Internal Style CSS</title>
<style type="text/css">
h2 {
background-color:red;
color:white;
}
</style>
</head>
<body>
<h2>
Text ini akan bewarna putih dengan latar belakang merah
</h2>
</body>
</html>
3. Metode External Style Sheet
Kalau kita amati dua sistem di atas yaitu inline style sheet dan internal style sheet, semua isyarat css digabung di dalam isyarat HTML, sehingga jikalau ada halaman html yang lain, yang membutuhkan style yang sama, maka halaman tersebut pun mesti memasukan isyarat css yang sama. Tentu saja hal ini menghasilkan isyarat semua halaman html menjadi panjang. Jika ada kesalahan script pasti sungguh report bagi seorang web programmer.
Makara kehabisan dan kehabisan kedua sistem tersebut yakni jikalau ingin menghasilkan beberapa halaman dengan performa yang sama, maka setiap halaman akan memiliki isyarat CSS yang sama.
Untuk menanggulangi kehabisan dan kehabisan kedua sistem di atas, maka diciptkanlah sistem yang ketiga yakni Metode External Style Sheets.
Metode External Style Sheets memisahkan semua isyarat CSS dari semua isyarat HTML, dan masing-masing disimpan di dalam file yang terpisah. Sehingga jikalau file HTML membutuhkan isyarat css, maka cukup mengundang isyarat tersebut dengan mengundang filenya, tidak perlu menuliskan isyarat css-nya.
Sebagai contoh, kita gabungkan format css dari dua sistem sebelumnya, dan disimpan dalam suatu file yang ber-extensi css.
h1 {
background-color:blue;
color:white;
}
h2 {
background-color:red;
color:white;
}
simpan isyarat di atas ke dalam suatu file berjulukan kode.css
Kemudian buat suatu fie HTML dengan menggunakan isyarat css yang ada di dalam file kode.css
dan disimpan di dalam folder yang serupa dengan file kode.css.
Bagaimana cara mengundang file kode.css?
Ada 2 cara mengundang file css dari suatu halaman html.Yang pertama dengan menggunakan tag <link>
<html>
<head>
<title>Contoh External Style CSS</title>
<link rel="stylesheet" type="text/css" href="kode.css"></head>
<body>
<h1> Judul ini ini bewarna putih dan background warna biru</h1>
<h2> Sub Judul ini bewarna putih dan background warna merah </h2>
</body>
</html>
Yang kedua dengan menggunakan tag <style> dan @import url(file.css)
<html>
<head>
<title>Contoh External Style CSS</title>
<style type="text/css">
@import url(kode.css);
</style>
</head>
<body>
<h1> Judul ini ini bewarna putih dan background warna biru</h1>
<h2> Sub Judul ini bewarna putih dan background warna merah </h2>
</body>
</html>
0 Komentar untuk "Cara Menginput Instruksi Css Ke Halaman Html"