Pemrograman Basis Data Berbasis Web

1
Pemrograman Basis Data Berbasis Web

• Pertemuan Ke-5
• (CSS)

2
Sub Pokok Bahasan

• CSS?
• Contoh sederhana
• Selector
• Mekanisme mengaplikasikan CSS
• Elemen-elemen CSS

3
CSS?

• Singkatan dari Cascading Style Sheet
• Merupakan suatu cara untuk memformat atau membuat
  layout halaman web menjadi lebih menarik dan
  mudah dikelola.
• Di dalamnya terdapat banyak style.
• CSS dapat dituliskan pada bagian ltbodygt, ltheadgt
  suatu dokumen HTML atau diletakkan di sebuah file
  eksternal.
• Perintah-perintah CSS dibatasi oleh tag ltstylegt
  dan lt/stylegt

4
Contoh Sederhana
Script HTML lthtmlgt ltheadgt
lttitlegtStyleSheet Sederhana lt/titlegt
ltstylegt h1 font-family
verdana color red text-align
center lt/stylegt lt/headgt ltbodygt
lth1gtStyleSheet Sederhanalth1gt lt/bodygt lt/htmlgt

• Tampilan

5
Selector

• Adalah nama yang diberikan untuk setiap style
  berbeda yang dibuat. Di dalam style didefinisikan
  bagaimana setiap selector akan bekerja (font,
  color dan lain-lain.). Kemudian di dalam bagian
  body halaman web, selector tersebut dipanggil
  untuk mengaktifkan style yang telah
  didefinisikan.

• Jenis-jenis Selector
• Selector HTML
• Selector Class
• Selector ID

6
Selector HTML

• Digunakan untuk mendefinisikan style yang
  berhubungan dengan tag HTML, melakukan redefinisi
  tag normal HTML
• Syntax SelectorHTML PropertiNilai

Script HTML lthtmlgt ltheadgt lttitlegtSelector
HTMLlt/titlegt ltstyle type"text/css"gt
b font-familyarial font-size14px
colorred lt/stylegt lt/headgt ltbodygt
lt!-- memanggil selector b yang me-redefinisi-kan
ltbgt --gt ltbgtTulisan ini tebal karena
menggunakan style CSSlt/bgt lt/bodygt lt/htmlgt
Tampilan
7
Selector Class

• Digunakan untuk mendefinisikan style yang dapat
  dipakai tanpa melakukan redefinisi tag HTML.
• Syntax ClassSelector PropertiNilai

Script HTML lthtmlgt ltheadgt lttitlegtSelector
Classlt/titlegt ltstyle type"text/css"gt
.headline font-familyarial font-size14px
colorred lt/stylegt lt/headgt ltbodygt
ltb class"headline"gt Tulisan ini tebal
karena pengaruh selector class headline
lt/bgtltbrgt lti class"headline"gt
Tulisan ini dicetak miring karena selector class
headline lt/igt lt/bodygt lt/htmlgt
Tampilan
8
SPAN dan DIV

• Dua tag yang sering dikombinasikan dengan
  selector class adalah ltSPANgt dan ltDIVgt
• Tag ltSPANgt adalah "inline-tag" dalam HTML,
  berarti tidak ada pergantian baris (line break)
  yang disisipkan sebelum atau setelah
  penulisannya.
• Tag ltDIVgt adalah "block tag" dalam HTML, berarti
  pergantian baris secara otomatis disisipkan untuk
  memberikan jarak antara blok yang dibuat dengan
  teks atau blok lain sebelum dan sesudahnya
  (seperti tag ltPgt atau ltTABLEgt).
• Tag ltDIVgt sering digunakan untuk implementasi
  layer karena layer merupakan blokblok informasi
  terpisah. Tag ltDIVgt merupakan pilihan yang tepat
  saat membuat layer pada halaman web.

9
Selector ID

• Digunakan untuk mendefinisikan style yang
  berhubungan dengan suatu object memanfaatkan ID
  unik, biasa digunakan saat bekerja dengan layer
• Syntax IDSelector PropertiNilai

Tampilan
10
Script HTML lthtmlgt ltheadgt lttitlegtSelector
IDlt/titlegt ltstyle type"text/css"gt layer1
positionabsolute left100top75
z-index2 layer2 positionabsolute
left130top120 z-index1 lt/stylegt
lt/headgt ltbodygt ltdiv id"layer1"gt lttable
border"1" bgcolor"cyan"gt lttrgt lttdgtIni adalah
layer 1ltbrgtDiletakkan pada posisi
(100,100)lt/tdgtlt/trgt lt/tablegt lt/divgt
ltdiv id"layer2"gt lttable border"1"
bgcolor"yellow"gt lttrgtlttdgtIni adalah layer
2ltbrgtDiletakkan pada posisi (130,120)lt/tdgtlt/trgt lt
/tablegt lt/divgt lt/bodygt lt/htmlgt
11
Pengelompokan Selector

• Untuk beberapa style yang sebagian properti-nya
  memiliki nilai yang sama, misalnya jenis font
  yang sama mendefinisikan font tidak perlu
  dilakukan satu demi satu untuk setiap selector.
  Pendefinisian dapat dikelompokkan, dengan cara
  melewatkan font ke semua selector dalam satu kali.

12
Contoh Pengelompokan Selector
Sebelum pengelompokan .headlines
font-familyarial colorblack
backgroundyellow font-size14pt
.sublines font-familyarial
colorblack backgroundyellow
font-size12pt .infotext
font-familyarial colorblack
backgroundyellow font-size10pt
Setelah pengelompokan .headlines, .sublines,
.infotext font-familyarial
colorblack backgroundyellow .headlines
font-size14pt .sublines font-size12pt .inf
otext font-size 10pt
13
Mekanisme Mengaplikasikan CSS

1. Style didefinisikan dalam tag HTML (tag tunggal)
2. Style didefinisikan di dalam bagian ltheadgt dan
   diaplikasikan untuk seluruh dokumen HTML
   tersebut.
3. Style didefinisikan di file eksternal yang
   selanjutnya dapat digunakan oleh dokumen HTML
   manapun dengan memasukkan CSS tersebut dalam
   dokumen yang diinginkan melalui URI.

14
Style dalam tag tunggal
CSS mendefinisikan tag tunggalnya hanya dengan
menambahkan style seperti style"styledefinitions
tyleattribute"
Script HTML lthtmlgt ltheadgt
lttitlegtPenggunaan CSS Tag Tunggallt/titlegt
lt/headgt ltbodygt Ini adalah contoh ltb
style"font-size16pxcolorblue"gt bold lt/bgt
dengan menggunakan CSS. lt/bodygt lt/htmlgt
Tampilan
15
Style untuk 1 dokumen HTML
CSS dapat didefinisikan untuk satu halaman secara
keseluruhan hanya dengan menambahkan suatu
definisi style pada bagian head dokumen HTML.
Tampilan
16
Script HTML lthtmlgt ltheadgt
lttitlegtPenggunaan CSS untuk satu halaman
Weblt/titlegt ltstyle type"text/css"gt .headlin
es, .sublines, .infotext font-familyarial co
lorblue backgroundcyan font-weightbold .
headlines font-size14pt .sublines
font-size12pt .infotext font-size10pt
lt/stylegt lt/headgt ltbodygt ltspan
class"headlines"gtSelamat Datanglt/spangtltbrgt
ltdiv class"sublines"gt Ini adalah contoh
penggunaan web yang menggunakan CSS.ltbrgt Contoh
ini menggunakan CSS untuk satu halaman
Web.ltbrgt Pendefinisian style cukup dilakukan di
tag head.ltbrgt lt/divgt ltbrgt lttable
border"2"gtlttrgt lttd class"sublines"gt Style juga
dapat dilakukan dalam elemen table. lt/tdgtlt/trgt
lt/tablegt ltbrgt lthrgt ltdiv
class"infotext"gt contoh penggunaan CSS untuk
satu halaman lt/divgt lthrgt
lt/bodygt lt/htmlgt
17
Style dalam file eksternal
CSS dapat didefinisikan untuk semua halaman hanya
dengan menulis definisi CSS di dalam sebuah file
teks yang selanjutnya dirujuk oleh setiap halaman
web yang akan menggunakannya. Dengan demikian
jika suatu saat ingin dilakukan perubahan style
yang berlaku untuk semua halaman Web maka yang
diubah ada file teks eksternal tersebut.
18
Script HTML lthtmlgt ltheadgt
lttitlegtPenggunaan CSS Eksternallt/titlegt
ltlink relstylesheet href"style.css"
type"text/css"gt lt/headgt ltbodygt ltspan
class"headlines"gtSelamat Datanglt/spangtltbrgt
ltdiv class"sublines"gt Ini adalah
contoh penggunaan web yang menggunakan CSS.ltbrgt
Contoh ini menggunakan CSS
Eksternal.ltbrgt Pendefinisian
pemanggilan style dilakukan dengan menggunakan
tag link.ltbrgt lt/divgt lttable
border"2"gtlttrgt lttd class"sublines"gt Style
juga dapat dilakukan dalam elemen
table. lt/tdgtlt/trgt lt/tablegt lthrgt
ltdiv class"infotext"gtcontoh penggunaan CSS
eksternallt/divgt lthrgt lt/bodygt lt/htmlgt
File style.css .headlines, .sublines, .infotext
font-familyarial colorblue
backgroundcyan font-weightbold
.headlines font-size14pt .sublines
font-size12pt .infotext font-size10pt
19
Elemen-elemen CSS

• Font
• Text
• Color

20
Font

• Digunakan untuk mengatur tingkah-laku huruf
  (font). Elemen ini mempunyai beberapa properti.
  Satu properti dapat mempunyai beberapa nilai.

21
Text

• Element text akan membuat tampilan teks menjadi
  lebih menarik

22
Color

• Elemen color yang digunakan untuk mengatur warna
  teks dan background halaman web

23
Summary

• CSS (Cascading Style Sheet) digunakan untuk
  memformat atau membuat layout halaman web menjadi
  lebih menarik dan mudah dikelola.
• Ada 3 mekanisme untuk mengaplikasikan CSS, yaitu
  Style didefinisikan dalam tag HTML (tag tunggal),
  di dalam bagian ltheadgt, didefinisikan di file
  eksternal.
• Elemen-elemen CSS terdiri dari Font, Text, Color
  dan Link

24
Daftar Pustaka

• Chris Bates 2006. Web Programming Building
  Internet Applications, Third Edition, John Wiley
  Sons Ltd, England.
• Husni 2007. Pemrograman Database Berbasis Web,
  Graha Ilmu, Yogyakarta.
• Sebesta, R.W. 2002, Programming the World Wide
  Web, Addison Wesley.