Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week...

87
Pemrograman Dasar CSS ISH3D4 – Sistem Informasi Rahmat Fauzi, S.T., M.T

Transcript of Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week...

Page 1: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Pemrograman Dasar CSS

ISH3D4 – Sistem Informasi

Rahmat Fauzi, S.T., M.T

Page 2: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Week Topic Week Topic1 Introduction HTML dan CSS 9 Model View Controller pada Framework

Laravel

2 HTML, CSS dan Java Script 10 Model View Controller pada Framework Laravel

3 Server-Side berbasis web menggunakanPHP

11 • POST dan GET• Pengenalan Cookies dan Session

4 Operator-operator pada PHP 12 • POST dan GET• Pengenalan Cookies dan Session

5 Operator-operator pada PHP 13 TUBES

6 Percabangan dan Perulangan pada PHP 14 TUBES

7 mengintegrasikan halaman website dengan database

15 UAS

8 Mid Term Exam 16 UAS

AGENDA

Page 3: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home

Capaian Bahasan

Kuis / Latihan

Pustaka

Saya Bee.. akan membantu Anda mempelajari

modul ini.

Silahkan pilih materi yang ingin Anda pelajari

Link

Pokok Bahasan

Video Animasi

Kesimpulan

Page 4: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Pokok BahasanPengenalan CSS01

Persiapan Lingkungan CSS02

Cara penulisan CSS03

Font dan Text Properties04

Paragraph HTML05

LIST HTML06

Hyperlink HTML07

Dasar HTML

Page 5: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Pokok BahasanImage HTML08

Video dan Audio HTML09

Tabel HTML10

Form HTML11

12

13

14

Dasar HTML

Page 6: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home

Capaian Pembelajaran

Kemampuan menganalisis permasalahan, melakukan

identifikasi dan mendefinisikan kebutuhan komputasi

Yang bersesuaian dengan solusi

Kemampuan untuk merancang, melakukan implementasi

dan mengevaluasi sistem berbasis komputer, proses,

komponen, atau program untuk memenuhi kebutuhan yang

diinginkan.

Kemampuan untuk menganalisis dampak lokal dan

global dari komputasi pada individu, organisasi dan

masyarakat

P02

P03

P07

Page 7: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Bab IPengenalan dan Definisi

CSS

Page 8: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home

Introduction CSS

P02

P03

P09

Dasar

CSS

CSS adalah bahasa kedua setelahHTML yang harus dipelajari seorangweb developer. Pengetahuan tentangCSS sangatlah penting bagi seorangweb developer, karena dengan CSS kita bisa:

• Halaman landing page yang menarik;

• Mengubah Font, Warna.• Template atau tema blog;• Mengubah PSD (Desain web)

menjadi HTML;• dan sebagainya.

Source : petanicode.com

Page 9: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home

Introduction CSS

P02

P03

P09

Dasar

CSS

• CSS dibuat terpisah dengan HTML• CSS Bertujuan memisahkan konten dengan style• 1 CSS dapat digunakan banyak HTML• 1 Halaman HTML dapat terlihat berbeda jika

menggunakan CSS yang berbeda juga.

Kita bisa melihat, 1 File HTML berbeda CSS.

Coba akses : http://www.csszengarden.com/

Page 10: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home

Definisi CSS

P02

P03

P09

Dasar

CSS

Cascading Style Sheets (CSS) merupakan bahasa yang membantu memperindahtampilan dari laman web yang telah dibangun dengan HTML. CSSmendeskripsikan bagaimana bentuk tampilan elemen HTML seharusnya saatditampilkan pada laman browser. Format penulisan CSS secara umumditunjukkan pada gambar berikut.

Jumlah property & Value sekitar 360 ++

Page 11: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home

Referensi Tambahan CSS

P02

P03

P09

Dasar

CSS

1. https://developer.mozilla.org/id/docs/Web/CSS

2. https://developer.mozilla.org/id/docs/Web/CSS/Reference

3. https://css-tricks.com/almanac/

Page 12: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home

Cascading Style Sheets (CSS)

P02

P03

P09

Dasar

CSS

Page 13: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Persiapan LingkunganCSS

Page 14: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03

P09

Dasar

CSS

Code Editor :

✓ Visual Studio Code ( rekomendasi )

Sublime Text,

Notepad++, etc

Persiapan TOOLS

Page 15: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Cara Penulisan CSS

Page 16: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03

P09

Dasar

CSS

Cara penulisan CSSAda tiga cara yang bisa diterapkan untuk menggunakan CSS pada web HTML.1. Eksternal Style SheetEksternal Style Sheet merupakan cara menyisipkan ataumendefinisikan CSS ke dalam HTML dengan memanggil file dengan ekstensi .css ke dalam file HTML. Pemanggilannyadiletakkan di antara elemen <head></head> denganmenggunakan tag <link/>.

Page 17: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03

P09

Dasar

CSS

Cara penulisan CSS2. Internal Style Sheet Internal Style Sheet merupakan cara menyisipkan ataumendefinisikan CSS ke dalam HTML dengan menggunakan tag <style> </style> pada elemen <head></head>. Biasanyadigunakan ketika satu laman membutuhkan style CSS yang berbeda dari yang telah dipanggil pada Eksternal Style Sheet.

Page 18: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03

P09

Dasar

CSS

Cara penulisan CSS3.Inline Style Inline Style menyisipkan atau mendefinisikan CSS ke dalam HTML dengan menambahkan atribut style pada elemen yang inginditambahkan CSS. Biasanya digunakan hanya untuk satu elemenyang membutuhkan style CSS yang berbeda dari yang telahdidefinisikan pada Internal Style atau Eksternal Style.

Page 19: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Lets Code : Internal Style Sheet

Page 20: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Lets Code Inline Style

Page 21: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Lets Code Eksternal Style Sheet

Page 22: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Font dan Text Properties

Page 23: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03Design

Principles

Font Properties

Sebuah laman web tentunya tidak lepas oleh penggunaan teks, oleh karena itu memiliki ta

mpilan teks yang tepat sangat diperlukan agar sebuah web memiliki tampilan yang baik

dan menarik. CSS dapat menangani kebutuhan tampilan teks dengan font properties.

Page 24: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03Design

Principles

Font-Family

• Name font

• Generic family

Keterangan lebih lengkap Kunjungi :

https://developer.mozilla.org/id/docs/Web/CSS/Reference

Page 25: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03Design

Principles

Font-Size

• Px

• %

• em

Keterangan lebih lengkap Kunjungi :

https://developer.mozilla.org/id/docs/Web/CSS/Reference

Page 26: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03Design

Principles

Font-Weight

• Lighter

• Normal

• 100-900

• Bold

• bolder

Keterangan lebih lengkap Kunjungi :

https://developer.mozilla.org/id/docs/Web/CSS/Reference

Page 27: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03Design

Principles

Font-Variant

• Normal

• Small-caps

Keterangan lebih lengkap Kunjungi :

https://developer.mozilla.org/id/docs/Web/CSS/Reference

Page 28: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03Design

Principles

Font-Style

• Normal

• Italic

• Oblique

Keterangan lebih lengkap Kunjungi :

https://developer.mozilla.org/id/docs/Web/CSS/Reference

Page 29: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03Design

Principles

Line-Height

• Normal

• Ipx

• Em

Keterangan lebih lengkap Kunjungi :

https://developer.mozilla.org/id/docs/Web/CSS/Reference

Page 30: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03Design

Principles

CSS untuk Text

• Color ( memberi warna pada tulisan )

• Text-alignment ( mengatur format paragraph / teks )

• Text-indent ( memberi indentasi pada paragraph / teks )

• Text-decoration ( mengatur dekorasi pada teks )

• Text-transform ( mengubah jenis huruf menjadi huruf besar, kecil / kapital )

• Letter-spacing ( mengatur spasi antar huruf )

• Word-spacing ( mengatur spasi antar kata )

Keterangan lebih lengkap Kunjungi :

https://developer.mozilla.org/id/docs/Web/CSS/Reference

Page 31: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03Design

Principles

Color untuk Text

Properties Keterangan Value Color Name ( R, G, B )

Background-color

Mengatur warna latar

belakang elemen HTMLRGB Value (R, G, B)

Hex Value (#FFFF00

HSL Value (Hue, Saturation,

Light

Color

Mengatur warna teks

elemen HTML

RGBA (dengan Opacity)

HSLA (dengan Opacity)

Page 32: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

• Nama warna

( red, lightseagreen , royalblue et

c..)

• Hexadecimal

(#ff0000, #20b2aa, #4169el, etc

…)

• Rgb

Rgb (255,0,0), rgb (32,178,170),

rgb (65,105,255) etc… )

Page 33: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03Design

Principles

Alignment of Text

Pengaturan alignment pada sebuah teks juga dapat ditangani oleh CSS dengan properties

berikut.

Page 34: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03Design

Principles

Contoh Alignment of Text

Page 35: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03Design

Principles

Contoh Alignment of Text

Page 36: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Home P02

P03Design

Principles

Contoh Alignment of Text

Page 37: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Text-Indent

Text-indent ( memberi indentasi pada paragraph / teks ). Atribut nya adalah :

• Px

• %

Page 38: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Text-Decoration

Text-decoration ( mengatur dekorasi pada teks )

Atribut nya adalah :

• None

• Underline

• Overline

• Line-through

Page 39: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Text-Transform

Text-transform ( mengubah jenis huruf menjadi hurufbesar, kecil / kapital. Atribut nya adalah :

• None

• Lowercase

• Uppercase

• capitalize

Page 40: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Letter-spacing

Letter-spacing ( mengatur spasi antar huruf )

Atribut nya adalah :

• Normal

• px

Page 41: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Word-spacing

Word-spacing ( mengatur spasi antar kata )

Atribut nya adalah :

• Normal

• Px

Page 42: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Lets Code

Page 43: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Hasil Coding

Page 44: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

List Properties

Page 45: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

List Properties

Dalam HTML terdapat elemen yang berguna membuat sebuah list menggunakan simbol dan karakter. Tag yang digunakan adalah tag <ul></ul> atau <ol></ol>. Tag <ul> digunakan ketika akan menggunakan list dengan penanda berupasimbol atau bisa dikatakan unordered list, sedangkan tag <ol> digunakan ketika akan menggunakan list denganpenanda karakter yang memiliki urutan atau bisa dikatakan ordered list. Namun di dalam tag tersebut juga harus didefinisikan tag pendukung yaitu<li></li> untuk mendefinisikan elemen-elemen list yang akan ditampilkan. Untuk setiap tag ordered list atau unordered list memiliki satu atribut untukmendefinisikan tipe simbol atau karakter yang akan digunakan yaitu atributtype.

Page 46: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Ordered list <ol>

Rumus dasar

<ol>

<li>item1</li>

<li>item2</li>

……..

……..

</ol>

Rumus dasar

<ol type = “ ”> </ol>

❖1

❖A

❖A

❖I

❖ i

Page 47: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>

Rumus dasar

<ul>

<li>item1</li>

<li>item2</li>

……..

……..

</ul>

Rumus dasar

<ul type = “ ”> </ul>

❖disc

❖circle

❖square

Latihan Unordered list <ul>

Page 48: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

CSS Background

Page 49: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>

Background-color ( banyak warna )

Background-image → url (alamat direktori )

Background-position → top, right, left, top left, top right, etc

Background-repeat → repeat-x, repeat-y, no-repeat.

Background CSS

Page 50: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>

Referensi Background CSS :

https://www.toptal.com/designers/subtlepatterns/

Background CSS

Page 51: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Background CSS

Page 52: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Background CSS

Page 53: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

CSS Selector

Page 54: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>

Selector pada CSS digunakan untuk menemukan elemen HTML untuk diberiCSS berdasarkan selector yang didefinisikan. Bentuk selector ada beberapaantara lain nama elemen HTML, atribut ID dan atribut Class.

CSS Selector

Page 55: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>

• Element HTML

• Id

• Class

• Complex selector

CSS Selector

Page 56: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Coba Kodingkan di HTML Dan CSS denganHasil seperti ini?

Page 57: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Jawabannya adalah

Page 58: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Id

• Sebuah elemen HTML hanya boleh memiliki 1 id

• Setiap halaman hanya boleh memiliki 1 elemen dengan id tersebut ( misalkan id=“p1 paragrap1”, hanya id =“p1”)

• Dapat digunakan sebagai penanda halaman untuk link

• Dapat digunakan untuk javascript

• Sebaiknya tidak digunakan untuk CSS( lebih baik gunakan class )

Page 59: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Pseudo Class

Page 60: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>PSEUDO CLASS

Class semu yang dimiliki oleh sebuah elemen HTML, yang membuat kitadapat mendefinisikan style pada “ keadaan tertentu” dari elementersebut.

Contohnya.

Tombol berubah warna setelah ada aksi tertentu.

Sebuah link berubah dari warna biru menjadi warna ungu apabila sudahpernah di-klik

Page 61: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>PSEUDO CLASS

Page 62: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>PSEUDO CLASS

PSEUDO CLASS berhubungan dengan link dibagi menjadi :

: Link

( style default pada sebuah link )

: Hover

( style ketika kursor mouse berada di atas sebuah link / elemen )

: Active

( style ketika sebuah link di-klik )

: Visited

( style ketika sebuah link sudah pernah dikunjungi sebelumnya (menggunakanbrowser yang sama) )

Page 63: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>PSEUDO CLASS

Page 64: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>PSEUDO CLASS

Page 65: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>PSEUDO CLASS berhubungan dengan sebuahelemen

:First-child

Memilih elemen pertama dari sebuah parent

:Last-child

Memilih elemen terakhir dari sebuah parent

:Nth-child

Memilih elemen ke-n dari sebuah parent

Bisa n, 2n, 3n+2, ganjil genap, dll

Page 66: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>PSEUDO CLASS parent-child

Page 67: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>PSEUDO CLASS parent-child

Page 68: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>PSEUDO CLASS berhubungan dengan sebuahposisi elemen

:First-of-type

Memilih elemen pertama dari sebuah type / jenis tag

:Last-of-type

Memilih elemen terakhir dari sebuah type / jenis tag

Page 69: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>PSEUDO CLASS berhubungan dengan sebuahposisi elemen

Page 70: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Inheritence( Pewarisan )

Page 71: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Inheritance

Sebuah elemen mewarisi beberapa nilai dari property yang dimiliki elemenparent-nya.

Page 72: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Beberapa property yang bisa diwariskan

• Color

• Font

• Letter-spacing

• Line-height

• List-style

• Text-align

• Text-indent

• Text-transform

• Visibility

• White-space

Page 73: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Contoh Inheritence ( codding )

<a> tidak mewarisi nilai color dari body

Page 74: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Contoh Inheritence ( codding )

<a> mewarisi nilai color dari body

Page 75: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Specificity

Page 76: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Specificity

Setiap deklarasi css selector memiliki bobot yang berbeda. Berat tersebutmenentukan seberapa spesifik sebuah elemen dapat dipilih oleh selector.

Sumber : www.smashingmagazine.com/2010/04/07/css-specificity-and-heritance

Page 77: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Specificity

• Elemen

• ID

• Class

• Inline

Page 78: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Specificity

Kira kira tulisan nya berwarna red atau green ?

Page 79: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Specificity

Kira kira tulisan nya berwarna red atau green ? Kenapa ?

Page 80: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Menghitung nilai Specificity

0000

ElementClassIDinline

Page 81: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Menghitung nilai Specificity

ElementClassIDinline

#p1 = 0 1 0 0

p = 0 0 0 1

vs

Page 82: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Contoh Specificity

Kira kira tulisan “Bandung” nya berwarna red atau blue ?

Kenapa ?

Page 83: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Contoh Specificity

Saya ingin tulisan “Bandung” nya berwarna red. Bagaimana caranya?

Page 84: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Latihan Unordered list <ul>Jawabanya Specificity

Page 85: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Thank YouAny Question ?

Page 86: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Tugas di Rumah

Semua latihan di slide ini dikumpulkan ke email saya :

Dengan subjek : NamaKelas_NamaMahasiswa_TugasCSS

Lampirkan sintaks coding dan screenshoot hasilnya.

Page 87: Pemrograman Dasar CSSrahmatfauzi.com/wp-content/uploads/2019/12/W1-2-CSS.pdf · Week Topic Week Topic 1 Introduction HTML dan CSS 9 Model View Controller pada Framework Laravel 2

Daftar Referensi

1. Youtube.com/webprogrammingUNPAS

2. Modul Praktikum WAD SI FRI

3. Modul Praktikum WAD Teknik Informatika FIF

4. Petanikode.com