pemrograman web 1 - universitas kuningan...penulisan css terbagi menjadi 3 bagian : selektoradalah...
TRANSCRIPT
![Page 1: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/1.jpg)
Pemrograman Web 1
![Page 2: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/2.jpg)
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).
![Page 3: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/3.jpg)
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}
![Page 4: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/4.jpg)
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};
![Page 5: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/5.jpg)
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)
![Page 6: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/6.jpg)
Bentuk umum :
Contoh :
![Page 7: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/7.jpg)
Bentuk umum internal css :
<style type=“text/css”>
…definisi style…
</style>
Contoh :
![Page 8: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/8.jpg)
Bentuk umum sama seperti pada internal css, hanya saja diletakan didalam<BODY>
Contoh :
![Page 9: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/9.jpg)
![Page 10: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/10.jpg)
Bentuk umum :◦ Pendeklarasian selector :
◦ Pengaksesan/Pemanggilan selector :
selector { property : value; }
<selector>text yang akan dimodifikasi</selector>
![Page 11: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/11.jpg)
![Page 12: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/12.jpg)
Bentuk umum :◦ Pendeklarasian selector :
◦ Pengaksesan/Pemanggilan selector :
selector { property : value }
<tag_html class=“selector”> text yang akan dimodifikasi </tag_html>
![Page 13: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/13.jpg)
![Page 14: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/14.jpg)
Bentuk umum :◦ Pendeklarasian selector :
◦ Pengaksesan/Pemanggilan selector :
#selector { property : value }
<tag_html id=“selector”>text yang akandimodifikasi </tag_html>
![Page 15: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/15.jpg)
![Page 16: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/16.jpg)
![Page 17: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/17.jpg)
![Page 18: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/18.jpg)
![Page 19: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/19.jpg)
![Page 20: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/20.jpg)
![Page 21: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/21.jpg)
![Page 22: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/22.jpg)
![Page 23: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/23.jpg)
![Page 24: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/24.jpg)
![Page 25: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/25.jpg)
background-color : hexadesimal.
ex/ background-color : #99CCFF
background : warna.
ex/ background : green
ex/ background-color : transparent
background : rgb
ex/ background : rgb(240,248,255)
![Page 26: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/26.jpg)
![Page 27: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/27.jpg)
![Page 28: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/28.jpg)
Margin hanya pengaturan sisi halaman, padding pengaturan sisi halaman dantabel.
padding-top : 10%;
padding-right : 20%;
padding-bottom : 40%;
padding-left: 20%;
![Page 29: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/29.jpg)
![Page 30: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/30.jpg)
![Page 31: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/31.jpg)
![Page 32: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/32.jpg)
![Page 33: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/33.jpg)
![Page 34: Pemrograman Web 1 - Universitas Kuningan...Penulisan CSS terbagi menjadi 3 bagian : Selektoradalah penghubung antara dokumen HTML dan style. Selector disimpan didalam tag HTML yang](https://reader030.vdocuments.net/reader030/viewer/2022040319/5e45556122ae3f344923eea1/html5/thumbnails/34.jpg)
Buatlah desain web menggunakan css dengantampilan berikut :