D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

BAB I
PENGANTAR DESAIN WEB
1.1 Pengertian Desain Web
Desain web adalah sebuah karya seni dan proses membuat satu halaman
web atau seluruh situs web. Proses tersebut mungkin melibatkan segi estetika
dan mekanik dari sebuah operasi situs web, perancangan web (web design)
adalah istilah umum yang digunakan untuk mencakup bagaimana isi web
konten ditampilkan, meskipun mengutamakan tampilan dan nuansa situs web.
Beberapa aspek yang dapat dimasukkan dalam desain grafis dan produksi web
adalah animasi, pemilihan warna, pilihan font, desain navigasi, kreasi konten
atau isi, penulisan HTML/XML, dan pemrograman.
Tujuan dari web design adalah untuk membuat website sekumpulan
konten online termasuk dokumen dan aplikasi yang berada pada server web /
server. Sebuah website dapat berupa sekumpulan teks, gambar, suara dan
konten lainnya, serta dapat bersifat interaktif ataupun statis.
Perancang web atau desainer web (web designer) adalah orang yang
memiliki keahlian menciptakan konten presentasi (biasanya hypertext atau
hypermedia) yang dikirimkan ke pengguna-akhir melalui World Wide Web,
menggunakan Web browser atau perangkat lunak Web-enabled lain seperti
televisi internet, Microblogging, RSS, dan sebagainya.
Secara umum, tugas seorang desainer web adalah menentukan tampilan
dan hasil dari sebuah situs web. Secara langsung atau tidak, Anda harus
menguasai dan memahami hal-hal yang berkaitan dengan tampilan dari sebuah
situs web.
Dengan berkembangnya spesialisasi dalam desain komunikasi dan
bidang teknologi informasi, ada kecenderungan kuat untuk menarik garis yang
jelas antara web design khusus untuk halaman web dan pengembangan web
secara keseluruhan dari semua layanan berbasis web.

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Seorang desainer web juga harus memahami penerapan aspek-aspek

yang terdapat di dalam desain situs web, meskipun tidak menguasai. Seperti
halnya JavaScript, Anda tidak wajib mengetahui dan mampu membuat
JavaScript sendiri untuk kebutuhan desain, namun pengetahuan tentang
bagaimana dan tata cara penerapan JavaScript pada desain situs akan sangat
menguntungkan bila Anda memahaminya.
Tugas seorang desainer web tidaklah semudah yang dibayangkan,
penguasaan software-software grafis dan animasi dan penulisan HTML saja
tidak cukup untuk membuat website yang baik.
1.2 Prinsip Desain Web
Dalam membuat desain web, sekarang ini banyak sekali templatetemplate atau contoh-contoh jadi yang telah disediakan. Akan tetapi terkadang
apa yang ditampilkan dalam template tersebut tidak sesuai dengan keinginan
dan kebutuhan Anda. Untuk itu seorang desainer web sangat perlu dan butuh
untuk melakukan langkah desain sendiri untuk halaman web Anda tersebut,
agar sesuai dengan keinginan dan kebutuhan Anda.
Berikut ini adalah beberapa prinsip dasar yang harus Anda ketahui
sebagai seorang desainer web:

Hasil Karya Sendiri

Sebagai seorang desainer, harus mempunyai kesadaran untuk tidak meniru
atau menggunakan karya orang lain. Begitu pula seorang desainer web,
hindarilah untuk menggunakan ikon, animasi, tombol, dan lain-lain, yang
telah digunakan atau dibuat oleh orang lain.

Komposisi
Perhatikan komposisi warna yang akan digunakan dalam website yang
dibuat. Gunakan selalu Palette 216WebColor, yang dapat diperoleh dari
Adobe.com, hal ini untuk mencegah terjadinya dither pada image yang
berformat GIF. Dalam membangun website suatu perusahaan, desainer

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

web selalu menyesuaikan warna yang digunakan dengan Corporate Color

perusahaan tersebut. Untuk kemudian warna-warna tadi digunakan
sebagai warna dominan atau sebagai elemen pendukung (garis,
background, button, dsb).

Sederhana
Dalam membuat sebuah desain, tampilan web diusahakan untuk dibuat
simpel, hal ini bertujuan agar tampilan website.tersebut terlihat rapi,
bersih dan juga informatif.

Kenyamanan
Desainer web selalu memperhatikan aspek kenyamanan user dalam
membaca dan menelusuri website tersebut. Pilih ukuran fonts yang tepat
sehingga mudah dibaca, tempatkan link sedemikian rupa sehingga mudah
dan cepat untuk diakses dan lebih penting lagi adalah Informatif.

Menentukan Prioritas
Tentukan prioritas dari pesan yang akan disampaikan, misalnya: Judul
harus besar, tetapi jangan sampai akhirnya akan konflik dengan subjudul
yang berukuran hampir sama. Hal ini akan membingungkan user untuk
menentukan pesan mana yang harus dibaca/dilihat lebih dahulu.

Konsisten
Tentukan font apa yang akan digunakan sebagai body-text, judul,
subjudul, dan sebagainya, sehingga website tersebut akan terlihat disiplin
dan rapi. Sesuaikan jenis huruf yang digunakan dengan misi dan visi
website tersebut, misalnya: hindari menggunakan font Comic dalam
membangun website suatu perusahaan resmi.

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

1.3 Software Desain Web

Berikut ini adalah beberapa kategori dan jenis software yang perlu
diketahui oleh seorang calon desainer web:
a. Software Membuat Desain
Untuk membuat desain suatu website biasanya para desainer web
dimulai dengan software ini sebagai tampilan sementara atau dalam
membuat layout website.

Adobe Photoshop : Desain berbasis titik (bitmap), dan dapat

memotong gambar-gambar ke dalam format html.

Adobe Fireworks : Desain berbasis titik (bitmap), vector, dan

dapat memotong gambar-gambar ke dalam format html.

Adobe Image Ready : Memotong gambar-gambar ke dalam format

html.

Adobe Illustrator : Desain berbasis vector

CorelDraw : Desain berbasis vector

Adobe Freehand : Desain berbasis vektor

b. Software Menambahkan Efek

Menambahkan efek dilakukan untuk menghidupkan desain yang
telah Anda rancang. Seperti menambah efek cahaya, tekstur dan
manipulasi teks.

Adobe Fireworks : Efek teks

Painter : Memberikan efek lukisan

Ulead Photo Impact : Efek frame dan perancangan ikon yang

cantik.

Plugins Photoshop: Seperti Andromeda, Alien Skin, Eye Candy,

Kais Power Tool, dan Xenofex juga sangat mendukung untuk
memberi efek desain sewaktu Anda mendesain layout website di
Photoshop.

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

c. Software Animasi
Penambahan animasi perlu untuk membuat website agar kelihatan
menarik dan hidup.

Adobe Flash : Menampilkan animasi berbasis vektor yang

berukuran kecil.

Adobe Fireworks : Membuat animasi file gif.

3D Studio Max : Untuk membuat objek dan animasi 3D.

Gif Construction Set: Membuat animasi file gif.

Microsoft Gif Animator : Membuat animasi file gif.

Swift 3D : Merancang animasi 3D dengan format file Flash.

Swish : Membuat berbagai macam efek text dengan format file

Flash.

d. Software Web Editor

Software web editor digunakan untuk menyatukan keseluruhan
gambar dan tata letak desain, animasi, mengisi halaman web dengan teks
dan sedikit bahasa script.

Adobe Dreamweaver

Microsoft Frontpage

Alaire Homesite

Cold Fusion

Net Object Fusion

e. Software Pemrograman Web

Hal ini dilakukan setelah sebagian besar desain website telah selesai.
Pemrograman bertugas sebagai akses database, form isian dan membuat
web lebih interaktif. Contoh : membuat Buku Tamu, Fromulir Pendaftaran,
Forum, Chatting, Portal, Lelang, dan Iklan baris.

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

PHP

ASP ( Active Server Page )

CGI ( Common Gateway Interface )

Perl

f. Software Upload ke Web Hosting

File html Anda harus diletakkan (upload) di suatu tempat (hosting)
agar orang di seluruh dunia dapat melihat website Anda.

Adobe Dreamweaver: dengan fasilitas Site FTP

Microsoft Frontpage : dengan fasilitas Publish

LeapFTP

Bullet FTP

CuteFTP

WS-FTP

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

BAB II
PENGENALAN DASAR HTML
2.1 Dokumen HTML
HTML kependekan dari Hyper Text Markup Language. Dokumen
HTML adalah file teks murni yang dapat dibuat dengan teks editor. Dokumen
ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang
disajikan dalam web browser. Ada dua cara untuk membuat web page, dengan
HTML editor atau editor text biasa (misal : notepad).
2.2 Penamaan Dokumen
Dokumen HTML diberi nama sembarang kemudian diberi tambahan
ekstensi .htm atau .html
2.3 Definisi Elemen
Dokumen HTML disusun elemen-elemen

atau komponen dasar

pembentu HTML. Contoh dari elemen dokumen HTML adalah : head , body,
table, paragraf, list.
2.4 Definisi Tag
Tag digunakan untuk menandai elemen dalam suatu dokumen HTML.
Tag HTML terdiri atas sebuah sudut kiri (<, tanda lebih kecil), nama sebuah
tag, dan sebuah tanda kurung sudut kanan (>, tanda lebih besar. Tag umumnya
berpasangan, sebagai contoh <H1> Dengan </H1>. Secara umum suatu
elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan :
<namatag> - </namatag>
2.5 Elemen HTML yang diperlukan
Elemen yang dibutuhkan untuk membuat suatu dokumen HTML
dinyatakan dengan tag <html>,<head>, dan <body>.Setiap dokumen terdiri
atas tag head dan body. Elemn Head berisi informasi tentang dokumen
tersebut, dan elemen body berisi teks yang akan ditampilkan di browser.
Sehingga setiap dokumen HTML harus mempunyai pola sebagai berikut :
<html>
<head>
-- Informasi tentang dokumen HTML

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

</head>
<body>
-- Informasi yang akan ditampilkan dalam web browser
</body>
</html>

Setiap dokumen html harus diwali dengan menuliskan tag <html> dan
tag </html> di akhir dokumen. Tag ini menandai dokumen HTML yang berarti
adalah dokumen HTML dalam satu dokumen hanya ada satu elemen html.
Section atau elemen head ditandai dengan tag <head> diawal dan tag
</head> diakhir. Section ini beiris informasi tentang dokumen HTML,
mislnya informasi judul html yang ditandai dengan tag <title> dan diakhiri
dengan tag </title>. Section body ditandai dengan tag <body> dan diakhiri
dengan tag </body> diakhir. Section body merupakan isi dokumen yang akan
ditampilakn pada browser.
Contoh Listing 2.1 : contoh1.html
<html>
<head>
<title>Belajar Web Design</title>
</head>
ini adalah halaman HTML
<body>
</body>
</html>

Penjelasan Contoh
Tag pertama pada dokumen html anda adalah <html>,. Tag ini memberi
tahu bahwa ini adalah awal dari dokumen HTML. Tag terakhir pada dokumen
anda adalah </html>. Tag ini memberi tahu browser bahwa ini adalah akhir
dari dokuemn HTML. Teks antara <head> dan </head> adalah informasi
header. Informasi header tidak ditampilkan pada window browser. Hanya teks
yang berada diantara <body> dan </body> yang akan ditampilakan pada

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

browser. Teks diantara <title> dan </title> adalah judul dokumen yang akan
ditampilkan pada window caption.

Gambar 2.1 Hasil di Browser

2.6 Penggunaan Tag

Tag HTML diapit dengan dua karakter kurung bersudut, < dan >.

Tag HTML secara normal selalu berpasangan seperti <H!> dengan </H1>

Tag HTML tidak case sensitive, berarti <H1> dama dengan <h1>
2.7 Atribut Tag
Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag

tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen

dengan tag yang bersangkutan.
Tag berikut tidak mempunyai atribut : <body>. Tag <body> ini tidak
menggunakan atribut, sehingga dokumen HTML ditampilkan dengan warna
background sesuai dengan definisi warna background pada browser webnya.
Umumnya berwarna putih.
2.7.1

Tag HTML

Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah

dokumen HTML. Tag ini merupakan keharusan untuk membuat dokumen
HTML.Tag <html> sebagai pembuka dokumen HTML dan tag </html> sebagai
penutup dokumen HTML.
Contoh Listing 2.2:
<html>
........................

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

</html>

2.7.2 Tag Head

Merupakan tag setelah <html> untuk menuliskan keterangan tentang
dokumen HTML. Isi teks diantara <head> dengan </head> tidak akan
ditampilkan di dalam browser.
Contoh Listing 2.3:
<head>
<title>Belajar Web Design</title>
</head>

2.7.3 Title
Merupakan tag yang digunakan untuk menuliskan judul dokumen
HTML. Hasil tag ini akan ditampilkan dalam window caption browser.
Contoh Listing 2.4:
<title>Belajar Web Design HTML</title>

2.7.4 Body
Merupakan section dalam dokumen HTML yang akan ditampilkan
dalam browser.
Contoh Listing 2.5:
<html>
<head>
<title>Belajar Web Design</title>
</head>
<body>
ini adalah section HTML yang ditampilkan di browser
</body>
</html>

10

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

BAB III
FORMATTING (HTML)
Teks dalam dokumen web dapat diformat secara khusus untuk
menunjukkan perbedaan dan penekanan terhadap isi dan maksud dari teks
tersebut.

Perbedaan

ditampilkan

dalam

bentuk

digarisbawahi,dll.
3.1 Pemformatan Teks

Menebalkan huruf (bold)

Memiringkan huruf (italic)

Digarisbawahi

Mengecilkan huruf

Superscript

Subscript

Contoh Listing 3.1.1: formatteks.html

<html>
<head>
<title>Format Teks</title>
</head>
<body>
<p><b>Tulisan ini ditebalkan (bold)</b></p>
<p><strong>Tulisan ini ditebalkan (strong)</strong> </p>
<p><em>Tulisan ini miring (emphasize) </em></p>
<p><big>Tulisan ini besar (big)</big></p>
<p><i>Tulisan ini miring (italic) </i></p>
<p>Tulisan ini _subscript </p>
<p>Tulisan ini ^superscript</p>
</body>
</html>

11

huruf

tebal,

miring,

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 3.1. Contoh formatteks.html

3.2 Teks Preformat
Tag <pre> dan </pre>dapat kita gunakan untuk menampilkan sesuai
dengan dokumen web tersebut dalam editor teks.
Contoh Listing 3.2.1 : pre.html
<html>
<head>
<title>Tag Preformatted</title>
</head>
<body>
<pre>
This section provides a brief overview of the menus in Dreamweaver.
The File menu and Edit menu contain the standard menu items for
File and Edit.
menus, such as New, Open, Save, Save All, Cut, Copy, Paste, Undo,
and Redo
</pre>
<pre>
Ini adalah
preformatted text.
Menampilkan

spasi

Dan line break apa adanya.

</pre>

12

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<p>Tag PRE cocok digunakan untuk menampilkan kode bahasa pemrograman

komputer :</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>

Gambar 3.2 Contoh pre

3.3 Quotation
Tag <blockquote> digunakan untuk membuat sebagian teks yang
dikutip sebagai suatu blok sendiri. Kebanyakan browser umumnya
menggunakan margin untuk kutipan teks tadi untuk memisahkan dari teks
yang mengelilinginya.
Contoh Listing 3.3.1 : quotation.html
<html>
<head>
<title>quotation</title>
</head>

13

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<body>
tulisan ini BUKAN quotation
<blockquote>
tulisan ini adalah quotation <br>
tulisan ini adalah quotation <br>
tulisan ini adalah quotation <br>
</blockquote>
</body>
</html>

Gambar 3.3 Contoh qoutation

3.4 Paragraf
Setiap paragraf harus dimulai dengan memberi tag <p>. Diakhir
paragraf tidak diharuskan menuliskan </p> sebagai akhir paragraf, karena tag
<p> tidak didefinisikan mempunyai tag akhir. Setiap paragraf harus dimulai
dengan <p> kembali. Setiap pergantian paragraf ditandai dengan tag <p>
Contoh - Listing 3.4.1: paragraf2.html
<html>
<head>
<title>Paragraf</title>
</head>
<body>
<p>Pada tahun 1950-an Kolonel Sanders (pendiri KFC) mulai mengendarai
mobilnya dari kota ke kota untuk memulai bisnis KFC-nya, dengan cara
menawarkan resep rahasianya dari satu restoran ke restoran yang lainnya. Kadang

14

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

beliau tidur di dalam mobilnya dan memakan ayam buatannya sendiri untuk bisa
bertahan. Dia baru dapat mencapai tujuannya setelah bertemu dengan orang yang ke1010. Orang tersebut berpikir ayam Kolonel tersebut cukup bagus untuk di jual ke
publik
</p>
<p>Contoh lainnya Thomas Alfa Edison yang mengalami kegagalan sebanyak 9000
kali sebelum akhirnya ia menemukan bola lampu. Dia tidak menyesal dengan
kegagalan-kegagalannya, bahkan ia berkata beruntung menemukan 8999 cara yang
salah dalam membuat bola lampu. Kemudian ia dapat membuat 1093 paten, orang
yang paling banyak memegang paten dalam sejarah Amerika</p>
</body>
</html>

Gambar 3.4 Contoh hasil paragraf2.html

3.5 Line Break
Kita dapat memaksa ganti baris pada dokumen web dengan tag <br>.
Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri
tetapi tidak berganti paragraf.
Contoh Listing 3.5.1:
<html>
<head>
<title>Ganti Baris</title>

15

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<head>
<body>
ini adalah baris ke 1<br>
ini adalah baris ke 2<br>
ini adalah baris ke 3<br>
ini adalah baris ke 4<br>
ini adalah baris ke 5<br>
</body>
</html>

3.6 Heading
Tag heading aklan membuat tulisan ditampilkan dengan huruf yang
lebih besar atau ditebalkan. Heading dimanfaatkan untuk menandai judul topic
atau untuk menunjukkan tingkat keberartian dati teks yang akan dituliskan.
Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan 6.
Nomor 1 merupakan heading yang terbesar.
Contoh Listing 3.6.1:
<html>
<head><title>Heading</title></head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

16

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 3.5 Contoh heading

3.7 Garis Pembatas
Sebuah garis pembatas dapat disisipkan dalam dokumen web dengan
menggunakan tag <hr>
Atribut
Align
Color
Size
Width

Keterangan
Menentukan letak garis : center,left,right
Menentukan warna garis
Menentukan ukuran garis
Menentukan tebal garis

Contoh Listing 3.7.1:

<html>
<head>
<title>Horizontal Rule</title>
</head>
<body>
<p align=center>Paragraf pertama</p>
<hr align=center color=#0000FF size=3 width=90%>
<p align=center>Paragraf keduapertama</p>
</body>
</html>

17

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 3.6 Garis Pembatas

3.8 Komentar
Dalam sebuah dokumen HTML ada informasi yang berfungsi sebagai
catatan atau komentar terhadap dokumen isi komentar ini tidak akan
ditampilkan dalam browser. Untuk membuat komentar dengan menggunakan
tag: <!-- sebagai awal dan tag --> sebagai akhir komentar.
Contoh Listing 3.8.1:
<html>
<head>
<title>Horizontal Rule</title>
</head>
<body>
<!-- komentar ni tidak akan ditampilkan di browser -->
<p>Tulisan ini akan ditampilkan di browser</p>
</body>
</html>

3.9 List Item

List item di gunakan untuk mengelompokkan data baik berurutan
(ordered list) maupun yang tidak berurutan (unordered list).

18

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Contoh: Kita mau mengelompokkan data-data berikut : Pisang, Jambu,

Apel, Anggur dapat kita kelompokkan ke dalam kelompok: Buah-buahan.
a. Ordered List
Untuk membuat list terurut nomor (ordered list), kita gunakan tag
pembuka <ol> dan penutup </ol>, sedangkan untuk mendata setiap
itemnya menggunakan tag <li> sebagai pembuka dan </li> sebagai
penutup.ol kependekan dari Ordered List, li kependekan dari List Item.
Contoh Listing 3.9.1: orderedlist1.html
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ol>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
<p>Daftar Kuliah : </p>
<ol>
<li>Web Design</li>
<li>Pemrograman web</li>
<li>Database </li>
</ol>
</body>
</html>

Nomor item ordered list secara default menggunakan angka 1,2,3,.dst.

19

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Untuk keperluan tampilan tertentu kita dapat mengubah dengan mengubah

atribut type pada tag <ol>.

Gambar 3.7. Contoh hasil list

Atribut type pada tag <ol> :
Type
I
i
A
a

Arti
Angka ditampilkan dengan angka romawi huruf besar
Angka ditampilkan dengan angka romawi huruf kecil
Angka ditampilkan dengan abjad huruf besar
Angka ditampilkan dengan abjad huruf kecil

Contoh - Listing 3.9.2 : orderedlist2.html

<html>
<head>
<title>Ordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ol type="A">

20

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
<p>Daftar Kuliah : </p>
<ol type="i">
<li>Web Design</li>
<li>Pemrograman web</li>
<li>Database </li>
</ol>
</body>
</html>

Gambar 3.8 Contoh hasil list

b. Unordered List

21

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Untuk membuat list tidak terurut nomor

(Unordered List), kita

gunakan tag pembuka <ul> dan penutup </ul>, sedangkan untuk mendata
setiap itemnya menggunakan tag <li> sebagai pembuka dan </li> sebagai
penutup.ul kependekan dari Unordered List, li kependekan dari List Item
Item unordered list secara default mengunakan noktah.Untuk
keperluan tampilan tertentu kita dapat mengubah dengan mengubah atribut
type pada tag <ul>.
Atribut type pada tag <ul> :
Type
Circle

Arti
Bullet Lingkaran

Disc

Bullet Titik

Squar

Bullet Kotak

e
Contoh Listing 3.9.4: unorderedlist2.html
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ul type="circle">
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
</body>
</html>

Keterangan : unordered list dengan type = circle.

22

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 3.9 Contoh hasil pengaturan bullet

c.

Nested List
List item dapat digunakan secara bersarang, maksudnya di dalam list
ada list item lagi.
Contoh Listing 3.9.5 : nestedlist.html
<html>
<head>
<title>Nested List</title>
</head>
<body>
<ol>
<li>Buah</li>
<ul type="circle">
<li>Semangka</li>
<li>Jambu</li>
</ul>
<li>Bunga</li>
<ul type="disc">
<li>Melati</li>
<li>Anggrek</li>
</ul>

23

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<li>Kendaraan</li>
<ul type="square">
<li>Mobil</li>
<li>Sepeda Motor </li>
</ul>
</ol>
</body>
</html>

Gambar 3.10 Contoh hasil nested list

d. Definition List
Definition List terdiri diapit oleh tag <DL> </DL> dan <DT> tag
menentukan definition term serta <DD> tag menentukan definition itu
sendiri
Contoh - Listing 3.9.6 : definitionlist.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Definition List</title>
</head>
<body>

24

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<h3>Contoh Definition List</h3>

<dl>
<dt>Web Design</dt>
<dd>Belajar HTML - Macromedia Dreamweaver</dd>
<dt>Pemrograman Web</dt>
<dd>Belajar PHP MySQL</dd>
</dl>
</body>
</html>

Gambar 3.11 Contoh hasil definition list

e.

Tag-tag List HTML

Tag Awal
<ol>
<ul
<li>
<dl>
<dt>
<dd>

3.10

Keterangan
Mendefinisikan Ordered List
Mendefinisikan Unored List
Mendefinisikan List Item
Mendefinisikan Definition List
Mendefinisikan Definition Term
Mendefinisikan Definition Description

Pengaturan Gambar Dengan Html

a. Memasukkan gambar ke HTML

Untuk memasukkan gambar ke dalam dokumen HTML digunakan elemen
img di ikuti dengan src (source) sebagai sumber atau lokasi dari gambar.

25

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<img src="lokasi gambar" />

Ketika memasukkan gambar ke dalam dokumen HTML ada tiga atribut yang
sangat penting harus selalu disertakan dengan elemen img yaitu alt, width
dan height.
Alt (alternate) adalah sebagai teks alternatif yang ditampilkan oleh browser
ketika gambar tidak dapat ditampilkan atau ditemukan sedangkan width dan
height adalah ukuran lebar dan tinggi gambar dalam satuan pixel(px).
<img src="lokasi gambar" alt="teks alternatif" width="lebar" height="tinggi" />

Contoh:
<img src="http://htmlcssguides.com/images/gambar-avril.jpg" alt="Gambar Avril"
width="100" height="100" />

b. Alignment Image
Contoh berikut ini mengatur image dengan align.Atribut align diisi
dengan : top, bottom. middle
Contoh Listing 3.10.1 : imagealign.html
<html>
<head>
<title>image align</title></head>
<body>
<p>Sebuah gambar<img src="jpg/bunga1.jpg" width="103" height="77"
align="top"> di tengah teks dengan atribut align = top <br>
<p>Sebuah gambar<img src="jpg/bunga1.jpg" width="103" height="77"
align="middle"> di tengah teks dengan atribut align = top <br>
<p>Sebuah gambar<img src="jpg/bunga1.jpg" width="103" height="77"
align="bottom"> di tengah teks dengan atribut align = top <br>
</p>
</body>
</html>

c.

Floating Image
Berikut ini contoh membiarkan suatu image mengambang di kiri atau di
kanan paragraf.

26

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Contoh Listing 3.10.2 : floatingimage.html

<html>
<head>
<title>Floating Image</title>
</head>
<body>
<p><img src="jpg/house1.jpg" width="114" height="62" hspace="10" vspace="5"
align="left">Sebuah paragraf yang berisi image. atribut align image diisi dengan
&quot;left&quot;. Sebuah paragraf yang berisi image. atribut align image diisi
dengan &quot;left&quot;. Sebuah paragraf yang berisi image. atribut align image
diisi dengan &quot;left&quot;. Sebuah paragraf yang berisi image. atribut align
image diisi dengan &quot;left&quot;. </p>
<p><img src="jpg/house1.jpg" width="114" height="62" hspace="10" vspace="5"
align="right">Sebuah paragraf yang berisi image. atribut align image diisi dengan
&quot;right&quot;. Sebuah paragraf yang berisi image. atribut align image diisi
dengan &quot;right&quot;.Sebuah paragraf yang berisi image. atribut align image
diisi dengan &quot;right&quot;. Sebuah paragraf yang berisi image. atribut align
image diisi dengan &quot;right&quot;. Sebuah paragraf yang berisi image. atribut
align image diisi dengan &quot;right&quot;.</p>
</body>
</html>

Gambar 3.12 Image floating

27

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

d. Image Adjustment
Contoh berikut ini adalah menampilkan image sesuai dengan ukuran
yang berbeda-beda. Untuk mengubah ukuran image dengan mengubah nilai
width dan height.
Contoh Listing 3.10.3 : adjusmentimage.html
<html>
<head>
<title>Adjustment Image</title>
</head>
<body>
<p>Image dengan ukuran 71 x 53 </p>
<p><img src="jpg/house1.jpg" width="71" height="53"></p>
<p>Image dengan ukuran 122 x 79 </p>
<p><img src="jpg/house1.jpg" width="122" height="79"></p>
<p>Image dengan ukuran 163 x 93 </p>
<p><img src="jpg/house1.jpg" width="163" height="93"> </p>
</body>
</html>

28

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 3.13 Contoh hasil image adjustment

29

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

BAB IV
LINK (HTML)
Dokumen HTML mempunyai kemampuan untuk memberikan link dari
satu teks dan / atau gambar menuju ke dokumen atau bagian lain dalam suatu
dokumen. Browser web akan menyorot teks atau ganbar yang diidentifikasikan
sebagai link dengan warna dan / atau garis bawah untuk menunjukkan bahwa itu
adalah hyperteks link.
4.1 Tag Anchor
HTML menggunakan tag <a> yang disebut sebagai tag anchor untuk
membuat suatu link kepada dokumen lain.
Contoh Listing 4.1.1 :
<a href="http://www.eepis-its.edu">Link ke www.eepis-its.edu</a>

merupakan link ke alamat website www.eepis-its.edu

4.2 Link Relatif
Membuat link dari satu page ke page lainnya pada computer yang sama
dapat dilakukan dengan menuliskan langsung nama filenya.
Contoh Listing 4.2.1: linkrelatif.html
<html>
<head>
<title>Link Relatif</title>
</head>
<body>
<a href="biodata.html">Biodata</a></body>
</html>

Jika tulisan biodata.html kita pilih klik, akan muncul dokumen biodata.html
4.3 Link Absolut
Membuat link ke page web lain yang berada pada web site lain di internet
dilakukan dengan menuliskan nama URL dan nama filenya.
Contoh Listing 4.3.1: linkabsolut.html
<html>
<head>
<title>link</title>
</head>

30

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<body>
<a href="http://www.eepis-its.edu" >Link ke www.eepis-its.edu</a>
</body>
</html>

Jika teks Link ke www.eepis-its.edu dipilih, maka akan membuka website

www.eepis-its.edu
4.4 Link ke bagian lain dalam dokumen yang sama
Link jenis ini dipakai jika dokumennya terlalu panjang, sehingga apabila
ditampiklkan di browser akan mengharuskan kita melakukan scroll layer
berulang-ulang. Untuk memudahkannya, maka dibuat link antar bagian di
dalam dokumen HTML.
Contoh Listing 4.4.1: linkbagian.html
<html>
<head>
<title>Link dalam satu dokumen</title>
</head>
<body>
<p>Isi Bab :</p>
<p><a href="#isibab1">1. Bab 1</a><br>
<a href="#isibab2">2. Bab 2</a><br>
<a href="#isibab3">3. Bab 3</a></p>
<p>&nbsp;</p>
<h2><a name="isibab1">Bab1</a></h2>
<p>isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab
1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi
penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab </p>
<h2><a name="isibab2">Bab 2</a> </h2>
<p>isi penjelasan bab 2, isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab
2,isi penjelasan bab 2,isi penjelasan bab 2, isi penjelasan bab 2,isi penjelasan bab 2,isi
penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2</p>
<h2><a name="isibab3">Bab 3 </a></h2>

31

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<p>isi penjelasan bab 3, isi penjelasan bab 3, isi penjelasan bab 3, isi penjelasan bab
3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi
penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3.</p>
</body>
</html>

Keterangan :
<a name="isibab1">Bab1</a> :
Memberi nama bagian dalam dokumen HTML.
<a href="#isibab1">1. Bab 1</a> :
mendefinisikan link isibab1, jika teks 1. Bab 1 diklik, maka halaman web
akan menampilkan bagian isibab1.

Gambar 4.1 Contoh hasil link

4.5 Membuat Link untuk window baru
Untuk membuat link supaya membuka window baru dapat ditambahkan
atribut : target=_blank.
Contoh Listing 4.5.1 : linknewwindow.html
<html>
<head>
<title>link new window</title>

32

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

</head>
<body>
membuka alamat website eepis dengan membuka window baru : <a
href="http://www.eepis-its.edu" target="_blank">www.eepis-its.edu</a>
</body>
</html>

Gambar 4.2 Contoh hasil link dengan window baru

4.6 Mailto
Berikut ini adalah contoh link untuk menghubungkan ke sebuah alamat
email.
Contoh Listing 4.6.1 : mailto.html
<html>
<head>
<title>Mailto</title>
</head>
<body>
kirim email ke humas PENS : <a href="mailto:[email protected]">[email protected] </a>
</body>
</html>

Jika teks [email protected] diklik maka akan muncul mail client yang sudah
dipasang untuk mengirim email ke [email protected]
4.7 Image sebagai link
Image dapat kita buat sebagai sebuah link. Sehingga kita dapat membuat
menu-menu web site dengan sebuah image sebagai link ke halaman lain atau
alamat web site lain.

33

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Contoh Listing 4.7.1 : imagelink.html

<html>
<head>
<title>image link</title>
</head>
<body>
<p><a href="http://www.eepis-its.edu" target="_blank"><img src="jpg/back.jpg"
width="111" height="87" border="0"></a>
</p>
<p>Membuat image menu dengan menambahkan tag &lt;a href&gt;. jika icon anak
panah kita klik, maka akan muncul alamat website www.eepis-its.edu. </p>
</body>
</html>

4.8 Image Map

Sebuah image dapat dijadikan sebuah link dengan mendefinisikan daerah
tertentu mengandung sebuah link ke halaman lain atau alamat internet lain.
Definisi daerah di dalam image yang dijadikan link dinyatakan dalam bentuk
objek :

Titik

Poligon

Persegi panjang

Lingkaran/elips
Metode imap map mengharuskan mendefinisikan daerah-daerah dalam
suatu gambar yang mempunyai link atau yang akan diberi link. Daerah
yang didefinisikan berupa bentuk daerah dan kordinat pembatasnya :

POINT : daerah berupa satu titik, dengan kordinat x,y

RECT : daerah berupa persegi panjang, dengan kordinat pojok kiri atas
dan pojok kanan bawah.

POLY : daerah berupa polygon, dengan kordinat x, y untuk setiap titik

dari setiap garis.

34

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

CIRCLE : daerah berupa lingkaran, dengan kordinat titip pusat

lingkaran (x,y) dan jari-jari.

Contoh Listing 4.8.1 : imagemap.html

<html>
<head>
<title>image map</title>
</head>
<body>
<div align="center"><img src="jpg/house1.jpg" width="202" height="90" border="0"
usemap="#Maprumah">
<map name="Maprumah" id="Maprumah">
<area shape="rect" coords="62,17,103,49" href="atap.htm" alt="atap rumah">
<area shape="circle"coords="45,65,15" href="dinding.htm" alt="dinding rumah">
</map>
</div>
</body>
</html>

Keterangan : Mendefinisikan imap map persegi panjang dan lingkaran.

Source Code Listing 4.8.2 : atap.htm
<html>
<head>
<title>atap rumah</title>
</head>
<body>
Anda menekan daerah atap rumah
</body>
</html>

Source Code - Listing 4.8.3 : dinding.htm

<html>
<head>
<title>Dinding Rumah</title>
</head>
<body>

35

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

anda menekan daerah dinding rumah

</body>
</html>

Jika daerah persegi panjang diklik, maka akan muncul halaman

atap.htm, dan jika daerah lingkaran diklik maka akan muncul halaman
dinding.htm

Gambar 4.3 Image Map

36

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

BAB V
TABEL (HTML)
Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris.
Tabel didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi beberapa
baris (dengan tag <tr>), dan setiap baris dibagi menjadi beberapa kolom (dengan
tag <td>). Td kependekan dari table data yang berarti tempat menyimpan data
(data cell). Sebuah cell data dapat berupa teks, image, list, paragraf, form,
tabel,dll.

5.1 Tag tag tabel HTML

Tag

Keterangan

<table>

Mendefinisikan tabel

<th>

Mendefinisikan header tabel

<tr>

Mendefinisikan baris tabel

<td>

Mendefinisikan cell tabel

<caption>

Mendefinisikan caption tabel

<colgroup>

Mendefinisikan group kolom tabel

<col>

Mendefinisikan atribut nilai jumlah kolom tabel

<thead>

Mendefinisikan head tabel

<tbody>

Mendefinisikan body tabel

<tfoot>

Mendefinisikan footer tabel

Contoh Listing 5.1.1 : tabel1.html

<html>
<body>
<p><strong>
Satu Kolom:</strong></p>
<table border="1">
<tr>
<td>500</td>
</tr>
</table>
<h4>Satu baris dan lima kolom:</h4>
<table border="1">

37

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<tr>
<td>1000</td>
<td>2000</td>
<td>3000</td>
<td>4000</td>
<td>5000</td>
</tr>
</table>
<h4>Dua baris dan lima kolom :</h4>
<table border="1">
<tr>
<td>1000</td>
<td>2000</td>
<td>3000</td>
<td>5000</td>
<td>6000</td>
</tr>
<tr>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>11000</td>
</tr>
</table>
</body>
</html>

38

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 5.1 Contoh pemakaian tabel

5.2 Border, Align dan Background tabel

Tebal border tabel didefinisikan dengan tag border, letak posisi tabel
didefinisikan dengan tag align, warna background tabel didefinisikan
dengan tag bgcolor.
Contoh Listing 5.2.1 : tabelborder.html
<html><title>Border Tabel</title>
<body>
<h4>border normal, letak di tengah:</h4>
<table border="1" align="center">
<tr>
<td>Baris Pertama - Kolom Pertama </td>
<td>Baris Pertama - Kolom Kedua </td>
</tr>
<tr>
<td>Baris Kedua - Kolom Pertama </td>
<td>Baris Kedua - Kolom Kedua </td>
</tr>
</table>
<h4>border lebih tebal, letah di tengah, lebar tabel 90%:</h4>
<table border="8" align="center" width="90%">

39

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<tr>
<td>Baris Pertama - Kolom Pertama </td>
<td>Baris Pertama - Kolom Kedua</td>
</tr>
<tr>
<td>Baris Kedua - Kolom Pertama</td>
<td>Baris Kedua - Kolom Kedua </td>
</tr>
</table>
<h4>border sangat tebal, letak di tengah, lebar tabel 90%, warna background =
#FFDFAA: </h4>
<table width="90%" border="15" align="center" bgcolor="#FFDFAA">
<tr>
<td>Baris Pertama - Kolom Pertama </td>
<td>Baris Pertama - Kolom Kedua</td>
</tr>
<tr>
<td>Baris Kedua - Kolom Pertama</td>
<td>Baris Kedua - Kolom Kedua </td>
</tr>
</table>
</body>
</html>

40

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 5.2 Pengaturan table

5.3 Tabel Tanpa Border

Terkadang dalam pembuatn tabel tidak diharapkan adanya border
(garis-garis). Berikut ini adalah contoh tabel tanpa border.
Contoh Listing 5.3.1 : tabelnoborder.html
<html><title>Tabel tanpa border</title>
<body>
<h4>Tabel tanda border :</h4>
<table>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
<tr>
<td>JKL</td>
<td>MNO</td>
<td>PQR</td>
</tr>

41

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

</table>
</body>
</html>

Gambar 5.3 Tabel tanpa border

5.4 Tabel Header

Berikut ini adalah contoh tabel header dengan tag <th>.
Contoh Listing 5.4.1 : tabelheader.html
<html><title>Tabel Header</title>
<body>
<h4>Table header:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Jurusan</th>
<th>Institusi</th>
</tr>
<tr>
<td>Hasan Abdul Karim </td>
<td>Teknologi Informasi </td>
<td>PENS ITS </td>
</tr>
</table>

42

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<h4>Vertical header:</h4>
<table border="1">
<tr>
<th>Nama :</th>
<td>Hasan Abdul Karim </td>
</tr>
<tr>
<th>Jurusan</th>
<td>Teknologi Informasi </td>
</tr>
<tr>
<th>Institusi</th>
<td>PENS ITS </td>
</tr>
</table>
</body>
</html>

Gambar 5.4 Tabel header

43

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

5.5 Empty Cell

Berikut ini adalah contoh empty cell tabel.
Contoh Listing 5.5.1 : emptycell.html
<html><title>Empty Cell</title>
<body>
<table border="1">
<tr>
<td>Tulisan Teks </td>
<td>Tulisan Teks</td>
</tr>
<tr>
<td></td>
<td>Tulisan Teks</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Tulisan Teks</td>
</tr>
</table>
<p>Jika suatu tabel tidak ada data, maka akan dianggap tidak ada border seperti
terlihat pada baris kedua - kolom pertama. Untuk mengatasinya bisa dengan trik
memberikan spasi, yaitu dengan teks di kode &quot;&amp;nbsp;&quot;.
</p>
</body>
</html>

44

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 5.5 Cell kosong

5.6 Colspan dan Rowspan

Berikut ini adalah contoh mendefinisikan cell tabel yang dilebarkan
lebih dari satu baris atau satu kolom dengan atribut colspan dan rowspan.
Contoh Listing 5.6.1 : colspan.html
<html><title>Colsapn dan Rowspan</title>
<body>
<h4>Colspan 3 kolom:</h4>
<table border="1">
<tr>
<th>Hari</th>
<th colspan="3">Kuliah</th>
</tr>
<tr>
<td>Senin</td>
<td>Web Design</td>
<td>Aplikasi Web </td>
<td>Database </td>
</tr>
</table>
<h4>Rowspan 3 row:</h4>
<table border="1">
<tr>
<th>Hari:</th>
<td>Senin</td>
</tr>
<tr>
<th rowspan="3">Kuliah</th>

45

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<td>Web Design</td>
</tr>
<tr>
<td>Aplikasi Web</td>
</tr>
<tr>
<td>Database</td>
</tr>
</table>
</body>
</html>

Gambar 5.6. Contoh colspan dan rowspan

5.7 Tag di dalam suatu tabel

Berikut ini adalah contoh menampilkan elemen di dalam elemen lain.
Contoh Listing 5.7.1 : tagintabel.html
<html><title>Tag di dalam tabel</title>
<body>
<table border="1">
<tr>
<td><p>Sebuah paragraf </p>
<p>Paragraf lain </p></td>
<td>Cell berisi tabel
<table border="1">
<tr>
<td>A</td>

46

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<td>B</td>
</tr>
<tr><td>C</td>
<td>D</td></tr>
</table>
</td>
</tr>
<tr>
<td>Cell berisi list
<ul>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
</ul>
</td>
<td>PENS ITS </td>
</tr>
</table>
</body>
</html>

Gambar 5.7. Contoh tabel dalam tabel

47

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

5.8 Cellpadding
Cellpadding digunakan untuk memberikan jarak antara teks dengan
tepi border tabel. Cellpadding menggunakan atribut cellpadding
Contoh Listing 5.8.1 : cellpadding.html
<html><title>cellpadding</title>
<body>
<h4>Tanpa cellpadding:</h4>
<table border="1">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
<h4>Dengan cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
</body>
</html>

48

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 5.8 Contoh cellpadding

5.9 Cellspacing
Cellspacing digunakan untuk memberikan jarak antara border dalam
tabel dengan border luar tabel. Cellspacing menggunakan atribut
cellspacing.
Contoh Listing 5.9.1 : cellspacing.html
<html><title>cellspacing</title>
<body>
<h4>Tanpa cellspacing:</h4>
<table border="1">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
<h4>Dengan cellspacing:</h4>
<table border="1"
cellspacing="10">
<tr>
<td>ABC</td>

49

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
</body></html>

Gambar 5.9 Cellspacing

5.10

Background Pada Tabel

Background pada tabel dapat didefinisikan dengan menggunakan

warna atau dengan image. Berikut ini adalah contoh background tabel
dengan warna dan image. Untuk memberikan background warna
menggunakan atribut bgcolor. Untuk memberikan background image
menggunakan atribut background.
Contoh Listing 5.10 : backgroundtabel.html
<html><title>Background Tabel</title>
<body>
<h4>Dengan background warna:</h4>
<table border="1"
bgcolor="green">

50

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
<h4>Dengan background image:</h4>
<table border="1" background="jpg/bgdesert.jpg">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
</body>
</html>

51

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 5.10 Background pada tabel

5.11

Background Cell
Background Cell digunakan untuk memberikan background pada cell

tertentu tabel sehingga dimungkinkan banyak warna pada sutau tabel.

Contoh Listing 5.11.1 : cellbackground.html
<html><title>cell background</title>
<body>
<h4>Cell background:</h4>
<table border="1">
<tr>
<td bgcolor="#FF9F55">ABC</td>
<td>DEF</td>
</tr>
<tr>
<td
background="jpg/bgdesert.jpg">
GHI</td>
<td>JKL</td>
</tr>
</table>
</body>

52

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

</html>

Gambar 5.11 Background Cell

5.12

Mengatur posisi teks dalam table

Berikut ini adalah contoh mengatur posisi teks dalam tabel dengan

atribut align, sehingga diperoleh layout yang lebih baik.

Contoh Listing 5.12.1 : aligntabel.html
<html><title>Align Tabel</title>
<body>
<p>Mengatur posisi teks dalam tabel </p>
<table width="400" border="1">
<tr>
<th align="left">Hari</th>
<th align="right">Kuliah-1</th>
<th align="right">Kuliah-2</th>
</tr>
<tr>
<td align="left">Senin</td>
<td align="right">Web Design </td>
<td align="right">Aplikasi Web </td>

53

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

</tr>
<tr>
<td align="left">Selasa</td>
<td align="right">Database</td>
<td align="right">Matematika</td>
</tr>
<tr>
<td align="left">Rabu</td>
<td align="right">Bahasa Enggris </td>
<td align="right">RPL</td>
</tr>
</table>
</body>
</html>

Gambar 5.12 Pengaturan teks pada tabel

BAB VI
FORM (HTML)
Form HTML adalah sebuah area yang mengandung elemen elemen
form. Elemen form adalah sebuah elemen yang memungkinkan user untuk

54

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

memasukkan informasi seperti text, teksarea, menu drop-down, radio button,

checkbox,dll.
Sebuah form didefinisikan dengan tag <form>.
<form>

</form>

6.1 Tag tag Form

Tag

Keterangan

<form>

Mendefinisikan form untuk masukan user

<input>

Mendefinisikan masukan field

<textarea>

Mendefinisikan textarea

<label>

Mendefinisikan label control

<fieldset>

Mendefinisikan sebuah fieldset

<legend>

Mendefinisikan caption sebuah fieldset

<select>

Mendefinisikan list (drop-down box)

<optgroup>

Mendefinisikan option group

<option>

Mendefinisikan option pada drop-down box

<button>
Mendefinisikan button
6.2 Jenis masukan dalam form
Jenis masukan merupakan suatu obyek/komponen yang digunakan untuk
memasukkan suatu nilai/data/informasi ke dalam web. Jenis masukan dalam
form dibedakan menjadi :
Text : digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada
server. Nilai yang dimasukkan dapat berupa angka ataupun teks.
Radio : menyediakan beberapa pilihan, hanya satu pilihan yang dapat
dipilih.
Check box : menyediakan beberapa pilihan, pilihan bisa lebih dari satu
yang dipilih.
Button : digunakan untuk mendefinisikan tombol untuk melakukan
pemrosesan form.

55

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

1. SUBMIT : button yang digunakan untuk mengirim data.

2. RESET

button

yang

digunakan

untuk

menginisialisasi

(mengosongkan) form.
List : menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih
dapat lebih dari satu.
Text Area : digunakan untuk memasukkan data dalam bentuk teks berupa
memo.
6.3 Tag tag dan atribut elemen form

Form
<form name="form1" method="post" action=""></form>
Keterangan :
Form : tag yang menandakan sebuah elemen form
Name : nama form
Methode

: metode pengiriman data. Bisa berupa post atau get

Action : nama file dokumen yang memproses pengiriman data. Lebih

lanjut akan dibahas di aplikasi web php mysql.

Text Field
<input type="text" name="textfield">
Keterangan :
Input : tag yang menandakan sebuah masukan
Type

: type sebuah masukan, yaitu text

Name : nama text field

Text Area
<textarea name="textarea" cols="100" rows="5"></textarea>
Keterangan :
Textarea: tag yang menandakan sebuah masukan textarea
Name : nama textarea
Cols

: jumlah kolom textarea

Rows : jumlah baris textarea

56

Check box

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<input name="checkbox" type="checkbox" value="checkbox" checked>

Keterangan :
Name : nama checkbox
Type

: type masukan

Valuae : nilai yang dikirimkan ke server

Checked

: menunjukkan bahwa otomatis pilihan tersebut dipilih.

Secara default atribut tersebut unchecked (tidak dipilih).

Radio Button
<input name="radiobutton" type="radio" value="radiobutton">
Keterangan :
Name : nama radiobutton
Type

: type masukan

Value : nilai yang akan dikirim ke server

List Box
<select name="select">
<option value="TI">Teknologi Informasi</option>
</select>
Keterangan :
Select : tag yang menandakan sebuah list/menu
Name : nama list/menu
Option : tag yang menandakan sebuah pilihan list
Value : nilai pilihan yang akan dikirim ke server

Button Submit
<input type="submit" name="Submit" value="Submit">

Button Reset
<input type="reset" name="Reset" value="Reset">

6.4 Field Text

Berikut ini adalah contoh penggunakan field text dalam dokumen
HTML.

57

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Contoh Listing 6.4.1 : textfield.html

<html><title>text field</title>
<body>
<form>
Nama Depan :
<input name="NamaBelakang" type="text" id="NamaBelakang">
<br>
Nama Belakang :
<input name="NamaBelakang" type="text" id="NamaBelakang">
</form>
</body>
</html>

Gambar 6.1 Contoh field text

6.5 Field Text Password
Berikut ini adalah contoh Field Text dengan masukan berupa password.
Contoh - Listing 6.5.1: password.html
<html><title>Password</title>
<body>
<form>
Username:
<input type="text" name="user"><br>
Password:

58

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<input type="password" name="password">

</form>
<p>Keterangan : ketika memasukan data di field password, browser akan
menampilkan tanda bintang sebagai pengganti karakter. </p>
</body>
</html>

Gambar 6.2 Contoh password

6.6 Checkbox
Berikut ini adalah contoh penggunaan checkbox dalam dokumen HTML.
Contoh - Listing 6.6.1 : checkbox.html
<html><title>Check Box</title>
<body>
<p> Hobi :</p>
<form>
<p>Baca Majalah :
<input name="majalah" type="checkbox" id="majalah" value="majalah"
checked>
<br>
Olah Raga :
<input name="olahraga" type="checkbox" id="olahraga" value="olahraga">
<br>
Memancing :
<input name="mancing" type="checkbox" id="mancing" value="memancing">

59

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

</p>
</form></body>
</html>

Gambar 6.3 Contoh checkbox

6.7 Radio Button
Berikut ini adalah contoh penggunaan radion button dalam dokumen HTML.
Contoh - Listing 6.7.1 : radiobutton.html
<html><title>Radio Button</title>
<body>
<p>Agama : </p>
<form>
<p>Islam :
<input type="radio" checked="checked"
name="agama" value="islam"> <br>
Kristen :
<input type="radio"
name="agama" value="kristen"><br>
Protestan :
<input name="agama" type="radio" value="protestan"><br>
Hindu :
<input name="agama" type="radio" value="Hindu"><br>
Budha :
<input name="agama" type="radio" value="Budha"></p>

60

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

</form></p>
</body>
</html>

Gambar 6.4 Contoh radiobutton

6.8 List Box Drop Down Menu
Berikut ini adalah contoh penggunaan list box drop down menu.
Contoh - Listing 6.8.1 : listbox.html
<html>
<head>
<title>List Box</title>
</head>
<body>
<p>Tahun Kelahiran</p>
<form name="form1" method="post" action="">
<select name="select">
<option value="1980" selected>1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>

61

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

</select>
</form>
</body>
</html>

Gambar 6.5 Contoh listbox dropdown

6.9 Textarea
Berikut ini adalah contoh penggunaan textarea dalam dokumen HTML.
Contoh - Listing 6.9.1 : textarea.html
<html>
<head><title>textarea</title></head>
<body>
<p>Komentar :</p>
<form name="form1" method="post" action="">
<textarea name="textarea" cols="50" rows="5">isikan komentar anda
disini</textarea>
</form>
</body></html>

62

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 6.6 Contoh textarea

6.10 Button Submit dan Reset
Berikut ini adalah contoh penggunaan Submit Button dan Reset Button.
Contoh - Listing 6.10.1 : button.html
<html>
<head>
<title>Button</title>
</head>
<body>
<form name="form1" method="post" action="">
<input type="submit" name="Submit" value="Send">
<input type="reset" name="Reset" value="Reset">
</form>
</body>
</html>

63

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 6.7 Contoh button

6.11 Contoh form biodata
Source Code - Listing 6.11.1 : biodata.html
<html>
<head>
<title>Biodata</title>
</head>
<body>
<p align="center">Formulir Biodata </p>
<form name="form1" method="post" action="">
<table width="90%" border="0" align="center">
<tr>
<td width="25%">Nama</td>
<td width="2%">:</td>
<td width="73%"><input name="txtnama" type="text" id="txtnama"
size="50"></td>
</tr>
<tr>
<td>Tempat Tanggal Lahir </td>
<td>:</td>
<td><input name="tempat" type="text" id="tempat" size="20">
/
<input name="textfield" type="text" size="5">
-

64

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<select name="sBulan" id="sBulan">

<option value="januari" selected>Januari</option>
<option value="pebruari">Pebruari</option>
<option value="maret">Maret</option>
<option value="april">April</option>
<option value="mei">Mei</option>
<option value="juni">Juni</option>
<option value="juli">Juli</option>
<option value="agustus">Agustus</option>
<option value="september">September</option>
<option value="oktober">Oktober</option>
<option value="nopember">Nopember</option>
<option value="desember">Desember</option>
</select>
<select name="sTahun" id="sTahun">
<option value="1980" selected>1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
</select></td>
</tr>
<tr>
<td valign="top">Agama</td>
<td valign="top">:</td>
<td valign="top"><input name="agama" type="radio" value="islam" checked>
Islam<br>

65

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<input name="agama" type="radio" value="kristen">

Kristen

<br>

<input name="agama" type="radio" value="protestan">

Protestan<br>
<input name="agama" type="radio" value="hindu">
Hindu

<br>

<input name="agama" type="radio" value="budha">

Budha

<br> </td>

</tr>
<tr valign="top">
<td>Hobi</td>
<td>:</td>
<td><input name="cHobi" type="checkbox" id="cHobi" value="Olah Raga"
checked>
Olah Raga <br>
<input name="cHobi" type="checkbox" id="cHobi" value="Baca Majalah">
Baca Majalah<br>
<input name="cHobi" type="checkbox" id="cHobi" value="Memancing">
Memancing<br></td>
</tr>
<tr>
<td>Komentar</td>
<td>:</td>
<td><textarea name="areaKomentar" cols="50" rows="3"
id="areaKomentar"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Send">
<input type="reset" name="Reset" value="Reset"></td>
</tr>
</table>
</form>

66

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

</body>
</html>

Gambar 6.8 Contoh pengisian biodata

67

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

BAB VII
DASAR PHOTOSHOP
Di dalam bab ini, akan dibahas mengenai penggunaan aplikasi Adobe
Photoshop untuk manipulasi image. Materi yang dibahas dikelompokkan menjadi
7 bagian sebagai berikut:
(1) Area Kerja Photoshop (ToolBox): mengenai user interface Adobe Photoshop
secara umum dan fungsi-fungsi tools pada toolbox Photoshop, area kerja
Photoshop, viewing image, penggunaan history palette, rulers, guides,
measure tool.
(2) Manipulasi Warna mengenai pengaturan warna image (brightness/contrast,
level, saturation, dsb), penggunaan eyedropper, color sampler tool, dan tools
terkait lainnya.
(3) Selection mengenai cara melakukan selection image, penggunaan marquee,
lasoo tool, dan tools terkait lainnya.
(4) Menggambar dan Manipulasi Path mengenai cara penggunaan pen tools dan
tools sejenis untuk menggambar dan manipulasi path
(5) Transformation dan Retouching mengenai pengubahan ukuran image dan
canvas, transformasi bentuk image, cloning, memperbaiki image, dan
penggunaan tools yang terkait.
(6) Layer dan Masking mengenai penggunaan layer dan masking
(7) Filter dan Membuat Special Effect mengenai penggunaan filter dan membuat
special effect pada image.
7.1 Area Kerja

Gambar 7.1 Tampilan dan Area Kerja Photoshop

68

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Keterangan:
A. Toolbox
B. Tool Option Bar
C. Menu
D. Status Bar
E. Berbagai jenis palette, yang aktif dari atas ke bawah: navigation palette,
color palette, history
F. palette, dan layer palette
G. Palette Well (hanya tampak apabila resolusi layar di atas 800 x 600)
7.1.1 Toolbox
Toolbox berisi berbagai macam tools yang digunakan untuk melakukan
manipulasi image.
7.1.2 Tool Option Bar
Hampir semua tool pada Toolbox memiliki options yang ditampilkan
pada Tool Option Bar. Options tersebut digunakan untuk mengatur nilai
parameter dari tool yang sedang aktif/dipilih. Gambar 7.2 adalah contoh
tampilan tool option bar jika tool Magic Wand pada toolbox (shortcut
keyboard: W) diaktifkan:

Gambar 7.2 Tool Option Bar

Setelah nilai parameter pada tool option bar diubah-ubah (misalnya
nilai Tolerance), kita dapat mengembalikannya lagi menjadi nilai default
(nilai semula). Yaitu dengan klik icon yang ada di bagian paling kiri tool
option bar, kemudian klik tombol . Pada context menu yang muncul, pilih
Reset Tool untuk mengembalikan nilai default dari tool yang sedang dipilih.
Apabila ingin mengembalikan nilai default semua tools di toolbox, pilih
Reset All Tools. Untuk jelasnya bisa dilihat pada gambar 7.3

69

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 7.3 Reset All Tool

Apabila ingin menyembunyikan/menampilkan Tool Option Bar, Pilih
Menu

Window,

kemudian

klik

pada

item

menu

Options

untuk

menghilangkan atau mengaktifkan tanda check-nya.

Gambar 7.4 Check Option untuk mengaktifkan Window Option

7.1.3 Menu
Berikut adalah menu-menu yang terdapat pada Adobe Photoshop 8.0:

File untuk manipulasi file seperti menyimpan, membuka, export,

import, dan cetak.

Edit untuk proses editing secara umum seperti cut, copy, paste,
transform image, serta untuk mengatur preferences Adobe Photoshop.

Image berisi editing image untuk mengatur warna, hue/saturation,

brightness/contrast, ukuran, dsb.

70

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Layer untuk manajemen layer pada image, seperti menambah layer,

menghapus, menambah efek pada layer, serta masking.

Select untuk pemilihan obyek gambar (selection image).

Filter untuk menggunakan filter-filter yang terinstall pada Photoshop

yang dapat digunakan untuk memberi efek tertentu pada gambar.

View digunakan untuk pengaturan view seperti zooming image,

menampilkan skala, dan sebagainya.

Window digunakan untuk pengaturan window

Help digunakan untuk menampilkan help Adobe Photoshop.

7.1.4 Status Bar

Status bar berisikan keterangan mengenai tool di toolbox yang sedang
aktif, serta keterangan image yang sedang aktif. Status bar pada Photoshop
dapat ditampilkan/disembunyikan dengan memilih menu Window > Status
Bar. Untuk lebih memahami kegunaan status bar, bisa praktekkan sbb:
1) Buat dokumen baru, dengan memilih menu File > New... (shorcut
keyboard: Ctrl+N). Akan keluar dialog seperti gambar 7.5, isikan
nilai2nya seperti pada gambar 1.5 dan kemudian klik tombol Ok.
2) Tahan tombol Alt, kemudian klik kiri pada status bar, akan terlihat
keterangan dokumen image yang sedang aktif.
3) Apabila kita perhatikan gambar 7.6, Paint Bucket Tool kebetulan sedang
aktif, dan pada status bar nya terdapat juga keterangan dari tool tersebut.
Untuk jelasnya silakan baca pada keterangan gambar yang ada di bawah
gambar 7.6.

71

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 7.5 Pembuatan dokumen baru

Gambar 7.6 Pembukaan dokumen baru

Keterangan:
A. Skala tampilan pada kanvas (view area image) (gambar 7.6.G), pada
gambar menunjukkan skala ampilan adalah 100%
B. Paint Bucket Tool pada toolbox sedang aktif
C. Informasi/Keterangan tentang dokumen yang sedang aktif di kanvas
(view area image).
D. Informasi/Keterangan tentang dokumen yang sedang aktif di kanvas
(view area image). Untuk menampilkan, tekan Alt+Klik atau
Ctrl+Klik pada (gambar 7.6.C) .
E. Digunakan untuk mengubah informasi/keterangan pada (gambar 7.6.C)
F. Penjelasan singkat mengenai tool yang sedang aktif (pada contoh ini
Paint Bucket Tool)
G. View area image atau kanvas, merupakan area dokumen image yang
sedang kita edit.
7.1.5 Palette

72

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Palette Photoshop berguna untuk memudahkan dalam navigasi

maupun editing image. Untuk menyembunyikan/menampilkan palette,
digunakan

menu

Window,

kemudian

pilih

palette

yang

ingin

disembunyikan/ditampilkan.
7.1.6 Palette Well
Palette well digunakan untuk memudahkan dalam pengaturan
palette. Namun palette well hanya tersedia jika resolusi layar lebih besar dari
800 x 600 (resolusi minimal yang disarankan adalah 1024 x 768). Apabila
suatu palette diletakkan di palette well, maka palette akan bersifat
tersembunyi. Ketika title dari palette diklik, barulah palette akan ditampilkan.
Jika area di luar palette di klik, maka palette tersebut akan tersembunyi
kembali.
Untuk menyimpan palette ke dalam palette well, seret (drag) tab
palette ke dalam palette well hingga palette well ter-highlight.(Gambar 7.7,
memperlihatkan palette tab navigator di-drag ke palette well)

Gambar 7.7 Palette Well

7.2 Toolbox
Berikut ini akan dijelaskan mengenai fungsi dari masing-masing
tools yang terdapat pada toolbox Adobe Photoshop 8.0. Untuk cara
penggunaan lebih detil masing-masing tools akan dijelaskan secara terpisah
pada bagian selanjutnya.

73

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 7.8. Toolbox

Keterangan:
A. Marquee tool
B. Move tool
C. Lasso tool
D. Magic Wand tool
E. Crop tool
F. Slice tool
G. Patch tool
H. Brush tool
I. Stamp tool
J. History Brush tool
K. Eraser tool
L. Paint Bucket tool
M. Sharpen tool
N. Burn tool
O. Path Selection tool
P. Type tool
Q. Pen tool
R. Custom Shape tool
S. Notes tool
T. Eyedropper tool
U. Hand tool
V. Zoom tool
7.2.1 Marquee Tool
Rectangular Marquee (Shortcut keyboard: M, atau Shift + M) untuk
membuat area selection berbentuk segi empat.pada gambar.
Elliptical Marquee (Shortcut keyboard: M, atau Shift + M) untuk membuat

74

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

area selection berbentuk elips atau lingkaran pada gambar.

Single Row Marquee untuk membuat area selection satu baris pada gambar
(ukuran tinggi selection adalah 1 pixel)
Single Column Marquee untuk membuat area selection satu kolom pada
gambar (ukuran lebar selectionadalah 1 pixel).
7.2.2 Move Tool
(Shortcut keyboard: V) Digunakan untuk menggeser/memindah selection,
layers, dan guides.
7.2.3 Lasoo Tool
(Shortcut keyboard: L, atau Shift + L untuk mengubah jenis Lasoo)
Lasoo digunakan untuk membuat area selection dengan bentuk bebas
Polygonal Lasoo digunakan untuk membuat area selection berbentuk poligon
Magnetic Lasoo digunakan untuk membuat area selection dengan cara
menempelkan tepi selection pada area tertentu pada image.
7.2.4 Magic Wand Tool
(Shortcut keyboard: W) Digunakan untuk membuat area selection yang
memiliki warna serupa. Perbedaan toleransi warna dapat diatur pada tool
option bar.
7.2.5 Crop Tool
(Shortcut keyboard: C) Digunakan untuk memangkas image (memotong dan
membuang area tertentu dari image)
7.2.6 Slice Tool
(Shortcut keyboard: K, atau Shift + K untuk mengubah jenis slice)
Slice Tool digunakan untuk membuat potongan-potongan gambar dari suatu
gambar
Slice Select Tool digunakan untuk memilih potongan pada suatu gambar
7.2.7 Healing Brush, Patch, Color Replacement Tool
(Shortcut keyboard: J, atau Shift + J mengubah tool)
Patch Tool digunakan untuk mengecat/melukis pada area tertentu gambar
dengan pola (pattern) atau sample tertentu. Cocok untuk memberbaiki
gambar yang rusak.
Healing Brush Tool digunakan untuk mengecat/melukis gambar dengan pola
atau sample tertentu. Cocok untuk memperbaiki gambar yang agak rusak.
Color Replacement Tool digunakan untuk mengecat/mewarnai gambar
dengan pola warna tertentu.

75

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

7.2.8 Brush, Pencil Tool

(Shortcut keyboard: B, atau Shift + B untuk mengubah tool)
Brush Tool digunakan untuk melukis gambar dengan goresan kuas
Pencil Tool digunakan untuk melukis gambar dengan goresan pencil
7.2.9 Stamp Tool (Shortcut keyboard: S, atau Shift + S untuk mengubah jenis
stamp)
Clone Stamp Tool digunakan untuk melukis gambar dengan sample image
tertentu
Pattern Stamp Tool digunakan untuk melukis gambar dengan menggunakan
pola tertentu
7.2.10 History Brush Tool
(Shortcut keyboard: Y, atau Shift + Y untuk mengubah jenis)
History Brush Tool digunakan untuk melukis gambar menggunakan snapshot
atau state history dari gambar 2.
Art History Tool digunakan untuk melukis gambar menggunakan snapshot
atau state history dari gambar, dengan model artistik tertentu.
7.2.11 Eraser Tool
(Shortcut keyboard: E, atau Shift + E untuk mengubah jenis eraser)
Eraser digunakan untuk menghapus pixel gambar dan mengembalikannya ke
state tertentu.
Background Eraser digunakan untuk menghapus area tertentu gambar
menjadi transparan.
Magic Eraser digunakan untuk menghapus area tertentu gambar yang
memiliki warna yang serupa menjadi transparan dengan satu kali klik.
7.2.12 Paint Bucket, Gradient Tool
(Shortcut keyboard: G, atau Shift + G)
Paint Bucket Tool digunakan untuk mengecat area yang dipilih dengan warna
foreground atau pola tertentu.
Gradient Tool digunakan untuk mengecat area yang dipilih (selected area)
dengan perpaduan banyak warna.
7.2.13 Blur, Sharpen, Sharpen Tool
(Shortcut keyboard: R, atau Shift + R)
Blur Tool digunakan untuk menghaluskan/mengaburkan area tertentu pada
gambar.

76

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Sharpen Tool digunakan untuk menajamkan area tertentu pada gambar.

Smudge Tool digunakan untuk menggosok/mencoreng area tertentu pada
gambar
7.2.14 Dodge, Burn, Sponge Tool
(Shortcut keyboard: O, atau Shift + O)
Dodge Tool digunakan untuk menerangkan warna di area tertentu pada
gambar
Burn Tool digunakan untuk menggelapkan warna di area tertentu pada
gambar
Sponge Tool digunakan untuk mengubah saturation di area tertentu pada
gambar
7.2.15 Path Selection Tool
(Shortcut keyboard: A, atau Shift + A untuk mengubah jenis)
Path Selection Tool digunakan untuk melakukan selection path
Direct Selection Tool digunakan untuk mengubah anchor dan direction point
dari path.
7.2.16 Type tool
(Shortcut keyboard: T, atau Shift + T untuk mengubah jenis)
Horizontal Type Tool digunakan untuk membuat tulisan secara horizontal
Vertical Type Tool digunakan untuk membuat tulisan secara vertikal
Horizontal Type Mask Tool digunakan untuk membuat selection berbentuk
tulisan secara horizontal
Vertical Type Mask Tool digunakan untuk membuat selection berbentuk
tulisan secara vertikal
7.2.17 Pen Tool
Pen Tool (Shortcut keyboard: P, atau Shift + P) digunakan untuk membuat
path dengan lengkung-lengkung yang halus
Freeform Pen Tool (Shortcut keyboard: P, atau Shift + P) digunakan untuk
membuat path berbentuk bebas
Add Anchor Point Tool digunakan untuk menambah anchor point pada path
Delete Anchor Point Tool digunakan untuk menghapus anchor point tertentu
pada path
Convert Point Tool digunakan untuk mengubah anchor dan direction point
tertentu pada path
7.2.18 Shape Tool
(Shortcut keyboard: U, atau Shift + U untuk mengubah jenis)

77

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Rectangle Tool digunakan untuk menggambar bentuk segi empat

Rounded Rectangle Tool digunakan untuk menggambar segi empat
melengkung
Ellipse Tool digunakan untuk menggambar ellipse
Polygon Tool digunakan untuk menggambar polygon
Line Tool digunakan untuk menggambar garis lurus
Custom Shape Tool digunakan untuk menggambar bentuk tertentu dari daftar
bentuk yang dapat dipilih pada option bar
7.2.19 Notes Tool
(Shortcut keyboard: N, atau Shift + N untuk mengubah jenis)
Notes Tool digunakan untuk membuat catatan pada gambar
Audio AnnotationTool digunakan untuk membuat suara/audio pada gambar
7.2.20 Eyedropper, Measure Tool
(Shortcut keyboard: I, atau Shift + I untuk mengubah jenis)
Eyedropper Tool digunakan untuk mengambil sample warna pada gambar
untuk warna foreground
Color Sampler Tool digunakan untuk mengambil berbagai sample warna
pada gambar
Measure Tool digunakan untuk mengukur jarak atau sudut pada gambar
7.2.21 Hand Tool
(Shortcut keyboard: H) Digunakan untuk menggeser/memindah bidang
pandang gambar di dalam kanvas.
7.2.22 Zoom Tool
(Shortcut keyboard: Z) Digunakan untuk memperbesar atau memperkecil
tampilan gambar.

78

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

BAB VIII
TEKS EFEK (PHOTOSHOP)
Pada bab ini akan jelaskan contoh-contoh membuat efek teks dengan
menggunakan aplikasi editor gambar photoshop.
8.1 MEMBUAT FIRE BURNING TEKS EFEK
Untuk memulai membuat tulisan berapi adalah mengikut langkah-langkah
sebagai berikut :
1. Buat document baru 800 x 600 Pixel
2. Berikan warna Background hitam, kemudian buat teks hingga seperti
gambar

Gambar 8.1 Gambar Awal

3. Kemudian restireze teks dengan cara klik kanan pada layer teks dan
pilih restireze, lihat gambar :

Gambar 8.2 Memilih Resterize Type

79

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

4. Kemudian berikan efek wind (Klik Menu Filter > Stylis >
Wind ), Atur sesuai gambar :

Gambar 8.3 Memilih Stylize dan Method

Maka hasilnya akan seperti ini:

Gambar 8.4 Hasil Stylize dan Method

5. kemudian ulangi lagi efek wind ato bisa langsung tekan Ctrl + F
2x (untuk mengulangi efek yang terakhir digunakan).
Sehingga hasilnya seperti ini :

Gambar 8.5 Hasil Efek Wind

80

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

6. Berikan efek wind lagi ( ulangi langkah no 4 ) bedanya pada

pengaturan direction (from the right dan from the lift).
Hasilnya kira-kira seperti ini :

Gambar 8.6 Hasil efek wind

7. Sekarang kita putar 90 cw ( klik edit > transfrom > rotate 90 derajat
cw ) seperti ini :

Gambar 8.7 Memilih 90 cw

8. Nah sekarang kita kasih lagi efek wind (ulangi langkah 4 dan 5 ).
Hasilnya:

Gambar 8.8 Hasil efek wind kedua

9. kita rotate kembali agar kembali kesemula yaitu (Klik Edit >
Transfrom > Rotate 90 derajat Ccw )

81

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 8.9 Memilih 90 ccw

10. Selanjutnya menambah efek apinya, sebelumnya kita ubah mode
warna ke Grayscale ( klik image > mode > grayscale ), lalu kita ubah
lagi ke indexed color ( klik image > mode > indexed color ),

Gambar 8.10 menambah

11. Terakhir kita sulut deh apinya dengan color table ( Klik Image > Mode
> Color Table ), dan atur sesuai dengan gambar:

82

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 8.11 Hasil Akhir

8.2 MEMBUAT TEKS EFEK FANTASTIC

83

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 8.12 Teks Efek Fantastic

Adapun langkah-langkah untuk membuat Teks efek dengan fantastic seperti
gambar digambar diatas adalah sebagai berikut :
a. Langkah 1
- Jalankan Program Photoshop, lebih baik jika anda menggunakan
Photoshop yang versi CS (Creative Suite) karena akan lebih mudah.
- Buat lembar kerja baru File -> New -> Ukuran kanvas 400 X 300
dan disini warna dari background adalah gunakan hexadecimal
03122f.
b. Langkah 2
- Ubah warna Foreground dengan 0958d9 dan Background dengan
03122f
- Buat Layer baru Caranya: Tekan Shift + Ctrl + N
- Akses Menu Utama Filter -> Render -> Clouds
Hasil

84

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 8.13 Hasil render

- Ubah Blending Mode ke "Color Dodge"
c. Langkah 3
- Gunakan Horizontal Type Tool Pengaturan:

Gambar 8.14 Menu Menambah tulisan

Kemudian ketik : STAR LIGHT
Hasilnya :

85

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 8.15 Menambah tulisan

Saatnya memberi effek Akses Menu Utama pilih: Layer -> Layer
Style -> Outer Glow

Kemudian klik Inner Glow

Hasilnya :

Gambar 8.16 Hasil Langkah 3

-

dan setelah itu klik kanan Layer Teks pada Layer Pallete dan
pilih Duplicate Layer.

d. Langkah 5
-

Akses Menu Utama pilih Edit -> Transform -> Flip Vertical
Kemudian gunakan Move Tool untuk menggeser ke bawah tulisan
yang di FLip tersebut.

e. Langkah 6

86

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Masuk ke Blending Option dan atur seperti ini

Hasilnya:

Gambar 8.17 Hasil Langkah 6

Filter -> Blur -> Glaussian Blur

Atur Blur ke 1.1

Lalu OK

f. Langkah 7
-

Gunakan Eraser Tool dan hapus separuh teks

Hasilnya:

87

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 8.18 Hasil Langkah 7

-

Duplicate Background Layer

Caranya: Klik kanan background layer lalu pilih duplicate layer

Tambahkan Lens Flare

Caranya: Menu Utama Filter -> Render -> Lens Flare
Pilih 105mm Prime
Hasilnya

.
Gambar 8.19 Hasil Render Langkah 7
-

Edit Lens Flare

Caranya: Menu Utama Edit - Fade Lens Flare
Hasilnya

88

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 8.20 Hasil Akhir

89

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

BAB IX
MANIPULASI GAMBAR (PHOTOSHOP)
Pada bab ini akan jelaskan contoh-contoh melakukan manipulasi gambar
dengan menggunakan aplikasi editor gambar photoshop.
9.1 Melakukan Resample Gambar

Buka gambar, pilih sebuah file gambar

Gambar 9.1 Contoh gambar

Pilih Image > Image size untuk menampilkan kotak dialog.

Pilih kotak cek Resample Image untuk mengubah nilai resolution dan nilai

Width dan Height.

Ubah nilai Width dan Height.
Klik OK.

9.2 Mengubah Ukuran Cetak

Jika ingin mengubah tampilan pada halaman, dan tidak ingin mengubah
jumlah pixel pada halaman, ubah resolusi agar dapat mencetak gambar lebih
besar atau lebih kecil tanpa menambah atau mengurangi satu pixelpun.

Buka gambar

Pilih Image > Size.

Matikan resample image agar tidak ada pixel yang dipengaruhi pada saat
mengubah ukuran gambar.

Ubahlah setting ukuran output dengan memilih resolusi ideal pada table
berikut ini.

Klik OK.
Tabel 9.1 Beberapa ukuran cetak standar

Printer
Print Laser 300 ppi

90

Resolusi Ideal
120 ppi

Batas Minimal
90 ppi

Batas Maksimal
150 ppi

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Print Laser 600 ppi

Newsprint
Coated Magazine Stock
Printer InkJet Warna
Super-fine coated stock

180 ppi
180 ppi
267 ppi
300 ppi
350 ppi

135 ppi
135 ppi
200 ppi
240 ppi
260 ppi

225 ppi
225 ppi
330 ppi
400 ppi
440 ppi

9.3 Memutar Canvas.

Digunakan untuk menampilkan submenu yang berisikan pilihan untuk
memutar atau membalik gambar. Berikut ini submenu dari Rotate canvas :
- 180o : memutar gambar yang terbalik agar kembali pada kakinya, Alt + I, E,
1.
- 90o CW : memutar gambar 90 derajat searah jarum jam, Alt + I, E, 9.
- 90o CCW : memutar gambar 90 derajat berlawanan jarum jam, Alt + I, E, 0)
- Arbiritary : meluruskan gambar.
- Flip horizontal : memperbaiki teks yang terbalik (alt + I + E + H).
- Flip vertikal : membalik bagian atas dan bawah gambar (alt + I, E, V)

Gambar 9.2 Memutar gambar 180o, 90o CW dan 90o CCW

9.4 Memotong Detail Gambar Yang Tidak Perlu
Tool Crop berfungsi untuk memotong sisa gambar atau elemen latar
belakang yang tidak perlu.

91

Klik Icon tool crop (tekan C)

Gambar batas crop, geser di dalam jendela gambar untuk membuat sebuah
segi empat di sekitar bagian gambar yang ingin dipertahankan
Geser dalam batasan crop untuk memindahkannya.
Geser tangkai untuk mengubah ukuran batasan gambar, tekan shift dan
geser untuk mengubah ukurannya secara profesional.
Geser di luar batas crop untuk menegakkan dan memotong gambar dalam
satu operasi.

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Titik pemotongan akan menjadi titik pusat perputaran jika menggeser

tangkai dengan alt atau option.
Klik tanda cek pada baris pilihan, pilih Image-Crop-Klik ganda dalam
batas crop tekan enter.

Gambar 9.3 Memotong Detail Gambar

9.5 Menambahkan copyright & URL.
Cara lain menambahkan cap pribadi ke dalam gambar adalah dengan
pernyataan hak cipta atau copyright.

Pilih file info, pada PC tekan Alt+F lalu I.

Ketikkan caption, pada field Caption ketikkan apa saja mulai dari satu
kalimat hingga beberapa paragraf mengenai gambar anda.
Masukkan
pernyataan
hak
cipta,
bentuk
standar
adalah
simbol/tanggal/pemegang hak cipta, seperti misalnya 2014 Type &
Graphics, Inc.
Ketikkan URL, jika anda memiliki situs internet, ketikan alamatnya
(dikenal dengan istilah Universal Resource Locator) pada kotak image
URL. Ketikkan alamat lengkapnya, seperti : http://www.press.eeepisits.edu.
Klik OK, simpan gambar anda dalam format apa saja.
9.6 Membuat Spesial Efek dengan Photoshop
Pada bagian ini kita akan mengaplikasikan photoshop pada pembuatan
efek khusus. Efek ini berguna untuk mempercantik gambar yang kita olah.
Bukan itu saja, kita bisa menciptakan bermacam gambar digital yang unik.
Kreativitas adalah kuncinya.
9.7 Membuat Efek Lukisan

92

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Efek lukisan sangat populer dan sering digunakan, karena merupakan trik
yang ampuh sekaligus dapat membuat foto menjadi lebih artistik.
Adapun langkah-langkahnya adalah :

Gambar 9.4 Gambar Hasil Efek Lukisan

Buka Gambar

Ubah layer background menjadi mode normal dengan klik ganda

Klik : Filter > Artistik > Dry Bush

93

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Pada palet layer klik tombol : Add layer mask. Akan muncul ikon layer
mask berwarna putih di samping kanan layer tumbnail pada palet layer.

Klik layer mask, kemudian pilih menu : Image > Adjustment Invert atau
tekan Crtll+I untuk menjadikan layer mask tersebut menjadi berwarna
hitam.

Pastikan warna foreground putih pada Toolbox dan klik Brush tool, pilih
bentuk sapuan kuas yang diinginkan pada palet Brushes, agar lebih
artistik pilih bentuk kuas dekokratif.

Sapukan Tool dan hasil image akan muncul secara otomatis sesuai bentuk
sapuan kuas.

Tambahkan Filter > Texture > Texturize untuk memberi kesan kasar pada
permukaannya.

9.8 Membuat Efek Rintik Hujan

Efek rintik hujan sering digunakan untuk membuat efek pemandangan
dan dapat membuat foto menjadi lebih artistik. Adapun langkah-langkahnya
adalah :

Gambar 9.5 Gambar Hasil Efek Hujan

94

Buka Gambar
Klik : Filter > Noise > Add Noise. Dalam kotak dialog Add Noise
masukkan nilai Amount sesuai kebutuhan, antara 100 hingga 400%
tergantung seberapa banyak efek hujan yang akan diterapkan.
Pada menu distribution pilih Gaussian, aktifkan kotak cek Monochrome.
Klik OK
Tambahkan : Filter > Blur > Motion Blur, masukkan angle antara 50
hingga 65 derajat, Distance antara 20 hingga 60px.

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Klik OK

9.9 Menggunakan Masking

Mask berguna untuk menyembunyikan sementara sebagian area pada
layer. Teknik ini berguna saat kita menggabungkan beberapa elemen image
dalam komposisi disain. Kita dapat menghapus sebagian area image yang tidak
diinginkan tanpa kehilangan image aslinya, dengan layer ini kita juga bisa
membuat efek gradasi. Adapun langkah-langkahnya adalah :

95

Klik : Select > Deselect atau tekan Crtl+D untuk menghilangkan seleksi
area pada image
Pada palet layer, pilih layer yang akan kita tambahkan mask
Untuk membuat mask dengan menampilkan keseluruhan bagian layer, klik
tombol New Layer Mask pada palet layer atau pilih Layer > Add Layer
Mask > Reveal All
Untuk membuat mask dengan menyembunyikan keseluruhan bagian layer,
Alt+Klik tombol New Layer Mask atau pilih Layer > Add Layer Mask >
Hide All
Untuk membuat mask dengan menampilkan bentuk seleksi setelah
membuat seleksi, klik tombol New Layer Mask
Untuk mengedit Layer Mask, pilih Brush Tool, gunakan warna foreground
putih untuk mengurangi area mask, hitam untuk menambah area mask, dan
abu-abu untuk membuat mask transparan

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 9.6 Gambar Hasil Masking

9.12 MEMANIPULASI IMAGE DENGAN SELECTION TOOLS
Seleksi juga mampu memanipulasi gambar yang sudah ada sehingga
menjadi sesuai dengan yang kita inginkan. berikut ini beberapa hal yang bisa
dilakukan oleh seleksi.
9.14.1 Menduplikat Image
Gambar yang telah diseleksi bisa dikopi dan ditempel sebanyak yang
kita suka atau ditempelkan ke gambar yang lain. Caranya bagian gambar
yang telah diseleksi dikopi dengan memilih menu Edit > Copy. Kemudian
tempel di gambar tersebut atau di gambar lain dengan memilih menu Edit >
Paste.

96

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 9.7 Menduplikat Image

9.14.2 Memotong Image
Seleksi juga bisa kita gunakan untuk memotong. Jadi hanya bagian yang
diseleksi yang akan hilang. Caranya dengan menekan keyboard delete atau
memilih menu Edit > Cut.
9.14.3 Mengkopi Image ke Image yang lain
Untuk mengkopi gambar yang diseleksi ke gambar lain bisa dilakukan
dengan cara didrag lalu dimasukkan ke dalam gambar lain.
Caranya buat seleksi untuk gambar yang akan dikopi, lalu buka file gambar
yang akan ditempel oleh gambar yang telah diseleksi tersebut. Letakkan
kedua gambar berdampingan agar pada saat mendragnya lebih mudah. Lalu
drag gambar yang diseleksi dengan menggunakan move tool menuju
gambar yang kedua. Atur posisinya agar sesuai.

97

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

BAB X
PENGENALAN DASAR CSS
10.1

Pengertian CSS
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang

digunakan

untuk

mengatur

tampilan

suatu

dokumen

HTML.

CSS

memungkinkan kita untuk mengatur tampilan dari banyak dokumen html

dengan satu file serta untuk merubah tampilan dari banyak dokumen html
tersebut secara cepat dan praktis.
Sederhanya CSS merupakan kumpulan dari tag html yang kita buat
kedalam satu file dan dengan metode penulisan tersendiri yang telah
distandarisasi oleh W3C (World Wide Web Consortium).
10.2 Manfaat CSS
Seperti yang telah kita ketahui dengan tag html pun kita telah bisa
mengatur tampilan halaman html tersebut dan mengapa harus menggunakan
CSS lagi? Banyak manfaat jika kita mengatur tampilan menggunakan CSS.
Bayangkan jika anda misalnya ingin mengganti warna font di web/blog
anda, tentu saja anda harus mengedit lagi satu persatu file html dari web/blog
tersebut. dan bagaimana jika filenya berjumlah puluhan bahkan ratusan? pasti
akan banyak memakan waktu dan tenaga. Dengan CSS kode HTML menjadi
lebih sederhana dan lebih mudah diatur.
10.3 Cara Menggunakan CSS
Ada tiga cara penempatan kode CSS dalam HTML, yaitu :
A. Internal CSS
Yaitu menuliskan secara langsung script CSS kedalam file HTML.
Contoh :

98

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

<html>
<head>
<title>CSS Pertamaku</title>
<style type=text/css>
p {color: white;}
body {background-color: black;}
</style>
</head>
<body>
<p>Ayo belajar CSS</p>
</body>
</html>
Keterangan : yang berwarna biru adalah script CSS
B. External CSS
External CSS adalah kita membuat file CSS tersendiri dengan eksistensi
*.css dan terpisah dari file html dan didtempatkan di folder lain atau di folder
yang sama dengan file html tersebut. browser akan menbaca file tersebut dan
akan menampilkan file html sesuai dengan format yang telah kita atur dalam
file CSS.
Contoh :
<html>
<head>
<title>CSS Pertamaku</title>
<link rel=stylesheet type=text/css href=file.css/>
</head>
<body>
<p>Ayo belajar CSS</p>
</body>
</html>
Keterangan : yang berwarna biru adalah lokasi dari file CSS
C. Inline CSS
Yaitu menuliskan secara langsung script CSS kedalam tag HTML.
Contoh :
<html>
<head>
<title>CSS Pertamaku</title>

99

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

</head>
<p style=background: blue; color: white;>Ayo belajar CSS</p>
</body>
</html>
Keterangan : yang berwarna biru adalah script CSS
Dari ketiga cara di atas saya menganjurkan anda untuk menggunakan
Eksternal CSS.
10.4

Sintaks CSS

Dalam menuliskan tag CSS maka terdapat sedikit perbedaan dalam aturan
penulisan dengan tag HTML. jika dalam HTML kita akan memformat suatu
komponen maka kita gunakan tag dan atribut. contohnya jika kita ingin
memformat paragraf menggunakan align (perataan kanan kiri) maka kita
menggunakan sintaks berikut <p align=center>. p adalah tag dan align=center
adalah atributnya.
Sedangkan jika menggunakan CSS, sintaks yang kita gunakan adalah
Selector, Property dan Value
Penulisan kode CSS dibuat menjadi tiga bagian, yaitu:
selector { property1: value; property2:value; dst}

Selector
Selector pada CSS sama dengan tag atau komponen pada HTML yaitu yang
terdapat antara tanda < dan tanda > misalnya <h1>, <p>, <b> dll.

Property
Selector pada CSS sama dengan atribut pada HTML yaitu. berfungsi untuk
memberi nilai dari selector.

Value
Value adalah nilai yang kita berikan kepada property
Contoh :
Jika di HTML kita memformat paragraf dengan <p align=right> maka
dengan CSS menjadi p {text-align: right;}

10
0

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Keterangan :

p adalah selector dan text-align adalah property, right; adalah value atau
nilai dari property.

jika di HTML kita menggunakan tanda <> tetapi pada CSS kita
menggunakan tanda {}

p dalam CSS tidak terdapat dalam tanda { dan tanda } tetapi sebelum
tanda tersebut.

Jika dalam HTML untuk menunjukan Value atau nilai dari atribut kita
menggunakan sama dengan (=) sedangkan dalam CSS untuk menunjukan
value atau nilai dari property kita menggunakan tanda titik dua (:).

setelah memberi value di CSS, kita harus menambahkan tanda titik koma
(;) di belakangnya.

Jika selector lebih dari satu dan memiliki property dan value yang sama
maka gunakan tanda koma (,)
10.5
-

Class dan ID

Class Selector
Dengan class selector kita dapat mendefinisikan perbedaan style untuk

tag elemen html yang sama. Misalnya dua type paragraf, peragraf pertama
menggunakan align-left dan yang paragraf satu lagi menggunakan aligncenter.
Contoh Penggunaan atribut class di dalam HTML :
<p class=left>
Paragraf ini rata kiri
</p>
<p class=left>
paragraf ini rata tengah
</p>
maka penulisan pada file CSS-nya menjadi :
.left {text-align: left}
.center {text-align: center}
Keterangan :

10
1

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Pada penulisan nama class dalam file CSS diawali dengan tanda titik (.)
Tidak dianjurkan memberi nama class dengan angka
Nama class tidak boleh menggunakan spasi, jika nama class lebih dari dua
suku kata maka berikan tanda hubung (-) atau (_)
-

ID Selector
ID selector digunakan dengan tujuan mendefinisikan per-elemen dasar.

setiap halaman id selector hanya boleh digunakan dengan satu id unik, itulah
yang menjadi perbedaannya dengan class selector. Dengan class selector kita
dapat mendefinisikan perbedaan style untuk tag elemen html yang sama.
tetapi dengan id selector kita hanya diperbolehkan memanggil satu id untuk
satu elemen yang sama.
Contoh:
<p id=tebal>
Paragraf ini ditulis dengan huruf tebal dan warna merah
</p>
<p id=miring>
Paragraf ini ditulis dengan huruf miring dan warna biru
</p>
maka penulisan pada file CSS-nya menjadi :
#tebal { font-weight : bold;
color : red; }
#miring { font-style : italic;
color: blue; }
Keterangan :
Pada penulisan nama id dalam file CSS diawali dengan tanda pagar (#)
Nama id dapat ditulis dengan angka, huruf atau garis bawah
Karakter pertama sebaiknya huruf atau garis bawah (_)
10.6

Penulisan Komentar Dalam CSS

Dalam pemograman kita mengenal istilah komentar yaitu bermanfaat

untuk memberi penjelasan pada bagian tertentu dari kode yang kita tulis. dan
tulisan ini tidak akan ikut dieksekusi oleh browser.

10
2

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Cara memberi komentar pada CSS adalah diawali tanda /* dan di akhiri
tanda */
Contoh :
.left {text-align: left}
.center {text-align: center}/*ini adalah komentar*/

10
3

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

BAB XI
PROPERTY & VALUE SELECTOR [CSS]
Setelah pada bab sebelumnya dijelaskan konsep dasar css beserta cara
menggunakan kode CSS maka bab ini akan dijelaskan macam-macam property
dan value selector pada CSS.
11.1

Pengaturan Warna (Color)

Berikut adalah bentuk syntax untuk pengaturan warna:
Selector {color: value}

Nilai/value color dapat berupa kode hexadecimal(#ff0000), nama warna

dalam bahasa Inggris ("red") ataupun berupa nilai rgb (rgb(255,0,0)).
Names of the
colors
Red
Yellow
Green
Blue
White

rgb-values
255,0,0
255,255,0
0,128,0
0,0,255
255,255,25

hexadecimal
values
#FF0000
#FFFF00
#008000
#0000FF
#FFFFFF

5
Contoh:
h1 { color: #FF0000; }
hexadecimal */
pre { color: rgb(0,0,255); }

11.2

/* Menggunakan bentuk

/* Menggunakan

Pengaturan Background Halaman Web

Di dalam pembuatan background, CSS menggunakan property
background yang diletakkan di dalam selector body, tidak hanya itu juga,
Anda juga dapat menggunakan property-property background yang berkaitan
dengan gambar. Berikut adalah penggunaan property yang digunakan dalam
pengaturan background:

10
4

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

background-color
background-image
background-repeat
background-attachment
background-position
a) background-color
Elemen <body> memuat semua content pada sebuah dokumen
HTML. Sehingga, untuk mengubah warna latarbelakang pada halaman
web, property background-color harus digunakan pada elemen <body>.
Untuk dapat memberlakukan background-color pada elemenelemen lain, seperti contoh dibawah berikut background-color digunakan
pada elemen <body> dan <h1>:
body {
background-color: #FFCC66;
}

b) background-image
Dengan Property CSS background-image kita dapat menggunakan
gambar butterfly.gif sebagai latar belakang halaman web.

butterfly.gif
Pada contoh background-image ini digunakan file gambar
butterfly.gif. Bila ingin melakukan pengaturan background berupa
gambar pada halaman web, maka selector yang digunakan adalah body,
serta harus menetapkan lokasi dari image/gambar itu sendiri.

10
5

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

body {
background-color: #FFCC66;
background-image: url(butterfly.gif);
}

c) background-repeat
Pada contoh diatas, halaman web akan tertutupi oleh gambar
butterfly yang diulang-ulang (repeat) baik secara horizontal maupun
vertikal. Dengan menggunakan property background-repeat kita dapat
menampilkan gambar satu kali dalam satu halaman web. Tabel berikut ini
menampilkan empat macam value pada property background-repeat.
Value

Description

background-repeat: repeat-x The image is repeated horizontally

background-repeat: repeat-y The image is repeated vertically
background-repeat: repeat

The image is repeated both horizontally and

vertically

background-repeat: no-repeat The image is not repeated

Berikut adalah contoh implementasi, penggunaan value no-repeat
untuk menghilangkan pengulangan gambar background:
body {
background-color: #FFCC66;
background-image: url(butterfly.gif);

d) background-attachment
Attachment adalah cara peletakkan background berdasarkan
kondisi halaman. Dengan menggunakan teknik ini Anda dapat
menciptakan gambar background yang selalu ditampilkan ditengah
halaman walaupun halaman telah digulung (scroll) ke bawah. Tabel
dibawah ini menampilkan dua buah value pada property backgroundattachment.

10
6

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Value

Description

background-attachment:

The image scrolls with the page -

scroll

unlocked

background-attachment:
fixed

The image is locked

Berikut adalah contoh implementasi penggunaan value fixed, yang

akan membuat gambar tetap berada pada satu posisi:
body {
background-color: #FFCC66;
background-image: url(butterfly.gif);
background-repeat: no-repeat;

e) background-position
Secara default, sebuah gambar background akan berada pada
posisi kiri atas pada layar. Property background-position dapat digunakan
untuk mengubah posisi default ini. Terdapat beberapa cara untuk mengeset nilai pada property background-position. Contohnya, posisi dengan
value 100px 200px, berarti posisi background image adalah 100px dari
kiri dan 200px dari sisi atas, pada browser. Koordinat dapat berupa
persentase dari jendela browser, ataupun nilai fixed units (contohnya
dapat berupa pixels, centimetres) atau Anda pun dapat menggunakan kata
top, bottom, center, left dan right.
Tabel berikut menampilkan nilai yang digunakan pada property
background-position:
Value

Description

top left

Atas kiri halaman

top center

Atas tengah halaman

top right

Atas kanan halaman

center left

Tengah kiri halaman

center center

Pusat halaman

center right

Tengah kanan halaman

10
7

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

bottom left

Bawah kiri halaman

bottom center

Bawah tengah halaman

bottom right

Bawah kanan halaman

x-% y-%
Menggunakan nilai persen
Berikut ini adalah contoh penggunaan value pada property backgroundposition:
Value

Description

background-position: 2cm The image is positioned 2 cm from the left and 2 cm

2cm

down the page

background-position: 50% The image is centrally positioned and one fourth

25%

down the page

background-position: top

The image is positioned in the top-right corner of the

right

page
Syntax CSS berikut adalah contoh untuk setting background image
dengan posisi bawah kanan halaman:
body {
background-color: #FFCC66;
background-image: url(butterfly.gif);
background-repeat: no-repeat;

12.2

Susunan Penulisan Background

Penggunaan property background dapat memperpendek penulisan beberapa
property, sehingga memudahkan pembacaan. Perhatikan contoh berikut
dibawah!.

10
8

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

body {
background-color: #FFCC66;
background-image: url(butterfly.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}

Dengan menggunakan background kita mendapat hasil yang sama, hanya

dengan penulisan satu baris:
background: #FFCC66
right bottom;

url("butterfly.gif")

no-repeat

fixed

Susunannya adalah sebagai berikut:

[background-color] | [background-image] | [background-repeat] |
[background-attachment] | [background-position]
Jika nilai sebuah property tidak ditetapkan, maka secara otomatis akan di set
pada nilai default nya. Berikut ini adalah contoh jika nilai pada property
background-attachment dan background-position tidak ditetapkan:
background: #FFCC66

url("butterfly.gif")

no-repeat;

Maka nilai dari property akan diset dengan nilai default nya, yaitu scroll dan
kiri atas.
Tag elemen untuk membuat List di dalam dokumen HTML adalah:
<ul> digunakan untuk list yang tidak berurutan (unordered list) kemudian,
<ol> digunakan untuk list yang berurutan kemudian diikuti <li > adalah list
menu yang akan ditampilkan (list item).
Untuk lebih jelasnya perhatikan contoh berikut ini:
<ul>
<li>Menu A </li>
<li>Menu B </li>
<li>Menu C </li>

10
9

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

</ul>
Hasil yang akan ditampilkan di browser:

Menu A

Menu B

Menu C

<ol>
<li>Menu A </li>
<li>Menu B </li>
<li>Menu C </li>
</ol>
Hasil yang akan ditampilkan di browser:
1. Menu A
2. Menu B
3. Menu C
Didalam CSS ada beberapa perintah untuk mengontrol tampilan dari list style,
diantaranya adalah:
1. List Style Image
Kita dapat menggunakan sebuah image yang digunakan sebagai penanda
item pada lists dengan menggunakan property list-style-image. Berikut
adalah syntax penulisannya:
list-style-image: url(path_to_image.gif, jpg or png);
Value:

url

none
2. List Style Position

11
0

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Dengan menggunakan property list-style-position kita dapat

memposisikan list item.
list-style-position: value;
Values:

inside

outside

3. List Style Type

Dengan menggunakan property list-style-type kita bisa menentukan tipe
penanda dari sebuah list item.
list-style-type: value;
Values:

none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha

Note:

11
1

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Pada beberapa jenis browser, halaman web mungkin ditampilkan

berbeda, tergantung jenis browser yang digunakan (pada praktikum
ini, direkomendasikan menggunakan browser Firefox).
11.4 Hyperlink
Hyperlink atau juga sering disebut dengan Link adalah salah satu
metode yang dibuat dalam web site untuk memperkaya informasi yang
ditampilkan, karena akan dapat menciptakan beberapa hubungan dari web
yang kita bangun menuju web-web yang ada diluar. Selain itu juga akan
lebih memperkaya informasi yang akan ditampilkan di dalam halaman web.
Di dalam web HTML, tag yang digunakan untuk menciptakan link adalah
sebagai berikut:
<a href=alamat_file.htm> ...Pemicu </a>
Pada Tag diatas Anda dapat memasukkan file yang akan dijadikan
target link pada attribut href, sedangkan pemicu merupakan kata pemicu
yang digunakan atau dapat dimasukkan berupa gambar sebagai pemicunya.
Untuk melakukan pengaturan Link, HTML menyediakan atribut sebagai
berikut:
Atribut
link
vlink

Keterangan
Keadaan awal pemicu link
Keadaan
pemicu
link

alink

dikunjungi
Keadaan pemicu link yang aktif

setelah

Berikut adalah contoh pengaturan standar pada halaman web HTML

menggunkan nilai alink, link, dan vlink.
<html>
<head> <title>Pengaturan pada link</title></head>
<body alink=red link=green vlink=yellow>
<a href=http://www.google.co.id> Mesin pencari Google </a>
</body>
</html>

11
2

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Anda dapat mempergunakan CSS untuk mengatur warna hypertext

link, dengan warna yang berbeda untuk link yang belum pernah anda akses,
link yang pernah anda akses dan link yang akan kemudian anda akses serta
link yang aktif. Anda bahkan dapat mengatur warnanya pada saat kursor
mouse berada diatas daerah yang akan dilink. Berikut adalah atribut yang
digunakan untuk melakukan pengaturan Link:
Selector
a:link
a:visited
a:active
a:hover

Keterangan
Untuk warna link yang belum diakses
Untuk warna link yang telah diakses
Untuk warna link ketika link diklik
Untuk warna link ketika mouse berada
diatasnya

Berikut adalah syntax penulisan pada CSS:

a:link { property: value }
a:visited{ property: value }
a:active { property: value }
a:hover { property: value }
Apabila menggunakan class selector, syntaxnya menjadi:
a.class:link { property: value }
a.class:visited{ property: value }
a.class:active { property: value }
a.class:hover { property: value }
Dari syntax diatas, Anda dapat menggunakan semua property yang
berkaitan dengan pengaturan teks, font, background maupun border.
Kebanyakan orang ketika mereka melihat garis bawah dibawah
sebuah link selalu mengira itu adalah bagian teks yang diberi link.
Umumnya orang memberikan warna biru pada teks yang diberi link ke
halaman atau alamat internet lain. Anda disarankan untuk meninggalkan
warna link ini apabila warna latar belakang menyebabkan teks anda yang
diberi link jadi sulit terbaca. Berikut ini adalah pilihan formatting yang
umum digunakan pada link:

11
3

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

color
text-decoration
font-weight
font-style
font-family
font-size
background-color
Tabel telah lama kita kenal sebagai tag yang dipergunakan untuk

membuat layout sebuah Web. Karena kemudahannya, penggunaan tabel

lebih disukai untuk membuat layout situs menggunakan WYSIWYG Editor
seperti Dreamweaver atau Frontpage.
Fakta Menggunakan Tabel:
1) Lebih mudah untuk digunakan dibandingkan dengan CSS Layout
2) Proses desain layout tabel lebih mudah menggunakan editor
WYSIWYG seperti Dreamweaver atau Frontpage
3) Tabel dapat rusak dalam beberapa browser yang biasa kita gunakan,
yang menyebabkan disfungsi dalam layout.
4) Meningkatkan jumlah tag HTML yang tidak perlu, hingga akan
menaikan ukuran file.
Kini, tabel telah digunakan pada banyak halaman Web yang online di
internet, yaitu sekitar 95% menggunakan tabel untuk layouting. Biasanya,
kita mendapati tabel pada situs-situs dengan konten yang berat seperti
situs Portal, atau pada situs yang lebih sederhana seperti pada situs-situs
perusahaan korporat atau pendidikan.
Dari sekian banyak isu dari penggunaan tabel, yang paling
mengancam adalah mengenai kompabilitas browser baik itu bagi
pengguna mapun bagi developer Web. Dari sekian banyak browser yang
beredar diantaranya adalah Internet Explorer, Netscape, Mozilla, dan Opera
yang memiliki cara kerja yang berbeda. Hal ini berarti pengetesan harus

11
4

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

dilakukan untuk mengetes kompabilitas desain pada browser-browser

tersebut. Selain itu, menggunakan tabel untuk layout biasanya menggunakan
editor WYSIWYG yang biasanya menghasilkan tag-tag yang tidak perlu
dipergunakan yang akhirnya meningkatkan besar File. Cara membaca tabel
setiap browser berbeda-beda, pada browser-browser seperti Netscape dan IE
akan menampilkan isi tabel dihalaman Web begitu ditemukan tag penutup
dari tabel. Hal ini tentu akan terkesan bahwa situs terasa lambat dan berat.
1. Table Borders
Properti border digunakan untuk menentukan batas tabel dalam CSS.
Contoh:
table,td{
border: 1px solid blue;

Perhatikan contoh diatas, tabel memiliki garis ganda. Untuk menampilkan

garis tidak ganda, gunakan properti border-collapse.
2. Border Collapse
Berikut adalah value yang dapat digunakan pada property ini:
Property
border-collapse

Values
collapse
seperate
none
Berikut adalah contoh penerapan:
table{
border-collapse:collapse;
}

3. Border Spacing

11
5

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Property border-spacing digunakan untuk menetapkan jarak antar cell

pada tabel, border-spacing dapat memiliki sebuah nilai, sebagai contoh
border-spacing:5px; dimana jarak spasi 5px akan berlaku untuk semua
sisi. Atau juga dapat berisi dua buah nilai, misalnya border-spacing:5px
10px; yang akan menetapkan nilai pertama sebagai jarak spasi horizontal
dan nilai kedua sebagai jarak spasi vertikal.
table {
border-spacing:20px;

4. Lebar dan Tinggi Tabel

Lebar dan tinggi tabel didefinisikan dengan properti width dan height.
Contoh dibawah ini, lebar tabel 45% dan tinggi th 50px :
table {width:45%; }
th{
height:60px;
color:#3399CC;
}

11
6

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

5. Perataan Teks Tabel

Properti text-align pada tabel mengatur perataan teks secara horizontal,
seperti left, right, atau center :
td.kanan{
text-align:right;
font-style:italic;

Properti vertical-align pada tabel mengatur perataan teks secara vertikal,

seperti top, bottom, atau middle :
td {
height:50px;
vertical-align:bottom;
}

6. Tabel Padding

11
7

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Untuk memberi ruang antara batas border dengan konten dalam sebuah
tabel, gunakan properti padding pada elemen th dan td :
td {
padding:10px;
color:purple;

7. Warna Tabel
Untuk lebih menarik, tabel diberi warna pada border, background, atau
teks :
table, td, th {
border:3px solid purple;
}
th {
background-color:purple;
color:white;
font-style:italic;
}

Pada table berikut ditampilkan attribut formatting yang digunakan pada

Tabel HTML dan padanan CSSnya:

11
8

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

11
9

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

BAB XII
CSS BOX
Pada bab ini akan dijelaskan cara membuat CSS BOX dengan
menggunakan CSS. Didalam html, semua elemen seperti p, div, h dan lain-lain
pada dasarnya dianggap kolom kotak yang membungkus isi (html) didalam css,
istilah model kotak / box css digunakan ketika berbicara tentang design dan
tata letak.
Ada beberapa property dalam box model CSS diantaranya Border,
Padding, Margin dan content HTML itu sendiri. Setiap box model ini
memungkinkan kita untuk membuat jarak antara yang satu dengan yang lainya,
jadi dengan box model ini setiap kolom bisa di beri ukuran jarak antara satu
dengan yang lainya sehingga kotak-kotak kolom tidak tampil menyatu dan
tampak lebih bagus untuk di lihat. Agar lebih mudah memahami, perhatikan
gambar 12.1 yang merupakan tampilkan ilustrasi box model :

Gambar 12. 1 CSS BOX

Penjelasan :

12
0

Margin : memungkinkan kita untuk memberi jarak batas antara kolom

kotak satu dengan yang lainya. margin tidak memiliki background warna
(transparan)
Border sama halnya dengan border memungkinkan kita memberi jarak
bedanya border kita bisa mendefinisikan warna background
Padding memungkinkan kita untuk membuat lapisan pada contet HTML,
memiliki background tapi tergantung dari warna background content
Content adalah isi seperti text dan gambar yang ada di kolom elemen
HTML seperti div, p, h, dan lainnya

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

12.1. Margin
Margin adalah jarak area kerja dalam meletakkan komponen-komponen
web yang dihitung dari dinding-dinding browser. Sehingga dengan melakukan
pengaturan margin, berarti menciptakan sebuah pembatas antara area kerja
dengan dinding browser. Perhatikan gambar ilustrasi dibawah ini:

Gambar 12. 2 Layout Margin

Kode CSS untuk pengaturan margin seperti gambar illustrasi diatas adalah:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

Bentuk kode CSS diatas dapat juga ditulis dengan bentuk seperti berikut:
body {
margin: 100px 40px 10px 70px;
}

12
1

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Possible Values
Value
auto

Description
The browser sets the margin. The result of this is

dependant of the browser.

length
Defines a fixed margin (in pixels, pt, em, etc.)
%
Defines a margin in % of the containing element
Property margin dapat ditulis dengan bentuk dari satu hingga empat value,
seperti berikut di bawah ini:

margin:25px 50px 75px 100px;

o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px

margin:25px 50px 75px;

o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px

margin:25px 50px;
o top and bottom margins are 25px
o right and left margins are 50px

margin:25px;
o all four margins are 25px

Selain menggunakan tag <body> sebagai selector, Anda juga dapat

menggunakan tag HTML lain yang berhubungan dengan objek yang ditampilkan,
sebagai contoh Anda dapat menerapkannya pada elemen tabel.

12
2

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Gambar 12. 3 Contoh Layout dengan CSS Box

Border jika diartikan adalah pembatas. Pada umumnya seorang designer web
akan membuat sebuah pembatas yang digunakan untuk membatasi beberapa
element. Penggunaan border mengijinkan Anda untuk memberi pembatas
terhadap beberapa element web seperti seperti text, paragraph, maupun
gambar yang Anda tampilkan di halaman web. Berikut ini merupakan syntax
penggunaan property border:
selector {
border: width
style color;
}
Property border merupakan property shortcut untuk menetapkan width, style,
dan color dari border hanya dengan satu langkah.
a) Pengaturan ukuran border (border-width)
Property border-width memiliki syntax sebagai berikut:
selector { border-width :
Value }

12
3

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Berikut adalah ukuran yang dapat digunakan pada property border-width:

Properties

Value

Border-width

cm
px
em
%

Selain value bentuk diatas dapat juga digunakan value dalam bentuk lain,
yaitu: thin, medium dan thin, seperti yang ditunjukkan pada gambar berikut
ini.

Gambar 12. 3 Ketebalan Border

b) Pengaturan border width pada tiap sisi
Untuk melakukan pengaturan tiap sisi border maka dapat menggunakan
property border-top-width, border-right-width,

border-left-width,

border-bottom-width. Berikut adalah penulisan syntaxnya:

selector {
border-topwidth: value;
border-rightwidth: value;
border-downwidth: value;
border-leftwidth: value;
}

12
4

dan

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

c) Pengaturan warna border (border-color)

Pada saat melakukan perubahan warna border, property yang digunakan adalah
property border-color. Value yang digunakan dapat berupa bentuk RGB, nama
warna dalam bahasa inggris maupun kode hexa, contohnya:

"#123456",

"rgb(123,123,123)", "yellow". Berikut adalah penulisan syntax border-color:

selector { bordercolor: value }
d) Pengaturan warna pada setiap sisi border
Properties yang digunakan pada tahap perubahan warna border disesuaikan
dengan sisi yang akan diubah, misalnya akan dilakukan pengubahan warna
pada sisi bagian kanan, maka properties yang digunakan adalah border-rightcolor dan begitu juga pada sisi kiri, atas maupun bawah. Berikut adalah
penulisan syntax dalam pengaturan warna border:
selector {
border-top-color:
value;
border-rightcolor: value;
border-downcolor: value;
border-left-color:
value;
}

Properties
border-top-color
border-right-color
border-down-color
border-left-color

Value
border-color
border-color
border-color
border-color

e) Pengaturan bentuk border (border-style)

12
5

Keterangan
Merubah warna border atas
Merubah warna border kanan
Merubah warna border bawah
Merubah warna border kiri

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

Property border-style digunakan untuk menciptakan border dengan bentukbentuk yang berbeda, berikut adalah penulisan syntax border-color:
selector { border-style: value value
value }
Dari penulisan syntax diatas, property border-style digunakan dalam
pembuatan border, sedangkan value adalah nilai yang berkaitan dengan bentuk
style yang dikehendaki. Berikut adalah bentuk-bentuk style yang dapat
digunakan:
Properties
border-style

Value
None
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Contoh:
h1,h2,h3 { border-style:groove; }
f) Pengaturan style border kanan, kiri, atas dan bawah
Property border-right-style, border-left-style, border-top-style dan borderbottom-style digunakan untuk pengaturan style pada sisi border kanan, kiri,
atas dan bawah.
Contoh:
h1{
border-right-style:
dotted;

12
6

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

border-bottom-style:
solid;
border-left-style:
outset;
border-top-style: ridge;
}
12.2

Padding
Pengaturan padding, adalah melakukan pengaturan terhadap jarak

didalam (inner) antara border dengan content dari elemen. Tabel berikut
menampilkan jenis padding beserta nilainya.
Properties

Value

padding-top

padding-top
padding-right
padding-bottom
padding-left
Length
%

padding-right

length
%

padding-bottom

length
%

padding-left

length
%

padding

Keterangan
Pengaturan batas isi web dengan
objek yang ada di sampingnya.
Pengaturan jarak padding sebelah
atas
Pengaturan jarak padding sebelah
kanan
Pengaturan jarak padding sebelah
bawah
Pengaturan jarak padding sebelah
kiri

Untuk melakukan pengaturan padding pada halaman, maka Anda harus

menggunakan tag <body> sebagai selectornya, syntaknya adalah sebagai
berikut:
body {
padding-top: value;
padding-right: value;
padding-bottom: value;

12
7

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

12.3

Dimensi Pada Halaman Web

Pengaturan dimensi adalah teknik pengaturan ukuran pada suatu objek

web. Dengan menggunkan property yang berkaitan dengan dimensi ini,

Anda dapat dengan mudah melakukan pengaturan ukuran besar atau kecil
suatu objek web.
12.3.1. Dimensi Gambar
Di dalam aplikasi web pada web HTML, biasanya Anda melakukan
pengaturan besar atau kecil sebuah objek dengan menentukan lebar dan
panjangnya. Begitu juga dengan CSS yang menyediakan fungsi untuk
pengaturan dimensi.

Pada tabel berikut ini ditampilkan property serta

nilai/value yang berkaitan dengan pengaturan dimensi gambar.

Properti

Val

es

ue
leng

width

th
Aut
o
leng

height

th
Aut

Keterangan
Pengaturan lebar objek, untuk
menggunakan nilai alami gunakan
auto.

Pengaturan tinggi objek.

o
Anda dapat menerapkannya dengan bentuk penulisan kode CSS seperti
berikut:
img.class{
width: value;
height: value;
}

12
8

D3 MANAJEMEN INFORMATIKA STMIK YADIKA BANGIL - 2014

12.3.2. Dimensi Pada Paragraf

Apabila pada gambar yang dilakukan adalah pengaturan lebar dan
tinggi, maka yang dapat dilakukan di dalam pengaturan paragraf adalah
melakukan pengaturan yang berkaitan dengan jarak tinggi antar baris pada
paragraf. Untuk dapat memberi jarak tinggi antar baris pada paragraf,
property yang digunakan adalah line-height. Syntaxnya adalah:
p.class{
line-height: value;
}

Pada tabel berikut ini ditampilkan nilai/value dalam pengaturan dimensi

halaman:
Properti

Val

es

ue
leng

lineheight

12
9

th
auto

Keterangan
Ukuran panjang
Ukuran otomatis