pemrograman web 1 - universitas kuningan...penulisan css terbagi menjadi 3 bagian : selektoradalah...
TRANSCRIPT
Pemrograman Web 1
Jika terdapat sekian halaman yang memiliki format yang seragam, dan kemudian inginmerubah format dasarnya, tentu yang dilakukan adalah mengubah tiap halamantersebut.
Feature untuk membuat dynamic HTML.
Style sheet mendeskripsikan bagaimanatampilan document HTML di layar (template)
Support ke semua browser (example : mozzila, ie, opera, netscape, dll).
Penulisan CSS terbagi menjadi 3 bagian :
◦ Selektor adalah penghubung antaradokumen HTML dan style.
◦ Selector disimpan didalam tag HTML yang akan didefinisikan (body, H1, Link , dll).
◦ property berisi atribut yang akan diubah
◦ Value : nilai untuk property
contoh : color : green;
/* property : color, value : green */
selector {property : value}
Nilai untuk property tidak boleh dalam tandapetik.
Nama property bersifat case sensitive.
Untuk membuat komentar : /* isi komentar */
atau : <!– isi komentar - - >
Cara mendeklarasikan kelompok : (tanda koma serta &) contoh :
H1, H2 {color : green};
H3, H4 & H5 {color : red};
Ada 3 cara memasang CSS pada dokumen HTML :
External style sheet (file CSS berbeda dari file HTML)
Internal style sheet (kode CSS dipasang di dalam tag Head HTML)
Inline style sheet (kode CSS langsung dipasangdi tag HTML, tidak direkomendasikan)
Bentuk umum :
Contoh :
Bentuk umum internal css :
<style type=“text/css”>
…definisi style…
</style>
Contoh :
Bentuk umum sama seperti pada internal css, hanya saja diletakan didalam<BODY>
Contoh :
Bentuk umum :◦ Pendeklarasian selector :
◦ Pengaksesan/Pemanggilan selector :
selector { property : value; }
<selector>text yang akan dimodifikasi</selector>
Bentuk umum :◦ Pendeklarasian selector :
◦ Pengaksesan/Pemanggilan selector :
selector { property : value }
<tag_html class=“selector”> text yang akan dimodifikasi </tag_html>
Bentuk umum :◦ Pendeklarasian selector :
◦ Pengaksesan/Pemanggilan selector :
#selector { property : value }
<tag_html id=“selector”>text yang akandimodifikasi </tag_html>
background-color : hexadesimal.
ex/ background-color : #99CCFF
background : warna.
ex/ background : green
ex/ background-color : transparent
background : rgb
ex/ background : rgb(240,248,255)
Margin hanya pengaturan sisi halaman, padding pengaturan sisi halaman dantabel.
padding-top : 10%;
padding-right : 20%;
padding-bottom : 40%;
padding-left: 20%;
Buatlah desain web menggunakan css dengantampilan berikut :