Menghubungkan HTML dengan CSS
Tag <link> lah yang bisa digunakan untuk menghubungkan html dengan css, letakkan pada bagian element head pada struktur HTML.Contoh applikasinya :
File html bisa diberi nama dengan : index.html
File css dengan nama style.css
Ini index.html :<head>
<title>Menghubungkan HTML dengan CSS | www.bloggerdokter.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>Artinya :
<h1>Belajar HTML menghubungkan html dengan css</h1>
</body>
- atribut rel=”stylesheet” dan type=”text/css”
menjelaskan bahwa file yang dipanggil atau dihubungkan adalah file stylesheet atau css.
- atribut href di gunakan untuk meletakkan lokasi dan nama file css yang ingin dihubungkan.
pada contoh ini file html dihubungkan dengan file css yang bernama style.css
Jika di jalankan pada browser maka tidak akan muncul apa-apa karena pada file html masih kosong
belum berisi element apapun selain struktur dasar html.
Tag h1 dalam tag body adalah CONTOH untuk meninjau apakah file css sudah berhasil terhubung dengan file html.
Ini file CSS nya : style.cssh1{ color: orange; font-family: sans-serif; text-align: center; }
yang artinya kata kata dalam tag h1 akan tampil dengan warna orange,dst sesuai style.css
Hasilnya bisa buktikan sendiri ya..
Class dan Id pada HTML merupakan dasar yang harus di pahami sebelum mempelajari CSS.
Class dan id bisa di bilang sebagai penanda pada html,
maksud penanda di sini adalah element-element html dapat di beri tanda dengan class atau id.
Untuk apa di beri tanda ?
agar dapat di manipulasi menggunakan css atau javascript.
Praktisnya begini :
jika ada empat kertas, semua kertas berwarna orange, kemudian kita ingin mengubah warna kertas yang keempat menjadi biru, nah di sinilah letak kegunaan class dan id,
yakni, untuk memberikan tanda atau nama pada kertas agar bisa di ubah dan kertas yang lain tidak akan berubah.
Perbedaan dari class dan id
class di panggil pada css atau javascript dengan menggunakan tanda titik “.”
id di panggil pada css atau javascript dengan tanda pagar “#”,
kelebihan class : dapat di berikan pada banyak element html dan dapat di panggil sekaligus, sedangkan id hanya dapat bekerja pada satu penandaan saja, maksudnya satu nama id hanya bisa di berikan pada satu element saja.
Aplikasinya seperti ini :
index.html
<head>
<title>Mengenal Class dan Id pada HTML | www.bloggerdokter.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mengenal Class dan Id pada HTML<br/>www.bloggerdokter.com</h1>
<!-- contoh penggunaan class -->
<div class="kertas">kertas 1</div>
<div class="kertas">kertas 2</div>
<div class="kertas">kertas 3</div>
<!-- contoh penggunaan id -->
<div id="kertas">Kertas 4</div>
</body>
style.css
h1{ color: orange; font-family: sans-serif; text-align: center; }
.kertas{ padding: 50px; width: 100px; color: #fff; margin: 10px; background: orange; }
#kertas{ width: 400px; color: #fff; background: blue; padding: 50px; }
Arti dari contoh applikasi diatas adalah :
kertas 1, 2 dan 3 diberi tanda dengan class yang kita beri nama “kertas”,
kertas 4 diberi tanda dengan id yang diberi nama kertas juga.
maka perbedaannya di sini akan tampak, bahwa
- class bisa di panggil sekaligus, ini di buktikan dengan kertas 1,2 dan 3 di beri tanda class yang sama yaitu class kertas, di panggil dengan tanda titik “.”
- kertas 4 diberi tanda dengan id kertas, di panggil dengan tanda pagar “#”.
0 comments:
Post a Comment
Segala Bentuk Kerja Sama Mohon Hubungi 081703224617 atau di link ini : https://bit.ly/2qsVo9e