laporan pemrograman berbasis web tugas 4 cascading style sheets

Laporan Pemrograman Berbasis WEB

of 15

CASCADING STYLE SHEETS

(CSS)

Oleh

Darmawan Ramadana

1210651040

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH JEMBER

2013/2014


of 15

1. Tujuan

Memahami konsep dasar CSS dan penggunaannya pada web

2. Teori

Definisi

Cascading Style Sheets dapat diartikan berupa aliran dari suatu kode ke kode lain yang

saling berhubungan dengan fungsi untuk mengatur format / tampilan suatu halaman

HTML.

Keuntungan Menggunakan CSS

- Memudahkan dalam penggantian format secara keseluruhan

- Lebih praktis

- Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web

Perintah CSS

Perintah untuk CSS diawali dengan selector lalu diikuti dengan sepasang kurung kurawal

yang didalamnya berisi atribut dari css, Contoh

h1{color:red;}

Keterangan :

- h1 adalah selector (semua tag “h1” dalam kode html akan diatur disini)

- color merupakan sebuah property dari CSS

- dan red adalah value / nilai dari property CSS

Judul Laporan :

Cascading Style Sheets (CSS) – Tugas 4 Pemrograman Berbasis Web


of 15

Pengelompokan Selector :

Perintah CSS juga dapat dituliskan dengan berbagai macam selector dengan cara

menggunakan pemisah koma, contoh jika ingin mengatur tag-tag h1, h2, h3 dengan

pengaturan berwarna merah, maka perintah CSSnya sebagai berikut :

h1, h2, h3{color:red;}

Penggunaan Multi Property

- Untuk mengatur lebih dari satu property gunakan pemisah titik koma (;).

Contoh :

h1, h2, h3{

color:red;

font-family:arial;

font-size:150%;

}

Pemasangan CSS pada HTML

Ada 3 cara menggunakan CSS ke dalam HTML:

1. Inline CSS

Yaitu kode CSS yang dituliskan langsung ke dalam tag HTML, penulisan dengan

cara ini tidak memerlukan selector dalam CSS.

Contoh :

<p style=“color:blue;“>

Isi paragraph.

</p>

2. Embedded CSS

Menempelkan kode CSS diantara tag <head> dan </head> atau dapat juga diantara

tag <body> dan </body>


of 15

Contoh :

<head>

<style type=”text/css”>

P{color:blue;}

</style>

</head>

3. Import CSS file

Yaitu kode CSS yang dituliskan pada file tersendiri berekstensi .css, untuk cara

penggunaannya menggunakan tag <link>

Contoh :

<head>

<link rel=“stylesheet“ type=“text/css“ href=“css/style.css“

media=“screen“>

</head>

Keterangan :

Pada kode href merujuk pada file CSS, yaitu berada pada folder css dengan nama file

style.css

Class Selector

Class selector adalah penulisan selector untuk sekelompok elemen yang sering digunakan

pada beberapa elemen.

Format penulisan class selector :

.nama_class_selector{property:value;}

Deklarasi pada HTML menggunakan atribut class

Contoh :

<div class=”nama_class_selector”>isi</div>


of 15

Penulisan kode css :

.tengah{text-align:center;}

p.tengah{color:red;}

h1.kiri{color:blue;}

h1.tengah{color:black;}

Pemakaian kode CSS ke HTML :

<p class=“tengah”>Teks tengah akan berwarna merah</p>

<div class="tengah">

<h1>Tag h1 tengah akan berwarna hitam</h1>

</div>

<h1 class="kiri">Tag h1 kiri akan berwarna biru</h1>

ID Selector :

- ID selector digunakan untuk menentukan format style pada elemen tunggal yang unik

- Menggunakan atribut id pada HTML, dan didefinisikan dengan tanda # pada sintaks

CSS

Contoh :

#selector{

color:red;

}

Pemanggilan pada Division :

<div id="selector">isi</div>


of 15

3. Tugas

Mengolah CSS pada folder css yang diberikan pada pertemuan ini:

1. Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis

font, ukurannya sama dengan paragraph pertama).

Pada paragraph pertama menggunakan pengaturan CSS ID Selector sebagai

berikut :

#isi p{

color:black;

font: 11px Candara, Arial, Tahoma;

padding-bottom:5px;

padding-left:10px;

text-align:justify;

}

Pada pemanggilan dalam division dengan nama “isi” seperti berikut :

<div id="isi">

<h1 style="color:blue; font:bold 16px Candara, Arial, Tahoma;"> Ayo

Minum Susu</h1>

<img src="susu.jpg" style="float:left;padding-right:10px;"/>

<p>Susu adalah sebuah cairan bergizi yang dihasilkan oleh kelenjar susu

dari mamalia betina. Susu adalah sumber gizi utama bagi bayi sebelum

mereka dapat mencerna makanan padat. Susu binatang (biasanya sapi)

juga diolah menjadi berbagai produk seperti mentega, yoghurt, es krim,

keju, susu kental manis, susu bubuk dan lain-lainnya untuk konsumsi

manusia. Semua orang di dunia ini membutuhkan susu untuk menopang

kehidupannya. Baik dari bayi sampai orang yang sudah lanjut

usia.<br>Khasiat susu sapi ternyata banyak sekali. Susu yang banyak

digemari anak-anak ini disebut juga darah putih bagi tubuh karena

mengandung banyak viatmin dan berbagai macam asam amino yang baik

bagi kesehatan tubuh. Dalam segelas susu terdapat antara lain:

<ul>

<li>Potasium, yang menggerakkan pembuluh darah agar tetap

stabil, menghindarkan Anda dari penyakit darah tinggi dan jantung.</li>

<li>Zat besi, mempertahankan kulit tetap bersinar.</li>

<li>Tyrosine, mendorong hormon kegembiraan dan membuat tidur

lebih nyenyak.</li>

<li>Kalsium, menguatkan tulang.</li>

<li>Magnesium, menguatkan jantung dan sistem saraf sehingga

tidak mudah lelah.</li>

<li>Yodium, meningkatkan kerja otak cepat.</li>


of 15

<li>Seng, menyembuhkan luka dengan cepat.</li>

<li>Vitamin B2, meningkatkan ketajaman penglihatan.</li>

</ul>

</p>

</div>

Agar semua komponen yang berada pada division id selector isi sama maka

tambahkan saja tag yang berada division isi ke dalam css sebagai selector, maka

kode CSS menjadi seperti berikut :

#isi p, ul{

color:black;


padding-bottom:5px;

padding-left:10px;

text-align:justify;

}

2. Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan

kursor, warna teks dan background-nya berubah.

#menu{

height:40px;

width:960px;

background:url(bg-nav.jpg) repeat-x;

}

#menu table{

border:none;

}

#menu a{

color:white;

text-decoration:none;

}

#menu a:hover{

background-color:#cde;

color:blue;

}


of 15

#menu td{

height:40px;

text-align:center;

vertical-align:middle;

color:#fff;

font: bold 14px Candara, Arial, Tahoma;

}

Pemanggilan pada division id dengan nama “menu”

<div id="menu">

<table width="100%">

<tr>

<td align="center"><a href="#">Depan</a></td>

<td align="center"><a href="#">Profil</a></td>

<td align="center"><a href="#">Produk</a></td>

<td align="center"><a href="#">Kontak</a></td>

<td align="center"><a href="#">Forum</a></td>

</tr>

</table>

</div>

3. Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten

(misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda.

Pada soal no 3 ini diselesaikan menggunakan metode import CSS dengan nama

file style.css, berikut pemanggilan file pada tag <link> didalam tag <head>

<head>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

Berikut CSSnya :

/* berikut css yang sudah tertera dalam tag <style> didalam head */

.table-menu{

vertical-align: top;

border-colapse: colapse;

border: 1px solid black;

background-color: #0066cc;

}


of 15

/* berikut css yang sudah tertera dalam file style.css */

.text-menu h1, h2, h3, h4, h5, h6{

color: #023666;

padding:10px;

margin:10px;

background-color:#58b9f5;

text-align:center;

font-style:italic;

border-top-left-radius:20px;

border-bottom-right-radius:20px;

-moz-border-radius-topleft:20px;

-moz-border-radius-bottomright:20px;

-webkit-border-top-left-radius:20px;

-webkit-border-bottom-right-radius:20px;

}

.text-menu p{

color: #023666;

padding:10px;

margin:10px;


font-size:14px;

font-family:Calibiri;

text-align:justify;

border-bottom-left-radius:7px;


}

Pemanggilan classnya :

<td width="30%" class="table-menu text-menu">

<h3>Judul Konten</h3>

<p>

<?php

for($i=0;$i<20;$i++){

echo "ini adalah isi dari konten ";

}

?>


of 15

</p>

</td>

Keterangan : nama class yang berwana merah memanggil class pada tag <style>

dalam <head> sedangkan yang berwarna hijau memanggil class dalam file

style.css

4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman.

Untuk menambahkan teks / tulisan pada header menggunakan pengaturan CSS

sebagai berikut :

.teks-header{

height:200px;

font-size:25px;

color:#fff;

padding-left:120px;

background-image:url('header.jpg');

background-repeat:no-repeat;

}

Pada pengaturan CSS diatas terlihat diberikan sebuah gambar latar dengan nama

“header.jpg” agar tulisan bisa berada di atas gambar, berikut pemanggilan class

CSSnya :

<tr>

<td colspan=2 class="teks-header">

<p>CASCADING STYLE SHEETS (CSS)<br>By : Darmawan

Ramadana</p>

</td>

</tr>


of 15

Output :

Source code CSS

.text-menu h1, h2, h3, h4, h5, h6{

color: #023666;

padding:10px;

margin:10px;


text-align:center;

font-style:italic;

border-top-left-radius:20px;


-moz-border-radius-topleft:20px;

-moz-border-radius-bottomright:20px;

-webkit-border-top-left-radius:20px;

-webkit-border-bottom-right-radius:20px;

}

.text-menu p{

color: #023666;

padding:10px;

margin:10px;



of 15

font-size:14px;

font-family:Calibiri;

text-align:justify;

border-bottom-left-radius:7px;


}

.teks-header{

height:200px;

font-size:25px;

color:#fff;

padding-left:120px;

background-image:url('header.jpg');

background-repeat:no-repeat;

}

Source code HTML dan php

<html>

<head>

<title>Tugas-4 PBW</title>

<style type="text/css">

table{

border-colapse:colapse;

border:1px solid black;

}

#menu{

height:40px;

width:960px;

background:url(bg-nav.jpg) repeat-x;

}

#menu table{

border:none;

}

#menu a{

color:white;

text-decoration:none;

}

#menu a:hover{

background-color:#cde;

color:blue;

}


of 15

#menu td{

height:40px;

text-align:center;

vertical-align:middle;

color:#fff;

font: bold 14px Candara, Arial, Tahoma;

}

#isi{

padding: 10 10 10 10;

}

#isi p, ul{

color:black;


padding-bottom:5px;

padding-left:10px;

text-align:justify;

}

#isi img{

boder: 1px solid black;

width: 80px;

height: 100px;

}

.table-menu{

vertical-align: top;

border-colapse: colapse;

border: 1px solid black;

background-color: #0066cc;

}

.footer{

background-color:#023666;

}

</style>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<table width="70%" align="center">

<tr>

<td colspan=2 class="teks-header"><p>CASCADING STYLE

SHEETS (CSS)<br>By : Darmawan Ramadana</p></td>


of 15

</tr>

<tr>

<td colspan=2>

<div id="menu">

<table width="100%">

<tr>

<td align="center"><a

href="#">Depan</a></td>


href="#">Profil</a></td>


href="#">Produk</a></td>


href="#">Kontak</a></td>


href="#">Forum</a></td>

</tr>

</table>

</div>

</td>

</tr>

<tr>

<td width="70%">

<div id="isi">

<h1 style="color:blue; font:bold 16px Candara,

Arial, Tahoma;"> Ayo Minum Susu</h1>

<img src="susu.jpg" style="float:left;padding-

right:10px;"/>

<p>Susu adalah sebuah cairan bergizi yang

dihasilkan oleh kelenjar susu dari mamalia betina.

Susu adalah sumber gizi utama bagi bayi

sebelum mereka dapat mencerna makanan padat.

Susu binatang (biasanya sapi) juga diolah

menjadi berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu

bubuk dan lain-lainnya untuk konsumsi manusia.

Semua orang di dunia ini membutuhkan susu

untuk menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut

usia.<br>Khasiat susu sapi ternyata banyak sekali. Susu yang banyak digemari anak-anak

ini disebut juga darah putih bagi tubuh karena mengandung banyak viatmin dan berbagai

macam asam amino yang baik bagi kesehatan tubuh.

Dalam segelas susu terdapat antara lain:

<ul>

<li>Potasium, yang menggerakkan

pembuluh darah agar tetap stabil, menghindarkan Anda dari penyakit darah tinggi dan

jantung.</li>

<li>Zat besi, mempertahankan kulit tetap


of 15

bersinar.</li>

<li>Tyrosine, mendorong hormon

kegembiraan dan membuat tidur lebih nyenyak.</li>

<li>Kalsium, menguatkan tulang.</li>

<li>Magnesium, menguatkan jantung dan

sistem saraf sehingga tidak mudah lelah.</li>

<li>Yodium, meningkatkan kerja otak

cepat.</li>

<li>Seng, menyembuhkan luka dengan

cepat.</li>

<li>Vitamin B2, meningkatkan

ketajaman penglihatan.</li>

</ul>

</p>

</div>

</td>

<td width="30%" class="table-menu text-menu">

<h3>Judul Konten</h3>

<p>

<?php

for($i=0;$i<20;$i++){

echo "ini adalah isi dari

konten ";

}

?>

</p>

</td>

</tr>

<tr>

<td colspan=2 height=50 class="footer">

<p style="color:#fff; font:bold 12px candara, arial,

tahoma; text-align:center;">

<?php echo "Bondowoso @ ".date('Y'); ?><br>

Tugas-4 Pemrograman Berbasis Web</p>

</td>

</tr>

</table>

</body>

</html>

laporan pemrograman berbasis web tugas 4 cascading style sheets

Design