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 : teks

Untuk menggunakan style ini buka jendela code adobe dreamweaver

kamu, ketik kode berikut :

style inline css desain web dengan css

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 dan penutup . Seperti berikut :

Style css disini

Penulisan pembuka style css internal ini dimulai dengan :

Style kode css

6


Sintaks penulisan lengkapnya sebagai berikut

Style kode css


kamu, ketik kode berikut :

internal style

h2 { font-family:verdana;

color:#0000FF;}

p {font-family:verdana; font-size:12px;}

style internal style internal sama dengan inline style satu file dengan html, diapit oleh tag head


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 , namun pemanggilan file cssnya berbeda menggunakan link seperti berikut :

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

style external

style external dengan style ini file html menjadi lebih sedikit, dan pengaturan layout lebih mudah

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;} p {font-family:verdana; 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.

Sintaks penulisannya :

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.

judul teks 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.

ini menggunakan class 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 , dan di tutup dengan . Seperti berikut :

belajar css dengan mudah dan menyenangkan

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 :

selektor tag p {font-family:verdana; font-size:12px;} h2 {color:#0066FF;} tag selektor tag ini menggunakan elemen 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 :

selektor class .teks {font-family:verdana; font-size:12px;} .judul {color:#0066FF;} class selektor teks ini menggunakan class selektor

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 :

selektor id #teks {font-family:verdana; font-size:12px;} #judul {color:#0066FF;} id selektor teks ini menggunakan id selektor, diapit oleh div

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 :

Font-family .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;}

jenis huruf arial jenis huruf times new roman jenis huruf courier new jenis huruf georgia jenis huruf verdana jenis huruf geneva

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;}

Untuk menggunakan style ini buka jendela aplikasi adobe dreamweaver


font-style

18

Bab 2. Style Fonts

.style1 {font-style:italic;} .style2 {font-style:normal;} style huruf italic style huruf normal

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;} Untuk menggunakan style ini buka jendela aplikasi adobe dreamweaver


font-size .size1{font-size:12px;} .size2{font-size:5em;}

ukuran dengan pixel ukuran dengan empiris

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 :

21

Bab 2. Style Fonts

font-weight .huruf_normal{font-weight:normal;} .huruf_tebal{font-weight:bold;} ketebalan huruf normal ketebalan huruf dengan bold

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).

Sintak penulisannya : Selector {font-variant : value;}

Contoh : .huruf_variant {font-variant : small-caps;} Untuk menggunakan style ini buka jendela aplikasi adobe dreamweaver

kamu ketik seperti kode berikut ini :

font-variant .huruf_variant1{font-variant:normal;} .huruf_variant2{font-variant:small-caps;} huruf variant ukuran normal huruf variant dengan small caps


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.

study case 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;} property font dengan menggunakan property style font maka informasi yang ada dalam desain web menjadi lebih menarik dan interaktif huruf ini ukuran kecil dengan small caps menjadi uppercase


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);} Untuk menggunakan style ini buka jendela code adobe dreamweaver


text color

25

26

Bab 3. Style Text

.coname {color:#0033FF;} .corgb {color :rgb(0, 0, 255);} .cohex {color : #0000ff;} tidak makai warna ini warna dengan nama ini warna dengan rgb ini warna dengan hex number

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; } Untuk menggunakan style ini buka jendela code adobe dreamweaver


text align .tkiri {text-align : left; } .tkanan {text-align : right; } .ttengah {text-align : center; } .tjustify {text-align : justify; } rata kiri, dengan menggunakan text align maka untuk merapikan tulisan pada halaman web menjadi lebih mudah dan rapi pengunjung betah membaca informasi yang disajikan 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 rata tengah, dengan menggunakan text align maka untuk merapikan tulisan pada halaman web menjadi lebih mudah dan rapi pengunjung betah membaca informasi yang disajikan dengan justify, dengan menggunakan text align maka untuk merapikan tulisan pada halaman web menjadi lebih mudah dan rapi pengunjung betah membaca informasi yang disajikan


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; }



text decoration .tdecor1 { text-decoration : underline; } .tdecor2 { text-decoration : overline; } .tdecor3 { text-decoration : line-through; } .tdecor4 { text-decoration : blink; } palcomtech palcomtech palcomtech palcomtech

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


text transform .ttrans1 { text-transform : uppercase; } .ttrans2 { text-transform : lowercase;} .ttrans3 { text-transform : capitalize; }

32

Bab 3. Style Text

palcomtech PALCOMTECH palcomtech


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; } Untuk menggunakan style ini buka jendela code adobe dreamweaver


text indent p { text-indent : 25px; } 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


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; } Untuk menggunakan style ini buka jendela code adobe dreamweaver

kamu ketik kode berikut :

line height .satu { line-height:1.5em;} .dua { line-height:2em;} palcomtech, saat ini menjadi lembaga terbaik nasional tahun 2010, semua itu berkat kerja sama seluruh divisi yang berada di bawah manajemen yang

35

Bab 3. Style Text

dipimpin oleh Bapak Hendri yang selalu memberikan motivasi yang positif kepada seluruh divisi 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


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; } Untuk menggunakan style ini buka jendela code adobe dreamweaver


letter spacing p {letter-spacing : 10px; } .satu {letter-spacing : 2em; } palcomtech i love palcomtech


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; } Untuk menggunakan style ini buka jendela code adobe dreamweaver


word spacing p {word-spacing : 10px; } .satu {word-spacing : 2em; }

38

Bab 3. Style Text

palcomtech generasi internet 100% praktek 100% interner i love palcomtech, lembaga terbaik nasional 2010


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 :

case text 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;}

palcomtech is the best Tahun ini menjadi kebanggaan dan ucapan syukur bagi PalComTech atas prestasi yang baru dicapai di tingkat nasional. Apa yang menjadi prestasi PalComTech adalah LPK PalComTech kembali diberi apresiasi oleh pemerintah sebagai Lembaga Berprestasi Tingkat Nasional 2010. Penghargaan ini berhasil berhasil dipertahankan oleh PalComTech sejak tahun 2007 juga menjadi juara di Lembaga Berprestasi.


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);} Untuk menggunakan style ini buka jendela code adobe dreamweaver


41

42

Bab 4. Style Background

background color body {background-color:#0033FF;} h1 {font-family:"Times New Roman", Times, serif; font-size:22px; color:#FFFF00;} p {color:#FFFF00;} style background sekarang kita menggunakan bacground


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); } Untuk menggunakan style ini buka jendela code adobe dreamweaver


background image body {background-image:url(weding.jpg);} h1 {font-family:"Times New Roman", Times, serif; font-size:22px; color:#0000FF;} p {color:#0000FF;} style background sekarang kita menggunakan bacground

44



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; } Untuk menggunakan style ini buka jendela code adobe dreamweaver


background repeat body {background-image:url(love.jpg); background-repeat:repeat-y;} h1 {font-family:"Times New Roman", Times, serif; font-size:22px; color:#FFFF00;} p {color:#FFFF00;}

46


style background sekarang kita menggunakan bacground


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; } Untuk menggunakan style ini, buka jendela code adobe dreamweaver


background position body {background-image:url(love.jpg); background-position: bottom center; background-repeat:no-repeat; } p {line-height:2em; font-family:Verdana, Arial, Helvetica, sans-serif;}

48


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. 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.

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; } Untuk menggunakan style ini, buka jendela code adobe dreamweaver


background attachment body {background-image:url(love.jpg); background-position: center center; background-repeat:no-repeat; background-attachment:fixed; } p {line-height:2em; font-family:Verdana, Arial, Helvetica, sans-

serif;} 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

51


yang terpampang di iklan lowongan pekerjaan seperti menguasai komputer, mahir menggunakan Ms. Office, Good Computer Skill dan lain sebagainya. 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.


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 :

study case body {background-image:url(images/latar_01.jpg); background-repeat:repeat-x; background-color:#FFFFFF;} h1 {font-family:"Times New Roman", Times, serif; font-size:22px; font-weight:bold; color:#FFFFFF;} p {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF;} case background 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

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 , selengkapnya nama website, maka penerapan dalam css merupakan elemen tag anhor .

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 , selengkapnya nama website, maka penerapan dalam css merupakan elemen tag anhor . 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



links - link a:link { color: #FF0000; text-decoration: none; } website palcomtech


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.



a:visited { color : green; } Untuk menggunakan style ini buka jendela code adobe dreamweaver


links - link a:visited { color: green; text-decoration: none; } website palcomtech

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 :


a:hover { color : red ; }

61

Bab 5. Style Links



links - hover a { color: green; text-decoration: none; } a:hover { color:#FFFF00; background-color:#0000FF;} website palcomtech


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.



a:active { background-color : blue; } Untuk menggunakan style ini, buka jendela code adobe dreamweaver


link active

63

Bab 5. Style Links

a { color: green; text-decoration: none; } a:active { color:orange; background-color:#0000FF;} website palcomtech


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

case link LPK PalComTech Telah Terakreditasi Published on may 11, 2010 by admin 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 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... (more)

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;} h1 {font-family:"Times New Roman", Times, serif; font-size:24px;} h3 {font-family:Arial, Helvetica, sans-serif; font-size:10px;} a { text-decoration:none; }

a:hover {text-decoration:underline; color:#FFFF00; background-color:#0000FF;}

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; } Untuk menggunakan style ini buka jendela code adobe dreamweaver


list style type ul {list-style-type:hiragana;} daftar minuman bandrek

67

68

Bab 6. Style List

kopi

susu


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); } Untuk menggunakan style ini buka jendela code adobe dreamweaver


list style image ul {list-style-image:url(jambu.jpg);} daftar minuman bandrek kopi susu

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; } Untuk menggunakan style ini buka jendela code adobe dreamweaver


list style position #dalam {list-style-position:inside;} #luar {list-style-position:outside; list-style-type:katakana;} daftar minuman bandrek kopi susu daftar makanan bakso mie goreng nasi goreng

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

case list link favorite palcomtech palcomtech palcomtech

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

body {font-family:Verdana, Arial, Helvetica, sans-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; }



border style

76

Bab 7. Style Border

#kotak {border-top-style:solid; border-bottom-style:solid; border-left-style:solid; border-right-style:solid; }

i love palcomtech, real it university


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; } Untuk menggunakan style ini buka jendela code adobe dreamweaver


border width #kotak {border-style:solid; border-width : 5px;} #kotak2 {border-style:dotted; border-width : thin;} i love palcomtech, real it university i love palcomtech, real it university

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

Untuk menggunakan style ini buka jendela code adobe dreamweaver kamu, ketik kode berikut ini :

border color #kotak {border-style:solid; border-width : 5px; border-color : red;} #kotak2 {border-style:dotted; border-width : thick; border-color:blue;}

i love palcomtech, real it university i love palcomtech, real it university


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

case border

81

Bab 7. Style Border

i love palcomtech, real it university dengan menerapkan style border css, maka pembuatan layout menjadi lebih mudah dan penyusunan layout menjadi lebih teratur dan lebih rapi dibandingkan menggunakan tabel

desain oleh rais 2010


Gambar 7.9 kode case border.html


4. Ketik kode css berikut ini simpan dengan nama case border.css

body {font-family:Verdana, Arial, Helvetica, sans-serif;

82

Bab 7. Style Border

font-size:12px;} h1 {font-family:"Times New Roman", Times, serif; 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



margin #margin {margin-top : 4cm; margin-bottom : 4cm; margin-right : 3cm; margin-left : 3cm; } 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

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 :

margin auto #margin {margin : 0 auto; border-style:solid; background-color:#FFFF00; color:#0000FF; width:800px;} 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

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

case margin i love palcomtech, real it university dengan menerapkan style border css, maka pembuatan layout menjadi lebih mudah dan penyusunan layout menjadi lebih teratur dan lebih rapi dibandingkan menggunakan tabel desain oleh rais 2010

89



Gambar 8.6 kode case margin.html


4. Ketik kode css berikut ini simpan dengan nama case margin.css

* {margin:0 auto;} body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;} h1 {font-family:"Times New Roman", Times, serif; 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 :

padding #padding {border : 1px solid blue;

padding: 4px 5px;} dengan menggunakan padding, untuk pengaturan jarak antara teks dan border menjadi lebih dinamis

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 :

padding nol

94


#padding {border : 1px solid blue; padding: 0; width: 400px; text-align:justify;} dengan menggunakan padding, untuk pengaturan jarak antara teks dan border menjadi lebih dinamis


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

case1 padding welcome in my site box model 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 desain oleh rais 2010


Gambar 9.7 kode case1 padding.html


4. Ketik kode css berikut ini simpan dengan nama case1

padding.css

* {margin:0 auto; padding:0; } body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; width:600px;} h2 {font-family:"Times New Roman", Times, serif; font-size:30px; font-weight:bold; } #head {border: solid 1px #0000FF; padding:15px 10px;

97

Bab 9. Style Box Padding 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; background-color:#FFFF99; 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

case2 padding Galeri foto 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. 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.


Gambar 9.10 kode case2 padding.html


4. Ketik kode css berikut ini simpan dengan nama case2

padding.css

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

100


#galeri {border : 1px solid blue; width:300px; padding:5px 10px; text-align:justify; background-color:#FFFF99;} 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; } Untuk menggunakan style ini buka jendela code adobe dreamweaver


float body {font-family:verdana; font-size:12px;} img {width:100px; height:100px;} .gambar1 {float: left; border:1px solid blue; padding:5px; margin-right:5px;} 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

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

float galeri

105

Bab 10. Style Float

Galeri foto koala 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. gurun 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.

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; background-color:#FFFFFF;}

#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

seperti gambar 10.8.

Gambar 10.8 float menu horizontal

Langkah kerja :


2. Ketik kode berikut ini simpan dengan nama float menu.html

float menu horizontal Home Artikel Download Tutorial

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 ), 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 ), 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

vertikal ul Menu Home Artikel Kategori Download

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; text-decoration:none; border-bottom:1px solid #0066FF; padding:5px 5px; font-family:Georgia, garamond, serif; display:block; } li a:hover{color:#db6d00; text-decoration:none; 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

vertikal class Kategori Komputer Kesehatan Tutorial

116

Bab 11. Kreasi Menu

Link Favorit Facebook Palcomtech Deviant Art


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; background-color:#FFFF00;}


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

vertikal ul class Home About Gallery Contact

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

menu vertical id Home Profil

materi css

Documents