aplikasi berbasis web 5 css

8/17/2019 Aplikasi Berbasis Web 5 Css

1/56

C S S

C A S C

A D I N G

S T Y

L E

S H E E T S

P E R T E M

U A N 5


2/56

TUJUAN

Memahami tentang konsep CSS

Memahami aturan penulisan pada CSS

Memahami selector sebagai pengontrol design

Memahami pembuatan background

Memformat text pada web

Memahami pengaturan bentuk font

Membuat pengaturan tabel dan pewarnaannya

Membuat hyperlink dan tombol yang menarik


3/56

CASCADE STYLE SHEET

• Digunakan para web designeruntuk mengatur style elemen yang ada dalam

halaman web mereka, mulai dari memformat text, sampai pada memformat

layout. Tuuan dari penggunaan CSS ini adalah supaya diperoleh suatu

kekonsistenan style pada elemen tertentu.

• !erkembangan CSS sendiri diawali pada tahun "##$, dimana %&C '%orld

%ide %ebConsortium(, sebuah konsorsium untuk standarisasi web,

menyusun draft proposal untuk membuat CSS ini dan akhirnya dapat

beralan.

• Selanutnya pada pertengahan tahun "##),%&C mengembangkan CSS* yang

diperbarui untuk kepentingan media lain 'tidak hanyauntuk !C web browser(.

• +khirnya mulai pada tahun *, telah dikembangkan CSS&oleh %&C yang

sampai saat ini masih terus diperbarui lagi

• -amun pada saat ini, hanya CSS* yang masih didukung oleh kebanyakan web

browser,tapi tidak demikian halnya untuk CSS&. Masih sedikit web browser

yang mendukung CSS&.


4/56

CSS CASCADING STYLE SHEETSStyles didenisikan bagaimana manampilkan elemen /TM0

Styles umumnya disimpan ke dalam Style Sheet

Styles ditambahkan /TM0 untuk membantu pekeraan

1xternal Style Sheets dapat membantu banyak pekeraan

1xternalStyle Sheet disimpan dalam CSS les

Multiple Style dapat didenisi banyak endela menadi satu

2euntungan Menggunakan CSS

3 4kuran le lebih kecil

3 0oad le lebih cepat

3 Dapat berkolaborasi dengan 5a6aScript

3 !asangan setia 7/TM03 Menghemat pekeraan tentunya, dimana hanya membuat " halaman

CSS.

3 Mudah mengganti3ganti tampilan dengan hanya merubah le CSS nyasaa


5/56


6/56

1xternal CSS

• Yaitu memanggil fle CSS dai tem!at"#$lde"l$%a&i lain' dengan %ata

lain fle CSS te!i&a( dengan fle HTML)

•*$+&e a%an mem,a-a defni&i &t.le dai fle -&&/fle&)-&& dan a%an

mengi%uti #$mat

•E%&tenal &t.le dituli& di te0t edit$ lain dengan e%&tenti$n )-&&


7/56

C1NT1H PENGGUNAAN E2TERNAL STYLESHEET


8/56

INTERNAL STYLE SHEETmenuli&%an lang&ung &-i!t CSS di fleHTML3n.a


9/56

INLINE STYLE SHEET!enuli&an %$de CSS dalam tag HTML


10/56

STRU4TUR STYLE

• Selector 8 untuk menentukan pada elemen apa style tersebut

diterapkan. Selector dapat berupa nama id elemen atau nama class.

• Deklarasi menerangkan style yang akan dibuat. 9agian ini terdiri

dari properti dan 6alue. !roperti dapat di isi dengan enis warna,

ukuran, perataan margin dll

•:alue diisi dengan nilai dari propertinya, misalnya red untuk warna

dll.

• Setiap akhir penulisan properti dan 6alue harus diakhiri dengan

tanda titik koma 'semicolon(. Tanda ini uga digunakan sebagai

pemisah antar satu properti dengan properti lain. +pabila +nda lupamemberikan tanda titik koma, maka style tersebut tidak akan

dialankan oleh browser.


11/56

• Membuat style untuk beberapa elemen yang berbeda namun stylenya

sama ; Misalkan membuat style untuk elemen h",h*, h&

• Cascade 8 metode untuk mengatur style supaya tidak teradi kon


12/56


13/56

• Class dapat digunakan untuk mengelompokkan beberapa elemensupaya memiliki style sama.


14/56

STYLE JUGA DAPAT DIGUNA4AN UNTU4 MENGATUR TAMPILAN ELEMEN DENGAN ID TERTENTU


15/56

9ALUE

• predened 6alue 8 nilai yang sudah terdenisikan oleh '7(/TM0. -ilai

ini dapat dipilih dari beberapa alternatif pilihan yang ada.• St.le di ata& diguna%an untu% mem,uat te0t miing !ada elemen (eading :)

• Dalam (al ini ;alue 2?HTML .aitu

itali-' n$mal' dan $,li@ue)

• Pe(ati%an ,a(+a !edefned ;alue dituli& tan!a dia!it tanda !eti%)

• 9ilangan

• !anang, 9esar dan !rosentase

mengatu 5aa% anta ,ai& !aaga#men5adi %ali dai u%uan #$ntn.a

Untu% men.ata%an !an5ang',e&a dan !$&enta&e' ;alue(au& di,ei%an &atuan &e!eti!0>!i0el?' in >in-(?' -m

>-entimete?' mm >milimete?'t $int& dan - i-a& )


16/56

9ALUE• 4@0

• %arna

• Untu% mem,ei ;alue ,eu!a +ana !ada !$!eti' ada ,e,ea!a -aa .ang

da!atdila%u%an .aitu dengan menuli&%an &e-aa e%&!li&it +ana .ang

diingin%an' mi&al >ed'geen' .ell$+' dll? atau dengan menuli&%ann.a dalam

%$de (e0ade&imal)


17/56

B1NT BAMILY

• Aont family digunakan untuk menentukan enis hurufBfont pada suatu

tampilan teks.

• 5enis font arial black akan diprioritaskan untuk digunakan.

• -amun apabila font tersebut tidak disupport oleh browser maka yang

digunakan arial, begitu seterusnya.

• Sebagai catatan, untuk enis font yang terdiri dari lebih satu kata

harus diapit dengan tanda petik ganda 'double uotes(.


18/56

MEM*UAT TE4S MIRING DAN TE*AL


19/56

MENGATUR U4URAN B1NT• !engaturan ukuran font dapat dilakukan dengan style

• si?e diisi angka yang menyatakan ukuran disertai satuannya


20/56

MENGATUR JARA4 *ARIS TE4S DALAM PARAGRAB

!aragraf pertamadiberikan styleuntuk mengatur

arak antar barissebesar & pixel

sedangkan paragrafkedua memiliki

arak barisdefault.


21/56

MENGU*AH ARNA TE2T


22/56

MENGU*AH ARNA *AC4GR1UND TE2T


23/56

MENGATUR JARA4 SPASI ANTAR TE2T


24/56

MEM*UAT TE2T INDENT• !ada bagian awal paragraf biasanya terdapat text indent

atau teks yang agak menorok kedalam paragraf dalam araktertentu.

• awal paragraf dibuat text indent berarak pixel.


25/56

PERATAAN TE4S >TE2T ALIGNMENT?

• !erataan teks dengan menggunakan propertitext3align 8 enisE

• :alue enis dapat digantikan dengan left, center, right dan ustify


26/56

MENGU*AH TE2T CASE


27/56

MEM*UAT DR1P CAP

• Code style di atas hanya akan berlaku untuk huruf pertama dari paragrafyang memiliki class styleku, dalam hal ini adalah huruf 9.

• Sedangkan properti


28/56

MEM*UAT TE2T DEC1RATI1N

• underline, o6erline, line3trough, maupun blink dengan properti

• text3decoration 8 optionE


29/56

MEM*UAT LAY1UT DENGAN CSS>SAMPLE :?• Dengan CSS, +nda tidak membutuhkan tabel dalam menatalayoutnya.

• 2elebihan CSS dalam layout web dibandingkan tabel adalah


30/56


31/56

LAY1UT >SAMPLE :?

•

Terdapat bagian sel yang akan kita buat.

• Sebaiknya untuk nama id pada masing3masing di6ision diberi nama

sesuai desain supaya mudah dipahami

• Style /eader

• !roperti padding menyatakan arak antara tepi sel dengan elemen yang

ada di dalamnya.9erikut contoh style lain dengan padding nya pixel

dan uga tipe garis bordernya putus3putus 'dashed(.


32/56

LAY1UT >SAMPLE :?• Style untuk footer

• Style untuk isi

• 4ntuk bagian na6igasi, karena bagian tersebut ingin diletakkandi sebelah kanan, maka berikan properti


33/56

LAY1UT >SAMPLE :?• Meskipun sudah diletakkan di sebelah kanan, ternyata bagian isi

masih belum seperti yang diinginkan sesuai desain layout.

• Fleh karena itu kita atur lebar sel untuk bagian isidengan properti

width dan uga kita beri arak sedikit antara sel isi dan footer denganproperti margin3bottom.


34/56

LAY1UT >SAMPLE :?• +da baiknya kita tambahkan sedikit arak antar bagian na6igasi dengan header, begitu pula dengan bagian

isi.

• 4ntuk keperluan ini, gunakan properti margin3top. Supayaseimbang dengan yang lain, kita beri arak " pixel

•0angkah selanutnya kita bermain3main sedikit dengan layout image nya.

• Masih ada space kosong yang besar di sebelah kanan image. 9agaimana ika kita meletakkan paragrafnya disebelah kanannya.

• 4ntuk keperluan ini, sebaiknya kita buat class untuk imagenya. 2enapa; /al ini dilakukan supayamemudahkan pengaturan image3image yang lain.

• Seandainya terdapatlebih satu image yang disisipkan ke halaman web tersebut, maka kita tidak perlu repot3repot mengatur semuanya, melainkan tinggal memanggil class nya saa.


35/56

LAY1UT >SAMPLE :?

• !roperti


36/56

P$!eti line3(eig(t diguna%an untu% mengatu 5aa% anta ,ai& te%&!aaga#


37/56

LAY1UT >SAMPLE :?• 0ho, kok gambarnya akan menyembul ke atas terhadap teks

paragrafnya; F2 kitamodikasi lagi style gambarnya. 2ita inginsupaya paragrafnya dinaikkan sedikit supaya seaar dengan image


38/56

MEM*UAT LAY1UT DENGAN CSS >SAMPLE? 9agian background 'warna abu3

abu( akan kita beri image.


39/56

• semua sel 'header,isi, footer

danna6igasi(merupakan bagiandari bagian content.

• Mengapadimasukkan kedalam bagian

content;

• /al ini dikarenakankita akan membuatstyle untuk bagiantersebut, misalnyameletakkan di

tengah halaman dan uga mengatur lebarbagian content nya.

MEM*UAT LAY1UT DENGAN CSS>SAMPLE ?


40/56



41/56

• Selanutnya kita akan membuat style untuk bagian contentdengan mengatur lebarnya adalah GH pixel dan berada di

tengah halaman.


MEM*UAT LAY1UT DENGAN CSS


42/56



43/56



44/56



45/56


MENGATUR STYLE LIST


46/56

• mengatur style suatu list seperti mengubah marker maupunindentasinya, background dll.

• +nda dapat mengubah style marker setiap elemen list

dengan menggunakan properti berikut ini list3style3type8marker

• Dengan markerdapat diganti dengan disc, circle, suare,decimal '", *, &, ...(, upper3alpha '+, 9, C, ...(, lower3alpha'a, b, c, ...(, upper3roman 'I, II, III, I:, ...(,atau lower3roman'i, ii, iii, i6, ...(

MENGATUR STYLE LIST


47/56

• Marker dapat diganti dengan image yang kita inginkan. Sebaiknyagunakan image berformat gif dan berukuran kecil.

MENGATUR STYLE LIST


48/56

MENU NA9IGASI)


49/56

STYLE PADA LIN4


50/56

STYLE PADA LIN4


51/56

STYLE PADA LIN4


52/56

STYLE PADA LIN4


53/56

STYLE PADA LIN4


54/56

TUGAS CSS

Lati(an CSS Da&a ini meli!uti

•

Te0t C$l$• Te0t Alignment

• Te0t De-$ati$n

• Te0t Tan$mati$n

• Te0t Indentati$n

• Penggunaan Cla&& dan ID

9uatlah halaman web dengan menggunakan css


55/56


56/56

aplikasi berbasis web 5 css

Documents