Materi CSS

Rais
PalComTech
Publisher
Penulis : Rais
Editor : Dewi Putri
Desain Kover : Rais

Diterbitkan pertama kali oleh : PalComTech Publisher

Cetakan Pertama, 2011

ii |
Kata Pengantar
Pertama-tama, saya mengucapkan puji dan syukur kepada Tuhan Yang Maha
Esa atas Berkat dan Rahmat-Nya. Selain itu, saya juga mengucapkan terima
kasih karena Anda mau memiliki dan membaca buku ini sebagai salah satu
referensi Anda. Kehadiran buku ini diharapkan dapat membantu pembaca
dalam membuat desain web yang menarik dan sesuai dengan keinginan.

Semoga buku ini dapat menambah pengetahuan dan kemampuan bagi para
pembaca sekalian, baik yang masih pemula maupun yang sudah mahir dan
mudah-mudahan buku ini dapat menjadi pedoman dan pegangan bagi Anda.

Terima kasih juga untuk rekan di PalComTech Publisher yang tidak dapat
disebutkan satu per satu, yang telah membantu dalam menyelesaikan buku ini.

Saya menyadari pasti ada kekurangan dalam penyajian, ejaan, tulisan, dan
gambar yang kurang tepat dalam buku ini. Oleh karena itu saya meminta maaf.
Semoga buku ini bermanfaat bagi Anda.

Palembang, Februari 2011

Penulis

| iii
Daftar Isi

BAB 1. Pengenalan CSS
Pengertian CSS .............................................................................................................. 1
Web Editor ...................................................................................................................... 1
Kegunaan CSS................................................................................................................ 3
Penggunaan CSS .......................................................................................................... 4
Inline Style ........................................................................................................... 4
Internal Style ...................................................................................................... 5
External Style ...................................................................................................... 7
Aturan Penulisan CSS.................................................................................................. 9
Tag Selektor ........................................................................................................ 9
Class Selektor ..................................................................................................... 9
ID Selektor ........................................................................................................... 10

BAB 2. Style Fonts
Property Fonts ............................................................................................................... 15
Font-Family ......................................................................................................... 15
Font-Style ............................................................................................................ 17
Font-Size .............................................................................................................. 18
Font-Weight ....................................................................................................... 20
Font-Variant ........................................................................................................ 22
Study Case ...................................................................................................................... 23

BAB 3. Style Text
Property Text .................................................................................................................. 25
Color ...................................................................................................................... 25
Text-Align ............................................................................................................ 27
Text-Decoration ................................................................................................ 29
Text-Transform .................................................................................................. 31
Text-Indent .......................................................................................................... 32
Line-Height ......................................................................................................... 34
Letter-Spacing ................................................................................................... 36
Word-Spacing .................................................................................................... 37
Study Case ...................................................................................................................... 38

iv |
BAB 4. Style Background
Property Background ........................................................................................... 41
Background-Color ..................................................................................... 41
Background-Image .................................................................................. 43
Background-Repeat ................................................................................ 45
Background-Position .............................................................................. 47
Background-Attachment ........................................................................ 50
Study case ................................................................................................................ 52

BAB 5. Style Links
Selector Link ............................................................................................................ 57
Link ................................................................................................................. 57
Visited ............................................................................................................ 59
Hover .............................................................................................................. 60
Active ............................................................................................................. 62
Study Case ............................................................................................................... 64
BAB 6. Style List

Property List ............................................................................................................ 67
List-Style-Type ....................................................................................................... 67
List-Style-Image ..................................................................................................... 69
List-Style-Position ................................................................................................. 71
Study Case ............................................................................................................... 73
BAB 7. Style Border

Property Border ..................................................................................................... 75
Border-Style ............................................................................................................ 75
Border-Width .......................................................................................................... 77
Border-Color ........................................................................................................... 78
Study Case ............................................................................................................... 80
BAB 8. Style Box Margin

Property Margin ..................................................................................................... 83
Study Case ............................................................................................................... 87
BAB 9. Style Box Padding

Property Padding .................................................................................................. 91
Study Case ............................................................................................................... 95
BAB 10. Style Float

Property Float ......................................................................................................... 102
Study Case ............................................................................................................... 104

| v

vi |
BAB 11. Kreasi Menu
Menu Vertikal ................................................................................................................. 111
Vertikal Ul Li ....................................................................................................... 111
Vertikal Class Ul (div class) ............................................................................ 114
Vertikal Ul Class ................................................................................................. 118
Menu Vertikal ID (div id) ................................................................................ 120
Menu Vertikal Pop Up (sub menu) ............................................................. 123
Menu Horizontal ........................................................................................................... 126
Horizontal Ul Li .................................................................................................. 126
Horizontal Class ................................................................................................ 129
Horizontal ID ...................................................................................................... 132
Menu Horizontal Pop Up (sub menu) ....................................................... 136
BAB 12. Kreasi Layout Web

Layout ............................................................................................................................... 139
Study Case ...................................................................................................................... 148
BAB 13. Style Form

Property Form ................................................................................................................ 157
Style Form ....................................................................................................................... 158
Form Tanpa Tabel ........................................................................................................ 160
Search Form Header .................................................................................................... 163
Search Form Kolom ..................................................................................................... 168
BAB 14. Desain Web

Desain Web .................................................................................................................... 173
BAB 1
PENGENALAN CSS

1.1. Pengertian CSS
Css singkatan dari cascading style sheet adalah sebuah dokumen yang
berisi style untuk mengatur tampilan suatu halaman website agar lebih
menarik dan interaktif dengan tujuan menarik minat pengunjung. Para
desainer web menggunakan css untuk merapikan tampilan website agar
lebih menarik dan interaktif, dengan mengubah elemen tag html seperti
huruf, teks, background dan gambar.

Css bisa menggantikan fungsi table dalam penyusunan layout halaman
web menjadi lebih mudah dan ringkas. Dan css merupakan sebuah style
yang mampu berjalan di antara tag html yakni embedded style, perubahan
tampilan dari css berpengaruh terhadap tag html yang dibuat.

1.2. Web Editor
Untuk membuat sebuah tampilan web yang menarik, dibutuhkan sebuah
web editor. Web editor tempat untuk pengetikan tag html dan style css.
Contoh aplikasi yang bisa dijadikan web editor seperti notepad, frontpage,
dreamweaver. Dalam penulisan buku ini penulis menggunakan aplikasi
Adobe Dreamweaver CS3 sebagai web editor dalam pembuatan desain
web dengan tag html dan style css.

1
2
Bab 1. Pengenalan CSS

Berikut tampilan dari jendela Adobe Dreamweaver CS3.

Gambar 1.1 Web Editor Adobe Dreamweaver CS3
Dalam penulisan style dan tag html, penulis mengajak kamu untuk
menulisnya di dalam jendela tab code, seperti gambar berikut :

Gambar 1.2 jendela code adobe dreamweaver cs3
Untuk penulisan style css yang bersifat external :
1. Buka dokmen baru dengan cara klik menu File.
2. Pilih New, tampil jendela New Document seperti tampilan
berikut:

3

Gambar 1.3 jendela new document
3. Pada jendela New Document, pada Page Type, kamu pilih css,
lalu klik tombol Create, maka tampilan jendela css-nya seperti
berikut :

Gambar 1.4 jendela pengetikan code css

1.3. Kegunaan CSS
Kegunaan css dalam mendesain sebuah halaman web banyak sekali
manfaatnya antara lain :
Penulisan tag html menjadi lebih pendek dan mudah diatur.
Untuk mengubah susunan layout menjadi lebih mudah, hanya
mengganti style css-nya saja.
Ukuran file html menjadi lebih kecil karena terpisah dengan file css-
nya.
4

Hampir semua web browser mendukung style css.
Css bisa berkolaborasi dengan javascript ataupun script jquery yang
saat ini sedang tren.
Kemudian keuntungan menggunakan css dalam mendesain web adalah
sebagai berikut :
Halaman web bisa diload dengan cepat.
Mengubah tampilan web menjadi lebih mudah dan cepat, hanya
mengubah style dari css-nya.
Mengubah style menu (link) menjadi lebih dinamis sesuai yang
diinginkan.
Membuat layout dan mengonsepnya menjadi lebih tersusun dan
rapi penempatan komponen layoutnya.

1.4. Penggunaan CSS
Untuk menggunakan css agar tampilan web menjadi bagus dan menarik
maka ada aturan dalam penggunaan css ini dalam tag html yang dibuat.
1. Inline style
Style yang dibuat dalam sebuah tag HTML yang hanya berlaku untuk
dokumen yang diapitnya saja.
Sintaks penulisannya :
<p style=property:value>teks </p>
Untuk menggunakan style ini buka jendela code adobe dreamweaver
kamu, ketik kode berikut :
<head>
<title>style inline css</title>
</head>

<body>
<p style="color:#0000FF; background-color:#FF0000;">
desain web dengan css</p>
<img src="Koala.jpg" style="width=100px;
height:100px"/>
</body>
</html>
5

Seperti tampilan gambar berikut

Gambar 1.5 kode style inline
Simpan dengan nama style inline.html, dan jalankan pada browser yang
kamu sukai, hasilnya seperti gambar berikut :

Gambar 1.6 Tampilan style inline

2. Internal style
Style ini sama seperti inline, dalam satu file html, penulisan style ini diapit
oleh tag pembuka <head> dan penutup </head>.
Seperti berikut :
<html>
<head>
Style css disini
</head>
<body>

Penulisan pembuka style css internal ini dimulai dengan :
<style type=text/css>
Style kode css
</style>
6

Sintaks penulisan lengkapnya sebagai berikut
<html>
<head>
<style type=text/css>
Style kode css
</style>
</head>
<body>

kamu, ketik kode berikut :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>internal style</title>
<style type="text/css">
h2 { font-family:verdana;
color:#0000FF;}

p {font-family:verdana;
font-size:12px;}
</style>
</head>
<body>
<h2>style internal</h2>
<p> style internal sama dengan inline style satu
file dengan html, diapit oleh tag head</p>
</body>
</html>


Gambar 1.7 kode style internal
7

Simpan dengan nama style internal.html, dan jalankan pada browser
yang kamu sukai, hasil nya seperti gambar berikut :

Gambar 1.8 tampilan style internal

3. External style
Style ini digunakan untuk memisah file html dengan file css, maksudnya
file css berada di luar dari file html. Penempatan style css ini diapit oleh
tag <head> </head>, namun pemanggilan file cssnya berbeda
menggunakan link seperti berikut :
<head>
<link rel=stylesheet type=text/css href=file
css.css/>
</head>
Fungsi href inilah yang menghubungkan file html dengan file cssnya.
Maka buat file baru untuk menulis kode cssnya. Untuk menggunakan style
ini buka jendela code adobe dreamweaver kamu, ketik kode berikut, lalu
simpan dengan nama style_external.html

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

<body>
<h2>style external</h2>
<p> dengan style ini file html menjadi lebih
sedikit, dan pengaturan layout lebih mudah</p>
</body>
</html>
8


Gambar 1.9 kode style external.html
Untuk membuat kode cssnya, kamu pilih jendela baru, pada page type
pilih css, ketik kode berikut :
h2 { font-family:verdana;
color:#0000FF;}

font-size:12px;}
Seperti gambar kode css berikut :

Gambar 1.10 kode style external.css

Simpan dengan nama style_external.css, dan jalankan jendela code html
pada browser yang kamu sukai, hasil nya seperti gambar berikut :

Gambar 1.11 tampilan style internal

9

1.5. Aturan Penulisan CSS
CSS memiliki aturan penulisan yang sudah tetap dan sebuah style CSS
juga memiliki struktur yang pasti, terdiri dari 2 bagian yaitu Selector dan
Declaration.

Penjelasan :
Selector penamaan suatu elemen style yang mau dirubah atau
diterapkan pada tag html untuk merubah tampilan website.
Property adalah elemen tag html yang mengubah warna, ukuran dan
ketebalan garis contoh nya background, font, color.
Value nilai suatu property yang merubah tampilan tag html.

Penamaan selektor terbagi menjadi 3, yaitu :
1. Tag Selektor
Tag merupakan penamaan dari elemen html yang bisaa digunakan seperti
heading (H1, H2, H6), body, paragraph (p), img.
Contoh :
h1 {font-size:12px;}
body {background-color:#ffffff;}

2. Class Selektor
Penggunaan class diawali dengan titik (.) dan nama kelas
.nama class {property:value;}

10

Contoh :
.h1{font-color:blue;}
Berarti nama class nya adalah h1, tidak lagi menjadi elemen tag html
heading, tetapi class. Penggunaan class di dalam tag html harus
didefinisikan dengan nama class, seperti berikut.
<h1 class=h1> judul teks </h1>
Penamaan class ini bisa dibuat sendiri tanpa memakai dari tag html,
seperti berikut.
.teks{font-color:blue;}

maka nama class ini bisa diletakan dalam tag html paragraph.
<p class=teks>ini menggunakan class</p>
Penggunaan selector class dalam tag html bisa dipakai berulang kali tanpa
harus mengubah nilai property didalamnya.

3. ID Selektor
Penggunaan ID diawali dengan tanda pagar (#) dan nama id nya,
penggunaan id ini bisa dibuat sendiri dengan bebas. Berikut sintaknya.
#nama id {property : value;}

Contoh :
#teks{font-size:12px;}
Berarti nama id yang dibuat adalah id teks buatan sendiri.

Penggunaan id dalam tag html didefinisikan dengan <div id=nama
id>, dan di tutup dengan </div>. Seperti berikut :
<div id=teks>
<p> belajar css dengan mudah dan menyenangkan
</p>
</div>

11

Penggunaan selector id ini hanya bisa digunakan satu kali, tidak bisa
diulang lebih dari satu kali.

Untuk lebih memahami aturan penulisan css ini buka jendela code adobe
dreamweaver kamu, ketik kode berikut :
<head>
<title>selektor tag</title>
font-size:12px;}

h2 {color:#0066FF;}
</style>
</head>

<body>
<h2>tag selektor</h2>
<p> tag ini menggunakan elemen html</p>
</body>
</html>

Seperti gambar berikut

Gambar 1.12 kode selektor tag.html

12

Simpan dengan nama selektor_tag.html, dan jalankan pada browser yang
kamu sukai, hasil nya seperti gambar berikut :

Gambar 1.13 tampilan selektor tag
Setelah tag selektor, kamu coba class selektor, buka kembali jendela code
adobe dreamweaver kamu, ketik kode berikut :
<head>
<title>selektor class</title>
.teks {font-family:verdana;
font-size:12px;}

.judul {color:#0066FF;}
</style>
</head>

<body>
<h2 class="judul">class selektor</h2>
<p class="teks"> teks ini menggunakan class
selektor</p>
</body>
</html>
Seperti gambar berikut :

Gambar 1.14 kode selektor class.html
13

Simpan dengan nama selektor_class.html, dan jalankan pada browser
yang kamu sukai, hasil nya seperti gambar berikut :

Gambar 1.5 tampilan selektor class

Setelah class selektor, kamu coba id selektor, buka kembali jendela code
adobe dreamweaver kamu, ketik kode berikut :
<head>
<title>selektor id</title>
#teks {font-family:verdana;
font-size:12px;}

#judul {color:#0066FF;}
</style>
</head>

<body>
<div id="judul">
<h2>id selektor</h2>
</div>
<div id="teks">
<p>teks ini menggunakan id selektor, diapit oleh
div</p>
</div>
</body>
</html>

14


Gambar 1.16 kode selektor class.html

Simpan dengan nama selektor_id.html, dan jalankan pada browser yang

Gambar 1.17 tampilan selektor id
BAB 2
STYLE FONTS
Fonts atau huruf digunakan untuk menyampaikan informasi kepada para
pengunjung web yang ingin memperoleh banyak informasi. Font yang
baik adalah font yang bisa dibaca, namun tidak semua font yang
digunakan mampu membuat tampilan website menjadi lebih menarik,
maka dengan style font css jenis dan ukuran font bisa diatur menjadi lebih
interaktif dan menarik para pengunjung web menjadi lebih betah dan
mempromosikan web yang dibuat kepada dunia.

1.1. Property Fonts
Ada beberapa property font yang bisa digunakan untuk mengatur fonts
pada css.

1.1.1. Font-family
Property ini digunakan untuk menentukan jenis huruf yang akan
digunakan.
Sintak penulisannya :
Selector {font-family:value;}
Contoh :
.huruf{font-family:Verdana,Arial,Helvetica,sans-
serif;}
Untuk menggunakan style ini buka jendela aplikasi adobe dreamweaver
kamu, ketik kode berikut ini :
<head>
<title>Font-family</title>
.huruf1 {font-family:Arial, Helvetica, sans-serif;}

15
16
Bab 2. Style Fonts

.huruf2 {font-family:"Times New Roman", Times,
serif;}
.huruf3 {font-family:"Courier New", Courier,
monospace;}
.huruf4 {font-family:Georgia, "Times New Roman",
Times, serif;}
.huruf5 {font-family:Verdana, Arial, Helvetica,
sans-serif;}
.huruf6 {font-family:Geneva, Arial, Helvetica, sans-
serif;}
</style>
</head>

<body>
<p class="huruf1">jenis huruf arial</p>
<p class="huruf2">jenis huruf times new roman</p>
<p class="huruf3">jenis huruf courier new</p>
<p class="huruf4">jenis huruf georgia</p>
<p class="huruf5">jenis huruf verdana</p>
<p class="huruf6">jenis huruf geneva</p>

</body>
</html>

Seperti tampilan gambar berikut :

Gambar 2.1 kode font-family

17
Bab 2. Style Fonts

Simpan dengan nama font_family.html, dan jalankan pada browser yang

Gambar 2.2 tampilan font-family

1.1.2. Font-style
Property ini digunakan untuk menentukan style huruf yang akan
digunakan :
Adapun nilai (value) dari property ini adalah sebagai berikut :
Normal : style huruf normal.
Italic : style huruf miring.
Oblique : style huruf miring seperti italic

Selector{font-style:value;}
Contoh :
.style1{font-style:italic;}

<head>
<title>font-style</title>
18
Bab 2. Style Fonts

.style1 {font-style:italic;}
.style2 {font-style:normal;}
</style>
</head>
<body>
<p class="style1">style huruf italic</p>
<p class="style2">style huruf normal</p>
</body>
</html>
Seperti tampilan gambar berikut ini :

Gambar 2.3 kode font-style
Simpan dengan nama font_style.html, jalankan di browser yang kamu
sukai, hasilnya seperti gambar berikut ini :

Gambar 2.4 tampilan font-style

1.1.3. Font-size
Property ini digunakan untuk mengatur ukuran huruf yang akan
digunakan. Satuan ukuran yang bisa digunakan dalam ukuran huruf ini
adalah px (pixel) dan em (empiris).

19
Bab 2. Style Fonts

Selector{font-size:value;}
Contoh :
.size{font-size:12px;}
<head>
<title>font-size</title>
.size1{font-size:12px;}
.size2{font-size:5em;}
</style>
</head>

<body>
<p class="size1">ukuran dengan pixel</p>
<p class="size2">ukuran dengan empiris</p>
</body>
</html>

Seperti tampilan gambar berikut ini :

Gambar 2.5 kode font-size

20
Bab 2. Style Fonts

Simpan dengan nama font_size.html, jalankan di browser yang kamu
sukai hasilnya seperti gambar berikut ini :

Gambar 2.6 tampilan font-size

Catatan :
Untuk satuan em (empiris) digunakan untuk mengatur jarak paragraph
pada text yang dibahas pada bab berikutnya.

1.1.4. Font-weight
Property ini digunakan untuk mengatur seberapa tebal dan tipis huruf
yang akan digunakan. Nilai yang digunakan dalam font-weight :
Normal : untuk teks normal.
Bold : untuk menebalkan huruf.
Bolder : untuk lebih menebalkan huruf.
Lighter : untuk membuat huruf yang tipis.
100, 200 : untuk menentukan ketebalan huruf dengan nilai angka.

Selector {font-weight:value;}
Contoh :
.huruf_normal {font-weight:bolder;}
Untuk menggunakan style ini buka jendela aplikasi adobe dremaweaver
kamu ketik seperti kode berikut ini :
<head>
21
Bab 2. Style Fonts
<title>font-weight</title>
.huruf_normal{font-weight:normal;}
.huruf_tebal{font-weight:bold;}
</style>
</head>

<body>
<p class="huruf_normal">ketebalan huruf normal</p>
<p class="huruf_tebal">ketebalan huruf dengan
bold</p>
</body>
</html>

Seperti pada gambar berikut ini :

Gambar 2.7 Kode font-weight
Simpan dengan nama font_weight.html, jalankan di browser yang kamu

Gambar 2.8 tampilan font-weight

22
Bab 2. Style Fonts

1.1.5. Font-variant
Property ini digunakan untuk membuat huruf kecil menjadi kapital. Nilai
yang ada dalam property ini adalah :
Normal : mengubah ukuran huruf menjadi normal (default).
Small-caps : mengubah huruf kecil (lowercase) menjadi kapital
(uppercase).

Selector {font-variant : value;}
Contoh :
.huruf_variant {font-variant : small-caps;}
kamu ketik seperti kode berikut ini :
<head>
<title>font-variant</title>
.huruf_variant1{font-variant:normal;}
.huruf_variant2{font-variant:small-caps;}
</style>
</head>

<body>
<p class="huruf_variant1">huruf variant ukuran
normal</p>
<p class="huruf_variant2">huruf variant dengan
small caps</p>
</body>
</html>

Gambar 2.9 kode font-variant
23
Bab 2. Style Fonts

Simpan dengan nama font_variant.html, jalankan di browser yang kamu

Gambar 2.10 tampilan font-variant

1.2. Study Case
Setelah mencoba property font sekarang coba kamu buat tampilan web
seperti pada gambar berikut ini :

Gambar 2.11 tampilan case font
Langkah kerja pembuatannya :
1. Pastikan jendela kerja adobe dreamweaver kamu aktif.
2. Lalu ketik kode berikut ini didalam jendela tab code.
<head>
<title>study case</title>
h2 {font-family:Verdana, Arial, Helvetica, sans-
serif;
font-size:16px;
24
Bab 2. Style Fonts
font-weight:bold;}
.coba1 {font-family:Arial, Helvetica, sans-serif;
font-size:12px;}
.coba2 {font-family:"Courier New", Courier,
monospace; font-variant:small-caps; font-
style:italic;}
</style>
</head>

<body>
<h2>property font</h2>
<p class="coba1">dengan menggunakan property style
font maka informasi yang ada dalam desain web
menjadi lebih menarik dan interaktif</p>
<p class="coba2">huruf ini ukuran kecil dengan
small caps menjadi uppercase</p>
</body>
</html>


Gambar 2.12 kode case font
3. Simpan file ini dengan nama case_font.html.
BAB 3
STYLE TEXT

Style text digunakan untuk membuat tampilan teks dihalaman web
menjadi lebih rapi dan menarik, sama seperti font style text ini untuk
menyampaikan informasi kepada para pengunjung website.

3.1. Property Text
Ada beberapa property text yang bisa digunakan untuk mengatur
tampilan text pada css.
3.1.1. Color
Property ini digunakan untuk memberi warna pada teks. Nilai property
color yang bisa digunakan adalah
Color name : memberikan warna berdasarkan nama warna contoh
blue, red.
RGB : memberikan warna berdasarkan kode rgb contoh rgb(255, 0, 0)
Hexa number : memberikan warna berdasarkan kode hexa number
menggunakan pagar contoh #fff000.

Selector { font-color : value; }
Contoh :
.color_name {font-color : red;}
.color_hexa {font-color : #fff000;}
.color_rgb {font-color : rgb(255, 0, 0);}
<head>
<title>text color</title>
25
26
Bab 3. Style Text

.coname {color:#0033FF;}
.corgb {color :rgb(0, 0, 255);}
.cohex {color : #0000ff;}
</style>
</head>
<body>
<p>tidak makai warna </p>
<p class="coname">ini warna dengan nama </p>
<p class="corgb"> ini warna dengan rgb </p>
<p class="cohex"> ini warna dengan hex number </p>
</body>
</html>

Seperti gambar berikut ini :

Gambar 3.1 kode text-color
Simpan dengan nama text-color.html, jalankan di browser yang kamu
suka maka hasilnya seperti gambar berikut :

Gambar 3.2 tampilan text-color
27
Bab 3. Style Text

3.1.2. Text-align
Property ini digunakan untuk mengatur posisi atau perataan teks atau
mengatur paragraph suatu teks.
Selector { text-align : value; }
Ada beberapa nilai dalam text align ini yang bisa digunakan :
Center : posisi rata tengah.
Left : posisi rata kiri.
Right : posisi rata kanan.
Justify : posisi rata kiri kanan.
Contoh :
.teks {text-align : justify; }
<head>
<title>text align</title>
.tkiri {text-align : left; }
.tkanan {text-align : right; }
.ttengah {text-align : center; }
.tjustify {text-align : justify; }
</style>
</head>

<body>
<p class="tkiri">
rata kiri, dengan menggunakan text align maka untuk
merapikan tulisan pada halaman web menjadi lebih
mudah dan rapi pengunjung betah membaca informasi
yang disajikan </p>
<p class="tkanan">
rata kanan, dengan menggunakan text align maka untuk
merapikan tulisan pada halaman web menjadi lebih

28
Bab 3. Style Text

mudah dan rapi pengunjung betah membaca informasi
yang disajikan </p>
<p class="ttengah">
rata tengah, dengan menggunakan text align maka
untuk merapikan tulisan pada halaman web menjadi
lebih mudah dan rapi pengunjung betah membaca
informasi yang disajikan </p>
<p class="tjustify">
dengan justify, dengan menggunakan text align maka
untuk merapikan tulisan pada halaman web menjadi
lebih mudah dan rapi pengunjung betah membaca
informasi yang disajikan </p>

</body>
</html>


Gambar 3.3 kode text-align

29
Bab 3. Style Text

Simpan dengan nama text-align.html, jalankan dibrowser yang kamu

Gambar 3.4 tampilan text-align

3.1.3. Text-Decoration
Property ini digunakan untuk mengatur dekorasi (seperti garis bawah,
garis pada teks) atau menghapus dekorasi pada teks.
Sintaksnya :
Selector {text-decoration : value; }
Ada beberapa nilai yang bisa digunakan dalam style ini adalah :
Blink : member efek kedap kedip pada teks.
None : tidak ada garis bawah pada teks.
Underline : untuk menggrais-bawahi teks.
Overline : memberi garis diatas teks.
Line-through : membuat garis ditengah teks.

Contoh :
.tdecor 1{ text-decoration : none; }
30
Bab 3. Style Text

.tdecor2{ text-decoration : underline; }
<head>
<title>text decoration</title>
.tdecor1 { text-decoration : underline; }
.tdecor2 { text-decoration : overline; }
.tdecor3 { text-decoration : line-through; }
.tdecor4 { text-decoration : blink; }
</style>
</head>

<body>
<p class="tdecor1"> palcomtech </p>
</body>
</html>

Seperti pada gambar berikut :

Gambar 3.5 kode text-decoration

31
Bab 3. Style Text

Simpan dengan nama text-decoration.html, jalankan di browser yang
kamu suka, maka hasilnya seperti gambar berikut :

Gambar 3.6 tampilan text-decoration

3.1.4. Text-Transform
Property ini digunakan untuk mengubah ukuran teks menjadi karakter teks
dari huruf kecil menjadi capital dan sebaliknya.
Selector { text-transform : value; }
Nilai property dalam style ini yang bisa digunakan :
Uppercase : mengubah huruf teks dari kecil ke besar.
Lowercase : mengubah huruf teks dari besar ke kecil.
Capitalize : mengubah huruf awal teks dari kecil menjadi capital.
Contoh :
.trans1 { text-transform : uppercase; }
.trans2 { text-transform : lowercase; }
Untuk menggunakan style ini, buka jendela code adobe dreamweaver
<head>
<title>text transform</title>
.ttrans1 { text-transform : uppercase; }
.ttrans2 { text-transform : lowercase;}
.ttrans3 { text-transform : capitalize; }
</style>
32
Bab 3. Style Text

</head>
<body>
<p class="ttrans1"> palcomtech </p>
<p class="ttrans2"> PALCOMTECH </p>
<p class="ttrans3"> palcomtech </p>
</body>
</html>

Gambar 3.7 kode text-transform
Simpan dengan nama text-transform.html, jalankan di browser yang
kamu suka maka hasilnya seperti gambar berikut :

Gambar 3.8 tampilan text-transform

3.1.5. Text-Indent
Property ini digunakan untuk mengatur batas jarak dari baris pertama
dalam suatu paragraph.
Selector { text-indent : value; }

33
Bab 3. Style Text

Contoh :
p { text-indent : 15px; }
<head>
<title>text indent</title>
p { text-indent : 25px; }
</style>
</head>

<body>
<p>palcomtech, saat ini menjadi lembaga terbaik
nasional tahun 2010, semua itu berkat kerja sama
seluruh divisi yang berada di bawah manajemen yang
dipimpin oleh Bapak Hendri yang selalu memberikan
motivasi yang positif kepada seluruh divisi </p>
</body>
</html>


Gambar 3.9 kode text-indent

34
Bab 3. Style Text

Simpan dengan nama text-indent.html, jalankan di browser yang kamu
suka, maka hasilnya seperti gambar berikut :

Gambar 3.10 tampilan text-indent

3.1.6. Line-Height
Property ini digunakan untuk mengatur jarak antar baris dalam suatu
paragraph, seperti jarak 1 spasi atau 2 spasi. Satuan yang digunakan untuk
jarak spasi adalah em (empiris).
Selector { line-height : value; }
Contoh :
P { line-height : 2em; }
kamu ketik kode berikut :
<head>
<title>line height</title>
.satu { line-height:1.5em;}
.dua { line-height:2em;}
</style>
</head>

<body>
<p class="satu">
palcomtech, saat ini menjadi lembaga terbaik
35
Bab 3. Style Text

<p class="dua">
palcomtech, saat ini menjadi lembaga terbaik
</body>
</html>


Gambar 3.11 kode line-height
Simpan dengan nama line-height.html, jalakan di browser yang kamu

Gambar 3.12 tampilan line-height
36
Bab 3. Style Text

3.1.7. Letter-Spacing
Property ini digunakan untuk mengatur jarak antar huruf dalam sebuah
teks.
Selector { letter-spacing : value; }
Contoh :
P { letter-spacing : 10px; }
<head>
<title>letter spacing</title>
p {letter-spacing : 10px; }
.satu {letter-spacing : 2em; }
</style>
</head>
<body>
<p> palcomtech </p>
<p class="satu"> i love palcomtech </p>
</body>
</html>


Gambar 3.13 kode letter-spacing

37
Bab 3. Style Text

Simpan dengan nama letter-spacing.html, jalakan di browser yang kamu

Gambar 3.14 tampilan letter spacing
Catatan :
Untuk menggunakan jarak antar huruf lebih baik menggunakan satuan
pixels (px) daripada satuan empiris (em), karena satuan em membuat jarak
semakin jauh dan melebar.

3.1.8. Word-Spacing
Property ini digunakan untuk mengatur jarak antar kata dalam sebuah
teks.

Selector { word-spacing : value; }
Contoh :
P { word-spacing : 15px; }
<head>
<title>word spacing</title>
p {word-spacing : 10px; }
.satu {word-spacing : 2em; }
</style>
</head>
<body>

38
Bab 3. Style Text

<p> palcomtech generasi internet 100% praktek 100%
interner</p>
<p class="satu"> i love palcomtech, lembaga terbaik
nasional 2010 </p>
</body>
</html>

Gambar 3.15 kode word-spacing
Simpan dengan nama word-spacing.html, jalakan di browser yang kamu

Gambar 3.16 tampilan word-spacing

3.2. Study Case
Setelah membahas tentang property text, coba kamu buat seperti pada
gambar 3.17.

39
Bab 3. Style Text

Gambar 3.17 tampilan study case
Langkah kerja :
1. Pastikan jendela code adobe dreamweaver kamu aktif.
2. Ketik kode berikut ini :
<head>
<title>case text</title>

Body { font-family:Verdana, Arial, Helvetica, sans-
serif;
font-size:12px; }
h2 {font-family:"Times New Roman", Times, serif;
font-size:20px;
font-weight:bold;
text-transform:uppercase;}
p {line-height:1.5em;
color:#0033FF;
text-align:justify;
text-indent:25px;}
.tebal {font-weight:bold;
font-style:italic;}
.garis {color:#FF0000;
font-weight:bold;
text-decoration:underline;}
.warna{ text-decoration:underline;
40
Bab 3. Style Text
color:#FF0000;}
</style>
</head>

<body>
<h2>palcomtech is the best </h2>
<p>Tahun ini menjadi kebanggaan dan ucapan syukur
bagi <span class="tebal">PalComTech</span> atas
prestasi yang baru dicapai di tingkat nasional. Apa
yang menjadi prestasi PalComTech adalah LPK
PalComTech kembali diberi apresiasi oleh pemerintah
sebagai <span class="garis">Lembaga Berprestasi
Tingkat Nasional 2010</span>. Penghargaan ini
berhasil berhasil dipertahankan oleh PalComTech
sejak tahun 2007 juga menjadi juara di <span
class="warna">Lembaga Berprestasi</span>.</p>


Gambar 3.18 tampilan code view
BAB 4
STYLE BACKGROUND

Style background digunakan untuk membuat tampilan web menjadi lebih
indah dan cantik. Penggunaan style background bisa mengubah ukuran
file gambar menjadi kecil, serta bisa membuat gambar yang bergradasi
digabung dengan warna yang dipadukan. Penggunaan style ini didalam
tag atau elemen body.

4.1. Property Background
Ada beberapa property background yang bisa digunakan untuk mengatur
tampilan background pada css.
4.1.1. Background-Color
Property ini digunakan untuk memberi warna pada latar belakang halaman
website. Nilai property color yang bisa digunakan adalah
Color name : memberikan warna berdasarkan nama warna contoh
blue, red.
RGB : memberikan warna berdasarkan kode rgb contoh rgb(255, 0, 0)
Hexa number : memberikan warna berdasarkan kode hexa number
menggunakan pagar contoh #fff000.
Selector { background-color : value; }
Contoh :
.color_name {background-color : red;}
.color_hexa {background-color : #fff000;}
.color_rgb {background-color : rgb(255,0,0);}
<head>

41
42
Bab 4. Style Background

<title>background color</title>
body {background-color:#0033FF;}

font-size:22px;
color:#FFFF00;}

p {color:#FFFF00;}
</style>
</head>
<body>
<h1>style background</h1>
<p>sekarang kita menggunakan bacground</p>

</body>
</html>

Gambar 4.1 kode background-color

43

Simpan dengan nama background-color.html, jalankan di browser yang

Gambar 4.2 tampilan background-color

4.1.2. Background-image
Property ini digunakan untuk menampilkan gambar kedalam halaman
website.
Selector { background-image : url(alamat file; }
Contoh :
body {background-image : url(smile.gif); }
<head>
<title>background image</title>
body {background-image:url(weding.jpg);}

font-size:22px;
color:#0000FF;}

p {color:#0000FF;}
</style>
</head>
<body>
44

</body>
</html>


Gambar 4.4 kode background-image
Simpan dengan nama background-image.html, jalankan dibrowser yang

Gambar 4.4 tampilan background-image
45

Catatan :
Untuk menampilkan gambar antara file gambar dengan file html atau file
css nya harus satu folder tidak usah dipisah, jadikan satu foler atau
disimpan dalam folder beri nama images.

4.1.3. Background-Repeat
Property ini digunakan untuk mengatur pengulangan (repeat) terhadap
gambar yang digunakan. Gambar yang digunakan bisaanya berukuran
sangat kecil.
Selector {background-repeat : value; }
Ada beberapa nilai yang bisa digunakan dalam style ini adalah :
repeat : mengulang gambar secara vertical dan horizontal.
Repeat-x : mengulang gambar secara horizontal.
Repeat-y : mengulang gambar secara vertical.
No-repeat : tidak terjadi pengulangan gambar.
Contoh :
Body { background-repeat : repeat-x; }
<head>
<title>background repeat</title>
body {background-image:url(love.jpg);
background-repeat:repeat-y;}

font-size:22px;
color:#FFFF00;}

p {color:#FFFF00;}
</style>
46

</head>
<body>
</body>
</html>


Gambar 4.5 kode background-repeat
Simpan dengan nama background-repeat1.html, jalankan di browser
yang kamu suka, maka hasilnya seperti gambar berikut :

Gambar 4.6 tampilan background-repeat y
47

Perhatian !!!
Jika nilai background-repeat nya diganti menjadi repeat-x maka tampilan
yang dihasilkan menjadi seperti berikut.

Gambar 4.7 tampilan background-repeat x

4.1.4. Background-Position
Property ini digunakan untuk mengatur posisi gambar pada halaman
website. Posisi yang bisa digunakan adalah top, right, bottom, left, dan
center secara vertical atau horizontal. Penulisan nilainya seperti top center
berarti diatas tengah.
Selector { background-position : value; }
Contoh :
body { background-position : center center; }
<head>
<title>background position</title>
background-position: bottom center;
background-repeat:no-repeat; }

p {line-height:2em;
font-family:Verdana, Arial, Helvetica, sans-
serif;}
</style>
48

</head>
<body>
<p>Kompetensi ini adalah suatu kompetensi dasar bagi
semua pemangku pekerjaan yang memanfaatkan komputer
sebagai alat bantu bekerja di jaman teknologi ini.
Sertifikasi ini sebagai tolok ukur yang jelas atas
kemampuan nyata seseorang dalam mengoperasikan
komputer di bidang pengolahan kata, pengolahan angka
dan penyajian informasi. Tolak ukur yang jelas
inilah akan mengeleminir bisanya penyebutan beragam
yang terpampang di iklan lowongan pekerjaan seperti
menguasai komputer, mahir menggunakan Ms. Office,
Good Computer Skill dan lain sebagainya.</p>


</body>
</html>

49


Gambar 4.8 kode background-position
Simpan dengan nama background-position.html, jalankan di browser
yang kamu suka maka hasilnya seperti gambar berikut :

Gambar 4.9 tampilan background-position
50

4.1.5. Background-Attachment
Property ini digunakan untuk mengatur posisi gambar apakah bergerak
mengikuti scroll mouse keatas atau kebawah dan diam atau mantap tidak
mengikuti scroll mouse.
Selector { background-attachment : value; }
Nilai property dalam style ini yang bisa digunakan :
Scroll : gambar latar bergerak mengikuti scroll mouse.
Fixed : gambar latar diam atau tidak mengikuti scroll mouse.
Contoh :
body { background-attachment : scroll; }
<head>
<title>background attachment</title>
background-position: center center;
background-repeat:no-repeat;
background-attachment:fixed; }

p {line-height:2em;
font-family:Verdana, Arial, Helvetica, sans-
serif;}
</style>
</head>
<body>
51


</body>
</html>


Gambar 4.10 kode background-attachment

52

Simpan dengan nama background-attachment.html, jalankan di browser
yang kamu suka maka hasilnya seperti gambar berikut :

Gambar 4.11 tampilan background-attachment

4.2. Study Case
Setelah membahas tentang property background, coba kamu buat seperti
pada gambar berikut :

53

Langkah kerja :
2. Ketik kode berikut ini :
<head>
<title>study case</title>
body {background-image:url(images/latar_01.jpg);
background-repeat:repeat-x;
background-color:#FFFFFF;}
font-size:22px;
font-weight:bold;
color:#FFFFFF;}
p {font-family:Verdana, Arial, Helvetica, sans-
serif;
font-size:12px;
color:#FFFFFF;}
</style>
</head>

<body>
<h1>case background</h1>
<p> gambar yang digunakan adalah gambar yang dibuat
via photoshop, dengan ukuran yang sangat kecil yakni
1 x 600 pixels, dengan menggunakan nilai repeat-x,
maka gambar tersebut menjadi lebar sesuai ukuran
monitor yang digunakan </p>

</body>
</html>

54


Gambar 4.13 tampilan kode study case
Untuk pembuatan latar belakang nya saya menggunakan adobe
photoshop dengan cara :
1. Buka canvas adobe photoshop kamu dengan ukuran canvas width :
800px, height : 600px, resolution : 72, klik ok.

Gambar 4.14 jendela ukuran canvas
2. Buat gradasi hitam putih dengn gradien tool, dengan posisi hitam di
atas dan putih di bawah, seperti gambar 4.15.

55

Gambar 4.15 warna gradasi hitam putih
3. Potong (slicing) dengan slice tool, usahakan kamu mendapatkan
ukuran 1 pixel, simpan dengan format save for web and devices.

Gambar 4.16 jendela save for web dari slice tool
4. Tekan tombol save, simpan dengan save as type : images only

Gambar 4.17 menyimpan type images only
5. Maka gambar yang telah dibuat bisa digunakan didalam folder images
seperti gambar 4.18.

56

Gambar 4.18 hasil pemotongan gambar
Dalam code css yang dibuat, menggunakan nama file latar_o1.jpg. dengan
menggunakan repeat-x, gambar tersebut melebar sesuai ukuran monitor.
BAB 5 BAB 5
STYLE LINKS STYLE LINKS

Link digunakan menghubungkan antar halaman web atau ke website yang
lain. Link bisa dibuat dengan teks dan juga gambar. Link merupakan
elemen tag html anchor <a>, selengkapnya <a href=alamat>nama
website</a>, maka penerapan dalam css merupakan elemen tag anhor
<a>.
Link digunakan menghubungkan antar halaman web atau ke website yang
lain. Link bisa dibuat dengan teks dan juga gambar. Link merupakan
elemen tag html anchor <a>, selengkapnya <a href=alamat>nama
website</a>, maka penerapan dalam css merupakan elemen tag anhor
<a>.
Link yang tidak menggunakan style link css mempunyai ciri tulisan
berwarna biru dan memiliki garis bawah. Seperti contoh gambar berikut :
Link yang tidak menggunakan style link css mempunyai ciri tulisan
berwarna biru dan memiliki garis bawah. Seperti contoh gambar berikut :

Gambar 5.1 contoh tampilan link
Dengan style link css, tampilan link dibuat menjadi lebih menarik dan
mudah diatur dalam penggunaannya.

5.1. Selector Link
Ada beberapa selector link yang bisa digunakan untuk mengatur tampilan
link pada css.
5.1.1. Link
Property ini adalah property normal dari sebuah link, tidak terjadi
perubahan.
Selector { property : value; }
Contoh :
a:link { color : red;}

57
58
Bab 5. Style Links

<head>
<title>links - link</title>
a:link { color: #FF0000;
text-decoration: none; }
</style>
</head>

<body>
website
<a href="http://www.palcomtech.com">palcomtech</a>

</body>
</html>


Gambar 5.2 kode link-color

59
Bab 5. Style Links

Simpan dengan nama link-link.html, jalankan di browser yang kamu suka
maka hasilnya seperti gambar berikut :

Gambar 5.3 tampilan link-color

5.1.2. Visited
Dengan selector ini kamu bisa memberikan efek perubahan pada link saat
link web dibuka atau dikunjungi.
Contoh :
a:visited { color : green; }
<head>
<title>links - link</title>
a:visited { color: green;
</style>
</head>

<body>
website

</body>
</html>
60
Bab 5. Style Links


Gambar 5.5 kode link-visited

Simpan dengan nama link-visited.html, jalankan dibrowser yang kamu

Gambar 5.4 tampilan link-visited

5.1.3. Hover
Selector ini digunakan untuk melakukan efek perubahan bila kursor mouse
berada diatas link, dengan tambahan selector a:link agar efek yang dibuat
nyata.
Sintaksnya :
Contoh :
a:hover { color : red ; }

61
Bab 5. Style Links

<head>
<title>links - hover</title>
a { color: green;
a:hover { color:#FFFF00;
background-color:#0000FF;}
</style>
</head>

<body>
website

</body>
</html>


Gambar 5.5 kode link-hover

62
Bab 5. Style Links

Simpan dengan nama link-hover.html, jalankan di browser yang kamu

Gambar 5.6 tampilan link-hover tidak ada efek
Tampilan diatas sebelum kursor mouse diatas link, gambar dibawah ini
menunjukkan perubahan link saat kursor mouse diatas link yang berupa
text berwarna kuning dan background biru.

Gambar 5.7 Tampilan link-hover mouse diatas link

5.1.4. Active
Selector ini digunakan untuk memberikan efek perubahan saat link di klik
atau link yang sedang aktif.

Contoh :
a:active { background-color : blue; }
<head>
<title>link active</title>
63
Bab 5. Style Links
a { color: green;
a:active { color:orange;
</style>
</head>

<body>
website
</body>
</html>


Gambar 5.7 kode link-active

Simpan dengan nama link-active.html, jalankan di browser yang kamu

Gambar 5.8 tampilan link-transform

64
Bab 5. Style Links

5.2. Study Case
Setelah membahas tentang property link, coba kamu buat seperti pada
gambar berikut :

Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama case_link.html
<head>
<title>case link</title>
<link rel="stylesheet" type="text/css"
href="case_link.css" />
</head>

<body>
<h1><a href="#">LPK PalComTech Telah
Terakreditasi</a></h1>
<h3>Published on may 11, 2010 by
<a href="#">admin</a> </h3>
<p>LPK PalComTech merupakan LPK Pertama di Sumatera
Selatan yang mendaftarkan diri untuk melakukan
akreditasi. Dan PalComTech meraih penghargaan
sebagai Lembaga Pendidikan Komputer yang

65
Bab 5. Style Links

Terakreditasi sesuai dengan SK BAN PNF
No.014/SKEP/STS-AKR/BAN PNF/XII/2009</p>

<p>Sasaran akreditasi meliputi satuan pendidikan non
formal yang terdiri atas; lembaga kursus, lembaga
pelatihan, kelompok belajar, pusat kegiatan belajar
masyarakat, majelis taklim, dan pendidikan anak usia
dini berbentuk kelompok bermain (KB), taman
penitipan anak (TPA), serta...
<a href="#">(more)</a> </p>
</body>
</html>

Seperti gambar kode html berikut :

Gambar 5.10 kode case-link.html
3. Buka jendela baru page type css
4. Ketik kode css berikut ini simpan dengan nama case_link.css
body {font-family:Verdana, Arial, Helvetica, sans-
serif;
font-size:12px;}
font-size:24px;}
h3 {font-family:Arial, Helvetica, sans-serif;
font-size:10px;}
a { text-decoration:none; }
a:hover {text-decoration:underline;
color:#FFFF00;

66
Bab 5. Style Links


Gambar 5.11 kode case_link.css

BAB 6
STYLE LIST

Style list digunakan untuk membuat tampilan daftar atau sebuah
pengurutan dengan menggunakan angka (ol) atau objek symbol (ul) dan
item yang ditampilkan dengan list (li).

6.1. Property List
Ada beberapa property list yang bisa digunakan untuk mengatur tampilan
list pada css.
6.1.1. List-Style-Type
Property ini digunakan untuk menentukan tipe symbol atau tanda yang
akan digunakan. Type yang ada dalam list css berupa objek symbol dan
objek symbol yang berbentuk huruf jepang.
Selector { list-style-type : value; }
Contoh :
ul { list-style-type : hiragana; }
<head>
<title>list style type</title>
ul {list-style-type:hiragana;}
</style>
</head>

<body>
daftar minuman
<ul>
<li>bandrek</li>

67
68
Bab 6. Style List

<li>kopi</li>
<li>susu</li>
</ul>
</body>
</html>


Gambar 6.1 kode list style type
Simpan dengan nama list-style-type.html, jalankan di browser yang

Gambar 6.2 tampilan list style type

69
Bab 6. Style List

6.1.2. List-Style-Image
Property ini digunakan untuk menggantikan posisi tipe list dengan
gambar. Gambar yang digunakan lebih baik berukuran kecil.
Selector { list-style-image : value; }
Contoh :
ul { list-style-image : url(love.gif); }
<head>
<title>list style image</title>
ul {list-style-image:url(jambu.jpg);}
</style>
</head>

<body>
daftar minuman
<ul>
<li>bandrek</li>
<li>kopi</li>
<li>susu</li>
</ul>
</body>
</html>

70
Bab 6. Style List


Gambar 6.3 kode list style image
Simpan dengan nama list-style-iamge.html, jalankan dibrowser yang

Gambar 6.4 tampilan list style image
Catatan :
Gambar yang saya gunakan adalah hasil yang dibuat melalui photoshop
dengan ukuran 20x20 pixels dengan resolution 72, menggunakan objek
shape. Seperti gambar berikut :

Gambar 6.6 objek list dari photoshop

71
Bab 6. Style List

6.1.3. List-Style-Position
Property ini digunakan untuk mengatur posisi dari tampilan list yang
digunakan, nilai untuk position adalah inside yang masuk ke dalam dan
outside berada diluar konten.
Sintaksnya :
Selector { list-style-position : value; }
Contoh :
ul { list-style-position : inside; }
<head>
<title>list style position</title>
#dalam {list-style-position:inside;}
#luar {list-style-position:outside;
list-style-type:katakana;}
</style>
</head>
<body>
daftar minuman
<ul id="dalam">
<li>bandrek</li>
<li>kopi</li>
<li>susu</li>
</ul>
daftar makanan
<ul id="luar">
<li>bakso</li>
<li>mie goreng</li>
<li>nasi goreng</li>
</ul>

</body>
</html>

72
Bab 6. Style List


Gambar 6.6 kode list style position

Simpan dengan nama list-style-position.html, jalankan di browser yang
kamu suka, maka hasilnya seperti gambar berikut :

Gambar 6.7 tampilan list style position

73
Bab 6. Style List

6.2. Study Case
Setelah membahas tentang property list, coba kamu buat seperti pada
gambar berikut :

Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama list_case.html
<head>
<title>case list</title>
href="list_case.css" />
</head>

<body>
link favorite
<ul>
<li><a href="#">palcomtech</a></li>
</ul>
</body>
</html>

74
Bab 6. Style List

seperti gambar kode html berikut :

Gambar 6.9 kode list_case.html
3. Buka jendela baru pilih page type css
4. Ketik kode css berikut ini simpan dengan nama list_case.css
serif;
font-size:12px;}
a { text-decoration:none;
color: red;}
a:hover {color:blue;
background-color:#FFFF00;
font-weight:bold;
ul li{list-style:none;}

seperti gambar kode css berikut :

Gambar 6.10 kode list_case.css
75
BAB 7
STYLE BORDER

Style border digunakan untuk membuat garis atau bingkai (border).
Dengan style border ini pembuatan dan penataan layout sebuah web
menjadi lebih mudah.

7.1. Property Border
Ada beberapa property border yang bisa digunakan untuk mengatur
tampilan border pada css.
7.1.1. Border-Style
Property ini digunakan untuk menentukan jenis garis atau bingkai yang
digunakan. Ada beberapa nilai jenis garis yang bias digunakan adalah
solid, dotted, dashed, double dan sebagainya.
Selector { border-style : value; }
Contoh :
#kotak { border-style : solid; }
Untuk membuat garis bingkainya menjadi utuh atau kotak menggunakan
property posisi yakni, top, bottom, right dan left.
Contoh :
#kotak { border-top-style : solid;
Border-right-style : solid;
Border-bottom-style : solid;
Border-left-style : solid; }
<head>
<title>border style</title>

76
Bab 7. Style Border

#kotak {border-top-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-right-style:solid; }
</style>
</head>

<body>
<div id="kotak">
i love palcomtech, real it university
</div>
</body>
</html>


Gambar 7.1 kode border style

Simpan dengan nama border-style.html, jalankan di browser yang kamu

Gambar 7.2 tampilan border style

77
Bab 7. Style Border

7.1.2. Border-Width
Property ini digunakan untuk mengatur ketebalan garis. Nilai property
width yang bisa digunakan adalah
Thin : untuk garis yang tipis.
Medium : untuk garis yang agak tebal.
Thick : untuk garis yang tebal.
Value : untuk mengatur ketebalan garis dengan nilai seperti 5px,
10px.
Selector { border-width : value; }
Contoh :
#kotak { border-width : 10px; }
<head>
<title>border width</title>
#kotak {border-style:solid;
border-width : 5px;}
#kotak2 {border-style:dotted;
border-width : thin;}

</style>
</head>
<body>
<div id="kotak">
</div>
<br />
<div id="kotak2">
</div>

</body>
</html>
78
Bab 7. Style Border


Gambar 7.3 kode border width
Simpan dengan nama border-width.html, jalankan dibrowser yang kamu

Gambar 7.4 tampilan border style image

7.1.3. Border-Color
Property ini digunakan untuk member warna pada garis border yang
digunakan.
Sintaksnya :
Selector { border-color: value; }
Contoh :
#kotak { border-color : red; }

79
Bab 7. Style Border

<head>
<title>border color</title>
#kotak {border-style:solid;
border-width : 5px;
border-color : red;}

#kotak2 {border-style:dotted;
border-width : thick;
border-color:blue;}
</style>
</head>

<body>
<div id="kotak">
</div>
<br />
<div id="kotak2">
</div>

</body>
</html>

Gambar 7.7 kode border color
80
Bab 7. Style Border

Simpan dengan nama border-color.html, jalankan di browser yang kamu

Gambar 7.7 tampilan border color

7.2. Study Case
Setelah membahas tentang property border, coba kamu buat seperti pada
gambar berikut :

Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama case border.html
<head>
<title>case border</title>
href="case_border.css" />
81
Bab 7. Style Border
</head>

<body>
<div id="header">
<h1> i love palcomtech, real it university </h1>
</div>
<br />
<div id="isi">
<p> dengan menerapkan style border css, maka
pembuatan layout menjadi lebih mudah dan penyusunan
layout menjadi lebih teratur dan lebih rapi
dibandingkan menggunakan tabel </p>
</div>

<br />
<div id="footer">
<p class="tengah"> desain oleh rais 2010 </p>
</div>

</body>
</html>


Gambar 7.9 kode case border.html
4. Ketik kode css berikut ini simpan dengan nama case border.css
serif;
82
Bab 7. Style Border
font-size:12px;}

font-size:24px;
color:#0000FF;}

#header {border-style:solid;
border-width:1px;
border-color:#0000FF;
background-color:#FFFFCC;}

#isi {border-style:solid;
border-width : 1px;
border-color:blue;
background-color:#FFCCFF;}

#footer {border-style:solid;
border-width : 1px;
border-color:blue;
background-color:#FFFFCC;}

.tengah {text-align:center;}

Gambar 7.10 kode case border.css
BAB 8
STYLE BOX MARGIN

Style margin digunakan untuk membuat jarak antara teks dengan browser,
kalau di word margin digunakan untuk mengukur jarak teks dengan batas
document (kertas). Margin merupakan ukuran jarak bagian luar atau
ukuran jarak sesudah Border.

8.1. Property Margin
Margin tidak memiliki property
Selector { margin-position : value; }
Contoh :
#kotak { margin-top : 50px;
Margin-right : 30px;
Margin-bottom : 50px;
Margin-left : 30px; }
Untuk mempersingkat tulisan dari style ini bisa juga ditulis seperti ini.
#kotak { margin : 50px 30px; }

Keterangan :
Nilai dalam 50px adalan untuk posisi atas dan bawah, sedangkan nilai
30px adalah untuk posisi kanan dan kiri.

Bisa juga ditulis dengan 4 value seperti berikut :
#kotak { margin : 50px 30px 50px 30px; }

Urutan nilai margin tersebut adalah nilai atas, kanan, bawah dan kiri. Bisa
juga ditulis dengan 1 value yang sama dengan penulisan 4 value.
#kotak { margin : 10px; }

83
84
Bab 8. Style Box Margin

<head>
<title>margin</title>
#margin {margin-top : 4cm;
margin-bottom : 4cm;
margin-right : 3cm;
margin-left : 3cm; }
</style>
</head>

<body>
<div id="margin">
<p> dengan menggunakan margin, untuk pengaturan
jarak antar layout atau kolom yang dibuat menjadi
lebih dinamis, karena memiliki space atau jarak yang
membuat tampilan website menjadi lebih elegan dan
menarik </p>
</div>
</body>
</html>

85


Gambar 8.1 kode margin
Simpan dengan nama margin.html, jalankan di browser yang kamu suka

Gambar 8.2 tampilan margin
Pada penulisan kode diatas adalah menggunakan jarak margin yang biasa
digunakan dalam word dalam penulisan skripsi. Dalam pembuatan layout
jarak margin biasanya menggunakan nilai 0 untuk jarak atas dan nilai auto

86

untuk jarak kanan dan kiri pemakaian ini untuk membuat layout berada
diposisi tengah. Untuk menggunakan nilai tersebut buka jendela code
adobe dreamweaver kamu, ketik kode berikut ini :
<head>
<title>margin auto</title>
#margin {margin : 0 auto;
border-style:solid;
color:#0000FF;
width:800px;}
</style>
</head>

<body>
<div id="margin">
<p> dengan menggunakan margin, untuk pengaturan
jarak antar layout atau kolom yang dibuat menjadi
lebih dinamis, karena memiliki space atau jarak
yang membuat tampilan website menjadi lebih elegan
dan menarik </p>
</div>
</body>
</html>

87


Gambar 8.3 kode margin auto

Simpan dengan nama margin-auto.html, jalankan di browser yang kamu

Gambar 8.4 tampilan margin auto

8.2. Study Case
Setelah membahas tentang property margin, coba kamu buat seperti pada
gambar berikut :

88

Case ini membuat posisi layout berada ditengah dengan pengaturan
margin dengan selector reset menggunakan tanda asterix (*) dengan nilai
0 auto;
Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama case margin.html
<head>
<title>case margin</title>
<link rel="stylesheet" type="text/css" href="case
margin.css" />
</head>

<body>
<div id="header">
<h1> i love palcomtech, real it university </h1>
</div>
<div id="isi">
<p> dengan menerapkan style border css, maka
pembuatan layout menjadi lebih mudah dan penyusunan
layout menjadi lebih teratur dan lebih rapi
dibandingkan menggunakan tabel </p>
</div>
<div id="footer">
<p class="tengah"> desain oleh rais 2010 </p>
</div>

</body>
</html>

89


Gambar 8.6 kode case margin.html
4. Ketik kode css berikut ini simpan dengan nama case margin.css
* {margin:0 auto;}
serif;
font-size:12px;}

font-size:24px;
color:#0000FF;}

#header {border-style:solid;
border-width:1px;
border-color:#0000FF;
background-color:#FFFFCC;
margin-top:5px;
margin-bottom:5px;
width:600px;}

#isi {border-style:solid;
border-width : 1px;
border-color:blue;
background-color:#FFCCFF;
90

width:600px;}

#footer {border-style:solid;
border-width : 1px;
border-color:blue;
background-color:#FFFFCC;
margin-top:5px;
width:600px;}

.tengah {text-align:center;}


Gambar 8.7 kode case margin.css

91
BAB 9 BAB 9
STYLE BOX PADDING STYLE BOX PADDING

Style padding digunakan untuk menentukan jarak komponen body
content ke border atau ukuran jarak bagian dalam.
Style padding digunakan untuk menentukan jarak komponen body
content ke border atau ukuran jarak bagian dalam.
Padding merupakan ukuran jarak bagian dalam atau ukuran jarak antara
teks dengan border.
Padding merupakan ukuran jarak bagian dalam atau ukuran jarak antara
teks dengan border.
Ilustrasinya seperti gambar berikut : Ilustrasinya seperti gambar berikut :

Gambar 9.1 ilustrasi padding

9.1. Property Padding
Sama hal dengan margin, padding tidak memiliki property namun
digunakan langsung dengan posisi dan nilainya.
Selector { padding-position : value; }
Contoh :
#kotak { padding-top : 5px;
Padding-right : 3px;
Padding-bottom : 5px;
Padding-left : 3px; }
Untuk mempersingkat tulisan dari style ini bisa juga ditulis seperti ini.
#kotak { padding : 5px 3px; }
Keterangan :
Nilai dalam 5px adalan untuk posisi atas dan bawah, sedangkan nilai 3px
adalah untuk posisi kanan dan kiri.

92
Bab 9. Style Box Padding

Bisa juga ditulis dengan 4 value seperti berikut :
#kotak { padding : 50px 30px 50px 30px; }
Urutan nilai padding tersebut adalah nilai atas, kanan, bawah dan kiri.
Bisa juga ditulis dengan 1 value yang sama dengan penulisan 4 value.
#kotak { padding : 10px; }
Arti penulisan diatas adalah nilai untuk keseluruhan posisi atas, bawah,
kanan dan kiri bernilai 10px. Untuk menggunakan style ini buka jendela
code adobe dreamweaver kamu, ketik kode berikut ini :
<head>
<title>padding</title>
#padding {border : 1px solid blue;
padding: 4px 5px;}

</style>
</head>

<body>
<div id="padding">
<p> dengan menggunakan padding, untuk pengaturan
jarak antara teks dan border menjadi lebih dinamis
</p>
</div>
</body>
</html>

93


Gambar 9.2 kode padding
Simpan dengan nama padding.html, jalankan di browser yang kamu suka

Gambar 9.3 tampilan padding
Pada penulisan kode diatas penggunaan border ditulis menjadi lebih
singkat seperti berikut :
#selector { border : type width color; }
Penggunaan ini lebih praktis dan menjadi lebih ringkas.
#header { border : solid 1px blue; }
Dalam pembuatan layout jarak padding biasanya menggunakan nilai 0
tidak ada jarak sama sekali antara teks dengan garis border yang
digunakan. Untuk menggunakan nilai tersebut buka jendela code adobe
dreamweaver kamu, ketik kode berikut ini :
<head>
<title>padding nol</title>
94

#padding {border : 1px solid blue;
padding: 0;
width: 400px;
text-align:justify;}
</style>
</head>

<body>
<div id="padding">
dengan menggunakan padding, untuk pengaturan
jarak antara teks dan border menjadi lebih dinamis
</div>
</body>
</html>


Gambar 9.4 kode padding nol
Simpan dengan nama padding-nol.html, jalankan di browser yang kamu

Gambar 9.5 tampilan padding nol
95

9.2. Study Case
Setelah membahas tentang property padding, coba kamu buat seperti
pada gambar berikut :

Case ini membuat posisi layout berada ditengah dengan pengaturan
padding dengan selector reset global menggunakan tanda asterix (*)
dengan margin nilai 0 auto dan padding nilai 0.

Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama case1 padding.html
<head>
<title>case1 padding</title>
<link rel="stylesheet" type="text/css" href="case1
padding.css" />
</head>

<body>
<div id="head">
<h2> welcome in my site</h2>
</div>
<div id="isi">
<h2> box model </h2>
pembuatan layout menggunakan style box yakni
padding dan margin membuat halaman website menjadi
96
lebih elegan dan dinamis karena bisa membuat jarak
yang ingin ditentukan lebih mudah
</div>
<div id="footer">
desain oleh rais 2010
</div>
</body>
</html>


Gambar 9.7 kode case1 padding.html
4. Ketik kode css berikut ini simpan dengan nama case1
padding.css
* {margin:0 auto;
padding:0; }

serif;
font-size:12px;
width:600px;}

font-size:30px;
font-weight:bold; }

#head {border: solid 1px #0000FF;
padding:15px 10px;
97

background-color:#FFFF99;}

#isi {border: solid 1px #0000FF;
padding:5px 10px;
margin-top:5px;
background-color:#00CCFF;
line-height:1.5em;
text-align:justify;}

#isi h2 {padding: 10px 1px;
font-family:"Times New Roman", Times, serif;
font-size:22px; }

#footer {border: solid 1px #0000FF;
padding:5px 10px;
margin-top:5px;
text-align:center;}


Gambar 9.8 kode case1 padding.css

98

Setelah membuat layout, coba kalian buat case yang ke-2, foto atau
gambar yang di beri bingkai seperti gambar berikut :

Gambar 9.9 case 2 galeri photo
Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama case2 padding.html
<head>
<title>case2 padding</title>
<link rel="stylesheet" type="text/css" href="case2
padding.css" />
</head>

<body>
<h1> Galeri foto </h1>
<div id="galeri">
<img src="Koala.jpg" align="left" />
gambar koala yang imut yang dilindungi negara
austalia. Populasi hewan yang lucu ini tinggal
sedikit karena sering ditangkap untuk dijadikan oleh

99

peliharaan oleh oknum yang tidak bertanggung jawab,
untuk itu mari lestarikan hewan yang lucu ini. <p/>

<img src="Desert.jpg" align="right" />
gurun ini merupakan gurun yang terbesar didunia
yang memiliki keunikan tersendiri karena hasil
peninggalan jaman purba. Gurun yang terletak di
amerika ini sering digunakan oleh perfilman hollywod
karena mempunyai keunikan tersendiri dan dijadikan
objek wisata yang paling aneh.
</div>
</body>
</html>


Gambar 9.10 kode case2 padding.html
4. Ketik kode css berikut ini simpan dengan nama case2
padding.css
serif;
font-size:12px;}

100

#galeri {border : 1px solid blue;
width:300px;
padding:5px 10px;
text-align:justify;

img {width:100px;
height:100px;
border:1px dashed blue;
padding:5px 4px;
margin:5px;
background-color:#FFFFFF; }


Gambar 9.11 kode case2 padding.css

BAB 10 BAB 10
STYLE FLOAT STYLE FLOAT

Float artinya melayang atau mengambang. Apa yang melayang ? Style
float digunakan untuk digunakan untuk memanipulasi posisi sebuah
elemen HTML sehingga akan terlihat seperti melayang. Style float
membuat objek yang berada dibawahnya menjadi sejajar dengan objek
diatasnya.
Float artinya melayang atau mengambang. Apa yang melayang ? Style
float digunakan untuk digunakan untuk memanipulasi posisi sebuah
elemen HTML sehingga akan terlihat seperti melayang. Style float
membuat objek yang berada dibawahnya menjadi sejajar dengan objek
diatasnya.
Ilustrasinya seperti gambar berikut : Ilustrasinya seperti gambar berikut :

Gambar 10.1 tanpa float

Gambar 10.2 dengan float

101
102
Bab 10. Style Float

10.1. Property Float
Sama hal dengan style box yang telah dibahas pada bab sebelumnya, float
tidak memiliki property namun digunakan langsung dengan nilainya yang
berupa kiri dan kanan (left and right).
Selector { float : value; }
Contoh :
img { float : left; }
<head>
<title>float</title>
body {font-family:verdana;
font-size:12px;}
img {width:100px;
height:100px;}
.gambar1 {float: left;
border:1px solid blue;
padding:5px;
margin-right:5px;}
</style>
</head>

<body>
<img class="gambar1" src="Koala.jpg" />
orem ipsum dolor sit amet, consectetur adipiscing
elit. In faucibus, arcu id suscipit faucibus, sem
felis pharetra ante, at porttitor ligula eros et
ante. Phasellus vestibulum, nunc eget
</body>
</html>

103
Bab 10. Style Float

seperti gambar berikut ini :

Gambar 10.3 kode float

Simpan dengan nama float.html, jalankan di browser yang kamu suka

Gambar 10.4 tampilan float

104
Bab 10. Style Float

10.2. Study Case
Mengubah galeri photo dari bab sebelumnya menjadi 2 kolom seperti
gambar berikut :

Gambar 10.5 float galeri photo
Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama float galeri.html
<head>
<title>float galeri</title>
<link rel="stylesheet" type="text/css" href="float
galeri.css" />
</head>

105
Bab 10. Style Float

<body>
<h1> Galeri foto </h1>
<div id="box1">
<h3> koala </h3>
<img src="Koala.jpg" />
gambar koala yang imut yang dilindungi negara
austalia. Populasi hewan yang lucu ini tinggal
sedikit karena sering ditangkap untuk dijadikan oleh
peliharaan oleh oknum yang tidak bertanggung jawab,
untuk itu mari lestarikan hewan yang lucu ini.
</div>
<div id="box2">
<h3> gurun </h3>
<img src="Desert.jpg" />
gurun ini merupakan gurun yang terbesar didunia
yang memiliki keunikan tersendiri karena hasil
peninggalan jaman purba. Gurun yang terletak di
amerika ini sering digunakan oleh perfilman hollywod
karena mempunyai keunikan tersendiri dan dijadikan
objek wisata yang paling aneh.
</div>
</body>
</html>

106
Bab 10. Style Float


Gambar 10.6 kode float galeri.html
4. Ketik kode css berikut ini simpan dengan nama float galeri.css
body {font-family:verdana;
font-size:12px;
line-height:1.5em;}

img {width:100px;
height:100px;
float:left;
border:1px solid #0000FF;
padding:5px 5px;
margin:3px 4px;

#box1 {border:1px solid blue;
width:200px;
float:left;

107
Bab 10. Style Float

margin-right:5px;
padding:1px 4px;
background-color:#FFCCCC;}

#box2 {border:1px solid blue;
width:200px;
float:left;
padding:1px 4px;
background-color:#FFCCCC;}


Gambar 10.7 kode float galeri.css

108
Bab 10. Style Float

Kita bisa memanfaatkan property float ini untuk membuat menu secara
horizontal dengan menggunakan elemen list. Tampilan menu horizontal

Gambar 10.8 float menu horizontal
Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama float menu.html
<head>
<title>float menu horizontal</title>

<link rel="stylesheet" type="text/css" href="float
menu.css" />
</head>

<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Tutorial</a></li>
</ul>
</body>
</html>

109
Bab 10. Style Float


Gambar 10.9 kode float galeri.html
4. Ketik kode css berikut ini simpan dengan nama float menu.css
body {font-family:arial;
font-size:12px;}

ul{list-style-type:none;}

li a{float:left;
text-decoration:none;
padding:5px 10px;}

li a:hover{ float:left;
background-color:#00FF66;
color:#0000FF;}

110
Bab 10. Style Float


Gambar 10.10 kode float menu.css

BAB 11 BAB 11
KREASI MENU KREASI MENU

Menu atau dengan kata link ini digunakan untuk menghubungkan
halaman utama dengan halaman lainnya. Keberadaan menu sudah
menjadi bagian dalam desain web. Dengan menggunakan css menu yang
dibuat menjadi lebih menarik dan atraktif serta bisa dikembangkan
dengan mudah. Dalam pembuatan menu masih menggunakan elemen list
(ul dan ol serta li), link (anchor <a>), serta box model yang telah dibahas
pada bab sebelumnya.
Menu atau dengan kata link ini digunakan untuk menghubungkan
halaman utama dengan halaman lainnya. Keberadaan menu sudah
menjadi bagian dalam desain web. Dengan menggunakan css menu yang
dibuat menjadi lebih menarik dan atraktif serta bisa dikembangkan
dengan mudah. Dalam pembuatan menu masih menggunakan elemen list
(ul dan ol serta li), link (anchor <a>), serta box model yang telah dibahas
pada bab sebelumnya.

Menu dalam desain web hanya ada jenis yakni menu secara vertical dan
horizontal, pada bab sebelumnya telah dibahas membuat menu secara
horizontal.
Menu dalam desain web hanya ada jenis yakni menu secara vertical dan
horizontal, pada bab sebelumnya telah dibahas membuat menu secara
horizontal.

Gambar 11.1 contoh menu horizontal

11.1. Menu Vertikal
11.1.1. Vertikal Ul li
Dalam pembuatan menu ini menggunakan tag elemen ul dan li, seperti
pada gambar 11.2.

111
112
Bab 11. Kreasi Menu

Gambar 11.2 menu vertical ul li
Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama vertical_ul.html
<head>
<title>vertikal ul</title>
href="vertikal_ul.css" />
</head>

<body>
<h2>Menu </h2>
<ul>
<li><a href="#">Kategori</a></li>
<li><a href="#">Download</a></li>
</ul>
</body>
</html>

113
Bab 11. Kreasi Menu


Gambar 11.2 kode vertical ul.html
4. Ketik kode css berikut ini simpan dengan nama vertical_ul.css
* { margin:0;
padding: 0;}

body {font-family: verdana;
font-size:14px;}

ul {width: 180px;
list-style: none;}

li a{color:#0033FF;
border-bottom:1px solid #0066FF;
padding:5px 5px;
font-family:Georgia, garamond, serif;
display:block; }

li a:hover{color:#db6d00;
background:#ffdfbf;
display:block;}

114
Bab 11. Kreasi Menu


Gambar 11.3 kode vertical ul.css
Penjelasannya :
Perhatikan pada baris ke-15 dan ke-20 pada gambar 11.3 ada property
display block yang berfungsi untuk memblock elemen tag ul biar memiliki
space atau jarak, kalau tidak menggunakan display block tampilannya
seperti berikut :

Gambar 11.4 tampilan vertical ul tanpa display block

11.1.2. Vertikal Class Ul (div class)
Setelah membuat vertical dengan elemen hml yaitu ul dan li, sekarang kita
berkreasi membuat menu vertical dengan gambar, dan menggunakan
selector class, yang didalam tag htmlnya menjadi div class.

115
Bab 11. Kreasi Menu

Adapun projectnya seperti gambar berikut.

Gambar 11.5 tampilan menu vertical class
Untuk judul saya gunakan gambar dengan ukuran 1x40px dan icon panah
berukuran 12x12px.
Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama vertikal_class.html
<head>
<title>vertikal class</title>
href="vertikal_class.css" />
</head>
<body>
<div class="class_menu">
<h3 class="head">Kategori</h3>
<ul>
<li><a href="#">Komputer</a></li>
<li><a href="#">Kesehatan</a></li>
<li><a href="#">Tutorial</a></li>
</ul>

116
Bab 11. Kreasi Menu

<h3 class="head">Link Favorit</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Palcomtech</a></li>
<li><a href="#">Deviant Art</a></li>
</ul>
</div>
</body>
</html>


Gambar 11.6 vertical class kode html
4. Ketik kode css berikut ini simpan dengan nama vertical_class.css
.class_menu{width: 180px; }

.class_menu .head{font: bold 14px Arial;
color: white;
background: black url(media/judul.png) repeat-x
center left;
margin-bottom: 10px;
text-transform: uppercase;
padding: 4px 0 4px 10px; }

117
Bab 11. Kreasi Menu

.class_menu ul{list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; }
.class_menu ul li{padding-bottom: 2px; }

.class_menu ul li a{color: #A70303;
background: url(media/panah.png) no-repeat
center left;
display: block;
padding: 2px 0;
padding-left: 19px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;}

.class_menu ul li a:hover{color:#0000FF;


Gambar 11.7 vertical class kode css
118
Bab 11. Kreasi Menu

11.1.3. Vertikal Ul Class
Kita kombinasikan elemen ul dengan class didalamnya seperti tampilan
menu berikut :

Gambar 11.8 tampilan menu vertical ul class
Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama vertikal_ul_class.html
<head>
<title>vertikal ul class</title>
href="vertikal_ul_class.css" />
</head>

<body>
<ul class="navbar">
<li><a href="#">Home</a>
<li><a href="#">About</a>
<li><a href="#">Gallery</a>
<li><a href="#">Contact</a>
</ul>
</body>
</html>

119
Bab 11. Kreasi Menu


Gambar 11.9 vertical ul class kode html
4. Ketik kode css berikut ini simpan dengan nama
vertical_ul_class.css
body {padding-left: 11em;
font-family: Georgia, "Times New Roman", Times,
serif;
color: white;
background-color: #555555 }

ul.navbar {list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 1em;
left: 1em;
width: 200px; }

ul.navbar li {background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid #FFCC00; }

ul.navbar a {text-decoration: none }

ul li:hover{color: #00CC66;
background-color:#FFCC00; }
120
Bab 11. Kreasi Menu


Gambar 11.10 vertical ul class kode css

11.1.4. Menu Vertikal ID (div id)
Setelah membahas menu vertical dengan ul, ul class, dan div class,
sekarang kita membuat menu vertical dengan menggunakan selector id
(div id), seperti gambar berikut.

Gambar 11.11 tampilan menu vertical id

121
Bab 11. Kreasi Menu

Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama vertical_id.html

<head>
<title>menu vertical id </title>
<link href="vertical_id.css" rel="stylesheet"
type="text/css" />
</head>

<body>
<div id="nav">
<ul>
<li><a href="#">Profil</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Produk</a></li>
</ul>
</div>
</body>
</html>


Gambar 11.12 vertical id kode html
122
Bab 11. Kreasi Menu

4. Ketik kode css berikut ini simpan dengan nama vertical_id.css
#nav ul{width:200px;
display:block;
margin: 0px;
padding: 0px;}

#nav li{list-style-type:none;
padding:3px 5px;
margin:1px;
border:#CCC 1px solid;
border-right: 1em solid #FF6600;
background-color:#fff;}

#nav li a{ text-decoration:none;
color:#000;}

#nav li a:hover{text-decoration:underline;
font-weight:bold;
padding-left:5px;}


Gambar 11.13 vertical id kode css

123
Bab 11. Kreasi Menu

11.1.5. Menu Vertikal Pop Up (Sub Menu)
Membuat menu vertical pop up, maksud nya ada sub menu pada saat link
mengalami hover, seperti gambar berikut.

Gambar 11.14 tampilan menu vertical pop up

Dalam pembuatan link sub menu secara vertical menggunakan ul li dalam
li, seperti ilustrasi berikut ini :
<ul>
<li><a href=#>home</a></li>
<li><a href=#>galery</a>
<ul>
<li><a href=#>gallery 1</a></li>
<li><a href=#>gallery 2</a></li>
</ul>
</li>
</ul>

Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama vertical_popup.html
<head>
<title>vertical sub menu</title>

124
Bab 11. Kreasi Menu

href="vertical_popup.css" />
</head>

<body>
<ul>
<li><a href="#">About</a></li>
<ul>
<li><a href="#">Gallery 1</a></li>
</ul>
</li>
<li><a href="#">Products</a></li>
</ul>

</body>
</html>


Gambar 11.15 vertical pop up kode html

125
Bab 11. Kreasi Menu

vertical_popup.css
* { padding: 0;
margin: 0;
font-family: Arial, sans-serif; }

body {margin: 20px;
font-size: 12px; }

ul {list-style: none;
width: 125px; }

ul a { color: #FFF;
display: block;
padding: 5px 5px 5px 10px;
width: 125px;
background: #333; }

ul a:hover { color: #4BD8FF;
background: #3C3C3C; }

ul li { border-bottom: 1px solid #FFF;
float: left;
position: relative; }

ul li ul { list-style: none;
position: absolute;
left: 140px;
top: 0;
display: none;
width: 125px;
border-left: 1px solid #FFF; }

ul li:hover ul { display: block; }

126
Bab 11. Kreasi Menu


Gambar 11.16 vertical pop up kode css

11.2. Menu Horizontal
11.2.1. Horizontal Ul li
Dalam pembuatan menu horizontal ini menggunakan elemen tag html ul
li, seperti gambar berikut :

Gambar 11.17 tampilan horizontal ul

127
Bab 11. Kreasi Menu

Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama horizontal_ul.html

<head>
<title>horizontal ul</title>
href="horizon_ul.css" />
</head>

<body>
<ul>
<li><a href="#">Kategori</a></li>
<li><a href="#">Belajar List</a></li>
</ul>
</body>
</html>


Gambar 11.18 horizontal ul kode html
4. Ketik kode css berikut ini simpan dengan nama horizontal_ul.css
ul {margin: 0;
padding:0;
list-style: none;}

128
Bab 11. Kreasi Menu

li {display:inline;}

li a{float:left;
color:#3333FF;
border-right:1px solid #ff7f00;
border-bottom:1px solid #fff;
border-top:1px solid #fff;
padding:2px 10px 2px 10px;
font-family:Georgia, garamond, serif; }

li a:hover{ float:left;
color:#db6d00;
border-bottom:1px solid #ff7f00;
border-top:1px solid #ff7f00;
background:#ffdfbf; }


Gambar 11.19 horizontal ul kode css

129
Bab 11. Kreasi Menu

11.2.2. Horizontal Class
Membuat menu horizontal dengan class selektor yang disertai perubahan
gambar saat di link hover, seperti gambar berikut :

Gambar 11.20 tampilan horizontal ul
Untuk gambar saya gunakan dua gambar dengan ukuran 150x28px seperti
berikut :

Gambar 11. 21 gambar link

Gambar 11.22 gambar link hover
Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama horizontal_class.html
<head>
<title>horizontal class</title>
href="horizontal_class.css" />
</head>
<body>
<div id="container">
<ul class="navigasi">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
130
Bab 11. Kreasi Menu

<li><a href="#">faq</a></li>
</ul>
<div id="content">
menggunakan menu horizontal dengan ul class,
dengan gambar seperti ini
</div>
</div>
</body>
</html>


Gambar 11.23 horizontal class kode html
horizontal_class.css
* { margin: 0 auto;
padding: 0; }

body { background: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px; }

ul.navigasi { list-style: none;
display: block; }

ul.navigasi li { float: left; }

ul.navigasi li a { display:block;
background:url(rounded.gif) no-repeat;
131
Bab 11. Kreasi Menu

width: 150px;
height: 21px;
padding: 7px 0 0 0;
text-align: center;
color: #333; }

ul.navigasi li a:hover {
background:url(rounded_hover.gif) no-repeat; }

#container { width: 800px; margin-top: 30px; }

#content { background: #DDD;
height: 100px;
margin-top: 30px;
clear: both;
border-top: 1px solid #CCC;
padding:10px;}


Gambar 11.24 horizontal class kode css
132
Bab 11. Kreasi Menu

11.2.3. Horizontal ID
Membuat menu horizontal dengan ID selektor yang yang digabung
dengan menu vertikal id serta layout, seperti gambar berikut :

Gambar 11.25 tampilan horizontal id
Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama horizontal_id.html
<head>
<title>horizontal id</title>
<link href="horizontal_id.css" rel="stylesheet"
type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="menu1">
<ul>
<li><a href="#">Profil</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Produk</a></li>
</ul>
</div>
<div id="content">
<div id="sidebar">
<div id="menu2">
<h3>Kategori</h3>
133
Bab 11. Kreasi Menu

<ul>
<li><a
href="#">Komputer</a></li>
<li><a
href="#">Kesehatan</a></li>
<li><a
href="#">Budaya</a></li>
</ul>
</div>
</div>
<div id="posting">
<h3> Horizontal Id </h3>
<p> Kegiatan Opdik Kampus yang telah
berlangsung pada bulan November 2009, serta kegiatan
Outbond yang berlangsung pada tanggal 05 Desember
2009 telah terlaksana dengan baik. Seperti
diberitahukan sebelumnya, bahwa kegiatan Opdik dan
Outbond merupakan salah satu syarat untuk mengambil
Tugas Akhir ataupun Skripsi, yang dibuktikan dengan
sertifikat telah mengikuti Opdik dan Outbond. Daftar
nama mahasiswa/i yang telah mengikuti Opdik dan
Outbond tahun 2009 dapat dilihat disini. Status
kelulusan "done" artinya mahasiswa/i tersebut telah
lulus Opdik/Outbond, sedangkan "no" artinya
mahasiswa/i tersebut tidak lulus/belum mengikuti
Opdik/Outbond, dan dipersilahkan untuk mengikuti
Opdik/Outbond pada tahun selanjutnya. </p>
</div>
</div>
</div>
</body>
</html>

134
Bab 11. Kreasi Menu


Gambar 11.26 horizontal class kode html
4. Ketik kode css berikut ini simpan dengan nama horizontal_id.css
body{font-family:tahoma; font-size:12px;
background:#000;}

#wrapper{width:800px; margin:0 auto; background: #fff;}

#menu1{overflow:hidden; margin-top:5px;
background:#fff;}
#menu1 ul{display:block; margin:0px; padding:0px;}
#menu1 li{float:left; list-style-type:none;
padding:5px 25px; }
#menu1 li a{text-decoration:none; color:#0000FF; }
#menu1 li:hover{background:#FF6600;}

#content{margin-top:5px;}

135
Bab 11. Kreasi Menu

#sidebar{background:#fff; float:left; width:245px;}
#sidebar h3{border:1px solid #ccc; margin: 0px;
padding: 3px 5px; background:#FF6600;}
#menu2 ul{width:245px; display:block; margin: 0px;
padding: 0px;}
#menu2 li{list-style-type:none; padding:3px 5px 3px
5px; margin:1px;
border-bottom:#CCCCCC 1px solid;
border-left: 1em solid #FF6600;}
#menu2 li a{text-decoration:none; color:#0000FF;}
#menu2 li:hover{background:#FF6600;}

#posting{background:#FFFFFF; float:right; width:550px;}
#posting h3{border:1px solid #ccc; margin: 0px;
padding: 3px 5px; background:#FF6600;}
#posting p{margin:0 auto; padding:0 0 3px 3px; line-
height:1.5em;}


Gambar 11.27 horizontal class kode css

136
Bab 11. Kreasi Menu

11.2.4. Menu Horizontal Pop Up (Sub Menu)
Pembuatan menu horizontal pop up (sub menu) sama seperti vertikal pop
up, namun beda posisi, yang membedakan hanya pada kode cssnya saja,
tampilannya seperti gambar berikut.

Gambar 11.28 tampilan menu vertical pop up
Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama
horizontal_popup.html
<head>
<title>vertical sub menu</title>
href="horizontal_popup.css" />
</head>

<body>
<ul>
<li><a href="#">About</a></li>
<ul>
</ul>
</li>
137
Bab 11. Kreasi Menu
<li><a href="#">Products</a></li>
</ul>

</body>
</html>

Gambar 11.29 vertical pop up kode html
horizontal_popup.css
* { padding: 0; margin: 0;
font-family: Arial, sans-serif; }

body {margin: 20px;
font-size: 12px; }

ul {list-style: none; }

ul a { color: #FFF;
display: block;
width: 125px;
background: #333; }

ul a:hover { color: #4BD8FF;
138
Bab 11. Kreasi Menu
background: #3C3C3C; }

ul li { border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
float: left; position: relative; }

ul li ul { list-style: none;
position: absolute;
left: 0; top: 100%;
display: none; width: 125px;

ul li:hover ul { display: block;
position: absolute;
left: -1px; top: 26px;
border-left: 1px solid #FFF;}


Gambar 11.30 vertical pop up kode css
BAB 12 BAB 12
KREASI LAYOUT WEB KREASI LAYOUT WEB

12.1. Layout 12.1. Layout
Layout artinya tata letak. Apa yang mau ditata dan apa yang mau
diletakkan ? Layout berarti proses menata komponen web dengan teratur
letak dan penempatannya, berupa teks atau grafik pada halaman web.
Layout meliputi penyusunan, pembagian tempat dalam suatu halaman,
pengaturan jarak spasi, pengelompokan teks dan grafik, dan penekanan
pada suatu bagian tertentu. Komponen web mempunyai 3 komponen
dasar yakni header, content, dan footer yang bisa dikembangkan menjadi
bentuk layout yang diinginkan.
Layout artinya tata letak. Apa yang mau ditata dan apa yang mau
diletakkan ? Layout berarti proses menata komponen web dengan teratur
letak dan penempatannya, berupa teks atau grafik pada halaman web.
Layout meliputi penyusunan, pembagian tempat dalam suatu halaman,
pengaturan jarak spasi, pengelompokan teks dan grafik, dan penekanan
pada suatu bagian tertentu. Komponen web mempunyai 3 komponen
dasar yakni header, content, dan footer yang bisa dikembangkan menjadi
bentuk layout yang diinginkan.

Gambar 12.1 komponen layout

Bentuk layout yang standar atau yang biasa digunakan dalam desain web
seperti gambar berikut :
1. 1 kolom content.

139
140
Bab 12. Kreasi Layout Web

Gambar 12.2 layout 1 kolom
2. 2 kolom dengan content dan sidebar.

3. 3 kolom dengan content dan 2 sidebar di kanan kiri.


141

Dalam pembuatan layout bentuk konsep yang saya tawarkan sebelum
membuatnya tampilannya ke browser, bentuk nya seperti gambar berikut :

Gambar 12.5 konsep layout
Penjelasan gambar :
Penamaan wrapper berfungsi untuk membungkus atau mengapit
keseluruhan komponen layout, dengan wrapper untuk menentukan lebar
layout menjadi lebih mudah. Sedangkan penamaan content untuk
membungkus atau mengapit isi didalamnya yaitu sidebar dan informasi
yang mau disampaikan.

Penulisan dalam htmlnya menjadi lebih ringkas seperti berikut ini :
<div id=wrapper>
<div id=header> </div>
<div id=content>
<div id=sidebar> </div>
<div id=isi> </div>
</div>
<div id=footer> </div>
</div>

142

Untuk menggunakan konsep ini buka jendela code adobe dreamweaver
<head>
<title>layout web</title>
<link rel="stylesheet" type="text/css" href="layout
web.css" />
</head>

<body>
<div id="wrapper">
<div id="header"> </div>
<div id="content">
<div id="side_bar"> </div>
<div id="isi"> </div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>

Seperti gambar berikut

Gambar 12.6 kode layout web.html
Lalu buka jendela baru, pada page type klik css, lalu ketik kode css berikut
ini :
* {margin:0 auto;
padding;}
143

#wrapper{width:600px;

#header{width:600px;
background-color:#0066FF;
height:120px;
margin-top:5px;}

#content{width:600px;
margin-top:5px;
overflow:hidden;}

#side_bar{float:left;
background-color:#33CCFF;
width:200px;
height:200px;}

#isi{float:right;
background-color:#0066CC;
width:395px;
height:300px;
margin-left:5px;}

#footer{width:600px;
height:30px;
background-color:#0033FF;
clear:both;
margin-top:5px;}

144

seperti gambar berikut ini :

Gambar 12.7 kode layout web.css

Gambar 12.8 tampilan layout web.css

145
Penjelasan :
perhatikan pada baris ke-14 pada gambar terdapat property overflow-
hidden, yang berfungsi untuk menghilangkan batas kelebihan float pada
selector #isi : float:right;, sedangkan di dibaris ke-30 terdapat property
clear:both; berfungsi untuk tidak mengizinkan adanya float pada selector
#footer, kalau tidak digunakan kedua property ini maka hasilnya seperti
gambar berikut :

Gambar 12.8 tampilan layout web edit
Perhatikan pada gambar posisi footer sejajar dengan #side_bar dan #isi
karena pengaruh float:right. Membuat layout content berbingkai dan
menu dibawah header. Tampilannya seperti pada gambar 12.9.

146

Gambar 12.9 tampilan layout web content

Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama layout2.html
<head>
<title>layout2</title>
href="layout2.css" />
</head>

<body>
<div id="wrapper">
<div id="head"> header </div>
<div id="menu"> menu </div>
<div id="content">
<div id="kiri"> menu kiri </div>
<div id="isi"> informasi </div>
</div>
<div id="footer"> footer </div>
</div>
</body>
</html>
147


Gambar 12.10 kode layout2.html
4. Ketik kode css berikut ini simpan dengan nama layout2.css
* {margin: 0 auto; padding: 0;}

body{text-align:center; background-color:#999999;}
#wrapper {width:800px; border:1px solid black;
margin-top:5px; background-color:#FFFFFF;}

#menu {height:30px; background-color:#6699CC;
margin-top:1px; }

#head {height:100px; background-color:#0099FF; }

#content {height:300px; background:#FFFFFF;}

#kiri {width: 240px; height:290px; margin:5px;
background-color:#99FF66; float:left;}

#isi {width: 540px; height:290px; margin:5px;
background-color:#FFFF99; float:right;}

#footer {height:40px; background-color:#0099FF;}

148


Gambar 12.11 kode layout2.css

12.2. Study Case
Dari materi yang telah dibahas membuat layout 2 kolom, kita ubah
menjadi 3 kolom seperti gambar berikut :

Gambar 12.12 tampilan layout 3 kolom
Langkah kerja :
149

2. Ketik kode berikut ini simpan dengan nama layout 3kolom.html
<head>
<title>layout 3 kolom</title>
3kolom.css" />
</head>

<body>
<div id="wrapper">
<div id="head"> header </div>
<div id="menu"> menu utama </div>
<div id="content">
<div id="kiri"> menu kiri </div>
<div id="isi"> informasi </div>
<div id="kanan"> menu kanan </div>
</div>
<div id="footer"> footer </div>
</div>
</body>
</html>


Gambar 12.13 kode layout 3kolom.html
5. Buka jendela baru pilih page type css.

150

6. Ketik kode css berikut ini simpan dengan nama layout
3kolom.css
* {margin:0 auto; padding:0; }

body {font-family:verdana; font-size:12px; text-
align:center; }

#wrapper{ width:800px; }

#head {height:100px; background-color:#0099FF;}

#menu {height:30px; background-color:#66FFFF;}

#content{background-color:#999999; height:300px;}

#kiri {width: 200px; height:290px; margin:5px;
background-color:#99FF66; float:left;}

#isi {width: 370px; height:290px; margin:5px;
background-color:#FFFF99; float:left;}

#kanan {width: 200px; height:290px; margin:5px;
background-color:#99FF66; float:right;}

#footer {height:40px; background-color:#0099FF;}

151


Gambar 12.14 kode layout 3kolom.css
Membuat layout yang dikelilingi oleh bingkai atau background berwarna
putih atau layout frame, seperti gambar berikut :

Gambar 12.15 tampilan layout frame
Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama layout frame.html
152

<head>
<title>layout frame</title>
frame.css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<h1> Judul Web </h1>
<h2> Sub Judul, Slogan </h2>
</div>
<div id="content">
<div id="menu_kiri">
<h3> Categories </h3>
<ul>
<li><a href="#">Computer</a></li>
<li><a href="#">Health</a></li>
</ul>
<h3>Archives</h3>
<ul>
<li><a href="#">December
2010</a></li>
<li><a href="#">January
2011</a></li>
<li><a href="#">February
2011</a></li>
</ul>
</div>
<div id="info">
<h2><a href="#"> Judul 1 </a></h2>
<div class="artikel">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. In faucibus, arcu id
suscipit faucibus, sem felis pharetra ante, at
porttitor ligula eros et
ante. Phasellus vestibulum, nunc eget malesuada
vehicula, odio augue pharetra dui, eu pretium orci
turpis at urna.
</div>
<h2><a href="#"> Judul 2 </a></h2>
153

<div class="artikel">
Lorem ipsum dolor sit amet,
porttitor ligula eros et
turpis at urna.
</div>
</div>
<div style="clear: both;"> </div>

<div id="footer">
desain oleh rais 2010
</div>
</div>
</div>

</body>
</html>

154


Gambar 12.16 kode layout frame.html
8. Ketik kode css berikut ini simpan dengan nama layout frame.css
* {margin: 0 auto;}

body {font: .8em Arial, Sans-Serif; line-height:
1.8em;
background: #333; color: #444; }

155

a

{color: #FF7A09; text-decoration: none;}
a

:visited {color: #FF7A09; text-decoration: none;}
a

:hover {color: #333; text-decoration: underline;}
h

2 { margin: 0 0 10px; padding: 10px 0 3px; }
h3 {padding-left: 10px; color: #fff;
background: #FE7B09; font-size: 1em;

height: 24px; line-height: 24px; }
u

l {padding: 0; margin: 0 0 10px;}
li {list-style-type: none;}

.artikel {padding: 5px 0 10px 0; }

#header {background: #FE7B09; height: 100px;}

#header h1 {font-size: 30px; font-weight: 100;
letter-spacing: -1px; padding: 22px 0 5px 10px;}

#header h2 {color: #eee; font-size: 19px;
font-weight: 100; padding: 0 0 0 11px;
letter-spacing: -1px; line-height: 12px;}

#wrapper {padding: 10px 10px 3px 10px; width:
760px;
margin:20px auto; background: #fff;}

#content {width: 760px; margin-bottom: 10px;
margin-top: 10px; }

#menu_kiri {float: left; width: 180px;
background: #FFD8AF; border: 1px dotted
#FF8B1E;}

#

menu_kiri ul {padding: 5px 10px 10px 10px; }
#info {float: right; width: 550px;

padding: 0 10px 10px 10px; background: #FFD8AF;}
#info h2 {padding: 10px 0 5px; }

#footer {font-size: 11px; text-align: center;
border-top: 1px solid #ccc; padding: 10px 5px;
margin-top:10px;}

156

seperti gambar kode css berikut :

Gambar 12.17 kode layout frame.css
BAB 13 BAB 13
STYLE FORM STYLE FORM

Form sering digunakan banyak website dalam pembuatan email dan juga
jejaring social seperti facebook, memberikan form untuk mengisi biodata
seseorang untuk bergabung. Jadi fungsi form digunakan untuk media
input atau formulir secara online. Form mempunyai komponen input
seperti textfield dan textarea, media pilihan seperti checkbox dan radio
button, list menu serta tombol. Ilustrasinya seperti gambar berikut :
Form sering digunakan banyak website dalam pembuatan email dan juga
jejaring social seperti facebook, memberikan form untuk mengisi biodata
seseorang untuk bergabung. Jadi fungsi form digunakan untuk media
input atau formulir secara online. Form mempunyai komponen input
seperti textfield dan textarea, media pilihan seperti checkbox dan radio
button, list menu serta tombol. Ilustrasinya seperti gambar berikut :

Gambar 13.1 contoh form

13.1. Property Form
Form tidak mempunyai property, melainkan memiliki type objek seperti
input, dan label serta type form itu sendiri. Pembuatan form diawali
dengan sintak penulisannya seperti berikut, buka jendela code adobe
dreamweaver kamu, kemudian ketik kode.

157
158
Bab 13. Style Form

<form id="form1" name="form1" method="post"
action="">
<label>user name
<input type="text" name="textfield" id="textfield"
/>
</label>
<p>
<label>password
<input type="text" name="textfield2"
id="textfield2" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button"
value="Submit" />
</label>
</p>
</form>

Ketika dijalankan maka hasilnya seperti gambar berikut :

Gambar 13.2 Tampilan tag form

13.2. Style Form
Style form ini maksudnya merapikan tampilan form dengan menggunakan
css, seperti gambar 13.3.

159
Bab 13. Style Form

Gambar 13.3 tampilan style form
Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama style_form.html
<head>
<title>style form</title>
form label {display: block;
float: left;
width: 150px;
padding: 0;
margin: 5px 0 0;
text-align: left;}

form input, form textarea, form select {
width:auto;
margin:5px 0 0 10px;}

.form br {clear:left; }

.

tombol {margin-left:160px; margin-top:5px;}
</style>
</head>

<body>
<h2>Buku Tamu</h2>
<form method="post" action="#">
<p>
160
Bab 13. Style Form

<label>Nama Anda:</label> <input type="text"
name="nama" id="posnama" size="30" /><br />
<label>Komentar Anda:</label> <textarea
name="komentar" cols="30" rows="5"
id="pospesan"></textarea><br />
<input type="submit" name="submit" value="Kirim
Komentar" class="tombol" />
</p>
</form>

</body>
</html>


Gambar 13.4 kode form galeri.html

13.3. Form Tanpa Tabel
Biasanya merapikan form dengan table dalam desain ini kita merapikan
form dengan css, seperti gambar 13.5.

161
Bab 13. Style Form

Gambar 13.5 tampilan form tanpa tabel
Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama form_tabless.html
<head>
<title>:: Buku Tamu ::</title>
body{font-family:Arial; font-size:12px; }

form{border:1px solid #33CCFF;
width:550px;
background:#66FFFF;}

label{float:left; width:150px;
font-weight:bold; margin:5px 3px;
text-align:right; padding-right:3px; }

input, textarea, select{margin-bottom:10px;
border: 1px solid #b9c7b0;
padding:3px; margin-top:5px;}

162
Bab 13. Style Form

input, textarea{width:330px;}

textarea{height:100px;}

small{display:block; padding-left:165px;}

.checkbox{width:2em; border:none;
padding:0; margin-top:5px;}
.button{margin-left:165px;
margin-top:15px; width:120px;
font-weight:bold; background:#2B5401;
color:#fff; font-size:14px;}

br {clear:left;}
</style>
</head>

<body>
<h2>Buku Tamu</h2>
<form action="#" method="post">
<label>Nama</label> <input type="text" name="name"
id="name" /><small>Wajib diisi</small><br />
<label>Email</label> <input type="text" name="email"
id="email" /><small>Wajib diisi</small><br />

<label>Komentar</label> <textarea name="comment"
id="comment" rows="5"
cols="100"></textarea><small>Wajib diisi</small><br
/>

<label>Setuju dengan Terms</label> <input
type="checkbox" name="aggree" id="aggree"
class="checkbox" /><br />

<input type="submit" name="task" value="Kirim"
class="button" />
</form
</body>
</html>

163
Bab 13. Style Form


Gambar 13.6 kode form tabless.html

13.4. Search Form Header
Dalam desain web, biasanya para desainer menampilkan form pencarian
berada dintara header bersebelahan dengan menu, seperti gambar
berikut:

Gambar 13.7 tampilan search form header

164
Bab 13. Style Form

Untuk gambar menu header nya dibuat menggunakan photoshop dengan
ukuran 980x90 px, seperti berikut :

Gambar 13.8 background header
Langkah kerja :
form_search_header.html
<head>
<title>:: search form header ::</title>
<link rel="stylesheet" href="form_search_header.css"
type="text/css" />
</head>

<body>
<div id="header">
<div id="menu">
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Profile</a></li>
<li><a
href="#">Contact</a></li>
<li><a
href="#">Gallery</a></li>
</ul>
</div>
<div id="search">
<form method="get" action="">
<fieldset>
<input type="text" name="s"
id="search-text" size="15" />
<input type="submit"
id="search-submit" value="GO" />
</fieldset>
165
Bab 13. Style Form

</form>
</div>
</div>
</body>
</html>

Gambar 13.9 kode search form header.html
form_search_header.css
* {margin:0 auto; padding:0;}

body {background: #FFFFFF url(media/img01.jpg)
repeat-x;}

#header {width: 920px;
height: 90px;
padding: 0px 30px;
background: url(media/img02.jpg) no-repeat;}

#menu {float: left;
width: 600px;
166
Bab 13. Style Form

height: 90px;}

#menu ul {margin: 0;
list-style: none;}

#menu li {display: block;
float: left;}

#menu a {display: block;
float: left;
text-align: center;
font: 22px Arial, Helvetica, sans-serif;
color: #FFF;}

#menu a:hover { text-decoration: none; }

#search {float: right;
width: 240px;
padding: 35px 10px 0px 0px;}

#search form {float: right;
padding: 4px 0px 0 0;}

#search fieldset {border: none;}

#search input {float: left;
font: 12px Georgia;}

#search-text {width: 150px;
height: 18px;
padding: 3px 0 0 5px;
border: 1px solid #333333;
background: #ECF9E4;
color: #000;}

#search-submit {height: 21px;
margin-left: 10px;
padding: 0px 5px;
background: #2A4345;
167
Bab 13. Style Form

border: 1px solid #5F817E;
color: #FFFFFF;}


Gambar 13.10 kode search form header.css

168
Bab 13. Style Form

13.5. Search Form Kolom
Setelah membuat form search sejajar dengan header, sekarang kita buat
form search berada di kolom layout seperti gambar berikut:

Gambar 13.11 tampilan search form header
Langkah kerja :
form_search_hkolom.html
<head>
<title>search - kolom </title>
href="form_search_kolom.css" />
</head>

<body>
<div id="wrapper">
<div id="content">
<div id="sidebar">
<div id="search">
<form method="" action="#">
<input type="text" id="search-text"
/>
<input type="submit"
value="search" id="search-submit" />
</form>
</div>
<ul>
<li><a href="#">PC</a>
169
Bab 13. Style Form

<ul>
<li><a
href="#">Intel</a></li>
<li><a href="#">AMD</a></li>
</ul>
</li>
<li><a href="#">Notebook</a></li>
<li><a href="#">Monitor</a></li>
<li><a href="#">Hard Drive</a></li>
</ul>
</div>
<div id="isi">
<div id="popular">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. In faucibus, arcu id suscipit faucibus, sem
felis pharetra ante, at porttitor ligula eros et
turpis at urna. Vivamus est enim, malesuada sit amet
euismod vel, tincidunt sit amet nulla. Nullam orci
magna, vestibulum, nunc eget malesuada vehicula,
odio augue pharetra dui, eu pretium orci turpis at
urna. Vivamus est enim, malesuada sit amet euismod
vel, tincidunt sit amet nulla. <a href="#"> more...
</a> </div>
</div>
</div>
</div>

</body>
</html>

170
Bab 13. Style Form


Gambar 13.12 kode search form kolom.html
form_search_kolom.css
* {margin:0 auto; padding:0; }

body {font:12px verdana; }

a {text-decoration : none; }

#wrapper {width:800px;}

#content{clear:both;
overflow:hidden; }

#sidebar {float:left;
background:#02bfe5;

width : 230px;}
#search {width: 230px;
height: 60px;
171
Bab 13. Style Form
background: #02bfe5;
border-bottom: 1px solid #FFFFFF;}

#search form {height: 41px;
margin: 0;
padding: 10px 0 0 20px;}

#search-text {width: 120px;
border: none;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #464032;}

#search-submit {width: 50px;
height: 23px;
border: 1px solid #525252;
background: #525252;
font-weight: bold;
font-size: 10px;
color: #FFFFFF;}

#sidebar ul {list-style: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;}

#sidebar ul a { color: #FFF;
display: block;
width: 225px;
padding: 5px 0 5px 5px;
background: #02bfe5; }

#sidebar ul a:hover { color: #4BD8FF;
bac

kground: #CCC; }
#sidebar ul li { border-bottom: 1px solid #FFF;
position: relative; }

#sidebar ul li ul { list-style: none;
position: absolute; left: 231px;
top: 0; display: none;
width: 230px;
172
Bab 13. Style Form

#sidebar ul li:hover ul { display: block; }

#popular {width:560px;
padding:0 5px 10px 3px;
background:#4BD8FF;
float:right;}


Gambar 13.13 kode search form kolom.css
BAB 14 BAB 14
DESAIN WEB DESAIN WEB

Desain yang dibuat masih menggunakan gambar yang cukup besar, tema
ini menceritakan orang mabuk kerja dengan komputer, menggunakan
komponen gambar monitor, keyboard dan mouse serta ditemani
secangkir kopi teman penghilang kantuk, berikut tampilan desainnya
seperti berikut :
Desain yang dibuat masih menggunakan gambar yang cukup besar, tema
ini menceritakan orang mabuk kerja dengan komputer, menggunakan
komponen gambar monitor, keyboard dan mouse serta ditemani
secangkir kopi teman penghilang kantuk, berikut tampilan desainnya
seperti berikut :

Gambar 14.1 desain web tema myportfolio
Dalam pembuatan gambar menggunakan photoshop.
1. Pastikan aplikasi adobe photoshop kamu aktif.
2. Kita buat kanvas baru dengan ukuran width:1000px, height:700px,
dan resolution:72 pixels/inch.

173
174
Bab 14. Desain Web

Gambar 14.2 jendela ukuran kanvas
3. Setelah itu aktifkan ruler, nya klik menu view, pilih rulers, lalu
pada rulers klik kanan mouse ubah satuan menjadi pixels.

Gambar 14.3 mengubah ukuran rulers jadi pixels
4. Aktifkan garis bantuan secara vertical di garis 100px dan 900px.

175
Bab 14. Desain Web

Gambar 14.4 menampilkan garis bantu
5. Buat gradasi warna latar belakang dengan warna foreground
#00bff3 dan background #beeffc.

Gambar 14.5 background gradasi
6. Karena saya menggunakan monitor maka ukuran monitor yang
digunakan adalah 1280 x 915px mencegah distorsi pada gambar.

176
Bab 14. Desain Web

7. Masukan gambar monitor yang telah diseleksi, kedalam kanvas
perkecil kedalam ukuran garis bantu 100 dan 900.

Gambar 14.6 memasukan gambar monitor
8. Buat garis bantu secara vertical kembali di garis 70 dan 140px.
9. Buat layer baru kita buat papan dibawah nya dengan marquee
rectangular, masukan pattern wood (kayu), kemudian sudut nya
dimiringkan dengan skew, seperti gambar 14.8.

Gambar 14.8 membuat papan monitor

177
Bab 14. Desain Web

10. Buat layer baru lagi untuk bagian bawah di papan atas nya
seperti langkah 8 seperti gambar berikut :

Gambar 14.9 membuat palang bawah papan
11. Buat layer baru, kita buat kertas note yang menempel pada
monitor menggunakan marquee rectangular, beri warna kuning,
lalu isi dengan efek filter texturizer, buat lobang diatas kiri, buat
miring sedikit dengan rotate, seperti gambar 14.10.

Gambar 14.10 membuat kertas notes atas
12. Buat layer baru, kita buat untuk perekat kertas note, nya dengan
marquee rectangular, beri warna #c9c9c8, untuk memperjelas

178
Bab 14. Desain Web

pembuatan lebih baik di zoom, lalu lakukan pemotongan gerigi
dengan polygonal lasso tool, seperti gambar berikut :

Gambar 14.11 membuat perekat kertas notes
13. Duplikat kertas note untuk bagian bawah seperti gambar 14.12.

Gambar 14. 12 duplikat kertas notes atas
14. Buat layer baru untuk membuat stiker diatas monitor dipojok kiri
atas, dengan marquee rectangular tool, beri warna #fff899, lalu
potong kembali dengan polygonal lasso tool seperti gambar
14.13.

179
Bab 14. Desain Web

Gambar 14.13 membuat stiker atas 1
15. Buat kembali seperti langkah 13, namun dibalik dan diberi warna
kuning, seperti gambar 14.14.

Gambar 14.14 membuat stiker atas 2
16. Buat layer baru, beri lapisan pada layar monitor yang berwarna
hitam dengan marquee rectangular tool, beri warna # f4f86f,
kurangi opacity nya menjadi 95%, seperti gambar 14.15.

180
Bab 14. Desain Web

Gambar 14.15 membuat penutup layar
17. Masukan gambar keyboard yang telah disiapkan, ubah sudut atas
nya dengan distort untuk menutupi palang monitor, buat kabur
sedikit dengan gausian blur dengan nilai 1 px seperti gambar
berikut :

Gambar 14.16 memasukan keyboard
18. Lalu masukan gambar mouse kedalam area kanvas, perkecil
ukuran nya lalu rotate, buat mengabur sedikit dengan gausian
blur dengan nilai 1px, seperti gambar 14.17.

181
Bab 14. Desain Web

Gambar 14.17 memasukan mouse
19. Kita masukan gambar kopi yang telah disiapkan, perkecil ukuran
gambar, buat mengabur dengan gausian blur dengan nilai 1px,
buat efek drop shadow, lalu ubah posisi dengan flip horizontal
seperti gambar berikut :

Gambar 14.18 memasukan cangkir kopi
20. Buat judul diatas monitor dipojok kanan atas, dengan text, jenis
huruf Harlow Solid Italic, style italic, ukuran 19px, warna #050ad5,
beri efek stroke dengan warna kuning, tulis dengan judul My
Portfolio, seperti gambar berikut :

Gambar 14.19 membuat judul
182
Bab 14. Desain Web

21. Tambahkan teks dengan tulisan slogan it holic work hard with
computer, dengan jenis huruf arial rounded mt bold, ukuran 6pt,
warna kuning, beri efek stroke warna biru, letakkan dibawah judul
my portfolio, seperti gambar berikut :

Gambar 14.20 membuat slogan
22. Untuk meramaikan desain saya tambahkan aksesoris gambar
kupu-kupu dengan shape tools, warna kuning sebanyak dua buah

Gambar 14.21 membuat aksesoris kupu-kupu
23. Lalu buat teks di kertas note atas dan bawah, menggunakan jenis
huruf arial rounded mt bold, warna biru, ukuran + 10 16pt lalu
atur posisi nya seperti gambar 14.22.

183
Bab 14. Desain Web

Gambar 14.22 membuat teks dikertas notes atas bawah
24. Lalu potong gambar dengan slice tool untuk teks yang berada di
notes atas dan bawah karena dalam web nantinya dijadikan link,
simpan dengan save for web and devices, type jpeg, lalu simpan
dengan nama index, type html dan images, seperti gambar 14.23.

Gambar 14.23 memotong gambar teks notes
25. Simpan pembuatan background untuk latar belakang web ini
dengan menyembuyikan tulisan dikertas notes atas dan bawah,
dan simpan dengan nama latar2.jpeg, seperti gambar 14.24.

184
Bab 14. Desain Web

Gambar 14.24 background web
Setelah membuat interface nya dengan photoshop, sekarang kita rancang
desain web nya menggunakan dreamweaver. Langkah kerja :
2. Ketik kode berikut ini simpan dengan nama monitor.html.
<head>

<title>:: my - diary ::</title>
href="monitor.css" />
</head>
<body>

</body>
</html>
4. Ketik kode css berikut ini simpan dengan nama monitor.css
* {margin: 0 auto; padding:0;}
body {background: url(images/latar2.jpg) no-repeat
center top;
font-family:verdana;
font-size:12px;}

185
Bab 14. Desain Web

Ketika dijalankan di browser maka tampilannya seperti berikut ini :

Gambar 14.25 tampilan background
5. Untuk menghilangkan warna putih yang berada di sisi kanan dan
kiri, buka kembali file photoshop pembuatan background,
lakukan slice kembali setipis-tipis nya yaitu 1 pixel seperti gambar
berikut :

Gambar 14. 26 slicing untuk latar pertama
6. Simpan dengan save for web and devices, dengan nama latar1.
7. Kembali ke jendela code css dreamweaver, tambahkan kode
berikut ini.
html {background: #e7f9fe url(images/latar1.jpg)
repeat-x;}

selengkapnya ditambahkan kode berikut :


186
Bab 14. Desain Web

repeat-x;}

center top;
width: 100%;
font-size:12px;}

8. Kembali ke jendela code html pada dreamweaver, ketikan kode
berikut ini :
<div id="wrapper">
<div id="header">
<div id="menu">
<ul>

<li><a href="#">About Me</a></li>
<li><a href="#">Projects</a></li>
</ul>
</div>
<div id="menu2">
<ul>
<li><a href="#">css</a></li>
<li><a href="#">php</a></li>
<li><a href="#">photoshop</a></li>
<li><a href="#">dreamweaver</a></li>
<li><a href="#">computer</a></li>
<li><a href="#">it -
information</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="kiri">
<div class="menu">
<img src="images/notes_03.gif"
alt="my job" class="notes1"/>
<a href="#" alt="desain" ><img
src="images/notes_05.gif" class="notes2" /></a>
<a href="#" alt="programmer" ><img

187
Bab 14. Desain Web

</div>
<div class="klik">
<img src="images/notes_10.gif"
alt="click me" class="notes3"/>
<a href="#" alt="desain" ><img
src="images/notes_16.jpg" class="notes4"/></a>
</div>
</div>
<div id="isi">
<h2> Welcome to my portfolio! </h2>

<p>Lorem ipsum dolor sit amet,
suscipit faucibus</p>
<img src="images/news.jpg" alt="new" />
porttitor ligula eros et ante. Phasellus
vestibulum, nunc eget malesuada vehicula, odio
augue </p>
<h2>design, what its ? </h2>
porttitor ligula eros et ante. </p>
<h2>web stylish</h2>
porttitor ligula eros et ante. </p>
</div>
<

div id="kanan">
<h2> Last Works </h2>
<ul>
188
Bab 14. Desain Web
<li><a href="#"><img
src="logo/brocurs.jpg" alt="brosur" /><p>create
brocurs</p></a></li>
src="logo/web.jpg" alt="web" /><p>web
ecommerce</p></a></li>
src="logo/css.jpg" alt="css" /><p>stylish
web</p></a></li>
src="logo/brocurs.jpg" alt="brosur" /><p>system
</li> nano</p></a>

</ul>
</div>
</div>

<div id="cipta">
<p>desain oleh rais ( c ) 2010</p>
</div>
<div id="footer">
</div>
</div>

9. Buka kembali jendela code css, tambahkan kode berikut ini di
bawah kode body.

repeat-x;}

center top;
width: 100%;
font-size:12px;}

#wrapper {width:880px; }

#header {margin-top:55px;

width:800px;}
#menu {width:700px;
overflow:hidden;}
#menu ul {list-style:none;}

#menu ul li {float:left;
189
Bab 14. Desain Web

padding:0 35px 10px 20px;}
#menu ul a {text-decoration:none;}

#content{clear:both;
overflow:hidden;
height:400px;
width:880px;
margin-top:5px;}

#kiri {float:left;
width:80px;
margin-top:17px;
height:400px;
position:relative;}

#isi{float:left;
width:450px;
margin:10px 0 0 4px;
background:url(images/bg_isi.png) no-repeat;}

#isi p{font-family:arial;
font-size:12px;
padding:5px 4px;}

#isi h2{font-family:Tahoma;
font-size:18px;
font-weight:bold;
padding:2px 0 2px 5px;}

#isi img{margin-left:20px;}

.putih{color:#FFFFFF;}

.biru{color:#014ce4;}

#kanan{float:right;
width:240px;
margin:10px 80px 0 0;

background:url(images/bg_kanan.png) no-repeat;}
#kanan h2{font-family:Tahoma;
font-size:18px;
font-weight:bold;
padding:2px 0 2px 5px;}

#kanan ul img {width:70px; height:70px;
border:none;
float:left;
190
Bab 14. Desain Web
padding:3px 3px 3px 5px;
display:block;}

#kanan ul li {list-style:none;
overflow:hidden;
display:block;}

#kanan ul a{text-decoration:none;
display:block;}

#kanan ul li:hover{background-color:#e9ed6b;
font-weight:bold;
padding-left:5px;
font-size:14px;}

#kanan ul p{line-height:6em;}

#cipta {clear:both;
text-align:center;
margin-top:10px;

color:#FFF;}
#footer{height:200px;}

.notes1 {padding:8px 0 0px 10px;
border:none;}
.notes2 {padding: 1px 0 0px 10px;
border:none;}

.notes3 {padding:16px 0 0 14px;
border:none;}
.notes4 {padding:1px 0 0 14px;
border:none;}

.class_menu {width:69px;
height:200px;}
#menu2{width:700px;
margin-top:30px;}

#menu2 ul {list-style:none;}

#menu2 ul li {float:left;

padding:3px 20px 5px 5px;}
#menu2 ul a {text-decoration:none;}

#menu2 ul a:hover {font-weight:bold;}

.klik{top:225px; left:-3px; position:absolute;}

Materi CSS

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Materi CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

Rais

BAB 6. Style List

BAB 7. Style Border

BAB 8. Style Box Margin

BAB 9. Style Box Padding

BAB 10. Style Float

BAB 12. Kreasi Layout Web

BAB 13. Style Form

BAB 14. Desain Web

Anda mungkin juga menyukai