MODUL KULIAH

PROGRAM KULIAH KARYAWAN & PROFESIONAL

STTI ITECH

Mata kuliah Aplikasi Berbasis Web ( 3 sks )

Semester
Kelas PKKP
Dosen Jefri Rahmadian S.Kom

Pertemuan : 6 (Enam) Waktu : Sabtu…… 2012

Modul 6 (Enam)

Topik CSS Layout

Sub Topik Design Layout dengan CSS

Materi  CSS Properti

 CSS Layout

Tujuan Mahasiswa memahami Properti dari CSS dan mengetahui

cara penerapannya serta mampu membuat design layout
dengan CSS
DIV dan SPAN dalam CSS

Div
Div (singkat untuk divisi) membagi isi menjadi beberapa bagian individu. Setiap bagian
kemudian dapat memiliki format sendiri, sebagaimana ditentukan oleh CSS. Div adalah
suatu wadah tingkat blok, yang berarti bahwa ada feed baris setelah tag </ div>.
Sebagai contoh, jika kita memiliki deklarasi CSS berikut:

.large {
color: #00FF00;
font-family:arial;
font-size: 4pt;
}

Kode HTML :

<div class="large">
This is a DIV sample.
</div>

Span
Span mirip dengan div dalam bahwa mereka berdua membagi konten menjadi beberapa
bagian individu. Perbedaannya adalah span yang masuk ke tingkat yang lebih halus,
sehingga kita dapat rentang untuk memformat karakter tunggal jika diperlukan. Tidak ada
feed baris setelah tag </ span>.
Sebagai contoh, jika kita memiliki deklarasi CSS berikut:

.largefont {
color: #0066FF;
font-family:arial;
font-size: 6px;
}

The HTML code

Span is not at the <span class="largefont">block level</span>.

Satuan Dalam CSS

1. Statik
 in -- satuan inchi
 cm -- satuan centimeter
 mm -- satuan milimeter
 pt -- satuan point (1point = 1/72 inchi)
 pc -- satuan pica (1pica = 12 point)
 px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
2. Relatif
 % -- satuan persen
 em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
 ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)

CSS Property

Properti Background
Property Description

background Mengatur semua properti latar dalam satu deklarasi

background-attachment Menentukan apakah gambar latar belakang tetap atau akan

muncul sroll dengan sisa halaman

background-color Mengatur warna latar belakang suatu elemen

background-image Mengatur gambar latar belakang untuk elemen

background-position Mengatur posisi awal dari gambar latar belakang

background-repeat Mengatur bagaimana gambar latar belakang akan diulangi

Properti Border dan Outline

Properti Deskripsi

border Mengatur semua perbatasan properti dalam satu deklarasi

border-bottom Mengatur semua properti border bawah dalam satu deklarasi

border-bottom-color Mengatur warna batas bawah

border-bottom-style Mengatur gaya perbatasan bawah

border-bottom-width Mengatur lebar batas bawah

border-color Mengatur warna dari empat batas

border-left Mengatur semua properti border kiri dalam satu deklarasi

border-left-color Mengatur warna batas kiri

border-left-style Mengatur gaya perbatasan kiri

border-left-width Mengatur lebar batas kiri

border-right Mengatur semua properti border kanan dalam satu deklarasi

border-right-color Mengatur warna batas kanan

border-right-style Mengatur gaya perbatasan kanan

border-right-width Mengatur lebar batas kanan

border-style Mengatur gaya dari empat batas

border-top Mengatur semua properti border atas dalam satu deklarasi

border-top-color Mengatur warna batas atas

border-top-style Mengatur gaya perbatasan atas

border-top-width Mengatur lebar batas atas

border-width Mengatur lebar dari empat batas

outline Mengatur semua properti outline dalam satu deklarasi

outline-color Mengatur warna outline

outline-style Mengatur gaya outline

outline-width Mengatur lebar outline

Properti Dimensi

Properti Deskripsi

height Mengatur tinggi elemen

max-height Mengatur tinggi maksimum suatu elemen

max-width Mengatur lebar maksimum suatu elemen

min-height Mengatur tinggi minimum suatu elemen

min-width Mengatur lebar minimum suatu elemen

width Mengatur lebar suatu elemen

Font Properties

Properti Deskripsi

font Mengatur semua properti font dalam satu deklarasi

font-family Menentukan keluarga font untuk teks

font-size Menentukan ukuran font teks

font-style Menentukan gaya font untuk teks

font-variant Menentukan apakah teks yang harus ditampilkan dalam font-

topi kecil

font-weight Menentukan berat font

Generated Content Properties

Properti Deskripsi

content Digunakan dengan : sebelum dan: sesudah pseudo-elemen,

untuk memasukkan konten yang dihasilkan

counter-increment Increment satu atau lebih counters

counter-reset Membuat atau me-reset satu atau lebih counters

quotes Mengatur jenis tanda petik untuk kutipan

List Properti
Properti Deskripsi

list-style Mengatur semua properti untuk sebuah daftar dalam satu

deklarasi

list-style-image Menentukan sebuah gambar sebagai penanda daftar-item

list-style-position Menentukan jika penanda daftar-item akan muncul dalam
atau di luar aliran konten

list-style-type Menetapkan jenis penanda list-item

Properti Margin
Properti Deskripsi

margin Mengatur semua properti margin dalam satu deklarasi

margin-bottom Mengatur margin bawah suatu elemen

margin-left Mengatur margin kiri dari suatu elemen

margin-right Mengatur margin kanan dari suatu elemen

margin-top Mengatur margin atas suatu elemen

Properti Padding
Properti Deskripsi

padding Mengatur semua properti padding dalam satu deklarasi

padding-bottom Mengatur padding bawah suatu elemen

padding-left Mengatur padding kiri suatu elemen

padding-right Mengatur padding kanan suatu elemen

padding-top Mengatur padding atas suatu elemen

Positioning Properties

Properti Deskripsi

bottom Menentukan posisi bawah dari unsur posisi

clear Menentukan yang sisi suatu elemen di mana elemen

terapung lainnya tidak diperbolehkan

clip Klip yang benar-benar diposisikan elemen

cursor Menentukan jenis kursor yang akan ditampilkan

display Menetapkan jenis kotak elemen harus menghasilkan

float Menentukan apakah kotak harus menyesuaikan terhadap
screen

left Menentukan posisi kiri elemen diposisikan

overflow Menentukan apa yang terjadi jika pelimpahan konten sebuah

kotak elemen

position Menentukan jenis metode penentuan posisi yang digunakan

untuk elemen (statis, relatif, absolut atau tetap)

right Menentukan posisi yang tepat dari elemen diposisikan

top Menentukan posisi atas elemen diposisikan

visibility Menentukan apakah elemen yang terlihat

z-index Mengatur urutan tumpukan elemen diposisikan

Tabel Properti
Properti Deskripsi

border-collapse Menentukan apakah batas tabel harus dihilangkan

border-spacing Menentukan jarak antara batas-batas sel yang berdekatan

caption-side Menentukan penempatan keterangan tabel

empty-cells Menentukan apakah atau tidak untuk menampilkan batas dan

latar belakang pada sel kosong dalam tabel

table-layout Mengatur algoritma layout yang akan digunakan untuk meja

Teks Properti
Properti Deskripsi

color Mengatur warna teks

direction Menentukan arah teks / menulis arah

letter-spacing Meningkatkan atau mengurangi spasi antara karakter pada

teks

line-height Mengatur tinggi baris

text-align Menentukan alignment horisontal teks

text-decoration Menentukan dekorasi yang ditambahkan ke teks

text-indent Menentukan indentasi dari baris pertama dalam blok-text

text-shadow Menentukan efek bayangan ditambahkan ke teks

text-transform Mengontrol kapitalisasi teks

vertical-align Mengatur alignment vertikal suatu elemen

white-space Menentukan bagaimana putih-ruang dalam suatu elemen

ditangani

word-spacing Meningkatkan atau menurunkan spasi antar kata dalam teks

CONTOH PEMBUATAN WEB DENGAN CSS

Design 2 Column (fixed Column)

File HTML

Tag <div> mendefinisikan sebuah divisi atau bagian dalam sebuah dokumen HTML.
Tag <div> sering digunakan untuk kelompok blok-elemen ke format mereka dengan style.

<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet"
type="text/css" href="style.css" />
</head>
<body>

<div id="container">
<div id="header">
<h1>
Site name
</h1>
 </div>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div id="content-container">
<div id="content">
<h2>
Page heading
</h2>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed
diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
</p>
</div>
<div id="aside">
<h3>
Aside heading
</h3>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
</p>
</div>
<div id="footer">
Copyright © Site name, 20XX
</div>
</div>
</div>
</body>
</html>

File style CSS

#container
{
margin: 0 auto;
width: 900px;
background: #fff;
}

#header
{
background: #ccc;
padding: 20px;
}

#header h1 { margin: 0; }
#navigation
{
float: left;
width: 900px;
background: #333;
}

#navigation ul
{
margin: 0;
padding: 0;
}

#navigation ul li
{
list-style-type: none;
display: inline;
}

#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content-container
{
float: left;
width: 900px;
 background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y
100% 0;
}

#content
{
clear: left;
float: left;
width: 560px;
padding: 20px 0;
margin: 0 0 0 30px;
display: inline;
}

#content h2 { margin: 0; }

#aside
{
float: right;
width: 240px;
padding: 20px 0;
margin: 0 20px 0 0;
display: inline;
}

#aside h3 { margin: 0; }

#footer
{
clear: both;
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}
CONTOH 2

<div id="container">
<div id="header">
<h1>
Site name
</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div id="content-container">
<div id="content">
<h2>
Page heading
</h2>
<p>
Lorem ipsum dolor sit amet consect etuer adipi scing
elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.
</p>
</div>
<div id="aside">
<h3>
Aside heading
</h3>
<p>
Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan.
</p>
</div>
<div id="footer">
Copyright © Site name, 20XX
</div>
</div>
</div>