CSS dan Tata Letak

CSS dan Tata Letak
Pemrograman Internet (TKE 074082)
Program Studi Teknik Elektro, Unsoed
Iwan Setiawan <stwn at unsoed.ac.id>
Tahun Ajaran 2011/2012
a, a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
p:first-letter {
font-weight: bold;
font-size:150%;
}
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
ol {
counter-reset: item X;
display: block;
}
ol li {
display: block;
}
ol li:before {
content: counter(item, decimal) ". ";
counter-increment: item -1;
}
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Berapa cara pendefinisian CSS?
selector.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
elemen/tag, id (#), class (.)
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Membagi Halaman Web
(untuk tata letak yang lebih baik)
Memberikan gaya pada setiap elemen,
atau kelompok elemen, bagian teks
atau halaman tertentu.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Tata letak yang lebih kompleks.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Contoh CSS
.special1 {
background­color: yellow;
font­weight: bold;
}
.special2 {
color: red;
font­family: cursive;
}
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Bagian-Bagian Halaman: <div>
✔ Sebuah bagian dari sebuah halaman web (blok).
<div class=”special1”>
<p class=”special2”>Ini kalimat istimewa!</p>
</div>
✔ Tag atau elemen div digunakan untuk membuat bagian­bagian dalam sebuah halaman.
✔ Tidak terlihat atau tertampil secara default, tetapi kita dapat membuat gaya padanya.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Bagian Inline: <span>
✔ Sebuah elemen inline untuk menerapkan gaya pada rentang teks tertentu.
<h2>Selamat Datang!</h2>
<p>Selamat melihat <span class="special1">produk</span> kami.</p>
<p>Sila membandingkannya dengan yang <span class="special2">lain</span>!</p>
✔ Seperti div, span tidak terlihat atau tertampil secara default, tetapi kita dapat membuat gaya padanya yang akan diterapkan pada teks di dalam tag span.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Context Selector CSS
selector1 selector2 {
properti
}
✔ Menerapkan properti pada selector2 jika selector2 berada di dalam selector1.
selector1 > selector2 {
properti
}
✔ Menerapkan properti pada selector2, jika selector2 langsung berada di dalam selector1 tanpa ada tag lain yang mendahuluinya.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Contoh Context Selector (1)
HTML
<p>Berbelanjalah di <strong>Toko kami</strong>...</p>
<ul>
<li>Tersedia <strong>barang elektronik</strong>!</li>
<li>atau barang­barang lainnya!</li>
</ul>
CSS
li strong { text­decoration: underline; }
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Contoh Context Selector (2)
HTML
<div id="ad">
<p>Berbelanjalah di <strong>Toko kami</strong>...</p>
<ul>
<li class="important">Tersedia <strong>barang elektronik</strong>!</li>
<li>atau <strong>barang yang lainnya!</strong></li>
</ul>
</div>
CSS
#ad li.important strong { text­decoration: underline; }
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Model Boks CSS
✔ Untuk tujuan tata letak, setiap elemen disusun:
 isi elemen (content)
 batas elemen (border)
 jarak isi dan batas elemen (padding)
 jarak batas elemen dan isi lain (margin)
✔ Lebar = lebar content + padding kanan/kiri + border kanan/kiri + margin kanan/kiri
✔ Tinggi = tinggi content + padding atas/bawah
+ border atas/bawah + margin atas/bawah
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
IE6?
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Alur Dokumen
Elemen Blok
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Elemen Blok dan Inline
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Properti CSS untuk border (1)
h2 { border: 5px solid red; }
Properti
Penjelasan
border
ketebalan, gaya, ukuran, pada 4 sisi
✔ Ketebalan: px, pt, em atau thin, medium, thick
✔ style: none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid
✔ color: seperti teks dan latar belakang
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Properti CSS untuk border (2)
Properti
Penjelasan
border-color, border-width,
border-style
Properti spesifik semua sisinya
border-bottom, border-left,
border-right, border-top
Semua properti sesuai dengan sisinya
border-bottom-color,
border-bottom-style,
border-bottom-width,
border-left-color, ...
Properti border sesuai sisinya
Lihat http://w3schools.com/css/css_reference.asp#border
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Contoh border
h2 {
border­left: thick dotted #CC0088;
border­bottom­color: rgb(0, 128, 128);
border­bottom­style: double;
}
✔ Properti border setiap sisi dapat diset.
✔ Jika kita menghapus sebuah properti maka properti tersebut akan diset ke default.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Properti CSS untuk padding
Properti
Penjelasan
padding
Padding 4 buah sisi
padding-top
Padding sisi atas
padding-right
Padding sisi kanan
padding-bottom
Padding sisi bawah
padding-left
Padding sisi kiri
Lihat http://w3schools.com/css/css_reference.asp#padding
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Contoh padding
p { padding: 20px; border: 3px solid black; }
h2 { padding: 0px; background­color: yellow; }
p {
padding­left: 200px; padding­top: 30px;
background­color: fuchsia;
}
✔ Padding setiap sisi dapat diset masing­masingnya.
✔ Warna latar belakang padding mengikuti elemen.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Properti CSS untuk margin
Properti
Penjelasan
margin
margin 4 buah sisi
margin-top
margin sisi atas
margin-right
margin sisi kanan
margin-bottom
margin sisi bawah
margin-left
margin sisi kiri
Lihat http://w3schools.com/css/css_reference.asp#margin
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Contoh margin
p {
margin: 50px;
background­color: fuchsia;
}
p {
margin­left: 8em;
background­color: fuchsia;
}
✔ Margin selalu transparan, tidak berisi latar belakang elemen, dst.
✔ Setiap sisi margin dapat diset masing­masing.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Properti CSS untuk Dimensi
p { width: 350px; background­color: yellow; }
h2 { width: 50%; background­color: aqua; }
Properti
Penjelasan
width, height
Seberapa lebar dan tinggi sebuah elemen
(blok)
max-width, max-height,
min-width, min-height
Ukuran maksimal dan minimal elemen
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
auto margin
p {
margin­left: auto;
margin­right: auto;
width: 750px;
}
✔ Jika width tidak diset maka akan mengambil semua lebar halaman
✔ Untuk elemen inline dalam elemen blok gunakan text­align: center;
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Elemen Floating
Properti CSS untuk float
Properti
Penjelasan
float
Memposisikan elemen di sisi tertentu. Nilainya:
left, right, none (default.)
✔ Elemen yang diset float akan dihilangkan dari alur dokumen normal
✔ Teks di sekitar elemen float akan “menyesuaikan diri” posisinya.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Contoh float
HTML
<img src="images/baturraden.png" alt="Baturraden" class="imageheader" />
Baturraden adalah sebuah lokawisata yang terletak di lereng Gunung Slamet.
CSS
img.imageheader {
float: left;
}
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
float vs. alignment
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Elemen yang diset float seharusnya
mempunyai nilai properti width.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Contoh clear
p { background­color: fuchsia; }
h2 { clear: right; background­color: yellow; }
Properti clear digunakan agar elemen float tidak menutupi elemen yang diset clear. Nilai: left, right, none.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
div#sidebar { float: right; }
p { clear: right; }
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Terkadang elemen isi terlalu sedikit sehingga
ketika digabungkan dengan elemen float,
hasilnya tidak sesuai dengan keinginan.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
HTML
<p><img src="images/baturraden.png" alt="Baturraden" />Baturraden adalah sebuah lokawisata yang terletak di lereng Gunung Slamet</p>
CSS
p { border: 2px dashed black; }
img { float: right; }
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Dibutuhkan properti overflow.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
HTML
<p><img src="images/baturraden.png" alt="Baturraden" />Baturraden adalah sebuah lokawisata yang terletak di lereng Gunung Slamet</p>
CSS
p { border: 2px dashed black; overflow: hidden}
img { float: right; }
Properti overflow menentukan apa yang akan dilakukan jika isi elemen
terlalu besar. Nilai: auto, visible, hidden, atau scroll.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Tata Letak dengan
Kolom Banyak
HTML
<div>
<p>paragraf pertama</p>
<p>paragraf kedua</p>
<p>paragraf ketiga</p>
Teks lain yang bermanfaat.
</div>
CSS
p { float: right; width: 20%; margin: 0.5em;
border: 2px solid black; }
div { border: 3px dotted green; overflow: hidden; }
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Ukuran dan Posisi
Properti position
div#ad {
position: fixed;
right: 10%;
top: 45%;
}
Properti
Nilai
Penjelasan
position
static
Posisi default
relative
Posisi relatif terhadap posisi normal
absolute
Posisi tetap terhadap elemen isi
fixed
Posisi tetap terhadap jendela peramban
top, right,
bottom, left
Posisi pojok kotak
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Posisi absolute
#menubar {
position: absolute;
left: 400px;
top: 50px;
}
✔ Dihilangkan dari alur dokumen, seperti
float.
✔ Posisi relatif terhadap elemen blok yang melingkupinya, dengan asumsi elemen blok tersebut menggunakan posisi absolute atau relative pula.
✔ Posisi sebenarnya ditentukan dengan top, bottom, left, right.
✔ Sertakan pula nilai properti width.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Posisi relative
#area2 { position: relative; }
✔ Elemen absolute diposisikan normal terhadap offset pojok pada semua halaman web.
✔ Untuk menghindari elemen absolute memposisikan dirinya sendiri relatif terhadap pojok elemen, masukkan elemen absolute di dalam elemen yang mempunyai properti relative.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Posisi fixed
✔ Dihilangkan dari alur dokumen normal.
✔ Posisi relatif terhadap jendela peramban, bahkan ketika pengguna menggulung jendela, elemen akan berada pada posisi semula.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
alignment vs. float vs. position
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
alignment
Jika memungkinkan, letakkan elemen
dengan mensejajarkan isinya.
Horisontal: text­align, pada elemen blok, mensejajarkan isi saja.
Vertikal: vertical­align, pada elemen inline, mensejajarkan
secara vertikal dalam isi elemen.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Jika pensejajaran tak berhasil, float elemen.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Jika float tak berhasil, gunakan position.
(tidak perlu banyak menggunakan position absolute/fixed)
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Properti vertical-align
Properti
Penjelasan
vertical-align
Menentukan di mana elemen inline disejajarkan
secara vertikal dengan melihat isi lain pada baris
yang sama di dalam kotak elemen boksnya.
✔ Nilai: top, middle, bottom, baseline (default), sub, super, text­top, text­bottom, atau nilai panjang atau %
✔ Baseline berarti sejajar dengan bagian bawah huruf yang tidak menggantung.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
<p style="background­color: red; padding: 0px; margin: 0px">
<img src="images/smiley.png" alt="smile" />
</p>
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Kotak Inline Lebih Rinci
✔ Properti ukuran (width, height, min­width, dst.) diabaikan untuk kotak inline.
✔ Properti margin­top dan margin­bottom diabaikan, tetapi tidak untuk margin­left dan margin­right.
✔ Properti text­align mengendalikan posisi horisontal kotak inline di dalamnya, tetapi tidak untuk kotak (elemen) blok di dalam halaman web.
✔ Setiap properti vertical­align mensejajarkan secara vertikal dalam kotak bloknya.
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Properti display
h2 { display: inline; background­color: yellow; }
✔ Nilai: none, inline, block, run­in, compact, ...
✔ Gunakan secara bijak karena dapat mengubah tata letak halaman.
Properti
Penjelasan
display
Set tipe model boks CSS yang ingin ditampilkan
untuk sebuah elemen
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
HTML
<ul id="topmenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
CSS
#topmenu li {
display: inline;
border: 2px solid gray;
margin­right: 1em;
}
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Properti visibility
p.secret {
visibility: hidden;
}
✔ Elemen yang disembunyikan akan tetap mengambil ruang pada layar.
✔ Dapat digunakan untuk menampilkan atau tidak isi HTML secara dinamis yang berhubungan dengan respon sebuah permintaan.
Properti
Penjelasan
visibility
Set apakah sebuah elemen akan ditampilkan ke
layar. Nilai: visible, hidden, none
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed
Daftar Bacaan
●
●
●
Stepp, M., Miller, J. 2010. Page Sections and the CSS Box Model, presentasi Web Programming Step by Step
Stepp, M., Miller, J. 2010, Floating Layouts, presentasi Web Programming Step by Step
Stepp, M., Miller, J. 2010, Positioning, presentasi Web Programming Step by Step
Pemrograman Internet (TKE 074082) ­ Program Studi Teknik Elektro, Unsoed