Post on 23-Mar-2020
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