CSS LAYOUTING

1 Display 2 Dimensi & Overflow

1. DEFISNI 1. Dimensi
Proprety display pada css itu mengatur A. Satuan / Ukuran
perilaku dari kota tersebut / sebuah width & height
halaman HTML px : satuan yg absolut jdi nilainya pasti
% : nilai yg relatif terhadap parent nya
in, cm, mm, pt, pc : satuan yg diambil dunia nyata

2.VALUE 2 overflow
value
A. Inline A. Visible
Tidak menambah baris baru ketika di jika ada elemen yg keluar dri parent nya /
buat / hnya di baris yg sama konten maka akan diperlihatkan
L & T sebesar konten yg di dlm nya dan
tdk dpt mengantur Tinggi & Labar nya B. Auto
margin & panding hnya pengaruhi css secara otomatis akan menambahkan scrol
secara horizontal tidak vertikal jika kontennya / parent sdh tidak cukup lgi
tag html : a, span, em, label, texarea,
input, select dll C. Hidden
kontennya yg keluar / melebihi dri parent nya
B. Inline-Block
akan di sembunyikan
tdk ada elemen yg secara default memiliki
properti inline-blok kalo ada pasti di ubah
D. Scroll
oleh user
mirip dgn auto dia akan memunculkan scrol
harus ubah secara manual
tapi jika konten nya mencukupi & msh byk
perilaku dsr nya sma dgn elemen inline
ruang scrol nya tetap ada
dpt diatur T (tinggi) & L (lebar) nya

C. Block NOTE!! contoh penulisan source code

menambah baris baru ketika dibuat 1.display
jika tdk di atur Lebar nya maka akan Display : Inline-block;
memenuhi Lebar dri browser / parent-nya
dpt mengatur T & L nya 2. Dimensi
bisa menyimpan elemen tag inline, inline- Width : 50%;
block, dan elemen block lagi Height : 200px;
tag HTML : h1-h6, p, 0l, ul, li, from, hr, div
3. Overflow
D None Overflow : Auto;
digunakan untuk menghilangkan sebuah
element
 css
3 BOX MODEL
Value

Margin : area trasparan

sekitar box / di luar border

Konsep Dasar border : batas disekeliling

content & panding

setiap elemen di dalam pandding : area trasparan

sebuah box (Kotak) di dalam kotak anatara
bisa mengatur ukuran & content & border
posisi kotaknya
content : kotak
bisa memberia warna / sebenarnya di dlm box
gmbar sebagai bckground bisa berupa teks / gambar
(plg didalam)

Definisi properti :
margin : margin-top, left,
ringht, bottom, / margin sja
KOtak yg dihasilkan oleh pandding : pandingg-top, right
sebuah element lalu left, bottom / pandding sja
menampilkannya sesuai dengan border : border-top, right,
format visualnya left, bottom / border sja
 BOX MODEL
1
MARGIN
SOURCE CODE

Margin- top : 30px;

Margin-left : 100Px; 3
Margin-right : 50px; NEGATIVE
Margin-Bottom : 10px MARGIN
margin : 50px;
Memberikan nilai Negatif.
semua sisi nya sama
source code :
Margin-Top : -50px;
bisa digunakan untuk

2
menyembunyika elemen
OVERLAPPING
MARGIN
Terjadi jika menggabungkan 2 buah margin
kiri & kanan / atas & bawah maksudnya 4
AUTO
terdapat 2 kota dengan margin atas & bawah.
Kalo vertikal (kebwh) margin yg dipilih adlh
nilai yg bisa kita ksh
mrgin plg besar sdngkan horizontal (smping) kedalam margin khusus
mka akan menjumlah kan kedua margin untuk untuk margin kiri (left) &
horizontal berlaku jika display nya inline-block kanan (Right). source code :
Margin-Left : auto;
Margin-Ringht : auto;
kalo mendapatkan efek ini
harus kedua nya auto tdk

5
bsa slh stu. hasilnya akan
SORTHAND membuat elemenya berada
di tengah" tergantung
untuk menyingkat penulisan margin. source code ukuran dari parentnya
margin : 50px 20px:
value 1 Ats & Bwh, 2 untuk Kri & kanan

margin : 50px auto;

bcanya ats bwh 50px sedangan kri knan auto

Margin : 10px 50 px 15px;

artinya atas, kri & knan, bawah

Margin : 10px 20px 30px 40px;

bcanya atas, kanan, bawah, kiri
 BOX MODEL
PANDING & BORDER

1 2
DEFINISI PANDING
SOURCE CODE digunakan untuk memberikan jarak antara
Panding- top : 30px; sebuah kotak dengan tulisan di dalam nya.
Panding-left : 100Px; cara penggunanya sama dengan margin
Panding-right : 50px; namun bedanya tdk bisa di ksh value negatif
Panding-Bottom : 10px (-), & tidak punya value Auto, menambah /
Panding : 50px; mempengaruhi ukuran dari box (jika tinggi dan
semua sisi nya sama lebar box 200px ditambah panding 50px
maka box nya akan lebar & tinggi 300)

3
SOURCE CODE bisa juga di tulis stu pesatu value nya
border-with : 1px;
BORDER border-style : solid;
Ada 3 nilai yg bisa ditulis border-color : black;
Border : 5px solid blue;
Border : width style color; bisa juga hnya untuk stu sisi nya sja
1 : tebal / lebar bordernya border-left : 1px double pink;
2 : stylenya / jenis bordernya border-right : 5px dashed white;
dotted(titik"), dashed(garis pts"), double
border juga menambah ukuran boxnya
3 : warna border / box nya

5 6
BOX SIZING CSS RESET
gunanya untuk mengatasi ukuran box adalah teknik yg dpt membuat kita dapat
jika ditambahkan dgn margin, panding, & mengatur ulang nilai" default dari elemen"
border. source code pda HTML khususnya margin& panding.
box-sizing : border-box; source code nya ada pada link ini
ini akan membuat lebar dri kotaknya https://meyerweb.com/eric/tools/css/reset/
tetap dan tudak menambah ukurannya
 CSS
FLOAT
DEFINISI
VALUE / NILAI
Properti pada css untuk
NONE
mengatur posisi sebuah
LEFT
elemen. bisa dipaksa berada RIGHT
sebelah kiri / kanan dari
parentnya dgn menggunakan
properti ini (float) YG BISA DILAKUKAN
FLOAT
text wraping : membuat teks
mengelilingi gmbar/ elemen lain
EMMET BUAT image gallery : membuat serangkaian
BYK KOYAK gmbar menjadi galery
multi-column layout : membuat
code : halaman memiliki berberapa kolom
.kotak{$}*10
mka akn muncul div dgn 10 kotak

penulisan codenya :
float : left;

CARA MENGHENTIKAN / MEMBERSIHKAN FLOAT

menggunakan propery overflow ada yg nama nya properti clear
mengunakan div kosong valuenya ada left, right, & both (jika
teknik micro clearfix yg mau dipake kedua nya kiri / kanan)
untuk cara yg ke 3 bisa copy semua kode codenya ( clear : left; ) dgn catatan
nya di hlman web plh efektif!! : menggunakan div kosong di akhir
https://nicolasgallagher.com/micro- tetapi kurang bagus untuk di gunakan.
clearfix-hack/
 POSITION
STATIC, RELATIF, ABSOLUTE & FIXED

PENGGUNAAN LAIN DARI POSITION

VALUE
Add your Section Title here
static : default nya tetap jika Booklets are printed materials with
tidak di beri properti four or more pages, containing details
about a business, event, product,
position
promotion, etc.
relative : maju 1 dimensi
sehinna bisa di gerakan Add your Section Title here
Booklets are printed materials with
kemana saja lalu bisa
four or more pages, containing details
menambahkan top bottom about a business, event, product,
right & left promotion, etc.

Add your Section Title here

Booklets are printed materials with
four or more pages, containing details
about a business, event, product,
promotion, etc.

absolute : maju 1 dimensi tetapi

ruang yg di tempati oleh kotak
trsebut dia anngap tidak ada & posisi
nya mengikuti parent nya tapo hrus
non static
Just like most print
fixed : mengikuti windows walaupun
ada parentnya non static & jika di publications, the key to
scroll dia tidak bergerak tetapi creating an effective booklet
mengikuti windownya lies in curation

Z - INDEX
These visually
untuk mengatur tumpukan dari elemen yg appealing platforms
are easy to distribute
non static relatif, absolut, & fixed.
as well
code & value : { z-index : 1; }
value nya berupa angka semakin besar
angkanya maka di akan berada plg depan
PEMBATAS
HALAMAN
DARI CSS
 CSS 3
KENAPA HARUS MENGGUNAKAN CSS3?

Membuat Website
1
Menjadi lebih
fleksibel

2
Membuat Mock-up
dengan cepat tanpa
banuan bhs scripting

3
mengurangi penggunaan
gambar = kecepatan
load halaman

4
penggunaan selector untuk
menghindari penggunaan
markup yg boros

5
menguragi penggunaan
ID dan CLASS
 BORDER RADIUS &
OPACITY

DEFINISI PENULISAN KODENYA

merupakan proprerti scc border-radius : 20px;
3 untuk membuat kotak border-top-right : 50%;
jika hnya ingin 1 sisi yg di tumpulkan bisa
agar ujung" menjadi
menggunakan code itu
tumpul semakin besar border-radius : 0 50% 50% 50%;
border radius yg di artinya yg semua sisi di ksh tumpul kecuali atas kiri
berikan maka ujungnya 1. atas kiri 2. atas kanan 3. bawah kanan 4. bawah
akan semakin tumpul kanan

DEFINISI OPACITY RGBA & HSLA

RGBa artinya red green blue alpha
digunakan untuk mengatur transparasi sebuah
(trasparan) digunakan untuk
elemen. value opacity cuman 0 - 1 sja 0 akan
memberikan trasparasi pada warna
membuat element sngat transparan smpe tidak
codenya background-color :
terlihat sedangkan 1 akan membuat 100%
rgba(225, 102, 0, 0.5);

codenya
HSLa artinya hue saturation
opacity : 0.8; (jika ingin trasparan nya 80%)
lightness alpha digunakan
menentukan warna trasparan
codenya bg-color : hsla(24, 100%,
63%, 0.5)
box shadow & text shadow
digunakan untuk memberikan bayangan pada kotak / box

source code source code

box-shadow : 5px 5 px 5px box-shadow : 5px 5 px 5px 5px
value box-shadow
black ; black ;
x, y, blur, color inset : membuat banyangan urutannya
terurut dri awal di dalam kotaknya boleh di x, y, blur, spead, color
pake / tidak.
box-shadow : 5px 5px 5px box-shadow : inset 5px 5 px
rgba(0,0,0,0.75) ; x-offset : untuk mengatur 5px 5px black ;
memberikan trasparan jarak bayangan pada sumbu
warna bayangan horizontal, & nilai nya
menggunakan rgba numerik jika di ksh 10px mka
akan begerak ke kanan 10px,
jika mines - bergerak ke kiri text shadow
untuk memberikan bayangan
y-offset : mengatur jarak
multiple shadow pada teks atau tulisan lalu
secara vertikal 10 px
memberikan lebih dari 1 penggunaannya sama
bergerak ke bawah kalo
bayangan pada sebuah dengan box shadow & value
mines - ke atas
elemen / nilai nya sama

blur : mengatur size blur /

source code seberapa besar blur yg mau
source code
di ksh ke bayangannya
box-shadow : 5px 5px 5px text-shadow : 5px 5 px 5px
rgba(0,0,0,0.75), spread : ukuran dari black ;
-5px -5px 5px banyangan. jika mines
rgba(225,0,0,0.75) ; bayangan nya semakin
mengecil
multiple shadow
untuk menambah bayangan text-shadow : 5px 5px 5px
di sisi lainnya. ingat harus color : mau warna apa black,
menggunakan koma bayangannya -5px -5px -5px blue;
diantara kedua nya untuk
memisahkan
 gradients
teknik memberikan warna gradiasi pada elemen

linear gradient radial gradient

memberikan gradiasi warna memberikan gradiasi warna
sintaks lengkap
pada secara garis lurus. pada secara garis melingkar
ini bukan property css 3, radial-gradient(tipe,
melainkan value untuk jangkauan at posisi-y posisi-
background-image x, wrna1, wrna2, ..., wrna-n) :
source code
tipe value : ellipse & circle backgroud-image : radial-
source code jangkauan : jarak dari pusat gradient(warna awal,
gradient ke sisi terluarnya warna akhir) ;
background-image : linear-
ada 4 value: warna awal akan menjadi
gradient(red, green) ;
closest-corner : sudut pusat lingkaran nya
pertama warna awal lalu
terdekat
kedua warna akhir multple color
closest-side : sisi terdekat
backgroud-image : radial-
farthest-corner : sudut
background-image : linear- gradient(warna - 1, warna -
terjauh
gradient(red, #f0d606, 2, ... , wrna - n ) ;
farthest-side : sisi terjauh
green) : untuk membuat byk wrna
jika mau 3 warna bisa mengggunakan ini
background-image : radial-
gradient (circel closest-side,
multiple color red, bue) ; color stop
mengatur awar gradient nya background-image : radial-
posisi : bisa x (horizontal) / y
gradient(red 110%, green
source code (vertikal). value nya bisa
20%, blue 80%) ;
background : linear- atas, bawah, kiri, kanan,
untuk mengatur besar
gradient(90deg, red, green): tengah & px
gradientnya. bisa
yg pertama menggunakan menggunakan px ataupun %
sudut radial-gradient(circle
farthest-side at top left, red, background : linear-
background : linear- blue) ; gradient(to bottom, red 63%,
gradient(to bottom, red, green 80%)
green) ; untuk mengatur besar/ size
menggunakan arah dari gradient linear
 css3
@FONT - FACE vendor prefixes

1. DEFISNI 1. definisi
sintaks khusus yg harus ditambahkan untuk
digunakan untuk mengelolah font
berberapa property css3. ada berberapa property dri
pada scc3
scc 3 yg ga akan jalan di semua broser, supaya jalan
akan mengakali nya menggunakan vendor ini.
2.VALUE vendor : broser yg bersangkutan
prefix : awalan dlm sebuah kata
@font-face {
font-family : "Alex Brush" ; 2. value
src : url('ALexBrush-Reguar.ttf')
format('trutype') ; A. -webkit-
} digunakan untuk chrome, safari, opera
B. -moz-
terus ke H1 / teks yg kita mau ubah fontnya untuk firefox
C. -ms-
h1 { internet explorer
font-family : "Alex Brush", arial; D. -0-
} opera versi lama

source code :
untuk format disarankan menggunakan woff / -webkit-filter : grayscale(100%);
woff2 dikarenakan : filter : grayscale(100%); ini jgn di hps
web open file format
dikembangkan oleh mozilah poperty yg membutuhkan vendor prefixes :
dibuat khusu untuk website
di load lebih cepat dripda jenis font yg
lainnya

halaman / link website untuk mengambil

font : fontsquirrel.com
untuk mengubah format dari font bisa
menggunkan halaman web di atas lalu
pencet menu generator
 FILTER & TRANSFROM

source code
Definisi filter : tipe-filter;
berberapa tipe filter :
digunakan untuk memberikan blur(px), brghtness(%), contrast(&),
efek visual pada gambar, saturate(%), grayscale(%), sepia(%)
backgrund, & border hue - rotate (deg), invert (%),
opacity(%), drop-shadow

lanjutan source code definisi trasfrom

filter : drop-shadow(5px 5px 5px
untuk memanipulasi format visual
black) :
dri elemen HTML. ada 2 jenis yaitu
bisa di tumpuk & lebih dari 1 efek
2D &3D

filter : blur(5px) grayscale(50%);

source code trasfrom transfrom : scale(2);

transfrom : fungsi ; transfrom : scale(2, 1.5); sumbuh X, Y
transfrom : scaleX(2) scaleY(1.5);
fungsi transformasi ada 4 yaitu:
scale : memperbesar/kecil (X,Y) transfrom : rotate(45deg);
rotate : memutar (X,Y) deg transfrom : skew(30deg); sma dgn x
skew : membuat condong / miring transfrom : skewX(30deg), skewY(30deg);
(X,Y) deg tansfrom : translate(50px, 100px);
translate : mengubah posisi (X,Y) px ke kanan, ke bawah bisa juga 1 sja
X : Horizontal smping Y : vertikal transfrom : scale(3) rotate(30deg);
ke atas bisa di tumpuk
 TRANSITION

01
DEFINISI

mengubah nilai dari property HTML 02

secara halus SOURCE CODE
transition : property durasi fungsi

03 delay;
yg wajid ada durasi, ke 3 nya tidak
DURASI wajib bisa pake / tdk
bisa diisi satuan nya s (detik) ms
(milidetik). keadaan awal & akhir durasi
nya mau brp lama.
04
transition : 1s; PROPERTY
menentukan property apa sja yg

05 akan dilakukan transisi bisa lbh dri 1

transisi., .kotak:hover {
FUNGSI trasfrom : rotate(45deg);
timing function ada berberpa nilai : margin-left : 800px;
ease, ease-in, ease-out, ease-in-out, }
linear, cubic-bezier (W X Y Z)
transition : all ( untuk semua property 06
bisa tdk di tulis ) 1s linear; DELAY
transition : all 1s linear cubic - bezier memberikan waktu tunggu sebelum
(0 1 8 9); menjalankan waktu transisi.
transition : 3s 2s; //artinya tunggu 2
07 detik sebelum menjalankan transisi
3dtk
TUMPUK

transition : all 1s ease-in 5s;

transition : margin-left 3s, transfrom 2s 3s, background-color 5s 3s :

artinya buat transisi margin 3dtk, setelah itu lalu tunggu 3dtk jalankan
transfrom selama 2dtk & tunggu 5dtk lalu ubah wrna selama 3dtk
 ANIMATION
sintaks value
@keyframes animasikotak { name duration timing-function delay
from { keadaan awal iteration-count direction fill-mode
width : 200px; play-state
}
iteration : memiliki 2 keywoard angka
to { keadaan akhir (mau di ulang brp kli) infinite (di ulang
width : 500px;
}
terus menerus)
} animation : animasikotak 2s ease
infinite; ini codenya di singkat dan sdh
untuk menjalakan animasi nya harus taro terutut sesuai value yg diatas
di selector yg mau dianimasikan
bisa di tulis satu" seperti ini
.kotak:hover { animation-name : animasi kotak;
animation : animasikotak 2s ease; animation-duration : 2s;
nama nya harus sma kaya di atas animation-timing-function : ease;
} animation-iteration-count: infinite;
bisa juga menggunakan persen & direction : memiliki 4 keyword
membuat banyak keadaan / keyframe normal (sacara default animasi
berjalan dri awal smpe akhir)
@keyframes animasikotak {
0% { keadaan awal reverse (akhir ke awal)
width : 200px; altenate (awal ke akhir lalu akhir ke
} awal) & altenate-reverse ()
animation : animasikotak 2s ease
50% { keadaan akhir infinite altenate ;
width : 500px;
height : 200px fill-mode : mempunyai 4 keyword
} none (tdk ada)
forwards (berhenti di keadaan akhir)
100% { keadaan akhir backwards () | both ()
width : 500px; animation : animasikotak 2s ease
height : 500px infinite altenate forwards ;
}

} play-state : running (jalan saja

sebagaimana mestinya / normal saja)
paused (berhenti / animasi nya ga akn
jln)
animation : animasikotak 2s ease
infinite altenate forwards paused ;
PEMBAHASAN
UNTUK
PHP
DASAR
CLIENT SIDE SCRIPRING &
SERVER-SIDE SCRIPTING

01
Definisi Client

HTML, CSS, & JAVACRIPT DI SEBUT CLIENT SIDE

SCRIPRING KARNA SEMUA PEMORESANNYA
TERJADI DISIS CLIENT / KOMPUTER ITU SENDIRI

02
Definisi Server

web browses / (client side) akan

mengirimkan sebuah request lalu
meminta sesuatu ke web server

03
web server

Apaache, IIS, nginx, tomcat,

lighttpd, dll

04
DATABASE

MySQL, SQL server, Oracle,

PostgreSQL, dll

05
ALL IN ONE PACKAGES

WAMP, MAMP, LAMP, XAMPP