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

Post on 23-Mar-2020

17 views 0 download

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

Pemrograman Dasar CSS

ISH3D4 – Sistem Informasi

Rahmat Fauzi, S.T., M.T

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

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

Pokok BahasanPengenalan CSS01

Persiapan Lingkungan CSS02

Cara penulisan CSS03

Font dan Text Properties04

Paragraph HTML05

LIST HTML06

Hyperlink HTML07

Dasar HTML

Pokok BahasanImage HTML08

Video dan Audio HTML09

Tabel HTML10

Form HTML11

12

13

14

Dasar HTML

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

Bab IPengenalan dan Definisi

CSS

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

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/

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 ++

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/

Home

Cascading Style Sheets (CSS)

P02

P03

P09

Dasar

CSS

Persiapan LingkunganCSS

Home P02

P03

P09

Dasar

CSS

Code Editor :

✓ Visual Studio Code ( rekomendasi )

Sublime Text,

Notepad++, etc

Persiapan TOOLS

Cara Penulisan CSS

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/>.

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.

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.

Lets Code : Internal Style Sheet

Lets Code Inline Style

Lets Code Eksternal Style Sheet

Font dan Text Properties

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.

Home P02

P03Design

Principles

Font-Family

• Name font

• Generic family

Keterangan lebih lengkap Kunjungi :

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

Home P02

P03Design

Principles

Font-Size

• Px

• %

• em

Keterangan lebih lengkap Kunjungi :

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

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

Home P02

P03Design

Principles

Font-Variant

• Normal

• Small-caps

Keterangan lebih lengkap Kunjungi :

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

Home P02

P03Design

Principles

Font-Style

• Normal

• Italic

• Oblique

Keterangan lebih lengkap Kunjungi :

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

Home P02

P03Design

Principles

Line-Height

• Normal

• Ipx

• Em

Keterangan lebih lengkap Kunjungi :

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

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

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)

• 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… )

Home P02

P03Design

Principles

Alignment of Text

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

berikut.

Home P02

P03Design

Principles

Contoh Alignment of Text

Home P02

P03Design

Principles

Contoh Alignment of Text

Home P02

P03Design

Principles

Contoh Alignment of Text

Text-Indent

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

• Px

• %

Text-Decoration

Text-decoration ( mengatur dekorasi pada teks )

Atribut nya adalah :

• None

• Underline

• Overline

• Line-through

Text-Transform

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

• None

• Lowercase

• Uppercase

• capitalize

Letter-spacing

Letter-spacing ( mengatur spasi antar huruf )

Atribut nya adalah :

• Normal

• px

Word-spacing

Word-spacing ( mengatur spasi antar kata )

Atribut nya adalah :

• Normal

• Px

Lets Code

Hasil Coding

List Properties

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.

Latihan Ordered list <ol>

Rumus dasar

<ol>

<li>item1</li>

<li>item2</li>

……..

……..

</ol>

Rumus dasar

<ol type = “ ”> </ol>

❖1

❖A

❖A

❖I

❖ i

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>

CSS Background

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

Latihan Unordered list <ul>

Referensi Background CSS :

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

Background CSS

Latihan Unordered list <ul>Background CSS

Latihan Unordered list <ul>Background CSS

CSS Selector

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

Latihan Unordered list <ul>

• Element HTML

• Id

• Class

• Complex selector

CSS Selector

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

Latihan Unordered list <ul>Jawabannya adalah

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 )

Pseudo Class

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

Latihan Unordered list <ul>PSEUDO CLASS

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) )

Latihan Unordered list <ul>PSEUDO CLASS

Latihan Unordered list <ul>PSEUDO CLASS

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

Latihan Unordered list <ul>PSEUDO CLASS parent-child

Latihan Unordered list <ul>PSEUDO CLASS parent-child

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

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

Inheritence( Pewarisan )

Latihan Unordered list <ul>Inheritance

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

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

Latihan Unordered list <ul>Contoh Inheritence ( codding )

<a> tidak mewarisi nilai color dari body

Latihan Unordered list <ul>Contoh Inheritence ( codding )

<a> mewarisi nilai color dari body

Specificity

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

Latihan Unordered list <ul>Specificity

• Elemen

• ID

• Class

• Inline

Latihan Unordered list <ul>Specificity

Kira kira tulisan nya berwarna red atau green ?

Latihan Unordered list <ul>Specificity

Kira kira tulisan nya berwarna red atau green ? Kenapa ?

Latihan Unordered list <ul>Menghitung nilai Specificity

0000

ElementClassIDinline

Latihan Unordered list <ul>Menghitung nilai Specificity

ElementClassIDinline

#p1 = 0 1 0 0

p = 0 0 0 1

vs

Latihan Unordered list <ul>Contoh Specificity

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

Kenapa ?

Latihan Unordered list <ul>Contoh Specificity

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

Latihan Unordered list <ul>Jawabanya Specificity

Thank YouAny Question ?

Tugas di Rumah

Semua latihan di slide ini dikumpulkan ke email saya :

Dengan subjek : NamaKelas_NamaMahasiswa_TugasCSS

Lampirkan sintaks coding dan screenshoot hasilnya.

Daftar Referensi

1. Youtube.com/webprogrammingUNPAS

2. Modul Praktikum WAD SI FRI

3. Modul Praktikum WAD Teknik Informatika FIF

4. Petanikode.com